/* =============================================================
   Refinements UX/UI — surcharge des fichiers V4 pour homogénéité
   Règles : Refactoring UI + Laws of UX + bot_graphic
   ============================================================= */

/* ---------- 1. Rythme vertical des sections ----------
   Design system V4 : --space-9 (96px) entre sections. Mais pour éviter le double
   cumul (96 bottom + 96 top = 192px), on utilise padding-bottom uniquement sur les
   sections normales et padding-top uniquement sur la première après le hero. */
.section {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.section--tight {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}
@media (max-width: 900px) {
  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .section--tight { padding-top: var(--space-5); padding-bottom: var(--space-5); }
}

/* ---------- 1bis. Boutons hero : même taille forcée — pilier ET hero-page ---------- */
.pilier-hero__actions,
.hero-page__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  align-items: stretch;
}
.pilier-hero__actions .btn,
.hero-page__actions .btn {
  min-height: 52px;
  padding: 0 var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
}

/* ---------- 1quater. MÉGA-MENU Habilitation (design V4) ---------- */
.site-nav .has-megamenu { position: relative; }
.site-nav .has-megamenu > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.megamenu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  background: var(--color-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-4);
  width: 600px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Fermé par défaut — mais avec un délai de fermeture (250 ms) pour tolérer
     une trajectoire de souris qui sort brièvement de la zone (trajet diagonal
     lien → panneau). display:none couperait net, d'où opacity/visibility. */
  visibility: hidden;
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.25s;
}
.site-nav .has-megamenu:hover .megamenu,
.site-nav .has-megamenu:focus-within .megamenu {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s;
}
/* Pont invisible : comble l'espace entre le lien « Habilitation » et le panneau
   pour que la souris puisse descendre tout droit sans fermer le menu. */
.site-nav .has-megamenu::after {
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  top: 100%;
  height: 16px;
}
.megamenu__featured {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--color-abricot-soft);
  border: 1px solid var(--color-abricot-line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base);
}
.megamenu__featured:hover { background: var(--color-abricot); color: var(--color-paper); }
.megamenu__featured:hover * { color: var(--color-paper) !important; }
.megamenu__featured strong {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  color: var(--color-abricot-hover);
}
.megamenu__featured span {
  font-size: var(--text-xs);
  color: var(--color-ink-500);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
}
.megamenu__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}
.megamenu__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-fast);
}
.megamenu__item:hover { background: var(--color-paper-alt); }
.megamenu__item strong {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  color: var(--color-abricot);
  letter-spacing: 0.02em;
}
.megamenu__item span {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

/* ---------- 1ter. Force réelle suppression underline H1-H6 ---------- */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
summary, summary > * {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 0;
}
/* Sécurité : strip text-decoration sur tous les a wrapper des headings */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none !important;
  border-bottom: 0 !important;
  color: inherit;
}

/* ---------- 2. Bandeau réassurance horizontal : aérer ----------
   Items mieux espacés, séparateurs nets, alignement vertical clair.
   `overflow: visible` + `border-radius: 0` annulent le clipping hérité de `.reassure`
   qui rognait le border-bottom (parent avait `border-radius` + `overflow: hidden`). */
