/* ============================================================================
   theme.css — VARIATION E · « Épuré » · Kin & Masso (Isabelle Graillot)
   18 septembre 2026 · YannCode Solutions

   Le plus dépouillé des huit : blanc pur, anthracite, filets fins, grille
   stricte, beaucoup de vide. Aucune chaleur dans le décor — la chaleur vient
   des photos, qui restent EN COULEUR et à coins droits.

   Palette : blanc #FFFFFF · anthracite #22262B · bleu foncé du logo #2E6E8E
   (seul accent : liens, bouton, filet du héros) · gris très clair #EEEFF1
   (filets larges, fonds de tableau).
   Aucun vert, aucun beige, aucun sépia, aucun coin arrondi, aucune ombre.
   Polices SYSTÈME, graisse 300-400. Jamais Google Fonts.
   ponytail: pas de nouvelle variable quand base.css en a déjà une.
   ============================================================================ */

:root {
  --fond: #ffffff;
  --texte: #22262b;
  --accent: #2e6e8e;          /* bleu foncé du logo — 4,9:1 sur blanc */
  --accent-2: #2e6e8e;        /* même bleu : un SEUL accent dans cette variation */
  --pale: #eeeff1;            /* gris très clair — tableaux, fonds de bloc */

  --bord: #e2e4e7;            /* le filet fin, partout */
  --gris-texte: #5c636b;      /* notes et légendes (5,9:1 sur blanc) */
  --largeur: 66rem;
  --etroit: 34rem;            /* ≈ 60 caractères — la colonne de lecture */
  --rayon: 0;                 /* rien n'est arrondi, nulle part */
  --gouttiere: 1.5rem;
}

/* ---------- 1. Typographie : grande, légère, très espacée ---------- */
body { font-weight: 400; letter-spacing: .004em; }
h1, h2, h3, h4 { font-weight: 300; letter-spacing: -.008em; }
h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); line-height: 1.08; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
h4 { font-size: 1.15rem; font-weight: 400; }
strong { font-weight: 600; }

/* Surtitres : capitales très espacées, la seule « signature » du thème */
.surtitre {
  font-size: .8rem !important;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris-texte);
  margin: 0 0 1rem;
}

/* ---------- 2. Rythme : de l'air partout, un filet entre chaque section ---------- */
.section { padding: 5.5rem 0; }
.section + .section { border-top: 1px solid var(--bord); }
.section > .conteneur > h2 { margin-bottom: 1.8rem; font-weight: 300; }
.section h3 { margin: 2.2rem 0 .5rem; }

/* Colonne de lecture étroite sur les pages de texte */
#isabelle > .conteneur,
#diplomes > .conteneur,
#locaux > .conteneur,
#pour-qui > .conteneur,
#deroulement > .conteneur,
#suivi > .conteneur,
#pressotherapie > .conteneur,
#ecrire > .conteneur,
#telephone > .conteneur,
#adresse > .conteneur { width: min(100% - 2 * var(--gouttiere), var(--etroit)); }

/* Les deux sections qui portent la grille de tarifs : un peu plus large pour le tableau */
#coaching > .conteneur,
#abdomen > .conteneur { width: min(100% - 2 * var(--gouttiere), 44rem); }

/* ---------- 3. Puces fines : un trait, jamais un point ---------- */
.section ul li { padding-left: 1.6rem; }
.section ul li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: .9rem; height: 1px; border-radius: 0; background: var(--texte); opacity: .5;
}

/* ---------- 4. Liens et bouton unique ---------- */
.section a { color: var(--accent); text-decoration-thickness: 1px; }
.lien-suite { margin-top: 1rem; }
.lien-suite a {
  font-size: .95rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: .15rem;
}
.lien-suite a:hover { border-bottom-color: transparent; }

