/* ============================================================
   COMPONENTS — annesoeapas.fr
   Briques réutilisables sur plusieurs templates (cartes, FAQ, CTA,
   fil d'Ariane, encart note). Chargé globalement après layout.css.
   ============================================================ */

/* --- Lien téléphone façon bouton --- */
.btn-tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-comfort);
  font-weight: 600;
  text-decoration: none;
  color: var(--link);
}

/* --- Grille de cartes / cartes (blanches + bordure accent : règle pastel/blanc) --- */
.services-grid {
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.card {
  background: var(--bg);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.card h3 { margin-bottom: var(--space-2); }
/* Affordance (V2) : léger lift + ombre au survol/focus clavier */
.card:hover,
.card:focus-within {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(61, 40, 23, 0.15);
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover,
  .card:focus-within { transform: none; }
}
@media (min-width: 48em) {
  .services-grid { grid-template-columns: repeat(3, 1fr); }
}

/* --- FAQ : accordéon natif (zéro JS) --- */
.faq { padding-block: var(--section-py); }
.faq-item {
  border-bottom: 1px solid var(--color-peche);
  padding-block: var(--space-2);
}
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-heading);
  padding: var(--space-2) 0;
  list-style: none; /* retire le marqueur natif (chevron custom ci-dessous) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  transition: color 150ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover,
.faq-item summary:focus-visible { color: var(--heading); }
.faq-item[open] summary { color: var(--heading); }
/* Chevron custom (carré tourné) : pointe vers le bas, pivote vers le haut à l'ouverture */
.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform 200ms ease;
}
.faq-item[open] summary::after { transform: rotate(225deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary,
  .faq-item summary::after { transition: none; }
}
.faq-answer { padding: var(--space-2) 0; }

/* --- CTA final (menthe + charbon = 12,7:1) --- */
.cta-final {
  padding-block: var(--section-py);
  text-align: center;
  background: var(--bg-menthe);
}
/* Rythme interne (le reset met margin:0 → titre collé au sous-titre/bouton).
   Robuste aux 2 structures : titre+sous-titre+bouton (home) ET titre+bouton
   (layouts service/guide/page). Le margin-collapsing fusionne les marges
   adjacentes → bouton toujours détaché du bloc qui le précède. */
.cta-final h2 { margin-bottom: var(--space-3); }      /* titre → sous-titre/bouton */
.cta-final p:has(.btn) { margin-top: var(--space-4); } /* bouton → contenu au-dessus */
/* Bloc CTA à 2 boutons (à-propos, cours-collectifs) — boutons à LARGEUR ÉGALE.
   Mobile : empilés (un sous l'autre), pleine largeur → taille égale. ≥36em : côte à côte, largeur égale. Sébastien 2026-06-07. */
.cta-actions {
  display: flex;
  gap: var(--space-3);
  flex-direction: column;        /* mobile : empilés */
  align-items: stretch;          /* mobile : pleine largeur → taille égale */
  max-width: 34rem;
  margin-inline: auto;
}
.cta-actions .btn { text-align: center; }
@media (min-width: 36em) {
  .cta-actions { flex-direction: row; justify-content: center; }
  .cta-actions .btn { flex: 1 1 0; }   /* desktop : même largeur en ligne */
}

/* CTA « bouton + lien téléphone » (accueil, 1er échange, merci, guides) :
   empilés en mobile (bouton au-dessus, tél en dessous), côte à côte ≥36em. Sébastien 2026-06-07. */
.btn-pair { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.hero-actions, .premier-echange-actions, .btn-pair { flex-direction: column; align-items: center; }
@media (min-width: 36em) {
  .hero-actions, .premier-echange-actions, .btn-pair { flex-direction: row; }
  .btn-pair { justify-content: center; }
}

/* --- Maillage interne « Autres accompagnements » (pages service) ---
   Section top-level sans padding propre jusqu'ici → harmonisée. */
.related-services { padding-block: var(--section-py); }
/* Carte entière cliquable (V5) — stretched-link CSS pur, 0 JS.
   Scopé à .related-services : ces cartes ne contiennent qu'un seul lien. */
.related-services .card { position: relative; }
.related-services .card h3 { margin-bottom: 0; }
.related-services .card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}

/* --- Fil d'Ariane --- */
/* Haut aligné sur le rythme de l'accueil (hero mobile = --space-5) pour cohérence
   inter-pages ; bas resserré pour garder le proof-band proche (brief 2026-06-06). */
.breadcrumb { padding-top: var(--space-5); padding-bottom: var(--space-3); }
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  font-size: 0.95rem;
}
.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: var(--space-2);
  color: var(--accent);
}