.reassure--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  /* Encadré 4 côtés (consigne 31/05) — auparavant seulement top + bottom, le
     bandeau n'était pas fermé à gauche/droite. */
  border: var(--border-hairline);
  border-radius: 0;
  overflow: visible;
}
.reassure--inline .reassure__item {
  flex: 1 1 auto;
  min-width: 140px;
  padding: var(--space-3) var(--space-5);
  border-right: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reassure--inline .reassure__item:last-child { border-right: 0; }
.reassure--inline .reassure__big {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: var(--track-h);
  color: var(--color-ink);
}
.reassure--inline .reassure__big--abricot { color: var(--color-abricot); }
.reassure--inline .reassure__label {
  font-size: var(--text-sm);
  color: var(--color-ink-500);
  line-height: var(--lh-snug);
}

/* ---------- 3. Cartes formation alignées en hauteur ----------
   La grille étire les cartes ; .fcard devient flex-column avec foot collé en bas. */
.related-grid,
.niveaux-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); /* 3 cols max sur 1440px */
  gap: var(--space-5);
  align-items: stretch;
}
/* Limite stricte à 3 colonnes sur desktop large pour respirer */
@media (min-width: 1280px) {
  .niveaux-grid { grid-template-columns: repeat(3, 1fr); }
}
.fcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.fcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.fcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-paper-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--border-hairline);
}
.fcard__media--ink { background: var(--color-ink); }
.fcard__media--abricot { background: var(--color-abricot); }
.fcard__media__badges {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
}
.fcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--space-5);
  gap: var(--space-2);
}
.fcard__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  color: var(--color-ink-500);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.fcard__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-h);
  margin: 0;
}
.fcard__desc {
  flex: 1; /* pousse le foot tout en bas */
  font-size: var(--text-sm);
  color: var(--color-ink-500);
  line-height: var(--lh-body);
  margin: var(--space-2) 0 0 0;
}
.fcard__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  margin-top: var(--space-3);
  border-top: var(--border-hairline);
}
.fcard__price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}
.fcard__foot .lnk {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-abricot);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
}

/* ---------- 4. NAP card : centrée et bornée quand seule ----------
   On évite le bloc étiré sur toute la largeur quand il ne reste que l'Adresse. */
.nap {
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.nap__item {
  flex: 0 1 320px;
  background: var(--color-paper-alt);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  border: var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}
.nap__label {
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  color: var(--color-ink-500);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.nap__value {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
  color: var(--color-ink);
  text-decoration: none;
}
.nap__value:hover { color: var(--color-abricot); }
.nap__sub {
  font-size: var(--text-sm);
  color: var(--color-ink-500);
}

/* ---------- 5. Hiérarchie typo plus tranchée ----------
   Refactoring UI : sauts de taille importants pour clarifier la hiérarchie. */
.hero-page h1,
.pilier-hero h1 {
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  margin-bottom: var(--space-4);
}
.hero-page__lede,
.pilier-hero__lede {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.55;
  color: var(--color-ink-500);
  max-width: 62ch;
  text-wrap: balance;
}
.fiche-section__head {
  /* Aéré comme le hero (consigne 30/05) : 64 px sous le header de section avant
     le contenu, 32 px sous le H2 avant le paragraphe descriptif. */
  margin-bottom: var(--space-7);
  max-width: 75ch;
}
.fiche-section__head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4) 0;
}
.fiche-section__head p {
  font-size: var(--text-md);
  color: var(--color-ink-500);
  line-height: var(--lh-body);
  margin: 0;
}

/* ---------- 6. Container alignement consistant ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container--narrow { max-width: 720px; }

/* ---------- 7. Eyebrow consistant ---------- */
.eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-abricot);
  font-weight: var(--fw-medium);
  margin-bottom: var(--space-3);
}

/* ---------- 8. Boutons cohérents ---------- */
.btn { gap: var(--space-2); }
.pilier-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* ---------- 9. Info-list lisible ---------- */
/* Bloc retiré (28/05) : les règles `.info-list` / `.info-list li::before`
   étaient dupliquées dans components.css (cf. lignes 1046+) avec un puck orange,
   et refaisaient un `content: "·"` gris ici → effet « double bullet ».
   On laisse components.css faire foi, on ne garde que le tuning typographique. */
.info-list li {
  font-size: var(--text-md);
  line-height: var(--lh-body);
}

/* ---------- 11. FIXES audit PDF 28/05 ---------- */
/* Bug : signal box tombait sous le H1 (align-items: end dans gabarits.css) */
.pilier-hero__grid {
  align-items: start !important;
  gap: var(--space-6);
}

