/* =========================================================
   Formations M365 par les usages — feuille de style
   Palette neutre + accent, thème clair/sombre
   ========================================================= */

:root {
  --bg:            #ffffff;
  --bg-alt:        #f4f6fb;
  --bg-elev:       #ffffff;
  --text:          #16202e;
  --text-soft:     #556074;
  --border:        #e2e7f0;
  /* Violet de marque, prélevé sur le logo (#452f5f, teinte 267°) puis éclairci
     pour rester lisible en texte comme en fond de bouton : 7,72:1 sur blanc. */
  --accent:        #673e98;
  --accent-hover:  #53327b;
  --accent-soft:   #f4effb;
  --accent-text:   #ffffff;
  /* Réseau d'arrière-plan : gris très clair, légèrement teinté violet. */
  --net-point:     #d3ceda;
  --net-trait:     #e5e1ea;
  --auto:          #b06a00;
  --auto-bg:       #fff6e6;
  --conf:          #1f7a5a;
  --conf-bg:       #e8f6f0;
  --strike:        #b1332c;
  --shadow:        0 6px 24px rgba(20,32,46,.08);
  --shadow-lg:     0 18px 48px rgba(20,32,46,.14);
  --radius:        16px;
  --radius-sm:     10px;
  --maxw:          1120px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --bg:            #0e1420;
  --bg-alt:        #131b2b;
  --bg-elev:       #182236;
  --text:          #e8edf6;
  --text-soft:     #9aa7bd;
  --border:        #26324a;
  /* Même teinte, éclaircie pour le fond sombre : 5,95:1 sur #0e1420. */
  --accent:        #a584cd;
  --accent-hover:  #baa1d9;
  --accent-soft:   #281d35;
  --accent-text:   #0e1420;
  /* Le réseau s'assombrit au lieu de s'éclaircir : un gris clair sur fond
     sombre deviendrait un voile lumineux, bien plus voyant que discret. */
  --net-point:     #2b3247;
  --net-trait:     #222839;
  --auto:          #f0b64d;
  --auto-bg:       #2a2110;
  --conf:          #5fd3a6;
  --conf-bg:       #10261e;
  --strike:        #ff7b72;
  --shadow:        0 6px 24px rgba(0,0,0,.35);
  --shadow-lg:     0 18px 48px rgba(0,0,0,.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0e1420;
    --bg-alt:        #131b2b;
    --bg-elev:       #182236;
    --text:          #e8edf6;
    --text-soft:     #9aa7bd;
    --border:        #26324a;
    /* Doit rester identique au bloc [data-theme="dark"] ci-dessus. */
    --accent:        #a584cd;
    --accent-hover:  #baa1d9;
    --accent-soft:   #281d35;
    --accent-text:   #0e1420;
    --net-point:     #2b3247;
    --net-trait:     #222839;
    --auto:          #f0b64d;
    --auto-bg:       #2a2110;
    --conf:          #5fd3a6;
    --conf-bg:       #10261e;
    --strike:        #ff7b72;
    --shadow:        0 6px 24px rgba(0,0,0,.35);
    --shadow-lg:     0 18px 48px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit l'emporter sur tout `display` d'auteur.
   Le navigateur ne le porte que dans sa propre feuille de style, laquelle
   perd systématiquement contre une règle du site : `.cas { display: flex }`
   suffisait à laisser les cartes visibles alors que le filtre du catalogue
   avait bien posé l'attribut. Le contournement avait déjà été fait deux fois
   au cas par cas (.site-nav, .diag-aide) ; la règle est ici une bonne fois,
   pour tout le site. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3 { line-height: 1.15; margin: 0 0 .4em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-weight: 700; font-size: .98rem; line-height: 1;
  padding: .85em 1.5em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--accent); color: var(--accent-text); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-lg { padding: 1em 1.8em; font-size: 1.05rem; }
.btn-xl { padding: 1.15em 2.4em; font-size: 1.15rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 600; }
.brand:hover { text-decoration: none; }
/* Le logo est fourni sur fond blanc cassé, sans transparence : on l'assume
   comme une pastille arrondie, lisible en thème clair comme en thème sombre. */
.brand-logo { height: 40px; width: auto; display: block; border-radius: 8px; }
.brand-name { font-size: .98rem; }
.main-nav { display: flex; align-items: center; gap: 1.6rem; }
.main-nav a { color: var(--text-soft); font-weight: 600; font-size: .95rem; }
.main-nav a:hover { color: var(--text); text-decoration: none; }
.main-nav .nav-cta {
  color: var(--accent-text); background: var(--accent);
  padding: .55em 1.1em; border-radius: 999px;
}
.main-nav .nav-cta:hover { background: var(--accent-hover); color: var(--accent-text); }
.header-tools { display: flex; align-items: center; gap: .5rem; }
.theme-toggle {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  min-height: 40px; padding: .45em .75em; border-radius: 10px; cursor: pointer; font-size: .88rem;
  font-weight: 700; gap: .45rem;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle-label { line-height: 1; }
.theme-icon-moon { display: none; }
:root[data-theme="dark"] .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-icon-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-icon-moon { display: inline; }
}
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; transition: .25s; }

/* ---------- Hero ---------- */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); background:
  radial-gradient(1200px 400px at 80% -10%, var(--accent-soft), transparent 60%); }
.hero-inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 800; color: var(--accent); margin: 0 0 .8rem; }
.hero h1 { margin-bottom: .6rem; }
.strike { text-decoration: line-through; text-decoration-color: var(--strike); text-decoration-thickness: 3px; color: var(--text-soft); }
.hl { color: var(--accent); }
.lead { font-size: 1.18rem; color: var(--text-soft); max-width: 40ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 .8rem; }
.hero-note { font-size: .9rem; color: var(--text-soft); }

.hero-visual { display: flex; justify-content: center; }
.chain {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.8rem 1.6rem; display: flex; flex-direction: column;
  gap: .5rem; align-items: center; width: 100%; max-width: 340px;
}
.chain-node {
  width: 100%; text-align: center; font-weight: 700; padding: .75em 1em;
  background: var(--accent-soft); color: var(--accent); border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.chain-arrow { color: var(--text-soft); font-size: 1.2rem; }
.chain-result {
  margin-top: .6rem; width: 100%; text-align: center; font-weight: 800;
  padding: .8em 1em; background: var(--conf-bg); color: var(--conf); border-radius: var(--radius-sm);
}

/* ---------- Trust bar ---------- */
.trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-alt); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; padding: 1.8rem 0; }
.trust-item { display: flex; gap: .7rem; align-items: flex-start; }
.trust-item p { margin: 0; font-size: .9rem; color: var(--text-soft); }
.trust-item strong { color: var(--text); }
.trust-ico { font-size: 1.5rem; line-height: 1; }

/* ---------- Sections ---------- */
.section { padding: clamp(3rem, 6vw, 5.5rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-sub { font-size: 1.1rem; color: var(--text-soft); }

/* ---------- Problem grid ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.pcard {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; color: var(--text); box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--accent); text-decoration: none; }
.pcard-ico { font-size: 1.8rem; }
.pcard h3 { margin: 0; }
.pcard p { color: var(--text-soft); font-style: italic; margin: 0; font-size: .95rem; flex: 1; }
.pcard-link { color: var(--accent); font-weight: 700; font-size: .9rem; margin-top: .4rem; }

/* ---------- Use cases ---------- */
.usecase {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 1.8rem; box-shadow: var(--shadow);
  scroll-margin-top: 90px;
}
.usecase-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.uc-ico { font-size: 2.2rem; }
.uc-tag { display: inline-block; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: var(--accent-soft); padding: .3em .7em; border-radius: 999px; margin-bottom: .4rem; }
.usecase-head h3 { font-size: 1.4rem; margin: 0; }
.uc-pain {
  font-style: italic; color: var(--text-soft); border-left: 3px solid var(--accent);
  padding: .3em 0 .3em 1rem; margin: 0 0 1.4rem;
}
.steps { list-style: none; counter-reset: step; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .7rem; }
.steps li {
  counter-increment: step; position: relative;
  display: grid; grid-template-columns: 170px 1fr; gap: 1rem; align-items: center;
  padding: .9rem 1rem .9rem 3.1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg);
}
.steps li::before {
  content: counter(step); position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-text);
  font-weight: 800; font-size: .85rem; display: flex; align-items: center; justify-content: center;
}
.step-tool { font-weight: 800; color: var(--text); }
.steps li p { margin: 0; color: var(--text-soft); font-size: .93rem; }
.step-formation { font-weight: 700; font-size: .86rem; white-space: nowrap; }
.uc-extra { display: grid; gap: .6rem; margin-bottom: 1.4rem; }
.uc-auto, .uc-conf { margin: 0; font-size: .92rem; padding: .8em 1em; border-radius: var(--radius-sm); }
.uc-auto { background: var(--auto-bg); color: var(--auto); }
.uc-conf { background: var(--conf-bg); color: var(--conf); }
.uc-auto strong, .uc-conf strong { color: inherit; }
.uc-cta { margin-top: .2rem; }

