/* 2 Minutes Max — site vitrine. Direction : reunification/DESIGN-BRIEF.md + charte officielle (sources/charte/, avril 2026) :
   titres en Lato (gras), texte en Nunito Sans ; orange = candidats, bleu nuit = entreprises, gris #444444 = neutre,
   bleu-gris #A4D4E1 = intermédiaires et partenaires (écoles, accompagnement, outplacement, cabinets), en aplat seulement.
   Deux looks seulement : Clair (par défaut) et Nuit (version choisie, ou sombre automatique du système).
   Aplats purs, sans dégradé ni ombre ; une seule famille ; orange réservé à l'action et aux accents.

   Palette Clair : #FFFFFF, surface #F4F3FA, bleu nuit #0C0557 (texte, titres, bandeaux, pied de page),
   secondaire #444444, gris de la charte (#C9C5EC sur bleu nuit), orange profond #C2410C (boutons, liens, surtitres ; survol #A8380A),
   orange de marque #F05627 (graphisme, grands chiffres), erreur #C73434. Filets : bleu nuit translucide.
   Palette Nuit : fond #0C0557, une seule surface voisine #191368 (sections alternées, cartes, bandeaux, CTA),
   blanc, lavande #C9C5EC, orange #F05627 (accents, surtitres) et #C2410C (fond des boutons), erreur #FF6961.
   Pas de bleu vif ni de jaune : les liens sont orange profond en Clair, blancs soulignés sur bleu nuit.

   Contraste AA du bouton : blanc sur l'orange de marque #F05627 = 3,46:1, insuffisant pour du texte de 17 px ;
   le fond des boutons est donc l'orange profond #C2410C (blanc 5,18:1 ; survol #A8380A 6,49:1).
   Contrastes calculés (WCAG) —
   Clair : texte #0C0557 / blanc 17,9:1, / #F4F3FA 16,2:1 ; secondaire #444444 / blanc 9,7:1, / #F4F3FA 8,9:1 ;
           lien et surtitre #C2410C / blanc 5,2:1, / #F4F3FA 4,7:1 ; grands chiffres #F05627 / blanc 3,5:1,
           / #F4F3FA 3,1:1 (texte ≥ 24 px : seuil 3:1) ; erreur #C73434 / blanc 5,3:1 ; bordure de champ 3,6:1.
   Bleu nuit (Nuit, et bandeaux du Clair) : blanc / #0C0557 17,9:1, / #191368 15,7:1 ; lavande #C9C5EC
           / #0C0557 10,8:1, / #191368 9,5:1 ; orange #F05627 / #0C0557 5,2:1, / #191368 4,55:1 ;
           bouton #C2410C contre #0C0557 3,5:1, contre #191368 3,0:1 (élément d'interface ≥ 3:1) ;
           #0C0557 sur le disque orange du chronomètre 5,2:1 ; erreur #FF6961 / #0C0557 6,3:1 ; bordure de champ 4,9:1. */

