/* ============================================================================
   theme.css — variation G « Pilules et rail » · Kin & Masso · 18 septembre 2026
   YannCode Solutions

   L'idée : la page a une colonne vertébrale. Un rail vertical corail descend
   dans la marge gauche du conteneur ; chaque section porte une pastille ronde
   numérotée (01, 02, 03…). Les listes deviennent des nuages de pilules posés
   sur un aplat « ciel » (le bleu du logo, très pâle). Les blocs photo/texte
   alternent gauche-droite le long du rail.

   Le rail et la numérotation sont FAITS EN CSS (compteur + pseudo-éléments) :
   aucun fragment n'a à les porter, toutes les pages en héritent.
   ponytail: un compteur CSS plutôt que des numéros écrits à la main dans
   13 pages de HTML généré.

   Aucun vert, aucun beige, aucun sépia, aucune photo en noir et blanc, aucun
   coin arrondi sur une photo. Police locale Geist (jamais Google Fonts).
   ============================================================================ */

@font-face {
  font-family: "Geist";
  src: url("../../commun/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fond: #ffffff;
  --texte: #22262b;

  --corail: #eb5d3e;        /* le « kin » du logo — rail, pastilles, aplats */
  --corail-txt: #c03f22;    /* même famille, lisible en texte (5,4:1) */
  --bleu: #77b0cd;          /* le « masso » du logo — bord des pilules */
  --bleu-txt: #2e6e8e;      /* lisible en texte (4,9:1) */
  --ciel: #eaf3f8;          /* bleu du logo très pâle — aplat des nuages */

  --accent: var(--corail-txt);
  --accent-2: var(--bleu-txt);
  --pale: var(--ciel);

  --bord: rgba(34, 38, 43, .14);
  --rayon: .35rem;
  --largeur: 70rem;
  --rail-x: 1.6rem;         /* centre du rail, depuis le bord du conteneur */
  --rail-pas: 4.6rem;       /* décalage du contenu pour laisser passer le rail */

  --pile: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pile-titre: var(--pile);
}

h1, h2, h3 { letter-spacing: -.015em; }
h2 { font-weight: 700; font-size: clamp(1.45rem, 3vw, 1.95rem); }
img { border-radius: 0; }           /* jamais de photo aux coins arrondis */
figure img { border-radius: 0; }

/* ---------- Entête ---------- */
.entete { border-bottom: 2px solid var(--corail); }
.nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--corail-txt); }
.nav__sous > ul { border: 1px solid var(--bleu); box-shadow: 0 12px 26px rgba(46, 110, 142, .18); }
.nav__bouton { border-color: var(--corail); color: var(--corail-txt); }

/* ---------- 1. LE RAIL ---------- */
main { counter-reset: rail; }
main > .section { counter-increment: rail; position: relative; }
.section + .section { border-top: 0; }   /* le rail remplace le filet */

/* flow-root : le ::after de base.css servait de clearfix aux figures flottantes,
   or le rail se l'approprie pour la pastille. ponytail: une ligne remplace le hack. */
main > .section > .conteneur { position: relative; padding-left: var(--rail-pas); display: flow-root; }

/* la ligne : elle déborde en haut et en bas pour se souder à la suivante */
main > .section > .conteneur::before {
  content: "";
  position: absolute; left: calc(var(--rail-x) - 2px); top: -4rem; bottom: -4rem;
  width: 4px; background: var(--corail);
}
/* la pastille numérotée */
main > .section > .conteneur::after {
  content: counter(rail, decimal-leading-zero);
  position: absolute; left: 0; top: .05rem;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--corail); color: #fff;
  font-size: 1rem; font-weight: 700; letter-spacing: .04em;
}
main > .section:last-of-type > .conteneur::before { bottom: -1rem; }

/* sections hors numérotation (nuage posé sous le héros) */
main > .section.hors-rail { counter-increment: none; }
main > .section.hors-rail > .conteneur::after { content: none; }

/* pastille CREUSE : les deux soins qui n'existent pas encore */
main > #pressotherapie > .conteneur::after,
main > #abdomen > .conteneur::after {
  background: #fff; color: var(--corail-txt);
  box-shadow: inset 0 0 0 3px var(--corail);
}

/* la page 5 km est une réplique du Wix : pas de rail dessus */
.page-5km main > .section > .conteneur { padding-left: 0; }
.page-5km main > .section > .conteneur::before,
.page-5km main > .section > .conteneur::after { content: none; }
.page-5km .section + .section { border-top: 1px solid var(--bord); }

/* ---------- 2. Héros (accueil : titre à gauche, photo à droite) ---------- */
.hero--g { padding: 2.6rem 0 1.4rem; }
.hero--g .hero__grille {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.6rem; align-items: center;
}
.hero--g h1 { font-size: clamp(2.1rem, 5.4vw, 3.2rem); max-width: 14ch; }
.hero--g .hero__sous {
  margin-top: .8rem; font-size: 1.2rem; font-weight: 600; color: var(--bleu-txt);
}
.hero--g .hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: center 30%; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* héros des pages intérieures : bandeau titre, le rail démarre dessous */
.hero--bande { background: var(--ciel); padding: 2.6rem 0 2.2rem; }
.hero--bande h1 { max-width: 20ch; }
.hero--bande p { font-size: 1.2rem; margin-top: .6rem; color: var(--bleu-txt); max-width: 44rem; }
.hero--bande .hero__media { margin-top: 1.6rem; }
.hero--bande .hero__media img { width: 100%; max-height: 24rem; object-fit: cover; }

