/* ═══════════════════════════════════════════════════════════════════════
   Acrylik'Impro — feuille de style unique
   Direction « Acrylique ». Le nom de l'école veut dire peinture : trois
   coups de pinceau translucides traversent la page, et là où ils se
   croisent une quatrième couleur naît. C'est la seule décoration, et
   elle ne dépend d'aucune photo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────── 1. Fondations */
:root {
  --paper:  #FFFCF5;
  --ink:    #171410;
  /* Le noir franc, réservé au texte posé sur un aplat saturé. L'encre du
     site est légèrement chaude : sur le magenta plein elle tombe à 4,08
     pour 1, sous le seuil de 4,5. Le noir pur remonte à 4,67, et à cette
     taille l'œil ne fait pas la différence. */
  --ink-fort: #000;
  --soft:   #3A342D;
  --grey:   #6E675E;
  --rule:   rgba(23, 20, 16, .12);

  /* Les cinq couleurs du logo */
  --cy: #00A3E0;
  --mg: #E6007E;
  --yl: #FFD400;
  --gr: #3AB54A;
  --vi: #8B1E8E;

  /* Les couleurs délavées ne servent plus qu'aux blocs qui portent des
     paragraphes : un aplat saturé sous du texte courant n'est pas
     lisible. Tout ce qui est une étiquette porte la couleur pleine. */
  --cy-wash: #E4F5FD;
  --mg-wash: #FDE7F1;
  --yl-wash: #FEF5D4;
  --gr-wash: #E9F7EB;

  /* Deux caracteres, pas trois. Bricolage Grotesque ne sert qu'aux titres
     et aux noms ; Instrument Sans porte tout le reste, y compris les
     petites etiquettes. Ce sont la taille, la graisse et l'interlettrage
     qui hierarchisent — pas un troisieme dessin de lettre. */
  --disp:  'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --body:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gut:   clamp(1.25rem, 4vw, 3.5rem);
  --ease:  cubic-bezier(.22, 1, .36, 1);
}

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

html { height: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(.9rem, .3vw + .82rem, .97rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Pas de `overflow: hidden` : c'est la contrainte « tout tient dans un
     écran » qui produisait les grands vides. La page tient d'elle-même
     sur un écran normal, et défile plutôt que de se faire rogner sur un
     petit. */
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--mg);
  outline-offset: 3px;
  border-radius: 3px;
}

.u-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ─────────────────────────────────────────────────── 2. La peinture */
.paint {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* La peinture dérive. Quatre tracés, quatre cycles de durées premières
   entre elles : les recouvrements ne repassent jamais au même endroit, et
   les couleurs nées du croisement changent en continu. C'est le sujet de
   la page qui bouge, pas un effet posé dessus.
   Uniquement des transformations, donc rien à recalculer à chaque image :
   la carte graphique fait tout le travail. */
.paint path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: derive var(--d) cubic-bezier(.42, 0, .58, 1) infinite alternate;
}
.paint .p1 { --d: 13s; --dx:  -9%; --dy:   6%; --dr:   9deg; --ds: 1.16; }
.paint .p2 { --d: 17s; --dx:   8%; --dy:  -7%; --dr:  -8deg; --ds: 1.2;  animation-delay: -4s; }
.paint .p3 { --d: 11s; --dx:  11%; --dy:   9%; --dr: -12deg; --ds: 1.13; animation-delay: -7s; }
.paint .p4 { --d: 19s; --dx:  -7%; --dy: -11%; --dr:  14deg; --ds: 1.28; animation-delay: -2s; }

@keyframes derive {
  from { transform: none; }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(var(--ds)); }
}

.page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  /* minmax(0,…) : sans ça, une ligne trop large élargit toute la grille
     et la page déborde horizontalement sur mobile. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
}

/* ───────────────────────────────────────────────────── 3. En-tête */
.topbar {
  display: flex;
  /* center, pas baseline : le mot-symbole est deux fois plus gros que les
     liens, et aligner leurs lignes de base les faisait flotter trop bas. */
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  min-width: 0;
  padding: clamp(1.1rem, 2.4vw, 1.75rem) var(--gut) 0;
}