/* Polices auto-hébergées (assets/fonts/, téléchargées de Google Fonts le 28/10/2026, licence SIL OFL) : ni adresse IP des
   visiteurs transmise à Google (RGPD), ni connexion tierce. Déclarées ici plutôt que dans un fichier à part : un seul CSS
   bloquant au rendu. Lato 700/900, Nunito Sans variable 400-700 ; sous-ensembles latin et latin-ext. */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/lato-700-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/lato-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/lato-900-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("assets/fonts/lato-900-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/nunito-sans-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400 700; font-stretch: 100%; font-display: swap; src: url("assets/fonts/nunito-sans-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #FFFFFF;
  --surface: #F4F3FA;
  --band: #0C0557;
  --night: #0C0557;
  --text: #0C0557;
  /* Gris de la charte #444444 : 9,7:1 sur blanc, 8,9:1 sur #F4F3FA. */
  --text-2: #444444;
  --sep: rgba(12, 5, 87, 0.12);
  /* 50 % de bleu nuit sur blanc = 50 % de blanc sur bleu nuit = #8682AB : la même bordure dans les deux versions. */
  --field-line: rgba(12, 5, 87, 0.5);
  --accent: #F05627;
  --action: #C2410C;
  --action-hover: #A8380A;
  --error: #C73434;
  --kicker: #C2410C;
  --link: #C2410C;
  --link-deco: none;
  --focus: #C2410C;
  --hi-line: transparent;
  /* Logos clients en couleur : le fond blanc des fichiers disparaît par fusion sur fond clair ; sur bleu nuit, pastille blanche. */
  --logo-blend: multiply;
  --logo-chip: transparent;
  /* Aplats des blocs alternés (.use--tone) : bleu-gris (intermédiaires), orange pâle (candidats) ; en Nuit, la surface #191368.
     Surtitre et lien #A8380A sur ces aplats : 5,1:1 sur #D2E9F0, 5,3:1 sur #FCE3D8 (#C2410C y tomberait à 4,1-4,2:1). */
  --tone-partner: #D2E9F0;
  --tone-cand: #FCE3D8;
  --on-tint: #A8380A;
  --link-on-tint: #A8380A;
  --font: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-title: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Bleu-gris de la charte : jamais en texte sur blanc (1,6:1). Aplat clair #D2E9F0 (50 %) sous du texte bleu nuit (13:1) ;
     lien orange #C2410C dessus : 4,1:1 seulement, d'où l'orange plus sombre #A8380A sur cet aplat (5,1:1). */
  --partner: #A4D4E1;
  --partner-bg: #D2E9F0;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* Texte sur bleu nuit : toute la version Nuit, et les surfaces bleu nuit du Clair
   (hero d'accueil, bandeau +38 %, porte « pro », offre mise en avant, pied de page). */
:root[data-variant="nuit"],
:root[data-theme="dark"]:not([data-variant]),
.hero--home, .section--night, .foot, .door--pro, .plan--hi, .tile--pro,
main:not(.aud-partner):not(.aud-candidat) .use--tone {
  --text: #FFFFFF;
  --text-2: #C9C5EC;
  --sep: rgba(255, 255, 255, 0.16);
  --kicker: #F05627;
  --link: #FFFFFF;
  --link-deco: underline;
  --focus: #FFFFFF;
  --logo-blend: normal;
  --logo-chip: #FFFFFF;
  --on-tint: #F05627;
  --link-on-tint: #FFFFFF;
  color: var(--text);
}
/* Version Nuit : choisie (data-variant="nuit", build de démo) ou thème sombre de l'hôte Artifact. */
:root[data-variant="nuit"],
:root[data-theme="dark"]:not([data-variant]) {
  --bg: #0C0557;
  --surface: #191368;
  --band: #191368;
  --field-line: rgba(255, 255, 255, 0.5);
  --error: #FF6961;
  --hi-line: #F05627;
  --tone-partner: #191368;
  --tone-cand: #191368;
  color-scheme: dark;
}
/* Sombre automatique de la production (sans data-variant) = la version Nuit.
   Copie conforme des deux blocs ci-dessus : une media query ne peut pas partager leur sélecteur.
   Toute modification d'un côté se reporte de l'autre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-variant]) {
    --text: #FFFFFF;
    --text-2: #C9C5EC;
    --sep: rgba(255, 255, 255, 0.16);
    --kicker: #F05627;
    --link: #FFFFFF;
    --link-deco: underline;
    --focus: #FFFFFF;
    --bg: #0C0557;
    --surface: #191368;
    --band: #191368;
    --field-line: rgba(255, 255, 255, 0.5);
    --error: #FF6961;
    --hi-line: #F05627;
    --logo-blend: normal;
    --logo-chip: #FFFFFF;
    --on-tint: #F05627;
    --link-on-tint: #FFFFFF;
    --tone-partner: #191368;
    --tone-cand: #191368;
    color-scheme: dark;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-family: var(--font-title); font-weight: 700; text-wrap: balance; }
h1 { font-weight: 900; }
h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -0.02em; }
h3 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
::selection { background: rgba(240, 86, 39, 0.22); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 980px; background: var(--text); color: var(--bg); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1100px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.wrap--text { max-width: 760px; margin-inline: auto; }
.wrap--form { max-width: 560px; }
.center { text-align: center; }

.lead { font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: var(--text-2); letter-spacing: -0.015em; text-wrap: pretty; }
.kicker { font-size: 17px; font-weight: 600; color: var(--kicker); margin-bottom: 12px; }
.caption { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-2); margin-bottom: 40px; }
.note { font-size: 14px; color: var(--text-2); letter-spacing: 0; margin: 40px 0 0; text-wrap: pretty; }
.video-note { margin-top: 12px; }
.note a, .lead a, .prose a, .faq-a a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Actions ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; margin-top: 36px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border: 0; border-radius: 980px;
  background: var(--action); color: #FFFFFF;
  font: inherit; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color 0.2s ease;
}
.btn:hover { background: var(--action-hover); }
.btn--lg { min-height: 52px; padding: 0 30px; }
.btn--sm { min-height: 32px; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; }
/* Lien « En savoir plus › » : orange profond sur fond clair, blanc souligné sur bleu nuit. */
.more { font-weight: 500; color: var(--link); text-decoration: var(--link-deco); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.more:hover { text-decoration: underline; }

/* ---------- Barre de navigation ---------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--sep);
}
.bar-in { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; }
/* Logo officiel (image) : version fond clair ou fond bleu selon la surface ; voir aussi le bloc « Logos » plus bas. */
.brand { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand .logo { display: block; width: auto; height: 36px; }
.nav ul { display: flex; align-items: center; gap: 30px; margin: 0; padding: 0; list-style: none; }
.nav a { font-size: 14px; text-decoration: none; color: var(--text); opacity: 0.8; transition: opacity 0.2s ease; }
/* aria-current="page" sur la page de rubrique, "true" sur ses sous-pages : même rendu. */
.nav a:hover, .nav a[aria-current] { opacity: 1; }
.nav a[aria-current] { font-weight: 600; }
.nav-login { display: none !important; }
.login { font-size: 14px; text-decoration: none; opacity: 0.8; margin-left: 30px; margin-right: 8px; }
.login:hover { opacity: 1; }
/* Desktop : barre un peu plus haute et marque un peu plus présente. */
@media (min-width: 900px) {
  html { scroll-padding-top: 88px; }
  .bar-in { min-height: 68px; }
  .brand .logo { height: 44px; }
  .nav a, .login { font-size: 15px; }
}
.burger { display: none; }

/* Sous-menu « Professionnels » (markup : lib.mjs subMenu, chevron : main.js). Grand écran : panneau en aplat sous la barre,
   ouvert au survol, au focus clavier ou par le chevron ; un pont invisible (::before) couvre l'écart sous le lien. */
.has-sub { position: relative; }
.sub-btn { display: none; }
.sub-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); }
.sub-ico svg { width: 18px; height: 18px; fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html:not(.js) .nav .sub { display: none; }

@media (min-width: 861px) {
  /* Menu dans le flux, calé à droite contre « Connexion » : centré (absolu), il chevauchait « Connexion » en FR à toutes
     les largeurs, la barre plafonnant à la largeur du contenu (constaté le 25/10). */
  .login { margin-left: 24px; }
  .has-sub { display: flex; align-items: center; gap: 2px; }
  html.js .sub-btn {
    display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px;
    background: none; color: var(--text); opacity: 0.8; cursor: pointer;
  }
  .sub-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s ease; }
  .nav .sub {
    display: none; position: absolute; top: 100%; left: 50%; z-index: 60; transform: translateX(-50%);
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: 600px; margin-top: 24px; padding: 10px;
    background: var(--bg); border: 1px solid var(--sep); border-radius: 18px;
  }
  .nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -25px; height: 25px; }
  html .has-sub:hover .sub, html .has-sub.open .sub { display: grid; }
  /* Focus clavier seulement (un clic de souris sur le chevron doit pouvoir refermer) ; règle à part : un navigateur sans :has()
     ignorerait toute la liste de sélecteurs. */
  html .has-sub:has(:focus-visible) .sub { display: grid; }
  .has-sub:hover .sub-btn svg, .has-sub.open .sub-btn svg { transform: rotate(180deg); }
  .nav .sub a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 15px; font-weight: 500; opacity: 1; }
  .nav .sub a:hover, .nav .sub a[aria-current] { background: var(--surface); }
}

