@charset "UTF-8";
/* ==========================================================================
   Cheveux & Sourires — feuille de styles du site
   Contraintes de conception :
   - clientele agee ou a mobilite reduite : le contraste prime sur l'esthetique
   - fond clair impose, turquoise et cuivre en accents seulement
   - texte de base 19 px, cibles tactiles >= 48 px, contraste AA au minimum
   - animations reduites au strict necessaire, prefers-reduced-motion respecte
   - aucune police distante : aucune requete vers un serveur tiers
   ========================================================================== */

/* ------------------------------------------------------- 0. Police */
/* ------------------------------------------------------- 0. Police */
/* Playfair Display, auto-hebergee. Le site ne fait aucune requete vers un
   serveur tiers : les fichiers sont servis avec le reste.
   Regular + italique, sous-ensemble latin + latin-ext, 48,4 ko au total.
   L'italique est une vraie italique (contours redessines, italicAngle -14) :
   c'est ce qui fait que le mot d'accent des titres se lit comme different et
   pas comme penche.
   font-display: swap — le texte s'affiche tout de suite en Georgia et bascule
   quand la police arrive. Jamais de titre invisible. */
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* --------------------------------------------------------- 1. Jetons */
/* La page est PASTEL — base « Aqua », le turquoise de marque #06a6b4 amene
   au pastel, froid, sans une trace de jaune ni de beige. Trois tons : base,
   alterne, presque blanc. UN SEUL bloc fonce, la section rendez-vous.
   LE PRINCIPE : les photos sont le seul aplat sature de la page. Tout le
   reste vit en pastel et les surfaces sont en BLANC PUR, pour qu'elles
   flottent — mesure : blanc sur la base 1,21:1, sur l'alterne 1,35:1.
   Chaque valeur ci-dessous est mesuree, pas presumee. */
:root {
  --paper:      #faf8f5;   /* creme : ne sert plus qu'au texte du bloc fonce */
  --blanc:      #ffffff;   /* toutes les surfaces : cartes, champs, modaux */
  --base:       #dcedf1;   /* encre 14,4:1 · turquoise profond 5,9:1 */
  --alt:        #c9e3e6;   /* encre 12,9:1 · turquoise profond 5,3:1 */
  --net:        #f6fbfc;   /* encre 16,6:1 — les sections les plus propres */
  --chrome:     #ecf6f8;   /* barre du haut, panneau de menu, pied */

  --surface:      var(--blanc);
  --surface-warm: var(--chrome);

  /* Texte : l'encre chaude du site, inchangee. */
  --ink:      #1c1a18;   /* 14,4:1 sur la base */
  --ink-soft: #4a4643;   /*  7,8:1 sur la base */

  /* Turquoise. MESURE QUI COMMANDE LE RESTE : #057e89 — le jeton texte de la
     version creme — tombe a 4,0:1 sur la base pastel et ne porte PLUS de
     texte ; son role passe a #04626a (5,9:1 base, 5,3:1 alterne). Le
     turquoise de marque reste decoratif, comme il l'a toujours ete. */
  --turq:       #06a6b4;  /* aplats decoratifs uniquement — 2,5:1 */
  --turq-vif:   #04626a;  /* role interactif : liens, focus */
  --turq-carte: #04626a;  /* sur les cartes blanches : 7,1:1 */
  --turq-text:  #04626a;  /* pictogrammes porteurs de sens */
  --turq-deep:  #04626a;  /* aplat de la section rendez-vous */

  /* Cuivre : les variantes profondes de la version creme tiennent toutes. */
  --copper:      #c48458; /* aplats decoratifs */
  --copper-text: #a16339;
  --copper-deep: #7d4d2c; /* 5,9:1 sur la base, 5,3:1 sur l'alterne */

  /* Traits : du turquoise profond dilue, jamais un gris neutre. */
  --rule:        rgba(4, 98, 106, .16);
  /* Couleur pleine et non un alpha : ce filet porte du sens (bordures de
     boutons, de champs, de puces) et doit tenir 3:1 sur CHAQUE fond de la
     page. En rgba il se composait sur le fond et tombait a 2,0-2,2:1. */
  --rule-strong: #547f85;   /* 3,4:1 sur blanc, 3,2:1 sur le chrome */

  /* Fonds des bandeaux typographiques (22-09-2026) : 10 des 15 cartes ont
     une photo, et un bandeau gris sur les 5 autres se serait lu comme une
     image qui n'a pas charge. Ce sont des teintes de la maison, plus claires
     que --base pour qu'un bandeau ne se lise pas comme un trou dans la carte
     blanche. Mesure : titre turquoise profond sur turquoise pale 6,3:1,
     titre cuivre profond sur cuivre pale 6,0:1. */
  --turq-pale:   #e4f4f7;
  --copper-pale: #fbeadf;

  /* Encadres d'information */
  --warn-bg:   #edf3f4;
  --warn-rule: #a16339;
  --warn-ink:  #6b4e12;   /*  7,0:1 sur --warn-bg */

  /* Hauteur de la barre fixe. Elle commande le retrait haut du hero et
     scroll-padding-top : une seule valeur a changer si la barre grossit. */
  --head-h: 85px;

  --radius: 10px;
  /* Ombre teintee du bleu de la page, pas grise : c'est elle qui decolle les
     surfaces blanches du pastel. */
  --shadow: 0 1px 2px rgba(4, 60, 66, .07), 0 8px 22px rgba(4, 60, 66, .10);

  --wrap: 68rem;
  --measure: 38rem;

  /* Police d'affichage. Georgia et ses equivalents restent en repli : ils sont
     presents partout, et c'est ce qui s'affiche pendant le swap. Playfair a
     ete retenue parce que ses pleins tiennent sur le voile du hero, la ou une
     serif a fort contraste commence a disparaitre. */
  --font-display: "Playfair Display", Georgia, "Iowan Old Style",
                  "Palatino Linotype", Palatino, "Times New Roman", serif;

  --step-0: 1.1875rem;  /* 19 px — plancher impose */
  --step-1: 1.375rem;
  --step-2: 1.625rem;
  --step-3: 2rem;
  --step-4: 2.5rem;

  /* Colibri du logo, silhouette derivee du fichier de marque. */
  --colibri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M27.7 0L29.4 0.4 31.6 4.3 38.7 13 42.6 19.4 48.3 31.8 50 38.7 52.3 38.4 54.4 34.8 57.8 32.1 61.2 30.6 63.8 30.3 69.1 30.6 75.6 33.9 90.1 33.2 92.4 33.5 93.1 34.3 92.1 35.3 79.4 37.2 75.7 38.6 73.2 40.2 69.9 43.4 64.8 46.7 63.1 49 61.1 56.6 58.3 62.7 52 68.9 45.1 72.9 44.6 80.5 42.8 85.2 38.5 90.9 34.1 93.1 31.1 95.7 26.6 97.1 23.8 97.2 19.2 99.6 16.2 100 15.5 98.2 15.9 93.9 12.2 93.4 11.5 92.7 12.5 89.4 12.3 87.8 7.8 87.4 6.9 86.2 9 82.2 8.2 78.9 8.7 77.4 13.1 74.9 23.4 70.5 29.2 66.7 32.5 63.4 32.3 61.7 26.4 58.4 24.9 55.5 20.8 52.7 19.1 49.1 15.5 45.5 14.5 40.1 11.6 34.6 11.1 29.5 8.8 25.2 8.3 22.4 8.6 17.3 7.4 13.4 7.5 4.4 8.3 2.2 9.5 1.6 10.6 2.2 12.6 5.3 18.7 11.5 22.6 14.6 24.6 14.7 25.2 12.9 25.3 6.9 27.6 0.1Z' fill='%2306A6B4'/%3E%3C/svg%3E");
  /* Variante claire, pour les fonds sombres ou le turquoise disparait. */
  --colibri-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M27.7 0L29.4 0.4 31.6 4.3 38.7 13 42.6 19.4 48.3 31.8 50 38.7 52.3 38.4 54.4 34.8 57.8 32.1 61.2 30.6 63.8 30.3 69.1 30.6 75.6 33.9 90.1 33.2 92.4 33.5 93.1 34.3 92.1 35.3 79.4 37.2 75.7 38.6 73.2 40.2 69.9 43.4 64.8 46.7 63.1 49 61.1 56.6 58.3 62.7 52 68.9 45.1 72.9 44.6 80.5 42.8 85.2 38.5 90.9 34.1 93.1 31.1 95.7 26.6 97.1 23.8 97.2 19.2 99.6 16.2 100 15.5 98.2 15.9 93.9 12.2 93.4 11.5 92.7 12.5 89.4 12.3 87.8 7.8 87.4 6.9 86.2 9 82.2 8.2 78.9 8.7 77.4 13.1 74.9 23.4 70.5 29.2 66.7 32.5 63.4 32.3 61.7 26.4 58.4 24.9 55.5 20.8 52.7 19.1 49.1 15.5 45.5 14.5 40.1 11.6 34.6 11.1 29.5 8.8 25.2 8.3 22.4 8.6 17.3 7.4 13.4 7.5 4.4 8.3 2.2 9.5 1.6 10.6 2.2 12.6 5.3 18.7 11.5 22.6 14.6 24.6 14.7 25.2 12.9 25.3 6.9 27.6 0.1Z' fill='%23FAF8F5'/%3E%3C/svg%3E");
  /* Motif de fond : deux oiseaux espaces dans une tuile de 340 px, a des
     tailles differentes pour que la repetition ne saute pas aux yeux. */
  --colibri-motif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='%2306A6B4'%3E%3Cpath d='M27.7 0L29.4 0.4 31.6 4.3 38.7 13 42.6 19.4 48.3 31.8 50 38.7 52.3 38.4 54.4 34.8 57.8 32.1 61.2 30.6 63.8 30.3 69.1 30.6 75.6 33.9 90.1 33.2 92.4 33.5 93.1 34.3 92.1 35.3 79.4 37.2 75.7 38.6 73.2 40.2 69.9 43.4 64.8 46.7 63.1 49 61.1 56.6 58.3 62.7 52 68.9 45.1 72.9 44.6 80.5 42.8 85.2 38.5 90.9 34.1 93.1 31.1 95.7 26.6 97.1 23.8 97.2 19.2 99.6 16.2 100 15.5 98.2 15.9 93.9 12.2 93.4 11.5 92.7 12.5 89.4 12.3 87.8 7.8 87.4 6.9 86.2 9 82.2 8.2 78.9 8.7 77.4 13.1 74.9 23.4 70.5 29.2 66.7 32.5 63.4 32.3 61.7 26.4 58.4 24.9 55.5 20.8 52.7 19.1 49.1 15.5 45.5 14.5 40.1 11.6 34.6 11.1 29.5 8.8 25.2 8.3 22.4 8.6 17.3 7.4 13.4 7.5 4.4 8.3 2.2 9.5 1.6 10.6 2.2 12.6 5.3 18.7 11.5 22.6 14.6 24.6 14.7 25.2 12.9 25.3 6.9 27.6 0.1Z' transform='translate(22 34) scale(0.62)'/%3E%3Cpath d='M27.7 0L29.4 0.4 31.6 4.3 38.7 13 42.6 19.4 48.3 31.8 50 38.7 52.3 38.4 54.4 34.8 57.8 32.1 61.2 30.6 63.8 30.3 69.1 30.6 75.6 33.9 90.1 33.2 92.4 33.5 93.1 34.3 92.1 35.3 79.4 37.2 75.7 38.6 73.2 40.2 69.9 43.4 64.8 46.7 63.1 49 61.1 56.6 58.3 62.7 52 68.9 45.1 72.9 44.6 80.5 42.8 85.2 38.5 90.9 34.1 93.1 31.1 95.7 26.6 97.1 23.8 97.2 19.2 99.6 16.2 100 15.5 98.2 15.9 93.9 12.2 93.4 11.5 92.7 12.5 89.4 12.3 87.8 7.8 87.4 6.9 86.2 9 82.2 8.2 78.9 8.7 77.4 13.1 74.9 23.4 70.5 29.2 66.7 32.5 63.4 32.3 61.7 26.4 58.4 24.9 55.5 20.8 52.7 19.1 49.1 15.5 45.5 14.5 40.1 11.6 34.6 11.1 29.5 8.8 25.2 8.3 22.4 8.6 17.3 7.4 13.4 7.5 4.4 8.3 2.2 9.5 1.6 10.6 2.2 12.6 5.3 18.7 11.5 22.6 14.6 24.6 14.7 25.2 12.9 25.3 6.9 27.6 0.1Z' transform='translate(196 198) scale(0.44)'/%3E%3C/g%3E%3C/svg%3E");
  /* Le meme motif en creme, pour les fonds nuit. */
  --colibri-motif-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 340'%3E%3Cg fill='%23FAF8F5'%3E%3Cpath d='M27.7 0L29.4 0.4 31.6 4.3 38.7 13 42.6 19.4 48.3 31.8 50 38.7 52.3 38.4 54.4 34.8 57.8 32.1 61.2 30.6 63.8 30.3 69.1 30.6 75.6 33.9 90.1 33.2 92.4 33.5 93.1 34.3 92.1 35.3 79.4 37.2 75.7 38.6 73.2 40.2 69.9 43.4 64.8 46.7 63.1 49 61.1 56.6 58.3 62.7 52 68.9 45.1 72.9 44.6 80.5 42.8 85.2 38.5 90.9 34.1 93.1 31.1 95.7 26.6 97.1 23.8 97.2 19.2 99.6 16.2 100 15.5 98.2 15.9 93.9 12.2 93.4 11.5 92.7 12.5 89.4 12.3 87.8 7.8 87.4 6.9 86.2 9 82.2 8.2 78.9 8.7 77.4 13.1 74.9 23.4 70.5 29.2 66.7 32.5 63.4 32.3 61.7 26.4 58.4 24.9 55.5 20.8 52.7 19.1 49.1 15.5 45.5 14.5 40.1 11.6 34.6 11.1 29.5 8.8 25.2 8.3 22.4 8.6 17.3 7.4 13.4 7.5 4.4 8.3 2.2 9.5 1.6 10.6 2.2 12.6 5.3 18.7 11.5 22.6 14.6 24.6 14.7 25.2 12.9 25.3 6.9 27.6 0.1Z' transform='translate(22 34) scale(0.62)'/%3E%3Cpath d='M27.7 0L29.4 0.4 31.6 4.3 38.7 13 42.6 19.4 48.3 31.8 50 38.7 52.3 38.4 54.4 34.8 57.8 32.1 61.2 30.6 63.8 30.3 69.1 30.6 75.6 33.9 90.1 33.2 92.4 33.5 93.1 34.3 92.1 35.3 79.4 37.2 75.7 38.6 73.2 40.2 69.9 43.4 64.8 46.7 63.1 49 61.1 56.6 58.3 62.7 52 68.9 45.1 72.9 44.6 80.5 42.8 85.2 38.5 90.9 34.1 93.1 31.1 95.7 26.6 97.1 23.8 97.2 19.2 99.6 16.2 100 15.5 98.2 15.9 93.9 12.2 93.4 11.5 92.7 12.5 89.4 12.3 87.8 7.8 87.4 6.9 86.2 9 82.2 8.2 78.9 8.7 77.4 13.1 74.9 23.4 70.5 29.2 66.7 32.5 63.4 32.3 61.7 26.4 58.4 24.9 55.5 20.8 52.7 19.1 49.1 15.5 45.5 14.5 40.1 11.6 34.6 11.1 29.5 8.8 25.2 8.3 22.4 8.6 17.3 7.4 13.4 7.5 4.4 8.3 2.2 9.5 1.6 10.6 2.2 12.6 5.3 18.7 11.5 22.6 14.6 24.6 14.7 25.2 12.9 25.3 6.9 27.6 0.1Z' transform='translate(196 198) scale(0.44)'/%3E%3C/g%3E%3C/svg%3E");
  /* Grain photographique pour le pastel : motas NOIRES. Les blanches ont ete
     mesurees d'abord et ecartees — sur des fonds deja proches du blanc elles
     donnent un ecart de 1 a 3 niveaux, invisible. Seuls les 40 % de points
     les plus clairs du bruit deviennent des grains.
     DEUX INTENSITES, et c'est une contrainte de contraste, pas un caprice :
     le grain assombrit le fond, donc il mange du ratio. Sur la base, 9,5 %
     laissent le cuivre profond a 4,7:1. Sur l'alterne — plus fonce — la meme
     valeur descendait le sur-titre cuivre a 4,55:1, deux centiemes au-dessus
     du plancher : il y tombe a 7 %. Ecarts mesures : 11-12 niveaux sur la
     base, 8-9 sur l'alterne, pour un seuil de perception releve a ~8.
     Jamais anime. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2375 0 0 0 -0.1425'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url%28%23g%29'/%3E%3C/svg%3E");
  --grain-alt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.175 0 0 0 -0.105'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url%28%23g%29'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* barre collante : 85 px sur mobile, 105 px au-dessus de 62rem.
     Sans cela une ancre depose le titre vise DERRIERE l'en-tete. */
  scroll-padding-top: 6.5rem;
}

