/* JSANTA Academy · Direction C « Studio moderne audacieux » · palette taupe et beige (23/10) */
/* Ancienne palette prune : site_jsanta_v11_notes/version_prune/styles.css
   Une seule famille (Schibsted Grotesk), trois couleurs en aplats, cartes arrondies. */

:root {
  --ivoire: #faf7f2;
  --rose: #ece3d8;
  --prune: #6b5b4f;
  --prune-fonce: #54463c;
  --encre: #2a221d;
  --encre-douce: #65564b;
  --filet: rgba(107, 91, 79, .18);
  --fond-media: #e8dfd4;

  --r: 24px;
  --g: 16px;
  --pad: 32px;
  --tete: 78px;
  --ease: cubic-bezier(.2, .75, .15, 1);
  --police: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ivoire);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
figure, h1, h2, p, ul, ol, blockquote { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--prune); outline-offset: 3px; border-radius: 8px; }

/* ---------- En-tête ---------- */
.tete {
  max-width: 1440px;
  margin: 0 auto;
  min-height: var(--tete);
  padding: 18px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-decoration: none;
  color: var(--encre);
  white-space: nowrap;
}
.logo-nom { font-weight: 800; font-size: 25px; letter-spacing: -.02em; line-height: 1; }
.logo-academy { font-weight: 600; font-size: 10px; letter-spacing: .26em; line-height: 1; }
.nav { display: flex; align-items: center; gap: 34px; font-size: 15px; font-weight: 500; }
.nav a {
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .2s ease, color .2s ease;
  white-space: nowrap;
}
.nav a:hover { border-bottom-color: currentColor; }
.nav .nav-programme { color: var(--prune); font-weight: 700; border-bottom-color: var(--prune); }

/* ---------- Cartes ---------- */
.carte { position: relative; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.carte-rose { background: var(--rose); }
.carte-prune { background: var(--prune); color: var(--ivoire); }
.carte-media { background: var(--fond-media); }
.carte-media .media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Premier écran ---------- */
.hero {
  max-width: 1440px;
  margin: 0 auto;
  min-height: calc(100svh - var(--tete));
  padding: 2px var(--pad) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hero-titre {
  font-weight: 800;
  font-size: clamp(76px, calc((100vw - 64px) / 6.3), 218px);
  line-height: .84;
  letter-spacing: -.058em;
  margin-left: -.045em;
  padding-bottom: .15em;
  white-space: nowrap;
  color: var(--encre);
}
.point-final { color: var(--prune); }

.hero-grille {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: var(--g);
  min-height: 430px;
}
/* La carte rose et le bouton partagent la même case : le bouton se pose en bas de la carte. */
.hero-info {
  grid-column: 1 / 5;
  grid-row: 1;
  padding: 32px 32px calc(32px + 58px + 18px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.hero-phrase {
  font-size: clamp(22px, 2.45vw, 35px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.025em;
  text-wrap: pretty;
}
.hero-ligne {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--prune);
}
.nw { white-space: nowrap; }
.hero-grille > .bouton {
  grid-column: 1 / 5;
  grid-row: 1;
  align-self: end;
  width: auto;
  margin: 0 32px 32px;
  z-index: 1;
}
.bouton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--prune);
  color: var(--ivoire);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease;
  text-wrap: balance;
}
.bouton:hover { background: var(--prune-fonce); }

.hero-video { grid-column: 5 / 10; grid-row: 1; }
.hero-video .media { object-position: 68% 50%; }
.hero-photo { grid-column: 10 / 13; grid-row: 1; }
.hero-photo .media { object-position: 42% 50%; }

/* ---------- Section 1 ---------- */
.s1 {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--pad) 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--g);
}
.s1-photo { grid-column: 1 / 6; min-height: 520px; }
.s1-photo .media { object-position: 50% 62%; }
.s1-carte {
  grid-column: 6 / 13;
  padding: clamp(28px, 4vw, 60px);
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.titre-s1 {
  font-weight: 800;
  font-size: clamp(36px, 4.6vw, 66px);
  line-height: .98;
  letter-spacing: -.045em;
  color: rgba(236, 227, 216, .62);
  text-wrap: balance;
}
.titre-s1 .titre-suite { color: var(--ivoire); }
.s1-texte {
  font-size: 18px;
  line-height: 1.55;
  color: var(--rose);
  max-width: 44em;
}
.pastilles {
  list-style: none;
  padding: 0;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pastilles li {
  background: var(--rose);
  color: var(--prune);
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -.005em;
}

/* ---------- Section 2 ---------- */
.s2 {
  width: calc(100% - 2 * var(--pad));
  max-width: 1376px;
  margin: clamp(56px, 7vw, 104px) auto 0;
  padding: clamp(28px, 4.4vw, 64px);
  background: var(--rose);
  border-radius: 32px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--g);
  align-items: start;
}
.s2-texte {
  grid-column: 1 / 7;
  align-self: stretch;
  padding-right: clamp(0px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.titre-s2 {
  font-weight: 800;
  font-size: clamp(38px, 5.3vw, 78px);
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--prune);
  padding-bottom: .06em;
  text-wrap: balance;
}
.reperes { list-style: none; padding: 0; border-bottom: 1px solid var(--filet); }
.reperes li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--filet);
}
.num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--prune);
  color: var(--ivoire);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.reperes strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.reperes .desc { display: block; font-size: 16px; line-height: 1.45; color: var(--encre-douce); margin-top: 2px; }
.s2-phrase {
  margin-top: auto;
  font-size: clamp(20px, 1.75vw, 25px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--prune);
  text-wrap: pretty;
}
.s2-macro { grid-column: 7 / 13; aspect-ratio: 1; align-self: center; }
.s2-macro .media { object-position: 50% 0%; }
.point {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: var(--ivoire);
  color: var(--prune);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 0 0 5px rgba(250, 247, 242, .34), 0 6px 18px rgba(42, 34, 29, .2);
}

/* ---------- Section 3 ---------- */
.s3 {
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 104px) var(--pad) clamp(64px, 8vw, 120px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: 24px var(--g);
}
.titre-s3 {
  grid-column: 1 / 8;
  grid-row: 1;
  font-weight: 800;
  font-size: clamp(60px, 10vw, 148px);
  line-height: .86;
  letter-spacing: -.058em;
  margin-left: -.04em;
  padding-bottom: .1em;
  color: var(--encre);
}
.titre-s3 .ligne { display: block; }
.s3-photo { grid-column: 8 / 13; grid-row: 1 / 3; min-height: 560px; }
.s3-photo .media { object-position: 50% 8%; }
.s3-carte {
  grid-column: 1 / 8;
  grid-row: 2;
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.citation p {
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--ivoire);
  text-wrap: balance;
}
.s3-texte { font-size: 18px; line-height: 1.5; color: var(--rose); max-width: 40em; }

/* ==========================================================
   SITE COMPLET : composants ajoutés (mêmes règles que le haut)
   ========================================================== */

:root { --esp: clamp(72px, 8.5vw, 128px); }

.sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 50;
  background: var(--prune); color: var(--ivoire); padding: 12px 18px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
.nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* Section 3 devient la 6e : elle n'est plus la dernière */
.s3 { padding-bottom: 0; }

/* Conteneurs communs */
.bloc {
  max-width: 1440px;
  margin: 0 auto;
  padding: var(--esp) var(--pad) 0;
}
.panneau {
  width: calc(100% - 2 * var(--pad));
  max-width: 1376px;
  margin: var(--esp) auto 0;
  padding: clamp(28px, 4.4vw, 64px);
  border-radius: 32px;
}
.panneau--rose { background: var(--rose); }
.panneau--prune { background: var(--prune); color: var(--ivoire); }

.titre-section {
  font-weight: 800;
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: .95;
  letter-spacing: -.052em;
  padding-bottom: .06em;
  text-wrap: balance;
}
.titre-section .accent { color: var(--prune); }
.panneau--prune .titre-section { color: var(--ivoire); }
.panneau--prune .titre-section .accent { color: var(--rose); }
.chapeau {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 40em;
  text-wrap: pretty;
}
.tete-bloc {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px var(--g);
  align-items: end;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.tete-bloc .titre-section { grid-column: 1 / 9; }
.tete-bloc .chapeau,
.tete-bloc .pastille-etat { grid-column: 9 / 13; justify-self: start; }

/* Pastille d'état (une seule mention) */
.pastille-etat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ivoire);
  color: var(--prune);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.pastille-etat::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--prune);
}
.pastille-etat--rose { background: var(--rose); }

/* Lien d'action secondaire (le seul bouton plein reste unique à l'écran) */
.lien-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 17px;
  color: var(--prune);
  text-decoration: none;
  padding: 4px 0;
}
.lien-action .fleche {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid currentColor;
  flex: none;
  transition: background-color .2s ease, color .2s ease;
}
.lien-action .fleche svg { width: 16px; height: 16px; }
.lien-action:hover .fleche { background: var(--prune); color: var(--ivoire); border-color: var(--prune); }
.lien-action span:not(.fleche) { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.panneau--prune .lien-action { color: var(--ivoire); }
.panneau--prune .lien-action:hover .fleche { background: var(--ivoire); color: var(--prune); border-color: var(--ivoire); }

.lien { color: var(--prune); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 4. Avant / après ---------- */
.avap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--g);
}
.avap-carte { aspect-ratio: 6 / 5; }
.avap-carte--avant { grid-column: 1 / 7; }
.avap-carte--apres { grid-column: 7 / 13; }
.avap-carte .media { object-position: 50% 66%; }
.avap-paire2 {
  grid-column: 1 / 13;
  padding: clamp(20px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px var(--g);
}
.avap-paire2 .avap-vignettes { grid-column: 1 / 7; grid-row: 1 / 3; }
.avap-paire2 .avap-paire2__titre { grid-column: 7 / 13; grid-row: 1; align-self: start; padding-top: 6px; }
.avap-paire2 .avap-legende { grid-column: 7 / 13; grid-row: 2; align-self: end; }
.avap-paire2__titre { text-wrap: balance; font-size: clamp(24px, 2.6vw, 38px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--prune); }
.avap-vignettes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.avap-vignette { aspect-ratio: 1; border-radius: 16px; }
.avap-vignette .avap-etiquette { left: 12px; top: 12px; padding: 7px 12px; font-size: 13px; }
.avap-paire2 .avap-legende { margin: 0; font-size: 16px; }
.avap-etiquette {
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--ivoire);
  color: var(--encre);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
}
.avap-carte--apres .avap-etiquette, .avap-vignette--apres .avap-etiquette { background: var(--prune); color: var(--ivoire); }
.avap-legende {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre-douce);
  max-width: 60em;
}