@media (max-width: 860px) {
  .login { display: none; }
  .nav-login { display: list-item !important; }
  html.js .burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; background: none; color: var(--text); cursor: pointer;
  }
  .burger span, .burger span::before { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
  .burger span { position: relative; background: none; height: 8px; }
  .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
  .burger span::before { top: 0; }
  .burger span::after { bottom: 0; }
  html.menu-open .burger span::before { transform: translateY(3.25px) rotate(45deg); }
  html.menu-open .burger span::after { transform: translateY(-3.25px) rotate(-45deg); }

  html.js .nav {
    display: none; position: fixed; inset: 53px 0 0 0; z-index: 49;
    background: var(--bg); overflow-y: auto;
    padding: 24px var(--gutter-r) 40px var(--gutter-l);
  }
  html.menu-open .nav { display: block; }
  html.menu-open { overflow: hidden; }
  html.js .nav ul { flex-direction: column; align-items: stretch; gap: 0; max-width: 1100px; margin: 0 auto; }
  html.js .nav a { display: block; padding: 10px 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; opacity: 1; }
  html.js .nav-login a { font-size: 17px; font-weight: 500; color: var(--text-2); margin-top: 16px; }
  /* Menu mobile : les huit usages toujours dépliés sous « Professionnels ». */
  html.js .nav .sub { display: grid; gap: 0; margin: 0 0 12px; padding: 0; }
  html.js .nav .sub a { display: flex; align-items: center; gap: 12px; padding: 7px 0; font-size: 17px; font-weight: 500; letter-spacing: 0; }
  html.js .nav .sub-ico { width: 28px; height: 28px; }
  html.js .nav .sub-ico svg { width: 16px; height: 16px; }

  /* Sans JavaScript : les liens restent visibles sur une seconde ligne. */
  html:not(.js) .bar-in { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  html:not(.js) .nav { order: 5; width: 100%; }
  html:not(.js) .nav ul { flex-wrap: wrap; gap: 6px 20px; }
}
.logo--dark { display: none !important; }
:root[data-variant="nuit"] .bar .logo--light, :root[data-theme="dark"]:not([data-variant]) .bar .logo--light { display: none !important; }
:root[data-variant="nuit"] .bar .logo--dark, :root[data-theme="dark"]:not([data-variant]) .bar .logo--dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-variant]) .bar .logo--light { display: none !important; }
  :root:not([data-theme="light"]):not([data-variant]) .bar .logo--dark { display: block !important; }
}
/* Bouton de la barre : « Je crée mon compte 2’MAX » raccourci sur mobile, faute de place à côté de la marque. */
@media (max-width: 479px) { .bar .cta-x { display: none; } }

/* Sélecteur de langue (lib.mjs langLinks) : <details> natif dans la barre sur grand écran, ligne de pastilles dans le
   menu mobile (.nav-lang). Pas de JavaScript. */
.nav-lang { display: none !important; }
.langs { position: relative; margin-left: 24px; font-size: 14px; }
.langs summary { display: flex; align-items: center; gap: 6px; padding: 6px 2px; list-style: none; cursor: pointer; opacity: 0.8; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: ""; width: 5px; height: 5px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.langs summary:hover, .langs[open] summary { opacity: 1; }
.langs-menu {
  position: absolute; top: 100%; right: -10px; z-index: 60; display: grid; gap: 2px; min-width: 170px; margin-top: 14px; padding: 6px;
  background: var(--bg); border: 1px solid var(--sep); border-radius: 14px;
}
.langs-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--text); font-size: 15px; text-decoration: none; }
.langs-menu a:hover, .langs-menu a[aria-current] { background: var(--surface); }
.langs-menu a[aria-current] { font-weight: 600; }
.langs abbr { width: 22px; color: var(--text-2); text-decoration: none; }
@media (min-width: 900px) { .langs { font-size: 15px; } }
@media (max-width: 1099px) { .langs { display: none; } }
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-langs abbr { display: none; }
.foot-langs a[aria-current] { font-weight: 700; text-decoration: none; }
@media (max-width: 860px) {
  .langs { display: none; }
  .nav-lang { display: flex !important; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  html .nav .nav-lang a { display: block; padding: 6px 14px; border: 1px solid var(--sep); border-radius: 980px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
  .nav-lang abbr { text-decoration: none; }
  .nav-lang .lang-name { display: none; }
  html .nav .nav-lang a[aria-current] { background: var(--text); color: var(--bg); border-color: var(--text); }
}

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 10vw, 160px); }
.section--tight { padding-block: clamp(48px, 6vw, 96px); }
/* Deux sections blanches qui se suivent sans changer de sujet (accueil : sécurité puis vidéo BFM, Nicolas 22/10) :
   l'écart entre elles est ramené à celui d'une section serrée. */
.section--joined { padding-bottom: clamp(48px, 6vw, 96px); }
.section--joined + .section { padding-top: 0; }
.section--flush { padding-top: 0; }
.section--alt { background: var(--surface); }
.section--night { background: var(--band); }
.section--night h2 { font-size: clamp(28px, 3.6vw, 40px); }
/* Aplat bleu-gris des publics intermédiaires, pour un bloc qui doit ressortir (accueil : sécurité, Nicolas 24/10). */
.section--tint { background: var(--tone-partner); --kicker: var(--on-tint); --link: var(--link-on-tint); }
/* Accueil moins aéré (Nicolas, 24/10 : « on doit beaucoup scroller ») : sections et bandeau de logos resserrés. */
.hero--home ~ .section { padding-block: clamp(48px, 6vw, 96px); }
.hero--home ~ .logo-band { padding-block: clamp(36px, 4vw, 56px); }

.hero { padding-top: clamp(72px, 11vw, 150px); padding-bottom: clamp(64px, 9vw, 120px); }
.hero .lead { margin: 20px auto 0; max-width: 640px; }
.hero--page {
  padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(48px, 7vw, 96px);
}

