/* ============================================================================
   theme.css — variation H « Affiche sportive » · Kin & Masso (Isabelle Graillot)
   18 septembre 2026 · YannCode Solutions

   Blanc + aplats PLEINS (corail, bleu, anthracite), capitales condensées
   Archivo Black, photos en mosaïque, blocs asymétriques. Aucun chevauchement
   typographique : le texte ne passe jamais par-dessus une photo.
   Aucun vert, aucun beige, aucun sépia, aucun coin arrondi sur une photo.

   ponytail: pas de préprocesseur, pas de grille générique — trois primitives
   (bloc scindé, bandeau, mosaïque) réutilisées par les 5 pages travaillées.
   ============================================================================ */

/* ---------- 0. Polices locales (jamais Google Fonts) ---------- */
@font-face {
  font-family: "Archivo Black";
  src: url("../../commun/fonts/archivo-black.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../../commun/fonts/geist.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- 1. Les couleurs ---------- */
:root {
  --fond: #ffffff;
  --texte: #22262b;              /* anthracite */
  --accent: #eb5d3e;             /* corail du logo — aplats pleins */
  --accent-2: #77b0cd;           /* bleu du logo — aplats pleins */
  --pale: #fbf7f2;               /* crème très pâle (couleur de son local) */

  --corail-txt: #c03f22;         /* corail lisible en petit (5,4:1 sur blanc) */
  --bleu-fonce: #2e6e8e;         /* aplat bleu quand il porte du texte blanc */
  --bleu-pale: #eef5f9;          /* fond doux des sections alternées */
  --encre: #1a1d21;              /* texte sur aplat corail (4,8:1) */

  --bord: rgba(34, 38, 43, .16);
  --rayon: 0;                    /* coins DROITS partout */
  --largeur: 74rem;
  --gouttiere: 1.25rem;

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

/* ---------- 2. Typographie affiche : capitales, serré ---------- */
h1, h2, h3, .tuile__mot, .bandeau-offre h2, .bloc-plein__titre {
  font-family: var(--pile-titre);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.8rem); line-height: 1.02; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.06; color: var(--corail-txt); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.12; }
h4 { font-family: var(--pile-titre); text-transform: uppercase; letter-spacing: -.01em; }

.section { padding: 3.4rem 0; }
.section + .section { border-top: 0; }
.section > .conteneur > h2 { margin-bottom: 1.1rem; }

/* ---------- 3. Entête ---------- */
.entete { border-bottom: 3px solid var(--texte); }
.entete__logo img { height: 2.5rem; }
.nav__liste a { text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
.nav__liste a:hover, .nav__liste a[aria-current="page"] { color: var(--corail-txt); }
.nav__bouton { border-color: var(--texte); text-transform: uppercase; font-weight: 800; }
.nav__sous > ul { border: 2px solid var(--texte); box-shadow: 8px 8px 0 rgba(34, 38, 43, .12); }

/* ---------- 4. Héros scindé (moitié photo / moitié aplat plein) ---------- */
.hero--h { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.hero--h .hero__photo { position: relative; overflow: hidden; min-height: 28rem; }
.hero--h .hero__photo picture { display: block; height: 100%; }
.hero--h .hero__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
}
/* photo portrait (2 fois plus haute que large) : le sujet est dans le premier tiers */
.hero--h .hero__photo--haut img { object-position: center 18%; }

.hero__bloc {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: .9rem; padding: 3rem clamp(1.25rem, 4vw, 3.4rem);
  background: var(--accent); color: #fff;
}
.hero__bloc--bleu { background: var(--bleu-fonce); }
.hero__bloc h1 { color: #fff; max-width: 14ch; }
.hero__sur {
  font-size: 1rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: #fff; opacity: .95;
}
.hero__sous { font-size: 1.2rem; font-weight: 700; color: #fff; max-width: 30ch; }

.bouton--blanc { background: #fff; color: var(--corail-txt); margin-top: .5rem; }
.bouton--blanc:hover { filter: none; background: var(--pale); }
.hero__bloc--bleu .bouton--blanc { color: #24586f; }

/* héros sans photo : l'aplat prend toute la largeur */
.hero--plein { display: block; }
.hero--plein .hero__bloc { padding-block: 3.6rem; }
.hero--plein .hero__bloc { align-items: stretch; padding-inline: 0; }
.hero--plein .hero__conteneur {
  width: min(100% - 2 * var(--gouttiere), var(--largeur)); margin-inline: auto;
}
.hero--plein .hero__conteneur > * + * { margin-top: .9rem; }
.hero__conteneur .bouton + .bouton { margin-left: .7rem; }

/* ---------- 5. Bandeau d'offre pleine largeur ---------- */
.bandeau-offre { background: var(--bleu-fonce); padding: 1.5rem 0; }
.bandeau-offre__ligne {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.bandeau-offre h2 { color: #fff; margin: 0; font-size: clamp(1.25rem, 2.6vw, 1.9rem); }
.bandeau-offre a, .bandeau-offre__lien {
  font-family: var(--pile-titre); text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.1rem; color: #fff; text-decoration: underline; text-underline-offset: .3em;
  white-space: nowrap;
}
.bandeau-offre__lien:hover { text-decoration: none; }

/* ---------- 6. Mosaïque de tuiles photo (Bota Bota / Brick Canvas) ---------- */
.mosaique {
  display: grid; gap: .6rem; margin-top: 1.6rem;
  grid-template-columns: repeat(4, 1fr);
}
.tuile {
  position: relative; display: block; overflow: hidden;
  background: var(--accent-2); color: var(--texte); text-decoration: none;
  grid-column: span 2; height: 15rem;
}
.mosaique .tuile--grande { grid-column: span 2; grid-row: span 2; height: 100%; min-height: 30.6rem; }
.mosaique .tuile img { position: absolute; inset: 0; }
.tuile img { width: 100%; height: 100%; object-fit: cover; }
.tuile picture { display: block; height: 100%; }
.tuile__mot {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: .55rem .9rem; background: var(--accent); color: #fff;
  font-size: clamp(.95rem, 1.5vw, 1.15rem); letter-spacing: .01em;
}
.tuile--bleue .tuile__mot { background: var(--bleu-fonce); }
/* tuile sans photo : aplat bleu plein, le mot au centre */
.tuile--aplat {
  display: flex; align-items: center; padding: 1.4rem;
  background: var(--accent-2);
}
.tuile--aplat .tuile__mot {
  position: static; background: none; color: var(--texte);
  padding: 0; font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.tuile--aplat .tuile__note { position: absolute; left: 1.4rem; bottom: 1.2rem; font-size: 1rem; }
.tuile:hover img { transform: scale(1.03); }
.tuile img { transition: transform .25s ease; }
.tuile:focus-visible { outline: 3px solid var(--corail-txt); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .tuile img { transition: none; } }

/* ---------- 7. Blocs asymétriques de services ---------- */
.blocs-asym { display: grid; gap: .6rem; grid-template-columns: repeat(4, 1fr); margin-top: 1.6rem; }
.blocs-asym > * { grid-column: span 2; }
.blocs-asym > .tuile--grande { grid-column: span 4; }

.bloc-serv {
  display: flex; flex-direction: column; text-decoration: none; color: var(--texte);
  border: 3px solid var(--texte); background: #fff;
}
.bloc-serv__photo { overflow: hidden; }
.bloc-serv__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bloc-serv--grand .bloc-serv__photo img { aspect-ratio: 21 / 9; }
.bloc-serv__corps { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.3rem; flex: 1; }
.bloc-serv__titre {
  font-family: var(--pile-titre); text-transform: uppercase; letter-spacing: -.01em;
  font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--corail-txt); line-height: 1.1;
}
.bloc-serv__texte { font-size: 1.05rem; flex: 1; }
.bloc-serv__lien {
  font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: .03em;
  color: var(--corail-txt);
}
.bloc-serv:hover { background: var(--pale); }
.bloc-serv:hover .bloc-serv__lien { text-decoration: underline; text-underline-offset: .25em; }

/* ---------- 8. Aplats pleins par section (aucun fragment nécessaire) ---------- */
#temoignages { background: var(--bleu-fonce); color: #fff; }
#temoignages h2 { color: #fff; }
#temoignages .temoignage {
  background: transparent; border: 0; border-left: 4px solid var(--accent); padding: .4rem 0 .4rem 1.1rem;
}
#temoignages .temoignage p { color: #fff; font-size: 1.05rem; }
#temoignages .temoignage cite {
  text-transform: uppercase; font-family: var(--pile-titre); letter-spacing: .02em;
  font-size: .95rem; color: #ffd9cf;
}
#temoignages .cadre { border-color: #fff; background: rgba(255, 255, 255, .1); }
#temoignages .cadre p, #temoignages .cadre strong { color: #fff; }

#contact { background: var(--texte); color: #fff; }
#contact h2 { color: #fff; }
#contact a { color: #fff; }
#contact .coord .note { color: #e6e8ea; }
#contact li::before { background: var(--accent); }

#a-voir, #a-propos { background: var(--pale); }

/* sections alternées blanc / bleu très pâle — page Analyse biomécanique */
#pour-qui, #suivi, #deroulement { background: #fff; }
#deroulement, #pressotherapie, #diplomes, #adresse { background: var(--bleu-pale); }

/* ---------- 9. Blocs, listes, tableaux ---------- */
.section ul li::before { border-radius: 0; width: .55rem; height: .4rem; top: .58em; }
.cadre { border: 3px dashed var(--accent-2); background: var(--pale); }
.temoignages { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.4rem 2rem; }

.tarifs th {
  background: var(--accent); color: #fff; border-bottom: 0;
  padding: .7rem .8rem; font-family: var(--pile-titre); letter-spacing: .04em;
}
.tarifs td { padding: .65rem .8rem; }
.tarifs tr:nth-child(odd) td { background: var(--pale); }

.bouton { text-transform: uppercase; letter-spacing: .03em; font-family: var(--pile-titre); font-size: 1rem; }
.carte, .carte img, figure img { border-radius: 0; }
.carte { border: 3px solid var(--texte); background: #fff; }
.carte__bouton { text-transform: uppercase; font-weight: 800; color: var(--corail-txt); }
.section a { color: var(--corail-txt); }

/* ---------- 10. À propos : deux colonnes, réseau en capitales ---------- */
/* ponytail: pas de `columns` ici — la figure flottante du texte d'Isabelle
   casse le flux multi-colonnes. Deux colonnes = texte à gauche, photo à droite. */
@media (min-width: 60rem) {
  #isabelle .conteneur > p { max-width: 38rem; }
}
#reseau ul { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
#reseau li { padding-left: 0; margin: 0; }
#reseau li::before { display: none; }
#reseau li {
  border: 3px solid var(--texte); padding: .45rem .9rem;
  font-family: var(--pile-titre); text-transform: uppercase; font-size: 1rem; letter-spacing: .01em;
}

/* ---------- 10b. Liens posés sur un aplat plein ----------
   Doit passer APRÈS `.section a` (même spécificité, c'est l'ordre qui tranche). */
.bandeau-offre a, #temoignages a, #contact a { color: #fff; }
.section a.bouton, .section a.bouton--f, #contact a.bouton { color: #fff; }
.section a.bouton--blanc { color: var(--corail-txt); }
.hero__bloc a.bouton--blanc { color: var(--corail-txt); }
.hero__bloc--bleu a.bouton--blanc { color: #24586f; }

/* ---------- 11. Pied de page ---------- */
.pied { background: var(--texte); color: #fff; border-top: 0; }
.pied a { color: #fff; }
.pied__bas { color: #cfd3d7; }

/* ---------- 12. Mobile : la photo passe au-dessus, l'aplat dessous ---------- */
@media (max-width: 52rem) {
  .hero--h { grid-template-columns: 1fr; }
  .hero--h .hero__photo { min-height: 0; height: 40vh; }
  .hero__bloc { padding: 2.2rem 1.25rem 2.4rem; }
  .hero__sous { font-size: 1.05rem; }
  .hero__sur { font-size: .85rem; }

  .mosaique, .blocs-asym { grid-template-columns: repeat(2, 1fr); }
  .tuile, .blocs-asym > * { grid-column: span 2; }
  .tuile { height: 12rem; }
  .mosaique .tuile--grande { grid-column: span 2; grid-row: span 1; height: 16rem; min-height: 0; }

  .bandeau-offre__ligne { gap: .6rem; }
  .bandeau-offre__lien { font-size: 1rem; }
  .bloc-serv__texte, #temoignages .temoignage p { font-size: 1rem; }
  .bloc-serv__lien, .carte__bouton, #reseau li, .bouton { font-size: .9rem; }
  #temoignages .temoignage cite { font-size: .85rem; }
}

/* == plancher desktop 1,1 rem (Fable, 18 sept. 2026) == */
@media (min-width: 52.01rem) {
  .hero__sur,
  .tuile--aplat .tuile__note,
  .bloc-serv__texte,
  .bloc-serv__lien,
  #temoignages .temoignage p,
  #temoignages .temoignage cite,
  .bouton,
  #reseau li { font-size: 1.1rem; }
}