/* =============================================================
   ENTALYS FORMATIONS — Feuille de style unique du site
   -------------------------------------------------------------
   Fusion de maquettes/styles.css (V1) + maquettes/styles-v2.css (V2)
   La V2 gagne partout où elle surchargeait la V1. Le code mort de la
   V1 (composant « .familles / .famille » remplacé par le panneau
   « .catalogue__panel ») a été supprimé.
   -------------------------------------------------------------
   SOMMAIRE
     01. Tokens
     02. Reset & base
     03. Utilitaires (container, band, ico, couleurs de famille)
     04. Typographie partagée
     05. Boutons
     06. Sections & entêtes de section
     07. Header & navigation (menus déroulants)
     08. Footer
     09. Accueil — hero
     10. Accueil — bandeau de confiance & bande installations
     11. Accueil — deux parcours
     12. Accueil — catalogue (panneau 3 colonnes)
     13. Accueil — signature
     14. Accueil — pourquoi / atouts
     15. Références, avis, note
     16. Enjeux
     17. Formateur
     18. Bande CTA de fin de page
     19. COMPOSANTS DE PAGE INTÉRIEURE
         19.01 page-hero          19.11 steps
         19.02 breadcrumb         19.12 form
         19.03 layout-side        19.13 prose
         19.04 card-formation     19.14 card-article
         19.05 filters            19.15 logo-wall
         19.06 accordion          19.16 tag
         19.07 specs              19.17 anchor-nav
         19.08 sessions           19.18 pagination / link--back
         19.09 callout            19.19 tbc (inerte)
         19.10 stat-grid
     20. Responsive
     21. Accessibilité & impression
   ============================================================= */


/* =============================================================
   01. TOKENS
   ============================================================= */
:root {
  /* Couleurs de marque */
  --red:        #b50000;
  --violet:     #7b4c9e;
  --azure:      #598fdb;
  --rose:       #8a3d5a;

  /* Neutres sombres */
  --ink:        #221e1b;
  --ink-deep:   #1a1714;
  --ink-soft:   #3a332e;
  --line-dark:  #3a322d;
  --dune:       #322b26;

  /* Neutres texte */
  --body:       #5c5348;
  --muted:      #6e6459;
  --zorba:      #a0968a;
  --stone:      #b1a79a;
  --tea:        #c9bfb3;

  /* Neutres clairs */
  --line:       #e4dbd0;
  --pearl:      #efe8e0;
  --pearl-2:    #efe9e2;
  --cream:      #f5f1ec;
  --white:      #ffffff;

  /* Sémantique */
  --ok:         #2f6b4f;
  --alert:      #b50000;

  /* Couleur de famille courante (surchargée par .is-f01/02/03)
     --fam        : couleur nominale, sur fond clair
     --fam-lite   : déclinaison claire, pour les fonds sombres (bandeaux illustrés) */
  --fam:        var(--red);
  --fam-lite:   #ff8a76;

  /* Rythme vertical unique des pages intérieures (cf. section 25) */
  --flow:       clamp(26px, 2.8vw, 40px);
  --flow-lg:    clamp(42px, 4.2vw, 64px);

  /* Typo */
  --font-display: 'Space Grotesk', 'Trebuchet MS', sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;
  --font-body:    'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Grille */
  --container:      1328px;
  --container-wide: 1440px;
  --gutter:         24px;
  --radius-card:    16px;
  --radius-btn:     9px;

  /* Dégradé de marque */
  --brand-gradient: linear-gradient(95deg, var(--red) 0%, var(--violet) 55%, var(--azure) 100%);
}


/* =============================================================
   02. RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--azure);
  outline-offset: 2px;
  border-radius: 3px;
}


/* =============================================================
   03. UTILITAIRES
   ============================================================= */
.container {
  width: min(100% - (2 * var(--gutter)), var(--container));
  min-width: 0;
  margin-inline: auto;
}

/* Bloc encadré large : fond propre + gouttière interne */
.band {
  width: min(100% - (2 * var(--gutter)), var(--container-wide));
  min-width: 0;
  margin-inline: auto;
  padding-inline: clamp(24px, 3.5vw, 56px);
}

/* Conteneur étroit : contenu long, pages légales */
.container--narrow { width: min(100% - (2 * var(--gutter)), 780px); }

.muted     { color: var(--zorba); }
.nowrap    { white-space: nowrap; }
.text-center { text-align: center; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Sprite SVG inline (masqué, en haut du <body>) --- */
.sprite { display: none; }

/* --- Icônes : <svg class="ico"><use href="#ico-vapeur"></use></svg> --- */
.ico {
  width: 24px; height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ico--xs { width: 15px; height: 15px; stroke-width: 2; }
.ico--sm { width: 19px; height: 19px; stroke-width: 1.8; }
.ico--lg { width: 32px; height: 32px; stroke-width: 1.5; }
.ico--xl { width: 44px; height: 44px; stroke-width: 1.35; }

/* --- Couleur de famille : à poser sur n'importe quel composant --- */
.is-f01 { --fam: var(--red);    --fam-lite: #ff8a76; }
.is-f02 { --fam: var(--violet); --fam-lite: #c79ae8; }
.is-f03 { --fam: var(--azure);  --fam-lite: #9dc4f5; }
.c-fam    { color: var(--fam); }
.c-red    { color: var(--red); }
.c-violet { color: var(--violet); }
.c-azure  { color: var(--azure); }


/* =============================================================
   04. TYPOGRAPHIE PARTAGÉE
   ============================================================= */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 2.86px;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow--light  { color: var(--cream); }
.eyebrow--muted  { color: var(--zorba); font-size: 13px; letter-spacing: 2.4px; }
.eyebrow--fam    { color: var(--fam); }
.eyebrow--sm     { font-size: 13px; letter-spacing: 2.2px; }
.eyebrow--center { text-align: center; }

.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.17rem + 2.76vw, 3.3125rem);   /* 32 → 53px */
  line-height: 1.12;
  letter-spacing: -1.4px;
  color: var(--ink);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.11rem + 2.12vw, 2.625rem);  /* 28 → 42px */
  line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--ink);
}
.h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.28125rem, 1.165rem + 0.54vw, 1.5625rem);/* 20.5 → 25px */
  line-height: 1.25;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.h2--xl    { font-size: clamp(1.875rem, 0.95rem + 3.18vw, 3.3125rem); line-height: 1.22; letter-spacing: -1.5px; }
.h2--light { color: var(--pearl-2); }
.h1--light, .h3--light { color: var(--pearl-2); }

.lead {
  max-width: 720px;
  font-size: clamp(1.09375rem, 1.03rem + 0.32vw, 1.3125rem);  /* 17.5 → 21px */
  line-height: 1.6;
  color: var(--body);
}
.lead--light { color: var(--tea); }

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 17.5px;
  transition: opacity .18s ease, gap .18s ease;
}
.link:hover  { opacity: .72; }
.link:hover .ico { transform: translateX(2px); }
.link .ico   { transition: transform .18s ease; }
.link--red   { color: var(--red); }
.link--azure { color: var(--azure); }
.link--violet{ color: var(--violet); }
.link--fam   { color: var(--fam); }
.link--light { color: var(--cream); }

/* Retour en arrière : « ← Tous les articles » */
.link--back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .18s ease;
}
.link--back .ico { transform: rotate(180deg); }
.link--back:hover { color: var(--red); }
.link--back:hover .ico { transform: rotate(180deg) translateX(2px); }

/* Retours à la ligne « maquette », désactivés en mobile */
.br-opt { display: inline; }


/* =============================================================
   05. BOUTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.4;
  min-height: 48px;
  padding: 13px 26px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover  { transform: translateY(-1px); }
.btn--sm    { min-height: 44px; padding: 10px 20px; font-size: 16px; border-radius: 8px; }
.btn--lg    { min-height: 56px; padding: 16px 32px; font-size: 18.5px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--red);  color: var(--white); }
.btn--primary:hover { box-shadow: 0 8px 22px -10px rgba(181,0,0,.9); }
.btn--ink     { background: var(--ink); color: var(--cream); }
.btn--ink:hover { box-shadow: 0 8px 22px -12px rgba(34,30,27,.9); }
.btn--outline { border-color: var(--azure); color: var(--azure); }
.btn--outline:hover { background: rgba(89,143,219,.08); }
.btn--outline-ink { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn--outline-ink:hover { border-color: var(--ink); }
.btn--white   { background: var(--white); color: var(--red); }
.btn--ghost   { border-color: rgba(255,255,255,.7); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.btn-row--center { justify-content: center; }


/* =============================================================
   06. SECTIONS & ENTÊTES DE SECTION
   ============================================================= */
.section { padding-block: clamp(48px, 5.2vw, 80px); }
.section--tight { padding-block: clamp(32px, 3.4vw, 52px); }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--pearl { background: var(--pearl); }
.section--ink   { background: var(--ink); color: var(--tea); }
.section--ink .h2, .section--ink .h3 { color: var(--pearl-2); }

.section__head { display: flex; flex-direction: column; gap: 12px; }
.section__head--center { align-items: center; text-align: center; }
.section__head + * { margin-top: var(--flow); }

/* Entête de section avec un lien aligné à droite */
.section__head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section__head--row > div { display: flex; flex-direction: column; gap: 10px; }


/* =============================================================
   07. HEADER & NAVIGATION
   ============================================================= */
.site-header {
  position: relative;
  z-index: 60;
  background: var(--cream);
  border-bottom: 1px solid rgba(228,219,208,.7);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 100px;
  padding-block: 14px;
}
.header__logo img { height: 56px; width: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav__item { position: relative; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 10px;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .18s ease;
}
.nav__link:hover { color: var(--red); }
.nav__link[aria-current="page"] { color: var(--red); }

/* Item de section courante : petit filet rouge sous l'intitulé */
.nav__item.is-current > .nav__link::after,
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  background: var(--red);
}
.nav__item.is-current > .nav__link,
.nav__item.is-current > .nav__link + .nav__toggle { color: var(--red); }

/* Chevron de sous-menu */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 34px;
  margin-left: -8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  transition: transform .18s ease, color .18s ease;
}
.nav__toggle .ico,
.nav__link > .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.nav__link > .ico { color: var(--muted); transition: transform .18s ease, color .18s ease; }
.nav__item.is-open > .nav__link > .ico { transform: rotate(180deg); color: var(--red); }
.nav__item.is-open > .nav__toggle { transform: rotate(180deg); color: var(--red); }

/* Sous-menu déroulant (desktop) */
.nav__sub {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  min-width: 288px;
  padding: 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 26px 48px -26px rgba(34,30,27,.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__sub::before {           /* zone tampon pour le survol */
  content: "";
  position: absolute;
  inset: -10px 0 auto 0;
  height: 12px;
}
.nav__item--has-sub:hover > .nav__sub,
.nav__item--has-sub:focus-within > .nav__sub,
.nav__item--has-sub.is-open > .nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: none) {        /* tactile : uniquement au clic */
  .nav__item--has-sub:hover > .nav__sub { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  .nav__item--has-sub.is-open > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
}
.nav__sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink-soft);
  transition: background-color .16s ease, color .16s ease;
}
.nav__sub a:hover { background: var(--cream); color: var(--red); }
.nav__sub a[aria-current="page"] { color: var(--red); background: var(--cream); }
.nav__sub li + li { margin-top: 2px; }
.nav__sub .nav__sub-sep {
  margin: 8px 6px;
  border-top: 1px solid var(--line);
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.site-header.is-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header.is-open .burger span:nth-child(2) { opacity: 0; }
.site-header.is-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =============================================================
   08. FOOTER
   ============================================================= */
.site-footer {
  background: var(--ink-deep);
  padding-top: 60px;
  padding-bottom: 30px;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--dune);
}
.footer__brand { display: flex; flex-direction: column; gap: 16px; }
.footer__brand img { height: 40px; width: auto; opacity: .92; }
.footer__baseline {
  max-width: 300px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--zorba);
}
.footer__qualiopi {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border: 1px solid var(--dune);
  border-radius: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--tea);
}
.footer__qualiopi .ico { color: var(--azure); }