/* ---------- How it works ---------- */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.how-step { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.8rem 1.5rem; box-shadow: var(--shadow); }
.how-num { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 1.3rem; margin-bottom: .8rem; }
.how-step p { color: var(--text-soft); margin: 0; }

/* ---------- Upsell ---------- */
.upsell { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.upsell-copy { max-width: 640px; }
.upsell-copy p { color: var(--text-soft); margin: 0; }

/* ---------- Final CTA ---------- */
.cta-final {
  padding: clamp(3.5rem, 7vw, 6rem) 0; text-align: center;
  /* Bandeau de marque : violets fixes, non liés au thème. En thème sombre
     l'accent s'éclaircit, et le texte blanc n'y tiendrait plus que 2:1.
     Ici on reste à 9,9:1 et 11,5:1, quel que soit le thème choisi. */
  background: linear-gradient(135deg, #533180, #452f5f);
  color: #fff;
}
.cta-final h2 { color: #fff; }
.cta-sub { color: rgba(255,255,255,.9); max-width: 560px; margin: 0 auto 1.8rem; font-size: 1.12rem; }
/* Même raison : le libellé du bouton doit rester sombre sur le blanc. */
.cta-final .btn-primary { background: #fff; color: #533180; }
.cta-final .btn-primary:hover { background: #f4effb; }
.cta-mail { margin-top: 1.2rem; color: rgba(255,255,255,.9); }
.cta-mail a { color: #fff; font-weight: 700; text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding: 2rem 0; }
.footer-inner p { margin: .2rem 0; color: var(--text-soft); font-size: .9rem; }
.footer-fine { font-size: .82rem; }

/* ---------- Problem card tools ---------- */
.pcard-tools { font-size: .78rem; font-weight: 700; color: var(--accent); letter-spacing: .01em; }

/* ---------- Use case CTA row ---------- */
.uc-cta-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }

/* =========================================================
   PAGES FORMATION (fiches)
   ========================================================= */
.breadcrumb { padding: 1.2rem 0 0; font-size: .88rem; color: var(--text-soft); }
.breadcrumb a { color: var(--text-soft); }
.breadcrumb a:hover { color: var(--accent); }

.fiche-hero { padding: 1.6rem 0 2.4rem; background:
  radial-gradient(1000px 340px at 85% -20%, var(--accent-soft), transparent 60%); }
.fiche-hero .uc-ico { font-size: 2.6rem; }
.fiche-title-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.fiche-lead { font-size: 1.15rem; color: var(--text-soft); max-width: 60ch; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.chip {
  font-size: .82rem; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: .4em .8em; border-radius: 999px;
}

.fiche-meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin: 1.6rem 0; padding: 1.2rem; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.fiche-meta div span { display: block; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 700; margin-bottom: .2rem; }
.fiche-meta div strong { font-size: 1rem; color: var(--text); }

.fiche-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 2rem; align-items: start; }
.fiche-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.7rem; box-shadow: var(--shadow); margin-bottom: 1.4rem; }
.fiche-block h2 { font-size: 1.3rem; }
.obj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.obj-list li { position: relative; padding-left: 1.9rem; color: var(--text); }
.obj-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--conf); font-weight: 800; }
.prog-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; color: var(--text-soft); }
.prog-list strong { color: var(--text); }

.fiche-side { position: sticky; top: 90px; }
.fiche-cta-card { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); border-radius: var(--radius); padding: 1.6rem; text-align: center; }
.fiche-cta-card h3 { margin-bottom: .4rem; }
.fiche-cta-card p { color: var(--text-soft); font-size: .92rem; }
.fiche-cta-card .btn { width: 100%; margin-top: .6rem; }

@media (max-width: 900px) {
  .fiche-meta { grid-template-columns: repeat(2, 1fr); }
  .fiche-grid { grid-template-columns: 1fr; }
  .fiche-side { position: static; }
}
@media (max-width: 520px) { .fiche-meta { grid-template-columns: 1fr; } }

/* =========================================================
   DIAGNOSTIC INTERACTIF (wizard)
   ========================================================= */
.wz-step { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem 1.7rem; box-shadow: var(--shadow); margin-bottom: 1.6rem; }
.wz-step-title { display: flex; align-items: center; gap: .6rem; font-size: 1.25rem; margin-bottom: .3rem; }
.wz-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-size: .95rem; font-weight: 800; }
.wz-opt, .wz-req { font-size: .8rem; font-weight: 700; color: var(--text-soft); }
.wz-req { color: var(--accent); }
.wz-help { color: var(--text-soft); margin: .2rem 0 1rem; }

/* ---------- Thèmes du diagnostic, dans la barre latérale ----------
   Ils prolongent la navigation du site plutôt que d'ouvrir une seconde
   colonne : un seul endroit où l'on se repère. En mode défilement, le
   conteneur s'efface (display:contents) pour que les thèmes rejoignent
   directement la barre horizontale au lieu d'y former un bloc vertical. */
#diagNav { display: contents; }
.diag-nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .28em .6em; border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: .85rem; font-weight: 600; line-height: 1.3;
  border: 1px solid transparent; white-space: nowrap;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.diag-nav-item:hover { color: var(--text); background: var(--accent-soft); text-decoration: none; }
.diag-nav-item.is-current { color: var(--text); background: var(--accent-soft); }
.diag-nav-item.has-sel { color: var(--text); }
.dn-badge:empty { display: none; }
.dn-badge {
  flex: 0 0 auto; min-width: 1.4em; height: 1.4em; padding: 0 .35em;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent); color: var(--accent-text);
  font-size: .72rem; font-weight: 800;
}
/* Compteur du diagnostic, ancré dans le pied de la barre avec son bouton. */

/* Rôles */
.role-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.role-chip { font-weight: 700; font-size: .9rem; padding: .55em 1em; border-radius: 999px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; transition: .15s; }
.role-chip:hover { border-color: var(--accent); }
.role-chip.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* Irritants groupés */
.irr-group { margin-bottom: 2.2rem; }
.irr-group-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 800; margin: 0 0 .7rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
.irr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.irr-card {
  display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .8rem .9rem;
  background: var(--bg); transition: border-color .15s ease, background .15s ease;
}
.irr-card:hover { border-color: var(--accent); }
.irr-card.checked { border-color: var(--accent); background: var(--accent-soft); }
.irr-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.irr-check { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--border); margin-top: 2px; position: relative; transition: .15s; }
.irr-card.checked .irr-check { background: var(--accent); border-color: var(--accent); }
.irr-card.checked .irr-check::after { content: "✓"; position: absolute; inset: 0; color: var(--accent-text); font-size: .8rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.irr-label { font-size: .95rem; color: var(--text); line-height: 1.35; }

/* Compteur et bouton du diagnostic, dans le pied de la barre latérale. */
.counter { font-weight: 700; color: var(--text-soft); }

.btn.is-ready { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 6px var(--accent-soft); } }
/* Alerte : ne réserve aucune hauteur tant qu'elle est vide, pour ne pas
   creuser un trou permanent dans le pied de la barre. */
.flash { margin: 0; font-weight: 600; font-size: .82rem; line-height: 1.35; color: var(--strike); max-height: 0; overflow: hidden; opacity: 0; transition: .2s; }
.flash.show { max-height: 5em; opacity: 1; }