body {
  margin: 0;
  /* Le presque blanc : il n'apparait que derriere la barre d'action et au
     rebond de defilement — chaque section porte son propre ton par-dessus. */
  background: var(--net);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  /* place pour la barre d'action fixe en bas sur mobile */
  padding-bottom: 5.5rem;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: var(--step-4); letter-spacing: -.015em; }
h2 { font-size: var(--step-3); letter-spacing: -.01em; }
h3 { font-size: var(--step-1); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--turq-vif); }
a:hover { color: var(--copper-deep); }

/* Un seul style de focus, toujours visible, jamais supprime. */
:focus-visible {
  outline: 3px solid var(--turq-vif);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Deplace vers le haut plutot que vers la gauche : un left:-9999px sort de la
   boite du document et se signale comme un debordement horizontal. */
.skip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-200%);
  background: var(--turq-deep);
  color: #fff;
  padding: 1rem 1.25rem;
  z-index: 100;
  font-weight: 600;
}
.skip:focus { transform: translateY(0); }

/* Reserve aux lecteurs d'ecran (legendes de tableaux). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.measure { max-width: var(--measure); }

section { padding-block: clamp(4.5rem, 3.25rem + 4.5vw, 9rem); }  /* 4,5 rem sur telephone, 9 sur grand ecran, un seul pas (13-09) */
section + section { position: relative; }
/* Separateur : un colibri pose sur la limite, a la place du filet. Turquoise
   de marque a 45 % — decoratif, aucun texte ne s'y pose : il vit dans le
   rembourrage haut de la section, au-dessus du sur-titre. */
section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  background: var(--colibri) center / contain no-repeat;
  opacity: .45;
}
/* Pas d'oiseau a l'entree du presque blanc : le separateur y perdrait sa
   moitie basse. Ni a l'entree du bloc fonce : il y est creme, et sa moitie
   HAUTE tombait alors sur du pastel clair (1,1:1). La coupe franche fait le
   travail dans les deux cas. */
section + .sec--net::before,
section + .sec--sombre::before { content: none; }

.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: min(var(--measure), 62ch);   /* jamais plus de 65 caracteres par ligne */
}

.eyebrow {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin-bottom: .75rem;
}

/* --------------------------------------------------------- 3. Boutons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 56px;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Sur le pastel : le principal est l'aplat turquoise profond avec du blanc
   (7,1:1), le secondaire une surface blanche cerclee. La section rendez-vous,
   seul bloc fonce, inverse ces deux roles plus bas. */
.btn--primary { background: var(--turq-deep); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: #034c52; color: #fff; }
.btn--second {
  background: var(--blanc);
  color: var(--turq-deep);
  border-color: var(--turq-deep);
}
.btn--second:hover, .btn--second:focus-visible { background: var(--base); color: var(--turq-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 1.75rem; }
.btn-row .btn { flex: 1 1 15rem; }

.btn .ico { width: 24px; height: 24px; flex: none; fill: currentColor; }

/* --------------------------------------------------------- 4. En-tete */
/* Barre collante, jamais escamotee. Le modele d'origine se retire au
   defilement vers le bas et revient vers le haut ; pour cette clientele une
   barre qui va et vient est une cible mouvante. Elle reste donc en place, et
   on paie ce choix en hauteur : d'ou le logo reduit et la rangee compacte. */
.site-head {
  /* Fixe et non collante : le hero commence a y=0 et passe DESSOUS. C'est ce
     qui fait flotter la barre sur l'image au lieu de la repousser. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;              /* au-dessus du contenu et de la barre du bas,
                               sous le lien d'evitement (100) et les modaux */
  background: var(--surface-warm);
  border-bottom: 1px solid var(--rule);
  transition: background-color .25s ease, border-color .25s ease;
}
/* Au-dessus du hero, la barre flotte sur l'image : blanc translucide + flou.
   Le voile floute vit sur un PSEUDO-ELEMENT et jamais sur la barre elle-meme :
   un backdrop-filter pose sur l'en-tete fixe ferait de lui le containing
   block de son descendant fixe .mainnav — le panneau de menu se resoudrait
   alors contre la boite de 72 px de la barre au lieu de la fenetre, et les
   liens seraient inatteignables. Un pseudo n'a pas de descendants : le piege
   disparait, menu ouvert comme ferme.
   Sans JavaScript la classe n'est jamais posee et la barre reste opaque. */
.site-head--sur-image {
  background: transparent;
  border-bottom-color: transparent;
}
.site-head--sur-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.site-head__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-block: .625rem;
}
/* --- budget de la barre sur telephone --------------------------------------
   Trois choses doivent y tenir : le logo, les trois langues et le bouton
   Menu. Le telephone n'y est pas — il est dans la barre fixe du bas.
   Mesure a 390 px : la gouttiere fait 350 px. Les cibles ne se reduisent
   jamais sous 48 px ; c'est le logo et le rembourrage qui cedent. */
.site-head__logo { flex: none; line-height: 0; }
.site-head img { width: auto; height: 52px; }   /* 74 px de large */
.site-head__droite { display: flex; align-items: center; gap: .5rem; }
.site-head .btn { min-height: 48px; padding-inline: 1.1rem; }
/* Le telephone est deja dans la barre fixe du bas sur mobile : inutile deux
   fois, et la place manque. */
.site-head__tel { display: none; }

/* --- bouton Menu (sous 64rem) --------------------------------------------
   Sans JavaScript il n'ouvrirait rien : il n'existe pas. La liste de
   raccourcis du hero reste alors la navigation. */
.menu-btn { display: none; }
.js .menu-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 48px;
  padding: 0 .8rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-btn .ico { width: 24px; height: 24px; }
.menu-btn:hover { border-color: var(--turq-vif); color: var(--turq-vif); }

/* --- navigation principale ------------------------------------------------
   Sous 64rem : panneau plein ecran. Au-dessus : barre de liens en ligne. */
.mainnav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;             /* couvre la barre du bas, passe sous les modaux */
  background: var(--surface-warm);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 max(1.5rem, env(safe-area-inset-bottom));
}
.mainnav.open { display: block; }
.mainnav__tete {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 1.25rem;
  background: var(--surface-warm);
  border-bottom: 2px solid var(--rule-strong);
}
.mainnav__titre { font-family: var(--font-display); font-size: 1.5rem; }
.mainnav__x {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 48px;
  padding: 0 .9rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  cursor: pointer;
}
.mainnav__x .ico { width: 22px; height: 22px; }
.mainnav__x:hover { border-color: var(--turq-vif); color: var(--turq-vif); }
.mainnav__liste { list-style: none; margin: 0; padding: .5rem 1.25rem; }
.mainnav__liste a {
  display: block;
  padding: 1rem .25rem;
  min-height: 64px;         /* pleine largeur : on peut viser large */
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.mainnav__liste li:last-child a { border-bottom: 0; }
.mainnav__liste a:hover { color: var(--turq-vif); }


/* Sous 26rem (416 px), le pictogramme du bouton Menu s'efface. C'est lui qui
   cede, pas le mot : « Menu » ecrit est ce qui rend le bouton lisible pour la
   clientele visee, et le selecteur de langue doit rester dans la barre en
   entier. On y gagne 30 px, ce qui suffit jusqu'a 360 px. */
@media (max-width: 26rem) {
  .menu-btn .ico { display: none; }
  /* .js devant : sans lui la regle perdait contre « .js .menu-btn » de la
     base (0,2,0 contre 0,1,0) et ce padding n'etait jamais applique. */
  .js .menu-btn { padding: 0 .9rem; }
  /* Mesure a 360 px : l'espace logo -> langues tombait a 8 px. Les gaps
     cedent 6 px, les cibles gardent leurs 48 px. « .site-head .lang-sw » et
     non « .lang-sw » : la regle de base du selecteur de langue arrive plus
     bas dans la feuille et gagnerait a specificite egale. */
  .site-head__droite { gap: .375rem; }
  /* 6 px et non 2 : trois cibles de 48 px separees par deux pixels, ce sont
     trois cibles de 48 px ou l'on se trompe de langue. Le budget le permet —
     la barre est en « space-between » et c'est le vide entre le logo et les
     langues qui cede, pas les cibles. Mesure a 360 px : il restait 25 px de
     jeu, il en reste 17. */
  .site-head .lang-sw { gap: .375rem; }
}

/* Sous 22,5rem (360 px), meme cela ne suffit plus : mesure, il manquait 37 px.
   C'est le logo qui sort de la barre, et lui seul. Raison : c'est le seul
   element qui ne fait rien. Les langues changent la page, le bouton Menu la
   parcourt ; le logo dit qui l'on est, et il le redit dans le pied. Les deux
   autres gardent leurs 48 px, ce qui est le but. */
/* En pixels et non en rem : 22,5rem vaut exactement 360 px, et max-width
   inclut la borne — la regle mordait sur les telephones de 360 px, ou le
   logo tient encore avec 11 px de marge. */
@media (max-width: 359px) {
  .site-head__logo { display: none; }
  .site-head__droite { flex: 1; justify-content: space-between; }
}

/* --------------------------------------------------------- 5. Heros */
/* Image pleine largeur, texte centre par-dessus.
   ┌─ LE VOILE : mesure, pas reglage a l'oeil ───────────────────────────────┐
   │ Il est QUASI NEUTRE (#101f22), et c'est une decision, pas un defaut :   │
   │ un voile turquoise a ete essaye et mesure d'abord — il tenait le        │
   │ contraste mais teintait la chevelure en vert-bleu. Or le principe de la │
   │ page est que les photos sont le seul aplat sature : la plus grande      │
   │ photo du site ne peut pas etre celle qui perd sa couleur. Un voile      │
   │ neutre assombrit sans repeindre.                                        │
   │ Pixel le plus clair de hero-cuisine-1080.jpg : rgb(255,255,237) — une   │
   │ lampe, en haut a droite. Les paliers hauts couvrent 17 % a 85 % de la   │
   │ hauteur ; le texte occupe 21 % a 81 %, donc entierement dans la zone    │
   │ mesuree. Le voile s'allege en haut (la barre a son propre fond) et en   │
   │ bas (les cartes blanches le recouvrent).                                │
   │ Les ratios sont re-mesures au pixel le plus defavorable a chaque        │
   │ verification ; le plus juste est le sur-titre cuivre clair 16 px gras.  │
   └────────────────────────────────────────────────────────────────────────┘ */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  min-height: 34rem;                       /* repli sans svh */
  min-height: clamp(34rem, 78svh, 46rem);  /* pas 100vh : on doit deviner la suite */
  padding: calc(var(--head-h) + 3rem) 0 8.5rem;
}
.hero__media { position: absolute; inset: 0; }
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;   /* garde la chevelure dans le cadre au recadrage */
  display: block;
  background: var(--turq-deep);   /* le temps que l'image arrive */
}
.hero__voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(16, 31, 34, .58) 0%,
    rgba(16, 31, 34, .72) 17%,
    rgba(16, 31, 34, .72) 85%,
    rgba(16, 31, 34, .62) 100%);
}
.hero__contenu { position: relative; }
.hero .eyebrow--clair { justify-content: center; color: #f2d2b6; }
.hero .eyebrow--clair .eyebrow__ico { color: #f2d2b6; }
.hero h1 {
  hyphens: auto;
  -webkit-hyphens: auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 1.5rem + 6.2vw, 6rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #faf8f5;
  margin-bottom: .35em;
  text-wrap: balance;
}
.hero h1 em { display: block; font-style: italic; color: #f2d2b6; }
.hero__sub {
  font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem);
  line-height: 1.5;
  color: #faf8f5;
  max-width: 42rem;
  margin: 0 auto 2.25rem;
  text-wrap: balance;
}
.btn--grand { min-height: 64px; font-size: 1.1875rem; padding-inline: 2rem; }

/* Raccourcis de navigation : uniquement quand JavaScript ne repond pas.
   Avec JS, le bouton « Menu » fait le meme travail, et deux listes de sections
   sur la meme page se marchent dessus. */
.jump { display: none; }
html:not(.js) .jump {
  display: block;
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--rule);
}
.jump__label { font-size: 1rem; color: var(--ink-soft); margin-bottom: .625rem; }
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: .625rem; margin: 0; padding: 0; }
.jump a {
  display: inline-block;
  min-height: 48px;
  padding: .625rem 1.1rem;
  background: var(--surface);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  transition: background-color .15s ease, border-color .15s ease;
}
.jump a:hover, .jump a:focus-visible {
  background: var(--surface-warm);
  border-color: var(--turq-vif);
  color: var(--ink);
}

/* --------------------------------------------------------- 6. Cartes */
.cards { display: grid; gap: 1.25rem; margin-top: 2rem; list-style: none; padding: 0; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--turq);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}
.card--copper { border-top-color: var(--copper); }

/* --- les trois cartes qui chevauchent le hero ---------------------------
   La remontee negative les fait mordre sur le bas de l'image ; l'ombre plus
   marquee les decolle, sinon le chevauchement se lit comme un accident.
   Le hero reserve 8,5rem de rembourrage bas : la remontee reste dedans, le
   texte du hero n'est jamais recouvert. */
.flottantes {
  position: relative;
  z-index: 5;
  margin-top: -3.5rem;
  padding-block: 0 3.5rem;
}
.cards--flot { margin-top: 0; }
.cards--flot .card {
  box-shadow: 0 14px 38px rgba(4, 60, 66, .22), 0 2px 6px rgba(4, 60, 66, .12);
}
.card h3 { margin-bottom: .4em; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; letter-spacing: -.01em; }
.card p { color: var(--ink-soft); }
/* Trois pictogrammes distincts, un par carte : pour cette clientele le
   reperage visuel par carte est de la navigation, pas de l'ornement. Le
   colibri reste sur la marque d'eau et les separateurs, ou il ne porte
   aucune information. */
.card__ico {
  width: 60px; height: 60px; padding: 14px; margin-bottom: 1rem;
  border-radius: 50%; background: rgba(6, 166, 180, .13);   /* pastille : le repere se voit de plus loin */
  color: var(--turq-text);
}
.card--copper .card__ico { color: var(--copper-text); background: rgba(196, 132, 88, .16); }
/* Sur telephone, pictogramme et titre cote a cote : la pile des trois cartes
   raccourcit d'environ 90 px sans rien retirer. */
@media (max-width: 39.99rem) {
  .cards--flot .card { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.5rem 1.375rem; }
  .cards--flot .card__ico { width: 56px; height: 56px; padding: 13px; margin: 0; grid-row: 1 / span 2; }
  .cards--flot .card h3 { margin: .2rem 0 .3em; font-size: 1.45rem; }
  .cards--flot .card p { grid-column: 2; }
}

/* Le sprite ne doit rien occuper dans le flux. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------- 7. Prestations */
/* ------------------------------------------------- 7. Prestations */
/* Une carte par prestation, cliquable en entier : elle ouvre la maquette
   d'agenda avec la prestation deja choisie.

   Ce qui tient la carte : le nom en gras, le prix dans le serif des titres —
   c'est lui qui donne le niveau — et une barre d'accent pleine hauteur a
   gauche, visible en permanence et pas seulement au survol, puisqu'un ecran
   tactile n'a pas de survol.

   Femmes et hommes ne sont pas separes par deux tableaux mais par la couleur
   de cette barre : turquoise d'un cote, cuivre de l'autre, avec le meme
   report dans le prix et dans le titre du groupe. */