/* ---------- Hero de l'accueil (markup : _build/pages/index.mjs, animation : main.js) ----------
   Fond : capture de l'espace professionnel (img.hero-bg) sous un voile bleu nuit en aplat à 88 %.
   Contraste vérifié sur la zone la plus claire de la capture (blanc pur) : voile = #2A2369, texte blanc 13,8:1,
   lavande #C9C5EC 7,6:1, orange #F05627 (titre ≥ 36 px) 3,6:1.
   Minuteur : logo officiel « sans texte » (image intacte) sur disque blanc, anneau orange fin autour.
   État par défaut = état final (anneau plein, 02:00) ; l'état « en cours » n'existe qu'avec html.js. */
.hero--home {
  position: relative; overflow: hidden; isolation: isolate;
  padding-top: clamp(28px, 6vw, 88px); padding-bottom: clamp(48px, 7vw, 96px);
  background: var(--night);
}
.hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero--home::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(12, 5, 87, 0.88); }
.hero-grid { display: grid; grid-template-areas: "sw" "copy"; gap: 28px; justify-items: center; text-align: center; }
.hero-copy { grid-area: copy; max-width: 640px; }
.hero--home .hl { color: var(--accent); }
.hero--home .lead { margin: 20px auto 0; }
.hero--home .actions { margin-top: 32px; }

