/* ============================================================================
   theme.css — VARIATION A · « Elle » · Kin & Masso (Isabelle Graillot)
   18 septembre 2026 · YannCode Solutions

   Le site d'une praticienne seule : c'est elle qu'on rencontre au premier
   écran, dans le ton d'une lettre. Beaucoup de vide, peu d'éléments, tout net.

   Palette : crème #FBF7F2 · anthracite #22262B · corail du logo #EB5D3E
   (et son jumeau foncé #C03F22, le seul lisible en petit texte).
   Le bleu du logo #2E6E8E ne sert qu'aux filets et au focus.
   Aucun vert, aucun beige, aucun sépia, aucun coin arrondi sur une photo.
   Polices SYSTÈME seulement.
   ponytail: pas de nouvelles variables si base.css en a déjà une.
   ============================================================================ */

:root {
  --fond: #fbf7f2;            /* crème très pâle — la couleur de son local */
  --texte: #22262b;           /* anthracite */
  --accent: #c03f22;          /* corail foncé : liens, puces, boutons (5,4:1) */
  --accent-2: #2e6e8e;        /* bleu du logo, foncé — filets et focus */
  --pale: #ffffff;            /* le bloc « doux » est blanc sur le crème */

  --corail: #eb5d3e;          /* le corail du logo, décoratif seulement */
  --bord: rgba(34, 38, 43, .13);
  --largeur: 64rem;
  --etroit: 36rem;            /* ≈ 60 caractères */
  --rayon: 0;                 /* rien n'est arrondi dans cette variation */
  --pile-titre: "Iowan Old Style", "Palatino Linotype", Palatino, Charter,
                Georgia, "Times New Roman", serif;
}

/* ---------- Rythme : beaucoup de vide ---------- */
body { letter-spacing: .002em; }
.section { padding: 5rem 0; }
.section + .section { border-top: 1px solid var(--bord); }
.section > .conteneur > h2 { margin-bottom: 1.6rem; }

/* ---------- Titres serif, légers, grands ---------- */
h1, h2, h3 { font-weight: 400; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3rem); line-height: 1.08; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.5rem); }
h4 { font-family: var(--pile); font-size: 1.1rem; font-weight: 700; }

/* Surtitres en capitales très espacées */
.surtitre {
  font-family: var(--pile);
  font-size: .82rem !important;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.section .surtitre { margin-top: 2.4rem; }

/* ---------- Liens « En savoir plus → » ---------- */
.lien-suite { margin-top: 1rem; }
.lien-suite a {
  font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--corail); padding-bottom: .12rem;
}
.lien-suite a:hover { border-bottom-color: var(--accent); }

/* ---------- Boutons à filet ---------- */
.bouton, .section a.bouton {
  border-radius: 0;
  letter-spacing: .04em;
  color: #fff;                 /* sinon `.section a` repeint le texte en corail */
}
.bouton--filet, .section a.bouton--filet {
  background: none;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .85rem 1.7rem;
}
.bouton--filet:hover, .section a.bouton--filet:hover { background: var(--accent); color: #fff; filter: none; }

/* ---------- Entête ---------- */
.entete { background: var(--fond); border-bottom: 1px solid var(--bord); }
.entete__barre { padding: .9rem 0; }
.nav__liste a { font-weight: 600; letter-spacing: .04em; }
.nav__sous > ul { border-radius: 0; box-shadow: 0 14px 34px rgba(34, 38, 43, .12); }
.nav__bouton { border-radius: 0; border-width: 1px; }

/* ============================================================================
   ACCUEIL — héros scindé : elle à gauche, sa lettre à droite
   ============================================================================ */
.hero--elle { border-bottom: 1px solid var(--bord); }
.elle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.elle__portrait img {
  width: 100%; height: 100%; max-height: 40rem;
  object-fit: cover; object-position: center 22%;
  border-radius: 0;
}
.elle__mot {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem clamp(1.25rem, 5vw, 4.5rem);
  max-width: 34rem;
}
.elle__mot h1 { margin-bottom: 1.4rem; }
.elle__mot p { font-size: 1.15rem; }
.elle__mot p + p { margin-top: 1rem; }
.elle__action { margin-top: 2rem !important; }
.elle__tel { margin-top: 1.4rem !important; font-size: 1.05rem !important; }
.elle__tel a { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--bord); }
.elle__tel .note { display: block; margin-top: .35rem; font-size: .95rem; opacity: .8; }

/* Le mot d'introduction sous le héros */
.section--mot .mot__grand {
  font-family: var(--pile-titre);
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.45;
  max-width: 44rem;
}