/* --- Encart note (ex. E-APAS médical) — bleu + charbon = 13:1 --- */
.notice {
  background: var(--bg-bleu);
  color: var(--text);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-block: var(--space-3);
}

/* --- Encart « Bon à savoir » (tarifs massage) (V1) — pêche + charbon = 9,3:1 --- */
.bon-a-savoir {
  background: var(--bg-peche);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-block: var(--space-4);
}
.bon-a-savoir h3 { margin-bottom: var(--space-2); }
.bon-a-savoir ul { margin: 0; padding-left: var(--space-4); }
.bon-a-savoir li + li { margin-top: var(--space-1); }

/* --- Stat sourcée (GEO 2026-06-08) : chiffre + lien source VISIBLE et discret (anti-cloaking + E-E-A-T) --- */
.stat-source { margin-block: var(--space-3); }
.stat-source a { font-size: 0.85em; }

/* --- Corps de page interne : rythme des sections --- */
.service-body > section,
.page-body > section,
.guide-body > section,
.legal-body > section {
  padding-block: var(--space-5);
}

/* --- Rythme de lecture interne : titres ↔ contenu (service / guides / légales) ---
   Le reset global met margin:0 → sans ça les titres collent à leur paragraphe.
   Cible les titres de section (pas les .card h3 des grilles, déjà gérés).
   .legal-body inclus (mentions légales + politique de confidentialité) → même
   respiration H1/H2/P que le reste du site (2026-06-08, demande Sébastien). */
.service-body > h1,
.page-body > h1,
.guide-body > h1,
.legal-body > h1,
.service-body > section > :is(h2, h3),
.page-body > section > :is(h2, h3),
.guide-body > section > :is(h2, h3),
.legal-body > section > :is(h2, h3) {
  margin-bottom: var(--space-4); /* 1.5rem — titre → texte */
}
/* Respiration entre paragraphes/listes successifs d'une même section */
.service-body > section > :is(p, ul, ol) + :is(p, ul, ol),
.page-body > section > :is(p, ul, ol) + :is(p, ul, ol),
.guide-body > section > :is(p, ul, ol) + :is(p, ul, ol),
.legal-body > section > :is(p, ul, ol) + :is(p, ul, ol) {
  margin-top: var(--space-3); /* 1rem */
}

/* --- Bande preuves « en scène » (P1) — bleu poudré + charbon = 13:1 ; icônes brun ≥7:1 --- */
.proof-band {
  background: var(--bg-peche); /* pêche partout = couleur de l'accueil (Sébastien 2026-06-07, uniformisation du bandeau) */
  padding-block: var(--space-1); /* mobile : bandeau très fin sur les pages service (brief 2026-06-06) */
}
/* Accueil : même pêche, mais hauteur plus aérée (--space-4) car suivie d'une section respirante. */
.proof-band--accueil { padding-block: var(--space-4); }
/* Pages service/guides : de l'air sous la bande avant le H1/contenu (cohérence
   inter-pages, brief 2026-06-06). L'accueil est exclu (suivi d'une section aérée). */
.proof-band:not(.proof-band--accueil) { margin-bottom: var(--space-5); }
/* Mobile : moins d'air sous le bandeau (il est déjà fin mais l'écart avant le H1 le rend trop haut). */
@media (max-width: 47.99em) {
  .proof-band:not(.proof-band--accueil) { margin-bottom: var(--space-3); } /* 2rem → 1rem */
}
.proof-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;            /* mobile : flux centré qui s'enroule (2-3 rangées) */
  justify-content: center;
  align-items: center;
  gap: var(--space-1) var(--space-3); /* mobile : interligne resserré (brief 2026-06-06) */
}
.proof-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: 0.875rem;        /* mobile : texte resserré (brief 2026-06-06) */
}
@media (min-width: 48em) {
  .proof-band { padding-block: var(--space-2); } /* desktop : retour au bandeau fin standard */
  .proof-item { font-size: 0.95rem; }            /* desktop : taille standard */
  .proof-icon { width: 1.5rem; height: 1.5rem; } /* desktop : picto standard */
  .proof-list {                /* desktop : retour en ligne centrée */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3) var(--space-5);
  }
}
.proof-icon {
  width: 1.25rem;             /* mobile : picto resserré (brief 2026-06-06) */
  height: 1.25rem;
  color: var(--accent);
  flex-shrink: 0;
}