/* Ajoute le 2026-09-16. Le logo Qualiopi heritait du gabarit du logo Entalys
   (40 px de haut) : la ligne « REPUBLIQUE FRANCAISE » y etait illisible et on
   passait sous la taille minimale imposee par la charte Qualiopi. Il est le
   seul element du pied de page dont la taille est contrainte par un tiers. */
.footer__qualiopi img { height: 58px; width: auto; opacity: 1; }

.footer__col { display: flex; flex-direction: column; gap: 15px; }
.footer__heading {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.76px;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col li, .footer__col a {
  font-size: 15px;
  line-height: 1.45;
  color: var(--tea);
  word-break: break-word;
}
.footer__col a { transition: color .18s ease; }
.footer__col a:hover { color: var(--white); }
.footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.footer__contact .ico { color: var(--muted); margin-top: 1px; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 22px;
  padding-top: 22px;
}
.footer__bottom p, .footer__bottom a { font-size: 14px; color: var(--muted); }
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__bottom a:hover { color: var(--tea); }


/* =============================================================
   09. ACCUEIL — HERO
   ============================================================= */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 640px;
  padding-top: clamp(48px, 7.6vw, 110px);
  padding-bottom: clamp(48px, 6.2vw, 90px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Voile sombre sur toute la photo : le texte passe partout */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(26,23,20,.62) 0%,
    rgba(26,23,20,.48) 45%,
    rgba(26,23,20,.66) 100%);
}
.hero__container { position: relative; z-index: 1; }

/* Carte pleine largeur : discours à gauche, 3 points d'entrée à droite */
.hero__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
  gap: 48px;
  align-items: center;
  padding: 44px 46px;
  background: rgba(12,10,9,.78);
  border-radius: 10px;
}
.hero__main { min-width: 0; }

.hero__title {
  margin-top: 22px;
  max-width: 801px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.01rem + 3.6vw, 3.9625rem);   /* 30 → 63.4px */
  line-height: 1.19;
  letter-spacing: -1.5px;
  color: var(--cream);
}
.hero__rule {
  display: block;
  width: 116px;
  height: 5px;
  margin-top: 26px;
  background: var(--cream);
}

/* Domaines techniques : pastilles avec picto */
.hero__domains {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 10px;
  margin-top: 24px;
}
.hero__domains li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border: 1px solid rgba(245,241,236,.35);
  border-radius: 100px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--cream);
}
.hero__domains .ico { color: rgba(245,241,236,.82); }

.hero__baseline {
  margin-top: 20px;
  max-width: 780px;
  font-size: clamp(1rem, 0.91rem + 0.37vw, 1.125rem);   /* 16 → 18px */
  line-height: 1.6;
  color: var(--cream);
  opacity: .9;
}
.hero__baseline b { font-weight: 600; opacity: 1; }
.hero__card .btn-row { margin-top: 24px; }

/* Les 3 familles, empilées à droite */
.hero__families {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 44px;
  border-left: 1px solid rgba(245,241,236,.2);
}
.hero__families a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 42px 18px 20px;
  border: 1px solid rgba(245,241,236,.28);
  border-radius: 12px;
  transition: background-color .18s ease, border-color .18s ease;
}
.hero__families a::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size: 18.5px;
  color: rgba(245,241,236,.55);
  transition: transform .18s ease, color .18s ease;
}
.hero__families a:hover {
  background: rgba(245,241,236,.1);
  border-color: rgba(245,241,236,.6);
}
.hero__families a:hover::after { color: var(--cream); transform: translateY(-50%) translateX(3px); }
.hero__families .n {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 1.54px;
  color: rgba(245,241,236,.6);
}
.hero__families .t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1.25;
  color: var(--cream);
}
.hero__families .c {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(245,241,236,.72);
}


/* =============================================================
   10. ACCUEIL — BANDEAU DE CONFIANCE & BANDE INSTALLATIONS
   ============================================================= */
.trustbar { background: var(--ink); }
.trustbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 24px;
  min-height: 75px;
  align-items: center;
  padding-block: 20px;
}
.trustbar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--pearl-2);
}
.trustbar__item .ico { color: var(--azure); }
.trustbar__item strong { font-weight: 600; }

/* Bande « installations » : le vocabulaire métier, sur une ligne */
.installbar {
  background: var(--pearl);
  border-bottom: 1px solid var(--line);
  padding-block: 18px;
}
.installbar__inner {
  display: flex;
  align-items: center;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.installbar__label {
  flex: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--muted);
}
.installbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  min-width: 0;
}
.installbar__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink-soft);
  white-space: nowrap;
}
.installbar__list .ico { color: var(--red); }
.installbar__list li:nth-child(3n+2) .ico { color: var(--violet); }
.installbar__list li:nth-child(3n)   .ico { color: var(--azure); }


/* =============================================================
   11. ACCUEIL — DEUX PARCOURS
   ============================================================= */
.parcours { background: var(--cream); }
.parcours__hint {
  max-width: 640px;
  margin-top: 4px;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--body);
  text-align: center;
}
.parcours__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 44px;
}
.parcours__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 39px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.parcours__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--fam);
}
.parcours__icon { color: var(--fam); }
.parcours__title {
  padding-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.46875rem, 1.23rem + 0.64vw, 1.75rem);
  line-height: 1.2;
  color: var(--ink);
}
.parcours__text { font-size: 17.5px; line-height: 1.55; color: var(--body); }
.parcours__list { padding: 8px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.parcours__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.parcours__list .ico { color: var(--fam); margin-top: 3px; }


/* =============================================================
   12. ACCUEIL — CATALOGUE (panneau 3 colonnes)
   ============================================================= */
.catalogue { background: var(--red); }
.catalogue .h2 {
  font-size: clamp(1.75rem, 1.13rem + 1.91vw, 2.5rem);
  letter-spacing: -0.76px;
}
.catalogue__count {
  max-width: 660px;
  margin-top: 4px;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--cream);
  opacity: .88;
  text-align: center;
}
.catalogue__panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 44px;
  padding-block: 44px;
  background: var(--white);
  border-radius: var(--radius-card);
}
/* Les trois colonnes partagent les lignes de la grille du panneau : entête,
   filet de famille et liste démarrent donc exactement à la même hauteur, même
   quand un titre passe sur deux lignes (correctif « alignement des pictos »). */
.catalogue__panel { grid-template-rows: auto auto auto; }
.famcol { padding-inline: 40px; }
.famcol + .famcol { border-left: 1px solid var(--line); }
@supports (grid-template-rows: subgrid) {
  .famcol { display: grid; grid-template-rows: subgrid; grid-row: span 3; align-content: start; }
}
/* Le picto est porté par la ligne du numéro : le numéro, le titre, le filet
   et la liste s'alignent alors tous sur le même bord gauche. */
.famcol__head { display: block; }
.famcol__ico { color: var(--fam); }
.famcol__num {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.8px;
  color: var(--zorba);
}
.famcol__title {
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.28125rem, 1.19rem + 0.32vw, 1.5rem);
  line-height: 1.2;
  color: var(--ink);
}
.famcol__for {
  margin-top: 5px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}
.famcol__rule {
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 18px;
  background: var(--fam);
}
.famcol__list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.famcol__name {
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
  transition: color .18s ease;
}
.famcol__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .5px;
  color: var(--zorba);
}
.famcol__list a:hover .famcol__name { color: var(--fam); }

.catalogue__all { margin-top: 26px; text-align: center; }
.catalogue__all a {
  font-weight: 600;
  font-size: 17.5px;
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(245,241,236,.45);
  transition: text-decoration-color .18s ease;
}
.catalogue__all a:hover { text-decoration-color: var(--cream); }

.catalogue__note {
  margin-top: 26px;
  padding: 22px 26px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 14px;
  text-align: center;
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--white);
}
.catalogue__note b { font-weight: 600; }
.catalogue__note a { text-decoration: underline; text-underline-offset: 3px; }


/* =============================================================
   13. ACCUEIL — SIGNATURE
   ============================================================= */
.signature { padding-block: clamp(48px, 5.2vw, 87px); }
.signature__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: clamp(32px, 4.5vw, 90px);
  align-items: start;
}
.signature__card {
  position: relative;
  aspect-ratio: 604 / 440;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--red) 0%, var(--violet) 52%, var(--azure) 100%);
  box-shadow: 0 30px 70px -34px rgba(122,76,158,.6);
}
.signature__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.signature__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,23,20,.72) 0%, rgba(26,23,20,0) 50%);
}
.signature__topbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  z-index: 2;
  background: linear-gradient(to right, var(--red) 0%, var(--violet) 52%, var(--azure) 100%);
}
.signature__caption {
  position: absolute;
  inset: 32px 36px auto 36px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.signature__eyebrow { letter-spacing: 2.4px; color: var(--white); opacity: .92; }
.signature__claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.34375rem, 1.07rem + 0.85vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -0.26px;
  color: var(--white);
  text-shadow: 0 1px 14px rgba(0,0,0,.4);
}
.signature__content { display: flex; flex-direction: column; gap: 22px; }
.signature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 0.95rem + 3.18vw, 3.3125rem);
  line-height: 1.22;
  letter-spacing: -1.5px;
  color: var(--ink);
}
.signature__lead {
  max-width: 560px;
  font-size: clamp(1.09375rem, 0.98rem + 0.32vw, 1.34375rem);
  line-height: 1.55;
  color: var(--body);
}
.signature__content .btn-row { padding-top: 12px; }


/* =============================================================
   14. ACCUEIL — POURQUOI / ATOUTS
   ============================================================= */
.pourquoi { background: var(--cream); }
.pourquoi__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 3.5vw, 56px);
  align-items: start;
}
.pourquoi__intro { display: flex; flex-direction: column; gap: 11px; }
.pourquoi__intro .h2 { line-height: 1; letter-spacing: -0.76px; }
.pourquoi__text {
  padding-top: 4px;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--body);
}
.pourquoi__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.atout {
  padding: 22px 22px 22px 25px;
  background: var(--white);
  border-left: 3px solid var(--fam);
  border-radius: 0 12px 12px 0;
}
.atout--rose { --fam: var(--rose); }
.atout__head { display: flex; align-items: center; gap: 10px; }
.atout__head .ico { color: var(--fam); }
.atout__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20.5px;
  line-height: 1.25;
  color: var(--ink);
}
.atout__text {
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}


/* =============================================================
   15. RÉFÉRENCES, AVIS, NOTE
   ============================================================= */
.references { background: var(--cream); padding-block: clamp(32px, 3vw, 48px); }
.references__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: clamp(40px, 4.2vw, 64px);
  background: var(--pearl);
}
.references__claim {
  max-width: 640px;
  margin-inline: auto;
  margin-top: -12px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15625rem, 1.09rem + 0.42vw, 1.34375rem);
  line-height: 1.4;
  color: var(--ink);
  text-align: center;
}

.avis__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.7fr);
  gap: 26px;
  padding-top: 28px;
}
.avis {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 31px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.avis blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20.5px;
  line-height: 1.45;
  color: var(--ink);
}
.avis figcaption { font-size: 15px; color: var(--muted); }
.note {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 36px 30px;
  background: var(--ink);
  border-radius: var(--radius-card);
  text-align: center;
}
.note__score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 49px;
  line-height: 1;
  color: var(--pearl-2);
}
.note__score span { font-size: 25.5px; color: var(--zorba); }
.note__stars { font-size: 21.5px; letter-spacing: 3px; color: var(--azure); }
.note__source {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.32px;
  text-transform: uppercase;
  color: var(--zorba);
}
.note__hint {
  max-width: 210px;
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--stone);
}


/* =============================================================
   16. ENJEUX
   ============================================================= */
.enjeux { background: var(--ink); padding-block: clamp(56px, 5.5vw, 84px); }
.enjeux__head { gap: 14px; }
.enjeux__head .h2 { max-width: 820px; line-height: 1.08; }
.enjeux__lead {
  max-width: 700px;
  padding-top: 3px;
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--tea);
}
.enjeux__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin-top: 40px;
}
.enjeu {
  padding: 27px;
  border: 1px solid var(--line-dark);
  border-radius: 14px;
}
.enjeu .ico { color: var(--azure); margin-bottom: 14px; }
.enjeu__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21.5px;
  line-height: 1.3;
  color: var(--white);
}
.enjeux__more { margin-top: 32px; }
.enjeu__text {
  margin-top: 7px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--zorba);
}