/* Bug : cartes niveau de hauteurs différentes (featured plus haute) */
.niveaux-grid { align-items: stretch; }
.niveau-card {
  height: 100%;
  align-content: start;
}
.niveau-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Description : limite à 4 lignes avec ellipsis CSS (plus de truncate JS) */
.niveau-card__desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-500);
}
.niveau-card__meta {
  margin-top: auto;        /* pousse le bloc meta en bas → cartes égales */
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* forcé 3 cols pour cohérence parfaite */
  gap: var(--space-3);
}
.niveau-card__meta span {
  display: flex;
  flex-direction: column;
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}
.niveau-card__meta strong {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  font-size: var(--text-base);
  margin-bottom: 2px;
}

/* Bug : sessions-mini trop tassées */
.session-mini {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  text-decoration: none !important;
  color: inherit;
  transition: border-color var(--dur-base), transform var(--dur-base);
}
.session-mini + .session-mini { margin-top: var(--space-2); }
.session-mini:hover { border-color: var(--color-abricot); transform: translateX(2px); }
.session-mini--full { opacity: 0.55; cursor: not-allowed; }
.session-mini__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-paper-alt);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1;
}
.session-mini__date strong {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
.session-mini__date span {
  font-size: var(--text-xs);
  color: var(--color-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.session-mini__body { display: flex; flex-direction: column; gap: 2px; }
.session-mini__loc {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
}
.session-mini__meta {
  font-size: var(--text-sm);
  color: var(--color-ink-500);
  text-transform: lowercase;
}

/* Garde-fou contre tout soulignement résiduel des titres */
h1, h2, h3, h4, h5, h6, summary, summary h3 {
  text-decoration: none !important;
}
summary::-webkit-details-marker { display: none; } /* triangle natif Safari */
summary { list-style: none; cursor: pointer; }

/* Sticky aside : foot CTA serré pour ne pas exploser la hauteur */
.sessions-aside__foot { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.sessions-aside__promise {
  font-size: var(--text-sm);
  color: var(--color-ink-500);
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-abricot-soft);
  color: var(--color-abricot-hover);
  font-weight: var(--fw-medium);
}

/* ---------- 10. Mobile-first ajustements ---------- */
@media (max-width: 720px) {
  .pilier-hero__grid,
  .fiche-grid,
  .two-col,
  .related-grid,
  .niveaux-grid {
    grid-template-columns: 1fr !important;
    gap: var(--space-5) !important;
  }
}

/* ---------- 12. Blocs internes alignés sur la pleine largeur (28/05) ---------- */
/* Sessions list : 2 colonnes sur desktop pour matcher la largeur des autres blocs.
   `minmax(0, 1fr)` + `min-width: 0` sur les enfants évitent l'overflow horizontal
   (SessionMini contient un date-block à largeur fixe + texte sans wrap qui forcerait
   la cellule à dépasser sans ça → carte droite cropée). */
/* Grille 2x2 stricte sur desktop, 1 col en sidebar étroite ou mobile. */
.sessions-aside__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.sessions-aside__list > * { min-width: 0; align-self: start; }
/* Reset complet du style hérité de la sidebar verticale (border-bottom + margin-top
   sur les +) qui causait un décalage subtil entre colonnes en mode grid. */
.sessions-aside__list .session-mini {
  margin: 0 !important;
  border: var(--border-hairline) !important;  /* couvre les 4 côtés, pas juste bottom */
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .sessions-aside__list { grid-template-columns: 1fr; }
}
/* Widget sidebar étroite : 1 col + on remet les bords sidebar (séparateurs verticaux) */
.sessions-aside .sessions-aside__list { grid-template-columns: 1fr; }
.sessions-aside .sessions-aside__list .session-mini {
  border: 0 !important;
  border-bottom: var(--border-hairline) !important;
  border-radius: 0;
}
.sessions-aside .sessions-aside__list .session-mini:last-child { border-bottom: 0 !important; }

/* ---------- 13. FORMULAIRES — police héritée (28/05) ---------- */
/* Les contrôles natifs n'héritent PAS de font-family : il faut le forcer
   sinon le textarea tombe en monospace système et les inputs en Helvetica. */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Styling auto des inputs/select/textarea dans un .field (sans avoir à mettre
   la classe `.field__input` à chaque élément) — reprend les tokens de components.css */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  height: 44px;
  border: 1px solid var(--color-ink-100);
  border-radius: var(--radius-xs);
  padding: 0 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--color-ink);
  background: var(--color-paper);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
  resize: vertical;
  line-height: var(--lh-body);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-ink-300); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-ink-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-abricot);
  box-shadow: var(--shadow-focus);
}