/* ---------- 3. Boutons ---------- */
.bouton { background: var(--corail); color: #fff; border-radius: 2rem; padding: .7rem 1.4rem; }
.bouton--creux {
  background: #fff; color: var(--bleu-txt);
  box-shadow: inset 0 0 0 2px var(--bleu);
}
.bouton--creux:hover { background: var(--ciel); filter: none; }
.bouton--f { background: #1877f2; }

/* ---------- 4. Nuage de pilules ---------- */
.ciel { background: var(--ciel); }
.ciel + .section, .section + .ciel { border-top: 0; }

.pilules {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .55rem .6rem; margin-top: 1.3rem;
  max-width: 52rem; margin-inline: auto;
}
.section .pilules li { padding-left: 0; margin-top: 0; }
.section .pilules li::before { content: none; }
.pilules li {
  background: #fff; color: var(--bleu-txt);
  border: 2px solid var(--bleu); border-radius: 2rem;
  padding: .32rem .95rem; font-size: .95rem; font-weight: 600; line-height: 1.35;
}
.pilules li.pilule--corail { color: var(--corail-txt); border-color: var(--corail); }
.nuage__intro { text-align: center; max-width: 42rem; margin-inline: auto; }

/* ---------- 5. Blocs alternés le long du rail ---------- */
.duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2.2rem;
  align-items: center; margin-top: 1.6rem;
}
.duo + .duo { margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--bord); }
.duo__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
/* sources verticales (2:3) : un cadre plus haut, sinon le sujet est coupé */
.duo__media--haut img { aspect-ratio: 4 / 5; }
.duo--inverse .duo__media { order: 2; }
.duo h3 { margin: 0 0 .5rem; font-size: 1.35rem; }
.duo p { font-size: 1.1rem; }
.duo__lien { display: inline-block; margin-top: .8rem; font-weight: 700; color: var(--corail-txt); }
.duo__aplat {
  display: grid; place-items: center; aspect-ratio: 16 / 10;
  background: var(--ciel); color: var(--bleu-txt);
  font-size: 1rem; font-weight: 700; text-align: center; padding: 1.2rem;
  box-shadow: inset 0 0 0 2px var(--bleu);
}
.num {
  display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--corail); color: #fff;
  font-size: .9rem; font-weight: 700; letter-spacing: .04em;
  margin-bottom: .6rem;
}
.num--creux { background: #fff; color: var(--corail-txt); box-shadow: inset 0 0 0 3px var(--corail); }

/* ---------- 6. Cartes, témoignages, tarifs, cadres ---------- */
.carte { background: #fff; border: 1px solid var(--bleu); border-radius: var(--rayon); }
.carte img { border-radius: 0; }
.carte__bouton { color: var(--corail-txt); }

.temoignage {
  background: #fff; border: 1px solid var(--bleu); border-left: 5px solid var(--bleu);
  border-radius: var(--rayon);
}
.temoignage cite { color: var(--bleu-txt); }

.tarifs th { color: var(--corail-txt); border-bottom-color: var(--corail); }

.cadre { background: var(--ciel); border: 2px dashed var(--bleu); }
.form__note { border-color: var(--bleu); color: var(--bleu-txt); }
.form__groupe input:focus, .form__groupe select:focus, .form__groupe textarea:focus {
  outline-color: var(--corail);
}

/* puces de liste : corail, mais rondes et discrètes */
.section ul li::before { background: var(--corail); }

/* ---------- 7. Pied de page ---------- */
.pied { background: var(--ciel); border-top: 4px solid var(--corail); }
.pied__liens a { color: var(--bleu-txt); }

/* ---------- 8. Mobile : rail plus fin, à gauche, plus d'alternance ---------- */
@media (max-width: 52rem) {
  :root { --rail-x: 1.05rem; --rail-pas: 3rem; }

  main > .section > .conteneur::before { width: 3px; left: calc(var(--rail-x) - 1.5px); }
  main > .section > .conteneur::after {
    width: 2.1rem; height: 2.1rem; font-size: .8rem; top: .25rem;
  }

  .hero--g .hero__grille { grid-template-columns: 1fr; }
  .hero--g .hero__media { order: -1; }
  .hero--g .hero__media img { aspect-ratio: 4 / 3; }
  .hero--g .hero__sous { font-size: 1.05rem; }
  .hero--bande p { font-size: 1.05rem; }

  .duo { grid-template-columns: 1fr; }
  .duo--inverse .duo__media { order: 0; }
  .duo p { font-size: 1rem; }

  .pilules { justify-content: flex-start; }
  .pilules li { font-size: .85rem; padding: .28rem .8rem; }   /* > plancher 0,8rem */
  .nuage__intro { text-align: left; }
}

/* == plancher desktop 1,1 rem (Fable, 18 sept. 2026) == */
@media (min-width: 52.01rem) {
  main > .section > .conteneur::after,
  .pilules li,
  .duo__aplat,
  .num { font-size: 1.1rem; }
}

/* Fable 18 sept. : le texte des boutons reste blanc malgré la couleur des liens de section */
.section .bouton, .section .bouton--f { color: #fff; }