.brand { text-decoration: none; min-width: 0; }
.brand__img { height: clamp(30px, 4vw, 52px); width: auto; }
.brand__word {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  letter-spacing: -.035em;
  white-space: nowrap;
}
.brand__word i { font-style: normal; }
.brand__word .k1 { color: var(--cy); }
.brand__word .k2 { color: var(--mg); }
.brand__word .k3 { color: var(--yl); }
.brand__word .k4 { color: var(--gr); }
.brand__word .k5 { color: var(--vi); }

/* ── Les trois liens sortants ─────────────────────────────────────────
   Ce sont des destinations extérieures, pas des actions du site : ni
   cadre, ni pastille, ni couleur. Trois choses les tenaient mal avant :
   ils flottaient en gris pâle par-dessus la peinture, sans rien pour les
   relier entre eux, et dans une graisse de texte courant qui les faisait
   passer pour du contenu.
   Ils portent maintenant l'étiquette du site — capitales, interlettrage,
   petite taille, la même que le surtitre sous le logo — et un filet
   vertical les sépare : trois pairs dans une même liste, pas trois mots
   posés là. */
.topbar__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem 0;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.topbar__nav a {
  position: relative;
  white-space: nowrap;
  padding: .25rem clamp(.7rem, 1.6vw, 1.05rem);
  /* 72 % : assez pour rester net par-dessus un coup de pinceau clair,
     assez pour ne pas concurrencer le mot-symbole. Un repli plein est
     donne juste avant, color-mix n'etant pas connu des vieux Safari. */
  color: var(--grey);
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  text-decoration: none;
  transition: color .16s ease;
}
.topbar__nav a:first-child { padding-left: 0; }
.topbar__nav a:last-child  { padding-right: 0; }
.topbar__nav a:hover { color: var(--ink); }

/* Le filet entre deux liens. Sur ::before du second, pour qu'il n'y en ait
   jamais un en trop en bout de ligne quand la barre passe à la ligne. */
.topbar__nav a + a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  height: .85em;
  border-left: 1px solid var(--rule);
  transform: translateY(-50%);
}

/* ────────────────────────────────────────────────────── 4. Accueil */
.stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gut);
}

/* L'etiquette : le seul traitement des petits textes secondaires du
   site. Surtitres, horaires, libelles de champ, intertitres de la carte
   de visite — tous passent par ces trois lignes. */
.kicker,
.panel__eyebrow,
.group__age,
.group__when,
.field label,
.vcard h3,
.callout__soon {
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--grey);
}

.kicker {
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.title {
  font-family: var(--disp);
  font-weight: 800;
  /* Plancher en vw : le titre porte des mots longs et insécables. */
  font-size: clamp(2.1rem, 6.6vw, 5.75rem);
  line-height: .92;
  letter-spacing: -.048em;
  max-width: 14ch;
  overflow-wrap: break-word;
}

.lede {
  margin-top: clamp(1.1rem, 2.4vw, 1.5rem);
  max-width: 40ch;
  font-size: clamp(1rem, 1.2vw, 1.06rem);
  color: var(--soft);
}

/* Une ligne, pas un cartouche. Le point de couleur suffit à la signaler,
   et le texte reste dans la même colonne que le chapeau. */
.now {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  max-width: min(40ch, 100%);
  margin-top: .75rem;
  font-weight: 500;
  color: var(--ink);
}
.now__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mg);
  flex: none;
  transform: translateY(-1px);
}

/* ── Les trois portes : des pastilles de peinture ────────────────── */
.doors {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.door {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink-fort);
  /* La pastille est un bouton sur l'accueil, un lien sur la page 404.
     Sans cette ligne, la seconde herite du soulignement des liens. */
  text-decoration: none;
  padding: .9rem 1.5rem 1rem;
  border-radius: 999px;
  background: var(--sw);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.door:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(23, 20, 16, .18);
}
.door:active { transform: translateY(0); box-shadow: none; }
.door__k {
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .04em;
  /* Pas d'opacité réduite : sur le magenta plein, une encre à 74 % tombe
     très en dessous du seuil de lisibilité. C'est la taille qui
     hiérarchise, pas la transparence. */
  color: var(--ink-fort);
}
.door__n {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  letter-spacing: -.035em;
  line-height: 1.05;
}