/* ---------- Accueil · les trois services ---------- */
.trio {
  display: grid; gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: repeat(3, 1fr);
  margin-top: 2rem;
}
.trio__bloc h3 { margin: 1.2rem 0 .5rem; }
.trio__bloc p { font-size: 1.05rem; }
.trio__photo { display: block; }
.trio__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0; }
/* Bloc sans photo : Isabelle n'en a pas encore fourni pour ce service. */
.trio__photo--aplat {
  display: block; position: relative; width: 100%; aspect-ratio: 4 / 5;
  background: var(--pale); border: 1px solid var(--corail);
}
.trio__photo--aplat::after {
  content: "Photo à venir"; position: absolute; left: 0; right: 0; bottom: 1.1rem;
  text-align: center; font-size: .78rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
}

/* ---------- Accueil · témoignages ---------- */
.mises-en-avant { display: grid; gap: 2.6rem; margin: 2rem 0 3.4rem; }
.grande-citation { border: 0; background: none; padding: 0; max-width: 46rem; }
.grande-citation p {
  font-family: var(--pile-titre);
  font-style: italic;
  font-size: clamp(1.35rem, 2.8vw, 1.9rem) !important;
  line-height: 1.35;
}
.grande-citation cite {
  display: block; margin-top: .8rem;
  font-family: var(--pile); font-style: normal; font-weight: 700;
  font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent);
}
.avis-liste { display: grid; gap: 1.6rem; max-width: 46rem; }
.avis-liste li { padding-left: 1.1rem !important; border-left: 1px solid var(--bord); }
.avis-liste li::before { display: none !important; }
.avis-liste li + li { margin-top: 0; }
.avis-liste p { font-size: 1.05rem; }
.avis-liste cite { display: block; margin-top: .4rem; font-style: normal; font-weight: 700; font-size: .95rem; }

/* ============================================================================
   Colonne étroite (À propos, Analyse biomécanique, Contact)
   ============================================================================ */
/* La colonne étroite garde le MÊME bord gauche que le reste de la page :
   on rétrécit le texte, jamais le conteneur (sinon tout se décale au centre). */
.section--etroit h2, .section--etroit h3, .section--etroit p,
.section--etroit li, .section--etroit .cadre { max-width: var(--etroit); }
#isabelle p, #diplomes p, #locaux p,
#pour-qui li, #deroulement p, #deroulement li, #suivi p, #suivi li, #coaching p,
#pressotherapie p, #abdomen p { max-width: var(--etroit); }

/* La photo pleine largeur entre deux blocs — bornée au conteneur : la seule
   photo disponible ici est un carré de 960 px, un plein écran la ferait éclater. */
.bande { margin: 3rem auto; width: min(100% - 2 * var(--gouttiere), var(--largeur)); }
.bande img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 38%; border-radius: 0; }

/* Réseau de référence sur deux colonnes */
#reseau ul { columns: 2; column-gap: 3rem; max-width: 34rem; }
#reseau li { break-inside: avoid; }

/* Cadres « à écrire avec Isabelle » : discrets, pas des alarmes */
.cadre {
  border: 0; border-left: 2px solid var(--accent-2);
  background: none; border-radius: 0;
  padding: .2rem 0 .2rem 1.1rem;
  max-width: var(--etroit);
}
.cadre p { font-size: 1rem; opacity: .9; }

/* ============================================================================
   ANALYSE BIOMÉCANIQUE — bandeau photo puis colonne étroite
   ============================================================================ */
.hero__image img { max-height: 24rem; object-position: center 45%; border-radius: 0; }
.hero__texte { padding: 3rem 0 1rem; }
.hero__texte h1 { max-width: 20ch; }
.hero__texte p { font-size: 1.15rem; max-width: 40rem; }

/* Puces fines */
.section ul li::before {
  width: .3rem; height: .3rem; top: .72em;
  border-radius: 0; background: var(--corail);
}

/* ============================================================================
   MASSOTHÉRAPIE — liste verticale de rangs
   ============================================================================ */
