/* =========================================================
   LYHANE : site vitrine
   Charte reprise de l'application : palette rose, cartes très
   arrondies, beaucoup de blanc sur un fond rosé très pâle.
   ========================================================= */

/* ---------- 1. Variables de charte ---------- */
:root {
  /* Palette rose */
  --rose-50:  #fdf2f6;
  --rose-100: #fce7ef;
  --rose-200: #fbd0e0;
  --rose-300: #f8a9c6;
  --rose-400: #f272a3;
  --rose-500: #e84785;
  --rose-600: #d62568;
  --rose-700: #b51753;
  --rose-800: #961446;
  --rose-900: #7d143d;
  --rose-950: #4d0421;

  --brand: var(--rose-800);
  --brand-dark: var(--rose-900);
  --blanc: #ffffff;

  /* Couleurs d'état */
  --critique: #dc2626;
  --attention: #f59e0b;
  --ok: #16a34a;

  /* Texte */
  --texte: #1e293b;
  --texte-doux: #52627a;
  --texte-tres-doux: #8496ad;

  /* Rayons */
  --r-sm: .5rem;
  --r-md: .75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-2xl: 1.85rem;
  --r-full: 9999px;

  /* Ombres, très diffuses et teintées rose */
  --ombre-fine: 0 1px 2px rgba(150, 20, 70, .05);
  --ombre-carte: 0 1px 2px rgba(150, 20, 70, .04), 0 14px 34px -22px rgba(150, 20, 70, .22);
  --ombre-flottante: 0 6px 16px -8px rgba(150, 20, 70, .14), 0 26px 60px -34px rgba(150, 20, 70, .30);
  --ombre-panneau: 0 10px 28px -18px rgba(150, 20, 70, .20), 0 50px 100px -56px rgba(150, 20, 70, .45);

  /* Typographie */
  --pile: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --largeur: 1200px;
  --gouttiere: 24px;
}

/* ---------- 2. Remise à zéro ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--pile);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--rose-50);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* color est indispensable : sans lui, iOS peint le texte des boutons
   en bleu système (visible sur le carrousel des soins et l'accordéon). */
button { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.14;
  letter-spacing: -.028em;
  font-weight: 700;
  color: var(--texte);
}

/* Style unique de toutes les icônes du jeu SVG : trait fin, bouts arrondis.
   Les propriétés sont héritées par le contenu cloné du symbole. */
svg use {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:focus-visible { outline: 3px solid var(--rose-400); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--rose-200); color: var(--rose-950); }

/* ---------- 3. Mise en page ---------- */
.contenu { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }

.section { padding: 112px 0; position: relative; scroll-margin-top: 100px; }
.section--blanc { background: var(--blanc); }

.entete-section { max-width: 720px; margin: 0 auto 64px; text-align: center; }

.etiquette {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--r-full);
  /* Effet verre : blanc translucide teinté rose, filet clair sur le bord
     haut, halo rose fin pour rester visible sur les sections blanches,
     et flou d'arrière-plan qui se voit sur les fonds texturés. */
  background: linear-gradient(140deg, rgba(255, 255, 255, .9), rgba(251, 208, 224, .45));
  backdrop-filter: blur(9px) saturate(150%);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 0 0 1px rgba(248, 169, 198, .4),
    0 6px 16px -9px rgba(150, 20, 70, .35),
    inset 0 1px 0 rgba(255, 255, 255, .95);
  color: var(--brand);
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.etiquette svg { width: 15px; height: 15px; }

.titre-section { font-size: clamp(1.95rem, 3.8vw, 2.85rem); margin-bottom: 18px; }
.titre-section em, .accent { font-style: normal; color: var(--brand); }

.chapeau { font-size: 1.0625rem; color: var(--texte-doux); line-height: 1.72; }

/* ---------- 4. Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease,
              transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn svg { width: 19px; height: 19px; flex: none; }

.btn--principal {
  background: var(--brand);
  color: var(--blanc);
  box-shadow: 0 10px 26px -14px rgba(150, 20, 70, .7);
}
.btn--principal:hover { background: var(--brand-dark); transform: translateY(-1px); box-shadow: 0 16px 34px -14px rgba(150, 20, 70, .78); }

.btn--secondaire { background: var(--blanc); border-color: var(--rose-200); color: var(--brand); }
.btn--secondaire:hover { background: var(--rose-50); border-color: var(--rose-300); }

.btn--clair { background: var(--blanc); color: var(--brand); }
.btn--clair:hover { background: var(--rose-50); transform: translateY(-1px); }

.btn--large { padding: 15px 30px; font-size: 1.0625rem; }

/* Le bouton à pastille glissante : le rond porte-flèche vit à droite,
   et au survol il traverse le bouton vers la gauche en tournant de 45
   degrés, pendant que le texte glisse vers la droite. Transposé d'une
   référence React de Marvin, en CSS seul. */
.btn-glisse {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 54px;
  padding: 0 62px 0 26px;
  border-radius: var(--r-full);
  background: var(--blanc);
  color: var(--brand);
  font-weight: 600;
  font-size: 1.0625rem;
  white-space: nowrap;
  overflow: hidden;
  transition: padding .5s cubic-bezier(.65, 0, .35, 1);
}
.btn-glisse:hover { padding: 0 26px 0 62px; }
.btn-glisse__rond {
  position: absolute;
  top: 50%;
  right: 7px;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--blanc);
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  transition: right .5s cubic-bezier(.65, 0, .35, 1), transform .5s cubic-bezier(.65, 0, .35, 1);
}
.btn-glisse:hover .btn-glisse__rond { right: calc(100% - 47px); transform: translateY(-50%) rotate(45deg); }
.btn-glisse__rond svg { width: 17px; height: 17px; }

/* Variante pleine : pilule magenta, rond blanc. Pour l'en-tête. */
/* Le bouton du diagnostic, dans la barre : une pilule en verre, de la
   même hauteur que « Demander une démo », avec sa loupe dans un rond.
   Au survol, le rond vire au magenta et un reflet traverse la pilule. */
.btn-diag {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 9px;
  height: 42px; padding: 0 18px 0 5px;
  border-radius: var(--r-full);
  background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(251, 208, 224, .55));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 1px rgba(248, 169, 198, .55), 0 6px 16px -9px rgba(150, 20, 70, .4), inset 0 1px 0 rgba(255, 255, 255, .95);
  color: var(--brand);
  font-size: .9375rem; font-weight: 600; white-space: nowrap;
  transition: box-shadow .25s ease, transform .25s ease;
}
.btn-diag__rond {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--rose-100); color: var(--brand);
  transition: background-color .25s ease, color .25s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.btn-diag__rond svg { width: 16px; height: 16px; }
.btn-diag::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  transform: skewX(-18deg); pointer-events: none;
}
.btn-diag:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--rose-300), 0 12px 24px -12px rgba(150, 20, 70, .55), inset 0 1px 0 rgba(255, 255, 255, .95); }
.btn-diag:hover .btn-diag__rond { background: var(--brand); color: var(--blanc); transform: rotate(-12deg) scale(1.06); }
.btn-diag:hover::after { left: 120%; transition: left .6s ease; }
.btn-diag[aria-current="page"] { box-shadow: 0 0 0 1.5px var(--brand), inset 0 1px 0 rgba(255, 255, 255, .95); }
.btn-diag[aria-current="page"] .btn-diag__rond { background: var(--brand); color: var(--blanc); }
/* Le trait est posé en dur : Chrome résout parfois mal currentColor dans un <use> */
.btn-diag:hover .btn-diag__rond svg use, .btn-diag[aria-current="page"] .btn-diag__rond svg use { stroke: var(--blanc); }
.btn-diag:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; }

.btn-glisse--plein { background: var(--brand); color: var(--blanc); }
.btn-glisse--plein .btn-glisse__rond { background: var(--blanc); color: var(--brand); }

/* Variante compacte, à la taille du bouton de la barre */
.btn-glisse--petit { height: 42px; padding: 0 48px 0 20px; font-size: .9375rem; }
.btn-glisse--petit:hover { padding: 0 20px 0 48px; }
.btn-glisse--petit .btn-glisse__rond { width: 32px; height: 32px; right: 5px; }
.btn-glisse--petit:hover .btn-glisse__rond { right: calc(100% - 37px); }
.btn-glisse--petit .btn-glisse__rond svg { width: 14px; height: 14px; }
.btn--petit { padding: 10px 18px; font-size: .9375rem; }

.groupe-boutons { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.groupe-boutons--centre { justify-content: center; }

/* ---------- 5. Pastilles ---------- */
.pastille {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: .8125rem; font-weight: 600;
  background: var(--blanc);
  color: var(--texte-doux);
  border: 1px solid var(--rose-100);
}
.pastille svg { width: 14px; height: 14px; color: var(--brand); }
.pastille--pleine { background: var(--brand); border-color: var(--brand); color: var(--blanc); }
.pastille--pleine svg { color: var(--blanc); }
.pastille--ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.pastille--ok svg { color: #15803d; }

/* ---------- 6. Cartes ---------- */
.carte {
  position: relative;
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--ombre-carte);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
/* Lueur rose qui suit le curseur, alimentée par script.js */
.carte::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: radial-gradient(320px circle at var(--x, 50%) var(--y, 50%), rgba(232, 71, 133, .07), transparent 60%);
}
.carte:hover::before { opacity: 1; }
.carte:hover { transform: translateY(-4px); box-shadow: var(--ombre-flottante); border-color: var(--rose-200); }

.carte h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.carte p { color: var(--texte-doux); font-size: .96875rem; }

.grille { display: grid; gap: 22px; }
.grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Jeton d'icône */
.jeton {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  display: grid; place-items: center;
  background: var(--rose-100);
  color: var(--brand);
  margin-bottom: 20px;
  flex: none;
}
.jeton svg { width: 25px; height: 25px; }
.jeton--petit { width: 38px; height: 38px; border-radius: var(--r-sm); margin-bottom: 0; }
.jeton--petit svg { width: 19px; height: 19px; }

/* ---------- 7. En tête flottante ---------- */
.entete { position: sticky; top: 0; z-index: 70; padding: 16px 0; transition: transform .32s ease; }
/* Sur écran étroit, script.js efface l'en-tête quand on descend */
.entete.est-cachee { transform: translateY(-110%); }
.entete__pilule {
  display: flex; align-items: center; gap: 24px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  padding: 9px 12px 9px 22px;
  box-shadow: var(--ombre-fine);
  transition: box-shadow .25s ease, background-color .25s ease;
}
.entete.est-collee .entete__pilule { background: rgba(255,255,255,.94); box-shadow: var(--ombre-carte); }

.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 30px; width: auto; }

.nav { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
.nav a { font-size: .9375rem; font-weight: 500; color: var(--texte-doux); transition: color .18s ease; }
.nav a:hover { color: var(--brand); }

.entete__actions { display: flex; align-items: center; gap: 10px; flex: none; }

/* Le bouton du menu mobile épouse la forme de pilule de l'en-tête.
   Les autres boutons principaux de la page gardent le rayon de la charte. */
.menu-mobile .btn { border-radius: var(--r-full); }

.bouton-menu {
  display: none;
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  border: 1px solid var(--rose-200);
  background: var(--blanc);
  color: var(--brand);
  place-items: center; cursor: pointer;
  margin-left: auto;
}
.bouton-menu svg { width: 21px; height: 21px; }

.menu-mobile {
  display: none;
  margin-top: 10px;
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-flottante);
  padding: 10px 20px 22px;
}
.menu-mobile.est-ouvert { display: block; }
/* Le :not(.btn) est indispensable : sans lui cette règle est plus
   spécifique que .btn, le bouton repasse en display:block et perd le
   centrage que lui donne son justify-content. */
.menu-mobile a:not(.btn) { display: block; padding: 13px 2px; font-weight: 500; border-bottom: 1px solid var(--rose-100); }
.menu-mobile .btn { width: 100%; margin-top: 18px; }

/* ---------- 8. Accroche ---------- */
/* ---------- Pourquoi LYHANE, pour vous : l'appel au diagnostic ----------
   Un panneau magenta en deux colonnes : l'argument et la première
   question à gauche, un aperçu du résultat à droite, qui compte quand
   il apparaît (script.js). */