.svc-groupe { margin: 2.75rem 0 1.25rem; }
.svc-groupe:first-of-type { margin-top: 1rem; }
.svc-groupe__t {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding-bottom: .6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.875rem;
  border-bottom: 3px solid var(--rule);
}
/* Les deux variantes sont ecrites, aucune n'est « par defaut » : la paire
   turquoise / cuivre se lit d'un coup dans la feuille. */
.svc-groupe__t--f { border-bottom-color: var(--turq); }
.svc-groupe__t--h { border-bottom-color: var(--copper); }
.svc-groupe__ico { width: 26px; height: 26px; flex: none; fill: currentColor; }
.svc-groupe__t--f .svc-groupe__ico { color: var(--turq-text); }
.svc-groupe__t--h .svc-groupe__ico { color: var(--copper-text); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.svc {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem 1rem;
  width: 100%;
  min-height: 104px;
  padding: 1.3rem 1.4rem 1.3rem 1.9rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .2s ease, transform .2s ease;
}
/* Barre d'accent toujours visible, pas seulement au survol : sur un ecran
   tactile il n'y a pas de survol. */
.svc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
}
.svc--f::before { background: var(--turq); }
.svc--h::before { background: var(--copper); }
.svc:hover, .svc:focus-visible {
  border-color: var(--turq-vif);
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(4, 60, 66, .18);
}
.svc--h:hover, .svc--h:focus-visible { border-color: var(--copper-deep); }
/* Sur ecran tactile il n'y a pas de survol : l'appui donne la meme reponse,
   comprimee. Vient apres :hover pour gagner a specificite egale. */
.svc:active {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(4, 60, 66, .13);
}
.svc__nom { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; }
.svc__prix {
  font-family: var(--font-display);
  font-size: 1.6rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Turquoise « carte » : un pas plus clair que la marque, parce que la
   tarjeta elevee est plus claire que la base et #06a6b4 y tomberait sous
   4,5:1 en petit corps. */
.svc--f .svc__prix { color: var(--turq-carte); }
.svc--h .svc__prix { color: var(--copper-deep); }
.svc__chf {
  display: block;
  font-family: inherit;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.svc__aller {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: 1rem;
  font-weight: 700;
}
.svc--f .svc__aller { color: var(--turq-carte); }
.svc--h .svc__aller { color: var(--copper-deep); }
.svc__aller .ico { width: 18px; height: 18px; }

/* Photo de reference par prestation — 22-09-2026. Decision d'Esteban : une
   photo par prestation, sur le modele d'un autre dossier du portefeuille,
   parce qu'elle sert de reference a la cliente.

   BANDEAU EN TETE, ET PAS LA VIGNETTE DE 84 px QUI ETAIT PREVUE ICI. Les deux
   ont ete construites et regardees a 390 px : la vignette laissait 96 px au
   nom, coince entre la photo et la colonne des trois prix — « Coupe et
   brushing » tombait sur trois lignes. C'est la difference avec le modele
   copie, dont les cartes n'ont qu'UN prix : ici il y en a trois, empiles. Et une
   photo de 84 px ne permet de juger d'aucune coiffure, ce qui etait tout
   l'objet.

   HAUTEUR : 208 px, pas 132. A 132 px le bandeau faisait 2,25:1 sur des
   photos VERTICALES — on n'y voyait qu'une tranche de matiere, pas une
   coiffure. Regarde a l'ecran : la carte « Coupe » ne montrait qu'un
   aplat rose. A 208 px on voit la forme, et c'etait tout l'objet.

   Le bandeau ne touche a rien : la grille de texte reste exactement celle
   d'avant, il s'ajoute au-dessus en pleine largeur. Aucune regle de placement
   a ecrire, aucun risque pour le selecteur de longueur qui vit dans la meme
   carte.

   Quand une prestation n'a pas de photo, AUCUN element n'est emis : pas de
   bandeau gris, pas d'espace reserve. La carte est simplement plus courte. */
.svc__img,
.formule__img {
  display: block;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--rule);
}
.svc__img { grid-column: 1 / -1; height: 208px; margin-bottom: .25rem; }
.formule__img { height: 208px; }
.svc__img img,
.formule__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Point de focalisation choisi PHOTO PAR PHOTO, dans les donnees
     (catalogue.services[].photo_focus). Un pourcentage unique ne marche pas :
     ces cadrages ont ete regles pour un affichage portrait, et decoupes en
     bandeau ils attrapent le ciel sur l'une et la nuque sur l'autre. 45 % est
     la valeur de repli si la donnee manque. */
  object-position: center var(--focus, 45%);
}
@media (max-width: 30rem) {
  .svc__img,
  .formule__img { height: 184px; }
}

/* ── Cartes sans photo : un bandeau typographique (22-09-2026) ────────────
   Dix cartes sur quinze ont une photo. Les cinq autres — la coloration des
   racines, les trois prestations hommes et le forfait coloration — n'en
   auront pas avant que Paola en envoie : la regle du dossier est que la
   prestation soit le SUJET de la photo, et aucune image du lot ne montre une
   coloration de racines.
   Le bandeau a EXACTEMENT la hauteur d'une photo, porte le nom de la
   prestation dans le serif des titres sur le ton de sa famille, et le
   colibri en filigrane. Ce n'est pas un aplat gris qui se lirait comme une
   image manquante : c'est une carte dessinee. Le nom n'y est ecrit qu'une
   fois — l'element du nom est DANS le bandeau, il n'est pas recopie puis
   masque. */
.svc__bande,
.formule__bande {
  position: relative;
  display: grid;
  place-items: center;
  height: 208px;
  padding: 1rem;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  background: var(--turq-pale);
  /* La couleur est posee ICI et pas sur le titre seul : le colibri du coin
     est en fill: currentColor, et sans cette ligne il heritait de l'encre de
     la carte — un oiseau gris au milieu d'un bandeau turquoise. */
  color: var(--turq-carte);
}
.svc__bande { grid-column: 1 / -1; margin-bottom: .25rem; }
.svc--h .svc__bande { background: var(--copper-pale); color: var(--copper-deep); }
.svc__bande .svc__nom,
.formule__bande .formule__nom {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
  line-height: 1.1;
  color: var(--turq-carte);
  text-wrap: balance;
}
.svc--h .svc__bande .svc__nom { color: var(--copper-deep); }
.bande-ico {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 44px;
  height: 44px;
  opacity: .2;
  fill: currentColor;
}
@media (max-width: 30rem) {
  .svc__bande,
  .formule__bande { height: 184px; }
}

.note {
  margin-top: 1.25rem;
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* --------------------------------------------------------- 8. Galerie */
/* Colonnes CSS : pas de recadrage supplementaire, chaque photo garde son ratio. */
.galerie { columns: 2; column-gap: .875rem; margin-top: 2rem; }
.galerie figure { break-inside: avoid; margin: 0 0 .875rem; }
.galerie img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface-warm);
}
.galerie figcaption {
  font-size: .9375rem;
  color: var(--ink-soft);
  padding-top: .375rem;
}
/* La vignette la plus petite du lot (198 px natifs) ne doit jamais s'agrandir. */
.galerie--petite img { max-width: 198px; }

/* --------------------------------------------- 8b. Rideau de colibris */
/* Chaque photo de la galerie se revele comme un rideau qui s'ouvre : deux
   panneaux couleur de fond de section, chacun portant un colibri a son coin
   superieur interieur, s'ecartent au fil du defilement et emmenent leurs
   oiseaux avec eux. Le defilement est la tete de lecture — aucune duree.

   L'etat par defaut des panneaux est ABSENT (display:none) : un navigateur
   sans chronologie de defilement, ou une visiteuse qui demande moins de
   mouvement, voit les photos directement, jamais un panneau ferme.

   La chronologie est NOMMEE sur le conteneur et consommee par les panneaux :
   un overflow:hidden fait du conteneur un scroll container, et une vue
   anonyme view() posee sur les panneaux se resoudrait contre LUI — qui ne
   defile jamais — au lieu de la fenetre. La vue nommee, elle, suit la
   position du conteneur dans la fenetre. */
.rideau {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.rideau__panneau {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  /* 50,5 % chacun : le centre se chevauche d'1 %, aucun joint de sous-pixel */
  width: 50.5%;
  /* Le meme empilement que .sec--net, grain compris : un aplat nu laissait un
     ecart de 27 a 43 niveaux avec le fond de la galerie, soit trois fois le
     seuil de perception. Le rideau doit etre la page, pas un carton pose
     dessus. */
  background: var(--grain), var(--net);
  pointer-events: none;
}
.rideau__panneau--gauche { left: 0; }
.rideau__panneau--droit  { right: 0; }
/* Turquoise ATTENUE. En aplat plein, l'oiseau du rideau etait l'element le
   plus sature de la page — mesure : 0,97 de saturation contre 0,24 pour les
   photos. Or c'est aux photos de porter la couleur ; le rideau ne fait que
   s'ouvrir. */
.rideau__colibri {
  position: absolute;
  top: .8rem;
  width: 34px;
  height: 34px;
  fill: var(--turq);
  opacity: .5;
}
/* Les deux oiseaux se font face, tournes vers le centre du rideau. La
   silhouette du logo pique vers le bas : sans la rotation, le miroir seul
   les ferait regarder le sol, pas l'autre oiseau. */
.rideau__panneau--gauche .rideau__colibri { right: .6rem; transform: rotate(-32deg); }
.rideau__panneau--droit  .rideau__colibri { left: .6rem; transform: scaleX(-1) rotate(-32deg); }

/* La vignette de 198 px : le rideau epouse la largeur reelle de la photo. */
.galerie--petite .rideau { width: 198px; max-width: 100%; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rideau { view-timeline: --rideau block; }
    .rideau__panneau {
      display: block;
      animation-timeline: --rideau;
      /* Rango « cover » et non « entry » : une figure deja partiellement
         visible au chargement (restauration de defilement, ancre) a son
         entree deja consommee et resterait figee a moitie ouverte — le
         rango cover reste vivant a n'importe quelle position de charge.
         both : en remontant la page, une photo deja revelee ne se recouvre
         pas tant qu'elle reste au-dessus de sa zone d'ouverture. 101 % et
         non 100 % : aucune ligne de panneau ne survit en sous-pixel. */
      animation-range: cover 0% cover 28%;
    }
    .rideau__panneau--gauche { animation-name: rideau-gauche; animation-timing-function: linear; animation-fill-mode: both; }
    .rideau__panneau--droit  { animation-name: rideau-droit;  animation-timing-function: linear; animation-fill-mode: both; }
  }
}
@keyframes rideau-gauche { to { transform: translateX(-101%); } }
@keyframes rideau-droit  { to { transform: translateX(101%); } }

.vide {
  break-inside: avoid;
  margin: 0 0 .875rem;
  border: 2px dashed var(--warn-rule);
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: var(--warn-ink);
  padding: 1.25rem;
  font-size: .9375rem;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* La note qui remplace les trois cartes « photo en attente » de la grille :
   posee sous le carrousel, elle n'a plus a faire la hauteur d'une photo. */
.vide--note { min-height: 0; margin-top: 1.5rem; }

/* -------------------------------------------- 8c. Carrousel de galerie */
/* Deux rangees qui defilent lateralement, sans bibliotheque.

   Le defilement lui-meme est natif : c'est overflow-x qui porte le doigt, la
   molette, la barre et le clavier. Le script n'ajoute que les fleches et le
   glisser a la souris — retirez-le, le carrousel marche encore.

   Hauteur de rangee fixe, largeur libre : chaque photo garde le rapport de
   son recadrage. Ces recadrages ont ete arretes a l'oeil, boite par boite,
   pour ecarter un visage, une affiche ou une cuvette de WC ; les rogner une
   seconde fois avec object-fit reviendrait a defaire ce travail sans le voir.
   C'est pour cela qu'il n'y a pas de vignette carree ici. */
.carrousel {
  position: relative;
  margin-top: 2rem;
}
.carrousel__piste {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  overflow-x: auto;
  overflow-y: hidden;
  /* proximity, jamais mandatory : un calage force reprend la main a la
     visiteuse au milieu de son geste. Ici il aide, il ne corrige pas. */
  scroll-snap-type: x proximity;
  scroll-padding-left: .25rem;
  padding: .25rem .25rem .75rem;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* La barre de defilement reste VISIBLE, et large. La masquer est la mode ;
   c'est aussi retirer le seul indice permanent qu'il y a autre chose a
   droite, et le seul point de prise a la souris pour qui ne fait pas de
   geste de glissement. */
.carrousel__piste::-webkit-scrollbar { height: 12px; }
.carrousel__piste::-webkit-scrollbar-track {
  background: var(--alt);
  border-radius: 999px;
}
.carrousel__piste::-webkit-scrollbar-thumb {
  background: var(--turq-vif);
  border-radius: 999px;
  border: 3px solid var(--alt);
}
.carrousel__piste { scrollbar-width: auto; scrollbar-color: var(--turq-vif) var(--alt); }
.carrousel__piste:focus-visible {
  outline: 3px solid var(--turq-vif);
  outline-offset: 3px;
}
.carrousel__rangee {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
}
/* Meme garde que .clip : la piste de la galerie a la meme forme, et un
   enfant absolu (sr-only, infobulle, badge) ne doit jamais prendre le .wrap
   pour bloc conteneur — il echapperait au rognage et elargirait la page. */
.carrousel__item {
  flex: 0 0 auto;
  margin: 0;
  scroll-snap-align: start;
  max-width: 82vw;              /* une photo tres large laisse toujours voir la suivante */
  position: relative;
}
.carrousel__cadre {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface-warm);
  overflow: hidden;
  line-height: 0;
}
.carrousel__item img {
  height: var(--vign-h, 200px);
  width: auto;
  max-width: 100%;
  display: block;
}
.carrousel__item figcaption {
  font-size: .875rem;
  color: var(--ink-soft);
  padding-top: .375rem;
  /* La legende ne doit pas elargir la colonne au-dela de sa photo. */
  width: 0;
  min-width: 100%;
}
/* Les fleches n'existent que si le script tourne : ce sont les seules
   commandes qu'il fournit. Sans lui, le ruban se fait glisser au doigt, a la
   molette, a la barre et aux fleches du clavier — mais un bouton qui ne
   repond pas est pire que pas de bouton. La classe .js est posee sur <html>
   par le script en ligne de l'en-tete. */
.carrousel__nav { display: none; }
.js .carrousel__nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-top: .5rem;
}
/* 56 px de cote : une cible confortable au pouce, au-dessus des 44 px
   recommandes. Cercle plein turquoise profond, chevron blanc — 8,3:1. */
.carrousel__fleche {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--turq-vif);
  background: var(--turq-vif);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.carrousel__ico { width: 26px; height: 26px; }
.carrousel__fleche:hover {
  background: var(--copper-deep);
  border-color: var(--copper-deep);
}
.carrousel__fleche:focus-visible {
  outline: 3px solid var(--copper-deep);
  outline-offset: 3px;
}
.carrousel__fleche:active { transform: scale(.94); }
/* Bout de course : le bouton reste dans l'ordre de tabulation et garde sa
   place — il s'eteint, il ne disparait pas. Un bouton qui s'evanouit deplace
   ce qu'il y a autour et fait rater la cible. */
.carrousel__fleche[aria-disabled="true"] {
  background: transparent;
  color: var(--rule-strong);
  border-color: var(--rule-strong);
  cursor: default;
}
.carrousel__fleche[aria-disabled="true"]:hover {
  background: transparent;
  border-color: var(--rule-strong);
}
.carrousel__aide {
  margin: .75rem 0 0;
  font-size: .9375rem;
  color: var(--ink-soft);
}