/* Résultat */
.result-card { background: var(--bg-elev); border: 2px solid var(--accent); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-lg); }
.result-sub { color: var(--text-soft); margin-top: -.3rem; }
.result-h3 { margin-top: 1.6rem; font-size: 1.05rem; }
.one-by-one { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.one-by-one li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .7rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); flex-wrap: wrap; }
.obo-irr { font-style: italic; color: var(--text); }
.obo-arrow { color: var(--text-soft); font-weight: 800; }
.obo-tool { font-weight: 800; color: var(--accent); background: var(--accent-soft); padding: .25em .7em; border-radius: 999px; font-size: .9rem; }
.obo-gain { grid-column: 1 / -1; font-size: .88rem; color: var(--conf); }
.result-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1.4rem 0; font-weight: 700; color: var(--text-soft); font-size: .92rem; }
.match-note { padding: .9rem 1.1rem; border-radius: var(--radius-sm); font-size: .95rem; margin-bottom: 1.2rem; }
.match-yes { background: var(--accent-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.match-new { background: var(--conf-bg); color: var(--conf); border: 1px solid color-mix(in srgb, var(--conf) 25%, transparent); }
/* Le bloc d'action se colle au bas de la zone de lecture. La carte de
   résultat est longue (irritants un par un, enchaînement d'outils,
   conformité, feuille de route) : sur un grand écran, « Prendre
   rendez-vous » sortait du champ et il fallait deviner qu'il fallait
   défiler pour le trouver. Collé, il est visible dès l'affichage du
   résultat, à n'importe quelle taille d'écran.
   Les marges négatives compensent le padding de .result-card pour que la
   barre file d'un bord à l'autre au lieu de flotter au milieu. */
/* Bandeau de reprise : signale que les cases pré-cochées viennent d'une
   visite précédente. Sans lui, retrouver la page déjà remplie donne
   l'impression d'un bug plutôt que d'un service rendu. */
.diag-repris {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .6rem;
  margin: .9rem 0 0; padding: .6em .9em;
  border-radius: var(--radius-sm);
  background: var(--accent-soft); color: var(--text);
  font-size: .88rem; line-height: 1.45;
}
.diag-repris-clear {
  font: inherit; font-weight: 700; font-size: .84rem;
  padding: .3em .8em; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
}
.diag-repris-clear:hover { background: var(--accent); color: var(--accent-text); }

.result-cta {
  display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
  position: sticky; bottom: 0; z-index: 5;
  margin: 1.4rem -1.8rem -1.8rem; padding: 1rem 1.8rem;
  background: var(--bg-elev); border-top: 1px solid var(--border);
  border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
}

/* ---------- Pages légales ---------- */
.legal { max-width: 780px; }
.legal h2 { margin: 2.2rem 0 .7rem; font-size: 1.25rem; }
.legal h3 { margin: 1.4rem 0 .4rem; font-size: 1.02rem; color: var(--text-soft); }
.legal p, .legal li { color: var(--text-soft); line-height: 1.7; }
.legal ul { padding-left: 1.2rem; }
.legal code { background: var(--bg-alt); padding: .1em .4em; border-radius: 4px; font-size: .9em; }
.legal-table { width: 100%; border-collapse: collapse; margin: .8rem 0; font-size: .92rem; }
.legal-table th, .legal-table td { text-align: left; padding: .6em .8em; border: 1px solid var(--border); color: var(--text-soft); }
.legal-table th { background: var(--bg-alt); color: var(--text); }
.legal-date { margin-top: 2.4rem; font-size: .85rem; font-style: italic; }
/* Marqueur de rédaction, réservé au travail en cours : aucune page publiée ne
   doit en porter. Ce qui manque est suivi dans docs/A_FOURNIR.md, pas affiché
   au visiteur. */
.todo { background: #ffe9a8; color: #6b4b00; padding: .1em .45em; border-radius: 4px; font-weight: 600; font-size: .92em; }
:root[data-theme="dark"] .todo { background: #7a5c00; color: #ffe9a8; }

/* Pastille « Bientôt » du catalogue : élément d'interface, pas un marqueur de
   rédaction — elle annonce une formation en préparation (entrée `draft`). */
.cas-bientot { background: var(--accent-soft); color: var(--accent); padding: .1em .5em; border-radius: 999px; font-weight: 600; font-size: .78rem; }
.footer-legal { margin-top: .6rem; font-size: .85rem; }

/* ---------- Page rendez-vous (réservation Bookings) ---------- */
/* Carte de réservation : remplace l'iframe Bookings, que Firefox refuse. */
.booking-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 2.6rem 1.8rem; text-align: center; max-width: 640px; margin: 0 auto;
}
.booking-ico { font-size: 2.4rem; line-height: 1; display: block; margin-bottom: .6rem; }
.booking-card h2 { margin: 0 0 .6rem; font-size: 1.5rem; }
.booking-card-lead { margin: 0 auto 1.6rem; max-width: 46ch; color: var(--text-soft); }
.booking-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 1.4rem 0 0; font-size: .9rem; font-weight: 600; color: var(--text-soft); }
.booking-fallback { margin: 1rem 0 0; font-size: .9rem; color: var(--text-soft); text-align: center; }
.diagnostic-rdv-callout {
  margin: 1rem 0 0;
  padding: .75em 1em;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  font-size: .94rem;
  font-weight: 650;
}
.diagnostic-rdv-callout a {
  color: var(--accent);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .18em;
}
.booking-ref { margin: 1rem 0 0; padding: .7em 1em; border-radius: var(--radius-sm); background: var(--conf-bg); color: var(--conf); font-size: .92rem; font-weight: 600; }

/* Première marche : le ticket d'entrée, pas le parcours entier */
.firststep { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: var(--radius-sm); padding: 1rem 1.15rem; margin-bottom: 1.2rem; }
.firststep-lead { margin: 0; font-size: 1.02rem; color: var(--text); }
.firststep-price { color: var(--accent); font-size: 1.18rem; white-space: nowrap; }
.firststep-more { margin: .45rem 0 0; font-size: .9rem; color: var(--text-soft); }

/* Bandeau diagnostic sur l'accueil */
.diag-banner { background: linear-gradient(135deg, var(--accent-soft), transparent); border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); border-radius: var(--radius); padding: 1.8rem; display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.diag-banner h3 { margin: 0 0 .2rem; }
.diag-banner p { margin: 0; color: var(--text-soft); }

@media (max-width: 720px) {
  .irr-grid { grid-template-columns: 1fr; }
  .one-by-one li { grid-template-columns: 1fr; }
  .obo-tool { justify-self: start; }
}
@media print {
  .site-header, .site-footer, .cta-final, .wz-step, .diag-banner, .diag-side, #btnRestart, #btnPrint { display: none !important; }
  /* La fiche imprimée occupe toute la largeur : plus de colonne de repérage. */
  .diag-layout { display: block; }
  .result-card { border: 1px solid #999; box-shadow: none; }
  /* Un bloc collé n'a pas de sens sur papier : il se superposerait. */
  .result-cta { position: static; margin: 1.4rem 0 0; padding: 1rem 0 0; }
}

/* =========================================================
   GABARIT DE PAGE
   Un seul mode : la page défile. Le double régime « volets / repli »
   a été retiré aux étapes 2 et 3 — la coquille est un en-tête, un
   contenu, un pied. La coquille elle-même est plus bas, section
   COQUILLE COMMUNE.
   ========================================================= */

/* ---- Réseau d'arrière-plan ----
   Le canvas se glisse entre le fond de page et le contenu. pointer-events:none
   est vital : sans lui, il intercepterait tous les clics du site. */
.bg-reseau { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.app { position: relative; z-index: 1; }
/* Le contenu laisse voir le réseau ; les cartes et l'en-tête restent opaques,
   l'animation ne vit donc que dans les marges. */
.app-panel { background: transparent; }
@media print { .bg-reseau { display: none !important; } }

/* ---- Coquille ---- */

/* « par les usages » passe sous « Formations » : deux lignes courtes tiennent
   dans la largeur de la barre, une ligne longue la ferait déborder. */

/* En base, la navigation défile horizontalement : elle ne mange pas la hauteur. */

/* Gratuité et conformité valent pour tout le site : elles vivent dans la
   barre, pas dans le rail d'une page. */

/* ---- Contenu du volet ---- */
.app-panel { padding: 1.6rem 22px 2.4rem; }
.pan-head { margin-bottom: 1.3rem; }
/* Titre à gauche, repère de navigation à droite : le haut de page était
   déséquilibré, tout le poids visuel tombait à gauche. */
.pan-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; }
.pan-title-row { display: flex; align-items: flex-start; gap: .8rem; }

/* Repère « où suis-je » + saut d'une formation à l'autre. */
.pan-pager { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.pan-pager-count { font-size: .82rem; font-weight: 700; color: var(--text-soft); padding: 0 .4rem; white-space: nowrap; }
.pan-pager a, .pan-pager span.is-off {
  display: inline-flex; align-items: center; justify-content: center;
  /* 44px : minimum de cible tactile exigé par le plan. C'était 2rem (32px). */
  min-width: 44px; min-height: 44px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border); color: var(--text-soft); font-weight: 700;
}
.pan-pager a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pan-pager span.is-off { opacity: .35; }
.pan-pager-back { width: auto !important; padding: 0 .8em; gap: .35rem; font-size: .85rem; }
.pan-ico { font-size: 1.9rem; line-height: 1; }
.pan-head h1 { margin: .1rem 0 0; font-size: clamp(1.4rem, 2.4vw, 1.85rem); line-height: 1.2; }
.pan-lead { margin: .6rem 0 0; color: var(--text-soft); font-size: 1.02rem; max-width: 68ch; }
.pan-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
/* Les métadonnées en bandeau horizontal : dans le rail vertical, elles
   imposaient à elles seules la hauteur de tout le volet. */
/* L'en-tête ne porte plus que les outils : les métadonnées sont descendues
   dans le rail. Les puces peuvent donc prendre de la place et se voir. */
.pan-facts { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .8rem; }
.pan-facts .chip { font-size: .92rem; padding: .45em 1em; font-weight: 700; }
.pan-metastrip { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .89rem; }
.pan-metastrip div { display: flex; gap: .35rem; align-items: baseline; }
.pan-metastrip span { color: var(--text-soft); }

.pan-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
/* Même en mode défilement, la ligne reste lisible : sans cette borne, les
   cartes s'étirent sur toute la largeur de l'écran. */
.pan-col { max-width: 72ch; }
.pan-col h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); font-weight: 800; margin: 0 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--border); }
.pan-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.pan-list li { font-size: .97rem; line-height: 1.5; display: flex; gap: .6rem; }
/* Volet dédié : le contenu y est seul, il peut respirer. */
.pan-list--airy { gap: .9rem; }
.pan-list--airy li { font-size: 1rem; line-height: 1.55; }

/* Chaque entrée dans son propre cadre : on la lit isolément aussi bien que
   dans l'ensemble, et le blanc se répartit entre les cartes au lieu de
   s'accumuler en bas de colonne. */