/* =============================================================
   17. FORMATEUR
   ============================================================= */
.formateur { background: var(--cream); padding-block: clamp(24px, 2.4vw, 40px); }
.formateur__grid {
  display: grid;
  grid-template-columns: minmax(0, 477fr) minmax(0, 795fr);
  gap: clamp(32px, 3.5vw, 56px);
  align-items: start;
  padding-block: clamp(48px, 5.2vw, 80px);
  background: var(--pearl);
}
.formateur__photo {
  width: 100%;
  aspect-ratio: 477 / 596;
  object-fit: cover;
  object-position: center 22%;
  border-top: 2px solid var(--red);
  border-radius: 18px;
}
.formateur__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: clamp(0px, 4vw, 71px);
}
.formateur__content .h2 { padding-top: 6px; }
.formateur__role {
  font-weight: 600;
  font-size: 19.5px;
  color: var(--azure);
}
.formateur__text {
  max-width: 640px;
  margin-top: 12px;
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--body);
}
.formateur__content .btn-row { margin-top: 30px; }


/* =============================================================
   18. BANDE CTA DE FIN DE PAGE
   ============================================================= */
.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 5.7vw, 88px);
  background: linear-gradient(125deg, var(--red) 0%, var(--violet) 54%, var(--azure) 100%);
}
.cta-band--ink { background: var(--ink); }
.cta-band__deco {
  position: absolute;
  left: -40px;
  top: -25%;
  height: 150%;
  width: auto;
  opacity: .9;
  pointer-events: none;
}
.cta-band__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  text-align: center;
}
.cta-band__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.08rem + 2.44vw, 2.9375rem);
  line-height: 1.1;
  letter-spacing: -0.88px;
  color: var(--white);
}
.cta-band__text {
  max-width: 620px;
  font-size: 20.5px;
  line-height: 1.55;
  color: var(--white);
  opacity: .92;
}
.cta-band .btn-row { padding-top: 16px; }


/* =============================================================
   19. COMPOSANTS DE PAGE INTÉRIEURE
   -------------------------------------------------------------
   Tout ce dont les pages intérieures ont besoin. Aucune page ne
   doit inventer de classe : si un composant manque, on l'ajoute
   ICI, jamais dans le HTML.
   ============================================================= */

/* ---------- 19.01 page-hero : bandeau de titre ---------- */
.page-hero {
  position: relative;
  background: var(--pearl);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(26px, 3vw, 40px) clamp(34px, 4.4vw, 60px);
}
.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 900px;
}
.page-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 1.12rem + 2.76vw, 3.1875rem);   /* 30 → 51px */
  line-height: 1.12;
  letter-spacing: -1.3px;
  color: var(--ink);
}
.page-hero__lead {
  max-width: 760px;
  font-size: clamp(1.09375rem, 1.03rem + 0.37vw, 1.3125rem);
  line-height: 1.6;
  color: var(--body);
}
.page-hero__rule {
  display: block;
  width: 88px;
  height: 4px;
  background: var(--fam);
}
.page-hero .btn-row { margin-top: 8px; }
.page-hero .breadcrumb { margin-bottom: 16px; }

/* Variante sombre */
.page-hero--dark { background: var(--ink); border-bottom-color: var(--line-dark); }
.page-hero--dark .page-hero__title { color: var(--pearl-2); }
.page-hero--dark .page-hero__lead  { color: var(--tea); }
.page-hero--dark .eyebrow          { color: var(--cream); }
.page-hero--dark .breadcrumb, 
.page-hero--dark .breadcrumb a     { color: var(--zorba); }
.page-hero--dark .breadcrumb a:hover { color: var(--cream); }
.page-hero--dark .page-hero__meta-item { border-color: var(--line-dark); color: var(--tea); }

/* Variante dégradé de marque */
.page-hero--gradient {
  background: linear-gradient(115deg, var(--red) 0%, var(--violet) 55%, var(--azure) 100%);
  border-bottom: 0;
}
.page-hero--gradient .page-hero__title,
.page-hero--gradient .page-hero__lead,
.page-hero--gradient .eyebrow { color: var(--white); }
.page-hero--gradient .page-hero__lead { opacity: .93; }
.page-hero--gradient .breadcrumb,
.page-hero--gradient .breadcrumb a { color: rgba(255,255,255,.78); }
.page-hero--gradient .breadcrumb a:hover { color: var(--white); }
.page-hero--gradient .page-hero__rule { background: rgba(255,255,255,.85); }
.page-hero--gradient .page-hero__meta-item { border-color: rgba(255,255,255,.4); color: var(--white); }

/* Variante crème (défaut alternatif, plus clair que perle) */
.page-hero--cream { background: var(--cream); }

/* Filet de famille en haut du bandeau (fiches formation) */
.page-hero--fam::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--fam);
}

/* Méta d'une fiche formation : durée / tarif / public */
.page-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-top: 6px;
}
.page-hero__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--ink-soft);
}
.page-hero__meta-item .ico { color: var(--fam); }
.page-hero__meta-item b { font-weight: 600; color: var(--ink); }
.page-hero--dark .page-hero__meta-item,
.page-hero--gradient .page-hero__meta-item { background: rgba(255,255,255,.09); }
.page-hero--dark .page-hero__meta-item b,
.page-hero--gradient .page-hero__meta-item b { color: inherit; }
.page-hero--dark .page-hero__meta-item .ico,
.page-hero--gradient .page-hero__meta-item .ico { color: inherit; }


/* ---------- 19.01b page-hero illustré : photo d'installation en fond ----------
   Retour client : « dans les pages intérieures, garder une image en fond de
   l'en-tête ». Traité intégralement en CSS — le markup des 39 pages ne bouge
   pas. L'image est choisie par `body[data-section]` / `body[data-page]` via
   deux variables, et un voile sombre dégradé garantit le contraste AA du
   titre, du chapô, du fil d'Ariane et des méta (vérifié pixel blanc au pire
   cas : titre 10,5:1 · chapô 7,0:1 · fil d'Ariane 5,3:1).
   La couleur de famille bascule sur sa déclinaison claire `--fam-lite`, qui
   reste lisible sur la photo tout en gardant le repère de navigation.
   Pas de `background-attachment: fixed`, pas de photo supplémentaire :
   on réutilise les deux images déjà présentes dans assets/img/. */

body:not([data-page="accueil"]) .page-hero {
  --fam: var(--fam-lite);
  --hero-shot:  url("../img/signature-tuyauterie.jpg");
  --hero-focus: center 50%;

  position: relative;
  background-color: var(--ink-deep);
  /* Deux voiles superposés :
     - le vertical porte le contraste et ne dépend pas de la largeur de la
       fenêtre (le texte reste lisible du 360 au 1728) ;
     - l'horizontal ne fait qu'assombrir davantage le côté texte, il ne peut
       jamais éclaircir le fond sous un mot. */
  background-image:
    linear-gradient(90deg,  rgba(19,16,14,.42) 0%, rgba(19,16,14,.12) 48%, rgba(19,16,14,0) 78%),
    linear-gradient(180deg, rgba(19,16,14,.9) 0%, rgba(19,16,14,.82) 48%, rgba(19,16,14,.9) 100%),
    var(--hero-shot);
  background-position: 0 0, 0 0, var(--hero-focus);
  background-size: cover, cover, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
  border-bottom: 1px solid var(--line-dark);
  padding-block: clamp(30px, 3.4vw, 46px) clamp(40px, 4.8vw, 66px);
}

/* Répartition des deux photos, par rubrique */
body[data-section="formations"] .page-hero {          /* catalogue, 17 fiches, sessions, sur-mesure */
  --hero-shot:  url("../img/hero-chaufferie.jpg");
  --hero-focus: center 62%;
}
body[data-section="pour-qui"] .page-hero,
body[data-section="entreprise"] .page-hero,
body[data-section="conseils"] .page-hero {
  --hero-shot:  url("../img/signature-tuyauterie.jpg");
  --hero-focus: center 42%;
}
/* Pages hors rubrique : mêmes photos, cadrages différents pour éviter la monotonie */
body[data-section=""] .page-hero {                    /* contact, financement, FAQ, pré-diagnostic */
  --hero-shot:  url("../img/hero-chaufferie.jpg");
  --hero-focus: 22% 28%;
}
body[data-page="cgv"] .page-hero,
body[data-page="mentions-legales"] .page-hero,
body[data-page="confidentialite"] .page-hero,
body[data-page="accessibilite-handicap"] .page-hero,
body[data-page="plan-du-site"] .page-hero {           /* légales & plan du site */
  --hero-shot:  url("../img/signature-tuyauterie.jpg");
  --hero-focus: 80% 72%;
}

/* Texte : passage en clair, quelle que soit la variante d'origine
   (--cream, --dark, --gradient, --fam, --portrait ou aucune) */
body:not([data-page="accueil"]) .page-hero .page-hero__title { color: var(--pearl-2); }
body:not([data-page="accueil"]) .page-hero .page-hero__lead  { color: var(--tea); opacity: 1; }
body:not([data-page="accueil"]) .page-hero .eyebrow          { color: var(--cream); }
body:not([data-page="accueil"]) .page-hero .eyebrow--fam     { color: var(--fam); }
body:not([data-page="accueil"]) .page-hero .muted            { color: var(--stone); }
body:not([data-page="accueil"]) .page-hero .page-hero__rule  { background: var(--fam); }

/* Fil d'Ariane : reprend et généralise le correctif des fonds sombres */
body:not([data-page="accueil"]) .page-hero .breadcrumb,
body:not([data-page="accueil"]) .page-hero .breadcrumb a       { color: var(--stone); }
body:not([data-page="accueil"]) .page-hero .breadcrumb li + li::before { color: var(--zorba); }
body:not([data-page="accueil"]) .page-hero .breadcrumb a:hover { color: var(--cream); }
body:not([data-page="accueil"]) .page-hero .breadcrumb [aria-current="page"] { color: var(--pearl-2); }

/* Méta et pastilles : version « sur fond sombre » */
body:not([data-page="accueil"]) .page-hero .page-hero__meta-item {
  background: rgba(255,255,255,.1);
  border-color: rgba(245,241,236,.3);
  color: var(--pearl-2);
}
body:not([data-page="accueil"]) .page-hero .page-hero__meta-item b   { color: var(--white); }
body:not([data-page="accueil"]) .page-hero .page-hero__meta-item .ico { color: var(--fam); }
body:not([data-page="accueil"]) .page-hero .tag {
  background: rgba(255,255,255,.1);
  border-color: rgba(245,241,236,.32);
  color: var(--cream);
}
body:not([data-page="accueil"]) .page-hero .tag--fam    { border-color: var(--fam); color: var(--fam); }
body:not([data-page="accueil"]) .page-hero .tag--solid  { background: var(--fam); border-color: var(--fam); color: var(--ink); }
body:not([data-page="accueil"]) .page-hero .tbc {
  text-decoration-color: rgba(255,138,118,.7);
}

/* Le bandeau dégradé garde son identité par un filet de marque en tête */
body:not([data-page="accueil"]) .page-hero--gradient::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--brand-gradient);
}

/* qui-sommes-nous : le portrait reste, il gagne juste un fond illustré */
body:not([data-page="accueil"]) .page-hero--portrait .page-hero__portrait {
  box-shadow: 0 24px 50px -28px rgba(0,0,0,.8);
}