/* ---------- 14. Bandeau réassurance dans le pilier-hero (28/05) ---------- */
/* ReassureInline placé en pied du pilier-hero pour avoir les 6 mêmes infos
   sur tous les héros (avant : 3 dans le signal box, maintenant : 6 dans le bandeau). */
.pilier-hero__reassure {
  margin-top: var(--space-6);
}
.pilier-hero__reassure .reassure--inline {
  margin-top: 0;
}

/* ---------- 15. Footer : 3 légaux sur une ligne (28/05) ---------- */
.site-footer__bottom ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__bottom ul li { margin: 0; }

/* ---------- 16. Cards formation : illustrations média (28/05) ---------- */
/* Sans assets photo en V1, on remplit la zone .fcard__media par un dégradé abricot
   + le code formation en très grande typo (style "design poster"). Lisible, dans la
   palette, et rapidement remplaçable par de vraies photos en V2. */
.fcard__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-abricot-soft) 0%, var(--color-paper-alt) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fcard__media--ink {
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-700) 100%);
}
.fcard__media--orange {
  background: linear-gradient(135deg, var(--color-abricot) 0%, var(--color-abricot-hover) 100%);
}
/* Code formation en grand au centre du média (utilise data-code injecté par FormationCard) */
.fcard__media[data-code]::after {
  content: attr(data-code);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 5vw, 56px);
  color: var(--color-abricot);
  letter-spacing: -0.02em;
  opacity: 0.95;
  text-align: center;
  padding: var(--space-4);
  line-height: 1;
}
.fcard__media--ink[data-code]::after {
  color: var(--color-abricot);
  opacity: 0.85;
}
.fcard__media--orange[data-code]::after {
  color: var(--color-paper);
  opacity: 0.95;
}
/* Codes longs (symboles NF C 18-510 multi-niveaux) : taille réduite pour tenir dans la carte */
.fcard__media[data-code="B1-B2-BR-BC"]::after,
.fcard__media[data-code="RECYCLAGE"]::after {
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.01em;
}
/* Le badge code en petit en haut à gauche reste, mais devient plus discret */
.fcard__media__badges { z-index: 2; }
.fcard__media__badges .badge-niveau {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  font-size: 11px;
}

/* ---------- 17. Page /planning/ — grille compacte (28/05) ---------- */
/* 119 sessions à afficher → grille dense, plus compacte que sessions-aside__list.
   minmax(180px, 1fr) donne 5-7 cols selon largeur écran. */
.planning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
  align-items: stretch;
  grid-auto-rows: 1fr;
}
.planning-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  background: var(--color-paper);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  text-decoration: none !important;
  color: inherit;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
  height: 100%;
}
.planning-card:hover {
  border-color: var(--color-abricot);
  transform: translateY(-1px);
}
.planning-card__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-paper-alt);
  border-radius: var(--radius-xs);
  padding: 6px 0;
  line-height: 1;
  min-width: 48px;
}
.planning-card__date strong {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
}
.planning-card__date span {
  font-size: 10px;
  color: var(--color-ink-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.planning-card__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.planning-card__jour {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-transform: lowercase;
}
.planning-card__ville {
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}
.planning-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--color-abricot);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

/* ---------- 18. Pilier-hero sans signal box (28/05) ---------- */
/* On a supprimé le bloc noir Avis Google / Le jour même / Devis 1h à droite
   (les infos sont dans le bandeau ReassureInline en pied de hero).
   Le grid passe en 1 colonne pleine largeur, le texte respire mieux. */
.pilier-hero__grid {
  display: block !important;
}
.pilier-hero__grid > div:first-child {
  max-width: 880px;
}
/* Le H1 peut être plus généreux maintenant qu'il a la place */
.pilier-hero h1 {
  font-size: clamp(40px, 5.5vw, 64px);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-h);
}
.pilier-hero__lede {
  font-size: var(--text-lg);
  line-height: var(--lh-body);
  color: var(--color-ink-700);
  margin-top: var(--space-3);
  max-width: 720px;
}

