/* ============================================================================
   theme.css — variation F « Pierre et eau » · Kin & Masso (Isabelle Graillot)
   18 septembre 2026 · YannCode Solutions

   L'idée : une maison de patrimoine, pas un spa. Serif système pour les titres,
   bandes de gris pierre FROID alternées avec le blanc, l'eau (le bleu du logo)
   comme seule couleur vivante, le sous-bois pour les titres de section.
   Coins droits partout (--rayon: 0) — aucune photo arrondie.

   Aucun vert, aucun beige, aucun sépia, aucune photo en noir et blanc.
   Polices système uniquement — aucun .woff2 chargé, aucun Google Fonts.
   ponytail: presque tout se fait en CSS sur le HTML généré ; 5 fragments
   seulement, là où il fallait changer une image ou ajouter un bloc.
   ============================================================================ */

:root {
  --fond: #ffffff;
  --texte: #22262b;          /* anthracite */
  --accent: #2e6e8e;         /* bleu foncé du logo — liens, boutons (4,9:1 sur blanc) */
  --accent-2: #77b0cd;       /* bleu du logo — aplats, épingles, filets */
  --pale: #e9ecee;           /* gris pierre FROID (bleu > rouge : jamais un beige) */

  --sousbois: #7a4a32;       /* titres de section */
  --sousbois-pale: #a9755a;
  --eau-pale: #eaf1f6;       /* bleu très pâle, froid */
  --bord: rgba(34, 38, 43, .16);
  --rayon: 0;                /* patrimoine : coins droits, toujours */
  --largeur: 66rem;
  --pile-titre: Georgia, "Iowan Old Style", Charter, "Times New Roman", serif;
}

/* ---------- 1. Typographie de patrimoine ---------- */
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.005em; }
h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.25rem); color: var(--sousbois); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--sousbois); }
h4 { font-size: 1.2rem; color: var(--sousbois); }
body { line-height: 1.7; }

/* Surtitre : capitales espacées, en sans — la signature « patrimoine » */
.surtitre {
  font-family: var(--pile);
  font-size: .82rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  margin: 0 0 .6rem; color: var(--accent);
}

/* Filet double sous chaque titre de section */
.section > .conteneur > h2 {
  padding-bottom: .55rem; margin-bottom: 1.4rem;
  border-bottom: 3px double var(--sousbois-pale);
}
.section h3 { margin: 2rem 0 .5rem; padding-bottom: .35rem;
  border-bottom: 3px double var(--bord); }

/* ---------- 2. Bandes alternées blanc / gris pierre ---------- */
main > .section:nth-of-type(even) { background: var(--pale); }
.section + .section { border-top: 0; }
.section { padding: 3.6rem 0; }
.section ul li::before { background: var(--accent-2); border-radius: 0;
  width: .4rem; height: .4rem; top: .68em; }
.section a { color: var(--accent); font-weight: 600; }

/* ---------- 3. Entête ---------- */
.entete { border-bottom: 3px double var(--sousbois-pale); }
.entete__logo img { height: 2.3rem; }
.nav__liste { gap: .2rem .9rem; flex-wrap: nowrap; }
.nav__liste a { font-family: var(--pile); font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--sousbois); }
.nav__sous > ul { border-radius: 0; border-color: var(--bord); }
.nav__sous > ul a { text-transform: none; letter-spacing: .02em; font-size: .95rem; }