.pan-list--cards { gap: .5rem; }
.pan-list--cards li {
  align-items: center;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: .72rem .95rem; background: var(--bg);
}
.programme-detail { gap: 1rem; }
.programme-detail h2 { margin-top: 0; }
.programme-detail h3 {
  margin: .95rem 0 .45rem;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-soft);
}
.programme-list.pan-list--cards li {
  align-items: flex-start;
  max-height: none;
}
.programme-list strong { display: block; margin-bottom: .2rem; }
.programme-list em {
  display: block;
  margin-top: .18rem;
  font-style: normal;
  font-size: .9rem;
  color: var(--text-soft);
}
.programme-mini {
  margin: .2rem 0 0;
  padding-left: 1rem;
  color: var(--text-soft);
  font-size: .9rem;
}
.programme-mini li { margin: .18rem 0; }
.pan-list .pan-n {
  flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Accueil : les six portes d'entrée par le problème métier. */
.pcard-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
.pcard2 {
  display: flex; align-items: center; gap: .7rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: .7rem .9rem; background: var(--bg); color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.pcard2:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.pcard2-ico { font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.pcard2 strong { display: block; font-size: .93rem; line-height: 1.3; }
.pcard2 em { display: block; font-style: normal; font-size: .82rem; color: var(--text-soft); margin-top: .15rem; }

/* Vue synoptique : un problème, son enchaînement d'outils, son livrable.
   Le récit détaillé vit sur les fiches et les pages programme. */
.syn-list { display: flex; flex-direction: column; gap: .42rem; }
.syn-row {
  display: block; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: .65rem .9rem; background: var(--bg); color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.syn-row:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.syn-top { display: flex; align-items: center; gap: .55rem; }
.syn-ico { font-size: 1.15rem; line-height: 1; }
.syn-title { font-weight: 700; font-size: .93rem; }
.syn-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .4rem; }
.syn-tool { font-size: .76rem; font-weight: 700; padding: .18em .6em; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.syn-arrow { color: var(--text-soft); font-size: .74rem; }
.syn-out { font-size: .8rem; color: var(--text-soft); margin-left: .3rem; }

/* Étapes du déroulé, numérotées et cadrées. */
.dr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.dr-list li { display: flex; gap: .8rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: .85rem 1rem; background: var(--bg); }
.dr-num { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--accent-text); font-weight: 800; font-size: .9rem; display: inline-flex; align-items: center; justify-content: center; }
/* Enfant direct seulement : sinon les <strong> du texte courant passeraient
   eux aussi en bloc et casseraient la phrase en morceaux. */
.dr-list li > div > strong { display: block; font-size: .96rem; margin-bottom: .15rem; }
.dr-list p { margin: 0; font-size: .87rem; color: var(--text-soft); line-height: 1.45; }

/* Repères de confiance, en version liste pour le rail. */
.pan-trust { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pan-trust li { display: flex; gap: .5rem; font-size: .84rem; color: var(--text-soft); line-height: 1.35; }

/* Ce qu'on emporte : argument de vente, placé juste avant le tarif. */
.pan-outcome { margin: 0 0 .8rem; padding-bottom: .8rem; border-bottom: 1px dashed var(--border); font-size: .92rem; }
.pan-outcome span { display: block; color: var(--text-soft); }
.pan-outcome strong { font-weight: 700; }

/* Rail : métadonnées, tarif, action */
.pan-rail { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; align-self: start; }
.pan-meta { display: grid; gap: .4rem; margin-bottom: .75rem; }
.pan-meta div { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; border-bottom: 1px dashed var(--border); padding-bottom: .4rem; }
.pan-meta span { color: var(--text-soft); }
.pan-meta strong { text-align: right; }
.pan-price { background: var(--accent-soft); border-radius: var(--radius-sm); padding: .7rem .85rem; margin-bottom: .9rem; }
.pan-price b { display: block; color: var(--accent); font-size: 1.45rem; line-height: 1.15; }
.pan-price em { font-style: normal; font-size: .84rem; color: var(--text-soft); }
.pan-rail .btn { width: 100%; justify-content: center; }
.pan-rail-fine { margin: .7rem 0 0; font-size: .83rem; color: var(--text-soft); line-height: 1.45; }

.pan-foot { display: grid; gap: .6rem; margin-top: 1.4rem; }
.pan-foot p { margin: 0; font-size: .84rem; }

.pan-modalites { padding: .8em 1em; background: var(--bg-alt); border-radius: var(--radius-sm); color: var(--text-soft); }

/* Les trois temps du rendez-vous, en bandeau sous la carte de réservation. */
.rdv-step { padding: .7em .9em; background: var(--bg-alt); border-radius: var(--radius-sm); font-size: .84rem; line-height: 1.45; color: var(--text-soft); }
.rdv-step strong { color: var(--text); display: block; margin-bottom: .1rem; }

/* Page de référence : le texte réglementaire garde une largeur de lecture. */
.pan-col.legal { max-width: 74ch; }

/* Repère de conformité en version compacte, logé dans le rail. */
.pan-conf-mini { margin: .9rem 0 0; padding: .55em .7em; border-radius: var(--radius-sm); background: var(--conf-bg); color: var(--conf); font-size: .82rem; line-height: 1.4; font-weight: 600; }

/* Renvoi vers un volet dédié : quand une rubrique alourdit trop la page,
   elle part sur sa propre page et laisse ce bouton à sa place. */
.pan-more { margin-top: 1.1rem; }
.pan-more .btn { width: 100%; justify-content: space-between; font-size: .9rem; }
.pan-more-hint { margin: .45rem 0 0; font-size: .78rem; color: var(--text-soft); }

/* Retour depuis un volet secondaire vers sa fiche. */
.pan-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 600; color: var(--text-soft); margin-bottom: .5rem; }
.pan-back:hover { color: var(--accent); text-decoration: none; }

/* =========================================================
   SURCOUCHE — MODE VOLETS
   Largeur ET hauteur suffisantes : sinon on reste en défilement.
   ========================================================= */
/* Reliquat de la media query des volets : elle ne conditionne plus que la
   mise en page confortable des pages internes sur grand écran. La contrainte
   de hauteur n'a plus lieu d'être ici et pourra tomber à l'étape 7, quand les
   fiches passeront au gabarit commun. */
@media (min-width: 1024px) and (min-height: 620px) {
  .app-panel { padding: 1.6rem 1.8rem 2.4rem; }
  .pan-head { margin-bottom: .9rem; }
  .pan-head h1 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
  .pan-lead { max-width: 92ch; font-size: .92rem; }
  /* La grille occupe toute la hauteur restante, et ses colonnes s'étirent :
     le blanc se répartit entre les blocs au lieu de tomber en bas de page. */
  .pan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 250px; gap: 1.4rem; flex: 1; align-items: stretch; }
  .pan-col { display: flex; flex-direction: column; }
  /* Ce sont les cartes qui absorbent la hauteur restante, à parts égales,
     plutôt que les intervalles : avec 4 items, des écarts répartis creusaient
     des trous, alors que des cartes un peu plus hautes restent régulières. */
  .pan-col .pan-list { flex: 1; justify-content: flex-start; }
  /* Plafonnées : au-delà, une ligne de texte flotterait au milieu du vide.
     Le reliquat de hauteur retombe alors au-dessus du bouton, en bas. */
  .pan-col .pan-list--cards li { flex: 1 0 auto; max-height: 4.4rem; }
  .pan-col .programme-list.pan-list--cards li { flex: 0 0 auto; max-height: none; }
  /* Le renvoi vers le volet dédié se cale en bas de colonne. */
  .pan-more { margin-top: auto; }
  /* Le rail touche le bas ; l'action se pose en pied, l'information en tête. */
  .pan-rail { align-self: stretch; display: flex; flex-direction: column; }
  /* C'est le GROUPE d'appels à l'action qui se colle en bas, pas chaque
     bouton : sinon chacun réclamait sa part de l'espace libre. */
  .pan-rail > .btn:last-child, .pan-rail-cta { margin-top: auto; }
  /* Volet allégé : une colonne de contenu + le rail. La colonne est bridée en
     largeur de ligne — le blanc restant vaut mieux que des lignes trop longues. */
  /* Rail large : chaque ligne qui cesse de se couper en deux rend de la
     hauteur. La largeur disponible s'échange donc contre de la verticale. */
  .pan-grid--split { grid-template-columns: minmax(0, 1fr) 310px; }
  .pan-grid--split .pan-col { max-width: 66ch; }
  /* Les six cartes de l'accueil sur deux colonnes : trois rangées tiennent
     dans la hauteur, une seule colonne déborderait. */
  .pcard-grid { grid-template-columns: 1fr 1fr; }
  .pan-grid--split:has(.pcard-grid) .pan-col { max-width: none; }

  /* Les six enchaînements sur deux colonnes. Empilés, ils faisaient déborder
     methode.html de son volet même sur un écran 1080p — la seule page du site
     dans ce cas. Sur deux colonnes elle tient, et les six se comparent d'un
     regard, ce que la page cherche précisément à montrer. */
  .pan-grid--split:has(.syn-list) .pan-col { max-width: none; }
  .syn-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-content: start; }
  .pan-foot { grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: auto; padding-top: .55rem; border-top: 1px solid var(--border); }
  .pan-foot--single { grid-template-columns: 1fr; }
  .pan-foot--3 { grid-template-columns: repeat(3, 1fr); }
  .pan-foot p { font-size: .8rem; line-height: 1.4; }
}

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .chain { max-width: 300px; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .main-nav {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--bg-elev); border-bottom: 1px solid var(--border); padding: 1rem 22px;
    gap: .4rem; transform: translateY(-120%); transition: transform .28s ease; box-shadow: var(--shadow-lg);
  }
  .main-nav.open { transform: translateY(0); }
  .main-nav a { padding: .7em 0; }
  .nav-toggle { display: flex; }
  .steps li { grid-template-columns: 1fr; gap: .35rem; padding-left: 3.1rem; }
  .step-formation { white-space: normal; }
}
@media (max-width: 520px) {
  .brand-name { display: none; }
  .trust-grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
}