@media (min-width: 40rem) {
  .carrousel__piste { --vign-h: 240px; }
}
@media (min-width: 62rem) {
  .carrousel__piste { --vign-h: 280px; }
  /* Sur grand ecran les fleches reviennent a hauteur des photos, mais dans
     une GOUTTIERE : le carrousel se retrecit de 4 rem de chaque cote et les
     boutons s'y logent. Poses par-dessus le ruban, ils couvraient la photo
     coupee au bord droit — celle qui dit justement qu'il y en a d'autres.
     display:contents dissout la barre de navigation : les deux boutons se
     positionnent alors par rapport au carrousel. */
  .js .carrousel { padding-inline: 4rem; }
  .js .carrousel__nav { display: contents; }
  .carrousel__fleche {
    position: absolute;
    top: calc(50% - 28px);
    z-index: 2;
    box-shadow: 0 2px 10px rgba(4, 98, 106, .28);
  }
  .carrousel__fleche--prec { left: .25rem; }
  .carrousel__fleche--suiv { right: .25rem; }
  .carrousel__item { max-width: none; }
  /* La souris peut saisir le ruban. Le curseur le dit. */
  .carrousel__piste { cursor: grab; }
  .carrousel__piste.est-tire { cursor: grabbing; scroll-snap-type: none; }
  .carrousel__piste.est-tire img { pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .carrousel__fleche { transition: none; }
  .carrousel__fleche:active { transform: none; }
}

/* Vignette cliquable — l'attribut role est pose par js/visionneuse.js, jamais
   dans le HTML : sans script la vignette redevient une image inerte et ne
   pretend rien. Le selecteur porte donc sur [role="button"] plutot que sur
   une classe, ce qui rend impossible d'afficher le curseur sans le
   comportement. */
/* La cible de zoom : la classe est posee par js/visionneuse.js, jamais dans
   le HTML — sans script, aucune photo ne fait mine d'etre cliquable. Une
   seule regle pour les quatre groupes (galerie, mariees, avant/apres, A
   propos) : le meme geste doit se signaler de la meme facon partout. */
.zoom-cible { cursor: zoom-in; transition: box-shadow .18s, transform .18s; }
.zoom-cible:hover { box-shadow: 0 6px 18px rgba(4, 98, 106, .28); transform: translateY(-2px); }
.zoom-cible:focus-visible {
  outline: 3px solid var(--turq-vif);
  outline-offset: 3px;
}
/* Les <picture> et .aa-face ne sont pas des blocs par defaut : sans cela le
   contour de focus et l'ombre epousent la ligne de texte, pas la photo. */
picture.zoom-cible { display: block; }
.aa-face.zoom-cible, .rideau.zoom-cible { border-radius: var(--radius); }
/* La phrase « touchez une photo » ne s'affiche que si le script tourne : sans
   lui elle serait fausse. Meme raison que .js .carrousel__nav. */
.carrousel__aide-zoom { display: none; }
.js .carrousel__aide-zoom { display: inline; }

@media (prefers-reduced-motion: reduce) {
  .zoom-cible { transition: none; }
  .zoom-cible:hover { transform: none; }
}

/* ------------------------------------------------ 8d. Clips video */
/* Six clips de six secondes, muets : deux rangees de trois a partir de
   48rem. En dessous, une PISTE qui defile, comme la galerie — six carres
   empiles feraient plus de 2 000 px de page sur un telephone, pour une
   section dont rien ne se lance sans qu'on le demande. Memes reglages que
   .carrousel__piste : calage « proximity », barre de defilement visible. */
.clips {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: .25rem;
  padding: .25rem .25rem .75rem;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: auto;
  scrollbar-color: var(--turq-vif) var(--alt);
}
/* CE QUI ANNONCE QU'IL Y EN A D'AUTRES, sur un telephone, c'est le clip
   suivant qui DEPASSE — pas la barre de defilement : mesure au navigateur
   mobile, la barre ne prend aucune hauteur (offsetHeight - clientHeight = 0)
   et n'apparait que pendant le glissement. Les clips faisaient 88 % de la
   piste et n'en laissaient voir que 23 px a 360. A 78 % il en depasse 70. */
.clips::-webkit-scrollbar { height: 12px; }
.clips::-webkit-scrollbar-track { background: var(--alt); border-radius: 999px; }
.clips::-webkit-scrollbar-thumb {
  background: var(--turq-vif);
  border-radius: 999px;
  border: 3px solid var(--alt);
}
/* position: relative n'est pas decoratif ici, c'est ce qui empeche la page
   entiere de defiler de cote (13-09-2026, au soir). Chaque figure porte un
   <p class="sr-only"> — la description longue du clip — et .sr-only est
   `position: absolute`. Sans bloc conteneur DANS la piste, c'est le .wrap de
   la section qui jouait ce role, et il est HORS du defilement : le paragraphe
   du sixieme clip se posait a sa position statique, x=1625, sans etre rogne
   par .clips. Le document faisait alors 1625 px de large pour une fenetre de
   390. Invisible (clip-path le masque), mais le telephone elargit sa zone de
   rendu pour tout contenir, bascule sur la mise en page large, et le texte
   des sections a deux colonnes sort de l'ecran — c'est ce qu'on voyait dans
   « A propos ».
   Regle generale : tout element `position: absolute` dans une piste qui
   defile doit avoir son bloc conteneur A L'INTERIEUR de la piste. */
.clip {
  margin: 0;
  flex: 0 0 min(78vw, 22rem);
  scroll-snap-align: start;
  position: relative;
}
/* « Faites glisser » n'est vrai que sur la piste : au-dessus de 48rem la
   grille montre tout, la phrase serait fausse. */
.clips__aide { font-size: .9rem; color: var(--ink-soft); margin: .25rem 0 0; }
@media (min-width: 48rem) {
  .clips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
    gap: 1.5rem;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }
  .clip { flex: none; }
  .clips__aide { display: none; }
}
/* Un contenant CARRE pour les trois clips, sans recadrage : V14 est filmee
   en paysage (1024x576), les deux autres en portrait. Un carre est le seul
   rapport ou chacun perd autant que l'autre (44 % en bandes, jamais un pixel
   de l'image), et un recadrage a l'aveugle aurait defait le controle image
   par image fait a l'encodage. Les bandes sont du turquoise profond, comme
   le bloc rendez-vous : un cadre, pas un trou. */
.clip__cadre {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--turq-deep);
  line-height: 0;
}
.clip__video { width: 100%; height: 100%; object-fit: contain; display: block; background: var(--turq-deep); }
/* Commandes propres, posees par js/videos.js : pause (48 px) et barre de
   progression (8 px, zone tactile de 44 px). Les commandes natives — barre
   grise, minuteur, menu — ne servent qu'en l'absence de script. */
.clip__commandes {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem;
  background: linear-gradient(180deg, rgba(4, 98, 106, 0), rgba(4, 98, 106, .85));
}
.clip__commandes[hidden] { display: none; }
.clip__pause {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(4, 98, 106, .88); color: #fff;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.clip__pause:hover { background: var(--copper-deep); }
.clip__pause:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.clip__pause svg { width: 22px; height: 22px; }
.clip__barre {
  position: relative; flex: 1; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .35); cursor: pointer;
}
.clip__barre::before { content: ""; position: absolute; inset: -18px 0; }   /* zone tactile 44 px */
.clip__avance { height: 100%; width: 0; border-radius: 999px; background: #f2d2b6; }
.clip__barre:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
.clip__cadre.est-en-lecture .clip__video { cursor: pointer; }
.clip figcaption {
  font-size: .9375rem;
  color: var(--ink-soft);
  padding-top: .5rem;
}
/* 72 px : plus gros encore que les fleches du carrousel, parce que c'est la
   seule cible de cet ecran et qu'elle declenche un telechargement. Le halo
   sombre garantit le contraste quelle que soit l'image d'attente dessous. */
.clip__lire {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(4, 98, 106, .88);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  transition: background .18s ease, transform .18s ease;
}
/* display:grid ci-dessus l'emporte sur le display:none que le navigateur
   attache a l'attribut hidden : sans cette ligne, le bouton reste VISIBLE
   quand JavaScript est absent — et il est alors inerte, puisque c'est le
   script qui lui pose son ecouteur. Meme regle que pour les fleches du
   carrousel : aucune commande morte a l'ecran. */
.clip__lire[hidden] { display: none; }
.clip__ico { width: 30px; height: 30px; margin-left: 3px; }
.clip__lire:hover { background: var(--copper-deep); }
.clip__lire:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.clip__lire:active { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) {
  .clip__lire { transition: none; }
  .clip__lire:active { transform: none; }
}

/* --------------------------------------------------------- 9. Etapes */
.etapes { list-style: none; counter-reset: e; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.etapes li {
  counter-increment: e;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.5rem 4.75rem;
  position: relative;
  box-shadow: var(--shadow);
}
.etapes li::before {
  content: counter(e);
  position: absolute;
  left: 1.5rem;
  top: 1.35rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--turq-deep);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.etapes h3 { margin-bottom: .25em; }
.etapes p { color: var(--ink-soft); }

/* --------------------------------------------------------- 10. Contact */
/* ── « Où me trouver » (22-09-2026) ───────────────────────────────────────
   Même boîte que .contact : c'est la même famille d'information, et deux
   traitements différents pour une adresse et un téléphone se liraient comme
   deux niveaux d'importance.

   .trouver__img n'apparaît pas encore dans la page : la photo du local
   appartient à l'Institut Serenity et attend leur accord écrit. La règle est
   écrite maintenant pour qu'il n'y ait rien d'autre à faire le jour où la
   photo arrive — mais RIEN n'est émis tant que contact_location.photo est
   null : pas d'encadré gris, pas d'espace réservé. */
.trouver {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  margin-top: 2rem;
}
.trouver__img {
  display: block;
  width: 100%;
  height: 240px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.trouver__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--focus, 50%);
}
/* Le plan EST le lien : toute l'image est cliquable, et l'avertissement
   vit dedans. On ne met pas un bouton a cote — une image cliquable dont rien
   ne dit ou elle mene est precisement ce que le garde-fou refuse.

   TAILLE — 22-09-2026, seconde passe. Le plan faisait 880 px de large et
   toute la largeur de la carte : 711 px de haut a 1280, plus que le bloc
   d'adresse qu'il est venu illustrer. Il est desormais BORNE A SA TAILLE
   NATIVE (560 px, cadre resserre par build-plan.py) : au-dela il serait
   agrandi, donc flou. Le bloc passe a 405 px.
   Le bandeau turquoise plein qui portait l'avertissement est devenu une
   ligne de lien : massif, il faisait un second objet aussi lourd que le plan
   lui-meme. La zone cliquable reste l'image ENTIERE plus cette ligne, et la
   ligne garde ses 48 px de haut — c'est la seule partie visible sur un
   telephone tenu d'une main. */
.trouver__plan {
  display: block;
  position: relative;
  max-width: 560px;
  margin: 0 0 .25rem;
  text-decoration: none;
}
.trouver__plan img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.trouver__plan-cta {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 48px;
  max-width: 560px;
  /* 1 rem et pas la taille du texte courant : a 1,125 rem l'avertissement
     passait sur deux lignes sous le plan, et la fleche se retrouvait centree
     sur deux lignes, detachee du texte. Mesure a 1280 : 507 px pour 560
     disponibles, donc une ligne — et si une traduction deborde, le retour a
     la ligne reste possible, il n'est pas empeche. */
  font-size: 1rem;
  font-weight: 700;
  color: var(--turq-carte);
}
.trouver__plan-cta .ico { width: 20px; height: 20px; flex: none; }
/* Le soulignement au survol, pas en permanence : la ligne suit l'image, et
   l'ensemble se lit comme un seul objet cliquable. */
.trouver__plan:hover .trouver__plan-cta,
.trouver__plan:focus-visible .trouver__plan-cta { text-decoration: underline; }
/* Attribution ODbL : obligatoire et donc lisible, pas cachee en 10 px gris
   clair. Discrete, mais au contraste du texte secondaire. */
.trouver__credit {
  margin: 0 0 1.5rem;
  font-size: .875rem;
  color: var(--ink-soft);
}
.trouver__adr { margin: 0; font-size: var(--step-1); }
.trouver__lbl {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .15rem;
}
.trouver__acces {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .6rem;
}
.trouver__acces li {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  color: var(--ink-soft);
}
.trouver__acces .svc-groupe__ico { width: 22px; height: 22px; flex: none; color: var(--turq-text); }
.trouver .btn-row { margin-top: 1.5rem; }
/* Les deux colonnes n'existent qu'en CSS : dans le HTML, les enveloppes se
   suivent, et sous 62rem elles ne font rien du tout — tout s'empile dans
   l'ordre du document, plan puis adresse puis boutons. */
.trouver__col-plan,
.trouver__col-infos { min-width: 0; }
@media (min-width: 62rem) {
  /* Le plan fait 560 px de large et la carte en fait 1096 a 1280 : il
     laissait un tiers de carte vide a sa droite. L'adresse et les deux
     boutons viennent l'occuper. La colonne de gauche vaut exactement la
     largeur native du plan — pas une fraction, sinon le plan serait agrandi
     et donc flou. */
  .trouver {
    display: grid;
    grid-template-columns: 560px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 2.5rem;
  }
  .trouver__col-plan { grid-column: 1; grid-row: 1 / span 2; }
  .trouver__col-infos { grid-column: 2; grid-row: 1; }
  .trouver .btn-row { grid-column: 2; grid-row: 2; align-self: start; }
}
@media (max-width: 30rem) {
  .trouver__img { height: 190px; }
}

.contact {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  margin-top: 2rem;
}
/* minmax(0, 1fr) et pas « auto » : une colonne « auto » ne descend jamais
   sous la largeur de son mot le plus long, et « contact@cheveuxetsourires.ch »
   est un seul mot de 322 px. A 360 px la carte n'en fait que 272 : la ligne
   sortait de la carte et la PAGE ENTIERE partait de cote de 12 px. Mesure du
   22-09. Le lien casse donc en deux la ou il ne tient pas — un courriel coupe
   se lit encore, une page qui glisse lateralement ne se lit plus. */
.contact dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.contact dd a { overflow-wrap: anywhere; }
/* Le courriel, et lui seul, revient a 16 px sur telephone : a 18 px il fait
   322 px pour 294 de carte a 390, et se coupe en plein milieu du domaine
   (« cheveuxetsourire / s.ch »). A 16 px il tient sur une ligne. Le selecteur
   vise le lien de courriel par son href : il n'y a pas de classe a poser, et
   une adresse est le seul texte de cette liste qui ne peut pas se couper
   proprement. « anywhere » reste au-dessus comme filet pour les ecrans plus
   etroits encore. */
@media (max-width: 30rem) {
  .contact dd a[href^="mailto:"] { font-size: 1rem; }
}
.contact dt {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .15rem;
}
.contact dd { margin: 0; font-size: var(--step-1); }
/* Le telephone et le courriel sont les actions principales de la page pour
   cette clientele : ils doivent offrir la meme cible tactile qu'un bouton.
   Le retrait negatif garde le texte aligne sur la colonne malgre le rembourrage. */
.contact dd a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 .5rem;
  margin-left: -.5rem;
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------- 10b. Reserver */
.reserver {
  display: grid;
  gap: 1.75rem;
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 5px solid var(--turq);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.reserver h2 { margin-bottom: .4em; }
/* min-width:0 — sans quoi un enfant de grille refuse de descendre sous sa
   largeur de contenu et deborde sur les petits ecrans. */
.reserver__texte { min-width: 0; }
.reserver__faits { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.reserver__faits li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .4rem;
  color: var(--ink-soft);
}
/* Le colibri sert de puce : decoratif, il ne porte aucune information. */
.reserver__faits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .42em;
  width: 19px;
  height: 19px;
  background: var(--colibri) center / contain no-repeat;
  opacity: .55;
}
.reserver__action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .875rem;
}
.reserver__action .btn { min-height: 64px; font-size: var(--step-1); }
.reserver__ou { font-size: 1rem; color: var(--ink-soft); text-align: center; }
.reserver__note { margin: .75rem 0 0; font-size: 1rem; color: var(--ink-soft); text-align: center; }
/* La demonstration n'est pas pour la cliente : lien discret dans la version de
   travail, retire du livrable (data-demo-only). */
.reserver__demo {
  display: inline-block; margin-top: 1rem; padding: .5rem 0;
  background: none; border: 0; font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--turq-vif); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.actionbar .btn { flex: 1 1 0; }
.reserver__note { margin: .75rem 0 0; font-size: 1rem; color: var(--ink-soft); text-align: center; }
/* La demonstration n'est pas pour la cliente : lien discret dans la version de
   travail, retire du livrable (data-demo-only). */
