/* circle-song.fr — v1.0
   Concept : l’affiche du flyer. Deux couleurs franches, jaune et rouille, en aplats ;
   pas de fonds sombres ni crème. Les oiseaux en ouverture, la flèche « Inscription » en clôture.
   Contrastes (WCAG AA) :
     rouille #B04E22 sur jaune = 3,2:1 → titres et textes ≥ 24 px uniquement
     papier #FFF8E1 sur rouille = 5:1 → tout texte
     brun #2B1A10 sur jaune = 10:1 → texte courant
     jaune sur rouille = 3,2:1 → titres ≥ 24 px uniquement */

@font-face {
  font-family: "Squada One"; /* équivalent libre (OFL) de BrickShapers, la typo du flyer */
  src: url("../fonts/squada-one.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --jaune: #E4C747;
  --rouille: #B04E22;   /* ≈ #B65628 du flyer, juste assez dense pour 3:1 sur jaune */
  --ocre: #D6A53E;      /* décor : disque de la photo */
  --rouge-mdm: #EA3627; /* logo du collectif uniquement */
  --brun: #2B1A10;      /* texte courant sur jaune */
  --papier: #FFF8E1;    /* texte sur rouille */

  /* Squada One : une seule graisse, déclarée sur 100–900 pour éviter le faux gras */
  --font-display: "Squada One", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-texte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --max: 70rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7rem);
  --radius: 1.25rem;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--jaune);
  color: var(--brun);
  font: 1.125rem/1.65 var(--font-texte);
  -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1;
  color: var(--rouille);
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.005em;
  margin-bottom: 1.5rem;
}
h3 { font-size: 1.6rem; font-weight: 800; letter-spacing: .01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--brun); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute; left: var(--gutter); top: -4rem;
  background: var(--brun); color: var(--jaune);
  padding: .6rem 1rem; z-index: 20; border-radius: .5rem;
}
.skip:focus { top: 1rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem;
  padding: .75rem 1.75rem;
  background: var(--rouille); color: var(--papier);
  border-radius: 999px;
  font: 800 1.35rem/1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease;
}
.btn { max-width: 100%; text-align: center; }
.btn:hover { transform: translateY(-2px); background: var(--brun); }

/* ---------- Hero : l’affiche ----------
   Titre et infos en haut, puis la branche du flyer en pleine largeur.
   Elle entre par le bord gauche de l’écran (tronc coupé par la fenêtre),
   seule animation non déclenchée de la page. */
.hero { padding-top: clamp(2rem, 5vw, 4rem); overflow-x: clip; }
.hero__haut { display: grid; gap: 1.5rem 3rem; align-items: end; position: relative; z-index: 1; }
@media (min-width: 60rem) { .hero__haut { grid-template-columns: 1.45fr 1fr; } }
.hero__affiche, .hero__infos { min-width: 0; }
.hero__kicker {
  font: 800 1.5rem/1.15 var(--font-display);
  color: var(--rouille);
  margin-bottom: 1rem;
}
.hero__title {
  font-size: clamp(3.25rem, 7.4vw, 6.25rem);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}