/* --- Process « 1re séance » (P1) — étapes numérotées, badge via CSS counter (zéro JS) --- */
.process { padding-block: var(--section-py); }
.process-steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.process-step { text-align: center; } /* badge + titre + texte centrés (Sébastien 2026-06-07) */
.process-step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-inline: auto; /* centre le badge rond dans la carte d'étape */
  margin-bottom: var(--space-2);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  border-radius: 50%;
}
.process-step h3 { margin-bottom: var(--space-1); }
@media (min-width: 48em) {
  .process-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .process-steps { grid-template-columns: repeat(4, 1fr); }
}

/* --- En-tête « peurs » des pages service (P1) — lead avec bordure accent --- */
.service-fears {
  border-left: 4px solid var(--accent);
  padding: var(--space-2) var(--space-3);
  margin-block: var(--space-3);
  font-size: 1.05rem;
}

/* --- Bloc « 1er échange 15 min » (P2) — pêche + charbon = 9,3:1 --- */
.premier-echange {
  background: var(--bg-peche);
  padding-block: var(--section-py);
}
.premier-echange .container { max-width: 48rem; }
.premier-echange p { margin-top: var(--space-4); } /* + d'air titre→para / entre paras (Sébastien 2026-06-07) */
.premier-echange-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5); /* respiration avant les boutons */
}

/* --- Note de tableau (ex. astérisque crédit d'impôt) (P2) --- */
.table-note {
  margin-top: var(--space-3);
  font-size: 0.9rem;
}

/* --- Note EEAT (cadre médical) (P3) --- */
.eeat-note {
  margin-top: var(--space-3);
  font-size: 0.95rem;
  border-left: 4px solid var(--accent);
  padding-left: var(--space-3);
}

/* --- Sticky CTA mobile « Me faire rappeler » (P3) — mobile only, a11y-safe (WCAG 2.4.11) --- */
.sticky-cta { display: none; }
@media (max-width: 47.99em) {
  .sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 900;
    display: block;
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    border-top: 1px solid var(--accent);
  }
  .sticky-cta .btn { display: flex; width: 100%; }
  /* Réserve la hauteur de la barre → jamais de recouvrement du contenu/footer */
  body { padding-bottom: 4.5rem; }
  /* Élément focalisé toujours remonté au-dessus de la barre (SC 2.4.11 Focus Not Obscured) */
  html { scroll-padding-bottom: 4.5rem; }
}

/* --- Ligne « Mis à jour le … » (dateModified visible) — discrète, contraste plein --- */
.page-updated {
  margin-top: var(--space-4);
  font-size: 0.85rem;
  font-style: italic;
}

/* --- Invite test d'orientation (complément discret, fond neutre pour ne pas
   concurrencer les bandes pastel des CTA RDV) --- */
.quiz-invite { padding-block: var(--section-py); text-align: center; }
.quiz-invite-text {
  font-family: var(--font-heading);
  color: var(--heading);
  font-size: 1.15rem;
  margin-bottom: var(--space-3);
}

/* --- Bloc présence (Lot 2 humaniser) — visage + parole « je » + sécurité --- */
.presence { padding-block: var(--section-py); }
.presence-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}
.presence-photo img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center; /* master déjà recadré carré (visage centré) */
}
.presence-text { max-width: 48rem; }
.presence-text h2 { margin-bottom: var(--space-2); }
@media (min-width: 48em) {
  .presence-inner { flex-direction: row; align-items: center; text-align: left; gap: var(--space-4); }
  .presence-photo { flex-shrink: 0; }
}

/* --- Visuels éditoriaux additifs (Lot 2) — photos réelles, responsive --- */
.about-img, .media-figure img {
  border-radius: var(--radius);
  max-width: 28rem;
}