/* ---------- 4. Héros — photo pleine largeur, titre serif au tiers inférieur ---------- */
.hero:has(.hero__image) { position: relative; }
.hero:has(.hero__image) .hero__image img {
  width: 100%; height: 70vh; max-height: none;
  object-fit: cover; object-position: center 42%;
}
/* scrim LOCAL, bas de l'image seulement (le texte blanc l'exige) */
.hero:has(.hero__image)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(to top, rgba(18, 24, 29, .70), rgba(18, 24, 29, 0));
  pointer-events: none;
}
.hero:has(.hero__image) .hero__texte {
  position: absolute; left: 0; right: 0; bottom: 7%; z-index: 2;
  padding: 0; text-align: center; color: #fff;
}
.hero:has(.hero__image) .hero__texte .surtitre { color: rgba(255, 255, 255, .92); }
.hero:has(.hero__image) h1 {
  max-width: none; display: inline-block; padding: .45rem 1.4rem;
  border-top: 3px double rgba(255, 255, 255, .8);
  border-bottom: 3px double rgba(255, 255, 255, .8);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .45);
}
.hero:has(.hero__image) .hero__texte p:not(.surtitre) {
  margin: .9rem auto 0; max-width: 40rem; font-size: 1.15rem;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
/* Héros sans photo (Contact) : bandeau bleu très pâle */
.hero:not(:has(.hero__image)) {
  background: var(--eau-pale); border-bottom: 3px double var(--accent-2);
}
.hero:not(:has(.hero__image)) .hero__texte { padding: 3.2rem 0 2.8rem; }
.hero:not(:has(.hero__image)) h1 { color: var(--sousbois); }

/* ---------- 5. Cartes de service (coins droits, photo en haut) ---------- */
.cartes { gap: 1.6rem; }
.carte {
  background: #fff; border: 1px solid var(--bord); border-radius: 0;
  box-shadow: none;
}
.carte:hover, .carte:focus-visible {
  transform: none; box-shadow: 0 0 0 2px var(--accent-2); }
.carte img { aspect-ratio: 3 / 2; }
.carte__corps { padding: 1.1rem 1.2rem 1.3rem; }
.carte__corps h3 { border: 0; padding: 0; margin: 0; font-size: 1.3rem; color: var(--sousbois); }
.carte__bouton { font-family: var(--pile); font-size: .82rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
/* Carte sans photo : aplat bleu pâle (massages dont la photo manque) */
.carte--sansphoto { background: var(--eau-pale); }
.carte--sansphoto .carte__corps { padding-top: 1.8rem; }
.carte--sansphoto .carte__corps p { flex: 0 0 auto; }
.carte--sansphoto .carte__note {
  margin-top: auto; padding-top: 1rem;
  font-size: .95rem; color: var(--sousbois); font-style: italic; }
/* Index des massages : deux par ligne */
#soins .cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 6. Repères du lieu (carte à épingles Balnea — version liste) ---------- */
.reperes {
  margin-top: 2.2rem; padding: 1.5rem 1.6rem 1.7rem;
  background: var(--eau-pale); border-top: 3px double var(--accent-2);
}
.reperes__liste {
  display: grid; gap: .9rem 2rem; margin-top: .4rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.reperes__liste li { display: flex; align-items: center; gap: .8rem; }
.reperes__num {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--accent-2); color: #fff; font-weight: 700; font-size: 1rem;
}
.reperes__liste a { font-family: var(--pile); font-size: 1.1rem; font-weight: 400;
  color: var(--texte); text-decoration-color: var(--accent-2); }
.reperes__liste a:hover { color: var(--accent); }
.reperes__note { margin-top: 1.1rem; font-size: 1rem; color: var(--sousbois); }

/* ---------- 7. Témoignages — constellation sur bleu pâle ---------- */
#temoignages { background: var(--eau-pale); }
#temoignages .temoignages { display: block; columns: 3; column-gap: 1.3rem; margin-top: 1.5rem; }
.temoignage {
  break-inside: avoid; margin: 0 0 1.3rem; background: #fff;
  border: 0; border-top: 3px double var(--accent-2); border-radius: 0;
  padding: 1.1rem 1.2rem 1.2rem;
}
.temoignage p { font-size: 1.05rem; }
.temoignage:nth-child(4n+1) p { font-size: 1.2rem; font-family: var(--pile-titre); line-height: 1.5; }
.temoignage:nth-child(5n+3) p { font-size: 1rem; }
.temoignage cite { font-family: var(--pile-titre); font-weight: 400; color: var(--sousbois); }

/* ---------- 8. Tarifs — tableau à filets doubles ---------- */
.tarifs th {
  font-family: var(--pile); color: var(--sousbois);
  border-bottom: 3px double var(--sousbois-pale);
}
.tarifs td { border-bottom: 3px double var(--bord); }
.tarifs td:last-child { font-family: var(--pile-titre); font-weight: 400; }

/* ---------- 9. Figures, cadres, boutons, formulaires ---------- */
figure img { border-radius: 0; }
.cadre { border: 0; border-left: 5px solid var(--sousbois-pale);
  background: #fff; padding: 1rem 1.2rem; }
main > .section:nth-of-type(even) .cadre { background: rgba(255, 255, 255, .7); }
.bouton { border-radius: 0; font-family: var(--pile); font-size: .9rem;
  letter-spacing: .14em; text-transform: uppercase; padding: .85rem 1.5rem; }
.form__groupe input, .form__groupe select, .form__groupe textarea { border-radius: 0; }
.form .bouton { justify-self: start; }
.form__note { border: 0; border-left: 5px solid var(--accent-2); background: #fff;
  border-radius: 0; font-weight: 600; }
.coord a { color: var(--accent); }
.coord p { font-family: var(--pile-titre); font-size: 1.2rem; }
.coord .note, .coord p.note { font-family: var(--pile); font-size: 1rem; }

/* Contact : coordonnées à gauche (serif), formulaire à droite */
@media (min-width: 52rem) {
  #ecrire > .conteneur { display: grid; gap: 1rem 3.5rem;
    grid-template-columns: .8fr 1.2fr; align-items: start; }
  #ecrire > .conteneur > h2 { grid-column: 1 / -1; }
  #ecrire > .conteneur > p { font-family: var(--pile-titre); font-size: 1.2rem; }
  #ecrire .form { margin-top: 0; max-width: 34rem; }
}

/* À propos : le portrait passe à gauche, filets en colonne pour le réseau */
@media (min-width: 52rem) {
  #isabelle figure.droite { float: left; margin: .4rem 2rem 1.2rem 0; }
  #reseau ul { columns: 2; column-gap: 2.5rem; }
}
#reseau li { font-family: var(--pile-titre); font-size: 1.15rem;
  padding: .55rem 0 .55rem 1.3rem; border-bottom: 3px double var(--bord); }
#reseau li + li { margin-top: 0; }
#reseau li::before { top: 1.15em; }

/* ---------- 10. Pied de page ---------- */
.pied { background: var(--texte); color: #fff; border-top: 0; }
.pied a { color: #fff; }
.pied__liens a, .pied strong { font-family: var(--pile-titre); font-weight: 400; }
.pied__bas { opacity: .7; }

/* ---------- 11. Mobile ---------- */
@media (max-width: 52rem) {
  .hero:has(.hero__image) .hero__image img { height: 58vh; }
  .hero:has(.hero__image) h1 { padding: .4rem .8rem; }
  .hero:has(.hero__image) .hero__texte p:not(.surtitre) { font-size: 1.05rem; }
  .surtitre { font-size: .75rem; letter-spacing: .18em; }
  #soins .cartes { grid-template-columns: 1fr; }
  #temoignages .temoignages { columns: 1; }
  .reperes { padding: 1.2rem 1.1rem 1.3rem; }
  .nav__liste a { font-size: .95rem; letter-spacing: .08em; }
  .coord p { font-size: 1.1rem; }
  #reseau li { font-size: 1.05rem; }
}
@media (min-width: 52rem) and (max-width: 74rem) {
  #temoignages .temoignages { columns: 2; }
}

/* == plancher desktop 1,1 rem (Fable, 18 sept. 2026) == */
@media (min-width: 52.01rem) {
  .surtitre,
  .nav__liste a,
  .nav__sous > ul a,
  .carte__bouton,
  .carte--sansphoto .carte__note,
  .reperes__num,
  .reperes__note,
  .temoignage p,
  .temoignage:nth-child(5n+3) p,
  .bouton,
  .coord .note, .coord p.note { 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; }