.hero__title span { display: block; }
/* Comme sur le flyer : trois verbes séparés par de l’espace, sans puces */
.hero__motto {
  display: flex; flex-wrap: wrap; gap: .1em .9em;
  font: 800 clamp(1.5rem, 3vw, 2.2rem)/1.1 var(--font-display);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rouille);
  margin: 0;
}
.hero__lead { max-width: 32rem; font-size: 1.15rem; margin-bottom: 1.25rem; }
.hero__lead p { margin: 0 0 .75rem; }
.hero__lead p:first-child { font-size: 1.3rem; font-weight: 700; }
.hero__facts {
  list-style: none; padding: 0; margin: 0 0 1.5rem;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.hero__facts li {
  border: 2px solid var(--brun);
  border-radius: 999px;
  padding: .3rem .95rem;
  font-weight: 700;
  line-height: 1.35;
}

.hero__branche {
  display: block;
  /* plus large que l’écran sur mobile, le tronc sort par la gauche */
  width: 150vw; max-width: none;
  margin: 1.5rem 0 0 -36vw;
  fill: var(--rouille);
  transform-origin: 0 100%;
  animation: branche-entre 1.5s cubic-bezier(.16, .8, .24, 1) .15s both;
}
@media (min-width: 60rem) {
  .hero__branche { width: min(84vw, 84rem); margin: .75rem 0 0 -3vw; }
}
@keyframes branche-entre {
  from { transform: translateX(-70%) rotate(-7deg); }
  to   { transform: none; }
}

/* Invitation au scroll : en bas du premier écran, dans le coin laissé libre par la branche.
   Bureau uniquement (sur mobile, le contenu déborde déjà de l’écran). La flèche rebondit
   trois fois une fois la branche posée, puis s’arrête. */
.hero { position: relative; }
.invite { display: none; }
@media (min-width: 60rem) {
  .invite {
    position: absolute; z-index: 2;
    top: max(calc(100svh - 7.5rem), 32rem);
    right: max(calc(var(--gutter) - .35rem), calc((100vw - var(--max)) / 2 + var(--gutter) - .35rem));
    display: inline-flex; align-items: center; gap: .9rem;
    min-height: 44px;
    padding: .35rem .35rem .35rem 1.1rem;
    border-radius: 999px;
    background: var(--jaune);
    color: var(--rouille); text-decoration: none;
    font: 800 1.5rem/1 var(--font-display);
  }
}
.invite__fleche {
  flex: none; position: relative;
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  border: 3px solid var(--rouille);
  transition: background .2s ease;
}
.invite__fleche::before, .invite__fleche::after { content: ""; position: absolute; left: 50%; }
.invite__fleche::before { top: .7rem; height: 1.5rem; border-left: 3px solid var(--rouille); translate: -50% 0; }
.invite__fleche::after {
  top: 1.25rem; width: .8rem; height: .8rem;
  border: solid var(--rouille); border-width: 0 3px 3px 0;
  translate: -50% 0; rotate: 45deg;
}
.invite__fleche::before, .invite__fleche::after { animation: invite-rebond .9s ease-in-out 1.9s 3; }
.invite:hover .invite__fleche { background: var(--rouille); }
.invite:hover .invite__fleche::before, .invite:hover .invite__fleche::after { border-color: var(--papier); }
@keyframes invite-rebond { 50% { transform: translateY(.35rem); } }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.hero + #contenu > .section:first-child { padding-top: clamp(2rem, 5vw, 3.5rem); }
.section--rouille { background: var(--rouille); color: var(--papier); }
.section--rouille h2 { color: var(--jaune); }
.section--rouille h3 { color: var(--papier); }
.section--rouille :focus-visible { outline-color: var(--papier); }

/* ---------- C’est quoi : définition, principe (texte + 3 temps côte à côte), ouvert à tous ---------- */
.principe { display: grid; gap: 2.5rem 5rem; align-items: start; }
@media (min-width: 56rem) { .principe { grid-template-columns: 1.15fr 1fr; } }
.principe__texte { max-width: 38rem; font-size: 1.2rem; }

/* 3 temps : vraie séquence, d’où les numéros ; reliés par un trait comme une boucle qui se construit */
.temps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.75rem; }
/* Sur mobile, les 3 temps arriveraient sous le texte et le répéteraient : on ne les montre qu’en colonne voisine */
@media (max-width: 55.99rem) { .temps { display: none; } }
.temps li:not(:last-child)::after {
  content: ""; position: absolute; left: 2.05rem; top: 4.25rem; bottom: -1.75rem;
  border-left: 3px dotted var(--rouille);
}
.temps li { display: flex; gap: 1.25rem; align-items: flex-start; position: relative; }
.temps li > div { min-width: 0; padding-top: .2rem; }
.temps__num {
  flex: none;
  display: grid; place-items: center;
  width: 4.25rem; height: 4.25rem;
  border-radius: 50%;
  background: var(--jaune);
  border: 3px solid var(--rouille);
  font: 900 2.4rem/1 var(--font-display);
  color: var(--rouille);
}
.temps h3 { margin-bottom: .3rem; }
.temps p { margin: 0; }