/* =========================================================
   VERSION 2 — AJUSTEMENTS DE MISE EN PAGE
   Même charte graphique : on conserve les variables de couleur, le logo et
   la typographie. Les changements portent sur la densité, les surfaces et
   la hiérarchie visuelle.
   ========================================================= */

:root {
  --shadow-soft: 0 10px 30px rgba(20,32,46,.07);
  --shadow-focus: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}

h1,h2,h3 {
  letter-spacing: 0;
}

h1 {
  font-size: 2.55rem;
}

h2 {
  font-size: 2rem;
}

body {
  background:
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}

:focus-visible {
  outline: 0;
  box-shadow: var(--shadow-focus);
}

.btn {
  min-height: 42px;
  border-radius: 12px;
}

.btn-primary {
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 22%, transparent);
}

.btn-ghost {
  background: var(--bg-elev);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.app-nav a,
.diag-nav-item {
  min-height: 34px;
}

.app-panel {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

.pan-head {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, var(--bg-elev), color-mix(in srgb, var(--accent-soft) 46%, var(--bg-elev)));
  padding: clamp(1.2rem, 2.4vw, 1.75rem);
  box-shadow: var(--shadow-soft);
}

.pan-head h1 {
  font-size: 1.95rem;
  max-width: 14ch;
}

.pan-head h1.diagnostic-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.55rem, 2.05vw, 1.95rem);
}

.pan-title-row {
  align-items: center;
}

.pan-ico {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.uc-tag {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.pan-lead {
  max-width: 72ch;
}

.pan-grid {
  align-items: start;
}

.pan-col h2 {
  display: flex;
  align-items: center;
  gap: .65rem;
  border-bottom: 0;
  padding-bottom: 0;
}

.pan-col h2::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}

.pan-list--cards,
.pcard-grid,
.syn-list,
.dr-list {
  gap: .75rem;
}

.pan-list--cards li,
.pcard2,
.syn-row,
.dr-list li,
.wz-step {
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--accent-soft));
  border-color: color-mix(in srgb, var(--border) 88%, var(--accent));
  box-shadow: var(--shadow-soft);
}

.pan-list--cards li,
.pcard2,
.syn-row,
.dr-list li {
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease;
}

.pcard2:hover,
.syn-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.pan-list--cards li {
  align-items: flex-start;
  padding: .95rem 1rem;
}