/* --- Photo d'ouverture page service (partial service-photo.njk) ---
   Centrée, bornée, gère portrait ET paysage (img width:100% height:auto). */
.service-photo {
  margin-block: var(--space-4);
  margin-inline: auto;
  max-width: 36rem;
}
.service-photo img {
  width: 100%;
  height: auto;
  max-height: 26rem;            /* plafond mobile : évite les portraits trop hauts */
  object-fit: cover;
  object-position: center top;  /* garde le visage / haut de cadre */
  border-radius: var(--radius);
}
.service-photo figcaption {
  margin-top: var(--space-2);
  font-size: 0.9rem;
  font-style: italic;
  text-align: center;
}

/* --- Cartes tarifs (B1 — veille croisée P×G 2026-06-06) ---
   Sobres : bordure brun (ancrage charte), fond blanc cassé, ZÉRO ombre/gradient/animation.
   Crédit d'impôt = ligne calme « soit X € net », jamais de prix barré (pas une promo). */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;     /* mobile : 1 carte par ligne, empilées */
  gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (min-width: 48em) {
  .pricing-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
.pricing-card h3 { margin: 0; }
.pricing-card__sub { margin: 0; font-size: 0.95rem; }
.pricing-card__price {
  font-family: var(--font-heading);
  color: var(--heading);
  font-size: 2.2rem;
  line-height: 1.1;
  margin-top: var(--space-2);
}
.pricing-card__price small { font-size: 1rem; font-weight: 400; }
.pricing-card__net { margin: 0; font-size: 0.95rem; }
.pricing-card__list { list-style: none; padding: 0; margin: var(--space-2) 0 0; }
.pricing-card__list li { padding-left: 1.4em; position: relative; }
.pricing-card__list li + li { margin-top: var(--space-1); }
.pricing-card__list li::before {
  content: "\2713"; position: absolute; left: 0;
  color: var(--accent); font-weight: 700;
}
/* margin-top:auto = bouton poussé en bas → alignement entre cartes de hauteurs inégales ;
   align-self:center = bouton centré horizontalement (brief LOT 4, 2026-06-07). */
.pricing-card .btn-cta { margin-top: auto; align-self: center; }
/* Variante « liste compacte » (massages, grille dense) — mêmes boîtes, lignes prix */
.pricing-card__rows { margin: var(--space-2) 0 0; }
.pricing-card__rows p { margin: 0; }
.pricing-card__rows p + p { margin-top: var(--space-2); }
.pricing-card__rows strong { color: var(--heading); }
.pricing-card__rows small { font-style: italic; }
.pricing-note { margin-top: var(--space-3); font-size: 0.95rem; }

/* Cours collectifs — grilles de cartes (réutilisent la boîte .pricing-card :
   bordure brun + fond blanc cassé + radius, comme les cartes tarifs ; brief LOT 5 redesign 2026-06-07).
   Créneaux : 1 carte par commune. Disciplines : 1 carte par discipline. */
.creneaux-grid,
.disciplines-grid {
  display: grid;
  grid-template-columns: 1fr;        /* mobile : empilé */
  gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (min-width: 48em) {
  .creneaux-grid,
  .disciplines-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64em) {
  .disciplines-grid { grid-template-columns: repeat(3, 1fr); } /* 5 disciplines : 3 colonnes en large */
}
/* Alignement titre↔titre et texte↔texte entre cartes disciplines (Sébastien 2026-06-07).
   Subgrid : chaque carte couvre 2 lignes de la grille parente (titre / paragraphe) →
   un titre sur 2 lignes ne décale plus le paragraphe des cartes voisines d'une même rangée.
   Padding uniforme = alignement conservé. Sans support subgrid → dégrade en pile simple (OK). */
.disciplines-grid > .pricing-card {
  grid-row: span 2;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: var(--space-2); /* conserve l'espacement titre→texte (sinon = gap parent space-4) */
}
/* Carte créneau : sous-titre « jours » + liste des séances de la commune */
.creneau-card__sub { margin: 0; font-size: 0.95rem; font-style: italic; }
/* Ligne code postal · département (signal SEO/GEO local + désambiguïsation) — Sébastien 2026-06-07 */
.creneau-card__cp { margin: 0; font-size: 0.9rem; color: var(--heading); font-weight: 600; }
.creneau-slots { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.creneau-slots li { display: flex; flex-direction: column; gap: 2px; }
.creneau-slots li + li {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid rgb(61 40 23 / 0.12); /* brun --color-brun à 12 % — séparateur calme entre séances */
}
.creneau-when { font-family: var(--font-heading); color: var(--heading); font-weight: 700; }
.creneau-what { font-size: 0.95rem; }
/* Carte « ouverture prochaine » — créneau pas encore actif (pré-inscription) : bordure pointillée + badge pêche. */
.creneau-card--soon { border-style: dashed; }
.creneau-card__badge {
  align-self: flex-end; /* badge « Ouverture prochaine » calé à droite (Sébastien 2026-06-07) */
  margin: 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--heading);
  background: var(--bg-peche);
  padding: 2px var(--space-2);
  border-radius: 999px;
}
/* Badge « Cours ouvert » (commune active) — menthe pastel = signal positif, texte brun ≥7:1 (Sébastien 2026-06-07) */
.creneau-card__badge--open { background: var(--bg-menthe); }
.creneaux-soon-lead { margin-top: var(--space-5); }
/* --- Carte commune avec photo de village en fond + voile sombre (Sébastien 2026-06-07).
   Photo via {% image %} (eleventy-img : AVIF/WebP, lazy, optimisée) posée en fond absolu ;
   voile dégradé sombre garantit le contraste du texte blanc (WCAG 2.2 AA — à RE-vérifier
   WAVE/axe sur staging, G6 🟥 public APA-S). Sans photo (Beaumont) → fond brun fallback. --- */
.creneau-card--photo {
  position: relative;
  isolation: isolate;          /* confine les z-index négatifs à la carte */
  overflow: hidden;
  min-height: 26rem;           /* hauteur uniforme des 4 cartes — au-dessus de la + grande (Céreste, 4 créneaux), Sébastien 2026-06-07 #ajustable */
  background: var(--heading);  /* fallback brun + filet si l'image ne charge pas */
  border-color: var(--heading);
  color: #fff;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.45); /* lisibilité d'appoint (le voile assure le ratio AA) */
}
.creneau-card--photo > picture { position: absolute; inset: 0; z-index: -2; }
.creneau-card__bg { width: 100%; height: 100%; object-fit: cover; display: block; }
.creneau-card--photo::after {  /* voile dégradé sombre par-dessus la photo */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(28 19 11 / 0.6), rgb(28 19 11 / 0.82));
}
.creneau-card--photo h3,
.creneau-card--photo .creneau-card__cp,
.creneau-card--photo .creneau-when { color: #fff; }
.creneau-card--photo .creneau-slots li + li { border-top-color: rgb(255 255 255 / 0.28); }
.creneau-card--photo .creneau-card__badge { text-shadow: none; } /* badges gardent leur fond propre */

/* --- Carte créneau entièrement cliquable (stretched-link CSS pur, 0 JS) — cap
   conversion (brief 2026-06-08) : commune ouverte → /contact/, ouverture prochaine
   → /pre-inscription-cours/?commune=<slug>. Même pattern que .services /
   .related-services : 1 SEUL lien par carte (le h3 a). Lien INTERNE → pas de
   target _blank. L'overlay ::after passe au-dessus des horaires (texte non
   sélectionnable) = compromis assumé du pattern. --- */
.creneau-card { position: relative; }
.creneau-card h3 { margin-bottom: 0; }
.creneau-card h3 a { color: inherit; text-decoration: none; }
.creneau-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                 /* au-dessus du contenu carte (sous rien) → capte le clic */
  border-radius: var(--radius);
}
/* Repère « call to action » bas de carte — NON interactif (aria-hidden), le lien
   reste le h3. Souligné au survol/focus de la carte. */
.creneau-card__cta {
  margin-top: auto;        /* pousse le CTA en bas de carte (gap flex assure l'espacement) — aligne entre cartes */
  align-self: flex-end;    /* cale à droite (axe transversal du flex column) */
  text-align: right;
  font-family: var(--font-heading);
  font-weight: 700;
}
.creneau-card:hover .creneau-card__cta,
.creneau-card:focus-within .creneau-card__cta { text-decoration: underline; }
/* Focus clavier visible sur TOUTE la carte (WCAG 2.2 SC 2.4.7 — G6 🟥 public APA-S). */
.creneau-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.creneau-card--photo:focus-within { outline-color: #fff; } /* contraste sur photo sombre */

/* --- Carte discipline cliquable (Pilates pilote, LOT 2026-06-08) — stretched-link CSS pur, 0 JS.
   1 SEUL lien par carte (le h3 a) → toute la carte capte le clic (cible tactile = carte entière,
   WCAG 2.2 SC 2.5.8 large). Lien interne → pas de target _blank. Même principe que .creneau-card.
   N'affecte QUE la carte portant .pricing-card--link (les 4 autres disciplines restent inertes). --- */
.pricing-card--link { position: relative; }
.pricing-card--link h3 { margin-bottom: 0; }
.pricing-card--link h3 a { color: inherit; text-decoration: none; }
.pricing-card--link h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                 /* capte le clic sur toute la carte */
  border-radius: var(--radius);
}
/* Repère « call to action » bas de carte — NON interactif, le lien reste le h3.
   Brun --accent = 13:1 sur blanc (contraste AA large garanti). Souligné au survol/focus. */
.card-more {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--accent);
}
.pricing-card--link:hover .card-more,
.pricing-card--link:focus-within .card-more { text-decoration: underline; }
/* Focus clavier visible sur TOUTE la carte (WCAG 2.2 SC 2.4.7 — G6 🟥 public APA-S). */
.pricing-card--link:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Alignement des « En savoir plus → » entre cartes : le subgrid donne des cellules
   « paragraphe » de même hauteur par rangée → le <p> en flex column pousse le repère
   en bas (margin-top:auto), donc tous les repères s'alignent quelle que soit la
   longueur du texte. padding-top garde un écart mini sur la carte la plus haute. */