.ouvert {
  display: grid; gap: 1.25rem 5rem;
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
}
@media (min-width: 56rem) { .ouvert { grid-template-columns: 14rem 1fr; } }
.ouvert__titre { font-size: clamp(2rem, 3.5vw, 2.6rem); }
.ouvert__liste {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.5rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.ouvert__liste li { border-top: 4px solid var(--rouille); padding-top: .9rem; }

/* ---------- Origine (bande sombre) ---------- */
.origine {
  display: grid; gap: 2.5rem 4rem;
  align-items: center;
  margin-bottom: 3.5rem;
}
@media (min-width: 52rem) { .origine { grid-template-columns: 3fr 2fr; } }
.origine__texte { min-width: 0; max-width: 40rem; }
.citation {
  margin: 0;
  justify-self: center;
  width: min(100%, 16rem);
  aspect-ratio: 1;
  max-width: 100%;
  display: grid; place-content: center;
  padding: 1.75rem;
  text-align: center;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--brun);
}
@media (min-width: 52rem) { .citation { width: min(100%, 21rem); padding: 2.5rem; } }
.citation blockquote { margin: 0; }
.citation p {
  font: 800 1.6rem/1.08 var(--font-display);
  color: var(--rouille);
  margin-bottom: .9rem;
}
.citation p::before { content: "«\00a0"; }
.citation p::after { content: "\00a0»"; }
.citation figcaption { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.citation small { display: block; font-weight: 400; font-size: .8rem; }

.video { margin: 0; }
.video__facade, .video__iframe {
  display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; border: 0;
  border-radius: var(--radius); overflow: hidden;
}
.video__facade {
  position: relative;
  display: grid; place-content: center; justify-items: center; gap: 1.25rem;
  padding: 1.5rem; text-align: center; text-decoration: none;
  background:
    radial-gradient(circle at 50% 42%, transparent 3.2rem, rgb(228 199 71 / .14) 3.3rem 3.5rem, transparent 3.6rem 5.4rem, rgb(228 199 71 / .1) 5.5rem 5.7rem, transparent 5.8rem),
    var(--brun);
  color: var(--papier);
  isolation: isolate;
}
.video__facade::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgb(43 26 16 / .25), rgb(43 26 16 / .8));
}
.video__play {
  width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: var(--jaune); position: relative;
  box-shadow: 0 0 0 .6rem rgb(228 199 71 / .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.video__play::after {
  content: ""; position: absolute; left: 2.15rem; top: 1.65rem;
  border-left: 1.6rem solid var(--brun);
  border-top: 1.1rem solid transparent; border-bottom: 1.1rem solid transparent;
}
.video__facade:hover .video__play { transform: scale(1.06); box-shadow: 0 0 0 1rem rgb(228 199 71 / .3); }
.video__titre {
  font: 800 clamp(1.25rem, 2.6vw, 1.75rem)/1.15 var(--font-display);
  max-width: 30rem;
  text-shadow: 0 1px 8px rgb(0 0 0 / .6);
}
.video figcaption { font-size: .95rem; margin-top: .75rem; }
.video__vignette {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease;
}
.video__facade:hover .video__vignette { transform: scale(1.03); }
@media (max-width: 30rem) { .video__facade { aspect-ratio: 1; } }
.medias { display: grid; gap: 1.5rem; max-width: 48rem; }
.audio { margin: 0; }
/* Audio : façade compacte ; au clic, le lecteur YouTube (taille minimale imposée par YouTube) remplace la barre */
.audio .video__iframe { width: min(100%, 24rem); }
.audio__facade {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1rem 1.5rem 1rem 1rem;
  border-radius: 999px;
  background: var(--jaune); color: var(--brun);
  text-decoration: none;
}
.audio__play { background: var(--rouille); }
.audio__play::after { border-left-color: var(--papier); }
.audio__play { flex: none; width: 3.75rem; height: 3.75rem; box-shadow: none; }
.audio__play::after { left: 1.45rem; top: 1.1rem; border-left-width: 1.1rem; border-top-width: .78rem; border-bottom-width: .78rem; }
.audio__facade:hover .audio__play { transform: scale(1.06); box-shadow: 0 0 0 .5rem rgb(176 78 34 / .25); }
.audio__texte { font-size: .95rem; line-height: 1.35; }
.audio__titre { display: block; font: 800 1.5rem/1.1 var(--font-display); color: var(--rouille); }
.frise ul { margin: .35rem 0 .5rem; padding-left: 1.2rem; }

/* ---------- Séance ---------- */
.frise {
  list-style: none; padding: 0; margin: 2.5rem 0 var(--section);
  counter-reset: etape;
  display: grid; gap: 0;
  max-width: 46rem;
}
.frise > li {
  position: relative;
  padding: 0 0 2.25rem 4.25rem;
  counter-increment: etape;
}
.frise > li::before {
  content: counter(etape);
  position: absolute; left: 0; top: -.35rem;
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--rouille); color: var(--papier);
  font: 900 1.5rem/1 var(--font-display);
}
.frise > li::after {
  content: ""; position: absolute; left: 1.45rem; top: 2.9rem; bottom: .25rem;
  border-left: 2px dashed var(--rouille);
}
.frise > li:last-child { padding-bottom: 0; }
.frise > li:last-child::after { display: none; }
.frise h3 { margin-bottom: .35rem; }
.frise p { margin: 0; }
.frise p + p, .frise ul + p { margin-top: .5rem; }

.h2--petit { font-size: clamp(2rem, 5vw, 3.25rem); }
.effets {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.effets li { border-top: 4px solid var(--rouille); padding-top: 1rem; }
.effets h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.cta-ligne { margin-top: 3.5rem; }

/* ---------- Sabine & collectif ---------- */
.sabine { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 44rem) { .sabine { grid-template-columns: 16rem 1fr; } }
.sabine__texte { min-width: 0; max-width: 40rem; }
.sabine__photo {
  display: block;
  width: 100%; max-width: 16rem; height: auto;
  aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
  outline: 4px solid var(--rouille); outline-offset: 8px; /* le cercle, encore */
}
/* Logo du collectif : carré blanc comme sur le flyer (le fond blanc fait partie du dessin) */
.collectif { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: flex-start; margin-top: 2.5rem; }
.collectif > div { flex: 1 1 16rem; min-width: 0; }
.collectif__logo { flex: none; width: 9rem; height: auto; rotate: -3deg; box-shadow: 0 6px 18px rgb(43 26 16 / .18); }
.collectif__titre { margin: 0 0 .75rem; }

/* ---------- Infos ---------- */
.infos {
  display: grid; gap: 2rem; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.infos div { border-top: 3px solid var(--jaune); padding-top: .9rem; min-width: 0; }
.infos dt { font: 800 1.5rem/1.2 var(--font-display); color: var(--jaune); }
.infos dd { margin: .4rem 0 0; font: 800 2rem/1.15 var(--font-display); }
.infos__detail { display: block; margin-top: .5rem; font: 400 1rem/1.5 var(--font-texte); }
.infos__detail a { font-weight: 700; }

/* ---------- Contact : la flèche « Inscription + Informations » du flyer ---------- */
.contact { padding-bottom: calc(var(--section) + 2rem); }
.contact__grid { display: grid; gap: 2rem 3rem; align-items: center; }
@media (min-width: 52rem) { .contact__grid { grid-template-columns: 1fr 1.1fr; } }
.fleche {
  background: var(--rouille); color: var(--papier);
  padding: 2rem 2rem 3.75rem;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), 50% 100%, 0 calc(100% - 2rem));
}
@media (min-width: 52rem) {
  .fleche {
    padding: 2.5rem 6rem 2.5rem 2.5rem;
    clip-path: polygon(0 0, calc(100% - 4rem) 0, 100% 50%, calc(100% - 4rem) 100%, 0 100%);
  }
}
.fleche h2 { color: var(--jaune); margin-bottom: 1rem; }
.contact__actions { display: grid; gap: 1.5rem; min-width: 0; }
.contact__lien {
  display: block;
  padding-block: .5rem;
  color: var(--rouille);
  font: 800 clamp(1.5rem, 3.6vw, 2.4rem)/1.1 var(--font-display);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact__lien:hover .contact__valeur { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.contact__label {
  display: block;
  font: 700 1rem/1.3 var(--font-texte);
  color: var(--brun);
  margin-bottom: .2rem;
}

/* ---------- Footer ---------- */
.footer { background: var(--rouille); color: var(--papier); padding-block: 2rem 5.5rem; font-size: .9rem; }
.footer p { margin: .3rem 0; }

/* Bouton fixe mobile */
.contact-fixe {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 10;
  display: inline-flex; align-items: center; min-height: 3rem;
  padding: .7rem 1.4rem;
  background: var(--rouille); color: var(--papier);
  border-radius: 999px; text-decoration: none;
  font: 800 1.2rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .05em;
  box-shadow: 0 4px 14px rgb(43 26 16 / .3);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.contact-fixe--masque { opacity: 0; visibility: hidden; transform: translateY(1rem); }
@media (prefers-reduced-motion: reduce) { .contact-fixe { transition: none; } }
@media (min-width: 52rem) { .contact-fixe { display: none; } .footer { padding-bottom: 2rem; } }

/* ---------- Mentions légales ---------- */
.legal .wrap { max-width: 46rem; }
.legal .hero__title { margin-bottom: 2.5rem; }
.legal h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 2.5rem 0 .75rem; }