.reserver__demo {
  display: inline-block; margin-top: 1rem; padding: .5rem 0;
  background: none; border: 0; font: inherit; font-size: 1rem; font-weight: 600;
  color: var(--turq-vif); text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.actionbar .btn { flex: 1 1 0; }
.reserver__ou a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 .4rem;
  font-weight: 700;
}

/* ------------------------------- 10c. Coquille du modal de reservation */
/* Coquille du modal de reservation : le contenu est injecte dans
   #bookingModal, l'ouverture bascule la classe .open, et le defilement est
   verrouille par body.modal-open. Ces regles ne posent que l'ossature et la
   palette, pour que le modal ne soit jamais nu. */
.booking-modal { display: none; }
.booking-modal.open {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.booking-modal .bm-overlay { position: absolute; inset: 0; background: rgba(28, 26, 24, .55); }
.booking-modal .bm-box {
  position: relative;
  width: min(100%, 44rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 10px 40px rgba(4, 60, 66, .28);
}
/* Verrouillage du defilement pose par openBooking(). */
body.modal-open { position: fixed; width: 100%; overflow: hidden; }

/* --------------------------------------------------------- 11. Encadres */
.pending {
  background: var(--warn-bg);
  border: 2px solid var(--warn-rule);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  color: var(--warn-ink);
  margin-top: 1.5rem;
  max-width: var(--measure);
}
.pending__tag {
  display: inline-block;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}
.pending p { font-size: 1.0625rem; }
.pending ul { margin: .5rem 0 0; padding-left: 1.25rem; font-size: 1.0625rem; }
.pending li + li { margin-top: .35rem; }

/* --------------------------------------------------------- 12. Pied */
.site-foot {
  background: var(--surface-warm);
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem;
  font-size: 1rem;
  color: var(--ink-soft);
}
.site-foot img { width: 150px; margin-bottom: 1rem; }
.site-foot p { margin-bottom: .5rem; }
/* Meme regle de cible tactile que dans le bloc contact. */
.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 .4rem;
  margin-inline: -.4rem;
  font-weight: 600;
}

/* --------------------------------------------- 13. Barre d'action mobile */
.actionbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  display: flex;
  gap: .625rem;
  padding: .625rem;
  /* Ton du chrome (--chrome), pas blanc : les cartes gardent le blanc pur,
     les surfaces de chrome se posent un cran en-dessous. */
  background: var(--surface-warm);
  border-top: 2px solid var(--rule-strong);
}
/* Trois boutons depuis l'ajout de la reservation : on resserre, et sous
   26 rem on retire les pictogrammes pour garder les libelles lisibles. */
.actionbar .btn { flex: 1; min-height: 60px; padding-inline: .5rem; font-size: 1.0625rem; }
@media (max-width: 26rem) {
  .actionbar .btn .ico { display: none; }
}

/* ------------------------------------------- 13b. Colibris au clic */
/* Pilote par js/colibris.js. Sans JS, aucune de ces regles ne s'applique :
   la couche n'est jamais creee et la page est identique. */
.colibri-vol {
  position: fixed;
  inset: 0;
  z-index: 60;          /* au-dessus du contenu, sous rien d'interactif */
  overflow: hidden;
  pointer-events: none; /* la couche n'intercepte jamais un clic */
}
.colibri {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  color: var(--turq);
  pointer-events: none;
  will-change: transform, opacity;
  animation: colibri-envol 1.5s cubic-bezier(.22, .61, .36, 1) forwards;
}
.colibri svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  /* battement d'ailes : le seul mouvement en boucle, et il dure 1,5 s */
  animation: colibri-aile .14s steps(2, end) infinite;
}
@keyframes colibri-envol {
  0%   { opacity: 0;  transform: translate(0, 0) rotate(0deg) scale(.45); }
  12%  { opacity: .9; }
  70%  { opacity: .7; }
  100% { opacity: 0;  transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(1); }
}
@keyframes colibri-aile {
  from { transform: scaleX(1); }
  to   { transform: scaleX(.78); }
}
/* Garde-fou : le script ne cree deja rien dans ce cas, mais si une couche
   subsistait d'un changement de reglage en cours de session, elle disparait. */
@media (prefers-reduced-motion: reduce) {
  .colibri-vol { display: none; }
}

/* --------------------------------------------------------- 14. Ecrans larges */
@media (min-width: 40rem) {
  :root { --step-4: 3rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  /* En ligne, les cartes sont moins hautes : on peut mordre plus franchement
     sur l'image sans rogner le bouton du hero. */
  .flottantes { margin-top: -7rem; padding-bottom: 4.5rem; }
  .galerie { columns: 3; }
  .contact dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
}

@media (min-width: 62rem) {
  :root { --head-h: 105px; }
  html { scroll-padding-top: 8rem; }
  section { padding-block: 4.5rem; }
  /* le telephone reprend sa place : la barre du bas disparait ici */
  .site-head__tel { display: inline-flex; }
  .reserver { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 3rem; }
  .etapes { grid-template-columns: repeat(3, 1fr); }
  .site-head img { height: 84px; }   /* 119 px de large */
  /* Au-dela de cette largeur l'en-tete suffit : la barre fixe disparait. */
  .actionbar { display: none; }
  body { padding-bottom: 0; }
}

/* Les NEUF libelles (Formations puis Mariees se sont ajoutes), le logo, les
   trois langues et le bouton d'appel ne tiennent sur une ligne qu'a partir
   de 88rem. En dessous, le bouton Menu. Mesure faite, pas estimee : a 82rem
   le bouton d'appel finissait a 1364 px en espagnol pour 1312 px d'ecran ;
   a 88rem (1408 px) il rentre dans les trois langues avec de la marge. */
@media (min-width: 88rem) {
  .js .menu-btn { display: none; }
  /* L'en-tete sort de la gouttiere de 68rem : les sept libelles, le logo, les
     trois langues et le bouton d'appel ne rentrent pas dedans. Mesure : 1142 px
     de contenu pour 1088 px de gouttiere. */
  /* .wrap pose width, pas max-width : c'est width qu'il faut reprendre. */
  .site-head .wrap { width: 100%; max-width: none; padding-inline: 2rem; }
  .mainnav {
    display: flex;
    position: static;
    z-index: auto;
    background: none;
    overflow: visible;
    padding: 0;
    flex: 1;
    justify-content: center;
  }
  .mainnav__tete { display: none; }
  .mainnav__liste { display: flex; gap: 1rem; padding: 0; }
  .mainnav__liste a {
    min-height: 48px;
    /* Et 48 px de large aussi : « Book » n'en faisait que 46 en anglais. La
       longueur d'un libelle depend de la langue, la cible ne doit pas. */
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 .2rem;
    font-size: 1.0625rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }
  .mainnav__liste li:last-child a { border-bottom: 3px solid transparent; }
  .mainnav__liste a:hover { color: var(--turq-vif); border-bottom-color: var(--turq-vif); }
}

/* --------------------------------------------------------- 15. Mouvement */
/* Le defilement doux est la seule animation de la page, et elle est optionnelle. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------- 16. Impression */
/* Le bloc @media print vit en FIN de feuille (partie 27) : @media n'ajoute
   aucune specificite, et place ici il perdait a l'ordre contre toutes les
   regles des parties 17 a 26 — verifie en emulation : la section
   rendez-vous imprimait creme sur blanc. Le papier doit gagner la cascade. */

/* ================================================== 17. Rythme de section */
/* Sur-titre en petites capitales + pictogramme, puis titre serif avec un
   mot en italique d'accent, puis une phrase de contexte. C'est ce qui porte
   le niveau percu, et cela ne coute rien. */
.section-head { margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }
.section-head .lead { margin-top: .5rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin-bottom: .6rem;
}
/* fill explicite : le symbole partage n'en porte pas, et sans cette ligne
   l'oiseau rend au NOIR initial du SVG — invisible sur la nuit. */
.eyebrow__ico { width: 20px; height: 20px; flex: none; opacity: .85; fill: currentColor; }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 0 .35em;
}
.section-title em { font-style: italic; color: var(--copper-deep); }  /* 6.7:1 */


/* ============================================ 18. Apparition au defilement */
/* Discret : 18 px de deplacement, pas de mise a l'echelle. Les regles ne
   s'appliquent que si .js-reveal est pose par le script — sans JavaScript
   rien n'est masque et la page reste entiere. */