.disciplines-grid .pricing-card--link p { display: flex; flex-direction: column; }
.disciplines-grid .pricing-card--link .card-more { margin-top: auto; padding-top: var(--space-2); align-self: flex-end; text-align: right; }

/* --- Séparateur ornemental sobre (B3) — ponctue contenu → blocs humain/CTA.
   Brun ancrage, court, centré. Décoratif (hr = rupture thématique a11y). --- */
.sep-soft {
  width: 56px;
  height: 2px;
  margin: var(--space-5) auto;
  border: 0;
  background: var(--accent);
  opacity: 0.5;
}

/* --- Carte de confirmation (pages /merci*, /oups, RGPD) ---
   Reprend la presentation des e-mails transactionnels (carte blanche sur
   creme, encart menthe "Et maintenant ?") - tokens existants, zero couleur
   nouvelle. L encart .is-warn (peche) sert aux pages d erreur. */
.confirmation-card {
  max-width: 38rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--color-peche);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden; /* bandeau et pied epousent les coins arrondis */
  text-align: center;
}
/* Bandeau logo (header des e-mails : creme + lisere peche) */
.confirmation-card__head {
  background: var(--bg);
  border-bottom: 1px solid var(--color-peche);
  padding: var(--space-3);
}
.confirmation-card__head img { display: block; margin-inline: auto; height: 52px; width: auto; }
.confirmation-card__body { padding: clamp(var(--space-4), 5vw, var(--space-5)); }
.confirmation-card h1 { margin-bottom: var(--space-4); }
.confirmation-card__body > p + p { margin-top: var(--space-3); }
/* Pied signature (footer brun des e-mails) */
.confirmation-card__foot {
  background: var(--color-brun);
  color: var(--text-invert);
  padding: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.6;
}
.confirmation-card__foot p { margin: 0; }
.confirmation-card__name { font-family: var(--font-heading); font-size: 1.05rem; }
.confirmation-card__tag { color: var(--color-peche); }
.confirmation-card__foot a { color: var(--text-invert); }
.confirmation-next {
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-menthe);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  text-align: left;
}
.confirmation-next strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--heading);
  margin-bottom: var(--space-1, 0.25rem);
}
.confirmation-next.is-warn { background: var(--bg-peche); }
.confirmation-card .btn-pair { margin-top: var(--space-4); justify-content: center; }