/* Pastilles et coups de pinceau portent les mêmes couleurs pleines.
   Les tracés restent translucides — c'est le recouvrement qui fait naître
   la quatrième couleur, et c'est tout le sujet de la page. */
.d-ecole    { --sw: var(--cy); }
.d-adultes  { --sw: var(--mg); }
.d-jeunesse { --sw: var(--yl); }

/* ────────────────────────────────────────────────── 5. Coordonnées */
.footbar {
  display: flex;
  align-items: center;
  gap: 1rem clamp(1.25rem, 3vw, 2.25rem);
  flex-wrap: wrap;
  min-width: 0;
  padding: 0 var(--gut) clamp(1.4rem, 2.8vw, 1.9rem);
  font-size: .88rem;
  color: var(--grey);
}

/* Les boutons vivent tous dans le bloc « 8. Boutons » plus bas. Le
   bouton du pied de page n'a rien de particulier : il porte simplement
   les deux classes du système. */

.coords {
  display: flex;
  align-items: center;
  gap: .5rem clamp(.9rem, 2.2vw, 1.4rem);
  flex-wrap: wrap;
  min-width: 0;
}
.coords a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: border-color .16s ease;
}
.coords a:hover { border-bottom-color: var(--ink); }

/* ═══════════════════════════════════════════════════ 6. Les panneaux */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(23, 20, 16, .34);
  /* Le flou laisse deviner la peinture derrière la feuille au lieu de la
     noyer sous du gris : on sait toujours d'où l'on vient. */
  backdrop-filter: blur(7px) saturate(1.1);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  opacity: 0;
  transition: opacity .32s var(--ease);
}
.scrim.is-open { opacity: 1; }

/* ═══ LIRE AVANT DE TOUCHER À CE BLOC ════════════════════════════════
   L'attribut `hidden` du HTML ne pose `display: none` que depuis la
   feuille du navigateur : la moindre règle `display` sur le même élément
   l'écrase, sans avertissement. Un `.panel { display: flex }` laissait
   donc les quatre panneaux fermés affichés, transparents et CLIQUABLES
   par-dessus toute la page — un clic sur « Jeunesse » atterrissait sur le
   bouton d'envoi du formulaire de contact.
   La règle ci-dessous rétablit l'attribut. Elle n'est pas décorative.
   ════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

.panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(0px, 3vw, 2.5rem);
  pointer-events: none;
}

.panel__sheet {
  position: relative;
  width: min(1060px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border-radius: clamp(1rem, 1.6vw, 1.5rem);
  box-shadow: 0 2px 6px rgba(23, 20, 16, .06),
              0 28px 80px rgba(23, 20, 16, .28);
  opacity: 0;
  /* La feuille arrive de dessous en se dépliant. Le ressort est léger :
     un panneau qu'on ouvre trente fois ne doit pas faire le spectacle. */
  transform: translateY(22px) scale(.985);
  transition: opacity .28s var(--ease),
              transform .38s cubic-bezier(.16, 1, .3, 1);
  pointer-events: auto;
}
.panel.is-open .panel__sheet { opacity: 1; transform: none; }

/* Chaque panneau reçoit sa touche de peinture, en haut à droite : le
   même geste que l'accueil, à l'échelle de la feuille. */
.panel__sheet::before {
  content: '';
  position: absolute;
  top: -7rem;
  right: -6rem;
  width: min(26rem, 46%);
  aspect-ratio: 1.35;
  background: var(--pc);
  /* Discrète : elle signe le panneau, elle ne le décore pas. Plus opaque,
     elle passait devant le titre et avalait la croix de fermeture. */
  opacity: .22;
  mix-blend-mode: multiply;
  border-radius: 58% 42% 47% 53% / 44% 56% 44% 56%;
  transform: rotate(-9deg);
  pointer-events: none;
}

/* --pc : la couleur du panneau, pour les aplats. --pt : la même, rendue
   lisible en texte sur fond clair. --pw : la version délavée des blocs. */