.bouton {
  border-radius: 0; background: var(--accent); color: #fff;
  font-weight: 400; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .95rem 1.8rem;
}
.bouton:hover { filter: none; background: #255a74; }
.bouton--f {
  background: none; color: var(--texte); border: 1px solid var(--bord);
}
.bouton--f:hover { background: none; border-color: var(--accent); color: var(--accent); }

/* ---------- 5. Entête : logo petit, nav légère ---------- */
.entete { border-bottom: 1px solid var(--bord); }
.entete__barre { min-height: 4.4rem; padding: .8rem 0; }
.entete__logo img { height: 2.2rem; }
.nav__liste { gap: .2rem 1.6rem; }
.nav__liste a {
  font-weight: 400; font-size: .82rem; letter-spacing: .07em; text-transform: uppercase;
}
.nav__liste a:hover, .nav__liste a[aria-current="page"] {
  color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent);
}
.nav__sous > ul { border-radius: 0; box-shadow: none; border: 1px solid var(--bord); }
.nav__sous > ul a { text-transform: none; letter-spacing: .02em; font-size: .95rem; }
.nav__bouton {
  border: 1px solid var(--bord); border-radius: 0; font-weight: 400;
  font-size: .82rem; letter-spacing: .13em; text-transform: uppercase;
}

/* ---------- 6. Héros de l'accueil : titre seul sur blanc, photo bornée dessous ---------- */
.hero--epure { text-align: center; padding: 6rem 0 0; }
.hero--epure h1 { max-width: none; margin-bottom: 1.4rem; }
.hero--epure .surtitre { margin-bottom: 2.2rem; }
.hero__filet {
  width: 4rem; height: 1px; background: var(--texte); opacity: .45;
  margin: 2.2rem auto; border: 0;
}
.hero__phrase {
  width: min(100%, 36rem); margin-inline: auto;
  font-size: 1.25rem; font-weight: 300; line-height: 1.55;
}
.hero__action { margin-top: 2.4rem; }
.hero__borne { width: min(100%, 60%); margin: 4.5rem auto 0; }
.hero__borne img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; }

/* Héros des pages intérieures : même logique, photo bornée et titre léger */
.hero__image { width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto; }
.hero__image img { max-height: 26rem; border-radius: 0; }
.hero__texte { padding: 3rem 0 2.4rem; text-align: center; }
.hero__texte p {
  font-size: 1.15rem; font-weight: 300; margin-inline: auto; max-width: 38rem;
}
.hero h1 { max-width: none; }

/* ---------- 7. Accueil · Services : trois colonnes, filets verticaux ---------- */
/* Colonnes STRICTEMENT égales : la grille déborde de 2rem de chaque côté pour que
   les photos extérieures s'alignent sur le conteneur malgré le padding interne. */
.trois {
  display: grid; gap: 0; margin: 2.4rem -2rem 0;
  grid-template-columns: repeat(3, 1fr);
}
.trois__bloc { padding: 0 2rem; display: flex; flex-direction: column; }
.trois__bloc .lien-suite { margin-top: auto; padding-top: 1.2rem; }
.trois__bloc + .trois__bloc { border-left: 1px solid var(--bord); }
.trois__photo { display: block; }
.trois__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; }
.trois__photo--aplat { display: block; width: 100%; aspect-ratio: 4 / 3; background: var(--pale); }
.trois__bloc h3 { margin: 1.3rem 0 .5rem; font-size: 1.2rem; }
.trois__bloc p { font-size: 1.05rem; color: var(--gris-texte); }

/* ---------- 8. Accueil · À propos : une phrase, rien d'autre ---------- */
.mot { width: min(100%, 44rem); }
.mot p { font-size: 1.3rem; font-weight: 300; line-height: 1.55; }

/* ---------- 9. Témoignages : une colonne étroite, citation en italique ---------- */
.temoignages {
  display: block; width: min(100%, 44rem); margin-top: 2rem;
}
.temoignage {
  background: none; border: 0; border-bottom: 1px solid var(--bord);
  border-radius: 0; padding: 1.6rem 0;
}
.temoignage p { font-style: italic; font-weight: 300; font-size: 1.1rem; }
.temoignage cite {
  font-weight: 400; font-size: .85rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gris-texte); margin-top: .8rem;
}