/* ---------- 19.02 breadcrumb : fil d'Ariane ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .8px;
  color: var(--muted);
}
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before {
  content: "/";
  color: var(--zorba);
}
.breadcrumb a { transition: color .18s ease; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb [aria-current="page"] { color: var(--ink); }


/* ---------- 19.03 layout-side : contenu + colonne sticky ---------- */
.layout-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 356px);
  gap: clamp(28px, 3.4vw, 60px);
  align-items: start;
}
.layout-side__main { min-width: 0; }
.layout-side__aside {
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
/* Carte de la colonne latérale */
.side-card {
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.side-card--ink { background: var(--ink); border-color: var(--line-dark); color: var(--tea); }
.side-card--fam { border-top: 4px solid var(--fam); }
.side-card__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1.25;
  color: var(--ink);
}
.side-card--ink .side-card__title { color: var(--pearl-2); }
.side-card__text { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.side-card .btn { margin-top: 16px; }
.side-card__list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.side-card__list li { display: flex; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.side-card__list .ico { color: var(--fam); margin-top: 2px; }


/* ---------- 19.04 card-formation & grid-formations ---------- */
.grid-formations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.grid-formations--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card-formation {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 26px 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-formation::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--fam);
}
.card-formation:hover {
  transform: translateY(-2px);
  border-color: var(--fam);
  box-shadow: 0 20px 38px -26px rgba(34,30,27,.5);
}
.card-formation__fam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--fam);
}
.card-formation__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1.28;
  color: var(--ink);
}
.card-formation__for {
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--body);
}
.card-formation__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.card-formation__meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.card-formation__meta .ico { color: var(--zorba); }
.card-formation__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 600;
  font-size: 16px;
  color: var(--fam);
}
.card-formation:hover .card-formation__link .ico { transform: translateX(3px); }
.card-formation__link .ico { transition: transform .18s ease; }


/* ---------- 19.05 filters : barre de filtres du catalogue ---------- */
.filters {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.filters__label {
  flex: none;
  min-width: 106px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
.filters__row { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 17px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.filter:hover { border-color: var(--ink-soft); }
.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}
.filter--f01[aria-pressed="true"] { background: var(--red);    border-color: var(--red); }
.filter--f02[aria-pressed="true"] { background: var(--violet); border-color: var(--violet); }
.filter--f03[aria-pressed="true"] { background: var(--azure);  border-color: var(--azure); }

.filters__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.filters__count {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--muted);
}
.filters__count b { color: var(--ink); font-weight: 400; }
.filters__reset {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--red);
  cursor: pointer;
}
.filters__reset:hover { text-decoration: underline; }

/* État « aucun résultat » */
.no-result {
  padding: 40px 24px;
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
  text-align: center;
  color: var(--body);
}
.no-result__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20.5px;
  color: var(--ink);
  margin-bottom: 6px;
}


/* ---------- 19.06 accordion : programme, FAQ ---------- */
/* --- intro illustrée (fiche formation) -------------------------------
   Chapo et photo côte à côte en tête de « Pourquoi cette formation ».
   L'image ne flotte pas : le reste du texte reprend la pleine largeur
   dessous, sinon les derniers paragraphes se réduisent à trois mots. */
.intro-illustree {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
  margin-bottom: var(--flow);
}

.intro-illustree__texte > :first-child { margin-top: 0; }
.intro-illustree__texte > :last-child { margin-bottom: 0; }

.intro-illustree__media {
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--pearl);
}

.intro-illustree__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.intro-illustree__media figcaption {
  padding: 10px 14px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 760px) {
  .intro-illustree { grid-template-columns: 1fr; }
  .intro-illustree__media { order: -1; }
}

.accordion {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.accordion__item + .accordion__item { border-top: 1px solid var(--line); }
.accordion__head { margin: 0; }
.accordion__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color .16s ease;
}
.accordion__btn:hover { background: var(--cream); }
.accordion__title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18.5px;
  line-height: 1.3;
  color: var(--ink);
}
.accordion__chev {
  flex: none;
  color: var(--muted);
  transition: transform .2s ease;
}
.accordion__btn[aria-expanded="true"] .accordion__chev { transform: rotate(180deg); color: var(--red); }
.accordion__panel { padding: 0 24px 24px; }
.accordion__panel > * + * { margin-top: 16px; }


/* ---------- 19.07 specs : mentions réglementaires (clé / valeur) ---------- */
.specs {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.specs__row {
  display: grid;
  grid-template-columns: 246px minmax(0, 1fr);
  gap: 0 28px;
  padding: 18px 26px;
}
.specs__row + .specs__row { border-top: 1px solid var(--line); }
.specs__row:nth-child(odd) { background: rgba(245,241,236,.5); }
.specs dt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.specs dt .ico { color: var(--zorba); margin-top: -2px; }
.specs dd {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.specs dd ul { display: flex; flex-direction: column; gap: 7px; }
.specs dd li { display: flex; gap: 10px; }
.specs dd li::before { content: "—"; color: var(--zorba); flex: none; }
.specs dd strong { color: var(--ink); font-weight: 600; }


/* ---------- 19.08 sessions : agenda ---------- */
.table-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.sessions th {
  padding: 15px 24px;
  background: var(--cream);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--zorba);
  text-align: left;
}
.sessions td {
  padding: 20px 24px;
  border-top: 1px solid var(--line);
  font-size: 17.5px;
  color: var(--body);
  vertical-align: middle;
}
.sessions .cell-date,
.sessions .cell-prix {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.sessions .cell-prix { color: var(--red); }
.sessions .cell-formation { color: var(--ink); }
.sessions .cell-formation a { transition: color .18s ease; }
.sessions .cell-formation a:hover { color: var(--red); text-decoration: underline; }
.sessions .cell-action { text-align: right; }
.session-row { transition: background-color .18s ease; }
.session-row:hover { background: rgba(245,241,236,.6); }
.session-row .fam-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--fam);
  vertical-align: 1px;
}
.sessions .cell-places {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}

/* Barre de tri/filtre de l'agenda */
.sessions-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  margin-bottom: 18px;
}
.sessions-bar .filters__row { flex: 1; }
.sessions-sort {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}
.sessions-sort select {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}


/* ---------- 19.09 callout : encart d'attention ---------- */
.callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px;
  background: var(--pearl);
  border-left: 4px solid var(--red);
  border-radius: 0 14px 14px 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
}
.callout > .ico { flex: none; color: var(--red); margin-top: 2px; }
.callout__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18.5px;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 5px;
}
.callout__body > * + * { margin-top: 10px; }
.callout a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.callout--info { background: rgba(89,143,219,.09); border-left-color: var(--azure); }
.callout--info > .ico { color: var(--azure); }
.callout--info a { color: var(--azure); }

.callout--dark {
  background: var(--ink);
  border-left-color: var(--azure);
  color: var(--tea);
}
.callout--dark .callout__title { color: var(--pearl-2); }
.callout--dark > .ico { color: var(--azure); }
.callout--dark a { color: var(--cream); }

.callout--gradient {
  background: linear-gradient(115deg, var(--red) 0%, var(--violet) 58%, var(--azure) 100%);
  border-left: 0;
  border-radius: 14px;
  color: rgba(255,255,255,.94);
}
.callout--gradient .callout__title { color: var(--white); }
.callout--gradient > .ico { color: var(--white); }
.callout--gradient a { color: var(--white); }


/* ---------- 19.10 stat-grid : chiffres clés ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.stat-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  border-top: 4px solid var(--fam);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: clamp(1.875rem, 1.38rem + 1.7vw, 2.5rem);   /* 30 → 40px */
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--ink);
}
.stat__value span { font-size: .5em; letter-spacing: 0; color: var(--muted); }
.stat__label {
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
}
.stat__source {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .8px;
  color: var(--zorba);
}
.stat-grid--ink .stat { background: transparent; border-color: var(--line-dark); }
.stat-grid--ink .stat__value { color: var(--pearl-2); }
.stat-grid--ink .stat__label { color: var(--tea); }


/* ---------- 19.11 steps : déroulé numéroté ---------- */
.steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  counter-reset: step;
}
.step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 20px;
  padding-bottom: 28px;
}
.step:last-child { padding-bottom: 0; }
.step::before {           /* filet vertical de liaison */
  content: "";
  position: absolute;
  left: 25px;
  top: 52px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.step:last-child::before { display: none; }
.step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 17.5px;
  color: var(--fam);
}
.step__body { padding-top: 10px; }
.step__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1.3;
  color: var(--ink);
}
.step__text { margin-top: 7px; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.steps--ink .step__num { background: var(--ink); border-color: var(--line-dark); color: var(--azure); }
.steps--ink .step::before { background: var(--line-dark); }
.steps--ink .step__title { color: var(--pearl-2); }
.steps--ink .step__text { color: var(--tea); }


/* ---------- 19.12 form : formulaires ---------- */
.form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
}
.form__grid--1 { grid-template-columns: minmax(0, 1fr); }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.field__label .req { color: var(--red); }
.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 15px;
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field__input::placeholder { color: var(--stone); }
.field__input:hover { border-color: var(--zorba); }
.field__input:focus {
  outline: 0;
  border-color: var(--azure);
  box-shadow: 0 0 0 3px rgba(89,143,219,.2);
}
textarea.field__input { min-height: 140px; resize: vertical; }
select.field__input {
  appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, #6e6459 50%), linear-gradient(135deg, #6e6459 50%, transparent 50%);
  background-position: calc(100% - 21px) calc(50% + 2px), calc(100% - 15px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field__hint {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.field__error {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--alert);
}
.field__input[aria-invalid="true"] { border-color: var(--alert); background: rgba(181,0,0,.03); }
.field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(181,0,0,.16); }

/* Cases à cocher & radios */
.field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
.field--check input[type="checkbox"],
.field--check input[type="radio"] {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--red);
  cursor: pointer;
}
.field--check label {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--body);
  cursor: pointer;
}
.field--check a { color: var(--red); text-decoration: underline; }
.check-list { display: flex; flex-direction: column; gap: 12px; }
.check-list .field--check { margin: 0; }

/* Groupe de champs */
.form__fieldset { display: flex; flex-direction: column; gap: 14px; }
.form__legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  color: var(--ink);
}
.form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}
.form__legal { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 460px; }

/* Écran de confirmation */
.form__done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 32px;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ok);
  border-radius: var(--radius-card);
}
.form__done .ico { color: var(--ok); }
.form__done-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 23.5px;
  line-height: 1.2;
  color: var(--ink);
}
.form__recap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: 12px;
}
.form__recap div { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15.5px; }
.form__recap dt {
  min-width: 162px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 2px;
}
.form__recap dd { color: var(--ink); flex: 1; min-width: 0; }

/* Formulaire multi-étapes */
.form__progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  counter-reset: fstep;
}
.form__progress li {
  flex: 1 1 120px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--muted);
}
.form__progress li::before {
  counter-increment: fstep;
  content: counter(fstep);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.form__progress li.is-active {
  border-color: var(--red);
  color: var(--ink);
  font-weight: 600;
}
.form__progress li.is-active::before { background: var(--red); color: var(--white); }
.form__progress li.is-done::before { background: var(--ok); color: var(--white); }
.form__step { display: none; flex-direction: column; gap: 18px; }
.form__step.is-active { display: flex; }
.form__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}


/* ---------- 19.13 prose : contenu long (articles, pages légales) ---------- */
.prose {
  font-size: 18.5px;
  line-height: 1.7;
  color: var(--body);
}
/* Mesure de lecture : 78 caractères au maximum (mesuré, pas estimé — l'unité
   `ch` de Source Sans 3 est plus large que le caractère moyen, 63ch donne
   ~78 signes par ligne). Texte courant uniquement : tableaux, encarts et
   figures gardent la pleine largeur de la colonne. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > dl,
.prose > h2,
.prose > h3,
.prose > blockquote { max-width: 63ch; }

/* Ajoute le 2026-09-16 a la demande de Fabien. Sur un bandeau pleine largeur,
   la mesure de lecture laisse un vide a droite qui se remarque — constate sur
   la section « Independance » de Qui sommes-nous. Ce modificateur la leve
   ponctuellement, sans rien changer a la regle generale. */
.prose--large > p,
.prose--large > ul,
.prose--large > ol,
.prose--large > dl,
.prose--large > h2,
.prose--large > h3,
.prose--large > blockquote { max-width: none; }

