/* PÔLE — toute la DA. « Moderne, sérieux, simple et efficace » : une seule
   famille (Manrope), un seul accent (le bleu), beaucoup de blanc, une grille,
   des listes qui se lisent comme un agenda. Aucun ornement : la hiérarchie
   typographique et l'espace font le travail.

   Contrastes mesurés sur blanc : encre 16:1 · encre-2 7,4:1 · encre-3 4,8:1 ·
   bleu 6,5:1 (et blanc sur bleu 6,5:1) · corail 5,9:1. */

:root {
  --encre: #0f1a2b;
  --encre-2: #475467;
  --encre-3: #667085;
  --papier: #f6f8fb;
  --blanc: #ffffff;
  --trait: #e4e8ee;
  --trait-2: #cfd6e0;
  --bleu: #1f55c4;
  --bleu-fonce: #173f94;
  --bleu-pale: #eaf0fb;
  --corail: #c63d44;
  --corail-pale: #fdecec;
  --vert: #1b6b4a;
  --vert-pale: #e6f4ef;
  --violet: #6b3fb5;
  --violet-pale: #f1ebfb;
  --terre: #b8541f;
  --terre-pale: #fcefe6;
  --creme: #f7f4ed;
  --creme-2: #efeadf;
  /* UN SEUL BLEU dans tout le site : celui du « P » (sa remarque du 12/10/2026,
     « trop de nuances de bleu, UI difficile à comprendre »). Il sert aux actions,
     aux surfaces pleines (hero, têtes sombres, carte d'adhésion) et à sa teinte
     pâle. Le pied est en encre, pas en bleu. Blanc sur ce bleu : 6,5:1. */
  --rayon: 12px;
  --ombre: 0 1px 2px rgba(15, 26, 43, .06), 0 8px 24px -12px rgba(15, 26, 43, .18);
  --barre-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--barre-h) + 16px); }
body {
  margin: 0; background: var(--blanc); color: var(--encre);
  font: 400 16px/1.55 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bleu); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--encre); }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-bottom: 1.4rem; }
h3 { font-size: 1.05rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }

.int { width: min(1120px, 100% - clamp(32px, 8vw, 64px)); margin-inline: auto; }
.saut { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 8px 12px; background: var(--encre); color: #fff; border-radius: 8px; }
.saut:focus { top: 12px; }

/* ── Barre haute ──────────────────────────────────────────────────────────── */
.barre { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--trait); }
.barre-int { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--barre-h); width: min(1120px, 100% - clamp(32px, 8vw, 64px)); margin-inline: auto; }
.marque { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-weight: 800; letter-spacing: -0.01em; }
.marque:hover { text-decoration: none; }
.marque-tuile { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--bleu); color: #fff; font-weight: 800; font-size: 17px; }
.barre-nav { display: flex; gap: 4px; }
.barre-nav a { padding: 8px 12px; border-radius: 8px; color: var(--encre-2); font-weight: 600; font-size: .95rem; }
.barre-nav a:hover { color: var(--encre); background: var(--papier); text-decoration: none; }
.barre-nav a[aria-current="page"] { color: var(--bleu); background: var(--bleu-pale); }
.barre-droite { display: flex; align-items: center; gap: 10px; }
.burger { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--trait); border-radius: 10px; background: #fff; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.burger span { width: 18px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.volet { position: fixed; inset: var(--barre-h) 0 auto 0; z-index: 49; background: #fff; border-bottom: 1px solid var(--trait); box-shadow: var(--ombre); padding: 8px 16px 16px; }
.volet nav { display: grid; }
.volet a { padding: 14px 8px; border-bottom: 1px solid var(--trait); color: var(--encre); font-weight: 600; font-size: 1.05rem; }
.volet a[aria-current="page"] { color: var(--bleu); }
.volet a:last-child { border-bottom: 0; }