/* ---------- 5. La journée ---------- */
.journee {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--g);
  align-items: stretch;
}
.journee-photo { grid-column: 1 / 5; grid-row: 1 / 3; min-height: 420px; }
.journee-photo .media { object-position: 82% 30%; }
.journee-places {
  grid-column: 5 / 13;
  grid-row: 1;
  padding: clamp(24px, 2.8vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.places {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  width: 100%;
  max-width: 560px;
}
.place {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--prune);
  background: var(--ivoire);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 34px);
  letter-spacing: -.03em;
  color: var(--prune);
}
.journee-fiche {
  grid-column: 5 / 13;
  grid-row: 2;
  padding: 8px 0 0 clamp(0px, 1.4vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.fiche { margin: 0; border-top: 1px solid var(--filet); }
.fiche-ligne {
  display: grid;
  grid-template-columns: minmax(110px, 28%) 1fr;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--filet);
  align-items: baseline;
}
.fiche dt { font-size: 15px; font-weight: 600; color: var(--encre-douce); }
.fiche dd { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; }
.journee-note { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.journee-note p { font-size: 18px; color: var(--encre-douce); }

/* ---------- 6. Juliette (complément) ---------- */
.s3-carte .pastilles { margin-top: 4px; }
.s3-carte .pastilles li { background: rgba(236, 227, 216, .14); color: var(--rose); border: 1px solid rgba(236, 227, 216, .4); }

/* ---------- 7. Les résultats ---------- */
.grille-res {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(84px, 11vw, 158px);
  grid-auto-flow: dense;
  gap: var(--g);
}
.res { grid-column: span 3; grid-row: span 2; }
.res--grande { grid-column: span 6; grid-row: span 4; }
.res--large { grid-column: span 6; grid-row: span 2; }
.res-insta {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: clamp(18px, 2vw, 28px);
  color: var(--prune);
  text-decoration: none;
  transition: background-color .2s ease;
}
.res-insta:hover { background: #e4d8ca; }
.res-insta__compte { font-size: clamp(22px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; overflow-wrap: anywhere; }
.res-insta__lien { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.res-insta__lien .fleche { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; }
.res-insta__lien .fleche svg { width: 16px; height: 16px; }

/* ---------- 8. Les autres formations ---------- */
.liste-autres { list-style: none; padding: 0; border-top: 1px solid var(--filet); }
.liste-autres li { border-bottom: 1px solid var(--filet); }
.liste-autres a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.5fr) 48px;
  gap: 24px;
  align-items: center;
  padding: 26px 8px;
  text-decoration: none;
  color: var(--encre);
  border-radius: 18px;
  transition: background-color .2s ease;
}
.liste-autres a:hover { background: rgba(250, 247, 242, .7); }
.liste-autres .num-f {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--prune); color: var(--ivoire);
  font-weight: 700; font-size: 15px;
}
.liste-autres .nom-f { font-size: clamp(22px, 2.3vw, 32px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.liste-autres .accroche-f { font-size: 17px; line-height: 1.5; color: var(--encre-douce); }
.liste-autres .fleche-f {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--prune); color: var(--prune);
  display: grid; place-items: center;
}
.liste-autres .fleche-f svg { width: 16px; height: 16px; }
.autres-pied { margin-top: 28px; }

/* ---------- 9. Questions ---------- */
.questions {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px var(--g);
  align-items: start;
}
.questions .titre-section { grid-column: 1 / 5; }
.faq { grid-column: 5 / 13; display: flex; flex-direction: column; gap: 10px; }
.qa { background: var(--rose); border-radius: 20px; }
.qa summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 76px 22px 26px;
  font-size: clamp(18px, 1.5vw, 21px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  border-radius: 20px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__signe {
  position: absolute;
  right: 20px;
  top: 50%;
  width: 36px; height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--prune);
}
.qa__signe::before, .qa__signe::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 2px;
  margin: -1px 0 0 -7px;
  background: var(--ivoire);
  border-radius: 2px;
  transition: transform .25s ease;
}
.qa__signe::after { transform: rotate(90deg); }
.qa[open] .qa__signe::after { transform: rotate(0deg); }
.qa__r { padding: 0 26px 24px; }
.qa__r p { font-size: 17px; line-height: 1.55; color: var(--encre-douce); max-width: 60ch; }

/* ---------- 10. La demande ---------- */
.demande {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px var(--g);
  align-items: start;
}
.demande-intro { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 26px; padding-right: clamp(0px, 1.5vw, 24px); }
.demande-intro .chapeau { color: var(--rose); }
.ensuite h3 { margin: 0 0 14px; font-size: 22px; font-weight: 800; letter-spacing: -.025em; }
.ensuite ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ensuite li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: center;
  font-size: 17px;
  line-height: 1.4;
}
.ensuite .num-e {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
  background: var(--rose); color: var(--prune);
}
.demande-intro .insta { font-size: 16px; color: var(--rose); }
.demande-intro .insta .lien { color: var(--ivoire); }
.demande-form { grid-column: 6 / 13; }

/* Formulaire */
.form {
  background: var(--ivoire);
  color: var(--encre);
  border-radius: 24px;
  padding: clamp(22px, 3vw, 40px);
}
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.champ { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.champ label, .champ__label { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.champ__aide { font-weight: 500; color: var(--encre-douce); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--encre);
  background: #fff;
  border: 1.5px solid rgba(107, 91, 79, .24);
  border-radius: 14px;
  padding: 14px 16px;
  line-height: 1.3;
  transition: border-color .2s ease;
}
.form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%236b5b4f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}
.form textarea { resize: vertical; min-height: 110px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--prune); box-shadow: 0 0 0 3px rgba(107, 91, 79, .16); }
.form ::placeholder { color: #8f8174; }
.form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.choix-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.choix-contact label {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(107, 91, 79, .24);
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.choix-contact input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choix-contact label:has(input:checked) { background: var(--prune); border-color: var(--prune); color: var(--ivoire); }
.choix-contact label:has(input:focus-visible) { outline: 3px solid var(--prune); outline-offset: 3px; }
.form__etape-tete { font-size: 14px; font-weight: 700; color: var(--prune); margin-bottom: 14px; }
.form__envoi { margin-top: 6px; display: flex; flex-direction: column; gap: 14px; }
.form .bouton { border: 0; cursor: pointer; font-family: inherit; }
.form__suite { margin-top: 4px; }
.form__legal { font-size: 14px; line-height: 1.5; color: var(--encre-douce); }
.form__retour {
  background: none; border: 0; padding: 6px 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--prune);
  text-decoration: underline; text-underline-offset: 4px;
}
.prerempli { font-size: 15px; font-weight: 600; color: var(--prune); margin-bottom: 12px; }
.form:not(.form--etapes) .form__suite,
.form:not(.form--etapes) .form__etape-tete { display: none; }
.form--etapes[data-etape="1"] .etape-2,
.form--etapes[data-etape="1"] .form__envoi { display: none; }
.form--etapes[data-etape="2"] .etape-1 { display: none; }

/* ---------- Pied de page ---------- */
.pied {
  max-width: 1440px;
  margin: var(--esp) auto 0;
  padding: 36px var(--pad) 32px;
}
.pied-haut {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px var(--g);
  align-items: start;
  padding-top: 32px;
  border-top: 1px solid var(--filet);
}
.pied .logo { grid-column: 1 / 4; }
.journee-places .pastille-etat { align-self: flex-start; }
.pied-adresse { grid-column: 4 / 7; font-style: normal; font-size: 16px; line-height: 1.5; color: var(--encre-douce); }
.pied-liens { grid-column: 7 / 13; list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 28px; font-size: 16px; font-weight: 600; }
.pied-liens a { text-decoration: none; border-bottom: 2px solid transparent; padding: 3px 0; }
.pied-liens a:hover { border-bottom-color: currentColor; }
.pied-bas { margin-top: 28px; font-size: 14px; color: var(--encre-douce); }

/* ---------- Page formations ---------- */
.page-tete {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px var(--pad) 0;
}
.titre-page {
  font-weight: 800;
  font-size: clamp(64px, calc((100vw - 64px) / 7.9), 174px);
  line-height: .86;
  letter-spacing: -.058em;
  margin-left: -.045em;
  padding-bottom: .12em;
}
.titre-page .point-final { color: var(--prune); }
.page-tete__bas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px var(--g);
  align-items: end;
  margin-top: 18px;
}
.page-tete__bas .chapeau { grid-column: 1 / 7; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; color: var(--encre); letter-spacing: -.015em; }
.ancres { grid-column: 7 / 13; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.ancres a {
  display: inline-flex; align-items: center;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--prune);
  color: var(--prune);
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.ancres a:hover { background: var(--prune); color: var(--ivoire); }

.sig {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--g);
}
.sig-media { grid-column: 1 / 6; min-height: 560px; }
.sig-carte {
  grid-column: 6 / 13;
  padding: clamp(28px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.sig-sur { font-size: clamp(20px, 1.7vw, 24px); font-weight: 600; letter-spacing: -.015em; color: var(--prune); margin-top: -12px; }
.sig-citations {
  grid-column: 1 / 13;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--g);
}
.sig-citation { padding: clamp(26px, 3.2vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.sig-citation:nth-child(1) { grid-column: 1 / 8; }
.sig-citation:nth-child(2) { grid-column: 8 / 13; }
.sig-citation blockquote p { font-weight: 700; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.035em; text-wrap: balance; }
.sig-citation figcaption { font-size: 15px; font-weight: 600; }
.carte-prune.sig-citation blockquote p { color: var(--ivoire); }
.carte-prune.sig-citation figcaption { color: var(--rose); }
.carte-rose.sig-citation figcaption { color: var(--prune); }
.sig-note { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.sig-note p { font-size: 18px; color: var(--encre-douce); }
.sig-carte .bouton { width: auto; }

.cartes-f {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g);
}
.carte-f { display: flex; }
.carte-f a {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 12px 12px 26px;
  border-radius: var(--r);
  background: var(--rose);
  color: var(--encre);
  text-decoration: none;
  transition: background-color .2s ease;
}
.carte-f a:hover { background: #e4d8ca; }
.carte-f__photo { aspect-ratio: 4 / 3; border-radius: 16px; }
.carte-f__corps { padding: 0 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.carte-f__num { font-size: 14px; font-weight: 700; color: var(--prune); }
.carte-f__nom { font-size: clamp(24px, 2.2vw, 30px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; }
.carte-f__accroche { font-size: 16px; line-height: 1.5; color: var(--encre-douce); }
.carte-f__action { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 700; color: var(--prune); text-decoration: underline; text-underline-offset: 4px; }
.debutantes { margin-top: 22px; font-size: 17px; color: var(--encre-douce); }

/* Outil « Par où commencer ? » */
.parcours {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 28px var(--g);
  align-items: start;
}
.parcours-intro { grid-column: 1 / 6; display: flex; flex-direction: column; gap: 20px; }
.outil {
  grid-column: 6 / 13;
  background: var(--ivoire);
  border-radius: 24px;
  padding: clamp(22px, 3vw, 40px);
  min-height: 420px;
}
.outil__prog { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; font-size: 14px; font-weight: 700; color: var(--prune); }
.outil__traits { display: flex; gap: 6px; }
.outil__traits span { width: 28px; height: 6px; border-radius: 999px; background: rgba(107, 91, 79, .18); }
.outil__traits span.is-fait { background: var(--prune); }
.outil__question { margin: 0 0 20px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; outline: none; text-wrap: balance; }
.choix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.choix button {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 12px 16px 12px 12px;
  border-radius: 16px;
  border: 1.5px solid rgba(107, 91, 79, .2);
  background: #fff;
  color: var(--encre);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}
.choix button:hover { border-color: var(--prune); }
.choix button[aria-pressed="true"] { border-color: var(--prune); background: var(--rose); }
.choix__lettre { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--rose); color: var(--prune); font-weight: 800; font-size: 14px; }
.choix__conseil { font-size: 13px; font-weight: 700; color: var(--prune); background: var(--rose); padding: 5px 10px; border-radius: 999px; }
.outil__nav { margin-top: 14px; }
.outil__retour { background: none; border: 0; padding: 6px 0; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; color: var(--prune); text-decoration: underline; text-underline-offset: 4px; }
.reco { padding: 18px 0; border-top: 1px solid var(--filet); }
.reco__ordre { font-size: 14px; font-weight: 700; color: var(--prune); }
.reco__nom { margin: 4px 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.reco__statut { margin-top: 8px; display: inline-block; font-size: 14px; font-weight: 700; color: var(--prune); background: var(--rose); padding: 6px 12px; border-radius: 999px; }
.resultat__btns { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.resultat__btns .bouton { width: auto; border: 0; cursor: pointer; font-family: inherit; }

/* ---------- Pages simples (merci, mentions, 404) ---------- */
.simple { max-width: 1440px; margin: 0 auto; padding: 8px var(--pad) 0; }
.simple .chapeau { margin-top: 18px; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; color: var(--encre); letter-spacing: -.015em; }
.etapes {
  list-style: none;
  padding: 0;
  margin: clamp(36px, 4vw, 56px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--g);
}
.etape { padding: clamp(24px, 2.8vw, 40px); min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.etape .num-e { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--ivoire); color: var(--prune); }
.etape.carte-prune .num-e { background: var(--rose); }
.etape p { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.simple__actions { margin-top: clamp(32px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.simple__actions .bouton { width: auto; }

.legal { max-width: 860px; margin-top: clamp(32px, 4vw, 56px); display: flex; flex-direction: column; gap: 12px; }
.legal-bloc { background: var(--rose); border-radius: 20px; padding: clamp(22px, 2.6vw, 34px); }
.legal h2 { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.legal p { font-size: 17px; line-height: 1.6; color: var(--encre); }
.legal p + p { margin-top: 8px; }
.a-confirmer { white-space: nowrap; font-weight: 700; color: var(--prune); background: var(--ivoire); padding: 1px 8px; border-radius: 999px; }

/* ---------- Mouvement (joué une fois) ---------- */
.js .scene .mot { display: inline-block; opacity: 0; transform: translateY(.3em); }
.js .scene.vu .mot {
  opacity: 1;
  transform: none;
  transition:
    opacity .5s ease calc(var(--i, 0) * 70ms),
    transform .8s var(--ease) calc(var(--i, 0) * 70ms);
}
.js .hero.vu .mot {
  transition:
    opacity .5s ease calc(var(--i, 0) * 110ms),
    transform .85s var(--ease) calc(var(--i, 0) * 110ms);
}
.js .scene .carte-media { opacity: 0; transform: scale(.96); }
.js .scene.vu .carte-media {
  opacity: 1;
  transform: none;
  transition:
    opacity .6s ease calc(var(--d, 0) * 120ms + 100ms),
    transform 1s var(--ease) calc(var(--d, 0) * 120ms + 100ms);
}
.js .scene .carte-rose,
.js .scene .carte-prune,
.js .hero .bouton { opacity: 0; }
.js .scene.vu .carte-rose,
.js .scene.vu .carte-prune,
.js .hero.vu .bouton { opacity: 1; transition: opacity .55s ease calc(var(--d, 0) * 120ms + 60ms); }
.js .scene .pastilles li,
.js .scene .reperes li,
.js .scene .point,
.js .scene .place { opacity: 0; transform: translateY(10px); }
.js .scene.vu .pastilles li,
.js .scene.vu .reperes li,
.js .scene.vu .point,
.js .scene.vu .place {
  opacity: 1;
  transform: none;
  transition:
    opacity .45s ease calc(var(--p, 0) * 110ms + 420ms),
    transform .6s var(--ease) calc(var(--p, 0) * 110ms + 420ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .scene .mot,
  .js .scene .carte,
  .js .hero .bouton,
  .js .scene .pastilles li,
  .js .scene .reperes li,
  .js .scene .point,
  .js .scene .place { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1099px) {
  .hero { min-height: 0; }
  .hero-grille { min-height: 440px; }
  .hero-info { grid-column: 1 / 7; }
  .hero-grille > .bouton { grid-column: 1 / 7; }
  .hero-video { grid-column: 7 / 13; }
  .hero-photo { display: none; }
  .s1-photo { grid-column: 1 / 6; }
  .s1-carte { grid-column: 6 / 13; }
  .s2-texte { grid-column: 1 / 7; }
  .s2-macro { grid-column: 7 / 13; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 699px) {
  :root { --pad: 16px; --r: 20px; --g: 12px; --tete: 0px; }

  .tete { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 16px 10px; }
  .logo { align-self: flex-start; }
  .logo-nom { font-size: 23px; }
  .nav { justify-content: space-between; gap: 8px; font-size: 14px; }

  .hero { min-height: 0; padding-top: 10px; gap: 16px; }
  .hero-titre { font-size: 24.5vw; white-space: normal; line-height: .97; padding-bottom: .08em; }
  .hero-grille { display: flex; flex-direction: column; gap: var(--g); min-height: 0; }
  .hero-info { padding: 22px; gap: 18px; }
  .hero-phrase { font-size: 21px; line-height: 1.24; }
  .hero-ligne { font-size: 13.5px; }
  .hero-grille > .bouton { margin: 0; width: 100%; font-size: 15px; padding: 14px 18px; }
  .hero-video { aspect-ratio: 4 / 5; }
  .hero-video .media { object-position: 50% 50%; }

  .s1 { display: flex; flex-direction: column; }
  .s1-carte { order: -1; padding: 26px 22px; gap: 22px; }
  .s1-photo { min-height: 0; aspect-ratio: 1 / 1; }
  .titre-s1 { font-size: 38px; }
  .s1-texte { font-size: 17px; }
  .pastilles li { font-size: 15px; padding: 11px 18px; }

  .s2 { display: flex; flex-direction: column; gap: 22px; padding: 26px 18px; border-radius: 24px; }
  .s2-texte { display: contents; }
  .titre-s2 { order: 1; font-size: 42px; }
  .s2-macro { order: 2; width: 100%; }
  .reperes { order: 3; }
  .s2-phrase { order: 4; margin-top: 0; font-size: 19px; }
  .point { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 14px; }

  .s3 { display: flex; flex-direction: column; gap: 16px; }
  .titre-s3 { font-size: 17.5vw; }
  .s3-photo { min-height: 0; aspect-ratio: 4 / 5; }
  .s3-carte { padding: 26px 22px; gap: 22px; }
  .citation p { font-size: 28px; }
  .s3-texte { font-size: 17px; }

  .js .scene .mot { transform: translateY(.2em); }
}

/* ==========================================================
   SITE COMPLET : compléments et adaptations d'écran
   ========================================================== */
.s3-photo .media { object-position: 50% 4%; }
.ensuite-bloc { display: grid; grid-template-columns: 168px 1fr; gap: 22px; align-items: start; }
.ensuite-portrait { aspect-ratio: 1; border-radius: 20px; }
.ensuite-portrait .media { object-position: 50% 30%; }

@media (max-width: 1099px) {
  .tete-bloc .titre-section { grid-column: 1 / 13; }
  .tete-bloc .chapeau, .tete-bloc .pastille-etat { grid-column: 1 / 13; }
  .journee-photo { grid-column: 1 / 6; grid-row: 1 / 3; min-height: 0; }
  .journee-places { grid-column: 6 / 13; }
  .journee-fiche { grid-column: 1 / 13; grid-row: 3; padding: 0; }
  .avap-paire2 .avap-vignettes { grid-column: 1 / 9; }
  .avap-paire2 .avap-paire2__titre, .avap-paire2 .avap-legende { grid-column: 9 / 13; }
  .liste-autres a { grid-template-columns: 56px minmax(0, 1fr) 44px; }
  .liste-autres .accroche-f { grid-column: 2 / 3; grid-row: 2; }
  .liste-autres .fleche-f { grid-column: 3; grid-row: 1 / 3; }
  .questions .titre-section, .faq { grid-column: 1 / 13; }
  .demande-intro, .demande-form { grid-column: 1 / 13; }
  .parcours-intro, .outil { grid-column: 1 / 13; }
  .sig-media { grid-column: 1 / 13; min-height: 0; aspect-ratio: 16 / 10; }
  .sig-carte { grid-column: 1 / 13; }
  .sig-citation:nth-child(1), .sig-citation:nth-child(2) { grid-column: 1 / 13; }
  .page-tete__bas .chapeau, .ancres { grid-column: 1 / 13; justify-content: flex-start; }
  .cartes-f { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied .logo { grid-column: 1 / 13; }
  .pied-adresse { grid-column: 1 / 7; }
  .pied-liens { grid-column: 7 / 13; }
}

@media (max-width: 699px) {
  :root { --esp: 64px; }
  .nav .nav-ordi { display: none; }
  .panneau { padding: 26px 18px; border-radius: 24px; }
  .titre-section { font-size: clamp(38px, 11.4vw, 48px); }
  .tete-bloc { gap: 14px; margin-bottom: 22px; }
  .chapeau { font-size: 17px; }

  .avap { gap: 10px; }
  .avap-carte--avant { grid-column: 1 / 7; }
  .avap-carte--apres { grid-column: 7 / 13; }
  .avap-carte { aspect-ratio: 3 / 4; }
  .avap-paire2 { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
  .avap-vignette .avap-etiquette { left: 8px; top: 8px; padding: 6px 10px; font-size: 12px; }
  .res-insta { padding: 14px; }
  .res-insta__compte { font-size: 19px; }
  .res-insta__lien { font-size: 14px; }
  .res-insta__lien .fleche { width: 32px; height: 32px; }
  .avap-etiquette { left: 10px; top: 10px; padding: 7px 12px; font-size: 13px; }

  .journee { display: flex; flex-direction: column; gap: 22px; }
  .journee-photo { aspect-ratio: 4 / 3; min-height: 0; }
  .journee-photo .media { object-position: 60% 32%; }
  .journee-places { flex-direction: column; align-items: flex-start; padding: 22px; gap: 20px; }
  .journee-places .places { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 10px; }
  .place { font-size: 18px; }
  .fiche-ligne { grid-template-columns: 1fr; gap: 2px; padding: 13px 0; }
  .fiche dd { font-size: 18px; }

  .grille-res { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 44vw; gap: 10px; }
  .res { grid-column: span 1; grid-row: span 1; }
  .res--grande { grid-column: span 2; grid-row: span 2; }
  .res--large { grid-column: span 2; grid-row: span 1; }

  .liste-autres a { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; padding: 20px 0; }
  .liste-autres .num-f { width: 40px; height: 40px; font-size: 14px; grid-row: 1 / 3; align-self: start; }
  .liste-autres .nom-f { font-size: 22px; }
  .liste-autres .accroche-f { grid-column: 2; grid-row: 2; font-size: 16px; }
  .liste-autres .fleche-f { display: none; }

  .qa summary { padding: 18px 64px 18px 18px; font-size: 18px; }
  .qa__signe { right: 14px; width: 32px; height: 32px; margin-top: -16px; }
  .qa__r { padding: 0 18px 20px; }
  .qa__r p { font-size: 16px; }

  .demande { gap: 24px; }
  .ensuite-bloc { grid-template-columns: 1fr; gap: 16px; }
  .ensuite-portrait { width: 132px; }
  .form { padding: 20px 16px; border-radius: 20px; }
  .form__duo { grid-template-columns: 1fr; }
  .form .bouton { font-size: 15px; padding: 14px 18px; }

  .pied { padding-top: 24px; }
  .pied-haut { display: flex; flex-direction: column; gap: 16px; }
  .pied-liens { justify-content: flex-start; gap: 10px 22px; }

  .titre-page { font-size: 18vw; line-height: .9; }
  .page-tete__bas { margin-top: 10px; gap: 18px; }
  .page-tete__bas .chapeau { font-size: 19px; }
  .ancres a { padding: 9px 14px; font-size: 14px; }
  .sig { gap: 12px; }
  .sig-media { aspect-ratio: 4 / 5; }
  .sig-carte { padding: 26px 20px; }
  .sig-carte .bouton { width: calc(100% + 16px); margin: 0 -8px; font-size: 14.5px; padding: 14px 12px; }
  .sig-citations { gap: 12px; }
  .cartes-f { grid-template-columns: 1fr; gap: 12px; }
  .outil { padding: 20px 14px; min-height: 0; }
  .choix button { font-size: 15px; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 10px 12px 10px 10px; }
  .choix__lettre { width: 30px; height: 30px; }

  .simple .chapeau { font-size: 19px; }
  .etapes { grid-template-columns: 1fr; gap: 12px; }
  .etape { min-height: 0; gap: 18px; }
  .legal h2 { font-size: 21px; }
  .legal p { font-size: 16px; }
}

/* Pages simples et titre de la demande */
.titre-demande { font-size: clamp(38px, 4.6vw, 68px); }
.accent-page { color: var(--prune); }
.titre-ensuite { margin-top: clamp(40px, 5vw, 64px); font-size: clamp(28px, 3vw, 40px); font-weight: 800; letter-spacing: -.035em; }
.titre-ensuite + .etapes { margin-top: 20px; }
.simple .titre-section { margin-top: 12px; }
.titre-page--long { font-size: clamp(56px, calc((100vw - 64px) / 8.6), 168px); }
@media (max-width: 699px) {
  .titre-demande { font-size: 36px; }
  .titre-page--long { font-size: 15.5vw; }
}

/* ==========================================================
   MISE EN PAGE v11 (23/10, retours de Gauthier)
   Une seule largeur, une seule marge, un seul espacement entre
   sections, un seul rembourrage de carte. Contenu centré.
   Deux colonnes seulement à partir de 1100 px, et alors les deux
   colonnes ont la même hauteur (la photo suit le texte).
   En dessous : une colonne centrée de 720 px au plus.
   ========================================================== */
:root {
  --pad: 40px;
  --largeur: 1280px;
  --col: 720px;
  --esp: clamp(72px, 8vw, 120px);
  --in: clamp(28px, 3.4vw, 52px);
  --gi: clamp(18px, 1.8vw, 26px);
  --tete-bloc: clamp(28px, 3.2vw, 44px);
}

/* Largeur commune */
.tete, .hero, .s1, .s3, .bloc, .pied, .page-tete, .simple {
  max-width: calc(var(--largeur) + 2 * var(--pad));
  padding-left: var(--pad);
  padding-right: var(--pad);
}
.s2, .panneau {
  width: calc(100% - 2 * var(--pad));
  max-width: var(--largeur);
  padding: var(--in);
}

/* Un seul espacement entre sections */
.s1, .s3, .bloc { padding-top: var(--esp); }
.s2, .panneau { margin-top: var(--esp); }
.s3 { padding-bottom: 0; }
.pied { margin-top: var(--esp); }

/* Titres de section centrés */
.tete-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: var(--tete-bloc);
}
.tete-bloc .titre-section, .tete-bloc .chapeau, .tete-bloc .pastille-etat { grid-column: auto; justify-self: auto; }
.titre-section { text-align: center; }
.chapeau { margin-left: auto; margin-right: auto; }

/* ---------- Couverture ---------- */
.hero { min-height: 0; padding-top: 8px; padding-bottom: 0; gap: clamp(18px, 2.2vw, 30px); }
.hero-titre {
  text-align: center;
  margin-left: 0;
  font-size: clamp(76px, calc((min(100vw, 1360px) - 2 * var(--pad)) / 6.35), 200px);
}
.hero-grille {
  flex: none;
  min-height: 0;
  grid-template-rows: minmax(clamp(400px, 36vw, 520px), auto);
  align-items: stretch;
}
.hero-info {
  grid-column: 1 / 5;
  padding: var(--in);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--gi);
}
.hero-info .bouton { width: auto; max-width: 100%; margin-top: 6px; }
.hero-phrase { font-size: clamp(22px, 2.05vw, 30px); line-height: 1.2; }
.hero-video { grid-column: 5 / 10; }
.hero-photo { grid-column: 10 / 13; }

/* ---------- Le principe ---------- */
.s1 { align-items: stretch; }
.s1-photo { grid-column: 1 / 6; min-height: 0; }
.s1-carte {
  grid-column: 6 / 13;
  padding: var(--in);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--gi);
}
.s1-texte { max-width: 34em; }
.pastilles { justify-content: center; margin-top: 6px; }

/* ---------- La planche ---------- */
.s2 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(28px, 3.4vw, 52px);
  row-gap: var(--tete-bloc);
  align-items: stretch;
}
.s2-texte { display: contents; }
.titre-s2 { grid-column: 1 / 13; grid-row: 1; text-align: center; }
.s2-macro { grid-column: 1 / 7; grid-row: 2; aspect-ratio: 1; align-self: start; }
.reperes { grid-column: 7 / 13; grid-row: 2; display: flex; flex-direction: column; }
.reperes li { flex: 1; align-items: center; padding: 14px 0; }
.reperes strong { font-size: clamp(19px, 1.6vw, 23px); }
.reperes .desc { font-size: clamp(16px, 1.2vw, 18px); }
.s2-phrase { grid-column: 1 / 13; grid-row: 3; margin-top: 0; text-align: center; }

/* ---------- La journée ---------- */
.journee { align-items: stretch; row-gap: var(--g); }
.journee-photo { grid-column: 1 / 6; grid-row: 1 / 3; min-height: 0; }
.journee-places {
  grid-column: 6 / 13;
  padding: var(--in);
  align-items: center;
  justify-content: center;
  gap: var(--gi);
}
.journee-places .places { margin: 0 auto; }
.journee-places .pastille-etat { align-self: center; }
.journee-fiche { grid-column: 6 / 13; padding: 8px 0 0; gap: var(--gi); }
.journee-note { align-items: center; text-align: center; }

/* ---------- Juliette ---------- */
.s3 { grid-template-rows: auto auto; row-gap: var(--g); align-items: stretch; }
.titre-s3 { grid-column: 1 / 8; text-align: center; margin-left: 0; align-self: center; }
.s3-photo { grid-column: 8 / 13; grid-row: 1 / 3; min-height: 0; }
.s3-carte {
  grid-column: 1 / 8;
  padding: var(--in);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--gi);
}
.s3-texte { max-width: 34em; }

/* ---------- Résultats ---------- */
.res-insta { align-items: center; justify-content: center; text-align: center; gap: 18px; }
.res-insta__lien { justify-content: center; align-items: center; }

/* ---------- Autres formations ---------- */
.liste-autres { max-width: 1000px; margin: 0 auto; }
.autres-pied { text-align: center; margin-top: var(--gi); }

/* ---------- Questions ---------- */
.questions { display: flex; flex-direction: column; align-items: center; gap: var(--tete-bloc); }
.faq { width: 100%; max-width: 880px; }

/* ---------- Demande ---------- */
.demande { align-items: center; column-gap: clamp(28px, 3.4vw, 52px); }
.demande-intro { grid-column: 1 / 6; align-items: center; text-align: center; gap: var(--gi); padding-right: 0; }
.demande-intro .titre-section { text-align: center; }
.ensuite-bloc { grid-template-columns: 128px auto; justify-content: center; align-items: center; text-align: left; }
.demande-form { grid-column: 6 / 13; }

/* ---------- Pied de page ---------- */
.pied { padding-top: 0; }

/* ---------- Page formations ---------- */
.titre-page { text-align: center; margin-left: 0; }
.page-tete__bas { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; margin-top: 12px; }
.page-tete__bas .chapeau { max-width: 36em; }
.ancres { justify-content: center; }
.sig { align-items: stretch; row-gap: var(--g); }
.sig-media { grid-column: 1 / 6; min-height: 0; }
.sig-carte { grid-column: 6 / 13; padding: var(--in); gap: var(--gi); }
.sig-carte .titre-section, .sig-sur { text-align: center; }
.sig-sur { margin-top: -6px; }
.sig-note { align-items: center; text-align: center; }
.sig-citation { justify-content: center; align-items: center; text-align: center; padding: var(--in); }
.sig-citation:nth-child(1), .sig-citation:nth-child(2) { grid-column: span 6; }
.carte-f a { text-align: center; }
.carte-f__corps { align-items: center; }
.debutantes { text-align: center; }
.parcours { align-items: center; column-gap: clamp(28px, 3.4vw, 52px); }
.parcours-intro { align-items: center; text-align: center; }

/* ---------- Pages simples ---------- */
.simple { text-align: center; }
.simple .chapeau { max-width: 36em; }
.etapes { text-align: left; }
.etape { justify-content: flex-start; align-items: center; text-align: center; }
.simple__actions { justify-content: center; }
.legal { margin-left: auto; margin-right: auto; text-align: left; }

/* ===== Une colonne centrée (tablette et téléphone) ===== */
@media (max-width: 1099px) {
  :root { --pad: 32px; }
  .tete, .hero, .s1, .s3, .bloc, .pied, .page-tete, .simple {
    max-width: calc(var(--col) + 2 * var(--pad));
  }
  .s2, .panneau { max-width: var(--col); }
  .nav { gap: 22px; }
  .hero-titre { font-size: calc((min(100vw, var(--col) + 2 * var(--pad)) - 2 * var(--pad)) / 6.35); }

  .hero-grille { display: flex; flex-direction: column; gap: var(--g); min-height: 0; }
  .hero-info { padding: var(--in); }
  .hero-video { aspect-ratio: 16 / 10; }
  .hero-photo { display: none; }

  .s1 { display: flex; flex-direction: column; gap: var(--g); }
  .s1-carte { order: -1; }
  .s1-photo { aspect-ratio: 16 / 10; min-height: 0; }

  .s2 { display: flex; flex-direction: column; gap: var(--gi); }
  .titre-s2 { order: 1; margin-bottom: 6px; }
  .s2-macro { order: 2; width: 100%; }
  .reperes { order: 3; }
  .reperes li { flex: none; }
  .s2-phrase { order: 4; }

  .journee { display: flex; flex-direction: column; gap: var(--g); }
  .journee-photo { aspect-ratio: 4 / 3; min-height: 0; }
  .journee-fiche { padding: 8px 0 0; }

  .s3 { display: flex; flex-direction: column; gap: var(--g); }
  .titre-s3 { font-size: clamp(56px, 12vw, 104px); }
  .s3-photo { aspect-ratio: 1; min-height: 0; }


  .liste-autres a { grid-template-columns: 56px minmax(0, 1fr) 44px; }

  .demande { display: flex; flex-direction: column; gap: var(--tete-bloc); }
  .demande-form { width: 100%; }

  .sig { display: flex; flex-direction: column; gap: var(--g); }
  .sig-media { aspect-ratio: 16 / 10; min-height: 0; }
  .sig-citations { display: flex; flex-direction: column; gap: var(--g); }
  .cartes-f { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .parcours { display: flex; flex-direction: column; gap: var(--tete-bloc); }
  .outil { width: 100%; }

  .pied-haut { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
  .pied-liens { justify-content: center; }
  .pied-bas { text-align: center; }
}

/* ===== Téléphone ===== */
@media (max-width: 699px) {
  :root { --pad: 20px; --in: 24px; --gi: 18px; --esp: 64px; --tete-bloc: 24px; }
  .tete { align-items: center; padding-left: var(--pad); padding-right: var(--pad); }
  .logo { align-self: center; }
  .nav { justify-content: center; gap: 22px; }

  .hero-titre { font-size: 23vw; }
  .hero-info .bouton { width: 100%; }
  .hero-video { aspect-ratio: 4 / 5; }

  .s1-photo { aspect-ratio: 4 / 3; }
  .s2 { padding: var(--in) 18px; }
  .journee-photo { aspect-ratio: 4 / 5; }
  .s3-photo { aspect-ratio: 4 / 5; }

  .grille-res { grid-auto-rows: 44vw; }
  .cartes-f { grid-template-columns: 1fr; }
  .ensuite-bloc { grid-template-columns: 1fr; justify-items: center; }
  .ensuite-portrait { width: 132px; }
  .ensuite { text-align: left; }
  .ensuite h3 { text-align: center; }
  .sig-carte .bouton { width: 100%; margin: 0; }
}

/* En-tête empilé et centré tant que le logo et le menu ne tiennent pas sur une ligne */
@media (max-width: 899px) {
  .tete { flex-direction: column; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 6px; }
  .logo { align-self: center; }
  .nav { justify-content: center; }
}

/* Liste des autres formations : nom et accroche serrés, numéro et flèche centrés sur la ligne */
@media (max-width: 1099px) {
  .liste-autres a { grid-template-columns: 56px minmax(0, 1fr) 44px; column-gap: 18px; row-gap: 4px; padding: 22px 8px; }
  .liste-autres .num-f { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .liste-autres .nom-f { grid-column: 2; grid-row: 1; align-self: end; }
  .liste-autres .accroche-f { grid-column: 2; grid-row: 2; align-self: start; }
  .liste-autres .fleche-f { grid-column: 3; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 699px) {
  .liste-autres a { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 18px 0; }
  .liste-autres .fleche-f { display: none; }
  .pastilles { gap: 8px; }
  .pastilles li { font-size: 14px; padding: 10px 14px; }
  .pastille-etat { font-size: 13.5px; padding: 9px 14px; gap: 8px; }
}

/* Photo de Juliette au salon (remplace la photo à la ponceuse) : visage dans le tiers haut */
.journee-photo .media { object-position: 50% 28%; }
@media (max-width: 1099px) { .journee-photo .media { object-position: 50% 12%; } }
@media (max-width: 699px) { .journee-photo .media { object-position: 50% 30%; } }

/* ==========================================================
   ALIGNEMENT « MAGAZINE » (23/10, Gauthier)
   Titres et textes à gauche. Boutons, pastilles et petites
   lignes d'information au centre. La carte de couverture
   reste centrée (validée telle quelle).
   ========================================================== */
.hero-titre { text-align: left; margin-left: -.045em; }
.titre-section, .titre-s1, .titre-s2, .titre-s3, .titre-page, .titre-ensuite { text-align: left; }
.titre-s3 { margin-left: -.04em; }
.titre-page { margin-left: -.045em; }
.tete-bloc { align-items: flex-start; text-align: left; }
.chapeau { margin-left: 0; text-align: left; }

/* Le principe : titre et texte à gauche, pastilles au centre */
.s1-carte { align-items: stretch; text-align: left; }
.s1-texte { max-width: none; }
.pastilles { justify-content: center; }

/* La planche */
.s2-phrase { text-align: left; }

/* La journée : texte à gauche, lien d'action au centre */
.journee-note { align-items: flex-start; text-align: left; }
.journee-note .lien-action { align-self: center; }

/* Juliette */
.s3-carte { align-items: stretch; text-align: left; }
.s3-texte { max-width: none; }

/* Questions : titre à gauche, questions sur toute la largeur */
.questions { align-items: stretch; }
.faq { max-width: none; }

/* Demande */
.demande-intro { align-items: stretch; text-align: left; }
.ensuite-bloc { justify-content: start; }
.ensuite h3 { text-align: left; }
.demande-intro .insta { text-align: left; }

/* Page formations */
.page-tete__bas { align-items: stretch; text-align: left; }
.page-tete__bas .chapeau { max-width: 40em; }
.ancres { justify-content: center; }
.sig-carte .titre-section, .sig-sur { text-align: left; }
.sig-note { align-items: stretch; text-align: left; }
.sig-note .bouton { align-self: center; }
.sig-citation { align-items: stretch; text-align: left; }
.carte-f a { text-align: left; }
.carte-f__corps { align-items: flex-start; }
.debutantes { text-align: left; }
.parcours-intro { align-items: stretch; text-align: left; }

/* Pages simples */
.simple { text-align: left; }
.etape { align-items: flex-start; text-align: left; }
.simple__actions { justify-content: center; }

@media (max-width: 699px) {
  .ensuite-bloc { justify-items: start; }
  .ensuite h3 { text-align: left; }
}
/* La petite phrase posée sur un bouton reste centrée avec lui ; la liste suit le bord gauche du titre */
.journee-note, .sig-note { align-items: center; text-align: center; }
.liste-autres { max-width: none; margin: 0; }
.titre-s3 { align-self: stretch; }
.demande-intro .titre-section { text-align: left; }

/* Photo robe noire : visage dans le quart haut */
.journee-photo .media { object-position: 50% 12%; }
@media (max-width: 1099px) { .journee-photo .media { object-position: 50% 8%; } }
@media (max-width: 699px) { .journee-photo .media { object-position: 50% 10%; } }
.carte-f__photo .media[src*="robe-noire"] { object-position: 50% 20%; }

/* Photos d'ongles récentes (23/10) : cadrages */
.hero-video .media { object-position: 45% 50%; }
.hero-photo .media { object-position: 50% 55%; }
.s1-photo .media { object-position: 50% 55%; }
.s2-macro .media { object-position: 50% 100%; }
.journee-photo .media, .journee-photo .media[src] { object-position: 50% 50%; }
@media (max-width: 1099px) { .journee-photo .media { object-position: 50% 50%; } .hero-video .media { object-position: 45% 50%; } }
@media (max-width: 699px) { .journee-photo .media { object-position: 50% 50%; } }

/* ==========================================================
   LES 7 CHANGEMENTS (proposition ChatGPT, Gemini, Claude, 23/10)
   ========================================================== */
/* 1. Couverture explicite */
.hero-phrase { font-size: clamp(24px, 2.3vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.hero-sous { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: var(--encre-douce); max-width: 26em; text-wrap: pretty; }
.hero-ligne { font-size: 14px; }

/* 2. Un seul bouton, répété au centre */
.s2-bouton { grid-column: 1 / 13; grid-row: 4; justify-self: center; width: auto; margin-top: 4px; }
.s3 { grid-template-rows: auto auto auto; }
.s3-bouton { grid-column: 1 / 13; grid-row: 3; justify-self: center; width: auto; margin-top: calc(var(--gi) - var(--g)); }
@media (max-width: 1099px) {
  .s2-bouton { order: 5; align-self: center; }
  .s3-bouton { align-self: center; }
}
/* Barre collée en bas (téléphone) */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 247, 242, .96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-top: 1px solid var(--filet);
  box-shadow: 0 -6px 20px rgba(42, 34, 29, .08);
}
.barre-mobile[hidden] { display: none; }
.barre-mobile__txt { font-size: 13.5px; font-weight: 700; line-height: 1.25; color: var(--encre); }
.barre-mobile__btn { width: auto; min-height: 46px; padding: 10px 18px; font-size: 14.5px; white-space: nowrap; flex: none; }
body.avec-barre .pied { padding-bottom: 96px; }
@media (min-width: 700px) { .barre-mobile { display: none !important; } }

/* 3. Formulaire en une étape */
.form__champs { border: 0; padding: 0; margin: 0; min-width: 0; }
.form textarea { min-height: 96px; }
.form__plus { margin: 2px 0 18px; border-top: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
.form__plus summary { cursor: pointer; padding: 14px 0; font-size: 15px; font-weight: 700; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form__plus summary::-webkit-details-marker { display: none; }
.form__plus summary::after { content: "+"; font-size: 22px; font-weight: 600; line-height: 1; color: var(--prune); }
.form__plus[open] summary::after { content: "−"; }
.form__plus > .form__duo, .form__plus > .champ { margin-top: 4px; }
.form__plus[open] { padding-bottom: 4px; }
/* Sur téléphone et tablette : les champs avant « Et ensuite ? » */
@media (max-width: 1099px) {
  .demande-intro { display: contents; }
  .demande-intro .titre-section { order: 1; }
  .demande-intro .chapeau { order: 2; }
  .demande-form { order: 3; }
  .ensuite-bloc { order: 4; }
  .demande-intro .insta { order: 5; }
}

/* 4. Un grand « 4 » à la place des cercles */
.journee { align-items: stretch; }
.journee-places { grid-column: 1 / 6; grid-row: 1 / 3; justify-content: center; align-items: center; text-align: center; }
.journee-fiche { grid-column: 6 / 13; grid-row: 1 / 3; align-self: center; }
.grand-4 { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.grand-4__chiffre { font-weight: 800; font-size: clamp(150px, 15vw, 240px); line-height: .82; letter-spacing: -.06em; color: var(--prune); }
.grand-4__libelle { font-weight: 800; font-size: clamp(22px, 2vw, 30px); letter-spacing: -.03em; line-height: 1.1; color: var(--encre); }
@media (max-width: 1099px) {
  .journee-places { padding: var(--in); }
}
@media (max-width: 699px) {
  .grand-4__chiffre { font-size: 150px; }
}

/* 5. Les autres formations : une ligne */
.autres-ligne {
  max-width: calc(var(--largeur) + 2 * var(--pad));
  margin: var(--gi) auto 0;
  padding: 0 var(--pad);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: var(--encre-douce);
}
@media (max-width: 1099px) { .autres-ligne { max-width: calc(var(--col) + 2 * var(--pad)); } }
.carte-f__bloc {
  display: flex; flex-direction: column; gap: 18px; width: 100%;
  padding: 12px 12px 26px; border-radius: var(--r);
  background: var(--rose); color: var(--encre);
}

/* 6. Galerie : trois poses et Instagram */
.res-insta--large { grid-column: span 9; grid-row: span 2; }
@media (max-width: 699px) {
  .res-insta--large { grid-column: span 1; grid-row: span 1; }
}
/* Sur téléphone et tablette, la photo du principe faisait doublon avec la couverture (même pose kaki) */
@media (max-width: 1099px) { .s1-photo { display: none; } }
/* « Préciser votre pratique (facultatif) » sur une ligne, signe à droite */
.form__plus summary { justify-content: flex-start; flex-wrap: wrap; column-gap: 6px; }
.form__plus summary .champ__aide { font-weight: 500; }
.form__plus summary::after { margin-left: auto; }
/* Page formations, sur téléphone : les formations en préparation en lignes compactes (bloc secondaire) */
@media (max-width: 699px) {
  .carte-f__bloc { flex-direction: row; align-items: center; gap: 14px; padding: 10px; }
  .carte-f__photo { flex: none; width: 96px; aspect-ratio: 1; border-radius: 14px; }
  .carte-f__corps { padding: 0; gap: 4px; }
  .carte-f__nom { font-size: 20px; }
  .carte-f__accroche { font-size: 14.5px; }
}
/* Phrase de Juliette dans la carte de couverture (23/10) */
.hero-phrase { font-size: clamp(22px, 1.95vw, 29px); line-height: 1.14; }
.hero-sous { font-size: clamp(14px, 1.05vw, 15.5px); font-weight: 600; color: var(--prune); max-width: 30em; }

/* ==========================================================
   RETOUCHES DU 23/10 AU SOIR (Gauthier et Juliette)
   ========================================================== */
:root { --sable: #f0e8de; }

/* Plus d'air entre le menu et « Le geste juste. » */
.hero { padding-top: clamp(28px, 4vw, 60px); }

/* --- Sections séparées par des bandes de couleur sur toute la largeur --- */
.hero, .s1, .s2, .s3, .bloc, .panneau, .page-tete, .simple { padding-bottom: var(--esp); }
.s1, .s2, .s3, .bloc, .panneau { padding-top: var(--esp); margin-top: 0; }
.s2, .panneau {
  width: 100%;
  max-width: calc(var(--largeur) + 2 * var(--pad));
  padding-left: var(--pad);
  padding-right: var(--pad);
  border-radius: 0;
}
@media (max-width: 1099px) { .s2, .panneau { max-width: calc(var(--col) + 2 * var(--pad)); } }
.bande-ivoire, .bande-sable, .panneau--prune { box-shadow: 0 0 0 100vmax var(--fond-bande); clip-path: inset(0 -100vmax); background: var(--fond-bande); }
.panneau--prune { --fond-bande: var(--prune); }
#planche, #questions, #autres, .page-tete, .hero { --fond-bande: var(--ivoire); }
#formation, #journee, #resultats, #signature, [data-page="formations"] #questions { --fond-bande: var(--sable); }
#formation, #journee, #resultats, #signature, [data-page="formations"] #questions { box-shadow: 0 0 0 100vmax var(--sable); clip-path: inset(0 -100vmax); background: var(--sable); }
#planche { background: var(--ivoire); }
/* Sur une bande sable, les cartes claires passent en ivoire pour rester visibles */
#journee .carte-rose, #resultats .carte-rose, #signature .carte-rose, [data-page="formations"] #questions .qa { background: var(--ivoire); }
#journee .carte-rose .pastille-etat { background: var(--sable); }
.pied { margin-top: 0; padding-top: 8px; }
.autres-ligne { margin: 0 auto; padding-top: var(--gi); padding-bottom: var(--gi); }

/* --- La planche refaite --- */
.titre-s2 { grid-column: 1 / 13; grid-row: 1; font-size: clamp(36px, 4.6vw, 66px); max-width: 15em; }
.s2-macro { grid-column: 1 / 7; grid-row: 2; }
.reperes { grid-column: 7 / 13; grid-row: 2; align-self: center; }
.reperes li { flex: none; padding: 18px 0; align-items: start; }
.reperes .num { margin-top: 1px; }
.s2-phrase { grid-column: 2 / 12; grid-row: 3; justify-self: center; text-align: center; max-width: 30em; font-size: clamp(19px, 1.7vw, 24px); margin-top: 8px; }
.point { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 13px; box-shadow: 0 0 0 4px rgba(250, 247, 242, .35), 0 4px 12px rgba(42, 34, 29, .22); }
@media (max-width: 1099px) {
  .s2-phrase { align-self: center; text-align: center; }
}
@media (max-width: 699px) {
  .point { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; }
}

/* --- Formulaire : E-mail, Téléphone, Instagram sur une seule ligne, mêmes largeurs --- */
.choix-contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.choix-contact label { justify-content: center; padding: 11px 6px; white-space: nowrap; text-align: center; }
@media (max-width: 699px) { .choix-contact label { font-size: 14px; padding: 10px 4px; } }
/* « Et ensuite ? » sans photo */
.ensuite-bloc { grid-template-columns: 1fr; }

/* --- Page formations --- */
.ancres { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 8px; }
.ancres a { justify-content: center; white-space: nowrap; }
@media (max-width: 699px) {
  .ancres { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .ancres a { font-size: 13px; padding: 9px 4px; }
}
.sig-citation { align-items: center; text-align: center; }
.sig-citation blockquote p { text-wrap: balance; }
.debutantes { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-top: var(--gi); }
.debutantes__q { font-weight: 700; color: var(--encre); }
/* Très petits écrans (320 px) : le menu tient sur une ligne */
@media (max-width: 359px) { .nav { gap: 12px; font-size: 13px; } }
/* Planche : la photo est agrandie de 30 % autour de l'ongle du milieu, les repères s'espacent d'autant */
.s2-macro .media { transform: scale(1.3); transform-origin: 52% 55%; object-position: 50% 100%; }
/* Boutons du haut de la page formations : toujours sur une ligne, chacun à sa taille */
@media (max-width: 699px) {
  .ancres { grid-template-columns: repeat(3, auto); width: auto; gap: 6px; }
  .ancres a { font-size: 12.5px; padding: 8px 11px; }
}

/* ==========================================================
   PLANCHE EN CARTES (23/10 soir) : même langage que les autres
   sections. Ordinateur : carte beige à gauche, photo à droite,
   même hauteur. Téléphone et tablette : photo puis carte.
   La photo garde son format 4:5 d'origine (pas de recadrage),
   donc les repères restent sur l'ongle à toutes les tailles.
   ========================================================== */
#planche.s2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--g); align-items: stretch; }
#planche .s2-carte {
  grid-column: 1 / 8; grid-row: 1;
  padding: var(--in);
  display: flex; flex-direction: column; justify-content: center; gap: var(--gi);
  text-align: left;
}
#planche .s2-macro { grid-column: 8 / 13; grid-row: 1; aspect-ratio: 4 / 5; align-self: center; width: 100%; }
#planche .s2-macro .media { object-fit: cover; object-position: 50% 50%; transform: scale(1.35); transform-origin: 53% 64%; }
#planche .titre-s2 { grid-column: auto; grid-row: auto; max-width: none; font-size: clamp(32px, 3.3vw, 48px); line-height: 1; margin: 0; }
#planche .reperes { grid-column: auto; grid-row: auto; align-self: stretch; border-bottom: 1px solid var(--filet); }
#planche .reperes li { padding: 12px 0; align-items: center; }
#planche .reperes strong { font-size: clamp(17px, 1.35vw, 19px); }
#planche .reperes .desc { font-size: clamp(15px, 1.1vw, 16px); }
#planche .s2-pied { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; margin-top: 4px; }
#planche .s2-phrase { grid-column: auto; grid-row: auto; margin: 0; max-width: 28em; font-size: clamp(17px, 1.4vw, 20px); text-align: center; }
#planche .s2-bouton { grid-column: auto; grid-row: auto; margin: 0; }
#planche .point { width: 32px; height: 32px; margin: -16px 0 0 -16px; font-size: 14px; }
@media (max-width: 1099px) {
  #planche.s2 { display: flex; flex-direction: column; gap: var(--g); }
  #planche .s2-macro { order: 1; }
  #planche .s2-carte { order: 2; }
}
@media (max-width: 699px) {
  #planche .point { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 13px; }
}
/* Planche : ordre titre, légende, phrase et bouton ; sur ordinateur la photo prend exactement la hauteur de la carte */
#planche .titre-s2 { order: 1; }
#planche .reperes { order: 2; }
#planche .s2-pied { order: 3; }
@media (min-width: 1100px) {
  #planche .s2-macro { aspect-ratio: auto; align-self: stretch; height: auto; min-height: 0; }
  #planche .reperes li { padding: 11px 0; }
}

/* ==========================================================
   SECTION « JULIETTE PROPOSE AUSSI » (accueil, 23/10)
   ========================================================== */
#autres { --fond-bande: var(--ivoire); }
.autres-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g); }
.autre { padding: var(--in); display: flex; flex-direction: column; gap: 12px; }
.autre__etiquette { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--ivoire); color: var(--prune); font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.autre__nom { margin: 6px 0 0; font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: var(--encre); text-wrap: balance; }
.autre__texte { font-size: 16.5px; line-height: 1.5; color: var(--encre-douce); }
.autre__lien { margin-top: auto; padding-top: 10px; font-size: 16px; }
.autres-debut { margin-top: var(--gi); text-align: center; font-size: 16px; line-height: 1.6; color: var(--encre-douce); }
.autres-debut__q { font-weight: 700; color: var(--encre); }
/* Questions : bande sable sur l'accueil aussi, cartes claires */
#questions { box-shadow: 0 0 0 100vmax var(--sable); clip-path: inset(0 -100vmax); background: var(--sable); }
#questions .qa { background: var(--ivoire); }
@media (max-width: 1099px) {
  .autres-cartes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .autre { padding: 22px 18px; }
  .autre__nom { font-size: 22px; }
  .autre__texte { font-size: 15px; }
}
@media (max-width: 699px) {
  .autres-cartes { grid-template-columns: 1fr; }
  .autre { padding: 22px; }
  .autre__nom { font-size: 24px; }
  .autre__texte { font-size: 16px; }
}
/* « Vous savez déjà poser. » puis « Ici, on affine le geste. » : deux lignes, jamais coupées */
.titre-s1 { text-wrap: wrap; }
.titre-s1 .titre-debut, .titre-s1 .titre-suite { display: block; white-space: nowrap; }
@media (max-width: 699px) { .titre-s1 { font-size: min(38px, 9.6vw); } }
/* Titre du jupon en deux couleurs, comme les autres titres */
#planche .titre-s2 { color: var(--encre); }
#planche .titre-s2 .titre-debut, #planche .titre-s2 .accent { display: block; }
#planche .titre-s2 .accent { color: var(--prune); }
/* La taille du titre suit la largeur de la carte : chaque phrase tient toujours sur une ligne */
.s1-carte { container-type: inline-size; }
.titre-s1, .titre-s1 .titre-debut, .titre-s1 .titre-suite { font-size: min(66px, 9.6cqi); }
@media (max-width: 699px) { .titre-s1, .titre-s1 .titre-debut, .titre-s1 .titre-suite { font-size: min(40px, 9.6cqi); } }
/* « Le bon geste. » : plus court que l'ancien titre, la taille est recalée pour remplir la même largeur */
.hero-titre { font-size: clamp(76px, calc((min(100vw, 1360px) - 2 * var(--pad)) / 5.85), 230px); }
@media (max-width: 1099px) { .hero-titre { font-size: calc((min(100vw, var(--col) + 2 * var(--pad)) - 2 * var(--pad)) / 5.85); } }
@media (max-width: 699px) { .hero-titre { font-size: 27vw; } }

/* Quatre formations : jamais de carte seule sur sa ligne */
.autres-cartes, .cartes-f { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.carte-f__lien { align-self: flex-start; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 700; color: var(--prune); text-decoration: underline; text-underline-offset: 4px; }
.carte-f__corps { flex: 1; }
@media (max-width: 1099px) {
  .autres-cartes, .cartes-f { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .autres-cartes, .cartes-f { grid-template-columns: 1fr; }
  .carte-f__lien { padding-top: 2px; font-size: 14.5px; }
}

/* Spécialités de Juliette (section Juliette) */
.specialites { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; border-top: 1px solid rgba(250, 247, 242, .22); }
.specialites__titre { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(250, 247, 242, .75); }
.specialites__liste { justify-content: center; margin-top: 0; gap: 8px; }
.s3-carte .specialites__liste li { background: rgba(250, 247, 242, .14); color: var(--ivoire); border: 1px solid rgba(250, 247, 242, .35); padding: 9px 15px; font-size: 14.5px; opacity: 1; transform: none; }
@media (min-width: 1100px) { .autre { padding: 28px; } }
.autre__lien { white-space: nowrap; font-size: 15px; }

/* « Le bon geste. » plus serré sur téléphone */
@media (max-width: 699px) {
  .hero-titre { line-height: .84; letter-spacing: -.066em; padding-bottom: .1em; }
}

/* Cinq autres formations : quatre en perfectionnement, puis les Fondamentaux en bande large */
.autre--large { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; column-gap: clamp(20px, 2.6vw, 40px); row-gap: 8px; }
.autre--large .autre__etiquette { grid-column: 1; grid-row: 1; }
.autre--large .autre__nom { grid-column: 2; grid-row: 1; margin: 0; }
.autre--large .autre__texte { grid-column: 3; grid-row: 1; }
.autre--large .autre__lien { grid-column: 4; grid-row: 1; margin: 0; padding: 0; }
.carte-f--large { grid-column: 1 / -1; }
.carte-f--large .carte-f__bloc { flex-direction: row; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
.carte-f--large .carte-f__photo { flex: none; width: clamp(160px, 22%, 280px); aspect-ratio: 4 / 3; }
.carte-f--large .carte-f__corps { padding: 0 8px 0 0; }
@media (max-width: 1099px) {
  .autre--large { grid-template-columns: minmax(0, 1fr) auto; }
  .autre--large .autre__etiquette { grid-column: 1; grid-row: 1; }
  .autre--large .autre__nom { grid-column: 1; grid-row: 2; }
  .autre--large .autre__texte { grid-column: 1; grid-row: 3; }
  .autre--large .autre__lien { grid-column: 2; grid-row: 1 / 4; align-self: center; }
}
@media (max-width: 699px) {
  .autre--large { display: flex; flex-direction: column; align-items: stretch; }
  .autre--large .autre__etiquette { align-self: flex-start; }
  .autre--large .autre__lien { margin-top: auto; padding-top: 10px; }
  .carte-f--large .carte-f__photo { width: 96px; aspect-ratio: 1; }
}
/* Corrections après relecture */
.autre--large .autre__etiquette { justify-self: start; }
.autre--large .autre__lien { justify-self: end; }
@media (max-width: 699px) { .autre--large .autre__lien { align-self: flex-start; } }
.carte-f .carte-f__lien { display: inline; width: auto; padding: 6px 0 0; background: none; border-radius: 0; text-align: left; align-self: flex-start; color: var(--prune); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.carte-f .carte-f__lien:hover { background: none; }

/* ==========================================================
   PAGE UNIQUE « VITRINE DE L'ACADÉMIE » (23/10 soir)
   ========================================================== */
.hero-sous { font-size: clamp(15px, 1.15vw, 17px); font-weight: 400; line-height: 1.5; color: var(--encre-douce); max-width: 24em; }
.s1-kicker { font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(250, 247, 242, .7); margin-bottom: -6px; }

/* La formation phare */
.phare { margin-bottom: var(--g); padding: var(--in); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gi) clamp(28px, 4vw, 64px); align-items: center; }
.phare__texte { display: flex; flex-direction: column; gap: 12px; }
.phare__etiquette { align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: var(--ivoire); color: var(--prune); font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.phare__nom { margin: 4px 0 0; font-size: clamp(40px, 4.6vw, 66px); font-weight: 800; line-height: .95; letter-spacing: -.05em; color: var(--ivoire); }
.phare__sous { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; color: rgba(250, 247, 242, .8); }
.phare__citation { margin: 10px 0 0; }
.phare__citation p { font-size: clamp(21px, 1.9vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; color: var(--ivoire); text-wrap: balance; }
.phare__citation footer { margin-top: 8px; font-size: 14px; font-weight: 600; color: rgba(250, 247, 242, .7); }
.phare__actions { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.phare__faits { justify-content: center; margin: 0; }
.phare__faits li { background: rgba(250, 247, 242, .14); color: var(--ivoire); border: 1px solid rgba(250, 247, 242, .35); opacity: 1; transform: none; }
.phare__bouton { width: auto; background: var(--ivoire); color: var(--prune); }
.phare__bouton:hover { background: #fff; }
.phare__lien { color: var(--ivoire); }
.phare__lien:hover .fleche { background: var(--ivoire); color: var(--prune); border-color: var(--ivoire); }
@media (max-width: 1099px) { .phare { grid-template-columns: 1fr; } .phare__actions { align-items: center; } }
@media (max-width: 699px) { .phare__bouton { width: 100%; } }

/* Bandes de couleur dans le nouvel ordre : crème, sable, crème, sable… */
body[data-page="accueil"] #formations,
body[data-page="accueil"] #planche,
body[data-page="accueil"] #juliette,
body[data-page="accueil"] #questions { background: var(--sable); box-shadow: 0 0 0 100vmax var(--sable); clip-path: inset(0 -100vmax); }
body[data-page="accueil"] #signature,
body[data-page="accueil"] #journee,
body[data-page="accueil"] #resultats { background: var(--ivoire); box-shadow: 0 0 0 100vmax var(--ivoire); clip-path: inset(0 -100vmax); }
/* Cartes claires : ivoire sur bande sable, beige sur bande crème */
body[data-page="accueil"] #formations .carte-rose,
body[data-page="accueil"] #planche .carte-rose,
body[data-page="accueil"] #questions .qa { background: var(--ivoire); }
body[data-page="accueil"] #formations .autre__etiquette { background: var(--sable); }
body[data-page="accueil"] #journee .carte-rose,
body[data-page="accueil"] #resultats .carte-rose { background: var(--rose); }
body[data-page="accueil"] #journee .carte-rose .pastille-etat { background: var(--ivoire); }

/* Fondamentaux juste sous la Signature */
.autres-cartes--debut { margin-bottom: var(--g); }
/* Photo de couverture en format paysage : cadrage centré sur les ongles */
.hero-video .media { object-position: 50% 50%; }
@media (max-width: 699px) { .hero-video { aspect-ratio: 4 / 3; } }
/* Spécialités : 10 pastilles bien réparties */
.s3-carte .specialites__liste li { font-size: 14px; padding: 8px 13px; }
/* Couverture : la photo paysage prend toute la place à droite de la carte */
@media (min-width: 1100px) { .hero-video { grid-column: 5 / 13; } }

/* ==========================================================
   CRIBLE DU 26/10 : corrections par familles
   ========================================================== */
/* Typographie : pas de mot seul en fin de paragraphe, de légende ou de carte */
p, li, dd, dt, label, summary, .desc, .autre__texte, .res-insta__lien span, .champ__label, .form__legal, blockquote p { text-wrap: pretty; }
/* Zones à toucher d'au moins 40 px sur téléphone */
@media (max-width: 699px) {
  .tete .logo, .pied .logo { padding: 9px 0; }
  .nav a { min-height: 42px; display: inline-flex; align-items: center; }
  .simple__actions .lien, .simple__actions .lien-action { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Barre du bas : opaque */
.barre-mobile { background: var(--ivoire); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ==========================================================
   CRIBLE DU 26/10 : corrections après relecture des captures
   ========================================================== */
/* Pages simples : même air en haut que la couverture, colonne calée sur le titre */
.simple { padding-top: clamp(28px, 4vw, 60px); }
.legal { margin-left: 0; margin-right: auto; }
.legal p { text-wrap: wrap; }
/* Pied de page en sable sur toute la largeur (jamais le même fond que la section du dessus) */
.pied { background: var(--sable); box-shadow: 0 0 0 100vmax var(--sable); clip-path: inset(0 -100vmax); padding-bottom: 32px; }
.pied-haut { border-top: 0; padding-top: 36px; }
@media (max-width: 699px) { .pied-liens { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 10px 24px; } }
/* Contrastes suffisants sur le taupe */
.titre-s1 { color: rgba(236, 227, 216, .82); }
.s1-kicker { color: rgba(250, 247, 242, .88); }
.phare__citation footer { color: rgba(250, 247, 242, .88); }
/* Cartes de formation : pastille et lien centrés (la règle : boutons et pastilles au centre) */
.autre:not(.autre--large) .autre__etiquette { align-self: center; }
.autre:not(.autre--large) .autre__lien { align-self: center; }
/* Pastilles réparties en rangées égales, jamais une seule sur la dernière rangée */
.specialites__liste { display: block; text-align: center; text-wrap: balance; }
.specialites__liste li { display: inline-block; margin: 4px 3px; }
.phare__faits li { font-size: 15px; padding: 10px 15px; }
@media (max-width: 699px) {
  .phare__faits { display: block; text-align: center; text-wrap: balance; }
  .phare__faits li { display: inline; background: none; border: 0; padding: 0; font-size: 15px; font-weight: 700; color: var(--ivoire); }
  .phare__faits li + li::before { content: " · "; }
}
/* Questions : la question occupe toute la largeur jusqu'au signe + */
.qa summary { text-wrap: wrap; }
@media (max-width: 699px) { .qa summary { padding-right: 58px; } }
/* Titre de la demande : un groupe de sens par couleur */
.titre-demande .titre-debut, .titre-demande .accent { display: block; text-wrap: balance; }
.demande { align-items: start; }
/* Juliette : titre aligné sur la carte, bouton détaché du bloc */
.titre-s3 { margin-left: 0; }
.s3-bouton { margin-top: 24px; }
/* La journée : le tableau commence au même niveau que la carte du 4 */
.journee-fiche { align-self: start; padding-top: 0; }
/* Galerie : deux photos par rangée, la carte Instagram de même taille que la photo voisine */
@media (min-width: 700px) {
  .grille-res > .res, .grille-res > .res--large, .grille-res > .res-insta { grid-column: span 6; grid-row: span 2; }
}
/* Couverture sur téléphone : les trois ongles entiers */
@media (max-width: 699px) { .hero-video { aspect-ratio: 16 / 9; } .hero-video .media { object-position: 47% 50%; } }
/* Titre de la demande : « Recevoir le programme » puis « et la prochaine date. », une ligne chacun à toutes les tailles */
.titre-demande { font-size: calc((min(100vw, var(--col) + 2 * var(--pad)) - 2 * var(--pad) - 2 * var(--in)) / 10.6); }
.titre-demande .titre-debut, .titre-demande .accent { white-space: nowrap; }
@media (min-width: 1100px) {
  .demande-intro { grid-column: 1 / 7; }
  .demande-form { grid-column: 7 / 13; }
  .titre-demande { font-size: min(56px, calc(((min(100vw, 1360px) - 2 * var(--pad) - 2 * var(--in)) - clamp(28px, 3.4vw, 52px)) / 2 / 10.6)); }
}

/* ==========================================================
   CRIBLE, 2e PASSE DU 26/10 (relecture iPhone et ordinateur)
   ========================================================== */
/* Quatre formations : étiquettes, titres, textes et liens sur les mêmes lignes d'une carte à l'autre,
   même quand un titre tient sur deux lignes (« Manucure russe et gainage ») */
@media (min-width: 700px) {
  .autres-cartes:not(.autres-cartes--debut) > .autre { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; align-content: start; }
  .autres-cartes:not(.autres-cartes--debut) > .autre .autre__nom { align-self: start; }
  .autres-cartes:not(.autres-cartes--debut) > .autre .autre__lien { align-self: end; justify-self: center; margin-top: 0; }
  .autres-cartes:not(.autres-cartes--debut) > .autre .autre__etiquette { justify-self: center; }
}
/* Téléphone : pastilles et liens centrés aussi sur la Signature et les Fondamentaux */
@media (max-width: 699px) {
  .phare__etiquette, .autre--large .autre__etiquette { align-self: center; }
  .autre--large .autre__lien { align-self: center; }
  /* Les trois infos de la Signature en pastilles : « 1 journée » et « 4 élèves maximum », puis « Un lundi par mois » */
  .phare__faits { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; text-align: center; }
  .phare__faits li { display: inline-block; white-space: nowrap; background: rgba(250, 247, 242, .14); border: 1px solid rgba(250, 247, 242, .35); padding: 8px 13px; font-size: 14px; }
  .phare__faits li + li::before { content: none; }
  /* Titre de la demande : la jambe du p ne touche plus le point du i */
  .titre-demande { line-height: 1; }
  /* « Page introuvable. » : le g ne touche plus le t */
  .titre-page--long { line-height: .98; }
  /* Carte Instagram de la galerie : texte sur deux lignes, flèche dessous, tout sur le même axe */
  .res-insta__lien { flex-direction: column; gap: 10px; text-align: center; }
  .res-insta__lien > span:first-child { text-wrap: balance; }
  /* Questions : même marge des deux côtés, un peu d'air avant le + */
  .qa summary { padding-right: 66px; }
  .qa__signe { right: 18px; }
}
/* Spécialités : rangées remplies de gauche à droite puis centrées */
.specialites__liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; }
.specialites__liste li { margin: 0; }
/* La journée : le dernier filet du tableau tombe au bas de la carte du 4 */
@media (min-width: 1100px) {
  .journee-fiche { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
}
/* Mentions légales sur ordinateur : deux colonnes de cartes, toute la largeur */
/* (identité du site à gauche, vos données à droite ; chaque carte garde sa hauteur, pas de grand vide) */
.legal-col { display: contents; }
@media (min-width: 1100px) {
  .legal { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .legal-col { display: flex; flex-direction: column; gap: 12px; }
}
/* Spécialités sur ordinateur : rangées de 4, 3 et 3 */
@media (min-width: 700px) { .specialites__liste { max-width: 520px; margin-left: auto; margin-right: auto; } }
/* La journée : les lignes du tableau se répartissent sur la hauteur de la carte du 4 */
@media (min-width: 1100px) {
  .journee-fiche { display: flex; flex-direction: column; }
  .journee-fiche .fiche { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
}
/* Étapes « Et ensuite ? » : lignes de longueur égale */
.etape p, .ensuite li > span:last-child { text-wrap: balance; }

/* ==========================================================
   RETOUCHES DU 26/10 APRÈS-MIDI (retours de Gauthier)
   ========================================================== */
/* Toutes les bulles à gauche, comme les titres et les textes (les boutons restent au centre) */
.specialites__liste { justify-content: flex-start; }
@media (min-width: 700px) { .specialites__liste { max-width: none; margin-left: 0; margin-right: 0; } }
.phare__etiquette, .autre__etiquette, .autre:not(.autre--large) .autre__etiquette { align-self: flex-start; }
@media (min-width: 700px) {
  .autres-cartes:not(.autres-cartes--debut) > .autre .autre__etiquette { justify-self: start; }
}
@media (max-width: 699px) {
  .phare__etiquette, .autre--large .autre__etiquette { align-self: flex-start; }
}
/* Carte Signature : à gauche ce qu'on lit (étiquette, nom, phrase, infos, citation), à droite les deux actions seulement */
.phare__faits { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; margin: 6px 0 4px; text-align: left; }
.phare__faits li { display: inline-block; white-space: nowrap; padding: 8px 14px; font-size: 14.5px; font-weight: 700; background: rgba(250, 247, 242, .14); border: 1px solid rgba(250, 247, 242, .35); color: var(--ivoire); }
.phare__faits li + li::before { content: none; }
.phare__actions { gap: 18px; }
/* Même marge intérieure pour la carte Signature, la bande Fondamentaux et les quatre cartes : les textes démarrent sur le même bord */
@media (min-width: 1100px) {
  :root { --pc: clamp(28px, 2.6vw, 44px); }
  .phare, .autre, .autre--large { padding: var(--pc); }
  .phare { grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 340px); column-gap: clamp(28px, 4vw, 64px); align-items: center; }
  .phare__bouton { width: 100%; }
  /* Fondamentaux : même grille que la carte Signature, le lien tombe sous ses actions */
  .autre--large { display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 26%, 340px); column-gap: clamp(28px, 4vw, 64px); row-gap: 10px; align-items: start; }
  .autre--large .autre__etiquette { grid-column: 1; grid-row: 1; justify-self: start; }
  .autre--large .autre__nom { grid-column: 1; grid-row: 2; margin: 0; }
  .autre--large .autre__texte { grid-column: 1; grid-row: 3; max-width: 46ch; }
  .autre--large .autre__lien { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; margin: 0; padding: 0; }
}
/* « Juliette / Santa Cruz. » : le point reste collé à « Cruz », « Santa Cruz. » tient toujours sur sa ligne */
@media (min-width: 1100px) { .titre-s3 { font-size: clamp(60px, 10vw, 140px); } }
@media (max-width: 699px) { .titre-s3 { font-size: min(17.5vw, calc((100vw - 2 * var(--pad)) / 5.3)); } }
/* Quatre cartes : titres un peu plus petits, deux lignes au plus */
@media (min-width: 1100px) {
  :root { --pc: clamp(28px, 2.2vw, 36px); }
  .autres-cartes:not(.autres-cartes--debut) .autre__nom { font-size: clamp(22px, 1.9vw, 28px); }
}
/* En attendant la police (1,5 s au plus) : rien n'est montré, donc rien ne saute */
.attente body { visibility: hidden; }
/* Tablette : même marge intérieure pour la carte Signature, la bande et les cartes */
@media (min-width: 700px) and (max-width: 1099px) { .phare, .autre, .autre--large { padding: clamp(22px, 3vw, 28px); } }
/* Cinq cartes sous les Fondamentaux : trois techniques sur la 1re rangée, coaching et équipe sur la 2e (jamais de carte seule) */
@media (min-width: 1100px) {
  .autres-cartes:not(.autres-cartes--debut) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .autres-cartes:not(.autres-cartes--debut) > .autre { grid-column: span 2; }
  .autres-cartes:not(.autres-cartes--debut) > .autre:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .autres-cartes:not(.autres-cartes--debut) > .autre:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ==========================================================
   PHOTOS CHOISIES PAR JULIETTE (26/10)
   ========================================================== */
/* Couverture : la photo principale, cadrée sur les ongles à pierres */
.hero-video .media { object-position: 50% 64%; }
@media (max-width: 699px) { .hero-video { aspect-ratio: 4 / 3; } .hero-video .media { object-position: 50% 68%; } }
/* Jupon : l'image et ses repères bougent ensemble (repères en % de la photo, recadrage calculé sur la taille du cadre) */
#planche .s2-macro { container-type: size; position: relative; overflow: hidden; }
#planche .s2-cadre {
  --r: .5751; --z: 1.3; --fx: .49; --fy: .44;
  --w: calc(max(100cqw, 100cqh * var(--r)) * var(--z));
  --h: calc(var(--w) / var(--r));
  position: absolute; width: var(--w); height: var(--h);
  left: clamp(calc(100cqw - var(--w)), calc(50cqw - var(--fx) * var(--w)), 0px);
  top: clamp(calc(100cqh - var(--h)), calc(50cqh - var(--fy) * var(--h)), 0px);
}
#planche .s2-cadre .media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: none; }
/* Galerie : cinq poses et Instagram, en rangées de 3 (ordinateur) ou de 2, cadres en hauteur */
.grille-res { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; }
.grille-res > .res, .grille-res > .res--large, .grille-res > .res-insta { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; min-height: 0; }
@media (max-width: 1099px) { .grille-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Un mot de titre (avec son point final) ne se coupe jamais en deux lignes */
.mot { white-space: nowrap; }
/* Repères du jupon : un point posé exactement sur la zone, un trait fin, le numéro à côté de l'ongle (rien n'est caché) */
#planche .s2-cadre .point-dot { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ivoire); box-shadow: 0 0 0 2px var(--prune), 0 1px 4px rgba(0, 0, 0, .35); z-index: 2; }
#planche .s2-cadre .trait { position: absolute; left: var(--x); top: var(--y); width: var(--l); height: 2px; margin-top: -1px; background: var(--ivoire); transform-origin: 0 50%; transform: rotate(var(--a)); box-shadow: 0 0 3px rgba(0, 0, 0, .25); z-index: 1; }
#planche .s2-cadre .point { left: var(--x); top: var(--y); width: 28px; height: 28px; margin: -14px 0 0 -14px; background: var(--prune); color: var(--ivoire); font-size: 13px; font-weight: 700; box-shadow: 0 0 0 2px var(--ivoire), 0 4px 12px rgba(42, 34, 29, .3); z-index: 3; }
@media (max-width: 699px) {
  #planche .s2-cadre .point { width: 26px; height: 26px; margin: -13px 0 0 -13px; font-size: 13px; }
  #planche .s2-cadre .point-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
}
.js .scene .point-dot, .js .scene .trait { opacity: 0; }
.js .scene.vu .point-dot, .js .scene.vu .trait { opacity: 1; transition: opacity .45s ease calc(var(--p, 0) * 110ms + 380ms); }
@media (prefers-reduced-motion: reduce) { .js .scene .point-dot, .js .scene .trait { opacity: 1 !important; transition: none !important; } }
/* Ligne « Vos informations… Données personnelles » centrée sous le bouton (petite ligne d'info) */
.form__legal { text-align: center; text-wrap: balance; margin-left: auto; margin-right: auto; }

/* ==========================================================
   CENTRAGE DEMANDÉ PAR GAUTHIER (26/10, téléphone et tablette)
   ========================================================== */
@media (max-width: 1099px) {
  /* Demande : titre, phrase, « Et ensuite ? » et ligne Instagram au centre ; chaque étape = numéro puis texte centré */
  .demande-intro { align-items: center; text-align: center; }
  .demande-intro .titre-section, .titre-demande, .demande-intro .chapeau, .demande-intro .insta { text-align: center; margin-left: auto; margin-right: auto; }
  .titre-demande .titre-debut, .titre-demande .accent { text-align: center; }
  .ensuite-bloc { justify-items: center; justify-content: center; margin-left: auto; margin-right: auto; align-self: center; justify-self: center; }
  .demande-intro .insta, .demande-intro .chapeau { align-self: center; justify-self: center; }
  .ensuite, .ensuite h3 { text-align: center; }
  .ensuite li { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
  .ensuite li > span:last-child { text-wrap: balance; }
  /* La journée : chaque ligne de la fiche au centre (intitulé puis valeur) */
  .journee-fiche .fiche-ligne { grid-template-columns: 1fr; gap: 2px; text-align: center; justify-items: center; }
  .journee-fiche .fiche-ligne dd { text-wrap: balance; }
}
@media (max-width: 1099px) { .journee-fiche { align-self: center; justify-self: center; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; } }