.simu-appel {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center;
  padding: 36px 44px 34px;
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, var(--rose-700), var(--brand) 55%, var(--rose-900));
  color: var(--blanc);
  box-shadow: 0 30px 60px -34px rgba(150, 20, 70, .8);
}
.simu-appel::before {
  content: ""; position: absolute; right: -160px; top: -200px;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 62%);
  pointer-events: none;
}
.simu-appel::after {
  content: ""; position: absolute; left: -140px; bottom: -240px;
  width: 440px; height: 440px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .09), transparent 62%);
  pointer-events: none;
}
.simu-appel > * { position: relative; z-index: 1; }
.simu-appel__etiquette { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 14px 6px 10px; border-radius: var(--r-full); background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blanc); }
.simu-appel__etiquette svg { width: 15px; height: 15px; }
.simu-appel h2 { color: var(--blanc); font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.15; letter-spacing: -.03em; margin-bottom: 8px; }
.simu-appel h2 em { font-style: normal; color: var(--rose-200); }
.simu-appel__chapeau { color: rgba(255, 255, 255, .82); font-size: .9375rem; line-height: 1.55; max-width: 520px; margin-bottom: 16px; }
.simu-appel__preuves { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 18px; }
.simu-appel__preuves li { display: inline-flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: var(--r-full); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); }
.simu-appel__preuves .jeton { margin: 0; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .16); color: var(--blanc); }
.simu-appel__preuves .jeton svg { width: 14px; height: 14px; }
.simu-appel__preuves b { font-size: .84375rem; font-weight: 600; white-space: nowrap; }
.simu-appel__question { padding: 14px 16px 16px; border-radius: var(--r-xl); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.simu-appel__amorce { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rose-200); margin-bottom: 4px; }
.simu-appel__question > b { display: block; font-size: .96875rem; line-height: 1.35; margin-bottom: 10px; }
.simu-appel__choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.simu-appel__choix a {
  display: block; padding: 10px 8px;
  border-radius: var(--r-md);
  background: var(--blanc); color: var(--brand);
  font-size: .9375rem; font-weight: 700; text-align: center;
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .55);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.simu-appel__choix a:hover { transform: translateY(-3px); background: var(--rose-50); box-shadow: 0 16px 28px -14px rgba(0, 0, 0, .6); }

/* L'aperçu du résultat, à droite : une carte blanche, deux pastilles */
.simu-apercu { position: relative; padding: 18px 0 22px; }
.simu-apercu__carte {
  position: relative;
  padding: 20px 22px 18px;
  border-radius: var(--r-xl);
  background: var(--blanc);
  color: var(--texte);
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .5);
  transform: rotate(-1.6deg);
  transition: transform .35s ease;
}
.simu-appel:hover .simu-apercu__carte { transform: rotate(0); }
.simu-apercu__titre { display: inline-block; padding: 3px 10px; border-radius: var(--r-full); background: var(--rose-50); border: 1px solid var(--rose-100); font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.simu-apercu__sous { display: block; font-size: .8125rem; color: var(--texte-doux); margin-bottom: 4px; }
.simu-apercu__total { display: block; font-size: clamp(2.6rem, 4vw, 3.4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--brand); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.simu-apercu__total::after { content: " sur 10"; font-size: .4em; font-weight: 700; letter-spacing: 0; color: var(--texte-tres-doux); }
.simu-apercu__personnes { display: grid; gap: 9px; }
.simu-apercu__personnes li { display: flex; align-items: center; gap: 10px; }
.simu-apercu__personnes .jeton { margin: 0; width: 30px; height: 30px; border-radius: 9px; flex: none; }
.simu-apercu__personnes .jeton svg { width: 15px; height: 15px; }
.simu-apercu__personnes b { display: block; font-size: .8125rem; line-height: 1.25; }
.simu-apercu__personnes b + span { display: block; font-size: .71875rem; color: var(--texte-tres-doux); line-height: 1.3; }
.simu-apercu__note { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rose-100); font-size: .75rem; color: var(--texte-tres-doux); line-height: 1.45; }
.simu-apercu__pastille {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--blanc); color: var(--brand);
  font-size: .8125rem; font-weight: 700;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5);
  animation: apercu-flotter 5s ease-in-out infinite;
}
.simu-apercu__pastille svg { width: 15px; height: 15px; }
.simu-apercu__pastille--haut { right: 8px; top: 0; }
.simu-apercu__pastille--bas { left: 4px; bottom: 0; animation-delay: -2.5s; }
@keyframes apercu-flotter { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Le public : PSAD ou MAD ----------
   L'attribut data-public de <html> est posé avant le premier rendu (voir
   le <head>) et changé par le bouton de l'accroche. Tout ce qui porte
   data-pour ne s'affiche que pour son public ; le reste est commun. */
html[data-public="psad"] [data-pour="mad"],
html[data-public="mad"] [data-pour="psad"] { display: none !important; }

/* Le bouton à deux positions, en verre comme les étiquettes, avec un
   curseur magenta qui glisse sous le choix courant. */
.public-bascule {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  margin-bottom: 30px;
  border-radius: var(--r-full);
  background: linear-gradient(140deg, rgba(255, 255, 255, .92), rgba(251, 208, 224, .5));
  backdrop-filter: blur(9px) saturate(150%);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    0 0 0 1px rgba(248, 169, 198, .4),
    0 10px 24px -12px rgba(150, 20, 70, .4),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
.public-bascule button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 24px;
  border: 0; background: none; cursor: pointer;
  border-radius: var(--r-full);
  font-size: .9375rem; font-weight: 600;
  color: var(--texte-doux);
  white-space: nowrap;
  transition: color .3s ease;
}
.public-bascule button svg { width: 18px; height: 18px; }
.public-bascule button[aria-pressed="true"] { color: var(--blanc); }
.public-bascule button:hover:not([aria-pressed="true"]) { color: var(--brand); }
.public-bascule button:focus-visible { outline: 2px solid var(--rose-500); outline-offset: 2px; }
.public-bascule__curseur {
  position: absolute; z-index: 0;
  top: 5px; bottom: 5px; left: 5px;
  width: calc(50% - 5px);
  border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--rose-700), var(--brand) 55%, var(--rose-900));
  box-shadow: 0 8px 18px -8px rgba(150, 20, 70, .7);
  transition: transform .4s cubic-bezier(.34, 1.4, .64, 1);
}
html[data-public="mad"] .public-bascule__curseur { transform: translateX(100%); }

/* ---------- Les trois promesses d'un MAD ----------
   Chaque carte s'ouvre sur une petite scène qui rejoue en boucle, sept
   secondes, une fois la carte à l'écran : la classe est-visible, posée
   par l'apparition au défilement, lance les animations. Les styles de
   base décrivent l'état final de chaque scène ; les images-clés partent
   de l'état de départ et y reviennent en fin de boucle. Sans mouvement,
   seul l'état final s'affiche.
--------------------------------------------------- */
.promesses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.promesse { padding: 16px 16px 30px; }
.promesse h3 { font-size: 1.3125rem; line-height: 1.22; letter-spacing: -.02em; color: var(--texte); margin: 22px 14px 10px; }
.promesse p { font-size: .9375rem; line-height: 1.6; margin: 0 14px; }

.scene {
  position: relative;
  height: 176px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--rose-50), var(--blanc) 72%);
  border: 1px solid var(--rose-100);
  overflow: hidden;
}
.scene *, .scene *::after { animation-duration: 7s; animation-iteration-count: infinite; animation-fill-mode: both; animation-play-state: paused; }
.est-visible .scene *, .est-visible .scene *::after { animation-play-state: running; }

/* La vente : quatre étapes qui s'allument, un chrono qui tourne, et le
   ticket qui sort par le bas. */
.scene-etapes { position: absolute; left: 16px; top: 16px; margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.scene-etapes li {
  display: inline-flex; align-items: center; gap: 7px;
  width: max-content;
  padding: 5px 11px 5px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--brand);
  background: var(--brand);
  color: var(--blanc);
  font-size: .75rem; font-weight: 600;
  animation-timing-function: ease-in-out;
}
.scene-etapes li svg { width: 13px; height: 13px; }
.scene-etapes li:nth-child(1) { animation-name: vente-etape-1; }
.scene-etapes li:nth-child(2) { animation-name: vente-etape-2; }
.scene-etapes li:nth-child(3) { animation-name: vente-etape-3; }
.scene-etapes li:nth-child(4) { animation-name: vente-etape-4; }
@keyframes vente-etape-1 { 0%, 6% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } 9%, 91% { opacity: 1; background: var(--brand); color: var(--blanc); border-color: var(--brand); transform: none; } 95%, 100% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } }
@keyframes vente-etape-2 { 0%, 16% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } 19%, 91% { opacity: 1; background: var(--brand); color: var(--blanc); border-color: var(--brand); transform: none; } 95%, 100% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } }
@keyframes vente-etape-3 { 0%, 26% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } 29%, 91% { opacity: 1; background: var(--brand); color: var(--blanc); border-color: var(--brand); transform: none; } 95%, 100% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } }
@keyframes vente-etape-4 { 0%, 36% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } 39%, 91% { opacity: 1; background: var(--brand); color: var(--blanc); border-color: var(--brand); transform: none; } 95%, 100% { opacity: .45; background: var(--blanc); color: var(--texte-doux); border-color: var(--rose-200); transform: translateX(-6px); } }
@keyframes apporteur-barre-1 { 0%, 6% { transform: scaleX(0); } 22%, 91% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes apporteur-part-1 { 0%, 22% { opacity: 0; transform: translateX(-4px); } 27%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes apporteur-barre-2 { 0%, 13% { transform: scaleX(0); } 29%, 91% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes apporteur-part-2 { 0%, 29% { opacity: 0; transform: translateX(-4px); } 34%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes apporteur-barre-3 { 0%, 20% { transform: scaleX(0); } 36%, 91% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes apporteur-part-3 { 0%, 36% { opacity: 0; transform: translateX(-4px); } 41%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
@keyframes apporteur-barre-4 { 0%, 27% { transform: scaleX(0); } 43%, 91% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }
@keyframes apporteur-part-4 { 0%, 43% { opacity: 0; transform: translateX(-4px); } 48%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }

.scene-chrono { position: absolute; right: 16px; top: 14px; width: 58px; height: 58px; display: grid; place-items: center; }
.scene-chrono svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scene-chrono circle { fill: none; stroke-width: 3; }
.scene-chrono__fond { stroke: var(--rose-100); }
.scene-chrono__trait {
  stroke: var(--brand); stroke-linecap: round;
  stroke-dasharray: 97.4; stroke-dashoffset: 0;
  animation-name: vente-chrono; animation-timing-function: linear;
}
.scene-chrono span { font-size: .75rem; font-weight: 700; color: var(--brand); }
@keyframes vente-chrono { 0%, 6% { stroke-dashoffset: 97.4; } 52%, 91% { stroke-dashoffset: 0; } 95%, 100% { stroke-dashoffset: 97.4; } }

.scene-ticket {
  position: absolute; right: 14px; bottom: 0;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px 13px;
  border-radius: 12px 12px 0 0;
  background: var(--blanc);
  border: 1px solid var(--rose-100); border-bottom: 0;
  box-shadow: 0 -8px 22px -14px rgba(150, 20, 70, .45);
  animation-name: vente-ticket; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}
.scene-ticket svg { width: 18px; height: 18px; color: var(--brand); }
.scene-ticket b { display: block; font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texte-tres-doux); }
.scene-ticket span { font-size: .9375rem; font-weight: 700; color: var(--texte); line-height: 1.15; }
@keyframes vente-ticket { 0%, 50% { transform: translateY(112%); opacity: 0; } 58%, 91% { transform: none; opacity: 1; } 95%, 100% { transform: translateY(112%); opacity: 0; } }

/* La location : deux semaines au calendrier, le 14 s'allume, et le
   rappel monte dans l'agenda du magasin. */
.scene-calendrier { position: absolute; left: 16px; right: 16px; top: 14px; }
.scene-calendrier__tete { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: .75rem; }
.scene-calendrier__tete b { color: var(--texte); font-weight: 700; }
.scene-calendrier__tete span { color: var(--texte-tres-doux); font-size: .6875rem; white-space: nowrap; }
.scene-calendrier__jours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.scene-calendrier__jours i {
  position: relative;
  display: grid; place-items: center;
  height: 23px;
  border-radius: 7px;
  border: 1px solid var(--rose-100);
  background: var(--blanc);
  font-style: normal; font-size: .6875rem; font-weight: 600;
  color: var(--texte-doux);
}
.scene-calendrier__jours i.est-retour {
  background: var(--brand); border-color: var(--brand); color: var(--blanc);
  animation-name: location-jour; animation-timing-function: ease-in-out;
}
.scene-calendrier__jours i.est-retour::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 2px solid var(--rose-400); opacity: 0;
  animation-name: location-onde; animation-timing-function: ease-out;
}
@keyframes location-jour {
  0%, 18% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); transform: scale(1); }
  23% { background: var(--brand); border-color: var(--brand); color: var(--blanc); transform: scale(1.22); }
  28%, 91% { background: var(--brand); border-color: var(--brand); color: var(--blanc); transform: scale(1); }
  95%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); transform: scale(1); }
}
@keyframes location-onde { 0%, 22% { transform: scale(1); opacity: .7; } 40%, 100% { transform: scale(2.2); opacity: 0; } }

.scene-rappel {
  position: absolute; left: 16px; right: 16px; bottom: 12px;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--blanc);
  border: 1px solid var(--rose-200);
  box-shadow: 0 12px 26px -14px rgba(150, 20, 70, .5);
  animation-name: location-rappel; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}
.scene-rappel svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.scene-rappel b { display: block; font-size: .75rem; font-weight: 700; color: var(--texte); }
.scene-rappel span { font-size: .6875rem; color: var(--texte-doux); line-height: 1.3; }
@keyframes location-rappel { 0%, 34% { transform: translateY(130%); opacity: 0; } 41%, 91% { transform: none; opacity: 1; } 95%, 100% { transform: translateY(130%); opacity: 0; } }