/* ---------- 19. Espacements hero → TLDR resserrés (28/05) ---------- */
/* Avant : hero (padding-bottom space-8 = 64) + section--tight (padding-top space-6 = 48)
   = 112px de vide entre le lede du hero et le TLDR. Trop. On colle.
   La section qui contient un TLDR juste après un hero perd son padding-top. */
.hero-page {
  padding: var(--space-7) 0 var(--space-5);  /* bottom : 64 → 32 */
}
.hero-page + .section,
.hero-page + .section--tight,
.pilier-hero + .section,
.pilier-hero + .section--tight {
  padding-top: var(--space-4);                /* 32 */
}
/* La section TLDR (--tight) suivie d'une section normale : on resserre aussi */
.section--tight + .section {
  padding-top: var(--space-5);                /* 40 */
}

/* ---------- 20. Bloc « pas d'engagement » : retirer juste le point orange (28/05) ---------- */
/* Le fond orange clair et le texte restent (palette branding). On supprime
   uniquement le point ::before qui faisait doublon visuel. */
.sessions-aside__promise::before { content: none; }
.sessions-aside__promise { gap: 0; justify-content: center; text-align: center; }

/* ---------- 21. Bullets harmonisés sur les points (28/05) ---------- */
/* Consigne : on opte pour les points orange (qui rappellent l'abricot) plutôt que
   les coches ✓. On override `.info-list--check li::before` pour qu'il rende le
   même puck orange que `.info-list` standard. */
.info-list--check li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color-abricot);
  border-radius: 999px;
  margin-top: 8px;
  color: transparent;
  font-size: 0;
}

/* ---------- 22. Box noire sidebar : padding resserré (28/05) ---------- */
/* On évite l'étirement vertical : padding modéré, contenu collé au haut. */
.sessions-aside__head {
  padding: var(--space-3) var(--space-5);
  min-height: 0;
}

/* ---------- 23. Bloc auteur byline aligné à gauche (28/05) ---------- */
.byline__info {
  align-items: flex-start;
  text-align: left;
}
.byline__author,
.byline__info .byline__meta {
  text-align: left;
  justify-content: flex-start;
  padding-left: 0;
  margin-left: 0;
}
/* Neutralise le ::before vide qui ajoutait 8px de gap au début du meta info */
.byline__info .byline__meta::before { content: none; display: none; }
.byline__info .byline__meta { gap: 0; }

/* ---------- 24. Info-list : titre strong sur sa propre ligne (28/05) ---------- */
/* Avant : tentative d'aligner les tirets via min/max-width fixe → cassait sur les
   titres courts (vide blanc) ou très longs (overflow). Solution propre : passer le
   `<strong>:first-child` en block, la description tombe en dessous. Lisible quelle
   que soit la longueur du titre, pas d'alignement bancal. */
.info-list li strong:first-child {
  display: block;
  margin-bottom: 2px;
}

/* ---------- 25. Info-list : bullet orange + titre block + description (28/05) ---------- */
/* Puck orange aligné verticalement avec le milieu de la 1ère ligne du titre <strong>.
   Calcul : padding-top (12px) + line-height/2 (~11px) - puck-size/2 (4px) = ~19px. */