.pan-list .pan-n,
.dr-num {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.pcard2 {
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem;
}

.pcard2-ico,
.syn-ico {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pcard2 strong,
.syn-title {
  font-size: 1rem;
}

.pcard2 em {
  font-size: .88rem;
  line-height: 1.4;
}

.syn-row {
  padding: .9rem 1rem;
}

.syn-chain {
  gap: .38rem;
  padding-left: 2.9rem;
}

.syn-tool,
.chip,
.obo-tool {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.pan-rail {
  border-color: color-mix(in srgb, var(--border) 85%, var(--accent));
  box-shadow: var(--shadow-soft);
}

.pan-outcome {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: var(--radius-sm);
  padding: .85rem .95rem;
}

.pan-outcome span {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pan-price {
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.pan-trust li {
  align-items: flex-start;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--border);
}

.pan-trust li:last-child {
  border-bottom: 0;
}

.pan-foot {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.rdv-step,
.pan-modalites,
.uc-auto,
.uc-conf,
.firststep,
.booking-ref {
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}

.booking-card {
  border-color: color-mix(in srgb, var(--border) 75%, var(--accent));
  box-shadow: var(--shadow-lg);
}

.booking-ico {
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 18px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wz-step {
  padding: 1.35rem;
}

.irr-card,
.role-chip {
  background: var(--bg-elev);
}

@media (min-width: 1024px) and (min-height: 620px) {
  .app {
    grid-template-columns: 284px minmax(0, 1fr);
  }

  .app-panel {
    max-width: 1260px;
    padding: 1.35rem 2rem 1.05rem;
  }

  .pan-head {
    margin-bottom: 1.15rem;
    flex: 0 0 auto;
  }

  .pan-head h1 {
    font-size: 2rem;
    max-width: 18ch;
  }

  .pan-lead {
    font-size: .98rem;
  }

  .pan-grid {
    gap: 1.5rem;
  }

  .pan-grid--split {
    grid-template-columns: minmax(0, 1fr) 328px;
  }

  .pan-grid--split .pan-col {
    max-width: 72ch;
  }

  .pan-grid--split:has(.pcard-grid) .pan-col {
    max-width: none;
  }

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

  .pan-col .pan-list--cards li {
    max-height: none;
  }

  .pan-rail {
    padding: 1.15rem;
  }

  .app-panel--scroll {
    padding-bottom: 1.6rem;
  }
}

@media (min-width: 1280px) and (min-height: 720px) {
  .app-panel {
    padding: 1.8rem 2.4rem 1.4rem;
  }

  .pan-head {
    padding: 1.75rem 1.9rem;
  }

  .pan-grid--split {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .pcard2 {
    min-height: 118px;
  }
}

@media (max-width: 900px) {
  .app-panel {
    max-width: none;
  }

  .pan-head-top {
    flex-direction: column;
  }

  .pan-pager {
    align-self: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: .2rem;
  }

  .pan-head h1 {
    max-width: none;
  }

  .syn-chain {
    padding-left: 0;
  }
}

@media (max-width: 640px) {

  .app-side-foot .btn,
  .app-side-foot .app-side-fine,

  .app-panel {
    padding: 1rem 16px 2rem;
  }

  .pan-head {
    padding: 1rem;
    border-radius: var(--radius-sm);
  }

  .pan-head h1 {
    font-size: 1.75rem;
  }

  .pan-head h1.diagnostic-title {
    white-space: normal;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.45rem;
  }

  .pan-title-row {
    align-items: flex-start;
  }

  .pan-ico {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 12px;
  }

  .pan-list--cards li,
  .pcard2,
  .syn-row,
  .dr-list li,
  .pan-rail,
  .booking-card,
  .wz-step {
    box-shadow: none;
  }

  .pcard2 {
    padding: .85rem;
  }

  .pcard2-ico,
  .syn-ico {
    width: 2rem;
    height: 2rem;
    border-radius: 10px;
  }
}

/* =========================================================
   COMPOSANTS DE L'ACCUEIL
   Écrits pour les anciens volets, réutilisés tels quels par la page
   verticale (étape 3). Leurs grilles multi-colonnes sont republiées en
   fin de feuille, sur la largeur seule : elles dépendaient de la hauteur
   de fenêtre, ce qui n'a plus de sens pour une page qui défile.
   ========================================================= */

/* ---- Premier écran ---- */
.hero2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; align-items: center; }
.hero2-text h1 { margin: .15rem 0 0; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; letter-spacing: -.01em; }
.hero2-lead { margin: .85rem 0 0; color: var(--text-soft); font-size: 1.02rem; line-height: 1.55; max-width: 54ch; }
.hero2-cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
/* Les repères chiffrés : ils donnent au visiteur de quoi juger avant même
   qu'on lui présente les six portes. */
.hero2-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.hero2-facts div { padding: .85rem .95rem; background: var(--bg-elev); box-shadow: 0 0 0 .5px var(--border); }
.hero2-facts b { display: block; font-size: 1.35rem; line-height: 1.1; color: var(--accent); }
.hero2-facts span { display: block; margin-top: .18rem; font-size: .78rem; color: var(--text-soft); line-height: 1.35; }

/* Bandeau des outils couverts : le périmètre en un coup d'œil, sans
   promettre un catalogue — c'est bien l'enchaînement qu'on vend.
   Il défile en continu : la liste est plus large que la colonne sur les
   fenêtres étroites, et le mouvement dit « il y en a d'autres » mieux
   qu'une liste tronquée.

   Boucle sans couture : la piste contient DEUX jeux identiques et se
   déplace de -50 %. Pour que le raccord tombe pile, la gouttière de fin
   doit appartenir à chaque jeu (padding-right) plutôt qu'être posée
   entre les deux par un gap — sinon il manque une demi-gouttière au
   moment du bouclage, et l'on voit un saut à chaque tour. */
.toolband {
  position: relative; overflow: hidden;
  /* flex:0 0 auto est indispensable : overflow:hidden ramène la hauteur
     minimale implicite à zéro, et dans un panneau en colonne flex le
     bandeau s'écrasait alors à 15 px — les pastilles étaient rognées. */
  flex: 0 0 auto;
  padding-top: .9rem; border-top: 1px solid var(--border);
  /* Les extrémités s'estompent : sans cela, les pastilles sont coupées
     net au bord et le défilement ressemble à un débordement. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.toolband-track {
  display: flex; width: max-content;
  animation: defileOutils 45s linear infinite;
}
/* Au survol et au clavier, le défilement s'arrête : on doit pouvoir lire
   un nom sans lui courir après. */
.toolband:hover .toolband-track,
.toolband:focus-within .toolband-track { animation-play-state: paused; }

.toolband-set {
  display: flex; align-items: center; gap: .5rem; flex: 0 0 auto;
  margin: 0; padding: 0 .5rem 0 0; list-style: none;
}
.toolband-set li {
  font-size: .8rem; font-weight: 700; color: var(--text-soft);
  padding: .25em .7em; border-radius: 999px; background: var(--bg-alt);
  white-space: nowrap;
}
/* Sur les pages autres que l'accueil, le bandeau est un rappel du
   périmètre, pas un argument : il se fait plus discret pour ne pas
   grignoter la hauteur utile du volet. */
.toolband--compact { padding-top: .55rem; }
.toolband--compact .toolband-set li { font-size: .73rem; padding: .2em .6em; }

@keyframes defileOutils {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Mouvement réduit ou impression : la liste redevient statique et le
   doublon disparaît, sans quoi chaque outil s'afficherait deux fois. */
@media (prefers-reduced-motion: reduce) {
  .toolband { -webkit-mask-image: none; mask-image: none; }
  .toolband-track { animation: none; width: auto; flex-wrap: wrap; }
  .toolband-set { flex-wrap: wrap; row-gap: .3rem; }
  .toolband-set[aria-hidden="true"] { display: none; }
}
@media print {
  .toolband { -webkit-mask-image: none; mask-image: none; }
  .toolband-track { animation: none; width: auto; flex-wrap: wrap; }
  .toolband-set[aria-hidden="true"] { display: none; }
}

/* ---- En-tête et pied communs aux volets 2 à 4 ---- */

/* ---- Volet 2 : le manifeste, trois temps de front ---- */
.manifeste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.manifeste article {
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; background: var(--bg-elev);
}
/* Numéro en contour : il structure sans peser, et laisse la revendication
   porter le regard. */
.mf-n {
  display: block; font-size: 2.1rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--border);
  letter-spacing: .02em;
}
.manifeste h3 { margin: .55rem 0 .3rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); }
.mf-claim { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--accent); line-height: 1.35; }
.mf-text { margin: 0; font-size: .87rem; color: var(--text-soft); line-height: 1.5; }

/* ---- Volet 3 : les six portes, avec leurs critères ---- */
.cas-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; }
.cas {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: .8rem .95rem; background: var(--bg-elev); color: var(--text);
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cas:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; transform: translateY(-2px); }
.cas-n {
  font-size: 1.5rem; font-weight: 800; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px var(--border);
}
.cas-ico { font-size: 1.2rem; line-height: 1; margin-top: -1.45rem; align-self: flex-end; }
.cas-t { display: block; font-size: .95rem; line-height: 1.28; margin-top: .35rem; }
.cas-v { display: block; font-style: italic; font-size: .81rem; color: var(--text-soft); margin-top: .22rem; line-height: 1.4; }
/* L'enchaînement d'outils EST l'argument : c'est lui qui distingue la
   formation d'un cours sur Excel. */
.cas-chain { display: flex; flex-wrap: wrap; align-items: center; gap: .22rem; margin-top: .5rem; }
.cas-chain b { font-size: .71rem; font-weight: 700; padding: .16em .55em; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.cas-chain i { font-style: normal; font-size: .68rem; color: var(--text-soft); }
/* margin-top:auto colle les critères en bas : les six cartes s'alignent
   quelle que soit la longueur du titre. */
.cas-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  margin-top: auto; padding-top: .6rem; border-top: 1px dashed var(--border);
  font-size: .8rem; color: var(--text-soft);
}
.cas-meta b { font-size: .92rem; color: var(--text); }

/* ---- Volet 4 : qui vous forme ---- */
.qui { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.qui-photo { margin: 0; text-align: center; }
.qui-photo img { width: 210px; height: 210px; object-fit: cover; border-radius: 50%; border: 3px solid var(--accent-soft); }
.qui-photo figcaption { margin-top: .6rem; }
.qui-photo strong { display: block; font-size: .9rem; color: var(--accent); }
.qui-photo span { display: block; font-size: .78rem; color: var(--text-soft); }
.qui-linkedin { display: inline-block; margin-top: .45rem; font-size: .78rem; color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-soft); }
.qui-linkedin:hover { border-bottom-color: var(--accent); }
.qui-text p { margin: .7rem 0 0; font-size: .92rem; color: var(--text-soft); line-height: 1.55; max-width: 62ch; }
.qui-trust { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.qui-trust li { display: flex; gap: .5rem; font-size: .85rem; color: var(--text-soft); line-height: 1.4; }
.qui-trust strong { color: var(--text); }

/* =========================================================
   SURCOUCHE PARCOURS — un seul volet à l'écran
   Même seuil que le mode volets : 1024x620. Le drapeau .prc-ready est
   posé dans le <head> pour éviter que les 4 volets clignotent avant que
   le JS ne les replie.
   ========================================================= */
@media (min-width: 1024px) and (min-height: 620px) {

  /* La chaîne des hauteurs doit être continue de .app-panel jusqu'au
     volet, sinon flex:1 n'a rien à répartir et le volet retombe sur sa
     hauteur naturelle. min-height:0 autorise le rétrécissement. */

  /* flex:1 absorbe tout l'espace libre : le contenu reste centré dans ce
     bloc, et le bandeau — qui suit — se retrouve toujours au pied du volet.
     C'est ce qui évite d'avoir à choisir entre « contenu centré » et
     « bandeau en bas » : les deux tiennent ensemble. */

  /* Un seul volet visible. La règle porte sur .prc-ready pour que, JS
     absent, la page reste entièrement lisible en défilement. */

  /* Le hero occupe la hauteur disponible et s'y centre ; le bandeau
     d'outils reste collé au pied du volet. Sans cela, le contenu se
     groupe au milieu et laisse un vide franc sous les boutons. */

  .hero2 { grid-template-columns: minmax(0, 1.5fr) 290px; gap: 2.6rem; }
  .manifeste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
  .cas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .qui { grid-template-columns: 240px minmax(0, 1fr); gap: 2.4rem; }

  /* Les cartes gardent leur hauteur naturelle et l'ensemble se centre.
     Étirées sur toute la hauteur, elles creusaient un vide entre
     l'enchaînement d'outils et le tarif — un blanc qu'on lisait comme un
     oubli, pas comme une respiration. */

  /* ---- Rail d'étapes ----
     En HAUT du panneau. Il y était d'abord en pied : sans défilement, le
     bas de l'écran est certes toujours visible, mais sur un très grand
     écran (télévision, vidéoprojecteur) il tombe hors du champ de lecture
     et se lit comme un pied de page. En tête, il est vu avant le contenu
     — donc avant que le visiteur décide s'il y a une suite. */

  /* ---- Transitions ----
     Courtes et directionnelles : elles disent « même page, autre temps »,
     pas « autre page ». */
  @keyframes voletSuivant {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes voletPrecedent {
    from { opacity: 0; transform: translateX(-26px); }
    to   { opacity: 1; transform: none; }
  }

}

@media (prefers-reduced-motion: reduce) {

  .cas:hover { transform: none; }
}

/* =========================================================
   VARIANTE (b′) — L'ACCUEIL EN UN SEUL VOLET
   Application stricte du principe « une page = un écran ». Tout le
   contenu du parcours tient d'un regard, au prix d'une compression :
   le manifeste perd ses justifications, les cartes leur enchaînement
   d'outils. C'est précisément ce compromis qu'il s'agit de juger.
   ========================================================= */

@media (min-width: 1024px) and (min-height: 620px) {

  /* La promesse se réduit à un bandeau : deux lignes de titre et les
     repères chiffrés à droite. Les CTA disparaissent d'ici — le bouton
     permanent de la barre latérale les remplace. */
  .hero2--compact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.8rem; flex: 0 0 auto; }
  .hero2--compact h1 { font-size: clamp(1.4rem, 2.3vw, 1.9rem); }
  .hero2--compact .hero2-facts { grid-template-columns: repeat(4, auto); }
  .hero2--compact .hero2-facts div { padding: .55rem .85rem; }
  .hero2--compact .hero2-facts b { font-size: 1.05rem; }
  .hero2--compact .hero2-facts span { font-size: .72rem; }

  /* Le manifeste en bande : plus de cadres, plus de paragraphes. Trois
     revendications séparées par un filet, et rien d'autre. */
  .manifeste--strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0; flex: 0 0 auto;
    border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  }
  .manifeste--strip article { border: 0; background: transparent; padding: .75rem 1.1rem .75rem 0; }
  .manifeste--strip article + article { border-left: 1px solid var(--border); padding-left: 1.1rem; }
  .manifeste--strip h3 { margin: 0 0 .25rem; }
  .manifeste--strip .mf-claim { margin: 0; font-size: .93rem; }

  .un-head { flex: 0 0 auto; align-items: baseline; }

  /* La grille prend toute la hauteur restante : c'est elle qui absorbe
     la variation, jamais un débordement. */

  .cas-grid--dense .cas { padding: .65rem .85rem; }
  .cas-grid--dense .cas-chain { display: none; }
  .cas-grid--dense .cas-t { font-size: .9rem; }

  .un-foot { flex: 0 0 auto; }
}

/* =========================================================
   COQUILLE COMMUNE — étape 2
   Remplace la barre latérale par un en-tête compact et un pied complet.
   Mobile d'abord : sur petit écran, l'en-tête tient sur une ligne et le
   menu est replié. C'était le défaut d'origine — la barre latérale se
   posait au-dessus du contenu et le visiteur arrivait sur du mobilier.
   ========================================================= */

/* Premier arrêt de tabulation : sauter la navigation. */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-text);
  padding: .7rem 1rem; border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ---- En-tête ---- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}
.site-head-in {
  max-width: 1220px; margin: 0 auto;
  padding: .55rem 22px;
  display: flex; align-items: center; gap: .7rem;
}
.site-brand { display: flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 600; margin-right: auto; }
.site-brand:hover { text-decoration: none; }
.site-brand img { height: 34px; width: auto; border-radius: 7px; display: block; }
.site-brand-name { display: flex; flex-direction: column; font-size: .86rem; line-height: 1.15; }
.site-brand-name strong { font-weight: 800; }

/* Le bouton de menu n'existe que si JS a pu replier la navigation :
   il est posé par script.js. Sans JS, la navigation reste dépliée et
   le site demeure entièrement parcourable. */
.nav-toggle {
  display: none;
  align-items: center; gap: .45rem;
  min-height: 44px; min-width: 44px; padding: .4rem .7rem;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.nav-toggle[data-ready] { display: inline-flex; }
.nav-toggle:hover { border-color: var(--accent); }
.nav-toggle-bars { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px;
  background: currentColor; border-radius: 2px; transition: transform .18s ease, top .18s ease;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

/* ---- Navigation ---- */
.site-nav { display: flex; align-items: center; gap: .15rem; }
/* :not(.btn) — sans quoi le bouton d'appel hérite de la couleur de texte
   discrète et devient illisible sur son fond violet. */
.site-nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .35em .7em; border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: .88rem; font-weight: 600;
  border: 1.5px solid transparent;
}
.site-nav a:not(.btn):hover { background: var(--accent-soft); color: var(--text); text-decoration: none; }
.site-nav a:not(.btn)[aria-current="page"] { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.site-nav .btn { min-height: 44px; margin-left: .35rem; }

/* Sous-menu natif : <details> est accessible au clavier et fonctionne
   sans une ligne de JavaScript. */
.nav-sub { position: relative; }
.nav-sub > summary {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 44px;
  padding: .35em .7em; border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: .88rem; font-weight: 600;
  cursor: pointer; list-style: none; border: 1.5px solid transparent;
}
.nav-sub > summary::-webkit-details-marker { display: none; }
.nav-sub > summary::after { content: "▾"; font-size: .8em; }
.nav-sub > summary:hover { background: var(--accent-soft); color: var(--text); }
.nav-sub[open] > summary { background: var(--accent-soft); color: var(--text); }
.nav-sub-panel { display: flex; flex-direction: column; padding: .3rem 0 .3rem .8rem; }

/* ---- Pied de page ---- */
.site-foot {
  margin-top: 3rem;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.site-foot-in {
  max-width: 1220px; margin: 0 auto; padding: 2.2rem 22px 1.4rem;
  display: grid; gap: 1.8rem;
}
.foot-col h2 {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 800; color: var(--text-soft); margin: 0 0 .6rem;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
/* :not(.btn) — même raison que dans l'en-tête : sans l'exclusion, le bouton
   d'appel hérite de la couleur discrète et devient illisible sur son fond. */
.foot-col a:not(.btn) { display: inline-flex; align-items: center; min-height: 34px; color: var(--text-soft); font-size: .89rem; }
.foot-col a:not(.btn):hover { color: var(--accent); }
.foot-col .btn { min-height: 44px; }
.foot-brand img { height: 38px; width: auto; border-radius: 7px; display: block; margin-bottom: .6rem; }
.foot-baseline { margin: 0 0 .7rem; font-size: .89rem; color: var(--text-soft); max-width: 34ch; }
.foot-conf { margin: 0; font-size: .78rem; color: var(--conf); font-weight: 600; line-height: 1.4; }
.foot-cta { margin-top: .3rem; }

.site-foot-legal {
  max-width: 1220px; margin: 0 auto; padding: 1rem 22px 2rem;
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: space-between;
  font-size: .78rem; color: var(--text-soft);
}
.site-foot-legal p { margin: 0; }
.site-foot-legal a { color: var(--text-soft); text-decoration: underline; }
.site-foot-legal a:hover { color: var(--accent); }

/* ---- Petit écran : menu replié ---- */
@media (max-width: 899px) {
  .site-head-in { flex-wrap: wrap; }
  /* La navigation prend toute la largeur sous la marque, en colonne :
     plus de défilement horizontal, plus de mobilier avant le contenu. */
  .site-nav {
    order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: .1rem; padding: .5rem 0 .7rem; border-top: 1px solid var(--border);
    margin-top: .5rem;
  }
  .site-nav[hidden] { display: none; }
  .site-nav a, .nav-sub > summary { justify-content: flex-start; }
  .site-nav .btn { margin: .5rem 0 0; justify-content: center; }
  .nav-sub-panel { padding-left: 1.2rem; }
}

/* ---- Grand écran ---- */
@media (min-width: 900px) {
  .site-head-in { padding: .5rem 22px; gap: .5rem; }
  .site-brand img { height: 38px; }
  .site-brand-name { font-size: .9rem; }
  /* La bascule de thème passe après le menu. Elle est placée avant dans le
     HTML pour rester à côté du bouton de menu sur petit écran, où elle est
     la seule commande visible une fois la navigation repliée. */
  .site-nav { order: 2; }
  .theme-toggle { order: 3; margin-left: .3rem; }
  /* Le sous-menu se détache en menu déroulant. */
  .nav-sub-panel {
    position: absolute; top: 100%; left: 0; z-index: 60; min-width: 210px;
    padding: .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-elev); box-shadow: var(--shadow-lg);
  }
  .site-foot-in { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.4rem; }
}

/* Sous 420px, la marque se réduit à son logo : le nom sur deux lignes
   poussait le bouton de menu hors de l'écran. */
@media (max-width: 419px) {
  .site-brand-name { display: none; }
  .site-head-in { padding: .55rem 16px; }
  .app-panel { padding-left: 16px; padding-right: 16px; }
  .site-foot-in, .site-foot-legal { padding-left: 16px; padding-right: 16px; }
}

@media print {
  .site-head, .site-foot, .skip-link { display: none !important; }
}

/* ---- Diagnostic : contrôles sortis de la barre latérale (étape 2) ---- */
/* Raccourcis de thèmes : une bande qui défile, pas une colonne. */
.diag-jump { display: flex; gap: .35rem; overflow-x: auto; padding: 0 0 .6rem; margin-bottom: .4rem; }
.diag-jump:empty { display: none; }
.diag-jump .diag-nav-item { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

/* Barre d'action collante en pied d'écran : le compteur et le bouton
   restent sous les yeux pendant qu'on coche. */
.diag-bar {
  position: sticky; bottom: 0; z-index: 40;
  background: var(--bg-elev); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(20,32,46,.07);
}
.diag-bar-in {
  max-width: 1220px; margin: 0 auto; padding: .6rem 22px;
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}
.diag-bar .counter { font-size: .9rem; font-weight: 700; color: var(--text-soft); flex: 0 0 auto; }
.diag-bar .flash { flex: 1 1 12rem; margin: 0; font-size: .84rem; }
.diag-bar .flash:empty { display: none; }
.diag-bar .btn { flex: 0 0 auto; min-height: 44px; }
.diag-bar .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
@media (max-width: 419px) {
  .diag-bar-in { padding: .6rem 16px; }
  .diag-bar .btn { width: 100%; justify-content: center; }
}

/* =========================================================
   ACCUEIL VERTICAL — étape 3
   La page se lit en défilant, sans interaction préalable. Les grilles
   multi-colonnes vivaient dans la media query des volets, conditionnée à la
   HAUTEUR de la fenêtre : sans objet ici, elles ne dépendent plus que de la
   largeur.
   ========================================================= */

.sec { padding: 3rem 0; }
.sec + .sec { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.sec--alt { background: var(--bg-alt); border-top-color: var(--border); }
.sec--hero { padding-top: 2.2rem; }
.sec-in { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

.sec-head { margin-bottom: 1.7rem; max-width: 62ch; }
.sec-head h2 { margin: .3rem 0 0; font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.2; letter-spacing: -.01em; }
.sec-lead { margin: .7rem 0 0; color: var(--text-soft); font-size: 1rem; line-height: 1.55; }

/* Un rappel d'action après chaque section importante. */
.sec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; margin: 1.6rem 0 0; }
.sec-foot-fine { font-size: .87rem; color: var(--text-soft); line-height: 1.5; max-width: 62ch; }

/* Le bandeau d'outils ferme le premier écran, pleine largeur. */
.sec--hero .toolband { margin-top: 2.2rem; }

/* ---- Livrables ---- */
.livrables { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.livrables li {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .2rem .7rem;
  align-items: baseline; padding: .8rem .95rem;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.lv-ico { grid-row: span 2; font-size: 1.3rem; line-height: 1; }
.livrables a { font-weight: 700; }
.lv-out { grid-column: 2; color: var(--text-soft); font-size: .9rem; line-height: 1.45; }

/* ---- Preuves : emplacements en attente ----
   Volontairement sobres et signalés. Un faux témoignage coûterait plus cher
   que ce blanc-là. */
.preuves { display: grid; gap: .8rem; }
.preuve {
  padding: 1.1rem; border-radius: var(--radius-sm);
  background: var(--bg-elev); border: 1px solid var(--border);
}
.preuve--vide { border-style: dashed; background: transparent; }
.preuve-note { margin: .6rem 0 0; font-size: .87rem; color: var(--text-soft); line-height: 1.5; }
.todo-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }

/* ---- Financement : trois entrées ---- */
.finance { display: grid; gap: .9rem; }
.fin {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.2rem; border-radius: var(--radius);
  background: var(--bg-elev); border: 1px solid var(--border);
}
/* La voie directe est celle que Nouvance facture : elle se détache. */
.fin--direct { border-color: var(--accent); box-shadow: var(--shadow); }
.fin h3 { margin: 0; font-size: 1.05rem; }
.fin-qui { margin: 0; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: var(--text-soft); }
.fin-txt { margin: 0; font-size: .9rem; color: var(--text-soft); line-height: 1.55; }
.fin-prix { margin: 0; font-size: .95rem; }
.fin-prix b { color: var(--accent); font-size: 1.15rem; }
.fin-delai { margin: 0; font-size: .84rem; color: var(--auto); background: var(--auto-bg); padding: .5rem .65rem; border-radius: var(--radius-sm); line-height: 1.45; }
.fin .btn { margin-top: auto; align-self: flex-start; }

/* ---- Bookings mis en scène ---- */
.bk-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; counter-reset: bk; }
.bk-flow li {
  display: flex; align-items: center; gap: .7rem;
  padding: .75rem .95rem; border-radius: var(--radius-sm);
  background: var(--bg-elev); border: 1px solid var(--border);
  font-size: .92rem; font-weight: 600;
}
.bk-n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: .82rem; font-weight: 800;
}

/* Réservé aux lecteurs d'écran : annonce l'ouverture dans un nouvel onglet. */
.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;
}

/* ---- Largeurs ---- */
@media (min-width: 700px) {
  .livrables { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preuves { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .sec { padding: 4rem 0; }
  /* Republiées ici : elles ne dépendaient plus que de la hauteur de fenêtre. */
  .hero2 { grid-template-columns: minmax(0, 1.5fr) 290px; gap: 2.6rem; align-items: center; }
  .manifeste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
  .cas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
  .qui { grid-template-columns: 240px minmax(0, 1fr); gap: 2.4rem; align-items: center; }
  .finance { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* L'en-tête est collant : sans cette réserve, une ancre dépose sa cible
   SOUS l'en-tête, qui en masque le titre. Vaut pour toute cible d'ancre. */
:target, [id] { scroll-margin-top: 5rem; }

/* =========================================================
   CATALOGUE DES FORMATIONS — étape 4
   ========================================================= */

/* ---- Filtres par outil ---- */
.filtres { margin: 0 0 1.6rem; }
.filtres-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--text-soft); margin-bottom: .5rem; }
.filtres-liste { display: flex; flex-wrap: wrap; gap: .35rem; }
.filtre {
  min-height: 44px; padding: .3em .8em;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--text-soft);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer;
}
.filtre:hover { border-color: var(--accent); color: var(--text); }
.filtre.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.filtres-etat { margin: .6rem 0 0; font-size: .84rem; color: var(--text-soft); min-height: 1.2em; }
.filtres-etat:empty { min-height: 0; }

/* ---- Cartes : ajouts propres au catalogue ---- */
/* Le livrable n'apparaît que sur le catalogue : c'est là qu'on compare. */
.cas-out { display: block; margin-top: .4rem; font-size: .84rem; color: var(--conf); font-weight: 600; line-height: 1.4; }

/* Formation annoncée mais pas encore ouverte : elle occupe sa place sans
   promettre un lien qui n'existe pas. */
.cas--prepa { border-style: dashed; opacity: .8; cursor: default; }
.cas--prepa:hover { transform: none; box-shadow: none; border-color: var(--border); }

/* ---- Tableau comparatif ---- */
/* Le tableau déborde en largeur sur petit écran : il défile DANS son
   conteneur, jamais la page. tabindex le rend atteignable au clavier. */
.tableau-defile { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); }
.tbl-cmp { width: 100%; border-collapse: collapse; font-size: .89rem; min-width: 46rem; }
.tbl-cmp th, .tbl-cmp td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
.tbl-cmp thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-soft); background: var(--bg-alt); white-space: nowrap; }
.tbl-cmp tbody th { font-weight: 700; white-space: nowrap; }
.tbl-cmp tbody tr:last-child th, .tbl-cmp tbody tr:last-child td { border-bottom: 0; }
.tbl-cmp tbody tr:hover { background: var(--accent-soft); }
.tbl-cmp .is-prepa { color: var(--text-soft); }
.tbl-cmp .is-prepa:hover { background: transparent; }
.tableau-defile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =========================================================
   FICHES DE FORMATION — gabarit commun, étape 7
   ========================================================= */

/* Déroulé condensé : les titres d'étapes suffisent à décider. Le détail,
   avec ses exercices, vit sur la page programme. */
.fiche-etapes { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; counter-reset: fe; }
.fiche-etapes li { display: flex; align-items: baseline; gap: .65rem; font-size: .92rem; line-height: 1.45; }
.fe-n {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: .78rem; font-weight: 800;
}

/* Questions fréquentes : <details> natif, donc utilisable au clavier et
   dépliable sans JavaScript. */
.faq { display: grid; gap: .4rem; margin-bottom: .5rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elev); }
.faq-item > summary {
  cursor: pointer; padding: .75rem .9rem; min-height: 44px;
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .92rem; list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before { content: "+"; color: var(--accent); font-weight: 800; }
.faq-item[open] > summary::before { content: "−"; }
.faq-item > summary:hover { background: var(--accent-soft); border-radius: var(--radius-sm); }
.faq-item > p { margin: 0; padding: 0 .9rem .85rem 2rem; font-size: .89rem; color: var(--text-soft); line-height: 1.55; }

/* Rappel de financement dans le rail : la fiche doit dire qui facture. */
.pan-finance { margin: 0; font-size: .8rem; color: var(--text-soft); line-height: 1.5; }

/* Le formateur, dans le rail : le visiteur veut savoir qui sera en face. */
.pan-formateur { display: flex; align-items: center; gap: .6rem; padding-top: .2rem; }
.pan-formateur img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent-soft); }
.pan-formateur p { margin: 0; display: flex; flex-direction: column; font-size: .86rem; line-height: 1.3; }
.pan-formateur span { color: var(--text-soft); font-size: .8rem; }
.pan-rail-cta { display: grid; gap: .5rem; }

/* Cibles tactiles : le plan fixe 44×44 px pour tout contrôle. Les liens en
   ligne dans une phrase en sont exemptés — les agrandir casserait
   l'interlignage du texte pour aucun bénéfice réel. */
.btn { min-height: 44px; }
.theme-toggle { min-height: 44px; min-width: 44px; }
.foot-col a:not(.btn) { min-height: 44px; }
.nav-sub > summary { min-height: 44px; }
/* Derniers contrôles sous le seuil : la marque de l'en-tête, les noms de
   formation du tableau comparatif et de la liste des livrables. Ce sont des
   liens de navigation, pas des liens en ligne dans une phrase. */
.site-brand { min-height: 44px; }
.tbl-cmp tbody th a,
.livrables a { display: inline-flex; align-items: center; min-height: 44px; }
/* Page diagnostic : les puces de rôle aux mêmes 44 px. Les raccourcis de
   thèmes sont réglés plus haut, dans .diag-jump, plus spécifique. */
.role-chip { min-height: 44px; }

/* ---- Diagnostic : polissage (étape 9) ---- */
/* Message permanent expliquant le bouton inactif. */
.diag-aide { flex: 1 1 14rem; margin: 0; font-size: .84rem; color: var(--text-soft); line-height: 1.4; }
.diag-aide[hidden] { display: none; }
/* Repli sans JavaScript : ni alarmiste, ni sans issue. */
.diag-noscript { border: 1px dashed var(--border); border-radius: var(--radius); padding: 1.2rem; }