.js-reveal .reveal,
.js-reveal .reveal-l,
.js-reveal .reveal-r {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.js-reveal .reveal   { transform: translateY(18px); }
.js-reveal .reveal-l { transform: translateX(-20px); }
.js-reveal .reveal-r { transform: translateX(20px); }
.js-reveal .reveal.on,
.js-reveal .reveal-l.on,
.js-reveal .reveal-r.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal,
  .js-reveal .reveal-l,
  .js-reveal .reveal-r {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Le doigt (22-09-2026) ────────────────────────────────────────────────
   « manipulation » retire le delai de 300 ms que certains navigateurs mobiles
   gardent pour voir si un second appui arrive (double-tape pour agrandir).
   Il ne retire QUE ce geste-la, et seulement sur les elements qu'on touche
   pour agir : le pincement pour agrandir la page reste entier, partout.
   Le reflet de l'appui reste VISIBLE, et c'est un ecart assume avec ce qui se
   fait d'ordinaire (le rendre transparent) : pour une clientele agee, savoir
   que l'appui a ete pris compte plus que l'elegance du gris. Il est seulement
   passe au turquoise de la maison. */
a, button, [role="button"], summary, label, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(4, 98, 106, .18);
}

/* ================================================== 19. Selecteur de langue */
/* 6 px entre les trois langues, a toutes les largeurs. A 4 px, un telephone
   de 430 px se retrouvait avec des cibles PLUS serrees qu'un de 360, ou la
   regle etroite passe a 6 : l'inverse de ce qu'on veut. */
.lang-sw { display: flex; gap: .375rem; }
.lang-btn {
  min-width: 48px;
  min-height: 48px;
  padding: 0 .5rem;
  /* Bordure visible sur les trois : sans elle, EN et ES ne se lisent pas comme
     des boutons — c'est la remarque qui revient le plus chez les plus de 70 ans
     sur les selecteurs de langue en texte nu. */
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.lang-btn:hover { border-color: var(--turq-vif); color: var(--turq-vif); }
/* Aplat plein plutot qu'un simple contour : la langue active doit se voir d'un
   coup d'oeil. Blanc sur #04626a = 7,1:1 AAA. */
.lang-btn.active {
  color: #fff;
  border-color: var(--turq-deep);
  background: var(--turq-deep);
}

/* ================================================== 21. Avant / apres */
.aa-grid { display: grid; gap: 1.5rem; margin-top: 2rem; }
/* PLEINE LARGEUR SOUS 30rem. Les deux faces faisaient 159 px a 360 et 174 a
   390 : trop etroit pour juger un resultat, et c'est ce qu'on vient voir. En
   sortant la carte de la gouttiere de 20 px, elles gagnent 13 % (180 et 195).
   Ce n'est pas enorme, et c'est tout ce que la largeur d'un telephone permet
   SANS empiler l'avant et l'apres : empiles, une paire fait 974 px de haut a
   390, on ne peut plus voir les deux d'un coup, et « la meme chevelure »
   devient invisible. Le detail, lui, est dans la visionneuse — d'ou la ligne
   « Touchez une photo pour l'agrandir », qui n'apparait que si le script
   tourne (sans lui, rien ne s'agrandit et la phrase serait fausse). */
@media (max-width: 30rem) {
  .aa-item { margin-inline: -1.25rem; border-radius: 0; }
  .aa-item__legende { padding-inline: 1.25rem; }
}
.aa-aide { display: none; }
.js .aa-aide {
  display: block;
  margin: .75rem 0 0;
  color: var(--ink-soft);
}
.aa-item {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.aa-pair { display: grid; grid-template-columns: 1fr 1fr; }
.aa-face { position: relative; }
.aa-face img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.aa-face__tag {
  position: absolute;
  top: .625rem;
  left: .625rem;
  padding: .3rem .6rem;
  border-radius: 6px;
  background: var(--turq-deep);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* Emplacement de la photo « avant ». */
.aa-face--vide {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: 1rem;
  background: var(--warn-bg);
  border-right: 2px dashed var(--warn-rule);
  color: var(--warn-ink);
  font-size: .9375rem;
  text-align: center;
}
.aa-item__legende { padding: .875rem 1.125rem; font-size: 1rem; color: var(--ink-soft); }

/* ================================================== 22. Confiance */
.confiance { display: grid; gap: 1.25rem; margin-top: 2rem; list-style: none; padding: 0; }
.medaille {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.medaille__ico { width: 34px; height: 34px; margin: 0 auto .625rem; color: var(--turq-text); }
.medaille__val {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.1;
  color: var(--turq-carte);
}
.medaille__val--vide { color: var(--warn-ink); font-size: 1.4rem; font-style: italic; }
.medaille__lib { font-size: 1rem; color: var(--ink-soft); margin-top: .25rem; }

/* ================================================== 24. FAQ */
.faq-list { margin-top: 2rem; max-width: 46rem; }
.faq-item {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: .75rem;
  box-shadow: var(--shadow);
}
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-warm);
  color: var(--turq-carte);
  font-size: 1.4rem;
  line-height: 1;
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item__rep { padding: 0 1.25rem 1.25rem; color: var(--ink-soft); }
.faq-item__rep > :last-child { margin-bottom: 0; }

/* ============================================ 25. Rythme des sections */
/* Le rythme est MARQUE, dans le registre pastel : trois tons qui se
   distinguent (base, alterne, presque blanc — l'escalier mesure fait 7,2
   dE76 de la base au presque blanc), les deux bandeaux photos, et la section
   rendez-vous en #04626a, seul bloc fonce et seul aplat sature hors photos :
   c'est son role d'ancre d'appel.
   La galerie est sur le presque blanc — c'est la que les photos ressortent
   le plus, et avec six photos chacune doit porter. */
section { padding-block: clamp(4.5rem, 3.25rem + 4.5vw, 9rem); }

/* Le motif de colibris vit sur les fonds pastel, en turquoise de marque.
   Deux opacites : 4,5 % sur la base et le presque blanc, 3 % sur l'alterne —
   c'est le ton le plus fonce et le motif y virait au papier peint, les
   oiseaux se comptaient un par un.
   Le pseudo-element est ::after — ::before sert deja au colibri separateur
   entre deux sections. */
/* Chaque ton recoit deux halos radiaux pris dans les DEUX AUTRES tons de la
   palette, puis le grain par-dessus. Trois contraintes tenues ensemble :
   - halos entre tons pastel voisins : ils se lisent comme de la lumiere, pas
     comme des taches ;
   - ellipse DIMENSIONNEE pour s'eteindre avant les bords haut et bas de la
     section. C'est ce qui garde les jonctions invisibles : deux sections du
     meme ton se suivent sans couture, et le bord d'une onde rencontre
     toujours la couleur de base pure, jamais un halo coupe net ;
   - sur la base et sur l'alterne, les halos ne vont que vers des tons plus
     CLAIRS : le pire pixel du fond y reste le ton lui-meme, et c'est sur lui
     que les ratios sont mesures. Le presque blanc est l'exception — il n'a
     rien de plus clair au-dessus de lui — et son unique halo est traite
     a part, plus bas. */
.sec--base, .flottantes {
  background:
    var(--grain-alt),
    radial-gradient(60% 45% at 85% 18%, var(--net), transparent 70%),
    radial-gradient(55% 42% at 10% 85%, var(--alt), transparent 70%),
    var(--base);
}
.sec--alt {
  background:
    var(--grain-alt),
    radial-gradient(56% 42% at 80% 44%, var(--net), transparent),
    radial-gradient(58% 42% at 16% 58%, var(--base), transparent),
    var(--alt);
}
/* Le presque blanc n'a AUCUN halo : rien que le ton et le grain. Deux
   raisons mesurees, qui vont dans le meme sens. C'est la section de la
   galerie : un mesh y remontait le chroma du fond de 6 a 16 et mangeait la
   moitie du saut des photos. Et les panneaux du rideau doivent raccorder ce
   fond a l'identique — un panneau ne peut pas suivre un degrade qui bouge
   avec lui. Fond plat : le pire pixel du fond est donc le ton lui-meme. */
.sec--net {
  background:
    var(--grain),
    var(--net);
}

/* --- ondes de transition --------------------------------------------------
   La ou deux sections de couleurs differentes se suivent, la coupe droite est
   remplacee par une courbe : le SVG vit en bas de la section amont et porte
   la couleur de la section aval. Les bandeaux photos et la section sombre
   gardent leur coupe franche — leur contraste fait deja le travail — et le
   colibri separateur s'efface la ou l'onde prend sa place. */
.sec--onde { position: relative; }
.onde {
  display: block;
  position: absolute;
  left: 0;
  bottom: -1px;          /* recouvre le joint de sous-pixel avec la section suivante */
  z-index: 1;            /* au-dessus du motif de colibris de la section */
  width: 100%;
  height: clamp(3rem, 7vw, 5.5rem);
  pointer-events: none;
}
.sec--onde + section::before { content: none; }
/* Meme regle apres un bandeau photo : sa coupe franche n'a pas besoin d'un
   colibri pose a cheval sur le voile — et les adjacences changent entre la
   version de travail et la version construite. */
.bandeau + section::before { content: none; }
/* Et apres « A propos » (13-09-2026, au soir). C'est LE colibri qu'on voyait
   coupe en deux : le separateur est centre sur la limite, moitie au-dessus
   moitie en dessous, et la limite entre A propos (presque blanc) et
   Formations (alterne) est un changement de ton. L'oiseau se retrouvait
   tranche net par une ligne horizontale. Meme raison que pour .sec--net et
   .sec--sombre plus haut. */
.apropos + section::before { content: none; }

/* pour-qui -> prestations, la derniere jonction qui portait encore le
   separateur (21-09-2026). Elle le portait coupe, et le commentaire ci-dessus
   affirmait le contraire — « la ou le separateur reste, les deux sections
   partagent exactement le meme ton et la limite est invisible ». Le TON, oui.
   L'OISEAU, non : phrase retiree, parce qu'elle a envoye le diagnostic vers la
   tuile de fond deux fois de suite.
   LA VRAIE CAUSE N'EST PAS LA TUILE, c'est l'ordre de peinture.
   `.flottantes { z-index: 5 }` (plus haut) place le fond OPAQUE du bloc des
   trois cartes au-dessus de #prestations, dont le z-index est auto — et la
   moitie HAUTE de l'oiseau appartient a #prestations. Mesure aux trois
   largeurs : 0 pixel d'oiseau au-dessus de la ligne, 119 en dessous. En
   forcant z-index: auto sur #pour-qui, l'oiseau entier revient (161 px au
   -dessus, 119 en dessous) : c'est la contre-epreuve.
   `background-repeat: space` n'etait donc pas « insuffisant » — il visait le
   mauvais objet. La tuile 340x340 ne coupe aucun oiseau : ses deux oiseaux
   tiennent dans x 22..240 et y 34..242, et la plus petite boite mesuree fait
   434x390. Ne pas y toucher.
   POURQUOI ON RETIRE plutot que de corriger : `.flottantes + section::before
   { z-index: 6 }` repare l'oiseau, teste entier a 390, 768 et 1280 px. Mais
   c'est la 14e jonction sur 14, et les treize autres ont deja `content: none`.
   Le separateur est un vestige. L'eteindre supprime la CLASSE du defaut au
   lieu de la deplacer sous un z-index qu'un changement futur pourrait
   rederanger, et coute un colibri turquoise de 28 px a 45 % d'opacite sur une
   limite ou les deux sections portent le meme ton. Pour le remettre : une
   ligne, celle citee ci-dessus. */
.flottantes + section::before { content: none; }

/* Mesure du 13-09 au soir : `space` fait bien son travail — sur les dix
   sections qui portaient le motif, les quatre bandes de bord sont vides a
   390, 1280 et 1920 px, aucun oiseau n'est rogne. Ce qui n'allait pas est
   ailleurs : la regle ne couvrait que TROIS familles de sections sur sept.
   pour-qui (.flottantes) et A propos (.apropos) sont claires, portent le
   meme ton que leurs voisines — et n'avaient aucun oiseau. Le motif
   s'arretait donc net a une frontiere invisible, ce qui se lit comme un
   fond coupe. Les deux sont ajoutees ici.
   Restent sans motif, et c'est voulu : le hero et les deux bandeaux (des
   photos, pas un fond) et la section rendez-vous (aplat sature, elle a son
   propre traitement). */
.sec--base::after, .sec--alt::after, .sec--net::after,
.flottantes::after, .apropos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--colibri-motif);
  background-size: 340px 340px;
  /* `space` ne pose que des tuiles ENTIERES et repartit le reste : le
     dessin garde 22 px de marge a gauche et 98 a droite, 34 en haut et 98
     en bas — aucun oiseau ne touche un bord de section ni l'onde. Avant, le
     motif partait de (0,0) et coupait des oiseaux sur les bords droit et
     bas de toute section dont la taille n'etait pas un multiple de 340
     (vu le 13-09 dans Prestations, Galerie, Zone, Formations). */
  background-repeat: space;
  background-position: center top;
  opacity: .05;
  pointer-events: none;
}
.sec--alt::after { opacity: .035; }
.sec--base > .wrap,
.sec--alt > .wrap,
.sec--net > .wrap,
.flottantes > .wrap,
.apropos > .wrap { position: relative; z-index: 1; }


/* --- section rendez-vous : le seul aplat SATURE de la page --------------- */
/* Sur une page pastel, c'est le seul bloc fonce et le seul aplat sature
   hors photos : la rupture est franche et c'est ce qui en fait une ancre
   d'appel. Mesures sur #04626a : creme #faf8f5 = 6,7:1, cuivre clair
   #f2d2b6 = 5,0:1, texte sombre sur bouton creme = 6,7:1. Tout tient AA. */
.sec--sombre { background: var(--turq-deep); color: var(--paper); }
.sec--sombre .eyebrow { color: #f2d2b6; }
.sec--sombre .section-title { color: var(--paper); }
.sec--sombre .section-title em { color: #f2d2b6; }
.sec--sombre .lead,
.sec--sombre p { color: #dfe9e9; }
.sec--sombre .eyebrow__ico { color: #f2d2b6; }
/* Le colibri du separateur et des puces doit s'eclaircir, sinon il disparait. */
.sec--sombre::before { background-image: var(--colibri-clair); opacity: .75; }
.sec--sombre .reserver__faits li::before { background-image: var(--colibri-clair); opacity: .8; }
.sec--sombre .reserver__faits li { color: #dfe9e9; }
/* Tons creme deja mesures pour ce bloc : #faf8f5 = 6,7:1, #f2d2b6 = 5,0:1 sur #04626a. */
.sec--sombre .reserver__note { color: var(--paper); opacity: .92; }
.sec--sombre .reserver__demo { color: #f2d2b6; }
.sec--sombre .reserver__demo:hover, .sec--sombre .reserver__demo:focus-visible { color: #fff; }
/* Tons creme deja mesures pour ce bloc : #faf8f5 = 6,7:1, #f2d2b6 = 5,0:1 sur #04626a. */
.sec--sombre .reserver__note { color: var(--paper); opacity: .92; }
.sec--sombre .reserver__demo { color: #f2d2b6; }
.sec--sombre .reserver__demo:hover, .sec--sombre .reserver__demo:focus-visible { color: #fff; }
/* La carte perd son fond blanc : sinon elle recouvre le sombre et l'effet
   de rupture disparait. */
.sec--sombre .reserver {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(250, 248, 245, .28);
  border-top-color: #f2d2b6;
  box-shadow: none;
}
.sec--sombre .btn--primary { background: var(--paper); color: var(--turq-deep); }
.sec--sombre .btn--primary:hover,
.sec--sombre .btn--primary:focus-visible { background: #fff; color: var(--turq-deep); }
.sec--sombre .btn--second {
  background: transparent;
  color: var(--paper);
  border-color: rgba(250, 248, 245, .55);
}
.sec--sombre .btn--second:hover,
.sec--sombre .btn--second:focus-visible { background: rgba(255, 255, 255, .1); color: var(--paper); }
.sec--sombre a { color: var(--paper); }
.sec--sombre :focus-visible { outline-color: #f2d2b6; }
/* L'encadre garde son schema clair jusque sur l'aplat fonce : il porte son
   propre fond, il n'herite pas de la section. */
.sec--sombre .pending { color: var(--warn-ink); }
.sec--sombre .pending p, .sec--sombre .pending li { color: var(--warn-ink); }

/* --- bandeau pleine largeur : l'image sort de la boite ------------------- */
.bandeau {
  position: relative;
  padding-block: 6.5rem;
  color: var(--paper);
  background: #04626a center / cover no-repeat;
  /* Meme photographie que la carte « Meches cendrees » de la galerie :
     balayage-exterieur, son doublon, est sorti le 10-09-2026. */
  background-image: url("../img/meches-cendrees-mi-longs-900.jpg");
  background-image: image-set(url("../img/meches-cendrees-mi-longs-900.webp") type("image/webp"),
                              url("../img/meches-cendrees-mi-longs-900.jpg") type("image/jpeg"));
}
.bandeau::before { content: none; }   /* pas de separateur colibri ici */
/* Voile. Les deux photos contiennent du blanc pur : c'est le pire cas, et
   c'est sur lui que tout est mesure.
     voile 90 % -> rgb(29,114,121) : creme 5,30:1 AA, cuivre clair 3,93:1
     voile 88 % -> rgb(34,117,124) : creme 5,07:1 AA, cuivre clair 3,76:1
   Le texte fait 30 a 46 px — du grand texte, seuil 3:1 — mais on vise 4,5:1
   pour le creme, qui porte l'essentiel.

   Sous 62rem le voile est UNIFORME a 90 %. Le degrade d'avant tombait a 52 %
   a droite (creme 2,34:1, echec net) et sur telephone le texte va jusqu'au
   bord : il passait donc dans la zone claire. Au-dessus de 62rem le texte est
   plafonne a 30rem de large, il n'atteint jamais 60 % de la largeur, et le
   degrade peut alors s'ouvrir sur la photo sans qu'aucune lettre y entre. */
.bandeau::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(4, 98, 106, .90);
}
.bandeau--semaine {
  background-image: url("../img/coloration-rouge-830.jpg");
  background-image: image-set(url("../img/coloration-rouge-830.webp") type("image/webp"),
                              url("../img/coloration-rouge-830.jpg") type("image/jpeg"));
  background-position: center 30%;
}
/* SOUS 62rem, LES PETITES VARIANTES. Le voile de ces bandeaux est uniforme a
   90 % en dessous de 62rem : il ne laisse passer que 10 % de la photo, et les
   deux photos pesaient 222 ko sur la PREMIERE charge d'un telephone. Une
   image de fond ne connait pas « loading=lazy » : elle part au premier ecran,
   qu'on descende ou non jusqu'a elle. Les variantes 400 pesent 54 ko a elles
   deux et montrent exactement la meme chose a travers le voile.
   Mesure du 22-09 : 168 ko de moins sur la premiere charge. */
@media (max-width: 61.99rem) {
  .bandeau {
    background-image: url("../img/meches-cendrees-mi-longs-400.jpg");
    background-image: image-set(url("../img/meches-cendrees-mi-longs-400.webp") type("image/webp"),
                                url("../img/meches-cendrees-mi-longs-400.jpg") type("image/jpeg"));
  }
  .bandeau--semaine {
    background-image: url("../img/coloration-rouge-400.jpg");
    background-image: image-set(url("../img/coloration-rouge-400.webp") type("image/webp"),
                                url("../img/coloration-rouge-400.jpg") type("image/jpeg"));
  }
}
.bandeau > .wrap { position: relative; z-index: 1; }
.bandeau__txt {
  max-width: 30rem;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.2;
}
.bandeau__txt em { font-style: italic; color: #f2d2b6; }
/* Creme et non un turquoise pale : mesure au pire pixel du voile (la photo
   blanche perce a ~93 %), #cfe0e0 tombait a 4,2:1 sur telephone — sous AA
   pour du 16 px. Le creme tient 5,3:1 meme sur voile pose sur blanc pur.
   Et la meme borne de largeur que le titre : au-dela, le voile s'ouvre. */
.bandeau__src {
  max-width: 30rem;
  margin: 1rem 0 0;
  font-size: 1rem;
  color: var(--paper);
}

/* --- section sans photo, assumee -----------------------------------------
   Cette section tient sur sa typographie et sur le colibri agrandi, sans
   image. */
.zone-mot {
  position: relative;
  overflow: hidden;
  max-width: 46rem;
  margin-top: 2rem;
  padding: 2.25rem 2rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--turq);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.zone-mot__ico { width: 60px; height: 60px; fill: var(--turq-text); margin-bottom: 1rem; }
.zone-mot p {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem);
  line-height: 1.3;
  color: var(--ink);
}
/* Colibri en grand, tres pale : il occupe l'espace qu'aurait pris la photo. */
.zone-mot::after {
  content: "";
  position: absolute;
  right: -2rem;
  bottom: -3rem;
  width: 15rem;
  height: 15rem;
  background: var(--colibri) center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
}

/* --- compositions : toutes les sections ne sont pas empilees ------------- */
.duo { display: grid; gap: 2.5rem; }
.duo__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* --- typographie : plus de contraste d'echelle et plus d'air -------------
   Un titre « correct » ne dit rien. Ici il occupe sa section : de 42 px sur
   un telephone a 84 px sur grand ecran, contre 19 px de texte courant — un
   rapport de 1 a 4,4. overflow-wrap en filet : a 42 px, un mot compose long
   depasserait la colonne sur un ecran de 360 px. */
.section-head { margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }
.section-title {
  font-size: clamp(2.6rem, 1.35rem + 5.4vw, 5.25rem);
  line-height: 1.02;
  /* La cesure d'abord : si un mot doit passer a la ligne, qu'il le fasse avec
     un trait d'union et sur une syllabe. hyphens s'appuie sur l'attribut lang
     de <html>, que i18n.js tient a jour a chaque changement de langue.
     overflow-wrap n'est qu'un filet, pour le cas ou aucun point de cesure
     n'existe : il ne doit jamais servir, et la mesure le verifie. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.section-head .lead { font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.4rem); }

/* =========================================== 25b. Micro-interactions */
/* Reponses de 150 a 250 ms, transform et opacity seulement. Le bloc global
   de mouvement reduit (partie 15) neutralise chaque transition ci-dessous. */

/* Liens texte : le soulignement d'origine ne disparait JAMAIS — c'est le
   repere. Au survol ou au focus, un second trait plus epais se deploie
   depuis la gauche, en transform pur (jamais en largeur animee). */
.contact dd a, .reserver__ou a, .site-foot a { position: relative; }
.contact dd a::after, .reserver__ou a::after, .site-foot a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .3rem;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.contact dd a:hover::after, .contact dd a:focus-visible::after,
.reserver__ou a:hover::after, .reserver__ou a:focus-visible::after,
.site-foot a:hover::after, .site-foot a:focus-visible::after { transform: scaleX(1); }

/* Photos de la galerie : leger zoom au survol, seulement la ou un vrai
   pointeur survole et ou le mouvement n'est pas reduit. Rien au tactile.
   Le rideau (overflow:hidden) recadre l'agrandissement. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .galerie .rideau img { transition: transform .25s ease; }
  .galerie .rideau:hover img { transform: scale(1.03); }
  .card, .diplome, .medaille { transition: transform .2s ease, box-shadow .2s ease; }
  .card:hover, .diplome:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(4, 60, 66, .18), 0 2px 6px rgba(4, 60, 66, .10); }
}

/* =========================================== 26. Ecrans larges (ajouts) */
@media (min-width: 40rem) {
  .confiance { grid-template-columns: repeat(3, 1fr); }
  .aa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {

  /* Titre de section a gauche, contenu a droite. */
  /* 21rem ne suffisaient pas a un titre de 84 px : « hairdressing » y faisait
     463 px pour 336 px de colonne. La colonne s'elargit ET le titre se calme
     dans cette configuration — les deux, parce que l'un sans l'autre laisse
     le probleme revenir au premier titre un peu long. */
  .sec--split > .wrap { display: grid; grid-template-columns: 26rem 1fr; gap: 4rem; align-items: start; }
  .sec--split .section-title { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 3.6rem); }
  /* Pas de position:sticky ici. Le titre suivait le defilement pendant qu'on
     lisait les questions, et son top:2rem ignorait la barre collante : il
     passait derriere. Surtout, la page a deja un element qui suit le
     defilement — l'en-tete. Un second mobile en meme temps, pour une
     clientele agee, c'est un de trop. Le titre reste ou il est. */
  .sec--split .section-head { margin-bottom: 0; }
  .sec--split .section-head + * { margin-top: 0; }

  /* Le degrade decoratif du bandeau ne peut vivre qu'ici, apres la regle de
     base : a specificite egale c'est l'ordre de la feuille qui tranche, et la
     partie 25 vient plus bas que la partie 14. Le texte est plafonne a 30rem :
     sur 992 px de bandeau il s'arrete vers 52 % de la largeur, ou le voile
     vaut encore 88,5 % — creme 5,1:1. Le degrade ne s'ouvre qu'au-dela, la ou
     aucune lettre ne va. */
  .bandeau::after {
    background: linear-gradient(96deg,
                rgba(4, 98, 106, .94) 0%,
                rgba(4, 98, 106, .88) 60%,
                rgba(4, 98, 106, .70) 100%);
  }

  /* Texte a gauche, image a droite — et l'inverse. */
  .duo { grid-template-columns: 1.1fr .9fr; gap: 3.5rem; align-items: center; }
  .duo--inverse .duo__media { order: -1; }
  .duo .etapes { grid-template-columns: 1fr; }
}


/* ================================================== 28. Forfaits */
/* Trois forfaits au-dessus des prestations seules : c'est ce qui rapporte le
   plus a la cliente comme a Paola, et ce que le site doit pousser. Chaque
   carte dit ce qu'elle comprend, ses trois prix par longueur, et pour chacun
   ce que couteraient les memes prestations reservees une a une. Pas de prix
   barre : illisible pour des yeux ages, et « au lieu de » se lit tout seul. */
/* Reperes de longueur (donnes par Paola le 07-09-2026). Le prix depend de la
   longueur : la cliente doit pouvoir se situer seule avant de choisir, sans
   ecrire pour demander. Une ligne de texte, pas un tableau — trois reperes ne
   valent pas une grille, et la ligne se replie toute seule sur un telephone. */
.longueurs {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 2rem;
}
.longueurs b { color: var(--ink); font-weight: 600; }
.longueurs__sep { opacity: .45; padding: 0 .2rem; }

/* ── Les trois gestes de la section (22-09-2026) ──────────────────────────
   « Choisissez votre longueur / La carte affiche votre prix / Réservez ».
   Trois lignes, pas un mode d'emploi : elles disent qu'il y a un ordre, ce
   que la page ne disait nulle part. Masquees par defaut et montrees par
   js/longueur.js — sans lui, elles decriraient un geste impossible.
   Le chiffre est un rond plein : il se lit comme une etape et pas comme une
   puce, et il reste visible pour qui ne distingue pas les couleurs. */
.presta-etapes { display: none; }
.presta-etapes--actif {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.presta-etapes li { display: flex; align-items: center; gap: .5rem; }
.presta-etapes li:first-child { color: var(--turq-carte); }
.presta-etapes__n {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: 50%;
  background: var(--turq-deep);
  color: #fff;
  font-size: .8125rem;
  letter-spacing: 0;
}

/* ── Choix guide de la longueur (21-09-2026) ──────────────────────────────
   La ligne de reperes ci-dessus dit a la cliente comment se situer ; ce bloc
   lui demande de choisir, et toute la carte affiche alors CE prix-la. Les
   trois prix restent ecrits dans le HTML : le choix ne masque, il ne
   remplace rien. Sans JavaScript, .choix-lg n'apparait jamais (display:none
   ici, et seul js/longueur.js ajoute --actif) et la page se comporte comme
   avant — trois boutons morts seraient pires que pas de boutons.
   Masque par DISPLAY et pas par l'attribut hidden : troisieme famille des
   learnings, « display l'emporte sur hidden ».
   Le dessin des trois boutons est celui de .dm-longueurs (la maquette
   d'agenda), recopie ici parce que css/demo-agenda.css ne part PAS dans le
   livrable et que regles_metier exige une regle livree pour toute classe
   livree. Meme composant, meme geste, deux endroits — et 56 px de haut, au
   -dessus des 48 px que la maison s'impose. */
/* SECONDE PASSE — 22-09-2026. Le bloc etait la, il ne se voyait pas : une
   question en gras dans la largeur du texte, au milieu de trois paragraphes
   et d'une ligne de reperes. On le prenait pour un filtre parmi d'autres, pas
   pour la premiere chose a faire.
   Il devient donc un PANNEAU : toute la largeur de la section (et non plus
   --measure), fond degrade, bordure turquoise de 2 px, la question dans le
   serif des titres. Trois boutons de 88 px au lieu de 56, alignes a gauche
   avec leur repere dessous — celui que la ligne de reperes disait deux fois.
   Mesure : le selecteur passe de 519 a 441 px du haut de section a 1280. */
.choix-lg { display: none; }
.choix-lg.choix-lg--actif {
  display: block;
  margin: 1.25rem 0 2.25rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: linear-gradient(180deg, #e4f4f7 0%, var(--surface) 100%);
  border: 2px solid var(--turq);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(4, 60, 66, .11);
}
.choix-lg__q {
  margin: 0 0 .3rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
}
.choix-lg__s { margin: 0 0 1.25rem; font-size: 1.0625rem; color: var(--ink-soft); }
.choix-lg__opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .875rem; }
.choix-lg__opts button {
  min-height: 88px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .2rem;
  padding: .8rem 1rem;
  border: 2px solid var(--rule-strong);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.choix-lg__opts button b { font-size: 1.25rem; font-weight: 700; }
.choix-lg__opts button span { font-size: .9375rem; color: var(--ink-soft); line-height: 1.25; }
/* A 390 px, trois colonnes donnaient 105 px par bouton : « Mi-longs » y
   passait sur deux lignes et son repere sur trois. Une colonne, et le repere
   revient sur la meme ligne que le nom. */
@media (max-width: 40rem) {
  .choix-lg.choix-lg--actif { padding: 1.35rem 1.15rem 1.25rem; }
  .choix-lg__opts { grid-template-columns: 1fr; gap: .625rem; }
  .choix-lg__opts button {
    min-height: 62px;
    flex-direction: row; align-items: baseline; gap: .55rem;
  }
}
.choix-lg__opts button:hover { border-color: var(--turq-deep); }
.choix-lg__opts button[aria-checked="true"] { background: var(--turq-deep); border-color: var(--turq-deep); color: #fff; }
.choix-lg__opts button[aria-checked="true"] span { color: rgba(255, 255, 255, .85); }
.choix-lg__tous {
  min-height: 48px; margin-top: .6rem; padding: 0 .2rem;
  border: 0; background: none; font: inherit; font-weight: 600;
  color: var(--turq-vif); cursor: pointer; text-decoration: underline;
}

/* Le choix pose data-lg-choisi sur la section ; les deux autres longueurs
   disparaissent. Trois regles ecrites a la main plutot qu'un selecteur
   calcule : on voit d'un coup d'oeil ce qui se passe, et rien ne depend de
   l'ordre des longueurs dans le JSON. */
[data-lg-choisi="court"] [data-lg]:not([data-lg="court"]),
[data-lg-choisi="mi-long"] [data-lg]:not([data-lg="mi-long"]),
[data-lg-choisi="long"] [data-lg]:not([data-lg="long"]) { display: none; }
/* Une seule longueur affichee : son etiquette devient du bruit. Sauf sur
   « Non propose sur cheveux courts », ou l'etiquette porte le sens. */
[data-lg-choisi] .svc__p:not(.svc__p--non) .svc__pl,
[data-lg-choisi] .formule__prix dt { display: none; }
[data-lg-choisi] .svc__prix--3 { justify-content: flex-start; }

.formules { margin: 1rem 0 3rem; }
/* Pas de marge negative : le filet du titre entrait de 4 px dans la boite de
   ligne du paragraphe (mesure). */
.formules__lead { color: var(--ink-soft); max-width: var(--measure); margin: 0 0 1.5rem; }
.formules__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
}
.formule {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--turq);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.formule__tag {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.formule__nom {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.15;
  text-wrap: balance;
}
.formule__inclus { margin: 0; color: var(--ink-soft); }
.formule__prix { margin: .5rem 0 0; display: grid; gap: .25rem; }
.formule__prix div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
}
.formule__prix dt { font-weight: 600; }
.formule__prix dd {
  margin: 0;
  text-align: right;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--turq-carte);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.formule__prix dd b { font-weight: 400; }
/* La comparaison sous le prix : police du texte courant, pas le serif, pour
   que le prix du forfait reste le seul chiffre qui saute aux yeux. */
.formule__cmp {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .9375rem;
  color: var(--ink-soft);
  white-space: normal;
}
/* La note « non proposé sur cheveux courts » remplace un prix : elle doit
   pouvoir passer a la ligne, sinon elle sort de la carte a 390 px (mesure :
   459 px de large en francais). */
.formule__prix dd.formule__non { font-family: inherit; font-size: 1rem; font-style: italic; color: var(--ink-soft); white-space: normal; max-width: 11rem; line-height: 1.35; }
.formule__duree { margin: .25rem 0 0; font-weight: 600; }
.formule__btn { margin-top: auto; }
.formules__note { margin: 1rem 0 0; font-size: 1rem; color: var(--ink-soft); max-width: var(--measure); }

/* --- prestations seules : prix par longueur ------------------------------
   La carte garde sa grille « nom | prix » quand le prix est unique ; avec
   trois longueurs, la rangee des prix passe sous le nom, sur toute la
   largeur. Les trois etiquettes en petites capitales, les trois montants
   dans le serif des titres. */
.svc__desc { grid-column: 1 / -1; font-size: 1rem; color: var(--ink-soft); }
.svc__prix--3 {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  white-space: normal;
  text-align: left;
}
.svc__p { display: inline-flex; flex-direction: column; }
/* 13 px sur un ecran de telephone, pour une clientele agee, c'est le
   moment ou l'on ecarte les doigts pour agrandir. Ces etiquettes passent a
   14 px sous 40rem — voir le bloc « lisibilite sur telephone » en fin de
   feuille. */
.svc__pl {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.svc__pv { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.svc__prix:not(.svc__prix--3) .svc__pv { font-size: 1.6rem; }
.svc__p--non .svc__pv { font-family: inherit; font-size: 1rem; font-style: italic; color: var(--ink-soft); }
.svc__duree { grid-column: 1 / -1; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
/* Coupe et brushing : un forfait au sens du modele, range parmi les
   prestations de sa famille. La barre d'accent passe en degrade, du
   turquoise au cuivre : les deux familles y sont. */
.svc--formule::before { background: linear-gradient(180deg, var(--turq), var(--copper)); }

/* ================================================== 29. Deplacement */
/* La premiere regle est un argument de vente : barre turquoise, corps plus
   grand. Les deux autres sont l'information complete, au meme niveau de
   lisibilite mais sans le relief. */
.deplacement {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  max-width: 46rem;
}
.deplacement__regle {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.1rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-weight: 600;
}
.deplacement__ico { width: 26px; height: 26px; flex: none; fill: var(--turq-text); opacity: .85; }
.deplacement__offert { border-left: 6px solid var(--turq); font-size: var(--step-1); font-weight: 700; }
.deplacement__offert .deplacement__ico { width: 32px; height: 32px; }

/* ================================================== 30. Diplomes */
/* Les medailles reprennent .confiance / .medaille (partie 22). Dessous, le
   certificat OPI en carte large — vignette a gauche, texte et programme a
   droite des 40rem — puis les quatre autres en grille. La vignette est un
   lien : sans JavaScript elle ouvre l'image ; avec, la boite de dialogue. */
.medaille__val small { font-size: .55em; }
/* --- À propos (13-09-2026) -------------------------------------------
   Photo verticale (3:4) a gauche, texte a droite des 62rem ; empiles en
   dessous, photo d'abord. La colonne photo n'existe que si la figure est la :
   tant que l'accord n'est pas archive, la figure est dans un bloc « pending »
   retire du livrable, et :has() rend la grille sur une seule colonne — le
   texte ne se retrouve pas a cote d'un vide. */
/* Fond explicite depuis le 13-09 : la section etait transparente et laissait
   voir le corps (le presque blanc). Elle en avait donc la couleur sans en
   avoir le grain ni le motif — une section fantome au milieu de la page. */
.apropos {
  position: relative;
  background: var(--grain), var(--net);
}
.apropos__grid { display: grid; gap: 2rem; align-items: start; }
.apropos__photo { margin: 0; }
.apropos__photo img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.apropos__photo figcaption { margin-top: .6rem; font-size: .9rem; color: var(--ink-soft); }
.apropos__txt p { margin: 0 0 1rem; }
/* min-height 48px (21-09-2026) : c'est la regle de la maison pour toute cible
   tactile, et ce lien etait le SEUL element interactif de la page a y echapper
   — 31 px de haut, mesure aux trois langues et aux deux largeurs. Un oubli,
   pas un choix : la clientele visee est agee, c'est la raison meme de la
   regle. Le padding vertical seul suffit, la mise en page ne bouge pas
   (inline-flex, le lien est seul sur sa ligne sous la bio). */
.apropos__lien {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 48px; padding: .35rem 0;
  margin-top: .5rem; font-weight: 600; color: var(--turq-vif);
}
.apropos__lien::after { content: "↓"; }

/* Sa voix, distincte de la notre. Le lead et les deux paragraphes au-dessus
   sont une redaction d'agence ; les quatre qui suivent sont d'elle, recus par
   WhatsApp le 17-09-2026 (docs/textes-client/2026-09-17_bio-paola.md).
   Le filet cuivre et le retrait marquent le changement de voix. Pas d'italique :
   a ce corps-la, l'italique sur plusieurs paragraphes fatigue une lectrice agee,
   et c'est la lectrice que cette page vise en premier. */
.apropos__bio {
  margin: 1.75rem 0 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--copper);
}
.apropos__bio p { margin: 0 0 1rem; }
.apropos__bio p:last-child { margin-bottom: 0; }
.apropos__bio-src {
  margin: .9rem 0 0;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* Sa phrase de cloture. Elle ferme la section : c'est le dernier texte lu avant
   le lien vers les diplomes. Playfair, corps 2, cuivre profond (5,9:1 sur la
   base, davantage sur --net qui est plus clair) — assez pour se detacher d'un
   paragraphe, pas assez pour concurrencer un titre de section. */
/* La devise en TITRE de section (22-09-2026). C'est une phrase entiere, pas
   deux mots : elle descend d'un cran par rapport aux autres titres, et le
   texte s'equilibre sur deux lignes au lieu de laisser un mot orphelin.
   L'ancienne regle .apropos__devise (blockquote de cloture) est retiree avec
   le bloc qu'elle habillait. */
.apropos__devise-t {
  font-size: clamp(1.75rem, 4.2vw, 2.9rem);
  font-style: italic;
  line-height: 1.12;
  text-wrap: balance;
  max-width: 34ch;
}
/* Attribution : son nom sous sa phrase. Il etait le titre jusqu'au 22-09 —
   il garde sa cle i18n, il change de rang. */
.apropos__qui {
  margin: .5rem 0 1rem;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.apropos__qui em { font-style: normal; font-weight: 400; }

@media (min-width: 62rem) {
  .apropos__grid:has(.apropos__photo) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}

.diplomes { margin-top: 2.5rem; display: grid; gap: 1.5rem; }
.diplomes__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-items: stretch; }
.diplome {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* L'OPI domine : surface chaude, filet cuivre (le seul de la page), titre plus
   grand, programme a coches. Les quatre autres sont des vignettes egales :
   bandeau d'image fixe cadre en haut du diplome, nom, ecole, annee — le
   detail part dans la boite de dialogue (js/diplomes.js). Decide le 13-09. */
.diplome--phare {
  border-top: 8px solid var(--copper);
  background: var(--surface-warm);
  box-shadow: 0 18px 48px rgba(4, 60, 66, .16), 0 2px 6px rgba(4, 60, 66, .10);
}
.diplome--phare .diplome__meta {
  align-self: flex-start;
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(196, 132, 88, .16); color: var(--copper-deep);
}
.diplome--phare .diplome__org { font-weight: 700; }
.diplome--phare .diplome__desc { font-size: 1.125rem; }
.diplome--phare .diplome__prog { padding-left: 0; }
.diplome--phare .diplome__prog li { list-style: none; position: relative; padding-left: 1.6rem; }
.diplome--phare .diplome__prog li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 1rem; height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304626a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.diplomes__grid .diplome { cursor: pointer; }
.diplomes__grid .diplome__vue { padding: .75rem; height: 150px; overflow: hidden; }
.diplomes__grid .diplome__vue picture { display: block; height: 100%; }
.diplomes__grid .diplome__img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.diplomes__grid .diplome__loupe { width: 40px; height: 40px; right: 1rem; bottom: 1rem; }
.diplomes__grid .diplome__loupe svg { width: 22px; height: 22px; }
.diplomes__grid .diplome__texte { padding: 1rem 1.125rem 1.125rem; gap: .3rem; flex: 1; }
.diplomes__grid .diplome__meta { font-size: .8rem; }
.diplomes__grid .diplome__titre { font-size: 1.25rem; }
.diplomes__grid .diplome__org { font-size: .95rem; color: var(--ink-soft); margin: 0; }
.diplomes__grid .diplome__desc { display: none; }   /* reste dans le DOM : traduit, et lu par la boite */
.diplomes__grid .diplome__lien { margin: auto 0 0; padding-top: .6rem; font-size: .95rem; font-weight: 700; color: var(--turq-vif); }
.diplome__vue {
  position: relative;
  display: block;
  padding: 1rem;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.diplome__img { width: 100%; height: auto; display: block; border-radius: 6px; }
/* La loupe : toujours visible, pas seulement au survol — un ecran tactile
   n'a pas de survol, et une vignette sans indice ne se clique pas. Blanc
   sur turquoise profond, 7,1:1. */
.diplome__loupe {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--turq-deep);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.diplome__loupe svg { width: 24px; height: 24px; }
.diplome__vue:hover .diplome__loupe, .diplome__vue:focus-visible .diplome__loupe { background: #034c52; }
.diplome__texte { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .4rem; }
.diplome__meta {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.diplome__titre {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: balance;
}
.diplome--phare .diplome__titre { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.1; }
.diplome__org { margin: 0; font-weight: 600; }
.diplome__desc { margin: 0; color: var(--ink-soft); }
.diplome__prog-t { margin: .75rem 0 0; font-weight: 700; }
.diplome__prog { margin: .25rem 0 0; padding-left: 1.25rem; color: var(--ink-soft); }
.diplome__prog li + li { margin-top: .2rem; }

/* Boite d'agrandissement. <dialog> natif : Echap ferme, le focus reste
   dedans, le fond est geré par ::backdrop. */
.zoom {
  border: 0;
  padding: 0;
  width: min(96vw, 70rem);
  max-height: calc(100dvh - 2rem);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(4, 60, 66, .35);
  overflow: hidden;
  display: none;
}
.zoom[open] { display: flex; flex-direction: column; }
.zoom::backdrop { background: rgba(16, 31, 34, .78); }
.zoom__barre {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--rule);
}
.zoom__titre { margin: 0; font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.zoom__x { min-height: 48px; flex: none; }
.zoom__cadre { padding: 1rem; background: #fff; overflow: auto; flex: 1 1 auto; min-height: 0; }
.zoom__cadre img { display: block; width: 100%; height: auto; }
.zoom__desc { margin: 0; padding: .875rem 1.25rem 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }
.zoom__desc:empty { display: none; }
.zoom__desc { margin: 0; padding: .875rem 1.25rem 0; font-size: 1.05rem; line-height: 1.5; color: var(--ink-soft); }
.zoom__desc:empty { display: none; }
.zoom__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .875rem 1.25rem;
  padding-bottom: max(.875rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.zoom__nav .btn { flex: 1 1 12rem; }
body.zoom-open { overflow: hidden; }

/* Version galerie de la meme boite. Deux differences avec les diplomes.
   D'abord la largeur : un diplome est un scan de 1200 px qu'on veut voir en
   grand, alors que les photos de la galerie plafonnent entre 198 et 900 px
   selon la photo. `width: 100%` les etirerait — une photo floue est pire que
   pas de zoom. On centre donc a la taille reelle, plafonnee par
   js/visionneuse.js qui lit la plus grande variante existante.
   Ensuite le fond : gris plutot que blanc, pour que les meches claires ne se
   perdent pas dans le bord de la boite. */
/* Plus etroite que la boite des diplomes : un diplome est un document large,
   les photos de la galerie sont majoritairement verticales. A 70rem elles
   flottaient au milieu d'un aplat vide. */
.zoom--galerie { width: min(96vw, 44rem); }
.zoom--galerie .zoom__cadre {
  background: var(--alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom--galerie .zoom__cadre img {
  width: auto;
  max-width: 100%;
  max-height: calc(100dvh - 16rem);
  height: auto;
  border-radius: var(--radius);
}
.zoom__ident { display: flex; align-items: baseline; gap: .75rem; min-width: 0; }
.zoom__compteur {
  margin: 0;
  font-size: .9375rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ================================================== 31. Mentions */
.mentions { margin: .25rem 0; font-size: .9375rem; }

@media (min-width: 30rem) {
  .diplomes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 40rem) {
  .diplome--phare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .diplome--phare .diplome__vue { border-bottom: 0; border-right: 1px solid var(--rule); align-self: start; }
  .diplome--phare .diplome__texte { padding: 1.75rem 2rem; }
  .diplome__prog { columns: 2; column-gap: 1.5rem; }
  .deplacement { grid-template-columns: 1fr; }
}
@media (min-width: 62rem) {
  .diplomes__grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
}


/* ================================================== 32. Mariees & evenements */
/* Un produit a part : deux colonnes, le medaillon de colibris a droite (au
   dessus sur telephone), le cuivre en accent — c'est la couleur qui dit
   « autre chose » sans sortir de la palette. Les deux forfaits en grand, le
   plus cher d'abord ; l'unite en dessous, discrete ; les extras sans prix.
   Fond : le ton de base, comme les prestations — la difference est dans la
   composition, pas dans une quatrieme couleur de fond. */
.sec--mariee .eyebrow--cuivre { color: var(--copper-deep); }
.mariee { display: grid; gap: 2rem; }
.mariee__illu { display: flex; justify-content: center; }
.mariee__medaillon { width: min(18rem, 78vw); height: auto; display: block; }
.mariee__corps { min-width: 0; }
/* Les deux photos de mariee reprennent la galerie telle quelle (colonnes CSS,
   rideau de colibris, legende) : la classe .galerie porte deja tout, celle-ci
   ne regle que l'espacement dans la colonne de droite. Deux photos suffisent —
   au-dela, elles concurrenceraient les forfaits, qui sont le sujet. */
.mariee__photos { margin: 0 0 2.25rem; }
/* Les deux groupes du medaillon : la couronne un peu en retrait, le couple
   en pleine couleur. Aucune animation : le mouvement de la page se limite a
   l'apparition au defilement. */
.mariee__couronne { opacity: .9; }
.mariee__couple { opacity: 1; }
.mariee__h {
  margin: 2rem 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--ink);
}
.mariee__h--discret { font-size: 1.25rem; color: var(--ink-soft); margin-top: 2.25rem; }
.mariee__forfaits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
}
.mariee-forfait {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 6px solid var(--copper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mariee-forfait__tag {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
.mariee-forfait__nom { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; text-wrap: balance; }
/* Le prix, en grand : c'est lui qui dit que c'est un autre produit. Cuivre
   profond sur blanc, 7,0:1. */
.mariee-forfait__prix {
  margin: .25rem 0 .25rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--copper-deep);
  font-variant-numeric: tabular-nums;
}
.mariee-forfait__prix b { font-weight: 400; }
.mariee-forfait--phare .mariee-forfait__prix { font-size: 3.1rem; }
.mariee-forfait__chf {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-soft);
}
.mariee-forfait__inclus { margin: 0; padding: 0; list-style: none; }
.mariee-forfait__inclus li {
  position: relative;
  padding: .35rem 0 .35rem 1.6rem;
  border-top: 1px solid var(--rule);
}
.mariee-forfait__inclus li:first-child { border-top: 0; }
/* Le colibri sert de puce, en cuivre : decoratif, il ne porte aucune information. */
.mariee-forfait__inclus li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55rem;
  width: 17px;
  height: 17px;
  background: var(--colibri) center / contain no-repeat;
  opacity: .75;
  filter: sepia(1) saturate(2.2) hue-rotate(-18deg) brightness(.85);
}
.mariee__svc { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.mariee__svc li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
}
.mariee__svc-n { font-weight: 600; }
.mariee__svc-d { font-weight: 400; color: var(--ink-soft); font-size: 1rem; }
.mariee__svc-p { font-family: var(--font-display); font-size: 1.35rem; white-space: nowrap; color: var(--copper-deep); font-variant-numeric: tabular-nums; }
.mariee__extras { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
/* Rayon borne a la demi-hauteur d'une ligne : une pastille d'une ligne reste
   une pilule, une pastille de trois lignes garde ses coins loin du texte —
   mesure : a 999px la bordure entrait dans le coin du rectangle de texte. */
.mariee__extras li {
  padding: .45rem .9rem;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 1.35rem;
  font-size: 1rem;
  color: var(--ink);
}
.mariee__extras-note { margin: .75rem 0 0; font-size: 1rem; color: var(--ink-soft); }
/* La note de planification : la phrase qui remplace le calendrier. */
.mariee__note {
  margin: 2rem 0 0;
  padding: 1rem 1.25rem;
  border-left: 5px solid var(--copper);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  box-shadow: var(--shadow);
  font-weight: 600;
}
/* Le supplement obligatoire se lit avec les prix, juste sous les forfaits. */
.mariee__depl { margin: 1rem 0 0; font-size: 1rem; font-weight: 600; color: var(--ink); }
/* Argument de vente sous les forfaits (reponse de Paola du 12-09-2026) : la
   pose du voile est offerte et elle reste jusqu'au dernier moment. Le cuivre
   en filet, comme sur les cartes de forfait : c'est ce qui dit « ceci
   compte » sans encadre ni couleur de fond supplementaire. */
.mariee__offert {
  margin: 1.25rem 0 0; padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--copper);
  font-size: 1.05rem; font-weight: 600; line-height: 1.5; color: var(--copper-deep);
}
.mariee__cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 1.5rem; }
.mariee__cta .btn { flex: 1 1 15rem; min-height: 60px; }

@media (min-width: 62rem) {
  .mariee { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3.5rem; align-items: start; }
  .mariee__illu { order: 2; position: sticky; top: calc(var(--head-h) + 3rem); }
  .mariee__medaillon { width: 22rem; }
  .mariee-forfait--phare .mariee-forfait__prix { font-size: 3.4rem; }
}

/* ============================== 27. Impression (en fin de feuille) */
/* DERNIERE partie, deliberement : @media n'ajoute aucune specificite, seul
   l'ordre fait gagner le papier sur les regles ecran. Ne rien ajouter
   apres ce bloc. */
@media print {
  /* html devant .jump : « html:not(.js) .jump » (0,2,0) bat un « .jump »
     (0,1,0) meme place plus bas — l'ordre ne tranche qu'a specificite egale,
     et la liste de raccourcis s'imprimait. */
  .actionbar, html .jump, .skip, .lang-sw { display: none; }
  /* Le defilement n'a pas eu lieu sur le papier : sans cela, tout ce qui
     attend son apparition s'imprime vide. */
  .js-reveal .reveal,
  .js-reveal .reveal-l,
  .js-reveal .reveal-r {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Un bloc coupe par un saut de page perd son texte a l'impression. */
  .card, .cards li, .btn, .reserver, .reserver__action,
  .section-head, .etapes li, .faq-item, figure { break-inside: avoid; }
  /* Les ombres en dur ne suivent pas le jeton : on les eteint une a une. */
  .cards--flot .card, .svc, .booking-modal .bm-box { box-shadow: none; }
  /* Le hero est une photo sombre : son texte clair rebascule en encre, donc
     la photo doit disparaitre, sinon c'est encre sombre sur photo sombre. */
  .hero { background: #fff; color: var(--ink); }
  .hero__media, .hero__voile, .hero__img { display: none; }
  /* La boite d'agrandissement et sa loupe n'ont pas de sens sur papier. */
  .zoom, .diplome__loupe { display: none; }
  .formule, .diplome, .deplacement__regle, .medaille, .mariee-forfait, .mariee__note { break-inside: avoid; box-shadow: none; }
  .mariee__illu { display: none; }
  /* Le papier ne defile pas : les panneaux du rideau imprimeraient fermes,
     et les ondes flotteraient sans les fonds de section (non imprimes). */
  .rideau__panneau, .onde { display: none; }
  /* L'encre de la page est deja sombre : il n'y a que les ombres a eteindre
     et les fonds a blanchir. Seul le bloc rendez-vous, qui porte du texte
     creme sur un aplat, doit etre rebascule — sinon il imprime blanc sur
     blanc (verifie en emulation). */
  :root { --shadow: none; }
  body { padding-bottom: 0; background: #fff; }
  .sec--base, .sec--alt, .sec--net, .flottantes, .sec--sombre,
  .bandeau, .site-foot {
    background: #fff;
    color: var(--ink);
  }
  .sec--base::after, .sec--alt::after, .sec--net::after,
  .bandeau::after { content: none; }
  .hero { min-height: auto; }
  .hero h1, .hero__sub, .bandeau__txt, .bandeau__src,
  .sec--sombre .section-title, .sec--sombre .lead, .sec--sombre p,
  .sec--sombre a, .sec--sombre .reserver__faits li { color: var(--ink); }
  .hero h1 em, .bandeau__txt em, .sec--sombre .section-title em,
  .hero .eyebrow--clair, .sec--sombre .eyebrow { color: var(--copper-deep); }
  .sec--sombre .btn--primary, .sec--sombre .btn--second {
    background: #fff;
    color: var(--ink);
    border-color: var(--rule-strong);
  }
  .sec--sombre .reserver { background: #fff; border-color: var(--rule); }
  section { padding-block: 1.5rem; }
  .faq-item > div { display: block !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LISIBILITE ET PRISE EN MAIN SUR TELEPHONE — 22-09-2026
   Repassage a 360, 390 et 430 px, les trois largeurs ou sont la plupart des
   telephones. Plus de la moitie des clientes de Paola ont passe 65 ans et
   arrivent du telephone.

   CE BLOC EST EN FIN DE FEUILLE, ET C'EST LA TOUTE SON HISTOIRE. Ecrit au
   milieu (ancre sur un commentaire qui PARLE de la fin de feuille), il
   perdait contre .svc__pl, .diplome__meta et .clip, qui viennent plus loin a
   specificite egale — le dernier arrive gagne. Trois des sept corrections du
   jour n'avaient donc rien corrige, et le controle de construction ne pouvait
   pas le voir : aucune regle n'etait fausse, elles etaient seulement au
   mauvais endroit. Vu en RE-MESURANT la page apres coup, pas en relisant la
   feuille.
   ═══════════════════════════════════════════════════════════════════════ */

/* Sous 14 px, un oeil de 70 ans ecarte les doigts — et une page agrandie est
   une page qu'il faut ensuite deplacer de la main pour lire chaque ligne.
   Etiquettes de prix, mention « toutes longueurs » et ligne de diplome
   passent donc a 14 px sur telephone SEULEMENT : sur grand ecran la
   hierarchie tenait. */
@media (max-width: 40rem) {
  .svc__pl,
  .svc__chf,
  .diplome__meta,
  .diplomes__grid .diplome__meta { font-size: .875rem; }
}

/* Ce qui annonce qu'il y a d'autres clips, sur un telephone, c'est le clip
   suivant qui DEPASSE — pas la barre de defilement : mesure au navigateur
   mobile, elle ne prend aucune hauteur (offsetHeight - clientHeight = 0) et
   n'apparait que pendant le glissement. Les clips occupaient 88 % de la piste
   et n'en laissaient voir que 23 px a 360. */
@media (max-width: 48rem) {
  .clips > .clip { flex: 0 0 78%; }
}