.prose > * + * { margin-top: 22px; }
.prose h2 {
  margin-top: 42px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.46875rem, 1.23rem + 0.96vw, 1.875rem);   /* 23.5 → 30px */
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.prose h3 {
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.21875rem, 1.14rem + 0.37vw, 1.4375rem);/* 19.5 → 23px */
  line-height: 1.3;
  color: var(--ink);
}
.prose h2 + p, .prose h3 + p { margin-top: 13px; }
.prose a {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(181,0,0,.4);
  transition: text-decoration-color .18s ease;
}
.prose a:hover { text-decoration-color: var(--red); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.prose ul li { display: flex; gap: 12px; }
.prose ul li::before {
  content: "";
  flex: none;
  width: 6px; height: 6px;
  margin-top: 11px;
  border-radius: 50%;
  background: var(--fam);
}
.prose ol { counter-reset: prose-li; }
.prose ol li { display: flex; gap: 12px; }
.prose ol li::before {
  counter-increment: prose-li;
  content: counter(prose-li) ".";
  flex: none;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--fam);
  padding-top: 2px;
}
.prose blockquote {
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--fam);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21.5px;
  line-height: 1.45;
  color: var(--ink);
}
.prose blockquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  color: var(--muted);
}
.prose figure { margin-top: 28px; }
.prose figure img { width: 100%; border-radius: 14px; }
.prose figcaption {
  margin-top: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}
.prose__table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table {
  min-width: 480px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  font-size: 16px;
}
.prose th {
  padding: 13px 18px;
  background: var(--cream);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}
.prose td { padding: 14px 18px; border-top: 1px solid var(--line); vertical-align: top; }
.prose hr { margin-top: 34px; border: 0; border-top: 1px solid var(--line); }
.prose code {
  padding: 2px 6px;
  background: var(--pearl);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: .88em;
  color: var(--ink);
}
.prose--light { color: var(--tea); }
.prose--light h2, .prose--light h3, .prose--light strong { color: var(--pearl-2); }


/* ---------- 19.14 card-article & grid-articles ---------- */
.grid-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.grid-articles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-article {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-article:hover {
  transform: translateY(-2px);
  border-color: var(--fam);
  box-shadow: 0 20px 38px -26px rgba(34,30,27,.5);
}
.card-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
}
.card-article__meta .tag { margin: 0; }
.card-article__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20.5px;
  line-height: 1.28;
  color: var(--ink);
}
.card-article__excerpt {
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}
.card-article__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-weight: 600;
  font-size: 16px;
  color: var(--fam);
}
.card-article:hover .card-article__link .ico { transform: translateX(3px); }
.card-article__link .ico { transition: transform .18s ease; }


/* ---------- 19.15 logo-wall : mur de références (texte) ---------- */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 40px;
}
.logo-wall li {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15625rem, 1.03rem + 0.43vw, 1.46875rem);   /* 18.5 → 23.5px */
  line-height: 1.2;
  color: var(--stone);
  transition: color .18s ease;
}
.logo-wall li:hover { color: var(--ink-soft); }
.logo-wall--dense { gap: 12px 28px; }
.logo-wall--dense li { font-size: 17.5px; }
.logo-wall--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.logo-wall--grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 14px 12px;
  background: var(--white);
  font-size: 16px;
  text-align: center;
}


/* ---------- 19.16 tag & tag-row : mots-clés métier ---------- */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 9px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .8px;
  line-height: 1.5;
  color: var(--muted);
  white-space: nowrap;
}
.tag .ico { color: var(--fam); }
.tag--fam   { border-color: var(--fam); color: var(--fam); }
.tag--solid { background: var(--fam); border-color: var(--fam); color: var(--white); }
.tag--solid .ico { color: currentColor; }
.tag--ink   { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tag--light { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.32); color: var(--cream); }
.tag--lg    { font-size: 14px; padding: 9px 17px; }
a.tag:hover { border-color: var(--fam); color: var(--fam); }


/* ---------- 19.17 anchor-nav : sommaire ancré sticky ---------- */
.anchor-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(245,241,236,.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.anchor-nav__list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.anchor-nav__list::-webkit-scrollbar { height: 3px; }
.anchor-nav__list::-webkit-scrollbar-thumb { background: var(--line); }
.anchor-nav a {
  display: block;
  padding: 15px 14px;
  border-bottom: 2px solid transparent;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}
.anchor-nav a:hover { color: var(--ink); }
.anchor-nav a.is-active { color: var(--red); border-bottom-color: var(--red); }
/* Décalage d'ancre pour ne pas masquer le titre sous la barre */
[id] { scroll-margin-top: 72px; }


/* ---------- 19.18 pagination & liens de navigation ---------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.pagination a:hover { border-color: var(--ink-soft); color: var(--ink); }
.pagination [aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pagination .is-disabled { opacity: .45; pointer-events: none; }
.pagination__gap { border: 0; background: none; min-width: 24px; color: var(--zorba); }


/* ---------- 19.19 tbc (inerte) : traçabilité interne, sans rendu ----------
   Le dispositif « Contenus à valider » (soulignement pointillé, surlignage jaune,
   bouton flottant) a été retiré le 25/08/2026 à la demande de Fabien.
   Les classes .tbc / .tbc-block et les attributs data-tbc restent dans le HTML :
   ils ne produisent plus aucun rendu, mais conservent la trace de ce que l'agence a
   rédigé faute de source client, pour la migration WordPress.
   Le recensement lisible est dans A-VALIDER.md.                                    */
.tbc, .tbc-block {
  text-decoration: inherit;
  background: none;
  box-shadow: none;
  cursor: inherit;
}
.tbc::after, .tbc-block::after { content: none; }


/* =============================================================
   20. RESPONSIVE
   Paliers : 1180px · 960px (burger) · 720px · 480px
   ============================================================= */

/* --- Tablette large : 1180px --- */
@media (max-width: 1180px) {
  .nav { gap: 16px; }
  .nav__list { gap: 0; }
  .nav__link { padding: 10px 8px; font-size: 15.5px; }

  .hero { min-height: 560px; }
  .hero__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
    gap: 34px;
    padding: 34px 34px 38px;
  }
  .hero__families { padding-left: 32px; }

  .famcol { padding-inline: 30px; }

  .avis__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note { grid-column: span 2; }

  .layout-side { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
  .sessions th, .sessions td { padding-inline: 16px; }
  .sessions .cell-action .link { font-size: 15px; }
  .grid-formations, .grid-articles { gap: 20px; }
  .specs__row { grid-template-columns: 214px minmax(0, 1fr); }
}

/* --- Bascule menu mobile : 960px --- */
@media (max-width: 960px) {
  .burger { display: flex; }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 20px var(--gutter) 30px;
    background: var(--cream);
    border-top: 1px solid var(--line);
    box-shadow: 0 20px 40px -28px rgba(34,30,27,.6);
    display: none;
  }
  .site-header.is-open .nav { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__item { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__link {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    min-height: 48px;
    padding: 12px 4px;
    font-size: 18.5px;
  }
  .nav__item.is-current > .nav__link::after,
  .nav__link[aria-current="page"]::after { left: 4px; right: auto; width: 26px; bottom: 6px; }
  .nav__toggle { width: 48px; height: 48px; margin-left: 0; }

  /* Sous-menu = accordéon, dans le flux */
  .nav__sub {
    position: static;
    order: 3;
    width: 100%;
    min-width: 0;
    margin: 2px 0 10px;
    padding: 6px;
    border-radius: 10px;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .nav__item--has-sub:hover > .nav__sub,
  .nav__item--has-sub:focus-within > .nav__sub { display: none; }
  .nav__item--has-sub.is-open > .nav__sub { display: block; }
  .nav__sub a { min-height: 44px; display: flex; align-items: center; }
  .nav__sub::before { display: none; }
  .nav .btn { align-self: flex-start; }

  .hero__card { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero__families {
    padding-left: 0;
    padding-top: 26px;
    border-left: 0;
    border-top: 1px solid rgba(245,241,236,.2);
  }

  .trustbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .signature__grid { grid-template-columns: minmax(0, 1fr); }
  .signature__card { max-width: 620px; }

  .parcours__grid { grid-template-columns: minmax(0, 1fr); }
  .pourquoi__grid { grid-template-columns: minmax(0, 1fr); }
  .enjeux__grid   { grid-template-columns: minmax(0, 1fr); }

  .catalogue__panel { grid-template-columns: minmax(0, 1fr); padding-block: 36px; }
  .famcol + .famcol {
    margin-top: 32px;
    padding-top: 32px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .formateur__grid { grid-template-columns: minmax(0, 1fr); }
  .formateur__photo { max-width: 420px; }
  .formateur__content { padding-top: 0; }

  /* Composants de page intérieure */
  .layout-side { grid-template-columns: minmax(0, 1fr); }
  .layout-side__aside { position: static; top: auto; }
  .grid-formations, .grid-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid, .stat-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Mobile : 720px --- */
@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .br-opt { display: none; }

  .hero { min-height: 0; }
  .hero__card { padding: 26px 24px 30px; border-radius: 8px; }
  .hero__title { margin-top: 18px; }
  .hero__rule { margin-top: 22px; }
  .hero__domains { gap: 6px; margin-top: 18px; }
  .hero__domains li { padding: 5px 12px 5px 9px; font-size: 14px; }
  .hero__baseline { margin-top: 16px; }
  .hero__card .btn-row { margin-top: 20px; flex-direction: column; align-items: stretch; }
  .hero__card .btn-row .btn { width: 100%; }
  .hero__families { gap: 8px; padding-top: 22px; }
  .hero__families a { padding: 14px 38px 14px 16px; }
  .hero__families .t { font-size: 17.5px; }

  .installbar__inner { gap: 10px 18px; }
  .installbar__list { gap: 8px 18px; }
  .installbar__list li { font-size: 14px; }

  .parcours__card { padding: 28px 24px; }
  .pourquoi__cards { grid-template-columns: minmax(0, 1fr); }
  .famcol { padding-inline: 24px; }
  .catalogue__note { padding: 20px; text-align: left; }

  .avis__grid { grid-template-columns: minmax(0, 1fr); padding-top: 8px; }
  .note { grid-column: auto; }
  .avis { padding: 24px; }

  .section__head--row { flex-direction: column; align-items: flex-start; gap: 12px; }


  /* Composants de page intérieure */
  .grid-formations, .grid-articles, .grid-formations--2, .grid-articles--2 { grid-template-columns: minmax(0, 1fr); }
  .stat-grid, .stat-grid--2, .stat-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .specs__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 20px; }
  .accordion__btn { padding: 16px 18px; gap: 12px; }
  .accordion__panel { padding: 0 18px 20px; }
  .filters { padding: 18px 18px; }
  .filters__group { flex-direction: column; align-items: flex-start; gap: 8px; }
  .filters__label { min-width: 0; }
  .step { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .step__num { width: 44px; height: 44px; font-size: 15px; }
  .step::before { left: 21px; top: 46px; }
  .prose { font-size: 17.5px; }
  .side-card { padding: 22px; }

  /* Mobile : zones de clic ≥ 44 px et pastilles qui acceptent le retour ligne */
  .filter { min-height: 44px; }
  .tag { white-space: normal; }
  .footer__col ul { gap: 2px; }
  .footer__col a { display: inline-block; padding-block: 9px; }
  .footer__bottom ul { gap: 4px 20px; }
  .footer__bottom a { display: inline-block; padding-block: 9px; }
  .breadcrumb a { display: inline-block; padding-block: 6px; }
  .form__done { padding: 24px; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .footer__brand { grid-column: span 2; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Agenda : le tableau devient une liste de cartes dès 860px ---
   Remonté de 720 à 860 px avec l'agrandissement de la typographie : entre
   721 et 860 px, la colonne « Formation » ne tenait plus que sur trois à
   quatre lignes et la ligne atteignait 177 px de haut. */
@media (max-width: 860px) {
  /* Le tableau des sessions devient une liste de cartes */
  .table-card { border: 0; background: none; overflow: visible; }
  .sessions, .sessions tbody { display: block; width: 100%; }
  .sessions thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sessions tbody tr {
    display: block;
    margin-bottom: 16px;
    padding: 6px 20px 14px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
  }
  .sessions td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
  }
  .sessions tbody tr td:last-child { border-bottom: 0; }
  .sessions td::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1.54px;
    text-transform: uppercase;
    color: var(--zorba);
    text-align: left;
  }
  .sessions .cell-action { text-align: left; }
  .sessions .fam-dot { display: none; }
  .sessions .cell-action .btn { width: 100%; }
}

/* --- Petit mobile : 480px --- */
@media (max-width: 480px) {
  .btn, .btn-row .btn { width: 100%; }
  .btn--sm, .pagination .btn, .filter { width: auto; }
  .header__logo img { height: 46px; }
  .header__inner { min-height: 84px; gap: 12px; }
  .signature__caption { inset: 24px 22px auto 22px; }
  .cta-band__deco { opacity: .55; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__brand { grid-column: auto; }
  .logo-wall { gap: 14px 24px; }
  .form__progress li { flex: 1 1 100%; }
}


/* =============================================================
   21. ACCESSIBILITÉ & IMPRESSION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .site-footer, .anchor-nav, .cta-band, .burger { display: none !important; }
  body { background: #fff; color: #000; }
  .hero::after, .hero__bg { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 12px; }
  .accordion__panel { display: block !important; }
}


/* =============================================================
   22. PAGE DE RÉFÉRENCE INTERNE (_composants.html)
   Ces classes ne servent QUE au catalogue de composants.
   Elles ne doivent apparaître sur aucune page du site.
   ============================================================= */
.doc-intro { background: var(--ink); padding-block: 40px 44px; }
.doc-intro .h1 { color: var(--pearl-2); }
.doc-intro p { color: var(--tea); max-width: 780px; margin-top: 12px; font-size: 16px; line-height: 1.6; }
.doc-intro code {
  padding: 2px 6px;
  background: rgba(255,255,255,.1);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .88em;
  color: var(--cream);
}

.doc-section { padding-block: 40px; border-bottom: 1px solid var(--line); }
.doc-section:last-of-type { border-bottom: 0; }
.doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 6px; }
.doc-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}
.doc-head .doc-class {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--red);
  background: var(--pearl);
  padding: 3px 9px;
  border-radius: 6px;
}
.doc-note {
  max-width: 820px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--body);
}
.doc-note code {
  padding: 1px 5px;
  background: var(--pearl);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .9em;
  color: var(--ink);
}
.doc-sub {
  margin: 26px 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-demo {
  padding: 26px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow-x: auto;
}
.doc-demo--white { background: var(--white); }
.doc-demo--ink   { background: var(--ink); }
.doc-demo--flush { padding: 0; overflow: hidden; }
.doc-demo > * + * { margin-top: 16px; }
.doc-code {
  margin-top: 12px;
  padding: 18px 20px;
  background: var(--ink-deep);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.doc-code pre { margin: 0; }
.doc-code code {
  display: block;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  color: #d8cfc4;
  white-space: pre;
  tab-size: 2;
}
.doc-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.doc-icons li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 96px;
  padding: 14px 8px;
  background: var(--white);
  text-align: center;
}
.doc-icons .ico { color: var(--ink); }
.doc-icons span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .4px;
  color: var(--muted);
  word-break: break-all;
}
.doc-swatches { display: flex; flex-wrap: wrap; gap: 12px; }
.doc-swatch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 132px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.doc-swatch i {
  display: block;
  height: 42px;
  border-radius: 8px;
  background: var(--fam);
}
.doc-swatch b { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); font-weight: 400; }
.doc-swatch span { font-size: 12px; color: var(--muted); }


/* =============================================================
   AJOUT — CATALOGUE ET LISTINGS DE FAMILLE
   (complément de la section 19 · composants de page intérieure)
   ============================================================= */

/* ---------- fam-intro : chapô de famille (texte + mots-clés) ----------
   Utilisé par formations-comprendre-exploiter.html,
   formations-auditer-ameliorer.html et formations-concevoir.html.
   La couleur du filet vient de .is-f01 / .is-f02 / .is-f03. */
.fam-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(28px, 3.6vw, 52px);
  align-items: start;
}
.fam-intro__tags {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--fam);
  border-radius: var(--radius-card);
}
.fam-intro__tags-title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 960px) {
  .fam-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .fam-intro__tags { padding: 20px; }
}