/* ---------- 10. Massothérapie · le tableau-grille des soins ---------- */
.rangs { margin-top: 2rem; border-top: 1px solid var(--bord); }
.section .rangs li { padding-left: 0; }        /* pas de puce sur les rangs */
.section .rangs li::before { display: none; }
.rang {
  display: grid; align-items: center; gap: 1.6rem;
  grid-template-columns: 6rem 16rem 1fr auto;
  padding: 1.4rem 0; border-bottom: 1px solid var(--bord);
}
.rang + .rang { margin-top: 0; }
.rang__photo { display: block; }
.rang__photo img { width: 6rem; height: 6rem; object-fit: cover; border-radius: 0; }
.rang__photo--vide { width: 6rem; height: 6rem; background: var(--pale); }
.rang__nom { font-size: 1.25rem; font-weight: 300; margin: 0; }
.rang__nom a { text-decoration: none; color: inherit; }
.rang__nom a:hover { color: var(--accent); }
.rang__phrase { font-size: 1.05rem; color: var(--gris-texte); }
.rang__lien {
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--accent); padding-bottom: .15rem;
}

/* ---------- 11. Tarifs : tableau gris très clair ---------- */
.tarifs { margin-top: 1.4rem; max-width: 44rem; }
.tarifs caption { color: var(--gris-texte); font-size: .95rem; }
.tarifs th {
  background: var(--pale); color: var(--texte); font-weight: 400;
  font-size: .82rem; letter-spacing: .18em; padding: .8rem .9rem;
  border-bottom: 1px solid var(--bord);
}
.tarifs td { padding: .75rem .9rem; border-bottom: 1px solid var(--bord); }
.tarifs td:last-child { font-weight: 400; }

/* ---------- 12. À propos · le réseau en deux colonnes séparées d'un filet ---------- */
#reseau > .conteneur { width: min(100% - 2 * var(--gouttiere), 46rem); }
#reseau ul { columns: 2; column-gap: 3rem; column-rule: 1px solid var(--bord); margin-top: 1.4rem; }
#reseau li { break-inside: avoid; }
#reseau li + li { margin-top: .6rem; }

/* Portrait d'Isabelle : rectangle centré, coins droits, 40 % de la colonne */
.portrait { width: min(100%, 40%); margin: 2.4rem auto 0; }
.portrait img { width: 100%; border-radius: 0; }

/* ---------- 13. Figures de contenu : jamais de flottant, jamais d'arrondi ---------- */
figure img { border-radius: 0; }
/* La page 5 km garde la mise en page du Wix : ses figures flottantes ne bougent pas. */
html:not(.page-5km) figure.gauche,
html:not(.page-5km) figure.droite,
html:not(.page-5km) figure.centre {
  width: min(100%, 26rem); max-width: none; margin: 2.6rem auto;
}
@media (min-width: 52rem) {
  html:not(.page-5km) figure.gauche, html:not(.page-5km) figure.droite { float: none; }
}

/* ---------- 14. Contact : tout centré, courriel en grand et léger ---------- */
#ecrire, #telephone, #adresse, #contact { text-align: center; }
#ecrire p a[href^="mailto"], #contact .coord p:first-child a {
  font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 300;
  letter-spacing: -.01em; text-decoration: none;
  border-bottom: 1px solid var(--bord); padding-bottom: .25rem;
}
#telephone p:first-of-type a {
  font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 300; text-decoration: none;
}
.coord { justify-items: center; }
.coord a { font-weight: 400; }
.coord .note, .note { font-size: .95rem; color: var(--gris-texte); font-weight: 400; }