/* ── Annonce ──────────────────────────────────────────────────────────────── */
.annonce { background: var(--bleu); color: #fff; font-weight: 600; font-size: .95rem; }
.annonce .int { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.annonce-puce { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; }

/* ── Boutons, liens ───────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 10px; background: var(--bleu); color: #fff; font-weight: 700; font-size: .95rem; border: 1px solid var(--bleu); transition: background .15s, border-color .15s, transform .15s var(--ease); }
.btn:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-sec { background: #fff; color: var(--encre); border-color: var(--trait-2); }
.btn-sec:hover { background: var(--papier); border-color: var(--encre-3); }
.btn-petit { padding: 9px 14px; font-size: .9rem; }
.btn-large { width: 100%; padding: 14px 18px; font-size: 1rem; }
.lien { font-weight: 700; white-space: nowrap; }

/* ── Hero — sombre, et la seule surface du site qui ait un décor ──────────── */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); background: var(--bleu-pale); color: var(--encre); }
.hero-motif { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(31, 85, 196, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 85, 196, .09) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 85%); }
/* Avec une photo du lieu en fond, le hero repasse en blanc sur bleu : du texte
   encre sur une photo ne se lit pas. */
.hero-photo { color: #fff; }
.hero-photo .hero-motif { background: linear-gradient(100deg, rgba(31, 85, 196, .95) 35%, rgba(31, 85, 196, .72)), var(--hero-photo) center / cover no-repeat; mask-image: none; -webkit-mask-image: none; }
.hero-photo h1 { color: #fff; }
.hero-photo .sur-titre { color: rgba(255, 255, 255, .8); }
.hero-photo .hero-p { color: rgba(255, 255, 255, .85); }
.hero-photo .btn-sec { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.hero-grille { position: relative; display: grid; gap: 40px; align-items: center; }
.sur-titre { margin: 0 0 14px; color: var(--bleu); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-p { margin: 20px 0 0; max-width: 54ch; color: var(--encre-2); font-size: 1.12rem; line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-clair { background: #fff; border-color: #fff; color: var(--encre); }
.btn-clair:hover { background: var(--creme); border-color: var(--creme); }
.btn-contour { background: transparent; border-color: rgba(255, 255, 255, .5); color: #fff; }
.btn-contour:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Les quatre teintes de type, portées par une classe `type-*` sur l'élément :
   tout ce qui est dedans lit --t / --t-pale. C'est ce qui distingue une
   formation d'un atelier au premier regard, de la tuile à la ligne d'agenda. */
.type-formation { --t: var(--bleu); --t-pale: var(--bleu-pale); }
.type-atelier { --t: var(--vert); --t-pale: var(--vert-pale); }
.type-evenement { --t: var(--violet); --t-pale: var(--violet-pale); }
.type-coworking { --t: var(--terre); --t-pale: var(--terre-pale); }
.type-agenda, .type-contact { --t: var(--bleu); --t-pale: var(--bleu-pale); }

/* La prochaine séance : une carte blanche posée sur le hero sombre. */
.prochaine { display: grid; gap: 14px; padding: 22px 24px; background: #fff; border-radius: var(--rayon); color: var(--encre); border-top: 5px solid var(--t, var(--bleu)); box-shadow: 0 20px 44px -18px rgba(31, 85, 196, .35); }
a.prochaine:hover { text-decoration: none; transform: translateY(-2px); transition: transform .2s var(--ease); }
.prochaine-label { color: var(--encre-3); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.prochaine-corps { display: grid; grid-template-columns: 76px 1fr; gap: 16px; align-items: center; }
.prochaine-texte { display: grid; gap: 6px; min-width: 0; }
.prochaine-titre { font-weight: 800; font-size: 1.3rem; letter-spacing: -0.015em; line-height: 1.2; }
.prochaine-quand { color: var(--encre-2); font-size: .95rem; }
.prochaine-bas { display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--trait); }
.prochaine-cta { margin-left: auto; color: var(--t, var(--bleu)); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.prochaine-vide { border-top-color: var(--trait-2); box-shadow: none; }

.carte { display: block; padding: 22px 24px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--encre); }
a.carte:hover { text-decoration: none; border-color: var(--bleu); }
.carte-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; color: var(--encre-3); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section { padding: clamp(36px, 5vw, 64px) 0; }
.section-grise, .section-creme { background: var(--creme); }
.section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 1.4rem; }
.section-tete h2 { margin: 0; }
.section-tete .sur-titre, #associes .sur-titre, #lieu .sur-titre, .section-contact .sur-titre { margin-bottom: 8px; }
.section-tete .lien { padding-bottom: 4px; }
.h2-espace { margin-top: 3rem; }
.note { color: var(--encre-3); font-size: .9rem; max-width: 72ch; margin: 1.2rem 0 0; }
.note-ex { padding: 12px 14px; background: var(--papier); border-radius: 8px; border-left: 3px solid var(--trait-2); max-width: none; }

/* ── Tuiles ───────────────────────────────────────────────────────────────── */
.section-tuiles { position: relative; z-index: 2; margin-top: calc(-1 * clamp(44px, 6vw, 72px)); padding-top: 0; padding-bottom: clamp(16px, 3vw, 32px); }
.tuiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
.tuile { display: grid; gap: 10px; align-content: start; padding: 22px; border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--encre); background: #fff; box-shadow: var(--ombre); transition: border-color .15s, box-shadow .15s, transform .2s var(--ease); }
.tuile:hover { text-decoration: none; border-color: var(--t); box-shadow: 0 16px 36px -16px rgba(15, 26, 43, .3); transform: translateY(-3px); }
.tuile-icone { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 12px; background: var(--t-pale); color: var(--t); }
.tuile-icone svg { width: 24px; height: 24px; }
.tuile-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tuile-titre { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.tuile-compte { padding: 3px 9px; border-radius: 999px; background: var(--t-pale); color: var(--t); font-weight: 700; font-size: .78rem; white-space: nowrap; }
.tuile-texte { color: var(--encre-2); font-size: .95rem; }
.tuile-lien { color: var(--t); font-weight: 700; font-size: .9rem; }
.tuile:hover .tuile-lien span { display: inline-block; transform: translateX(3px); transition: transform .2s var(--ease); }

/* ── Pastilles, prix, places ──────────────────────────────────────────────── */
.pastille { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; background: var(--papier); color: var(--encre-2); }
.pastille-formation { background: var(--bleu-pale); color: var(--bleu); }
.pastille-atelier { background: var(--vert-pale); color: var(--vert); }
.pastille-evenement { background: var(--violet-pale); color: var(--violet); }
.pastille-complet { background: var(--corail-pale); color: var(--corail); }
.pastille-ex { background: transparent; color: var(--encre-3); border: 1px dashed var(--trait-2); }
.prix { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prix-grand { font-size: 2rem; letter-spacing: -0.02em; }
.places { color: var(--bleu); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.places-complet { color: var(--corail); }

/* ── Liste de séances ─────────────────────────────────────────────────────── */
.mois { margin-bottom: 2.2rem; }
.mois-titre { margin: 0 0 .8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--trait); color: var(--encre-3); font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
.liste { display: grid; border: 1px solid var(--trait); border-radius: var(--rayon); overflow: hidden; background: #fff; }
.ligne { display: grid; grid-template-columns: 64px 1fr auto 24px; align-items: center; gap: 18px; padding: 16px 20px 16px 16px; border-bottom: 1px solid var(--trait); border-left: 4px solid var(--t, var(--trait)); color: var(--encre); transition: background .12s; }
.ligne:last-child { border-bottom: 0; }
.ligne:hover { background: var(--papier); text-decoration: none; }
.ligne:hover .chevron { transform: translateX(3px); color: var(--bleu); }
.est-complet .ligne-titre { color: var(--encre-2); }
.date { display: grid; justify-items: center; line-height: 1; padding: 8px 0; border-radius: 10px; background: var(--t-pale, var(--papier)); }
.date-grand { padding: 12px 0; }
.date-grand .date-num { font-size: 1.9rem; }
.date-sem { color: var(--encre-3); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.date-num { margin: 4px 0 3px; font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--t, var(--encre)); }
.date-mois { color: var(--encre-2); font-weight: 600; font-size: .75rem; }
.ligne-corps { display: grid; gap: 4px; min-width: 0; }
.ligne-haut { display: flex; gap: 6px; flex-wrap: wrap; }
.ligne-titre { font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; line-height: 1.25; }
.ligne-meta { color: var(--encre-2); font-size: .92rem; }
.ligne-droite { display: grid; justify-items: end; gap: 4px; }
.chevron { color: var(--encre-3); font-weight: 700; transition: transform .2s var(--ease), color .15s; }

.vide { padding: 40px 24px; text-align: center; border: 1px dashed var(--trait-2); border-radius: var(--rayon); color: var(--encre-2); }
.vide-titre { color: var(--encre); font-weight: 700; font-size: 1.1rem; }
.vide p:last-child { margin: 1.2rem 0 0; }

/* ── Tarifs ───────────────────────────────────────────────────────────────── */
.tarifs { display: grid; gap: 14px; grid-template-columns: 1fr; align-items: stretch; }
.tarif { display: flex; flex-direction: column; box-shadow: none; }
/* Le bouton en bas de chaque carte, alignés d'une carte à l'autre quelle que
   soit la longueur de la liste au-dessus. */
.tarif-action { margin-top: auto; }
.tarif .coches { margin-bottom: 22px; }
.tarif-mise { background: var(--bleu); border-color: var(--bleu); color: #fff; box-shadow: 0 20px 40px -20px rgba(31, 85, 196, .6); }
.tarif-mise .carte-label { color: rgba(255, 255, 255, .7); }
.tarif-mise .tarif-unite { color: rgba(255, 255, 255, .7); }
.tarif-mise .coches li { color: rgba(255, 255, 255, .9); }
.tarif-mise .coches li::before { background: rgba(255, 255, 255, .16); }
.tarif-mise .coches li::after { border-color: #fff; }
.tarif-mise .btn-clair { background: #fff; border-color: #fff; color: var(--bleu); }
.tarif-mise .btn-clair:hover { background: var(--bleu-pale); border-color: var(--bleu-pale); }
/* Le bouton de paiement (démo) et sa mention « paiement sécurisé ». */
.btn-payer svg { width: 17px; height: 17px; flex: none; }
.note-paiement { display: flex; align-items: flex-start; gap: 8px; }
.note-paiement svg { width: 15px; height: 15px; flex: none; margin-top: .2em; color: var(--vert); }
.paiement-dlg { width: min(26rem, calc(100% - 32px)); padding: 28px; border: 0; border-radius: 16px; box-shadow: 0 30px 70px -20px rgba(15, 26, 43, .45); color: var(--encre); text-align: center; }
.paiement-dlg::backdrop { background: rgba(15, 26, 43, .45); }
.paiement-dlg h2 { margin: 14px 0 6px; font-size: 1.35rem; }
.paiement-dlg p { color: var(--encre-2); }
.paiement-dlg .note { display: block; margin: 0 0 18px; max-width: none; }
.paiement-quoi { margin: 0 0 14px; font-weight: 700; color: var(--encre) !important; }
.paiement-icone { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--vert-pale); color: var(--vert); }
.paiement-icone svg { width: 26px; height: 26px; }
.tarif-tag { padding: 3px 9px; border-radius: 999px; background: #fff; color: var(--bleu); font-size: .66rem; letter-spacing: .04em; white-space: nowrap; }
.tarif-prix { margin: 0 0 14px; font-weight: 800; font-size: 2rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tarif-unite { color: var(--encre-3); font-weight: 600; font-size: 1rem; letter-spacing: 0; }
.coches { display: grid; gap: 7px; }
.coches li { position: relative; padding-left: 24px; color: var(--encre-2); font-size: .95rem; }
.coches li::before { content: ""; position: absolute; left: 0; top: .32em; width: 14px; height: 14px; border-radius: 50%; background: var(--bleu-pale); }
.coches li::after { content: ""; position: absolute; left: 4px; top: calc(.32em + 3px); width: 6px; height: 4px; border-left: 2px solid var(--bleu); border-bottom: 2px solid var(--bleu); transform: rotate(-45deg); }

/* ── Associés, galerie, pourquoi, pratique ────────────────────────────────── */
.associes { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.associe img, .associe-vide { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon); background: var(--papier); margin-bottom: 12px; }
.associe-vide { display: block; }
.associe-role { margin: 4px 0 8px; color: var(--bleu); font-weight: 700; font-size: .85rem; }
.associe-texte { color: var(--encre-2); font-size: .95rem; }
.galerie { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.galerie figure { margin: 0; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }
.galerie figcaption { margin-top: 6px; color: var(--encre-3); font-size: .85rem; }
.pourquoi { display: grid; gap: 20px; grid-template-columns: 1fr; }
.pourquoi-item { padding: 20px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); }
.pourquoi-n { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; border-radius: 10px; background: var(--t-pale, var(--bleu-pale)); color: var(--t, var(--bleu)); font-weight: 800; font-variant-numeric: tabular-nums; }
.pourquoi-item p { margin: 8px 0 0; color: var(--encre-2); }
.pratique { display: grid; gap: 28px; grid-template-columns: 1fr; }
.pratique h3 { margin-bottom: 8px; }
.pratique p { color: var(--encre-2); }

/* Le créneau « À fournir » (mode démo seulement) : ce qu'on attend du client,
   rendu visible, jamais rempli au plausible. */
.creneau { padding: 22px 24px; border: 1px dashed var(--trait-2); border-radius: var(--rayon); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(15, 26, 43, .025) 10px 11px); }
.creneau-label { margin: 0 0 6px; color: var(--bleu); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.creneau-titre { margin: 0 0 4px; font-weight: 700; }
.creneau-quoi { margin: 0; color: var(--encre-2); font-size: .92rem; max-width: 64ch; }

/* ── Têtes de page : chaque page porte sa couleur, celle de sa tuile ───────── */
.tete { position: relative; padding: clamp(32px, 5vw, 56px) 0 0; }
.tete-teinte, .tete-creme, .tete-sombre { padding-bottom: clamp(28px, 4vw, 44px); }
.tete-teinte { background: var(--t-pale); }
.tete-teinte .hero-motif { display: none; }
.tete-teinte .sur-titre { color: var(--t); }
.tete-creme { background: var(--creme); }
.tete-sombre { background: var(--bleu); color: #fff; overflow: hidden; }
.tete-sombre .int { position: relative; }
.tete-sombre h1 { color: #fff; }
.tete-sombre .sur-titre { color: rgba(255, 255, 255, .78); }
.tete-sombre .tete-p { color: rgba(255, 255, 255, .82); }
.tete-icone { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 20px; border-radius: 14px; background: #fff; color: var(--t, var(--bleu)); box-shadow: var(--ombre); }
.tete-icone svg { width: 28px; height: 28px; }
.tete-sombre .tete-icone { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.sur-titre-t { color: var(--t); }
.tete-contact .contact-moyens { margin-top: 32px; }
.tete-teinte .onglets, .tete-sombre .onglets { border-bottom: 0; padding-bottom: 0; }
.tete-teinte .onglet { background: #fff; border-color: transparent; }
.tete-teinte .onglet.actif { background: var(--t); color: #fff; }
.tete-sombre .onglet { border-color: rgba(255, 255, 255, .3); color: #fff; }
.tete-sombre .onglet:hover { border-color: #fff; color: #fff; }
.tete-sombre .onglet-n { background: rgba(255, 255, 255, .14); color: #fff; }
.tete-sombre .onglet.actif { background: #fff; border-color: #fff; color: var(--encre); }
.tete-sombre .onglet.actif .onglet-n { background: var(--papier); color: var(--encre-2); }
.tete-fiche .fil a { color: var(--t); }
.tete-p { margin: 14px 0 0; color: var(--encre-2); font-size: 1.1rem; max-width: 60ch; }
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--trait); }
.onglet { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--trait-2); border-radius: 999px; color: var(--encre-2); font-weight: 700; font-size: .9rem; }
.onglet:hover { text-decoration: none; border-color: var(--encre-3); color: var(--encre); }
.onglet.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.onglet-n { padding: 1px 7px; border-radius: 999px; background: var(--papier); color: var(--encre-2); font-size: .78rem; }
.onglet.actif .onglet-n { background: rgba(255, 255, 255, .18); color: #fff; }
.tete + .section { padding-top: 28px; }
.tete-teinte + .section, .tete-sombre + .section, .tete-creme + .section { padding-top: clamp(32px, 4vw, 48px); }
.fil { margin: 0 0 18px; color: var(--encre-3); font-size: .9rem; }
.fil span:last-child { color: var(--encre-2); }
.fiche-haut { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── Fiche séance ─────────────────────────────────────────────────────────── */
.fiche-grille { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
.prose { color: var(--encre-2); font-size: 1.05rem; max-width: 64ch; }
.prose h2 { font-size: 1.25rem; margin: 1.6rem 0 .6rem; }
.prose-long { max-width: 72ch; }
.faits { display: grid; gap: 0; margin: 1.6rem 0 1.2rem; border-top: 1px solid var(--trait); }
.faits div { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.faits dt { color: var(--encre-3); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; padding-top: 2px; }
.faits dd { margin: 0; font-weight: 600; }
.fiche-resa { position: sticky; top: calc(var(--barre-h) + 20px); display: grid; gap: 12px; border-top: 5px solid var(--t, var(--bleu)); }
.fiche-prix { display: grid; gap: 2px; margin: 0; }
.fiche-prix-note { color: var(--encre-3); font-size: .85rem; }
.fiche-places { margin: 0; color: var(--bleu); font-weight: 700; }
.fiche-complet { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--corail-pale); color: var(--corail); font-weight: 600; font-size: .95rem; }
.fiche-resa .note { margin: 4px 0 0; font-size: .85rem; }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.section-contact { background: var(--papier); }
.contact-grille { display: grid; gap: 28px; grid-template-columns: 1fr; }
.contact-adresse { font-size: 1.1rem; font-weight: 600; }
.contact-moyens { display: grid; gap: 12px; grid-template-columns: 1fr; align-content: start; }
.moyen { display: grid; gap: 2px; padding: 16px 18px; background: #fff; border: 1px solid var(--trait); border-radius: var(--rayon); color: var(--encre); }
.moyen:hover { text-decoration: none; border-color: var(--bleu); }
.moyen-label { color: var(--encre-3); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.moyen-val { font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.contact-page { display: grid; gap: 36px; grid-template-columns: 1fr; }

/* ── Pied ─────────────────────────────────────────────────────────────────── */
.pied { margin-top: 40px; padding: 48px 0 28px; background: var(--encre); color: rgba(255, 255, 255, .8); }
.pied-grille { display: grid; gap: 24px; grid-template-columns: 1fr; }
.pied-nom { margin: 0 0 6px; color: #fff; font-weight: 800; font-size: 1.1rem; }
.pied-ligne { margin: 0 0 4px; font-size: .92rem; }
.pied-liens { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 0; }
.pied-liens a { color: #fff; font-weight: 600; font-size: .92rem; }
.seiyar { width: min(1120px, 100% - clamp(32px, 8vw, 64px)); margin: 36px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); text-align: center; color: rgba(255, 255, 255, .65); font-size: .82rem; }
.seiyar a { color: #fff; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }

/* ── Écran large ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .tarifs, .pourquoi { grid-template-columns: repeat(3, 1fr); }
  .tuiles { grid-template-columns: repeat(2, 1fr); }
  .prochaine-corps { grid-template-columns: 84px 1fr; }
  .pratique { grid-template-columns: 1fr 1fr; }
  .contact-grille { grid-template-columns: .8fr 1.2fr; }
  .contact-moyens { grid-template-columns: 1fr 1fr; }
  .contact-moyens-3 { grid-template-columns: repeat(3, 1fr); }
  .pied-grille { grid-template-columns: 1.2fr 1fr; }
}
@media (min-width: 900px) {
  .hero-grille { grid-template-columns: 1.15fr .85fr; gap: 64px; }
  .tuiles { grid-template-columns: repeat(4, 1fr); }
  .fiche-grille { grid-template-columns: 1fr 360px; gap: 56px; }
  .contact-page { grid-template-columns: 1fr 1fr; gap: 56px; }
}
@media (max-width: 899px) {
  .barre-nav { display: none; }
  .burger { display: flex; }
  .barre-droite .btn { display: none; }
}
@media (max-width: 639px) {
  .ligne { grid-template-columns: 56px 1fr; gap: 14px; padding: 14px 16px 14px 12px; }
  .prochaine-bas { flex-wrap: wrap; }
  .prochaine-cta { margin-left: 0; flex-basis: 100%; }
  .ligne-droite { grid-column: 2; grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 12px; }
  .chevron { display: none; }
  .date-num { font-size: 1.3rem; }
  .hero-actions .btn { flex: 1 1 100%; }
  .faits div { grid-template-columns: 1fr; gap: 2px; }
  .section-tete { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .barre, .volet, .burger, .annonce, .fiche-resa .btn, .pied { display: none !important; }
  body { font-size: 12pt; }
}