/* =============================================================
   24. AJOUTS MAQUETTISTE — pages institutionnelles
   Ajoutés en append (2026-08-25) par le sous-agent maquettiste,
   pour qui-sommes-nous.html / references.html / transition-energetique.html.
   Trois composants manquants à la section 19 :
     24.01 page-hero--portrait : bandeau de page avec portrait
     24.02 feature-grid / feature : cartes picto + titre + texte
     24.03 quote-grid : grille de témoignages (.avis)
   À refondre dans la section 19 lors de la consolidation finale.
   ============================================================= */

/* ---------- 24.01 page-hero--portrait ---------- */
.page-hero--portrait .page-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: center;
}
.page-hero__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-top: 3px solid var(--fam);
  border-radius: 18px;
}

/* ---------- 24.02 feature-grid : cartes picto + titre + texte ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--fam);
  border-radius: var(--radius-card);
}
.feature > .ico { color: var(--fam); }
.feature__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1.3;
  color: var(--ink);
}
.feature__text {
  font-size: 16px;
  line-height: 1.55;
  color: var(--body);
}

/* ---------- 24.03 quote-grid : grille de témoignages ---------- */
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

/* ---------- 24.04 responsive des ajouts ci-dessus ---------- */
@media (max-width: 1180px) {
  .quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .feature-grid, .feature-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-hero--portrait .page-hero__split { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
}
@media (max-width: 720px) {
  .feature-grid, .feature-grid--2, .feature-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .quote-grid { grid-template-columns: minmax(0, 1fr); }
  .page-hero--portrait .page-hero__split { grid-template-columns: minmax(0, 1fr); }
  .page-hero__portrait { max-width: 260px; aspect-ratio: 1 / 1; }
}

/* ---------- 24.06 ref-group : un groupe du mur de références ---------- */
.ref-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* =============================================================
   AJOUT MAQUETTISTE — 2026-08-25
   Composant .sitemap (page plan-du-site.html) — appartient à la
   section 19 « Composants de page intérieure », ajouté ici en fin
   de fichier pour ne pas entrer en conflit avec les autres agents.
   ============================================================= */
.sitemap {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.sitemap__col {
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--fam);
  border-radius: var(--radius-card);
}
.sitemap__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19.5px;
  line-height: 1.25;
  color: var(--ink);
}
.sitemap__count {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--zorba);
}
.sitemap__list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Le `li` était un conteneur flex : chaque balise inline qu'il contenait
   (ici les trois liens de `.sitemap__note`) devenait un item flex distinct,
   incompressible — d'où un débordement horizontal à 390 px. Même correctif
   que `.side-card__list li` et `.prose ul li` : bloc + puce en retrait
   suspendu, le texte redevient un flux inline normal. */
.sitemap__list li {
  display: block;
  position: relative;
  padding-left: 17px;
  font-size: 16px;
  line-height: 1.45;
}
.sitemap__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--fam);
}
/* Ligne de renvois du plan du site : pas de puce, texte secondaire.
   La classe existait dans plan-du-site.html sans définition CSS. */
.sitemap__note {
  margin-top: 4px;
  padding-left: 0;
  font-size: 15px;
  color: var(--muted);
}
.sitemap__note::before { display: none; }
.sitemap__note a { color: var(--ink); }
.sitemap__list a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(34, 30, 27, .22);
  text-underline-offset: 3px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.sitemap__list a:hover { color: var(--fam); text-decoration-color: var(--fam); }

@media (max-width: 960px) {
  .sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sitemap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* ---------- 24.07 ref-group : correction des cellules fantômes ----------
   .logo-wall--grid pose le filet en fond de grille : quand un groupe ne
   remplit pas sa dernière ligne, les colonnes vides restent visibles.
   Dans un groupe de références, on reporte donc le filet sur chaque
   cellule. Surcharge volontairement limitée à `.ref-group` : le
   composant .logo-wall--grid reste intact partout ailleurs. */
.ref-group .logo-wall--grid {
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.ref-group .logo-wall--grid li {
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

/* Lisibilité du mur de références : `.logo-wall li` est volontairement pâle
   (--stone) sur l'accueil, où il fait office de frise. Sur references.html
   les 84 noms sont du contenu à lire : on remonte au gris de texte (--muted,
   contraste AA sur blanc). Surcharge scopée à `.ref-group`. */
.ref-group .logo-wall--grid li { color: var(--muted); }
.ref-group .logo-wall--grid li:hover { color: var(--ink); }

@media (max-width: 480px) {
  .ref-group .logo-wall--grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .ref-group .logo-wall--grid li { min-height: 54px; padding: 10px 8px; font-size: 15px; }
}

/* --- correction passe de cohérence : listes de la colonne latérale ---------------
   Le `li` était un conteneur flex : tout balisage inline à l'intérieur (<b>, <span
   class="tbc">) devenait un item flex distinct, séparé par le `gap` de 10 px. On
   obtenait « DESP ( 2014/68/UE ) » ou « 2 jours  —  14 heures ».
   On repasse en bloc avec le picto en retrait suspendu : le texte redevient un flux
   inline normal, quel que soit le balisage à l'intérieur.                          */
.side-card__list li { display: block; position: relative; padding-left: 27px; }
.side-card__list li > .ico { position: absolute; left: 0; top: 3px; margin-top: 0; }

/* --- correction passe de cohérence : puces des contenus longs -------------------
   `.prose ul li` / `.prose ol li` étaient des conteneurs flex : un <strong>, un lien
   ou un <span class="tbc"> en tête de puce devenait un item flex distinct et se
   retrouvait empilé dans une colonne étroite. Le marqueur passe en position absolue
   et le `li` redevient un bloc : le texte s'écoule normalement quel que soit le
   balisage inline qu'il contient.                                                  */
.prose ul li, .prose ol li { display: block; position: relative; }
.prose ul li { padding-left: 18px; }
.prose ul li::before { position: absolute; left: 0; top: 11px; margin-top: 0; }
.prose ol li { padding-left: 30px; }
.prose ol li::before { position: absolute; left: 0; top: 0; }


/* =============================================================
   25. RYTHME VERTICAL DES PAGES INTÉRIEURES
   -------------------------------------------------------------
   Retour client : « attention aux marges entre les blocs, parfois
   c'est collé ». Les huit agents qui ont produit les pages avaient
   rattrapé le problème au coup par coup — trois correctifs qui se
   recouvraient (`.fiche-main`, la liste d'adjacences
   `.prose + .tag-row, .specs + .callout…`, `.section-stack`).
   Ils sont supprimés et remplacés par la règle unique ci-dessous.

   PRINCIPE — deux niveaux, et deux seulement :
     --flow     ( 26 → 40 px) sépare deux composants frères, quels
                qu'ils soient, et sépare aussi un `.section__head`
                du composant qui le suit ;
     --flow-lg  ( 42 → 64 px) sépare deux <section> d'une même
                colonne (blocs d'une fiche formation), qui portent
                chacune son propre entête.

   PORTÉE — tout conteneur de contenu : le `.container` / `.band`
   d'une `.section`, un `.section-stack`, la colonne principale d'un
   `.layout-side`, et les <section> d'une fiche. Les conteneurs de
   mise en page qui gèrent déjà leur gouttière (`__grid`, `__inner`,
   `.layout-side__aside`, les grilles de cartes) sont exclus par les
   `:not()` ci-dessous : leur `gap` fait foi.
   ============================================================= */

:where(.section, .signature, .references, .formateur, .installbar, .catalogue)
  > :where(.container, .band):not([class*="__grid"]):not([class*="__inner"]) > * + *,
.section-stack > * + *,
.layout-side__main > * + *,
.layout-side__main > section > * + * {
  margin-top: var(--flow);
}

/* Blocs d'une fiche formation : un cran au-dessus */
.fiche-main > section + section { margin-top: var(--flow-lg); }


/* =============================================================
   26. AJOUT MAQUETTISTE — 2026-08-25 (retours client catalogue)
   -------------------------------------------------------------
   26.01 .filters--select : la barre de filtres du catalogue passe
         des pastilles `.filter` à des `<select>` étiquetés.
         Les pastilles restent en place (19.05) : elles servent
         toujours l'agenda de sessions.html (`.sessions-bar`).
         Grammaire visuelle reprise des champs de formulaire :
         le `<select>` porte `field__input filters__select`, donc
         il hérite de 19.11 (hauteur, filet, rayon, focus) ; on
         neutralise seulement le chevron CSS natif de
         `select.field__input` au profit du chevron du sprite
         (`#ico-chevron`), posé en absolu et non cliquable.
   26.02 Rythme autour de la liste de résultats : une grille filtrée
         est un bloc à part entière, pas un composant frère de plus.
         La règle générale de la section 25 lui donnait `--flow`
         (26→40 px) avant ET après, ce que le client trouve trop
         serré. Ces deux jointures passent à `--flow-lg`, et
         seulement celles-là (motif `.filters + grille`) : le reste
         du site garde le rythme de la section 25.
   ============================================================= */

/* ---------- 26.01 filtres en sélecteurs ---------- */
.filters--select { gap: 18px; }

.filters__legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.filters__fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 18px;
}
.filters__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
/* le `.filters__label` des pastilles réserve 106 px en colonne :
   inutile ici, l'étiquette surmonte son champ. */
.filters--select .filters__label { min-width: 0; }

.filters__control { position: relative; display: block; }

/* `select.` : même poids que `select.field__input` (19.11), placé après,
   donc c'est bien le chevron du sprite qui l'emporte. */
select.filters__select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 48px;            /* cible tactile ≥ 44 px */
  padding-right: 44px;
  background-image: none;      /* remplace le chevron CSS de 19.11 */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  font-size: 16.5px;           /* ≥ 16 px : pas de zoom auto iOS */
  cursor: pointer;
}
/* Firefox : supprime le liseré pointillé et le padding interne */
.filters__select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--ink); }
.filters__select::-ms-expand { display: none; }
/* Le menu déroulant natif hérite parfois du fond de la page */
.filters__select option { color: var(--ink); background: var(--white); }