/* ---------- 15. Formulaires : filets fins, aucun cadre plein ---------- */
.form { margin-inline: auto; text-align: left; max-width: var(--etroit); }
.form__groupe label {
  font-weight: 400; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-texte);
}
.form__groupe input, .form__groupe select, .form__groupe textarea {
  border: 0; border-bottom: 1px solid var(--bord); border-radius: 0;
  padding: .55rem 0; background: none;
}
.form__groupe input:focus, .form__groupe select:focus, .form__groupe textarea:focus {
  outline: 0; border-bottom-color: var(--accent);
}
.form__note {
  border: 0; border-left: 2px solid var(--accent); border-radius: 0;
  background: var(--pale); font-weight: 400; font-size: .95rem; padding: .7rem .9rem;
}
.form .bouton { justify-self: start; }
.form--enligne { margin-inline: 0; max-width: 46rem; }

/* ---------- 16. Cadres « à écrire avec Isabelle » : un filet, pas un encadré ---------- */
.cadre {
  border: 0; border-left: 2px solid var(--bord); border-radius: 0;
  background: none; padding: .2rem 0 .2rem 1.4rem; text-align: left;
  color: var(--gris-texte);
}
.cadre p { font-size: 1rem; }

/* ---------- 17. Pied de page ---------- */
.pied { background: none; border-top: 1px solid var(--bord); padding: 3rem 0 3.4rem; }
.pied p, .pied li, .pied a { font-size: .98rem; }
.pied__liens a { font-weight: 400; }
.pied__bas { color: var(--gris-texte); font-size: .9rem; }

/* ---------- 18. Ancres du programme 5 km (mise en page non touchée) ---------- */
.ancres a, #les-12-semaines a {
  border-radius: 0; background: none; border: 1px solid var(--bord); font-weight: 400;
}

/* ---------- 19. Mobile : la grille stricte se déplie en une colonne ---------- */
@media (max-width: 52rem) {
  .section { padding: 3.2rem 0; }
  .hero--epure { padding-top: 3.4rem; }
  .hero--epure .surtitre { font-size: .72rem !important; letter-spacing: .2em; }
  .hero__phrase { font-size: 1.05rem; }
  .hero__borne { width: 100%; margin-top: 2.6rem; }
  .hero__image img { max-height: 17rem; }
  .hero__texte { padding: 2rem 0 1.6rem; }
  .hero__texte p { font-size: 1.05rem; }

  .trois { grid-template-columns: 1fr; gap: 2.6rem; margin-inline: 0; }
  .trois__bloc { padding: 0; }
  .trois__bloc + .trois__bloc { border-left: 0; border-top: 1px solid var(--bord); padding-top: 2.4rem; }
  .trois__bloc p { font-size: 1rem; }

  .mot p { font-size: 1.1rem; }
  .temoignage p { font-size: 1rem; }
  .temoignage cite { font-size: .78rem; }

  .rang { grid-template-columns: 4.5rem 1fr; gap: 1rem; row-gap: .4rem; }
  .rang__photo img, .rang__photo--vide { width: 4.5rem; height: 4.5rem; }
  .rang__nom { font-size: 1.1rem; }
  .rang__phrase, .rang__lien { grid-column: 2; }
  .rang__phrase { font-size: 1rem; }
  .rang__lien { justify-self: start; font-size: .78rem; }

  .portrait { width: min(100%, 70%); }
  #reseau ul { columns: 1; }
  .nav__liste a, .nav__bouton { font-size: .8rem; }
  .nav__liste a { text-transform: none; letter-spacing: .02em; font-size: 1rem; }
  .tarifs th { font-size: .75rem; }
  .form__groupe label { font-size: .75rem; }
  .pied p, .pied li, .pied a { font-size: 1rem; }
}

/* == plancher desktop 1,1 rem (Fable, 18 sept. 2026) == */
@media (min-width: 52.01rem) {
  .lien-suite a,
  .bouton,
  .nav__liste a,
  .nav__sous > ul a,
  .nav__bouton,
  .trois__bloc p,
  .temoignage cite,
  .rang__phrase,
  .rang__lien,
  .tarifs caption,
  .tarifs th,
  .coord .note, .note,
  .form__groupe label,
  .form__note,
  .cadre p,
  .pied p, .pied li, .pied a,
  .pied__bas { font-size: 1.1rem; }
}