/* Les apporteurs : quatre barres qui poussent l'une après l'autre. */
.scene-classement__tete { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; align-items: baseline; font-size: .75rem; }
.scene-classement__tete b { color: var(--texte); font-weight: 700; }
.scene-classement__tete span { color: var(--texte-tres-doux); font-size: .6875rem; }
.scene-classement { position: absolute; left: 16px; right: 16px; top: 48px; display: grid; gap: 11px; }
.scene-barre { display: grid; grid-template-columns: 98px minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-size: .6875rem; }
.scene-barre span { color: var(--texte-doux); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-barre i {
  display: block; height: 12px;
  width: calc(var(--part) * 100%);
  border-radius: var(--r-full);
  background: var(--rose-300);
  transform-origin: left center;
  animation-timing-function: cubic-bezier(.2, .8, .3, 1);
}
.scene-barre:first-child i { background: linear-gradient(90deg, var(--rose-700), var(--brand)); }
.scene-barre b { color: var(--texte); text-align: right; font-weight: 700; }
.scene-barre:nth-child(1) i { animation-name: apporteur-barre-1; } .scene-barre:nth-child(1) b { animation-name: apporteur-part-1; }
.scene-barre:nth-child(2) i { animation-name: apporteur-barre-2; } .scene-barre:nth-child(2) b { animation-name: apporteur-part-2; }
.scene-barre:nth-child(3) i { animation-name: apporteur-barre-3; } .scene-barre:nth-child(3) b { animation-name: apporteur-part-3; }
.scene-barre:nth-child(4) i { animation-name: apporteur-barre-4; } .scene-barre:nth-child(4) b { animation-name: apporteur-part-4; }

@media (prefers-reduced-motion: reduce) {
  .simu-apercu__pastille { animation: none; }
  .simu-apercu__barre i { transition: none; transform: scaleX(1); }
  .entete { transition: none; }
  .scene *, .scene *::after { animation: none !important; }
}

/* Le puzzle à quatre pièces est plus étroit que celui à six, et ses
   pièces un peu plus petites : quatre pièces sur deux rangs à la même
   échelle prenaient trop de place. Une pièce ouverte, agrandie 1,8 fois,
   couvre toujours sa fiche de 376 px. Le sélecteur double, pour passer
   devant la largeur de .puzzle déclarée plus loin. */
.puzzle.puzzle--quatre { max-width: 540px; }

/* ---------- Métier par métier : six mini-écrans ----------
   Chaque carte s'ouvre sur un écran de l'application réduit à ses
   onglets. L'onglet actif passe au suivant toutes les 1.5 s, et les
   lignes de l'écran se redessinent à chaque passage. La boucle dure
   autant d'onglets fois 1.5 s : data-n sur l'écran, de 3 à 9, choisit
   le jeu d'images-clés. Sans mouvement, le premier onglet reste actif. */
.metiers-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.metier-carte { padding: 16px 16px 30px; }
.metier-carte__tete { display: flex; align-items: center; gap: 13px; margin: 22px 14px 10px; }
.metier-carte__tete .jeton { margin-bottom: 0; width: 42px; height: 42px; flex: none; }
.metier-carte__tete .jeton svg { width: 21px; height: 21px; }
.metier-carte h3 { font-size: 1.0625rem; margin: 0; line-height: 1.25; }
.metier-carte p { font-size: .9375rem; line-height: 1.6; margin: 0 14px; }

.ecran { height: 206px; }
.ecran__barre {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 5px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--rose-100);
}
.ecran__barre i { width: 8px; height: 8px; border-radius: 50%; background: var(--rose-200); }
.ecran__barre span { margin-left: 8px; font-size: .625rem; font-weight: 600; letter-spacing: .02em; color: var(--texte-tres-doux); }