.sw { grid-area: sw; position: relative; width: min(56vw, 220px); }
.sw svg { display: block; width: 100%; height: auto; overflow: visible; }
.sw-track { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 4; }
.sw-arc { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 120 120; stroke-dashoffset: 0; }
.sw-pulse { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0; transform-origin: 100px 100px; }
.sw-disc { position: absolute; left: 50%; top: 0; width: 84%; aspect-ratio: 1; margin-top: 8%; transform: translateX(-50%); display: grid; place-items: center; border-radius: 50%; background: #FFFFFF; }
.sw-logo { width: 58%; height: auto; }
.sw-face { margin: 14px 0 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.sw-time { font-family: var(--font-title); font-size: 30px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; }
.sw-max { font-size: 14px; font-weight: 600; color: #C9C5EC; }
.sw-rec { display: none; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; }
.sw-rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); grid-template-areas: "copy sw"; align-items: center; justify-items: stretch; column-gap: 40px; text-align: left; }
  .hero-copy { max-width: none; }
  .hero--home .lead { margin-left: 0; max-width: 520px; }
  .hero--home .actions { justify-content: flex-start; }
  .sw { width: min(100%, 340px); justify-self: center; }
  .sw-time { font-size: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .hero--home:not(.is-done) .sw-arc { stroke-dashoffset: 120; }
  html.js .hero--home:not(.is-done) .sw-rec { display: inline-flex; }
  .sw-rec::before { animation: rec 1.1s steps(2, jump-none) infinite; }
  .hero--home.is-done .sw-pulse { animation: sw-pulse 1.6s var(--ease) 1; }
  .hero--home.is-done .sw-disc { animation: sw-pop 0.7s var(--ease) 1; }
  html.js .hero-copy > * { animation: rise 0.9s var(--ease) both; }
  html.js .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
  html.js .hero-copy > :nth-child(3) { animation-delay: 0.16s; }
  html.js .hero-copy > :nth-child(4) { animation-delay: 0.24s; }
}
@keyframes rec { 50% { opacity: 0.15; } }
@keyframes sw-pulse { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
@keyframes sw-pop { 40% { transform: translateX(-50%) scale(1.03); } }

/* Image produit */
.shot figure { margin: 0; }
.shot img { width: 100%; border-radius: 20px; }
.shot figcaption { margin-top: 20px; text-align: center; font-size: 14px; color: var(--text-2); letter-spacing: 0; }

/* Trois colonnes de texte, sans cartes ni ornement */
.trio { display: grid; gap: 40px; margin: 56px 0 0; padding: 0; list-style: none; }
.trio h3 { margin-bottom: 8px; }
.trio p { margin: 0; color: var(--text-2); }
.trio .role { font-size: 14px; letter-spacing: 0; margin: -4px 0 10px; }
.trio--num { counter-reset: n; }
.trio--num li { counter-increment: n; }
.trio--num li::before { content: counter(n); display: block; margin-bottom: 14px; font-size: 40px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
/* Étapes en tuiles (steps({ cards }), lib.mjs) : tuiles bleu-gris des usages sur bandeau bleu nuit, numéro blanc en
   pastille orange (20 px gras : grand texte, 3,5:1 suffit). Les tuiles ne sont pas des liens : pas de soulignement au survol. */
.steps--cards .trio { gap: 16px; }
@media (min-width: 760px) { .steps--cards .trio { gap: 20px; } }
.steps--cards .trio--num li::before { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 6px; border-radius: 50%; background: var(--accent); color: #FFFFFF; font-family: var(--font-title); font-size: 20px; font-weight: 700; letter-spacing: 0; }
.steps--cards .tile h3 { margin: 0; }
.steps--cards .tile:hover h3 { text-decoration: none; }
/* Témoignages courts en colonnes (« Ils ont trouvé », accompagnement-emploi) : filet orange en aplat à gauche. */
.trio--quotes figure { margin: 0; padding-left: 20px; border-left: 4px solid var(--accent); }
.trio--quotes blockquote { margin: 0; }
.trio--quotes blockquote p { margin: 0; font-family: var(--font-title); font-size: 21px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.trio--quotes figcaption { margin-top: 14px; font-size: 15px; color: var(--text-2); }

/* +38 % */
.stat { font-family: var(--font-title); margin: 0; font-size: clamp(96px, 21vw, 220px); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--accent); }
.stat-text { font-size: clamp(22px, 2.8vw, 30px) !important; line-height: 1.3; font-weight: 600; max-width: 620px; margin: 28px auto 0; }
.section--night .note { margin-top: 20px; }

/* Choix à deux entrées */
.duo { display: grid; gap: 16px; margin-top: 56px; }
@media (min-width: 720px) { .duo { grid-template-columns: 1fr 1fr; gap: 20px; } }
/* Deux tuiles en aplat : contenu centré verticalement, pictogramme + texte + une action principale et un lien. */
.door {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px;
  min-height: clamp(260px, 26vw, 340px); padding: clamp(28px, 4vw, 48px); border-radius: 22px;
  background: var(--surface); color: var(--text);
}
.door--pro { background: var(--band); }
.door-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--accent); }
.door-ico svg { width: 24px; height: 24px; fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.door-k { font-family: var(--font-title); margin: 0; font-size: clamp(26px, 2.8vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.door-t { margin: 0; max-width: 420px; color: var(--text-2); line-height: 1.5; }
.door-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }

/* Logos clients en couleur : fond blanc fondu sur fond clair, pastille blanche sur bleu nuit (--logo-chip). */
.logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px clamp(24px, 4vw, 48px); margin: 0; padding: 0; list-style: none; }
.logos li { padding: 8px 12px; border-radius: 12px; background: var(--logo-chip); }
.logos img { height: calc(var(--h, 40) * 1px); width: auto; mix-blend-mode: var(--logo-blend); }
.logo-band .caption { margin-bottom: 28px; }

/* Témoignage, suivi des logos clients dans la même section */
.quote { margin: 0 0 24px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: var(--font-title); margin: 0; font-size: clamp(26px, 3.6vw, 40px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.quote figcaption { margin-top: 20px; color: var(--text-2); }
.proof .caption { margin: clamp(64px, 8vw, 112px) 0 32px; }

/* CTA final : aplat de surface (section--alt) */
.cta .lead { margin: 16px auto 0; }

/* ---------- Offres ---------- */
.plans { display: grid; gap: 16px; margin: 56px auto 0; }
.plans--2 { max-width: 860px; }
@media (min-width: 720px) { .plans--2 { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 900px) { .plans--3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.plan { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3.4vw, 40px); border-radius: 22px; background: var(--surface); }
/* Offre mise en avant : aplat bleu nuit en Clair ; en Nuit, même surface que les autres cartes, cernée d'orange. */
.plan--hi { background: var(--band); border: 2px solid var(--hi-line); }
.plan-name { font-size: 21px; }
.price { font-family: var(--font-title); margin: 14px 0 24px; font-size: clamp(40px, 4.4vw, 48px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price small { display: block; margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--text-2); }
.price .from { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-2); margin-right: 6px; }
.plan ul { margin: 0 0 28px; padding: 0; list-style: none; color: var(--text-2); }
.plan li + li { margin-top: 8px; }
.plan > .btn, .plan > .more { margin-top: auto; }
.plan > .more { min-height: 44px; display: inline-flex; align-items: center; }

.extras { max-width: 860px; margin: 40px auto 0; }
.extras div { display: grid; grid-template-columns: 1fr auto; gap: 2px 24px; padding: 18px 0; border-top: 1px solid var(--sep); }
.extras div:last-child { border-bottom: 1px solid var(--sep); }
.extras dt { font-weight: 600; }
.extras dd { margin: 0; color: var(--text-2); grid-column: 1; }
.extras .extras-p { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 559px) {
  .extras div { grid-template-columns: 1fr; }
  .extras .extras-p { grid-column: 1; grid-row: auto; text-align: left; margin-top: 4px; }
}

/* Sélecteur segmenté (onglets avec JS, liens d'ancre sans JS) : l'onglet actif prend les couleurs inversées. */
.seg-wrap { display: flex; justify-content: center; margin-bottom: 8px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 980px; background: var(--surface); max-width: 100%; }
.seg a { padding: 8px 18px; border-radius: 980px; font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: background-color 0.2s ease, color 0.2s ease; }
.seg a:hover { color: var(--text); }
.seg a[aria-selected="true"] { background: var(--text); color: var(--bg); }
@media (max-width: 400px) { .seg a { padding: 8px 13px; font-size: 14px; } }
.panel { padding-top: 48px; }
.panel .plans { margin-top: 32px; }
.panel-h { text-align: center; font-size: clamp(28px, 3.4vw, 36px); }
html.js .panel-h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.js .panel .plans { margin-top: 0; }
.panel[hidden] { display: none; }

/* ---------- Professionnels ---------- */
.jump { margin-top: 44px; }
.jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 980px; background: var(--surface); font-size: 14px; font-weight: 500; text-decoration: none; }
.jump a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Les cinq usages se suivent sur le même fond, séparés par un filet. */
.use { padding-block: clamp(56px, 7vw, 104px); }
.use + .use { padding-top: 0; }
.use + .use .use-in { padding-top: clamp(56px, 7vw, 104px); border-top: 1px solid var(--sep); }
/* Un bloc sur deux en aplat (classe posée par layout(), lib.mjs) : bleu nuit par défaut (entreprises), bleu-gris sur les
   pages des intermédiaires, orange pâle sur celles des candidats. Deux blocs voisins changent donc toujours de fond :
   ni filet entre eux, ni marge supprimée. */
.use--tone { background: var(--band); }
.aud-partner .use--tone { background: var(--tone-partner); }
.aud-candidat .use--tone { background: var(--tone-cand); }
.aud-partner .use--tone, .aud-candidat .use--tone { --kicker: var(--on-tint); --link: var(--link-on-tint); }
.use + .use.use--tone, .use--tone + .use { padding-top: clamp(56px, 7vw, 104px); }
.use + .use.use--tone .use-in, .use--tone + .use .use-in { padding-top: 0; border-top: 0; }
.use-in { display: grid; gap: 20px; }
@media (min-width: 900px) { .use-in { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }
.use h2 { font-size: clamp(30px, 3.4vw, 40px); }
.use .lead { margin-bottom: 0; }
.points { margin: 24px 0; padding: 0; list-style: none; }
.points li { padding: 12px 0; border-top: 1px solid var(--sep); }
.points li:last-child { border-bottom: 1px solid var(--sep); }
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }

/* ---------- Pages internes (gabarit : _build/lib.mjs, pageHero / appBlock / block / related) ---------- */
.hero--page .kicker a { color: inherit; text-decoration: none; }
.hero--page .kicker a:hover { text-decoration: underline; text-underline-offset: 3px; }
.use-body > p:not(.lead) { color: var(--text-2); margin: 20px 0 0; }
.use-body .lead + p { margin-top: 20px; }
.use-body > .links { margin-top: 24px; }
.use-body strong { color: var(--text); font-weight: 600; }
/* Citation courte dans un bloc d'usage de l'accueil (Sara, Matthieu) : à la place des grands témoignages (Nicolas, 23/10). */
.use-quote { margin: 28px 0 0; padding-left: 20px; border-left: 3px solid var(--accent); }
.use-quote blockquote { margin: 0; }
.use-quote blockquote p { margin: 0; font-family: var(--font-title); font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.use-quote figcaption { margin-top: 10px; font-size: 14px; color: var(--text-2); letter-spacing: 0; }
/* Sous-titres dans un bloc (ex. « Les publics » / « Les structures » d'accompagnement-emploi). */
.use-body .points + .sub { margin-top: 40px; }
.use-body .sub + .points { margin-top: 12px; }
/* Bloc « Dans la plateforme » : texte et capture côte à côte en grand écran. */
.split { display: grid; gap: 40px; }
@media (min-width: 900px) { .split { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; } }
.split figure { margin: 0; }
.split img { width: 100%; border-radius: 20px; }
.split figcaption { margin-top: 16px; font-size: 14px; color: var(--text-2); letter-spacing: 0; }
.related .caption { margin-bottom: 20px; }
.related .links { justify-content: center; }

/* Pages des intermédiaires et partenaires (main.aud-partner) : bleu-gris de la charte en aplat. */
.aud-partner .hero--page { background: var(--partner-bg); --link: #A8380A; }
.aud-partner .hero--page .kicker { color: var(--text); }
:root[data-variant="nuit"] .aud-partner .hero--page, :root[data-theme="dark"]:not([data-variant]) .aud-partner .hero--page { background: var(--surface); border-bottom: 4px solid var(--partner); --link: #FFFFFF; }
:root[data-variant="nuit"] .aud-partner .hero--page .kicker, :root[data-theme="dark"]:not([data-variant]) .aud-partner .hero--page .kicker { color: var(--partner); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-variant]) .aud-partner .hero--page { background: var(--surface); border-bottom: 4px solid var(--partner); --link: #FFFFFF; }
  :root:not([data-theme="light"]):not([data-variant]) .aud-partner .hero--page .kicker { color: var(--partner); }
}
/* Tuiles des partenaires (hub Professionnels). « .tile.tile--partner » : .tile, déclaré plus bas, écrasait l'aplat à
   spécificité égale, et en Nuit le texte bleu nuit restait sur la surface bleu nuit (1,1:1, retour de Nicolas du 18/10).
   Clair : aplat bleu-gris, texte bleu nuit (13:1). Nuit : bleu nuit #0C0557 cerné de bleu-gris (le bloc des usages est
   sur la surface #191368), titre blanc (17,9:1), surtitre bleu-gris #A4D4E1 (10,8:1), texte lavande (10,8:1). */
.tile.tile--partner { background: var(--partner-bg); color: #0C0557; }
.tile.tile--partner .kicker { color: #0C0557; }
.tile.tile--partner p:last-child { color: #2B2B2B; }
:root[data-variant="nuit"] .tile.tile--partner, :root[data-theme="dark"]:not([data-variant]) .tile.tile--partner { background: var(--night); color: var(--text); border: 2px solid var(--partner); }
:root[data-variant="nuit"] .tile.tile--partner .kicker, :root[data-theme="dark"]:not([data-variant]) .tile.tile--partner .kicker { color: var(--partner); }
:root[data-variant="nuit"] .tile.tile--partner p:last-child, :root[data-theme="dark"]:not([data-variant]) .tile.tile--partner p:last-child { color: var(--text-2); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-variant]) .tile.tile--partner { background: var(--night); color: var(--text); border: 2px solid var(--partner); }
  :root:not([data-theme="light"]):not([data-variant]) .tile.tile--partner .kicker { color: var(--partner); }
  :root:not([data-theme="light"]):not([data-variant]) .tile.tile--partner p:last-child { color: var(--text-2); }
}

/* Hub Professionnels : une tuile par page métier, toute la tuile est cliquable (lien étiré sur le titre). */
.tiles { display: grid; gap: 16px; margin: 56px 0 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1000px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 32px); border-radius: 22px; background: var(--surface); }
.tile .kicker { margin: 0; font-size: 14px; }
.tile h3 a { text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.tile h3 a:focus-visible { outline: none; }
.tile:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
.tile:hover h3 { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tile p:last-child { margin: 0; color: var(--text-2); }

/* Bloc des usages (accueil, hub Professionnels ; markup : lib.mjs usagesSection). Une couleur par public, en aplat :
   bleu nuit pour les entreprises et organisateurs (.tile--pro, texte blanc 17,9:1, surtitre orange 5,2:1), bleu-gris pour
   les intermédiaires et écoles (.tile--partner, plus haut). Pictogramme blanc sur pastille orange #F05627 (3,5:1, élément
   graphique) et, en filigrane, le même pictogramme en grand, en trait d'une seule teinte : aucun dégradé ni ombre. */
.tile--pro { background: var(--night); }
/* isolation + z-index -1 : le filigrane passe sous le texte sans rendre les enfants positionnés (le lien du titre reste étiré sur la tuile). */
.tiles--usages .tile { overflow: hidden; isolation: isolate; min-height: 220px; }
@media (max-width: 639px) { .tiles--usages .tile { min-height: 0; } }
.tile-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; background: var(--accent); }
.tile-ico svg { width: 24px; height: 24px; fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tile-bg { position: absolute; right: -22px; bottom: -22px; width: 116px; height: 116px; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; z-index: -1; }
.tile--pro .tile-bg { stroke: #221B6C; }
.tile--partner .tile-bg { stroke: #BCDFE9; }
:root[data-variant="nuit"] .tile--partner .tile-bg, :root[data-theme="dark"]:not([data-variant]) .tile--partner .tile-bg { stroke: #1F2A6E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-variant]) .tile--partner .tile-bg { stroke: #1F2A6E; }
}

/* Photos (dossier de Nicolas, 19/10) : visuel sous le titre des blocs « titre à gauche, texte à droite »,
   rangées de photos, portraits de l'équipe. Aplats : coins arrondis, sans ombre ni filtre. */
.use-visual { margin: 28px 0 0; }
.use-visual img { width: 100%; border-radius: 20px; }
@media (max-width: 899px) { .use-visual img { max-width: 520px; } }
/* Grand écran : la photo sous le titre ne dépasse jamais le texte d'à côté (Nicolas, 22/10 : une photo plus haute que le
   texte décale tout). contain: size retire la photo du calcul de hauteur de la rangée, qui suit donc le texte ; la photo
   occupe la place restante sous le titre, réduite sans être recadrée, avec un plancher de 160 px quand le texte est court.
   Si elle dépasse encore nettement, on la retire du bloc (Nicolas : « sinon on n’en mettra pas »).
   Limité aux blocs (.use-in) : dans un article, la même figure n'a pas de colonne flexible, contain: size l'écrasait
   à 160 px et la photo débordait sur le texte (Nicolas, 23/10, photo de Matthieu). */
@media (min-width: 900px) {
  .use-in > div:first-child { display: flex; flex-direction: column; align-self: stretch; }
  .use-in figure.use-visual { flex: 1 1 auto; min-height: 160px; contain: size; }
  .use-in figure.use-visual img { width: auto; max-width: 100%; height: auto; max-height: 100%; }
}
/* Aperçu vidéo sous le titre (block({ side }), vidéo de Lina) : aligné à gauche comme les photos. */
.use-visual .video { margin: 0; }
/* Plus étroit que le lecteur pleine colonne, pour rester à hauteur du texte voisin (même règle que les photos). */
@media (min-width: 900px) { .use-visual .video { max-width: 320px; } .use-visual .video--v { max-width: 220px; } }
.use-visual .video-alt { text-align: left; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gallery li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .gallery li:last-child:nth-child(odd) { grid-column: auto; } }
.gallery figure { margin: 0; }
.gallery img { width: 100%; border-radius: 18px; }
.gallery figcaption { margin-top: 10px; font-size: 14px; color: var(--text-2); letter-spacing: 0; }
.team .portrait { width: 140px; height: 140px; margin-bottom: 18px; border-radius: 50%; object-fit: cover; }
.story-photo { margin: 32px 0; }
.story-photo img { width: 100%; border-radius: 20px; }
.story-photo figcaption { margin-top: 12px; font-size: 14px; color: var(--text-2); letter-spacing: 0; }
/* Visuel vertical (capture de téléphone, post LinkedIn) : pas en pleine largeur de l'article. */
.story-photo--small img { max-width: 360px; }
/* Logo du client d'une étude de cas (caseLogo) : pastille blanche, lisible sur fond clair comme sur bleu nuit. */
img.case-logo { display: inline-block; width: auto; height: 40px; padding: 10px 16px; border-radius: 12px; background: #fff; box-sizing: content-box; }
.use-visual img.case-logo { width: auto; border-radius: 12px; }
.quote img.case-logo { margin-bottom: 24px; }

/* Listes datées : articles du blog, parutions presse. */
.posts { margin: 0; padding: 0; list-style: none; }
.posts li { padding: 24px 0; border-top: 1px solid var(--sep); }
.posts li:last-child { border-bottom: 1px solid var(--sep); }
.posts .meta { margin: 0 0 6px; font-size: 14px; color: var(--text-2); letter-spacing: 0; }
.posts h2, .posts h3 { font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; }
.posts h2 a, .posts h3 a { text-decoration: none; }
.posts h2 a:hover, .posts h3 a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.posts p:last-child { margin: 8px 0 0; color: var(--text-2); }
.posts-group + .posts-group { margin-top: 72px; }
.posts-group > h2 { font-size: clamp(24px, 2.6vw, 28px); margin-bottom: 12px; }

/* Accueil : sécurité pour les deux publics (deux colonnes de points). */
.duo-text { display: grid; gap: 40px; margin-top: 56px; }
@media (min-width: 760px) { .duo-text { grid-template-columns: 1fr 1fr; gap: 64px; } }
.duo-text h3 { margin-bottom: 4px; }
.duo-text .points { margin: 12px 0 0; }

/* ---------- Vidéo : façade « clic pour lire » (markup : _build/lib.mjs videoSection, lecteur : main.js) ----------
   Rien de Vimeo ni de YouTube n'est chargé avant le clic. Aplat --band (bleu nuit en Clair, #191368 en Nuit), 16:9 réservé pour la
   façade comme pour le lecteur (aucun décalage). Titre blanc / #0C0557 17,9:1, / #191368 15,7:1 ; durée lavande ≥ 9,5:1 ;
   bouton #C2410C, triangle blanc 5,2:1. Le lien « Voir la vidéo sur Vimeo » reste affiché : repli si l'iframe est bloquée. */
.video { max-width: 880px; margin: 48px auto 0; }
.video-box, .video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 20px; background: var(--band); }
/* Vignette (copie locale, demande de Nicolas du 20/10) en plein cadre ; bouton orange au centre ; titre et durée sur une
   étiquette bleu nuit opaque en bas à gauche, lisible quelle que soit l'image (blanc / #0C0557 17,9:1, lavande 10,8:1). */
.video-box {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: #FFFFFF;
}
.video-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.video-ico { display: grid; place-items: center; width: clamp(56px, 8vw, 80px); aspect-ratio: 1; border-radius: 50%; background: var(--action); transition: background-color 0.2s ease; }
.video-ico svg { width: 40%; height: auto; margin-left: 6%; fill: #FFFFFF; }
.video-box:hover .video-ico { background: var(--action-hover); }
.video-cap {
  position: absolute; left: clamp(10px, 2vw, 20px); bottom: clamp(10px, 2vw, 20px); max-width: min(520px, calc(100% - 2 * clamp(10px, 2vw, 20px)));
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 14px; border-radius: 12px; background: #0C0557; text-align: left;
}
.video-t { font-family: var(--font-title); font-size: clamp(15px, 1.8vw, 20px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.video-d { font-size: 13px; letter-spacing: 0; color: #C9C5EC; }
@media (max-width: 479px) { .video:not(.video--v) .video-d { display: none; } }
.video-alt { margin: 16px 0 0; text-align: center; font-size: 15px; }
.video--wide { max-width: none; }
/* Vidéo verticale (9:16, ex. témoignage de Lina) : étroite pour rester dans un écran de téléphone. */
.video--v { max-width: 300px; }
.video--v .video-box, .video--v iframe { aspect-ratio: 9 / 16; }
/* Lecteur placé dans un bloc existant (témoignage, étude de cas) plutôt que dans sa propre section. */
.use-body .video { margin: 32px 0 0; }
.proof .video { margin: 8px auto 0; }

/* ---------- FAQ ---------- */
.faq-group + .faq-group { margin-top: 72px; }
.faq-group h2 { font-size: clamp(24px, 2.6vw, 28px); margin-bottom: 12px; }
.faq details { border-bottom: 1px solid var(--sep); }
.faq summary { position: relative; list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.5px; background: var(--text-2); transition: transform 0.3s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover::before, .faq summary:hover::after { background: var(--text); }
.faq-a { padding: 0 0 24px; color: var(--text-2); }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a ul { margin: 0 0 1em; padding-left: 20px; }
.faq-a strong { color: var(--text); font-weight: 600; }

/* ---------- Contact ---------- */
.mail { margin: 28px 0 0; font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.02em; user-select: all; -webkit-user-select: all; }
.form { display: grid; gap: 20px; }
.field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--field-line); border-radius: 12px;
  background: var(--bg); color: var(--text); font: inherit;
}
.field textarea { resize: vertical; min-height: 140px; }
/* Chevron #8682AB : la teinte de --field-line, lisible sur blanc (3,6:1) comme sur bleu nuit (4,9:1). */
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238682AB' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--error); }
.err { display: block; margin-top: 6px; font-size: 14px; color: var(--error); }
.err:empty { display: none; }
.form .btn { margin-top: 8px; }
.form-status { margin: 0; padding: 16px 20px; border-radius: 12px; background: var(--surface); }

/* ---------- Mentions légales ---------- */
.prose h2 { font-size: 24px; margin: 48px 0 16px; }
.prose dl { display: grid; gap: 4px 24px; margin: 0; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0 0 12px; color: var(--text-2); }
@media (min-width: 640px) { .prose dl { grid-template-columns: 220px 1fr; } .prose dd { margin: 0 0 8px; } }
/* Articles du blog (blog-*.html) : citations et images dans le texte, en aplat comme le reste du site. */
.prose h3 { font-size: 20px; margin: 32px 0 12px; }
.prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); }
.prose blockquote p { margin: 0 0 8px; font-size: 19px; line-height: 1.5; }
.prose blockquote em, .prose blockquote cite { font-style: normal; color: var(--text-2); font-size: 15px; }
.prose figure { margin: 32px 0; }
.prose figure img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.prose figcaption { margin-top: 8px; font-size: 14px; color: var(--text-2); }

/* ---------- À propos ---------- */
.press { font-size: clamp(19px, 2vw, 22px); font-weight: 500; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.press a { text-decoration: none; }
.press a:hover { text-decoration: underline; text-underline-offset: 3px; }
#securite .lead { margin: 20px auto 0; }

/* ---------- Pied de page ---------- */
.foot { background: var(--night); border-top: 1px solid var(--sep); padding: clamp(48px, 6vw, 72px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); font-size: 14px; letter-spacing: 0; color: var(--text-2); }
.foot-top { display: grid; grid-template-columns: 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid var(--sep); }
.foot-brand { display: grid; gap: 14px; align-content: start; max-width: 340px; }
.foot-brand .brand { margin: 0; }
.foot-brand .logo { display: block; width: auto; height: 56px; }
.foot-brand p { margin: 0; line-height: 1.5; }
.foot-tagline { color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.foot-tagline span { color: var(--accent); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.foot-col h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--text); margin: 0 0 14px; }
.foot-col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.foot a { color: var(--text-2); text-decoration: none; transition: color 0.2s ease; }
.foot a:hover { color: var(--text); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; font-size: 13px; }
.foot-bottom p { margin: 0; }
/* Quatre colonnes (Solutions, Usages, 2 Minutes Max, Suivez-nous) : deux par ligne jusqu'au grand écran. */
@media (min-width: 720px) {
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; }
}
@media (min-width: 1000px) {
  .foot-top { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2.6fr); }
  .foot-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Apparitions : visibles par défaut, animées seulement en entrant dans l'écran ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
html.js [data-reveal].in { animation: rise 0.9s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 600px) { .logos img { height: calc(var(--h, 40) * 0.8px); } }
.wrap--text > h2 + .lead { margin-top: 20px; }
.field input, .field select, .field textarea { scroll-margin-top: 96px; }

/* ---------- Bandeau de consentement (mesure d'audience, main.js) : aplat bleu nuit en bas d'écran, deux boutons identiques
   (refuser aussi visible qu'accepter). Sous l'en-tête et le menu mobile (z-index 49-60). ---------- */
.consent { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; background: var(--band); color: #FFFFFF; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.consent-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; max-width: 1080px; margin: 0 auto; padding: 16px var(--gutter-r) calc(16px + env(safe-area-inset-bottom, 0px)) var(--gutter-l); }
.consent p { flex: 1 1 420px; margin: 0; font-size: 15px; line-height: 1.5; }
.consent a { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.consent-b { display: flex; flex: 0 0 auto; gap: 12px; }
.consent .btn { min-width: 124px; }
.consent .btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.foot .link-btn { color: var(--text-2); transition: color 0.2s ease; }
.foot .link-btn:hover { color: var(--text); }