.rangs { display: grid; margin-top: 1.6rem; }
.rang {
  display: grid; grid-template-columns: 9rem 1fr;
  gap: 1.8rem; align-items: start;
  padding: 1.8rem 0 !important;
  border-top: 1px solid var(--bord);
}
.rang::before { display: none !important; }
.rang + .rang { margin-top: 0; }
.rangs .rang:last-child { border-bottom: 1px solid var(--bord); }
.rang__photo { display: block; }
.rang__photo img { width: 9rem; height: 9rem; object-fit: cover; border-radius: 0; }
.rang__photo--aplat {
  display: block; width: 9rem; height: 9rem;
  background: var(--pale); border: 1px solid var(--corail);
}
.rang__texte h3 { margin: 0 0 .4rem; }
.rang__texte h3 a { text-decoration: none; color: inherit; }
.rang__texte h3 a:hover { color: var(--accent); }
.rang__texte p { font-size: 1.05rem; }
.rang .lien-suite { margin-top: .6rem; }

/* Tarifs : tableau simple, pas de fond */
.tarifs { max-width: 42rem; }
.tarifs th {
  font-family: var(--pile); font-size: .82rem; letter-spacing: .2em;
  color: var(--accent); border-bottom: 1px solid var(--accent);
}
.tarifs caption { font-size: .98rem; }

/* ============================================================================
   CONTACT — deux colonnes
   ============================================================================ */
.deux-colonnes { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr 1fr; align-items: start; }
.deux-colonnes__gauche h2 { margin-bottom: 1.2rem; }
.courriel-grand { font-size: 1.05rem !important; }
.courriel-grand a {
  font-family: var(--pile-titre);
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 400; text-decoration: none;
  border-bottom: 1px solid var(--corail);
  word-break: break-word;
}
.tel-grand { font-size: 1.05rem !important; }
.tel-grand a {
  font-family: var(--pile-titre); font-size: 1.5rem;
  text-decoration: none; border-bottom: 1px solid var(--bord);
}
.deux-colonnes .note { font-size: 1rem; opacity: .85; margin-top: .5rem; }
.deux-colonnes .form { margin-top: 0; max-width: none; }
.form__groupe input, .form__groupe select, .form__groupe textarea { border-radius: 0; }
.form__note { border-radius: 0; border: 0; border-left: 2px solid var(--accent-2); padding-left: 1rem; }

/* ---------- Coordonnées et Facebook ---------- */
.coord a { text-decoration: none; border-bottom: 1px solid var(--bord); }
.bouton--f { border-radius: 0; }

/* ---------- Pied de page ---------- */
.pied { background: var(--fond); border-top: 1px solid var(--bord); padding: 3rem 0 3.4rem; }
.pied a { text-decoration: none; border-bottom: 1px solid var(--bord); }
.pied__bas { opacity: .7; }

/* ---------- Cartes héritées (pages non retravaillées) ---------- */
.carte { background: var(--pale); border-radius: 0; }
.carte img { border-radius: 0; }
.carte__bouton { font-weight: 700; }
.temoignage { border-radius: 0; background: var(--pale); border-left-color: var(--corail); }
figure img { border-radius: 0; }
.ancres a, #les-12-semaines a { border-radius: 0; background: var(--pale); }

/* ============================================================================
   MOBILE
   ============================================================================ */
@media (max-width: 52rem) {
  .section { padding: 3rem 0; }

  .elle { grid-template-columns: 1fr; }
  .elle__portrait img { max-height: 24rem; object-position: center 20%; }
  .elle__mot { padding: 2.4rem var(--gouttiere) 2.8rem; max-width: none; }
  .elle__mot p { font-size: 1.05rem; }

  .trio { grid-template-columns: 1fr; gap: 2.4rem; }
  .trio__photo img, .trio__photo--aplat { aspect-ratio: 3 / 2; }

  .mises-en-avant { gap: 2rem; margin-bottom: 2.4rem; }
  .grande-citation p { font-size: 1.25rem !important; }

  .rang { grid-template-columns: 5.5rem 1fr; gap: 1.1rem; padding: 1.3rem 0 !important; }
  .rang__photo img, .rang__photo--aplat { width: 5.5rem; height: 5.5rem; }

  .deux-colonnes { grid-template-columns: 1fr; }
  #reseau ul { columns: 1; }
  .bande { margin: 2rem 0; }
  .bande img { max-height: 16rem; }
  .surtitre { font-size: .76rem !important; }
  .grande-citation cite { font-size: .76rem; }
}

/* == plancher desktop 1,1 rem (Fable, 18 sept. 2026) == */
@media (min-width: 52.01rem) {
  .elle__tel .note,
  .trio__bloc p,
  .trio__photo--aplat::after,
  .grande-citation cite,
  .avis-liste p,
  .avis-liste cite,
  .cadre p,
  .rang__texte p,
  .tarifs th,
  .tarifs caption,
  .deux-colonnes .note { font-size: 1.1rem; }
}