.ecran__onglets {
  position: absolute; left: 14px; right: 14px; top: 40px;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.ecran__onglets span {
  padding: 4px 9px;
  border-radius: var(--r-full);
  border: 1px solid var(--rose-100);
  background: var(--blanc);
  color: var(--texte-doux);
  font-size: .6875rem; font-weight: 600;
  white-space: nowrap;
  animation-duration: calc(var(--n) * 1.5s);
  animation-timing-function: ease-in-out;
}
.ecran__onglets span:first-child { background: var(--brand); border-color: var(--brand); color: var(--blanc); }
.ecran[data-n="3"] { --n: 3; } .ecran[data-n="4"] { --n: 4; } .ecran[data-n="5"] { --n: 5; } .ecran[data-n="6"] { --n: 6; } .ecran[data-n="7"] { --n: 7; } .ecran[data-n="8"] { --n: 8; } .ecran[data-n="9"] { --n: 9; }
.ecran[data-n="3"] .ecran__onglets span:nth-child(1) { animation-name: onglet-3-1; }
.ecran[data-n="3"] .ecran__onglets span:nth-child(2) { animation-name: onglet-3-2; }
.ecran[data-n="3"] .ecran__onglets span:nth-child(3) { animation-name: onglet-3-3; }
.ecran[data-n="4"] .ecran__onglets span:nth-child(1) { animation-name: onglet-4-1; }
.ecran[data-n="4"] .ecran__onglets span:nth-child(2) { animation-name: onglet-4-2; }
.ecran[data-n="4"] .ecran__onglets span:nth-child(3) { animation-name: onglet-4-3; }
.ecran[data-n="4"] .ecran__onglets span:nth-child(4) { animation-name: onglet-4-4; }
.ecran[data-n="5"] .ecran__onglets span:nth-child(1) { animation-name: onglet-5-1; }
.ecran[data-n="5"] .ecran__onglets span:nth-child(2) { animation-name: onglet-5-2; }
.ecran[data-n="5"] .ecran__onglets span:nth-child(3) { animation-name: onglet-5-3; }
.ecran[data-n="5"] .ecran__onglets span:nth-child(4) { animation-name: onglet-5-4; }
.ecran[data-n="5"] .ecran__onglets span:nth-child(5) { animation-name: onglet-5-5; }
.ecran[data-n="6"] .ecran__onglets span:nth-child(1) { animation-name: onglet-6-1; }
.ecran[data-n="6"] .ecran__onglets span:nth-child(2) { animation-name: onglet-6-2; }
.ecran[data-n="6"] .ecran__onglets span:nth-child(3) { animation-name: onglet-6-3; }
.ecran[data-n="6"] .ecran__onglets span:nth-child(4) { animation-name: onglet-6-4; }
.ecran[data-n="6"] .ecran__onglets span:nth-child(5) { animation-name: onglet-6-5; }
.ecran[data-n="6"] .ecran__onglets span:nth-child(6) { animation-name: onglet-6-6; }
.ecran[data-n="7"] .ecran__onglets span:nth-child(1) { animation-name: onglet-7-1; }
.ecran[data-n="7"] .ecran__onglets span:nth-child(2) { animation-name: onglet-7-2; }
.ecran[data-n="7"] .ecran__onglets span:nth-child(3) { animation-name: onglet-7-3; }
.ecran[data-n="7"] .ecran__onglets span:nth-child(4) { animation-name: onglet-7-4; }
.ecran[data-n="7"] .ecran__onglets span:nth-child(5) { animation-name: onglet-7-5; }
.ecran[data-n="7"] .ecran__onglets span:nth-child(6) { animation-name: onglet-7-6; }
.ecran[data-n="7"] .ecran__onglets span:nth-child(7) { animation-name: onglet-7-7; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(1) { animation-name: onglet-8-1; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(2) { animation-name: onglet-8-2; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(3) { animation-name: onglet-8-3; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(4) { animation-name: onglet-8-4; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(5) { animation-name: onglet-8-5; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(6) { animation-name: onglet-8-6; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(7) { animation-name: onglet-8-7; }
.ecran[data-n="8"] .ecran__onglets span:nth-child(8) { animation-name: onglet-8-8; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(1) { animation-name: onglet-9-1; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(2) { animation-name: onglet-9-2; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(3) { animation-name: onglet-9-3; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(4) { animation-name: onglet-9-4; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(5) { animation-name: onglet-9-5; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(6) { animation-name: onglet-9-6; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(7) { animation-name: onglet-9-7; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(8) { animation-name: onglet-9-8; }
.ecran[data-n="9"] .ecran__onglets span:nth-child(9) { animation-name: onglet-9-9; }
@keyframes onglet-3-1 { 0%, 31.8% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 33.3%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-3-2 { 0%, 33.3% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 34.8%, 65.2% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 66.7%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-3-3 { 0%, 66.7% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 68.2%, 98.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 100.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-4-1 { 0%, 23.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 25.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-4-2 { 0%, 25.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 26.5%, 48.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 50.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-4-3 { 0%, 50.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 51.5%, 73.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 75.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-4-4 { 0%, 75.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 76.5%, 98.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 100.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-5-1 { 0%, 18.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 20.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-5-2 { 0%, 20.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 21.5%, 38.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 40.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-5-3 { 0%, 40.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 41.5%, 58.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 60.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-5-4 { 0%, 60.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 61.5%, 78.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 80.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-5-5 { 0%, 80.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 81.5%, 98.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 100.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-6-1 { 0%, 15.2% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 16.7%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-6-2 { 0%, 16.7% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 18.2%, 31.8% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 33.3%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-6-3 { 0%, 33.3% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 34.8%, 48.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 50.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-6-4 { 0%, 50.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 51.5%, 65.2% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 66.7%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-6-5 { 0%, 66.7% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 68.2%, 81.8% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 83.3%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-6-6 { 0%, 83.3% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 84.8%, 98.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 100.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-7-1 { 0%, 12.8% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 14.3%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-7-2 { 0%, 14.3% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 15.8%, 27.1% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 28.6%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-7-3 { 0%, 28.6% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 30.1%, 41.4% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 42.9%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-7-4 { 0%, 42.9% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 44.4%, 55.6% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 57.1%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-7-5 { 0%, 57.1% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 58.6%, 69.9% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 71.4%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-7-6 { 0%, 71.4% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 72.9%, 84.2% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 85.7%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-7-7 { 0%, 85.7% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 87.2%, 98.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 100.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-1 { 0%, 11.0% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 12.5%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-2 { 0%, 12.5% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 14.0%, 23.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 25.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-3 { 0%, 25.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 26.5%, 36.0% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 37.5%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-4 { 0%, 37.5% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 39.0%, 48.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 50.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-5 { 0%, 50.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 51.5%, 61.0% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 62.5%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-6 { 0%, 62.5% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 64.0%, 73.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 75.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-7 { 0%, 75.0% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 76.5%, 86.0% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 87.5%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-8-8 { 0%, 87.5% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 89.0%, 98.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 100.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-1 { 0%, 9.6% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 11.1%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-2 { 0%, 11.1% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 12.6%, 20.7% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 22.2%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-3 { 0%, 22.2% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 23.7%, 31.8% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 33.3%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-4 { 0%, 33.3% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 34.8%, 42.9% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 44.4%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-5 { 0%, 44.4% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 45.9%, 54.1% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 55.6%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-6 { 0%, 55.6% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 57.1%, 65.2% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 66.7%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-7 { 0%, 66.7% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 68.2%, 76.3% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 77.8%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-8 { 0%, 77.8% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 79.3%, 87.4% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 88.9%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }
@keyframes onglet-9-9 { 0%, 88.9% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } 90.4%, 98.5% { background: var(--brand); border-color: var(--brand); color: var(--blanc); } 100.0%, 100% { background: var(--blanc); border-color: var(--rose-100); color: var(--texte-doux); } }

/* Les lignes de l'écran : trois barres qui se retracent à chaque onglet */
.ecran__lignes { position: absolute; left: 14px; right: 14px; bottom: 16px; display: grid; gap: 9px; }
.ecran__lignes i {
  display: block; height: 9px;
  width: var(--l);
  border-radius: var(--r-full);
  background: var(--rose-100);
  transform-origin: left center;
  animation-name: ecran-ligne; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.2, .8, .3, 1);
}
.ecran__lignes i:nth-child(1) { background: var(--rose-200); }
.ecran__lignes i:nth-child(2) { animation-delay: .1s; }
.ecran__lignes i:nth-child(3) { animation-delay: .2s; }
@keyframes ecran-ligne { 0% { transform: scaleX(0); opacity: .4; } 38%, 100% { transform: scaleX(1); opacity: 1; } }

/* ---------- PSAD et MAD, la même entreprise : l'organigramme ----------
   La direction en haut, avec une bascule qui glisse d'elle-même entre
   soin et magasin toutes les trois secondes ; deux fils vers les deux
   agences, celui du côté actif est parcouru d'un flux ; et sous les
   deux, le socle commun. Boucle de six secondes, lancée quand le bloc
   apparaît ; sans mouvement, tout reste au repos. */
.orga { max-width: 980px; margin: 0 auto; display: grid; }
.orga *, .orga *::after { animation-duration: 6s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-play-state: paused; }
.orga.est-visible *, .orga.est-visible *::after { animation-play-state: running; }

.orga__direction {
  position: relative; z-index: 1;
  justify-self: center;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 10px;
  border-radius: var(--r-full);
  background: var(--blanc);
  border: 1px solid var(--rose-200);
  box-shadow: var(--ombre-carte);
}
.orga__direction .jeton { margin: 0; width: 44px; height: 44px; }
.orga__direction b { display: block; font-size: .9375rem; line-height: 1.2; }
.orga__direction b + span { display: block; font-size: .75rem; color: var(--texte-doux); }

.orga__bascule {
  position: relative;
  display: inline-grid; grid-template-columns: 1fr 1fr;
  margin-left: 6px; padding: 3px;
  border-radius: var(--r-full);
  background: var(--rose-100);
}
.orga__bascule span { position: relative; z-index: 1; padding: 6px 13px; font-size: .6875rem; font-weight: 700; text-align: center; white-space: nowrap; }
.orga__bascule span:nth-child(1) { color: var(--blanc); animation-name: orga-libelle-soin; }
.orga__bascule span:nth-child(2) { color: var(--texte-doux); animation-name: orga-libelle-magasin; }
.orga__bascule i {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--r-full);
  background: var(--brand);
  box-shadow: 0 6px 14px -6px rgba(150, 20, 70, .6);
  animation-name: orga-bascule; animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}
@keyframes orga-bascule { 0%, 44% { transform: none; } 50%, 94% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes orga-libelle-soin { 0%, 44% { color: var(--blanc); } 50%, 94% { color: var(--texte-doux); } 100% { color: var(--blanc); } }
@keyframes orga-libelle-magasin { 0%, 44% { color: var(--texte-doux); } 50%, 94% { color: var(--blanc); } 100% { color: var(--texte-doux); } }

.orga__fils { display: block; width: 100%; height: 72px; margin: -4px 0 -6px; overflow: visible; }
.orga__fils path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.orga__fil { stroke: var(--rose-200); }
.orga__flux {
  stroke: var(--brand); stroke-linecap: round;
  stroke-dasharray: 6 10;
  animation-name: orga-flux-soin, orga-flux;
  animation-duration: 6s, 1.1s;
  animation-timing-function: ease-in-out, linear;
}
.orga__flux--magasin { opacity: 0; animation-name: orga-flux-magasin, orga-flux; }
@keyframes orga-flux { to { stroke-dashoffset: -32; } }
@keyframes orga-flux-soin { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes orga-flux-magasin { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }

.orga__branches { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.orga__branche {
  justify-self: center; width: 100%; max-width: 430px;
  padding: 20px 22px 22px;
  border-radius: var(--r-xl);
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  box-shadow: var(--ombre-carte);
}
.orga__branche--soin { animation-name: orga-branche-soin; }
.orga__branche--magasin { animation-name: orga-branche-magasin; }
@keyframes orga-branche-soin {
  0%, 44% { border-color: var(--rose-400); box-shadow: 0 22px 44px -24px rgba(150, 20, 70, .6); transform: translateY(-4px); }
  50%, 94% { border-color: var(--rose-100); box-shadow: var(--ombre-carte); transform: none; }
  100% { border-color: var(--rose-400); box-shadow: 0 22px 44px -24px rgba(150, 20, 70, .6); transform: translateY(-4px); }
}
@keyframes orga-branche-magasin {
  0%, 44% { border-color: var(--rose-100); box-shadow: var(--ombre-carte); transform: none; }
  50%, 94% { border-color: var(--rose-400); box-shadow: 0 22px 44px -24px rgba(150, 20, 70, .6); transform: translateY(-4px); }
  100% { border-color: var(--rose-100); box-shadow: var(--ombre-carte); transform: none; }
}
.orga__branche-tete { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.orga__branche-tete .jeton { margin: 0; width: 42px; height: 42px; flex: none; }
.orga__branche-tete b { display: block; font-size: 1.0625rem; line-height: 1.2; }
.orga__branche-tete b + span { display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--texte-tres-doux); }
.orga__branche ul { display: flex; flex-wrap: wrap; gap: 6px; }
.orga__branche li {
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
  font-size: .75rem; font-weight: 600; color: var(--texte-doux);
}

.orga__socle {
  margin-top: 22px;
  padding: 22px 26px 24px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--rose-700), var(--brand) 55%, var(--rose-900));
  color: var(--blanc);
  box-shadow: 0 24px 50px -28px rgba(150, 20, 70, .7);
}
.orga__socle > b { display: block; margin-bottom: 14px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .8); }
.orga__socle ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 26px; }
.orga__socle li { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.orga__socle li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--rose-200); }

@media (prefers-reduced-motion: reduce) {
  .orga *, .orga *::after { animation: none !important; }
}

.accroche { position: relative; padding: 64px 0 0; text-align: center; overflow: hidden; }


/* Le grand panneau arrondi qui porte la constellation : blanc en haut,
   rose de plus en plus soutenu vers le bas. Il est hors de .contenu
   pour occuper presque toute la largeur, comme la référence. */
.accroche__panneau {
  margin: 40px 24px 0;
  border-radius: 44px;
  background: linear-gradient(180deg, var(--blanc) 0%, #fdecf3 38%, #f9cfe0 76%, #f4bcd4 100%);
  padding: 10px 0 36px;
  position: relative;
  z-index: 1;
}
.accroche > .contenu { position: relative; z-index: 1; }

.accroche h1 {
  font-size: clamp(2.4rem, 5.4vw, 4rem);
  letter-spacing: -.038em;
  line-height: 1.08;
  max-width: 940px;
  margin: 0 auto 24px;
}
/* Les mots clés dans leur rectangle magenta, à la manière d'un bouton.
   Un reflet lumineux traverse le rectangle par intervalles : une bande
   claire inclinée, animée dans le pseudo-élément, rognée par l'overflow.
   Avec le mouvement réduit, la règle globale fige l'animation et la
   bande reste hors du cadre, invisible. */
.accroche h1 em {
  font-style: normal;
  display: inline-block;
  position: relative;
  overflow: hidden;
  /* overflow:hidden déplace la ligne de base d'un inline-block sur son
     bord bas : on redescend le rectangle de la descente de police plus
     le remplissage bas, pour que le texte reste aligné sur la ligne. */
  vertical-align: -.28em;
  padding: .02em .22em .07em;
  border-radius: .26em;
  background: linear-gradient(135deg, var(--rose-500) 0%, var(--rose-700) 60%, var(--rose-800) 100%);
  color: var(--blanc);
  box-shadow: 0 14px 34px -14px rgba(150, 20, 70, .6), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.point--etroit { display: none; }

.accroche h1 em::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  animation: brillance 5.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brillance {
  0%   { transform: skewX(-18deg) translateX(0); }
  34%  { transform: skewX(-18deg) translateX(500%); }
  100% { transform: skewX(-18deg) translateX(500%); }
}
.accroche__intro {
  font-size: 1.1875rem;
  color: var(--texte-doux);
  line-height: 1.66;
  max-width: 660px;
  margin: 0 auto 34px;
}

/* ---------- 9. La constellation des métiers ----------
   Tout converge vers LYHANE. Quinze métiers posés en pourcentages,
   des courbes qui partent du noyau vers chacun, et qui ondulent
   doucement une fois tracées.
   Le repère du SVG est 1120 x 560, et le conteneur garde ce rapport :
   les points HTML et les courbes restent donc alignés à toute largeur.
------------------------------------------------------ */
.constellation {
  position: relative;
  width: 100%;
  aspect-ratio: 1120 / 560;
  margin-top: 26px;
  margin-bottom: 6px;
}
.constellation__fils { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.constellation__fils path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Le trait de fond, qui se dessine à l'ouverture */
.rayon {
  stroke: var(--rose-300);
  stroke-width: 2;
  transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1);
}

/* ---- Le noyau ---- */
.noyau {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
}
.noyau__disque {
  position: relative;
  display: grid; place-items: center;
  width: 152px; height: 152px;
  border-radius: 50%;
  background: var(--blanc);
  animation: souffle 4.5s ease-in-out infinite;
}
.noyau__disque img { width: 104px; height: auto; }
@keyframes souffle {
  0%, 100% {
    box-shadow: 0 0 0 1px var(--rose-100), 0 18px 44px -16px rgba(150, 20, 70, .45),
                0 0 56px rgba(232, 71, 133, .26);
  }
  50% {
    box-shadow: 0 0 0 1px var(--rose-200), 0 18px 44px -16px rgba(150, 20, 70, .45),
                0 0 94px rgba(232, 71, 133, .46);
  }
}
.noyau__onde {
  position: absolute;
  left: 50%; top: 50%;
  width: 152px; height: 152px;
  margin: -76px 0 0 -76px;
  border-radius: 50%;
  border: 2px solid var(--rose-300);
  opacity: 0;
  animation: onde-noyau 3.6s ease-out infinite;
}
.noyau__onde:nth-child(2) { animation-delay: 1.8s; }
@keyframes onde-noyau {
  0%   { opacity: .5; transform: scale(1); }
  100% { opacity: 0;  transform: scale(2.2); }
}

/* ---- Les métiers ---- */
.metier {
  position: absolute;
  width: 0; height: 0;
  z-index: 2;
  opacity: 0;
  transition: opacity .5s ease;
}
.metier.est-allume { opacity: 1; }
.metier.est-zoom { z-index: 8; }

/* Une fois allumé, chaque métier ondule très légèrement, comme au bout
   d'une tentacule. Le rang --n, posé en attribut sur chaque métier,
   décale le départ et allonge la durée : les quinze ne battent jamais
   ensemble. L'amplitude reste sous trois pixels, la pastille couvre
   donc toujours le bout de sa courbe. */
.metier {
  animation: metier-onduler calc(4.9s + var(--n) * .19s) ease-in-out infinite;
  animation-delay: calc(var(--n) * -.57s);
}
@keyframes metier-onduler {
  0%, 100% { transform: translate(0, 0); }
  34%      { transform: translate(4.5px, -8px); }
  67%      { transform: translate(-4px, 6.5px); }
}

/* Chaque tentacule, courbe et comète réunies, ondule avec le métier
   qu'elle rejoint : même rang --n, donc mêmes durée et retard. Les deux
   bouts restent couverts, le disque du noyau d'un côté, la pastille du
   métier de l'autre. */
.tentacule {
  animation: metier-onduler calc(4.9s + var(--n) * .19s) ease-in-out infinite;
  animation-delay: calc(var(--n) * -.57s);
}

.metier__jeton {
  position: absolute;
  left: 0; top: 0;
  width: 50px; height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blanc);
  border: 2px solid var(--rose-200);
  color: var(--rose-400);
  box-shadow: 0 4px 14px -6px rgba(150, 20, 70, .35);
  transition: background-color .4s ease, border-color .4s ease, color .4s ease,
              transform .45s cubic-bezier(.34, 1.4, .64, 1), box-shadow .45s ease;
}
.metier__jeton svg { width: 23px; height: 23px; }
.metier.est-allume .metier__jeton { border-color: var(--rose-300); color: var(--brand); }

.metier__nom {
  position: absolute;
  top: 0;
  width: 116px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--texte-doux);
  transform: translateY(-50%);
  transition: color .4s ease;
}
.metier--droite .metier__nom { left: 35px; text-align: left; }
.metier--gauche .metier__nom { right: 35px; text-align: right; }

/* La bulle : le nom complet du métier et ce qu'il y fait */
.metier__mot {
  position: absolute;
  top: 14px;
  width: 186px;
  padding: 9px 14px;
  border-radius: var(--r-lg);
  background: var(--brand);
  color: var(--blanc);
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.4;
  box-shadow: 0 14px 30px -12px rgba(150, 20, 70, .75);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.34, 1.4, .64, 1);
}
.metier__mot b { display: block; font-weight: 700; font-size: .8125rem; margin-bottom: 2px; }
.metier--droite .metier__mot { left: 35px; transform: translateY(6px) scale(.92); transform-origin: left top; }
.metier--gauche .metier__mot { right: 35px; text-align: right; transform: translateY(6px) scale(.92); transform-origin: right top; }

.metier.est-zoom .metier__jeton {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--blanc);
  transform: scale(1.34);
  box-shadow: 0 16px 34px -12px rgba(150, 20, 70, .7), 0 0 0 8px rgba(150, 20, 70, .08);
}
.metier.est-zoom .metier__nom { color: var(--brand); font-weight: 700; }
.metier.est-zoom .metier__mot { opacity: 1; transform: translateY(14px) scale(1); }

/* Au survol, le visiteur n'attend pas son tour */
@media (hover: hover) {
  .metier.est-allume:hover { z-index: 9; }
  .metier.est-allume:hover .metier__jeton { background: var(--brand); border-color: var(--brand); color: var(--blanc); transform: scale(1.24); }
  .metier.est-allume:hover .metier__nom { color: var(--brand); font-weight: 700; }
  .metier.est-allume:hover .metier__mot { opacity: 1; transform: translateY(14px) scale(1); }
}


/* ---------- Carrousel des soins, en arc ----------
   Chaque soin est ancré par son bord gauche sur un cercle dont le centre
   est déporté hors du cadre. Son angle est posé par script.js dans la
   variable --a, le reste est du CSS. Le soin actif revient à l'horizontale
   et déploie son texte.
------------------------------------------------- */
.soins-scene {
  position: relative;
  height: 560px;
  overflow: hidden;
  --cx: -160px;
  --R: 320px;
}
.soins-scene__arc {
  position: absolute;
  left: var(--cx); top: 50%;
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  margin: calc(var(--R) * -1) 0 0 calc(var(--R) * -1);
  border: 1px solid var(--rose-200);
  border-radius: 50%;
  pointer-events: none;
}

.soin {
  position: absolute;
  left: var(--cx); top: 50%;
  transform-origin: 0 0;
  transform: rotate(calc(var(--a, 0) * 1deg)) translateX(var(--R)) translateY(-50%);
  transition: transform .62s cubic-bezier(.4, 0, .2, 1);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.soin__bloc {
  display: flex;
  align-items: center;
  gap: 20px;
  transform: scale(.6);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.34, 1.25, .64, 1);
}
.soin.est-actif .soin__bloc { transform: scale(1); }

.soin__numero {
  font-size: 3.4rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .9;
  color: var(--rose-100);
  white-space: nowrap;
  transition: color .45s ease;
}
.soin.est-actif .soin__numero { color: var(--brand); }
.soin:hover .soin__numero { color: var(--rose-200); }
.soin.est-actif:hover .soin__numero { color: var(--brand); }

.soin__texte {
  opacity: 0;
  transition: opacity .38s ease;
  pointer-events: none;
}
.soin.est-actif .soin__texte { opacity: 1; }
.soin__texte b { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: 3px; }
.soin__texte span {
  display: block;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--texte-doux);
  max-width: 268px;
}

/* ---------- 10. La voie cassée du constat ----------
   Cinq tronçons, un par monde du prestataire, séparés par quatre
   ruptures. Un curseur avance le long de la voie et révèle les
   problèmes au passage.

   Chaque carte porte seulement son data-x, sa position sur la voie :
   script.js lit le tracé et pose la carte au bon endroit. Pour ajouter
   un problème, recopiez une carte et donnez-lui son data-x.
--------------------------------------------------- */
.rupture {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 1100 / 470;
}
/* La trame de fond, et elle seule, s'estompe sur les bords.
   Le masque est ici et non sur .rupture, sinon il effacerait
   aussi les cartes des extrémités. */
.rupture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--rose-100) 1.4px, transparent 1.4px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(ellipse 76% 70% at 50% 52%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 76% 70% at 50% 52%, #000 30%, transparent 78%);
  pointer-events: none;
}
.rupture__trace { position: absolute; inset: 0; width: 100%; height: 100%; }

.rupture__voie path {
  fill: none;
  stroke: url(#voie);
  stroke-width: 18;
  stroke-linecap: round;
}
.rupture__coupure path {
  fill: none;
  stroke: var(--critique);
  stroke-width: 4;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity .45s ease;
}
.rupture.est-tracee .rupture__coupure path { opacity: .85; }

/* Le curseur qui parcourt la voie */
.rupture-curseur {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--blanc);
  box-shadow: 0 0 0 6px rgba(150, 20, 70, .14), 0 6px 18px -4px rgba(150, 20, 70, .7);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 3;
}
.rupture-curseur.est-visible { opacity: 1; }

/* Les cartes de problème. Le bord de la carte est calé à 34 px de la
   voie, quelle que soit sa hauteur : le fil de liaison tombe juste. */
.rupture-carte {
  position: absolute;
  width: 202px;
  background: var(--blanc);
  border: 1px solid var(--rose-200);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-flottante);
  padding: 14px 16px;
  opacity: 0;
  transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.3, .64, 1);
  z-index: 2;
}
.rupture-carte--haut { transform: translate(-50%, calc(-100% - 34px)) scale(.92); }
.rupture-carte--bas  { transform: translate(-50%, 34px) scale(.92); }
.rupture-carte--haut.est-vue { opacity: 1; transform: translate(-50%, calc(-100% - 34px)) scale(1); }
.rupture-carte--bas.est-vue  { opacity: 1; transform: translate(-50%, 34px) scale(1); }

/* Un fil relie chaque carte à son point sur la voie */
.rupture-carte::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 2px;
  height: 34px;
  background: var(--rose-300);
  transform: translateX(-50%);
}
.rupture-carte--haut::after { top: 100%; }
.rupture-carte--bas::after { bottom: 100%; }

.rupture-carte__outil {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 5px;
}
.rupture-carte b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.rupture-carte > span:last-child { display: block; font-size: .75rem; line-height: 1.45; color: var(--texte-doux); }

/* Le repère de rupture, posé sur la coupure */
.rupture-coupure-badge {
  position: absolute;
  transform: translate(-50%, -50%) scale(.85);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--blanc);
  border: 1px solid #fca5a5;
  border-radius: var(--r-full);
  padding: 7px 14px;
  font-size: .78125rem;
  font-weight: 700;
  color: var(--critique);
  box-shadow: var(--ombre-flottante);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.3, .64, 1);
  z-index: 4;
}
.rupture-coupure-badge svg { width: 15px; height: 15px; }
.rupture-coupure-badge.est-vue { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- 11. Sections alternées, texte et visuel ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: center; }
.duo--inverse .duo__texte { order: 2; }

/* ---------- 12. Téléphone ---------- */
/* Un simple contour arrondi qui encadre la capture réelle de
   l'application : pas de décor d'appareil. */
.telephone {
  width: 288px;
  border-radius: 34px;
  background: var(--blanc);
  border: 1px solid var(--rose-200);
  box-shadow: var(--ombre-panneau);
  position: relative;
  z-index: 2;
}
/* La capture réelle de l'application, dans le cadre */
.telephone--capture { padding: 9px; }
.telephone--capture img { width: 100%; height: auto; border-radius: 26px; }



/* ---------- 13. Les étiquettes qui ouvrent un écran ----------
   Elles mènent aux pages de découverte de l'application, sur
   app.lyhane.fr, dans un nouvel onglet.
------------------------------------------------- */
.etiquette--capture { cursor: pointer; transition: box-shadow .25s ease, transform .25s ease; }
.etiquette--capture:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(242, 114, 163, .6),
    0 12px 24px -10px rgba(150, 20, 70, .45),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}
.etiquette__voir {
  margin-left: 4px;
  padding-left: 10px;
  border-left: 1px solid var(--rose-200);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 13. Les modules en pièces de puzzle ----------
   Les contours sont générés avec de vrais tenons circulaires qui
   s'emboîtent. Chaque pièce arrive de sa position dispersée, posée dans
   --dx, --dy et --rot en attribut style, et se met en place.
--------------------------------------------------------- */
/* La marge haute est négative : le plateau réserve déjà 34 unités de
   vide au-dessus de la première rangée de pièces, qui s'ajoutaient à
   la marge de l'en-tête de section. Tout ce qui suit dans la section
   remonte d'autant. */
.puzzle { position: relative; max-width: 908px; margin: -22px auto 8px; }
.puzzle__plateau { width: 100%; height: auto; overflow: visible; }

.puzzle-piece {
  cursor: pointer;
  color: var(--brand);
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  opacity: 0;
  /* L'ombre suit la découpe, tenons compris : les pièces paraissent
     posées sur le fond plutôt que dessinées dessus. */
  filter: drop-shadow(0 7px 14px rgba(150, 20, 70, .13));
  transition: transform .95s cubic-bezier(.34, 1.12, .5, 1), opacity .5s ease, filter .3s ease;
}
.puzzle-piece.est-posee:hover { filter: drop-shadow(0 12px 24px rgba(150, 20, 70, .26)); }
.puzzle-piece.est-posee { transform: none; opacity: 1; }

.puzzle-piece__forme {
  fill: url(#piece-claire);
  stroke: var(--rose-200);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .5s cubic-bezier(.34, 1.16, .6, 1), fill .3s ease, stroke .3s ease;
}
/* C'est la pièce qui grandit, en gardant sa découpe. Le facteur est lié
   à la taille de la fiche : les tenons mordent de 26 unités sur chaque
   bord de la pièce, qui fait 280 sur 210. À 1.8, il reste environ 37 px
   de dégagement de chaque côté pour une fiche de 376 px, et la fiche ne
   doit pas dépasser 264 px de haut pour ne pas mordre les tenons du
   haut et du bas. Si vous allongez un texte, revérifiez. */
.puzzle-piece.est-ouverte .puzzle-piece__forme { transform: scale(1.8); }

.puzzle-piece__etiquette { transition: opacity .25s ease; }
.puzzle-piece.est-ouverte .puzzle-piece__etiquette { opacity: 0; }
.puzzle-piece__nom {
  fill: var(--texte);
  font-family: var(--pile);
  font-size: 17px;
  font-weight: 700;
  text-anchor: middle;
  transition: fill .35s ease;
}
/* Blanc sur les deux pièces magenta, gris sur les quatre blanches */
.puzzle-piece:not(.puzzle-piece--socle):not(.puzzle-piece--seule) .puzzle-piece__sous { fill: var(--texte-tres-doux); }
.puzzle-piece--seule .puzzle-piece__sous { fill: rgba(255, 255, 255, .8); }
.puzzle-piece__sous {
  fill: rgba(255, 255, 255, .8);
  font-family: var(--pile);
  font-size: 12px;
  font-weight: 600;
  text-anchor: middle;
  letter-spacing: .04em;
}

/* Le disque derrière l'icône, comme les jetons du reste du site */
.puzzle-piece__disque { fill: var(--rose-100); transition: fill .3s ease; }

/* Trois niveaux : le socle en magenta plein, porte d'entrée de tout le
   reste ; Business + en rose pâle, la seule autre brique qui se vend
   sans lui ; les quatre autres en blanc franc. */
.puzzle-piece--socle { color: var(--blanc); }
.puzzle-piece--socle .puzzle-piece__forme { fill: url(#piece-socle); stroke: var(--rose-900); }
.puzzle-piece--socle .puzzle-piece__nom { fill: var(--blanc); }
.puzzle-piece--socle .puzzle-piece__disque { fill: rgba(255, 255, 255, .2); }

/* Business + est peinte comme le socle : ce sont les deux seules
   briques qui se vendent seules, et elles se prennent aussi ensemble.
   Une couture pointillée court sur leur bord commun pour dire qu'elles
   se détachent l'une de l'autre. */
.puzzle-piece--seule { color: var(--blanc); }
.puzzle-piece--seule .puzzle-piece__forme { fill: url(#piece-socle); stroke: var(--rose-900); }
.puzzle-piece--seule .puzzle-piece__nom { fill: var(--blanc); }
.puzzle-piece--seule .puzzle-piece__disque { fill: rgba(255, 255, 255, .2); }

.puzzle-couture {
  fill: none;
  stroke: rgba(255, 255, 255, .62);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: opacity .3s ease;
}
/* Quand une pièce s'agrandit, la couture n'a plus de sens : elle s'efface */
.puzzle__plateau:has(.est-ouverte) .puzzle-couture { opacity: 0; }

.puzzle-legende {
  max-width: 620px;
  margin: 18px auto 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 9px;
  text-align: center;
  font-size: .875rem;
  color: var(--texte-doux);
}
.puzzle-legende__cle {
  flex: none;
  width: 13px; height: 13px;
  border-radius: 4px;
  background: linear-gradient(150deg, var(--rose-700), var(--rose-900));
  transform: translateY(1px);
}

/* La pièce en cours de lecture */
.puzzle-piece.est-posee:hover .puzzle-piece__forme { stroke: var(--rose-400); }
.puzzle-piece.est-posee:hover .puzzle-piece__disque { fill: var(--rose-200); }
.puzzle-piece--socle.est-posee:hover .puzzle-piece__forme { stroke: var(--rose-950); }
.puzzle-piece--socle.est-posee:hover .puzzle-piece__disque { fill: rgba(255, 255, 255, .3); }
.puzzle-piece--seule.est-posee:hover .puzzle-piece__forme { stroke: var(--rose-950); }
.puzzle-piece--seule.est-posee:hover .puzzle-piece__disque { fill: rgba(255, 255, 255, .3); }
/* Au clic, le navigateur dessine son propre anneau de focus, dans la
   couleur d'accentuation du système. On le retire et on le remplace par
   un contour magenta sur la découpe, visible uniquement au clavier. */
.puzzle-piece { outline: none; -webkit-tap-highlight-color: transparent; }
.puzzle-piece:focus { outline: none; }
.puzzle-piece:focus-visible .puzzle-piece__forme { stroke: var(--rose-500); stroke-width: 3.5; }

/* Le texte se pose directement sur la pièce agrandie : pas de fond,
   pas de bordure, c'est la découpe du puzzle qui fait le cadre. */
.puzzle-fiches { position: absolute; inset: 0; pointer-events: none; }
.puzzle-fiche {
  position: absolute;
  width: min(376px, 88vw);
  transform: translate(-50%, -50%) scale(.82);
  padding: 0 20px;
  opacity: 0;
  visibility: hidden;
  z-index: 4;
  transition: opacity .3s ease .12s, transform .46s cubic-bezier(.34, 1.2, .64, 1) .06s;
}
.puzzle-fiche.est-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}
.puzzle-fiche__haut { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; flex-wrap: wrap; }
.puzzle-fiche__haut .jeton { margin-bottom: 0; width: 44px; height: 44px; }
.puzzle-fiche__haut .jeton svg { width: 22px; height: 22px; }
.puzzle-fiche h3 { font-size: 1.0625rem; }
.puzzle-fiche p { color: var(--texte-doux); font-size: .875rem; line-height: 1.55; }
.puzzle-fiche ul { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.puzzle-fiche li {
  font-size: .75rem; font-weight: 500; color: var(--texte-doux);
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-full);
  padding: 3px 10px;
}

/* Sur la pièce du socle, qui est pleine, tout passe en blanc */
.peintures { position: absolute; width: 0; height: 0; overflow: hidden; }

.puzzle-fiche--pleine h3 { color: var(--blanc); }
.puzzle-fiche--pleine p { color: rgba(255, 255, 255, .85); }
.puzzle-fiche--pleine .jeton { background: rgba(255, 255, 255, .18); color: var(--blanc); }
.puzzle-fiche--pleine .pastille--pleine { background: var(--blanc); border-color: var(--blanc); color: var(--brand); }
.puzzle-fiche--pleine li { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .26); color: var(--blanc); }



.puzzle-indice {
  margin-top: 4px;
  text-align: center;
  font-size: .875rem;
  color: var(--texte-tres-doux);
}

/* Les pièces qui ne sont pas ouvertes s'effacent derrière */
.puzzle-piece.est-estompee { opacity: .32; }

/* Les trois leviers, posés chacun sur une pièce de puzzle qui dépasse
   derrière. La pièce est un rectangle arrondi décalé et pivoté ; son
   tenon et sa mortaise sont deux cercles en pseudo-éléments. La
   mortaise est peinte du blanc de la section, ce qui la creuse. */
.leviers {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.levier { position: relative; }

.levier__piece {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--r-xl);
  background: var(--rose-300);
  transform: translate(15px, -13px) rotate(2.6deg);
  transition: transform .35s cubic-bezier(.34, 1.16, .6, 1);
}
/* Tenon et mortaise vivent tous deux sur le bord haut : un tenon sur le
   côté déborderait de l'écran sur les petites largeurs, alors qu'un
   débordement vertical est sans conséquence. */
.levier__piece::before,
.levier__piece::after {
  content: "";
  position: absolute;
  top: -19px;
  width: 38px; height: 38px;
  border-radius: 50%;
}
/* Le tenon, qui dépasse vers le haut */
.levier__piece::before { left: 22%; background: var(--rose-300); }
/* La mortaise, peinte du fond de la section, qui creuse la pièce */
.levier__piece::after { left: 60%; background: var(--blanc); }

.levier:nth-child(2) .levier__piece { transform: translate(15px, -13px) rotate(-2.2deg); }
.levier:nth-child(2) .levier__piece::before { left: 58%; }
.levier:nth-child(2) .levier__piece::after { left: 20%; }
.levier:nth-child(3) .levier__piece::before { left: 30%; }
.levier:nth-child(3) .levier__piece::after { left: 66%; }
.levier:hover .levier__piece { transform: translate(21px, -18px) rotate(3.4deg); }
.levier:nth-child(2):hover .levier__piece { transform: translate(21px, -18px) rotate(-3deg); }

.levier__carte {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-carte);
  padding: 26px 24px 24px;
}
.levier__carte h3 { font-size: 1.09375rem; margin-bottom: 10px; }
.levier__carte p { color: var(--texte-doux); font-size: .9375rem; line-height: 1.6; }

/* L'icône ferme la carte, comme sur la référence */
.levier__jeton {
  margin: 26px 0 0;
  align-self: flex-start;
  width: 54px; height: 54px;
}
.levier__jeton svg { width: 26px; height: 26px; }

.note-modules {
  margin-top: 30px; display: flex; align-items: center; gap: 12px;
  justify-content: center; text-align: center; color: var(--texte-doux); font-size: .96875rem;
}
.note-modules svg { width: 20px; height: 20px; color: var(--brand); flex: none; }

/* ---------- 14. La frise du démarrage ----------
   Une vague traverse la section, les quatre jalons sont posés dessus.
   Le repère du SVG est 1200 x 300 et le conteneur garde ce rapport :
   les points HTML et la courbe restent donc alignés à toute largeur.
   Les jalons en creux portent leur texte au-dessus, ceux en crête en
   dessous, ce qui donne l'alternance de la frise.
------------------------------------------------- */
.frise {
  position: relative;
  aspect-ratio: 1200 / 300;
  margin: 26px 0 8px;
}
.frise__voie { position: absolute; inset: 0; width: 100%; height: 100%; }
.frise__voie path {
  fill: none;
  stroke: var(--rose-300);
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.jalon { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }

/* Le grand chiffre fantôme, posé derrière le texte et non derrière le
   rond, où le disque blanc le mangeait. */
.jalon__num {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  color: rgba(150, 20, 70, .055);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.jalon--haut .jalon__num { bottom: 26px; }
.jalon--bas .jalon__num { top: 26px; }

.jalon__rond {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blanc);
  border: 1px solid var(--rose-200);
  box-shadow: 0 8px 20px -8px rgba(150, 20, 70, .35);
  color: var(--brand);
  z-index: 2;
  transition: transform .3s cubic-bezier(.34, 1.3, .64, 1), border-color .25s ease;
}
.jalon__rond svg { width: 24px; height: 24px; }
.jalon:hover .jalon__rond { transform: translate(-50%, -50%) scale(1.12); border-color: var(--rose-400); }

.jalon__texte {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 232px;
  text-align: center;
  z-index: 1;
}
.jalon--haut .jalon__texte { bottom: 46px; }
.jalon--bas .jalon__texte { top: 46px; }
.jalon__texte h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.jalon__texte p { font-size: .90625rem; line-height: 1.6; color: var(--texte-doux); }

/* ---------- 15. Questions ---------- */
.questions { max-width: 840px; margin: 0 auto; display: grid; gap: 12px; }
.question {
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-fine);
  overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.question[open] { border-color: var(--rose-200); box-shadow: var(--ombre-carte); }
.question summary {
  list-style: none; cursor: pointer;
  padding: 20px 24px; font-weight: 600; font-size: 1.0313rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.question summary::-webkit-details-marker { display: none; }
.question summary svg { width: 20px; height: 20px; color: var(--brand); flex: none; transition: transform .25s ease; }
.question[open] summary svg { transform: rotate(45deg); }
.question__corps { padding: 0 24px 22px; color: var(--texte-doux); font-size: .96875rem; }
.question__corps p + p { margin-top: 12px; }

/* ---------- 16. Formulaire ---------- */
.bloc-demande { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }
.formulaire {
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-2xl);
  box-shadow: var(--ombre-flottante);
  padding: 36px;
}
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ--pleine { grid-column: 1 / -1; }
.champ label { font-size: .875rem; font-weight: 600; }
.champ label span { color: var(--brand); }
.champ input, .champ select, .champ textarea {
  font: inherit; font-size: .9375rem;
  padding: 12px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--rose-200);
  background: var(--blanc);
  color: var(--texte);
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.champ textarea { resize: vertical; min-height: 104px; }
.champ input::placeholder, .champ textarea::placeholder { color: var(--texte-tres-doux); }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--rose-500);
  box-shadow: 0 0 0 3px rgba(232, 71, 133, .15);
}
.champ--case { flex-direction: row; align-items: flex-start; gap: 10px; grid-column: 1 / -1; }
.champ--case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.champ--case label { font-weight: 400; font-size: .84375rem; color: var(--texte-doux); line-height: 1.5; }
.formulaire .btn { width: 100%; margin-top: 22px; }
/* Le piège à robots : invisible et hors du parcours, mais pas en
   display:none, que certains robots savent détecter. */
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.formulaire__pied { margin-top: 14px; font-size: .8125rem; color: var(--texte-tres-doux); text-align: center; }

.message-formulaire { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); font-size: .9375rem; line-height: 1.55; }
.message-formulaire.est-visible { display: block; }
.message-formulaire--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
.message-formulaire--info { background: var(--rose-50); border: 1px solid var(--rose-200); color: var(--rose-800); }
.message-formulaire a { color: inherit; font-weight: 600; }

.arguments-demande { display: grid; gap: 22px; margin-top: 30px; }
.arguments-demande li { display: flex; gap: 15px; align-items: flex-start; }
.arguments-demande h3 { font-size: 1rem; margin-bottom: 4px; }
.arguments-demande p { font-size: .9375rem; color: var(--texte-doux); }
.contact-direct { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rose-200); font-size: .9375rem; color: var(--texte-doux); }
.contact-direct a { color: var(--brand); font-weight: 600; }
.contact-direct a:hover { text-decoration: underline; }

/* ---------- 17. Appel à l'action ---------- */
.appel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background: linear-gradient(155deg, var(--rose-900) 0%, var(--rose-800) 52%, var(--rose-700) 100%);
  color: var(--blanc);
  padding: 72px 40px;
  text-align: center;
  box-shadow: var(--ombre-panneau);
}
.appel::before {
  content: "";
  position: absolute;
  top: -180px; left: 50%; transform: translateX(-50%);
  width: 720px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .16), transparent);
  pointer-events: none;
}
.appel > * { position: relative; z-index: 1; }
.appel h2 { color: var(--blanc); font-size: clamp(1.9rem, 3.8vw, 2.75rem); margin-bottom: 16px; }
.appel p { color: var(--rose-100); max-width: 620px; margin: 0 auto 32px; }

/* ---------- 18. Pied de page ---------- */
.pied { background: var(--blanc); border-top: 1px solid var(--rose-100); padding: 60px 0 32px; }
.pied__haut {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--rose-100);
}
.pied__marque img { height: 30px; width: auto; margin-bottom: 18px; }
.pied__marque p { font-size: .9375rem; color: var(--texte-doux); max-width: 320px; }
.pied h4 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--texte-tres-doux); margin-bottom: 16px; }
.pied ul { display: grid; gap: 10px; }
.pied ul a { font-size: .9375rem; color: var(--texte-doux); }
.pied ul a:hover { color: var(--brand); }
.pied__bas { padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .84375rem; color: var(--texte-tres-doux); }

/* ---------- 19. Page de contenu simple ---------- */
.page-texte { padding: 56px 0 88px; }
.page-texte .contenu { max-width: 780px; }
.page-texte h1 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); margin-bottom: 12px; }
.page-texte .maj { color: var(--texte-tres-doux); font-size: .875rem; margin-bottom: 40px; }
.page-texte h2 { font-size: 1.25rem; margin: 40px 0 12px; }
.page-texte p, .page-texte li { color: var(--texte-doux); font-size: 1rem; }
.page-texte p + p { margin-top: 12px; }
.page-texte ul { margin-top: 12px; display: grid; gap: 8px; }
.page-texte ul li { padding-left: 18px; position: relative; }
.page-texte ul li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--rose-300);
}
.page-texte a { color: var(--brand); font-weight: 500; }
.page-texte a:hover { text-decoration: underline; }
.a-completer {
  background: var(--rose-50);
  border: 1px dashed var(--rose-300);
  border-radius: var(--r-md);
  padding: 3px 9px;
  font-size: .9375rem;
  color: var(--rose-800);
  font-weight: 600;
}

/* ---------- 20. Sections de fonctionnalités ---------- */
.duo--fort .titre-section {
  font-size: clamp(2.05rem, 4.2vw, 2.95rem);
  font-weight: 800;
  letter-spacing: -.036em;
}

.rangees-fonctions { display: grid; gap: 26px; margin-top: 32px; }
/* Pas de cadre autour de chaque ligne : l'icône et le blanc suffisent
   à les séparer, et le texte respire. Au survol, la ligne glisse un peu
   et son jeton se teinte, sans rien dessiner. */
.rangee-fonction {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 4px 2px;
  transition: transform .2s ease;
}
.rangee-fonction:hover { transform: translateX(4px); }
.rangee-fonction .jeton--petit { transition: background-color .2s ease, color .2s ease; }
.rangee-fonction:hover .jeton--petit { background: var(--brand); color: var(--blanc); }
.rangee-fonction h3 { font-size: 1rem; margin-bottom: 4px; }
.rangee-fonction p { font-size: .9375rem; color: var(--texte-doux); }
.rangee-fonction .jeton--petit { background: var(--rose-100); }

/* ---------- Composition photo et cartes flottantes ----------
   Posée directement sur le blanc de la section : la photo fait
   la masse visuelle, elle n'a pas besoin d'un fond derrière.
   Les deux cartes se croisent avec la photo mais jamais entre
   elles, pour que l'histogramme reste entier.
------------------------------------------------------------- */
.compo-photo { position: relative; max-width: 620px; margin-inline: auto; }

/* Le cadre est au format 2 pour 3, exactement celui des photos fournies :
   elles s'affichent donc entières, sans recadrage. Si vous remplacez une
   image par un autre format, ajustez object-position ci-dessous. */
.photo-cadre {
  width: 82%;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-2xl);
  overflow: hidden;
  /* Dégradé de repli : si la photo manque, le bloc reste propre */
  background: linear-gradient(158deg, var(--rose-200), var(--rose-100));
  box-shadow: var(--ombre-flottante);
}
.photo-cadre img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.carte-sur-photo {
  position: absolute;
  top: 42%;
  right: 0;
  width: 57%;
  background: linear-gradient(150deg, var(--rose-700) 0%, var(--rose-800) 55%, var(--rose-900) 100%);
  color: var(--blanc);
  border-radius: var(--r-xl);
  padding: 20px 22px;
  box-shadow: var(--ombre-panneau);
}
.cs-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.cs-haut span { font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; font-weight: 600; }
.cs-haut svg { width: 18px; height: 18px; opacity: .85; }

/* L'avatar-guide de l'application : illustration cerclée de magenta,
   choisie sur l'âge du patient. Voir marque/avatars/. */
.avatar-guide {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .55);
}
.carte-sur-photo strong { display: block; font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.carte-sur-photo small { display: block; font-size: .75rem; opacity: .82; margin-top: 7px; }
/* Un titre de carte trop long pour la taille d'affichage habituelle */
.cs-titre--long { font-size: 1.1875rem !important; line-height: 1.22 !important; }

.carte-sous-photo {
  position: absolute;
  bottom: 4%;
  left: 0;
  width: 66%;
  display: flex; align-items: center; gap: 13px;
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  box-shadow: var(--ombre-flottante);
}
.carte-sous-photo > span { min-width: 0; }
.carte-sous-photo b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.carte-sous-photo b + span { display: block; font-size: .75rem; color: var(--texte-tres-doux); line-height: 1.35; }
.carte-sous-photo .montant { margin-left: auto; font-weight: 700; font-size: .9375rem; color: var(--brand); white-space: nowrap; }
.carte-sous-photo .au-bout { margin-left: auto; flex: none; }

/* La carte blanche défilante : elle redevient une grille pour empiler
   ses vues, chacune reprenant la rangée en drapeau de la carte simple.
   Ses points sont rosés, du blanc sur blanc ne se verrait pas. */
.carte-sous-photo.carte-defile { display: grid; grid-template-rows: auto auto; }
.carte-sous-photo .cs-vue { display: flex; align-items: center; gap: 13px; }
.carte-sous-photo .cs-points { margin-top: 11px; justify-content: center; }
.carte-sous-photo .cs-points i { background: var(--rose-200); }
.carte-sous-photo .cs-points i.est-vue { background: var(--brand); }

/* Jauge de progression, dans la carte magenta */
.cs-barres { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 18px; }
.cs-barres i { flex: 1; display: block; background: rgba(255, 255, 255, .3); border-radius: 3px 3px 0 0; }
.cs-barres i.est-vive { background: var(--blanc); }
.cs-jauge { height: 7px; background: rgba(255, 255, 255, .26); border-radius: var(--r-full); margin-top: 18px; overflow: hidden; }
.cs-jauge i { display: block; height: 100%; background: var(--blanc); border-radius: var(--r-full); }

/* La carte qui défile : ses vues sont empilées dans la même case de
   grille, une seule visible à la fois. La hauteur est donc celle de la
   plus haute, et la carte ne saute pas d'une vue à l'autre. La jauge
   se remplit à l'arrivée de sa vue. */
.carte-defile { display: grid; grid-template-rows: auto auto; }

/* Les points sous la carte : celui de la vue en cours s'étire en
   pilule. Ils montrent qu'il reste des choses à voir. */
.cs-points { grid-row: 2; display: flex; gap: 6px; margin-top: 16px; }
.cs-points i {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .34);
  transition: width .45s cubic-bezier(.34, 1.25, .64, 1), background-color .4s ease;
}
.cs-points i.est-vue { width: 26px; background: var(--blanc); }
.cs-vue {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .45s ease, transform .55s cubic-bezier(.34, 1.2, .64, 1);
  pointer-events: none;
}
.cs-vue.est-vue { opacity: 1; transform: none; }
.cs-vue .cs-jauge i { width: 0; transition: width .85s cubic-bezier(.4, 0, .2, 1) .2s; }
.cs-vue.est-vue .cs-jauge i { width: var(--jauge); }

@media (prefers-reduced-motion: reduce) {
  .cs-vue { transition: none; }
  .cs-points { display: none; }
  .cs-vue .cs-jauge i { width: var(--jauge); transition: none; }
}
.cs-legende { display: block; font-size: .75rem; opacity: .82; margin-top: 9px; }

/* Variante en diagonale : petite carte en haut à gauche, carte magenta
   en bas à droite qui déborde sous la photo. Utilisée quand le sujet
   occupe le centre et la gauche de l'image. */
.compo-photo--diagonale { padding-bottom: 54px; }
.compo-photo--diagonale .carte-sur-photo { top: auto; bottom: 0; right: 0; }
.compo-photo--diagonale .carte-sous-photo { bottom: auto; top: 7%; left: 0; }

/* Variante basse : la carte magenta descend, pour ne pas couvrir un
   sujet situé au milieu de la photo. */
.compo-photo--bas .carte-sur-photo { top: 52%; }

/* La bulle de la guide, dans le style des messages de l'application :
   l'avatar cerclé à gauche, la bulle blanche à droite. Le texte est
   écrit lettre à lettre par script.js, le curseur clignote pendant
   l'écriture. La hauteur est réservée sur deux lignes pour que la
   carte magenta ne bouge pas pendant la frappe. */
.bulle-guide {
  position: absolute;
  top: 4%;
  left: 0;
  width: 66%;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bulle-guide .avatar-guide { width: 46px; height: 46px; flex: none; box-shadow: 0 0 0 2px var(--blanc); }
.bulle-guide__bulle {
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-lg);
  border-top-left-radius: 6px;
  box-shadow: var(--ombre-flottante);
  padding: 11px 14px 12px;
  flex: 1;
  /* Deux lignes réservées : la frappe ne fait pas sauter la mise en page */
  min-height: 84px;
}
.bulle-guide__bulle b {
  display: block;
  font-size: .71875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 4px;
}
.bulle-guide__texte {
  font-size: .84375rem;
  line-height: 1.5;
  color: var(--texte);
}
.bulle-guide__curseur {
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--brand);
  animation: bulle-clignote 1s steps(2) infinite;
}
@keyframes bulle-clignote { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .bulle-guide__curseur { display: none; }
}

/* Variante agrandie : quand la colonne de texte est très fournie, la
   photo occupe presque toute sa colonne pour rééquilibrer les hauteurs. */
.compo-photo--grand .photo-cadre { width: 94%; }

/* Variante avec le téléphone dessiné posé sur la photo, en débordant
   à droite. C'est l'écran patient qui sert d'élément flottant. */
.compo-photo--telephone .photo-cadre { width: 84%; }
.compo-photo--telephone .telephone {
  position: absolute;
  right: 0;
  bottom: 24%;
  z-index: 3;
  width: 288px;
  transform: scale(.78);
  transform-origin: bottom right;
}
/* La carte déborde vers la gauche : son bord droit ne bouge pas, elle
   gagne donc de la largeur sans se rapprocher du téléphone. */
.compo-photo--telephone .carte-sous-photo { bottom: 5%; left: -7%; width: 65%; }

/* ---------- Le bouton à éclats ----------
   Transposition en CSS seul d'une référence React de Marvin, sans la
   3D : au survol, les lettres du libellé s'effacent une à une vers le
   haut pendant que celles du second libellé montent à leur place, la
   flèche balaye, le contour se trace et des traits jaillissent autour.
   La largeur est fixe : les deux libellés sont superposés.
------------------------------------------------- */
.btn-eclat {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 268px;
  height: 56px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: var(--blanc);
  font-weight: 600;
  font-size: 1.0625rem;
  box-shadow: 0 12px 30px -14px rgba(150, 20, 70, .7);
  transition: background-color .3s ease;
}
.btn-eclat:hover { background: var(--brand-dark); }

/* Les traits qui jaillissent, au repos invisibles */
.btn-eclat__eclats {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* max-width:none : la règle globale des svg le rognait à la largeur
     du bouton, or les éclats doivent déborder tout autour. */
  width: 342px;
  max-width: none;
  height: 208px;
  fill: none;
  stroke: var(--rose-400);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 2 60;
  stroke-dashoffset: -60;
  pointer-events: none;
  opacity: 0;
}
.btn-eclat__eclats .pale { stroke-opacity: .35; }
.btn-eclat:hover .btn-eclat__eclats { opacity: 1; animation: eclat-jaillir .5s ease-out; }
@keyframes eclat-jaillir {
  from { stroke-dasharray: 60 60; stroke-dashoffset: 0; }
  to   { stroke-dasharray: 2 60; stroke-dashoffset: -60; }
}

/* Le contour qui se trace */
.btn-eclat__trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--rose-300);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 70 520;
  stroke-dashoffset: 0;
  opacity: 0;
  pointer-events: none;
}
.btn-eclat:hover .btn-eclat__trace { opacity: 1; animation: eclat-trace 1.1s linear; }
@keyframes eclat-trace {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -590; }
}

/* Les deux libellés, superposés */
.btn-eclat__contenu {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.btn-eclat__mot {
  grid-area: 1 / 1;
  display: flex;
  white-space: pre;
}
.btn-eclat__mot span { display: inline-block; }
.btn-eclat__mot--survol span { opacity: 0; }

/* Au survol : les lettres du repos partent, celles du survol arrivent,
   décalées d'une lettre à l'autre par --i. */
.btn-eclat:hover .btn-eclat__mot--repos span {
  animation: eclat-partir .45s cubic-bezier(.4, 0, .2, 1) forwards;
  animation-delay: calc(var(--i) * 16ms);
}
.btn-eclat:hover .btn-eclat__mot--survol span {
  animation: eclat-venir .55s cubic-bezier(.34, 1.2, .64, 1) forwards;
  animation-delay: calc(180ms + var(--i) * 26ms);
}
@keyframes eclat-partir {
  from { transform: translateY(0); opacity: 1; filter: blur(0); }
  to   { transform: translateY(-90%); opacity: 0; filter: blur(4px); }
}
@keyframes eclat-venir {
  0%   { transform: translateY(80%); opacity: 0; filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

/* La flèche balaye : elle sort à droite et revient par la gauche */
.btn-eclat__fleche {
  grid-area: 1 / 1;
  justify-self: end;
  margin-right: 22px;
  display: grid;
  place-items: center;
  opacity: 0;
}
.btn-eclat__fleche svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-eclat:hover .btn-eclat__fleche { animation: eclat-fleche .95s cubic-bezier(.4, 0, .2, 1) .18s; }
@keyframes eclat-fleche {
  0%   { transform: translateX(-16px); opacity: 0; }
  25%  { transform: translateX(0); opacity: 1; }
  55%  { transform: translateX(52px); opacity: 0; }
  56%  { transform: translateX(-230px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

/* Sans mouvement : le libellé de repos reste, rien ne bouge */
@media (prefers-reduced-motion: reduce) {
  .btn-eclat__eclats, .btn-eclat__trace, .btn-eclat__fleche,
  .btn-eclat__mot--survol { display: none; }
}

/* ---------- 21. L'étendue : le message au centre, les huit en satellites ----------
   Le centre est en flux normal, les cartes sont posées en absolu autour
   de lui. La hauteur minimale du conteneur réserve la place des quatre
   rangées de satellites. Sous 1080 px, tout redevient une grille.
------------------------------------------------------- */
.etendue {
  position: relative;
  /* Réservé pour quatre rangées de satellites : la plus haute fait
     environ 195 px, à 215 px d'écart, plus la marge du bas. */
  min-height: 880px;
  display: grid;
  place-items: center;
}

/* La trame de points, estompée sur les bords, comme le constat */
.etendue::before {
  content: "";
  position: absolute;
  inset: -40px 0;
  background-image: radial-gradient(var(--rose-200) 1.4px, transparent 1.4px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 70% 64% at 50% 50%, #000 22%, transparent 76%);
  mask-image: radial-gradient(ellipse 70% 64% at 50% 50%, #000 22%, transparent 76%);
  pointer-events: none;
}

.etendue__centre {
  position: relative;
  z-index: 2;
  max-width: 490px;
  text-align: center;
}
.etendue__centre .titre-section { margin-bottom: 26px; }
.etendue__note { margin-top: 26px; font-size: .84375rem; color: var(--texte-tres-doux); }

/* Les satellites */
.etendue__satellites { position: absolute; inset: 0; z-index: 1; }

.flottante {
  position: absolute;
  width: 238px;
  background: var(--blanc);
  border: 1px solid var(--rose-100);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-flottante);
  padding: 15px 17px 16px;
  transition: transform .35s ease, box-shadow .35s ease;
}
.flottante .jeton--petit { margin-bottom: 10px; }

.flottante b { display: block; font-size: .875rem; font-weight: 700; line-height: 1.32; margin-bottom: 5px; }
.flottante > span:last-child { display: block; font-size: .78125rem; line-height: 1.45; color: var(--texte-doux); }

/* Position et inclinaison de chacune : quatre à gauche, quatre à droite */
.flottante--1 { top: 0;    left: 1%;  --pivot: -2.2deg; }
.flottante--2 { top: 24.5%; left: 5%;  --pivot: 1.6deg; }
.flottante--3 { top: 49%;  left: 0;   --pivot: -1.4deg; }
.flottante--4 { top: 73.5%; left: 6%;  --pivot: 2deg; }
.flottante--5 { top: 1.5%; right: 1%; --pivot: 2deg; }
.flottante--6 { top: 26%;  right: 5%; --pivot: -1.6deg; }
.flottante--7 { top: 50.5%; right: 0;  --pivot: 1.5deg; }
.flottante--8 { top: 75%;  right: 6%; --pivot: -2.2deg; }

.flottante { transform: rotate(var(--pivot)); }
.flottante:hover { transform: rotate(0) translateY(-4px); box-shadow: var(--ombre-panneau); }

/* L'apparition au défilement ne doit pas écraser l'inclinaison */
.flottante.apparait { transform: rotate(var(--pivot)) translateY(20px); }
.flottante.apparait.est-visible { transform: rotate(var(--pivot)); }
.flottante.apparait.est-visible:hover { transform: rotate(0) translateY(-4px); }

/* ---------- 22. Les protections en petits carrés ----------
   Quatre colonnes de carrés serrés : cinq protections numérotées, un
   carré plein qui porte la phrase clé, et une photo sur deux cases.
   L'écart est volontairement petit pour que l'ensemble se lise comme
   un bloc compact, et non comme six cartes posées loin les unes des
   autres. Le texte est donc court : deux lignes par carré.
------------------------------------------------------- */
.grille--protections {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.carte--num {
  display: flex;
  flex-direction: column;
  padding: 20px 19px 19px;
  min-height: 228px;
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-fine);
}
.carte--num:hover { transform: none; box-shadow: var(--ombre-carte); }

/* Le numéro, fin et très clair, sert de repère plus que de texte */
.carte--num__numero {
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--rose-200);
  margin-bottom: auto;
  transition: color .25s ease;
}
.carte--num:hover .carte--num__numero { color: var(--rose-300); }

.carte--num__tete {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rose-100);
}
.carte--num__tete svg { width: 17px; height: 17px; color: var(--brand); flex: none; }
.carte--num__tete h3 { font-size: .9375rem; line-height: 1.3; }
.carte--num p { margin-top: 8px; font-size: .84375rem; line-height: 1.5; }

/* Le carré plein : pas de numéro, la phrase qui doit rester en tête */
.carte--pleine {
  background: linear-gradient(150deg, var(--rose-600) 0%, var(--rose-800) 52%, var(--rose-900) 100%);
  border-color: transparent;
  box-shadow: 0 12px 30px -16px rgba(150, 20, 70, .7);
}
.carte--pleine::before { display: none; }
.carte--pleine:hover { border-color: transparent; box-shadow: 0 16px 36px -16px rgba(150, 20, 70, .78); }
.carte--pleine::after {
  content: "";
  position: absolute;
  right: -36px; bottom: -48px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.carte--pleine .jeton {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  margin-bottom: auto;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
  color: var(--blanc);
  position: relative;
  z-index: 1;
}
.carte--pleine .jeton svg { width: 20px; height: 20px; }
.carte--pleine h3 { color: var(--blanc); font-size: 1.0625rem; margin-bottom: 8px; line-height: 1.24; }
.carte--pleine p { color: rgba(255, 255, 255, .85); font-size: .84375rem; line-height: 1.5; margin-top: 0; }
.carte--pleine__bas { position: relative; z-index: 1; margin-top: 18px; }

/* La photo occupe deux cases et s'étire sur la hauteur de sa rangée */
.tuile-photo {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--rose-100);
  box-shadow: var(--ombre-fine);
  min-height: 228px;
  background: linear-gradient(150deg, var(--rose-100), var(--rose-200));
}
/* Position absolue, sinon l'image impose sa hauteur naturelle et
   étire toute la rangée : elle doit au contraire remplir la case. */
.tuile-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
}

/* ---------- 23. Apparition au défilement ---------- */
.apparait { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.apparait.est-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .metier, .tentacule { animation: none; }
  .apparait { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 24. Adaptatif ---------- */
/* Les satellites n'ont plus la place autour du centre : tout se range
   en grille, le message d'abord. */
@media (max-width: 1200px) {
  /* flex + order : le message repasse devant les cartes, qui suivent
     dans le document mais viennent après à l'écran. */
  .etendue { min-height: 0; display: flex; flex-direction: column; }
  .etendue__centre { order: -1; }
  .etendue::before { display: none; }
  .etendue__centre { max-width: 720px; margin: 0 auto 52px; }
  .etendue__satellites { position: static; display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flottante, .flottante--1, .flottante--2, .flottante--3, .flottante--4,
  .flottante--5, .flottante--6, .flottante--7, .flottante--8 {
    position: static;
    width: auto;
    --pivot: 0deg;
  }
}

/* La carte du suivi a grandi en devenant défilante : dans cette plage,
   elle venait toucher la capture du téléphone. Elle se resserre et le
   téléphone remonte. */
@media (max-width: 1280px) {
  .compo-photo--telephone .carte-sous-photo { left: -4%; width: 56%; }
  .compo-photo--telephone .telephone { bottom: 32%; }
}

/* Sous cette largeur, les blocs de texte des jalons se chevaucheraient :
   la vague disparaît et les jalons se rangent en liste. Le seuil vient
   de la mesure, l'écart entre deux jalons valant un quart de la largeur
   du contenu, pour des blocs de 232 px. */
@media (max-width: 1120px) {
  .frise { aspect-ratio: auto; display: grid; gap: 24px; margin-top: 8px; }
  .frise__voie { display: none; }
  .jalon { position: static; width: auto; height: auto; display: flex; align-items: flex-start; gap: 16px; }
  .jalon__num { display: none; }
  .jalon__rond { position: static; transform: none; flex: none; width: 50px; height: 50px; }
  .jalon:hover .jalon__rond { transform: none; }
  .jalon__texte { position: static; transform: none; width: auto; text-align: left; }
  .jalon--haut .jalon__texte, .jalon--bas .jalon__texte { bottom: auto; top: auto; }
}

@media (max-width: 1020px) {
  .simu-appel { grid-template-columns: 1fr; gap: 34px; }
  .section { padding: 88px 0; }
  .leviers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
  .grille--protections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__haut { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .duo { gap: 44px; }
}

/* Sous cette largeur, l'arc n'a plus la place : les soins se rangent
   en liste et affichent tous leur texte. */
/* La fiche posée sur la pièce agrandie a besoin que le plateau soit à
   sa taille maximale, sinon le texte vient mordre les tenons. En dessous
   de cette largeur, on abandonne la pose sur la pièce. Le plateau est
   alors masqué : réduit à six icônes sans leurs noms, il ne montrait
   plus rien. Restent les six briques, en cartes ordinaires. */
@media (max-width: 960px) {
  .puzzle__plateau { display: none; }
  .puzzle { margin: 34px auto 0; }
  .puzzle-fiches { position: static; display: grid; gap: 14px; margin-top: 0; pointer-events: auto; }
  .puzzle-fiche {
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    background: var(--blanc);
    border: 1px solid var(--rose-100);
    border-radius: var(--r-xl);
    box-shadow: var(--ombre-carte);
    padding: 24px 22px;
  }
  .puzzle-fiche.est-visible { transform: none; }
  .puzzle-fiche--pleine { background: var(--brand); border-color: var(--brand); }
  .puzzle-legende { display: none; }
  .puzzle-indice { display: none; }

}

@media (max-width: 760px) {
  /* Le rectangle « du magasin au pilotage » tient sur deux lignes ici,
     et le point final entre dedans plutôt que de rester seul dessous. */
  .point--etroit { display: inline; }
  .point--large { display: none; }
  .soins-scene { height: auto; overflow: visible; }
  .soins-scene__arc { display: none; }
  .soin {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--rose-100);
    cursor: default;
  }
  .soin__bloc { transform: none; align-items: flex-start; gap: 16px; }
  .soin__numero { font-size: 1.75rem; color: var(--brand); }
  .soin__texte { opacity: 1; }
  .soin__texte span { max-width: none; }
}

/* Sous cette largeur, la voie cassée n'a plus la place : les cinq
   mondes se rangent en liste. Les pastilles de rupture disparaissent :
   sans la voie qu'elles interrompaient, « Par téléphone » ou « À la
   main » ne veulent plus rien dire. */
@media (max-width: 900px) {
  .rupture {
    aspect-ratio: auto;
    display: grid; gap: 14px;
    max-width: 560px;
  }
  .rupture::before { display: none; }
  .rupture__trace, .rupture-curseur, .rupture-coupure-badge { display: none; }
  .rupture-carte {
    position: static;
    transform: none;
    width: auto;
    opacity: 1;
  }
  .rupture-carte::after { display: none; }
  .rupture-carte.est-vue { transform: none; }

  .nav, .entete__actions { display: none; }
  .bouton-menu { display: grid; }
  .entete__pilule { padding: 9px 9px 9px 18px; }
  .grille--3, .duo, .bloc-demande, .etendue__satellites, .leviers, .promesses, .metiers-grille { grid-template-columns: 1fr; }
  .simu-appel { grid-template-columns: 1fr; gap: 24px; padding: 28px 18px 24px; border-radius: var(--r-xl); }
  .simu-appel__preuves li { width: 100%; }
  .simu-appel__preuves b { white-space: normal; }
  .simu-appel__choix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .simu-apercu { padding: 22px 0 26px; }
  .simu-apercu__carte { transform: none; padding: 22px 20px 18px; }
  .orga__fils { display: none; }
  .orga__branches { grid-template-columns: 1fr; gap: 14px; margin-top: 14px; }
  .orga__socle ul { grid-template-columns: 1fr; }

  /* Les compositions photo disparaissent : dépliées en pile sous le
     texte, elles allongeaient énormément le défilement sans rien
     ajouter à l'argument. Leurs images ont loading="lazy", elles ne
     sont donc même pas téléchargées. */
  .duo__visuel { display: none; }

  /* La constellation n'a plus la place : les métiers deviennent des
     pastilles, qui s'allument dans le même ordre autour du logo. */
  .constellation {
    aspect-ratio: auto;
    margin-top: 40px;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 9px;
  }
  .constellation__fils { display: none; }
  .metier { animation: none; }
  .noyau { position: static; transform: none; width: 100%; display: grid; place-items: center; margin-bottom: 18px; }
  .noyau__onde { display: none; }
  .noyau__disque { width: 118px; height: 118px; }
  .noyau__disque img { width: 80px; }

  .metier {
    position: static;
    width: auto; height: auto;
    display: flex; align-items: center; gap: 9px;
    background: var(--blanc);
    border: 1px solid var(--rose-100);
    border-radius: var(--r-full);
    padding: 6px 16px 6px 7px;
  }
  .metier__jeton {
    position: static;
    margin: 0;
    width: 30px; height: 30px;
    border-width: 1px;
    box-shadow: none;
  }
  .metier__jeton svg { width: 16px; height: 16px; }
  .metier.est-zoom .metier__jeton { transform: none; box-shadow: none; }
  .metier__nom,
  .metier--droite .metier__nom,
  .metier--gauche .metier__nom {
    position: static;
    width: auto;
    transform: none;
    text-align: left;
    white-space: nowrap;
  }
  .metier__mot { display: none; }
  .duo--inverse .duo__texte { order: 0; }
  .entete-section { margin-bottom: 44px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .accroche__panneau { margin: 28px 10px 0; border-radius: 26px; padding-bottom: 26px; }
  /* Sur téléphone la page est très longue : l'espacement vertical
     des sections descend pour raccourcir le défilement. */
  .section { padding: 60px 0; }
  .entete-section { margin-bottom: 36px; }
  .accroche { padding-top: 40px; }
  .public-bascule { margin-bottom: 22px; }
  .public-bascule button { padding: 10px 14px; font-size: .875rem; gap: 7px; }
  .orga__direction { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: var(--r-xl); padding: 14px; }
  .orga__bascule { margin-left: 0; }
  .champs { grid-template-columns: 1fr; }
  .grille--protections { grid-template-columns: 1fr; }
  .tuile-photo { grid-column: span 1; min-height: 0; aspect-ratio: 3 / 2; }
  .carte--num { min-height: 0; }
  .carte { padding: 24px 22px; }
  /* La composition photo se déplie en pile */
  .compo-photo, .compo-photo--diagonale { display: grid; gap: 12px; padding-bottom: 0; }
  .photo-cadre, .compo-photo--telephone .photo-cadre { width: 100%; aspect-ratio: 3 / 4; }
  .carte-sur-photo, .carte-sous-photo,
  .compo-photo--telephone .carte-sous-photo { position: static; width: 100%; }
  .bulle-guide { position: static; width: 100%; }
  .bulle-guide__bulle { min-height: 0; }
  .compo-photo--telephone .telephone {
    position: static;
    transform: none;
    width: 100%;
    max-width: 288px;
    margin: 0 auto;
  }
  .formulaire { padding: 26px 22px; }
  .appel { padding: 48px 24px; }
  .groupe-boutons .btn { width: 100%; }
  .pied__haut { grid-template-columns: 1fr; }
}