.p-ecole    { --pc: var(--cy); --pt: #0079A8; --pw: var(--cy-wash); }
.p-adultes  { --pc: var(--mg); --pt: #C4006B; --pw: var(--mg-wash); }
.p-jeunesse { --pc: var(--yl); --pt: #8A6A00; --pw: var(--yl-wash); }
.p-contact  { --pc: var(--gr); --pt: #1F7C2E; --pw: var(--gr-wash); }
.p-legal    { --pc: var(--vi); --pt: #6B1670; --pw: #F4EAF5; }

/* La croix est posée sur la feuille, pas dans la zone qui défile : elle
   reste au même endroit quelle que soit la longueur du panneau. */
.panel__close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  z-index: 3;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 12px rgba(23, 20, 16, .18);
  cursor: pointer;
  transition: background .18s ease, transform .28s var(--ease);
}
.panel__close:hover { background: var(--ink); transform: rotate(90deg); }
.panel__close:active { transform: rotate(90deg) scale(.94); }
.panel__close:hover svg { stroke: var(--paper); }
.panel__close svg {
  width: 1.05rem; height: 1.05rem;
  fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round;
}

.panel__scroll {
  position: relative;
  z-index: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 20, 16, .22) transparent;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.25rem)
           clamp(1.75rem, 4vw, 2.75rem);
}
.panel__scroll::-webkit-scrollbar { width: 9px; }
.panel__scroll::-webkit-scrollbar-thumb {
  background: rgba(23, 20, 16, .2);
  border: 3px solid var(--paper);
  border-radius: 99px;
}
.panel__scroll::-webkit-scrollbar-thumb:hover { background: rgba(23, 20, 16, .34); }

/* ── Les panneaux sont centrés ────────────────────────────────────────
   Tout le contenu est aligné au centre et posé dans une colonne centrée :
   le panneau se lit comme une affiche, pas comme une page de document.
   Seuls les champs du formulaire gardent leur alignement à gauche, plus
   bas — une étiquette centrée au-dessus d'un champ ne se relie plus à
   rien quand l'œil descend la colonne. */
.panel__scroll { text-align: center; }
.panel__scroll > * { margin-inline: auto; }

.panel__head {
  margin-bottom: clamp(1.25rem, 2.6vw, 1.85rem);
  max-width: 42ch;
  /* La croix occupe le coin : on rentre le titre des deux côtés pour
     qu'il reste centré sans jamais passer dessous. */
  padding-inline: 2.75rem;
}

.panel__eyebrow {
  font-family: var(--body);
  font-size: .78rem;
  color: var(--grey);
}
.panel__title {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.045em;
  margin-top: .35rem;
}
.panel__price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .45rem;
  margin-top: .7rem;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.035em;
  color: var(--pt);
}
.panel__price small {
  font-family: var(--body);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: 0;
  color: var(--grey);
}
.panel__note,
.panel__foot {
  margin-top: .55rem;
  font-size: .9rem;
  color: var(--grey);
}
.panel__foot {
  margin-top: clamp(1.1rem, 2.4vw, 1.6rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

/* ── Le bandeau photo, quand le fichier existe ───────────────────── */
.shot {
  margin: 0 0 clamp(1.25rem, 2.6vw, 1.75rem);
  border-radius: clamp(.75rem, 1.4vw, 1.25rem);
  overflow: hidden;
  background: var(--pw);
}
.shot img {
  width: 100%;
  aspect-ratio: 21 / 8;
  object-fit: cover;
}

/* ── Texte courant ──────────────────────────────────────────────── */
.prose { max-width: 62ch; display: grid; gap: .85rem; }
.prose p { color: var(--soft); }
.prose__lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 500;
  color: var(--ink) !important;
}

.callout {
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  background: var(--pw);
  border-radius: clamp(.75rem, 1.4vw, 1.25rem);
  max-width: 62ch;
}
.callout h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.035em;
  margin-bottom: .4rem;
}
.callout p { color: var(--soft); }
.callout__soon {
  margin-top: .7rem !important;
  font-family: var(--body);
  font-size: .78rem;
  color: var(--grey) !important;
}

.promesse {
  margin-top: clamp(1.25rem, 2.6vw, 1.75rem);
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.15;
  letter-spacing: -.04em;
  max-width: 24ch;
}

/* ── Les fiches de cours ────────────────────────────────────────── */
.groups {
  display: grid;
  gap: .75rem;
}
@media (min-width: 900px) {
  .groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.group {
  background: var(--pw);
  border-radius: clamp(.75rem, 1.4vw, 1.25rem);
  padding: clamp(1.1rem, 2.2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.group__head { display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.group__name {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -.04em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.group__age {
  font-family: var(--body);
  font-weight: 400;
  font-size: .76rem;
  color: var(--grey);
}
.group__when {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .15rem .7rem;
  font-family: var(--body);
  font-size: .78rem;
  color: var(--grey);
}
.group__when .is-hour  { color: var(--ink); font-weight: 500; }
.group__when .is-price { color: var(--pt); font-weight: 500; }
.group__text { font-size: .89rem; color: var(--soft); }

/* ── Boutons ────────────────────────────────────────────────────── */
.panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: clamp(1.4rem, 2.8vw, 1.9rem);
}

/* ── Un seul bouton, deux variantes ──────────────────────────────────
   Tout ce qui se clique et porte un libellé passe par .btn : le bouton
   du pied de page, ceux des panneaux, celui du formulaire, le lien vers
   Maps. Même hauteur, même rayon, même réaction au survol, au clic et au
   clavier. Il n'existe pas de bouton défini ailleurs dans ce fichier. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.85rem;
  padding: .75rem 1.4rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--body);
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .16s ease, color .16s ease,
              border-color .16s ease, transform .16s var(--ease),
              box-shadow .16s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(23, 20, 16, .18);
}
/* Le bouton s'enfonce quand on appuie : sans ça, sur un écran tactile,
   rien ne dit que le doigt a été pris en compte. */
.btn:active { transform: translateY(0); box-shadow: none; }

.btn--primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.btn--primary:hover {
  background: var(--pc, var(--mg));
  border-color: var(--pc, var(--mg));
  /* Le jaune de la jeunesse réclame de l'encre, les autres du papier. */
  color: var(--pcx, var(--paper));
}
.p-jeunesse .btn--primary:hover { --pcx: var(--ink); }

.btn--wide { width: 100%; }
.btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; flex: none; }

/* ── Formulaire ─────────────────────────────────────────────────── */
.flash {
  max-width: 62ch;
  margin-bottom: 1.25rem;
  padding: .95rem 1.2rem;
  border-radius: .85rem;
  font-size: .92rem;
}
.flash--ok { background: #EDF8EE; box-shadow: inset 0 0 0 1.5px #2F9E52; }
.flash--ko { background: var(--mg-wash); box-shadow: inset 0 0 0 1.5px var(--mg); }

.contact { display: grid; gap: clamp(1.5rem, 3.4vw, 2.75rem); }
@media (min-width: 860px) {
  .contact { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* Le formulaire reprend l'alignement à gauche : une étiquette centrée
   au-dessus d'un champ ne se relie plus à rien quand l'œil descend la
   colonne, et une valeur saisie centrée est illisible. */
.form { display: grid; gap: .9rem; text-align: left; }
.field { display: grid; gap: .3rem; min-width: 0; }
.field-row { display: grid; gap: .9rem; }
@media (min-width: 560px) {
  .field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.field label {
  font-family: var(--body);
  font-size: .76rem;
  color: var(--grey);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 1.5px solid var(--rule);
  border-radius: .7rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  transition: border-color .16s ease;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--ink); outline: none; }

.form__legal { font-size: .78rem; color: var(--grey); }

/* piège à robots : hors écran, jamais rempli par un humain */
.u-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ── Carte de visite ────────────────────────────────────────────── */
.vcard {
  align-self: start;
  padding: clamp(1.4rem, 2.6vw, 1.8rem);
  background: var(--pw);
  border-radius: clamp(.75rem, 1.4vw, 1.25rem);
  display: grid;
  justify-items: center;
  gap: .45rem;
}
.vcard h3 {
  font-family: var(--body);
  font-size: .76rem;
  color: var(--grey);
  margin-top: .7rem;
}
.vcard h3:first-child { margin-top: 0; }
.vcard__tel {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -.04em;
  text-decoration: none;
}
.vcard__mail,
.vcard__link { font-size: .89rem; }
.vcard__addr { font-size: .89rem; color: var(--soft); }
.vcard__social { display: flex; justify-content: center; gap: 1rem; font-size: .89rem; }
.vcard .btn { margin-top: .4rem; }

/* ── La signature du pied de page ────────────────────────────────── */
/* Pas de flex ici. C'est une ligne de texte courant, et un conteneur flex
   en fait des boites separees : « Site par » restait un noeud de texte,
   tandis que le lien et le bouton devenaient des elements flex a part
   entiere. Centres par la HAUTEUR de leur boite — que leur filet de
   soulignement transparent rend 1,5 px plus haute — leur texte remontait
   d'un demi-pixel au-dessus du reste de la ligne. En flux normal, tout
   repose sur la meme ligne de base, quelle que soit la hauteur des boites. */
.signature {
  width: 100%;
  margin-top: .2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  line-height: 1.9;
  color: var(--grey);
}
.signature a,
.signature__lien {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: color .16s ease, border-color .16s ease;
}
/* Le lien des mentions légales est un bouton : il ouvre un panneau, il ne
   mène pas à une page. Il doit donc s'en remettre entièrement au texte. */
.signature__lien {
  border-width: 0 0 1.5px;
  border-style: solid;
  background: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  /* Un bouton est un bloc en ligne, et les navigateurs le posent sur la
     ligne centrale plutot que sur la ligne de base. On le remet dessus. */
  vertical-align: baseline;
}
.signature a:hover,
.signature__lien:hover { color: var(--ink); border-bottom-color: var(--ink); }
.signature__sep { color: var(--rule); margin: 0 .4rem; }

/* ── Le panneau des mentions légales ─────────────────────────────── */
.legal {
  display: grid;
  gap: clamp(1.25rem, 2.6vw, 1.75rem);
  max-width: 62ch;
  text-align: left;   /* un texte juridique se lit en colonne, pas centré */
}
.legal__bloc {
  padding: clamp(1.1rem, 2.4vw, 1.5rem);
  background: var(--pw);
  border-radius: clamp(.75rem, 1.4vw, 1.25rem);
  display: grid;
  gap: .5rem;
}
.legal h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.035em;
}
.legal h4 {
  margin-top: .5rem;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink);
}
.legal p { font-size: .875rem; color: var(--soft); }
.legal a { color: var(--pt); }

/* ═══════════════════════════════════════════════ 7. Petits écrans */
@media (max-width: 700px) {
  /* Sur un téléphone, les coups de pinceau prennent tout l'écran et
     passent sous le texte. On les recadre vers le haut à droite, là où
     il n'y a rien à lire. */
  .paint { height: 62vh; inset: 0 0 auto 0; }

  .stage { padding-top: clamp(1.5rem, 6vw, 2.5rem); }
  .title { max-width: none; }
  .doors { flex-direction: column; align-items: stretch; }
  .door { border-radius: 1.4rem; }
  .footbar { align-items: flex-start; flex-direction: column; }
  .shot img { aspect-ratio: 16 / 10; }

  /* Sur un téléphone, un panneau n'est pas une fenêtre au milieu de
     l'écran : c'est une feuille qui monte du bas, et qui laisse voir la
     page au-dessus d'elle. Le pouce reste près de la croix. */
  .panel { align-items: flex-end; padding: 0; }
  .panel__sheet {
    max-height: 92dvh;
    border-radius: 1.5rem 1.5rem 0 0;
    transform: translateY(100%);
    transition: opacity .2s linear, transform .34s cubic-bezier(.16, 1, .3, 1);
  }
  .panel__head { padding-right: 3rem; }
}

/* ════════════════════════════════════════════════ 8. Préférences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  /* La peinture s'arrête franchement. Un cycle « infinite alternate »
     ramené à une milliseconde ne s'arrête pas : il clignote. */
  .paint path { animation: none !important; transform: none !important; }
}