.info-list li {
  display: block;
  position: relative;
  padding-left: var(--space-4);
  padding-top: 12px;
  padding-bottom: 12px;
}
.info-list li::before,
.info-list--check li::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  top: 20px;
  width: 8px;
  height: 8px;
  background: var(--color-abricot);
  border-radius: 999px;
  margin: 0;
  color: transparent;
  font-size: 0;
}

/* ---------- 26. Cards blog : photo placeholder (28/05) ---------- */
/* Variante --photo : l'image remplit la zone média en cover, masque le gradient. */
.fcard__media--photo {
  background: var(--color-ink);  /* fallback si l'image ne charge pas */
  position: relative;
  overflow: hidden;
}
.fcard__media--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fcard__media--photo .fcard__media__badges {
  z-index: 2;
}
/* Le ::after du big code typo (cards formation) ne s'applique pas en variante photo */
.fcard__media--photo::after { content: none; }

/* ---------- 27. Niveau-card : flèche collée au meta (28/05) ---------- */
/* Cible UNIQUEMENT les flèches placées DANS le body (cf. NiveauCard.astro modifié).
   Les cards inline (index.astro, formations/index.astro) gardent leur flèche en
   sibling de body, en position absolute bottom-right (style original). */
.niveau-card__body > .niveau-card__arrow {
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  align-self: flex-end;
  margin-top: var(--space-2);
  margin-left: auto;
  width: 28px;
  height: 28px;
}
/* Pictos SVG des 3 pôles : orange, taille consistante avec l'ancien emoji */
.niveau-card__num svg.pict {
  width: 48px;
  height: 48px;
  color: var(--color-abricot);
  display: block;
}
.niveau-card--featured .niveau-card__num svg.pict { color: var(--color-abricot-hover); }

/* ---------- 28. Info-list en grille 2 cols : opt-in via .info-list--cols (28/05) ---------- */
/* La grille 2 cols créait des wraps moches quand l'info-list était nested dans une
   section déjà en 2 colonnes (Public concerné / Prérequis). On la limite aux
   contextes où elle est utile (blog clusters par ex.) via un modifier explicite. */
@media (min-width: 900px) {
  .info-list--cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-6);
  }
}

/* ---------- 29. Papier peint d'abricots sur tout le site (30/05) ---------- */
/* Remplace le gros abricot unique du hero par un pattern d'abricots petits
   répétés sur toute la page, qui se prolonge entre les sections. */
body {
  position: relative;
  /* Le pattern est posé sur body, avec une opacity gérée via la couleur du
     background-color de fond (paper) qui filtre l'orange. On utilise un wrapper
     pseudo-element pour pouvoir baisser l'opacity globalement. */
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  /* Pattern d'abricots inclinés à 18° (svg pré-pivoté), espacés (tile 320 px). */
  background-image: url("/assets/logo/picto-tilted.svg");
  background-size: 320px 320px;
  background-position: 0 0;
  background-repeat: repeat;
  opacity: 0.035;
  pointer-events: none;
  z-index: -1;
}
/* Garde-fou : le body doit avoir un fond explicite pour que le pseudo-element
   soit derrière (sinon body::before serait sous l'arrière-plan natif). */
body { background-color: var(--color-paper); }

/* Les héros gardent leur padding aéré (consigne précédente) sans absolu. */
.hero-page,
.pilier-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-7);
}
.hero-page h1,
.pilier-hero h1,
.hero-page__lede,
.pilier-hero__lede,
.pilier-hero__actions {
  max-width: 760px;
}

/* ---------- 30. Hero : aérer entre eyebrow / H1 / lede / boutons / réassurance (30/05) ---------- */
.hero-page .eyebrow,
.pilier-hero .eyebrow {
  display: block;
  margin-bottom: var(--space-4);  /* 32px sous l'eyebrow */
}
.hero-page h1,
.pilier-hero h1 {
  margin: 0 0 var(--space-5);     /* 40px sous le H1 */
}
.hero-page__lede,
.pilier-hero__lede {
  margin: 0 0 var(--space-6);     /* 48px sous le lede */
  max-width: 680px;
}
.pilier-hero__actions {
  margin-top: 0;
  margin-bottom: var(--space-7);  /* 64px sous les boutons */
}
.pilier-hero__reassure {
  margin-top: var(--space-2);
}
.hero-page__meta {
  margin-top: var(--space-7);     /* 64px avant le bandeau */
}