.filters__chevron {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: color .16s ease;
}
.filters__control:hover .filters__chevron,
.filters__select:focus ~ .filters__chevron { color: var(--ink); }

/* Une famille est choisie : l'étiquette prend la couleur de famille */
.filters__select[data-filter="famille"][data-value="01"] ~ .filters__chevron { color: var(--red); }
.filters__select[data-filter="famille"][data-value="02"] ~ .filters__chevron { color: var(--violet); }
.filters__select[data-filter="famille"][data-value="03"] ~ .filters__chevron { color: var(--azure); }
.filters__select[data-filter="famille"][data-value="01"] { border-color: var(--red); }
.filters__select[data-filter="famille"][data-value="02"] { border-color: var(--violet); }
.filters__select[data-filter="famille"][data-value="03"] { border-color: var(--azure); }

@media (max-width: 960px) {
  .filters__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .filters--select { padding: 20px; }
  .filters__fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  select.filters__select { min-height: 50px; }
}

/* ---------- 26.02 air avant et après une liste de résultats ---------- */
/* La section 25 donne `--flow` (26→40 px) entre deux composants frères :
   c'est juste pour deux blocs de texte, trop serré autour d'une liste de
   17 cartes, que le client lit comme un bloc à part entière. On ne touche
   pas la règle générale : on la surcharge pour le seul motif « barre de
   filtres → liste de résultats → suite », avec le même jeu de tokens.
   `.no-result` reste dans le flux (il porte `hidden`) et suit toujours la
   grille : sans lui dans la chaîne, la marge d'après la liste retomberait
   à `--flow` dès que la grille affiche des résultats. */
/* NB : pas de `:where()` ici — il vaut 0 en spécificité, la règle de la
   section 25 (0-2-0) l'emporterait. Les sélecteurs sont écrits en clair
   pour peser 0-2-0 et gagner par l'ordre du fichier. */
.filters + .grid-formations,
.filters + .grid-articles,
.filters + .grid-formations + *,
.filters + .grid-articles + *,
.filters + .grid-formations + .no-result + *,
.filters + .grid-articles + .no-result + * {
  margin-top: var(--flow-lg);
}

/* ---------- 26.03 fam-anchor : cibles #f01 / #f02 / #f03 ---------- */
/* Les trois pages de famille ont été supprimées ; l'accueil, les fils
   d'Ariane et le plan du site pointent désormais sur
   `formations.html#f01|#f02|#f03`. Ces ancres vides, posées juste avant
   la barre de filtres, redonnent au navigateur une cible réelle : le
   défilement est natif (donc fiable au chargement, au changement de
   fragment et sur un onglet ouvert en arrière-plan), et `app.js` n'a
   plus qu'à présélectionner la famille dans le sélecteur. */
.fam-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 28px;
}
/* Neutralise le rythme vertical de la section 25 sur ces éléments vides. */
.section > .container > .fam-anchor { margin-top: 0; }


/* =============================================================
   27. MUR DE LOGOS DE RÉFÉRENCES
   -------------------------------------------------------------
   Retour client du 25/08/2026 : « ajouter les logos des références ».
   61 des 84 références ont un logo, 23 n'en ont pas.

   PRINCIPE — on ne mélange jamais image et texte dans la même
   grille : un tiers de cellules en texte brut se lit comme un
   travail inachevé, pas comme une information. Deux registres :
     .ref-wall  → les logos, en tuiles identiques ;
     .ref-also  → les noms restants, sous le mur, en ligne
                  typographique assumée.

   TUILE BLANCHE — les logos viennent de sources hétérogènes, dont
   des JPEG opaques à fond blanc. Sur le crème de la page ils
   feraient des rectangles parasites ; sur une tuile blanche
   assumée, leur fond disparaît.

   (Ce bloc a été réécrit le 25/08 après avoir été écrasé par une
   écriture concurrente sur styles.css.)
   ============================================================= */

/* ---------- 27.01 .ref-wall / .ref-logo : le mur ---------- */
.ref-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 14px;
  padding: 0;
  list-style: none;
}