/* ---------- 31. Espacements harmonisés sur tout le site (30/05) ---------- */
/* Cohérence avec le hero : padding sections plus généreux + marges entre titres
   et contenus alignées sur l'échelle 32/48/64. Retour Aurélien : tout est tassé. */
.section {
  padding-top: var(--space-9);     /* 96 px (était 64) */
  padding-bottom: var(--space-9);
}
.section--tight {
  padding-top: var(--space-7);     /* 64 px (était 48) */
  padding-bottom: var(--space-7);
}
@media (max-width: 900px) {
  .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .section--tight { padding-top: var(--space-6); padding-bottom: var(--space-6); }
}
/* Entre une section--tight (TLDR) et la section suivante : on resserre légèrement
   pour ne pas avoir 64 + 96 = 160 px de vide. */
.section--tight + .section {
  padding-top: var(--space-7);
}
/* Header de section : déjà ajusté §1 mais redondance pour s'assurer du min */
.fiche-section__head + * {
  margin-top: 0;  /* le margin-bottom du __head fait le job */
}
/* Cartes / grilles internes : gap unifié 24 px (space-5) */
.related-grid,
.niveaux-grid {
  gap: var(--space-5);
}
.sessions-aside__list {
  gap: var(--space-4);   /* 32 px entre cards de sessions */
}
/* CtaDevis bandeau final : plus de respiration au-dessus */
.cta-devis {
  margin-top: var(--space-8);
}

/* ---------- 32. Photos en noir & blanc partout (30/05, corrigé 01/06) ---------- */
/* Filtre grayscale appliqué globalement aux <img>, sauf logo et SVG.
   Pas de transition au repos (sinon flash couleur visible au chargement de la page) ;
   la transition s'applique uniquement pendant le hover. */
img { filter: grayscale(100%); }
img:hover {
  filter: grayscale(0%);
  transition: filter var(--dur-base) var(--ease-out);
}
/* Exceptions : logo header/footer + pattern abricot + favicons */
.site-header img,
.site-footer img,
.logo img,
img[src*="/logo/"],
img.no-grayscale {
  filter: none;
}

/* ---------- 33. Héros uniformément blancs (30/05) ---------- */
/* Consigne : tous les héros doivent rester en fond blanc opaque (le wallpaper
   d'abricots du body::before n'apparaît PAS dans les héros). `.pilier-hero` avait
   déjà `background: var(--color-paper)` (gabarits.css) — on l'applique pareil à
   `.hero-page` pour homogénéiser. */
.pilier-hero,
.hero-page {
  background: var(--color-paper);
  position: relative;
  z-index: 1;  /* passe au-dessus du wallpaper fixed (z-index: -1) */
}

/* ---------- 34. Hero split : contenu à gauche + card avis Google à droite (31/05) ---------- */
/* Le container du hero passe en grid 2-col quand il contient un <HeroRating />.
   Le contenu est wrappé dans .hero-split__main (auto), la card prend la 2e col. */
.pilier-hero > .container:has(.hero-rating),
.hero-page > .container:has(.hero-rating) {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 360px);
  gap: var(--space-7);
  align-items: center;
}
.pilier-hero > .container:has(.hero-rating) > .hero-rating,
.hero-page > .container:has(.hero-rating) > .hero-rating {
  align-self: center;
}
@media (max-width: 1000px) {
  .pilier-hero > .container:has(.hero-rating),
  .hero-page > .container:has(.hero-rating) {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* ---------- 35. Card HeroRating — style du design system (31/05) ---------- */
.hero-rating {
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-paper-warm, #FDFBF8);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.hero-rating__eyebrow {
  font-size: 11px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  color: var(--color-ink-500);
  margin-bottom: var(--space-4);
  white-space: nowrap;
}
.hero-rating__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}
.hero-rating__score {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(56px, 6vw, 84px);
  letter-spacing: -0.03em;
  line-height: 0.85;
  color: var(--color-abricot);
}
.hero-rating__head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.hero-rating__stars { display: flex; gap: 3px; color: var(--color-abricot); }
.hero-rating__stars svg { width: 20px; height: 20px; }
.hero-rating__outof {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: 13px;
  color: var(--color-ink-500);
}
.hero-rating__count {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  margin-top: var(--space-4);
}
.hero-rating__note {
  font-size: 13px;
  color: var(--color-ink-500);
  line-height: 1.45;
  margin: var(--space-4) auto 0;
  padding-top: var(--space-4);
  border-top: var(--border-hairline);
  width: 100%;
  max-width: 30ch;
}

/* ---------- 36. Bandeau réassurance hors du split — pleine largeur (31/05) ---------- */
.hero-page__meta--full,
.pilier-hero__reassure--full {
  grid-column: 1 / -1;
  margin-top: var(--space-6);
  margin-left: 0;
  width: 100%;
}

/* ---------- 37. Hero CTA buttons hero-page (01/06) — règles fusionnées dans §1bis ---------- */

/* ---------- 38. Hero image article blog (01/06) ---------- */
.article-hero-figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--color-paper-alt);
}
.article-hero-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 39. Grille tarifaire des fiches (28/08) ---------- */
.tarifs {
  margin-top: var(--space-5);
}
.tarifs__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  /* pas d'overflow: hidden — il rognerait le premier caractère de la légende */
}
.tarifs__table thead th:first-child { border-top-left-radius: var(--radius-md); }
.tarifs__table thead th:last-child { border-top-right-radius: var(--radius-md); }
/* Légende posée en <p> avant le tableau (relié par aria-labelledby) : en <caption>
   natif, le premier glyphe était rogné par le rendu tableau. */
.tarifs__caption {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}
.tarifs__table thead th {
  background: var(--color-paper-alt);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-500);
  text-align: left;
  padding: var(--space-3) var(--space-4);
}
.tarifs__table tbody th,
.tarifs__table tbody td {
  padding: var(--space-3) var(--space-4);
  border-top: var(--border-hairline);
  text-align: left;
  vertical-align: top;
}
.tarifs__table tbody th {
  font-weight: 500;
  color: var(--color-ink);
}
.tarifs__table tbody td {
  font-family: var(--font-mono);
  color: var(--color-ink-700);
  white-space: nowrap;
}
.tarifs__ht {
  font-weight: 600;
  color: var(--color-ink);
}
.tarifs__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}
@media (max-width: 640px) {
  .tarifs {
    overflow-x: auto;
  }
  .tarifs__table {
    min-width: 460px;
  }
}

/* ---------- 40. Voie directe sur la page devis (28/08) ----------
   Le formulaire exige nom, email, téléphone et formation. Pour une simple question,
   c'est trop : ce bloc donne le mail et les téléphones en clair, en un clic. */
.contact-direct {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-abricot-soft);
}
.contact-direct__titre {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-1);
}
.contact-direct__sous {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink-700);
}
.contact-direct__mail {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-3) var(--space-4);
  background: var(--color-paper);
  border: 1px solid var(--color-abricot-line);
  border-radius: var(--radius-sm);
  word-break: break-word;
}
.contact-direct__mail:hover,
.contact-direct__mail:focus-visible {
  border-color: var(--color-abricot);
  color: var(--color-abricot-hover);
}
.contact-direct__tels {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 600;
}
.contact-direct__tels a {
  color: var(--color-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--color-abricot-line);
}
.contact-direct__tels a:hover,
.contact-direct__tels a:focus-visible { border-bottom-color: var(--color-abricot); }
.contact-direct__tels small {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}
.contact-direct__horaires {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-500);
}