.ref-logo {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ref-logo img {
  width: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
  /* Poids optique homogène : au repos les logos sont désaturés et très
     légèrement atténués, sinon une marque très colorée écrase ses voisines. */
  filter: grayscale(1);
  opacity: .92;
  transition: filter .2s ease, opacity .2s ease;
}

/* La couleur ne revient au survol que là où le survol existe.
   Sur tactile il n'y a pas de révélation possible : on affiche d'emblée. */
@media (hover: hover) {
  .ref-logo:hover img,
  .ref-logo:focus-within img { filter: grayscale(0); opacity: 1; }
}
@media (hover: none) {
  .ref-logo img { filter: grayscale(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-logo img { transition: none; }
}

/* ---------- 27.02 .ref-also : les références sans logo ---------- */
.ref-also {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.ref-also__label {
  flex: none;
  padding: 5px 11px;
  background: var(--pearl);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.ref-also__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 9px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.35;
  color: var(--body);
}

/* Le séparateur est lié au mot qui précède par une insécable :
   aucune ligne ne peut commencer par un point médian orphelin. */
.ref-also__list li:not(:last-child)::after {
  content: "\00a0·";
  color: var(--stone);
}

/* ---------- 27.03 .ref-wall--frise : la frise de l'accueil ---------- */
/* Grille fixe et non fluide : sur l'accueil la frise doit tenir en deux
   lignes nettes, pas se réorganiser au gré de la largeur. */
.ref-wall--frise {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  max-width: 1020px;
  margin-inline: auto;
}
.ref-wall--frise .ref-logo { min-height: 78px; padding: 10px 14px; }
.ref-wall--frise .ref-logo img { max-height: 38px; }

@media (max-width: 1180px) {
  .ref-wall--frise { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ref-wall--frise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ref-wall--frise .ref-logo { min-height: 68px; }
  .ref-wall--frise .ref-logo img { max-height: 32px; }
}

@media (max-width: 560px) {
  .ref-wall:not(.ref-wall--frise) { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
  .ref-logo { min-height: 82px; padding: 12px 14px; }
  .ref-logo img { max-height: 44px; }
  .ref-also__list { font-size: 15.5px; }
}


/* =============================================================
   28. AJOUT MAQUETTISTE — 2026-08-25 (retours client index /
       transition-energetique / conseils)
   -------------------------------------------------------------
   28.01 --fam-solid : la couleur de famille en APLAT.
         `--fam` (section 03) est calibrée pour du texte et des
         filets sur fond clair. Posée en fond avec du texte crème
         par-dessus, elle ne tient qu'en 01 et 02 : `--azure`
         (#598fdb) ne donne que 2,93:1 avec `--cream`, soit très
         en dessous du AA. On introduit donc une seconde variable,
         `--fam-solid`, qui est la déclinaison « fond » de la
         couleur de famille — identique à `--fam` pour 01 et 02,
         assombrie pour 03. Une seule variable pour les deux
         retours qui en avaient besoin (boutons du hero, labels de
         catégorie), pas deux mécanismes parallèles.
   28.02 .hero__families en aplats de famille (retour client).
   28.03 .media-split : section texte + image, côté alternable.
   28.04 .tag--cat : label de catégorie en aplat de famille.
   ============================================================= */

/* ---------- 28.01 couleur de famille en aplat ----------
   --azure assombri de 35 % vers --ink : #456797. Mesures WCAG
   avec --cream (#f5f1ec) en texte :
     01 --red    #b50000 → 6,30:1   (hover #a00403 → 7,43:1)
     02 --violet #7b4c9e → 5,54:1   (hover #6e458b → 6,47:1)
     03 azur assombri #456797 → 5,13:1 (hover #405c85 → 6,05:1)
   Les trois passent AA pour le petit texte (≥ 4,5:1) ; le texte
   secondaire descend au plus bas à .92 d'opacité, soit 4,59:1
   dans le pire cas (fond 03). Rien en dessous.
   Bénéfice second : #456797 est un bleu profond, pas le bleu clair
   que Guillaume associe au froid, et il pèse le même poids visuel
   que le rouge et le violet — la carte 03 ne tire pas l'œil. */
:root {
  --azure-deep:      #456797;
  --fam-solid:       var(--red);
  --fam-solid-hover: #a00403;
}
.is-f01 { --fam-solid: var(--red);        --fam-solid-hover: #a00403; }
.is-f02 { --fam-solid: var(--violet);     --fam-solid-hover: #6e458b; }
.is-f03 { --fam-solid: var(--azure-deep); --fam-solid-hover: #405c85; }


/* ---------- 28.02 hero : les 3 familles en aplat ----------
   Les cartes sont posées sur la photo du bandeau, à l'intérieur du
   panneau `.hero__card` (rgba(12,10,9,.78)). Pour qu'elles ne
   flottent pas : pas de bord clair translucide qui les découpe du
   panneau, mais un liseré interne de la couleur elle-même éclaircie
   et une ombre portée courte et basse, qui les pose. */
.hero__families a {
  background: var(--fam-solid);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 10px 22px -14px rgba(0,0,0,.85);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hero__families a:hover {
  background: var(--fam-solid-hover);
  border-color: transparent;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 14px 26px -14px rgba(0,0,0,.9);
}
.hero__families a:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}
/* Texte : plus de niveaux de gris translucides, chaque teinte est
   mesurée (cf. 28.01). */
.hero__families .n { color: var(--cream); }
.hero__families .n .ico { color: rgba(245,241,236,.86); }
.hero__families .t { color: var(--cream); }
.hero__families .c { color: rgba(245,241,236,.92); }
.hero__families a::after { color: rgba(245,241,236,.85); }
.hero__families a:hover::after { color: var(--cream); }


/* ---------- 28.03 .media-split : section texte + image ----------
   Un bloc de texte et une photo côte à côte, réutilisable sur
   n'importe quelle page. `--reverse` place l'image à gauche : on
   alterne d'une section à l'autre pour que la page ne s'aligne pas
   en catalogue. Sous 960 px, une seule colonne, et l'image repasse
   TOUJOURS après le texte (l'ordre de lecture prime sur l'effet
   d'alternance).
   Espacement : rien ici. `.media-split` est un composant frère
   comme un autre, la règle de rythme unique (section 25) lui donne
   son `--flow`.
   L'`aspect-ratio` uniformise des photos qui ne font pas toutes le
   même format (3:2 nominal, mais de 909 à 954 px de haut pour
   1400 de large) sans jamais les déformer : `object-fit: cover`.
   Combiné aux attributs width/height du HTML, il réserve la place
   avant le chargement — aucun décalage de mise en page. */
.media-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 3.4vw, 52px);
  align-items: center;
}
.media-split__body { min-width: 0; }
/* Le corps peut contenir plusieurs composants frères (`.prose`,
   `.btn-row`, `.tag-row`…). On leur applique le rythme du site,
   pas un espacement local inventé. */
.media-split__body > * + * { margin-top: var(--flow); }

.media-split__figure {
  margin: 0;
  min-width: 0;
}
.media-split__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--pearl);
}
.media-split__caption {
  margin-top: 12px;
  padding-left: 13px;
  border-left: 3px solid var(--fam);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: .4px;
  color: var(--muted);
}

/* Image à gauche, texte à droite */
.media-split--reverse .media-split__figure { order: -1; }

/* Portrait vertical (guillaume-portrait-terrain.jpg) */
.media-split--portrait .media-split__figure img { aspect-ratio: 3 / 4; }

/* Sur fond sombre : la légende doit rester lisible.
   --stone sur --ink = 6,98:1. */
.section--ink .media-split__caption,
.page-hero--dark .media-split__caption {
  color: var(--stone);
  border-left-color: var(--fam-lite);
}

@media (max-width: 960px) {
  .media-split { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .media-split--reverse .media-split__figure { order: 0; }
  .media-split__figure img { aspect-ratio: 16 / 9; }
  .media-split--portrait .media-split__figure img { aspect-ratio: 3 / 2; }
}
@media (max-width: 480px) {
  .media-split__figure img { aspect-ratio: 3 / 2; }
}


/* ---------- 28.04 .tag--cat : label de catégorie d'article ----------
   Retour client : les catégories des cartes de `conseils.html`
   prennent une couleur de charte. On réutilise `--fam-solid`
   (28.01), donc le label est TOUJOURS de la même couleur que le
   filet de survol de sa carte : une catégorie ne peut pas
   contredire la famille de l'article.
   Aplat + texte crème, jamais aplat + texte coloré : mesuré à
   5,13:1 au minimum (cf. 28.01), et le libellé hérite du
   `text-transform: uppercase` de `.card-article__meta`, donc c'est
   bien du petit texte que l'on mesure. */
.tag--cat {
  background: var(--fam-solid);
  border-color: var(--fam-solid);
  color: var(--cream);
  letter-spacing: 1px;
}
.tag--cat .ico { color: currentColor; }
a.tag--cat:hover {
  background: var(--fam-solid-hover);
  border-color: var(--fam-solid-hover);
  color: var(--cream);
}


/* ---------- 28.05 poids du gras dans le texte courant ----------
   Retour client : « ajouter du gras dans les paragraphes, notamment
   pour les mots clés ». Source Sans 3 n'est chargée qu'en 400 et
   600 (cf. le <link> Google Fonts commun aux 39 pages) : un
   `<strong>` laissé au `bold` (700) du navigateur déclenche un gras
   synthétique, plus lourd et plus sale que le vrai semi-gras.
   On aligne donc tout le gras du texte courant sur 600 — la valeur
   qu'utilisaient déjà `.prose strong`, `.trustbar__item strong` et
   `.hero__baseline b`. */
strong, b { font-weight: 600; }


/* =============================================================
   29. ANNONCE DE CHANGEMENT DE MARQUE
   Ajoute le 2026-09-23 (sous-agent conversion).

   Fenetre modale affichee une seule fois par visite, pilotee par
   « Reglages du site > Annonce ». Ce bloc est le seul ajout de la
   journee : aucune regle existante n'a ete modifiee.

   Tout est construit sur les variables et les gabarits deja en
   place : --ink, --cream, --white, --line, --body, --red,
   --brand-gradient, --radius-card, --radius-btn, --container,
   --font-display, --font-body, et les classes .btn / .prose.
   ============================================================= */

/* 29.01 couche et fond --------------------------------------- */
/* z-index 200 : au-dessus de .site-header (60) et du menu (30). */
.annonce {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .24s ease;
}
.annonce[hidden] { display: none; }
.annonce.is-open { opacity: 1; }

.annonce__fond {
  position: absolute;
  inset: 0;
  background: rgba(26, 23, 20, .72);   /* --ink-deep */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  cursor: pointer;
}

/* La page ne defile plus derriere la modale. */
html.annonce-ouverte,
html.annonce-ouverte body { overflow: hidden; }

/* 29.02 la boite --------------------------------------------- */
.annonce__boite {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 40px 40px 32px;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px -30px rgba(34, 30, 27, .75);
  text-align: center;
  transform: translateY(14px) scale(.98);
  transition: transform .26s cubic-bezier(.2, .8, .3, 1);
}
.annonce.is-open .annonce__boite { transform: none; }

/* Filet de marque en haut de la boite, comme les cartes du site. */
.annonce__boite::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--brand-gradient);
}

/* La boite recoit le focus a l'ouverture pour que les lecteurs d'ecran
   annoncent le dialogue. Elle n'est pas interactive : pas d'anneau, la
   modale est deja delimitee visuellement. Les elements interactifs
   qu'elle contient gardent le leur. */
.annonce__boite:focus,
.annonce__boite:focus-visible { outline: none; }

/* 29.03 croix de fermeture ----------------------------------- */
.annonce__croix {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.annonce__croix:hover { background: var(--cream); color: var(--ink); }
.annonce__croix:focus-visible {
  outline: 3px solid var(--azure);
  outline-offset: 2px;
}
.annonce__croix svg { width: 18px; height: 18px; }

/* 29.04 les deux logos --------------------------------------- */
/* flex + wrap : a l'etroit, le second logo passe sous le premier
   et la fleche pivote d'un quart de tour (cf. 29.07). */
.annonce__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px 24px;
  margin: 8px 0 28px;
}
.annonce__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.annonce__logo img {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 62px;
  height: auto;
  object-fit: contain;
}
/* L'ancien logo est mis en retrait : c'est celui qu'on quitte. */
.annonce__logo--avant img { opacity: .62; filter: grayscale(1); }

.annonce__fleche {
  display: inline-flex;
  align-items: center;
  color: var(--red);
  flex: 0 0 auto;
}
.annonce__fleche svg { width: 40px; height: 16px; }

/* 29.05 textes ------------------------------------------------ */
.annonce__titre {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.22;
  color: var(--ink);
}
.annonce__texte {
  margin: 0 auto 28px;
  max-width: 44ch;
  color: var(--body);
  font-size: 17px;
}
.annonce__texte > *:last-child { margin-bottom: 0; }

/* 29.06 actions ----------------------------------------------- */
.annonce__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* 29.07 responsive -------------------------------------------- */
/* Teste a 390 px : les deux logos s'empilent, la fleche pointe
   alors vers le bas, les deux boutons prennent toute la largeur. */
@media (max-width: 560px) {
  .annonce { padding: 16px; align-items: flex-end; }

  .annonce__boite {
    padding: 34px 20px 24px;
    max-height: calc(100vh - 32px);
    border-radius: var(--radius-card);
  }

  .annonce__logos {
    flex-direction: column;
    gap: 12px;
    margin: 6px 0 22px;
  }
  .annonce__logo img { max-width: 168px; max-height: 52px; }

  /* Fleche verticale : la lecture « avant -> apres » reste juste. */
  .annonce__fleche { transform: rotate(90deg); }
  .annonce__fleche svg { width: 30px; height: 12px; }

  .annonce__titre { font-size: 22px; }
  .annonce__texte { font-size: 16px; margin-bottom: 22px; }

  /* En colonne, l'action principale reste en tete : « Fermer » ne doit
     pas passer devant le bouton que le visiteur est venu chercher. */
  .annonce__actions { flex-direction: column; gap: 10px; }
  .annonce__actions .btn { width: 100%; }
}

/* 29.08 respect de « reduire les animations » ------------------ */
@media (prefers-reduced-motion: reduce) {
  .annonce,
  .annonce__boite { transition: none; }
  .annonce__boite { transform: none; }
}

/* =============================================================
   BANDEAU DE CONSENTEMENT (CookieYes)
   =============================================================
   Le bandeau est injecté par un script tiers qui pose sa propre
   feuille après la nôtre : sans `!important` nos règles passent
   derrière. Les classes sont celles du DOM réellement produit,
   relevées sur un rendu, pas devinées.

   Accepter et refuser ont le MÊME poids visuel — même taille,
   même traitement plein. La CNIL demande que refuser soit aussi
   simple qu'accepter ; un « rejeter » effacé à côté d'un
   « accepter » coloré est un motif trompeur. Seule la teinte
   distingue les deux.                                           */

.cky-btn,
.cky-btn-revisit-wrapper .cky-btn-revisit {
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
	border-radius: var(--radius-btn) !important;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}

.cky-consent-container .cky-notice-btn-wrapper .cky-btn,
.cky-preference-center .cky-prefrence-btn-wrapper .cky-btn {
	min-height: 44px !important;
	padding: 10px 20px !important;
	font-size: 15.5px !important;
	border-width: 1px !important;
	border-style: solid !important;
}

/* Accepter et refuser cote a cote, a largeur egale ; personnaliser en dessous.
   Par defaut CookieYes etire « Accepter tout » sur toute la largeur et laisse
   « Tout rejeter » a la moitie — deux fois plus gros, c'est precisement le
   desequilibre que la CNIL reproche. */
.cky-consent-container .cky-notice-btn-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-reject,
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-accept {
	flex: 1 1 calc(50% - 4px) !important;
	margin: 0 !important;
}
.cky-consent-container .cky-notice-btn-wrapper .cky-btn-customize {
	flex: 1 1 100% !important;
	order: 3 !important;
	margin: 0 !important;
}

/* Accepter — le rouge de la marque */
.cky-btn-accept {
	background: var(--red) !important;
	border-color: var(--red) !important;
	color: var(--white) !important;
}
.cky-btn-accept:hover {
	background: #8f0000 !important;
	border-color: #8f0000 !important;
}

/* Refuser — même plein, teinte encre : aussi lisible, aussi cliquable */
.cky-btn-reject {
	background: var(--ink) !important;
	border-color: var(--ink) !important;
	color: var(--white) !important;
}
.cky-btn-reject:hover {
	background: var(--ink-deep) !important;
	border-color: var(--ink-deep) !important;
}

/* Personnaliser — action secondaire, en retrait */
.cky-btn-customize {
	background: var(--white) !important;
	border-color: var(--line) !important;
	color: var(--ink) !important;
}
.cky-btn-customize:hover {
	border-color: var(--stone) !important;
	background: var(--cream) !important;
}

/* Enregistrer mes préférences — c'est l'action principale du panneau */
.cky-btn-preferences {
	background: var(--red) !important;
	border-color: var(--red) !important;
	color: var(--white) !important;
}
.cky-btn-preferences:hover {
	background: #8f0000 !important;
	border-color: #8f0000 !important;
}

/* La pastille de réouverture, en bas de page.
   Elle est faite de deux éléments emboîtés : un conteneur rond de 45 px et,
   dedans, un bouton de 30 px. Ne colorer que le bouton laissait l'anneau du
   conteneur au bleu de CookieYes — d'où le cerclage. Les deux sont traités,
   pour qu'on ne lise qu'une seule pastille. */
.cky-btn-revisit-wrapper,
.cky-btn-revisit-wrapper.cky-revisit-bottom-left {
	background: var(--red) !important;
	border-radius: 50% !important;
	box-shadow: 0 2px 10px rgba(34, 30, 27, .25) !important;
}
.cky-btn-revisit-wrapper .cky-btn-revisit {
	background: transparent !important;
	border-radius: 50% !important;
	box-shadow: none !important;
}
.cky-btn-revisit-wrapper:hover,
.cky-btn-revisit-wrapper.cky-revisit-bottom-left:hover {
	background: #8f0000 !important;
}

/* Détails du panneau : liens et interrupteurs dans la teinte de marque */
.cky-preference-center .cky-show-desc-btn,
.cky-notice-des a,
.cky-preference-content-wrapper a {
	color: var(--red) !important;
}
.cky-preference-center .cky-accordion-btn {
	font-family: var(--font-display) !important;
	color: var(--ink) !important;
}
.cky-always-active {
	color: var(--ok) !important;
}