:root {
  --bg: #E8EDF2;            /* Bleu-gris clair frais - tonalite professionnelle */
  --bg-warm: #DDE4EC;        /* Variante plus prononcee pour sections speciales */
  --paper: #ffffff;
  --ink: #111827;
  --muted: #5f6b7a;
  --line: #c8d2dd;           /* Bordure ajustee au fond bleu-gris */
  --navy: #18233a;
  --blue: #275f8f;
  --teal: #2f766d;
  --amber: #b7791f;
  --copper: #c08552;         /* Accent cuivre profond */
  --copper-deep: #C97F1F;    /* Cuivre profond (socle 06/09/2026) : unifie les valeurs en dur du menu et des tarifs */
  --gold: #F4C465;           /* Or de la charte (socle 06/09/2026) */
  --gold-mid: #E5A340;       /* Étape médiane du dégradé du bouton or (07/09/2026) : était en dur */
  --line-warm: #ece4d0;      /* Bordure chaude des cartes (07/09/2026) : était en dur */
  --navy-900: #0E1A3A;       /* Navy profond (socle 06/09/2026) */
  --red: #8f2d2d;
  --green: #2f6b45;
  --shadow: 0 16px 40px rgba(17, 24, 39, 0.12);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Sprint 26z14s — Triple ceinture contre overflow horizontal :
     1) `overflow-x: clip` (plus dur que hidden, ne crée PAS de scroll container, support: Chrome 90+, Safari 16+, Firefox 81+)
     2) Fallback `overflow-x: hidden` pour navigateurs anciens
     3) `width: 100%` (volontairement PAS 100vw qui inclut la scrollbar et crée parfois le bug qu'on essaie de fixer) */
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
}

body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  width: 100%;
  position: relative;
  overscroll-behavior-x: none;
}

/* Sprint 26z14s — Filet de sécurité : aucun enfant direct du body ne peut dépasser le viewport.
   Exceptions explicites pour les éléments fixed du module premium nav (déjà constraints individuellement). */
body > *:not(.psf-bottom-sheet):not(.psf-bottom-sheet-backdrop):not(#psf-scroll-progress):not(.psf-tab-bar):not(.psf-fab):not(#psf-pull-indicator) {
  max-width: 100%;
}

/* Sprint 26z14p — Défense en profondeur contre l'overflow horizontal sur iOS Safari.
   Garantit qu'aucun descendant clé ne peut excéder la largeur du viewport. */
.section,
.section-premium-dark,
.section-inner,
.booking-calendar,
.booking-days,
.booking-card,
.form,
.form-grid,
header.site-header,
nav.site-nav,
main,
footer.site-footer {
  max-width: 100%;
  box-sizing: border-box;
}
.section-premium-dark {
  overflow-x: hidden;
  overflow-x: clip;
}

/* Form fields ne peuvent jamais excéder leur conteneur (gros <option> long dans <select>) */
.form input,
.form select,
.form textarea,
.form button {
  max-width: 100%;
  box-sizing: border-box;
}
/* Defensive: tout enfant de grid/flex doit pouvoir rétrécir au lieu de pousser ses voisins */
.grid > *,
.form-grid > *,
.booking-days > *,
.actions > * {
  min-width: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  background: var(--navy);
  color: #fff;
  padding: .7rem 1rem;
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  /* Sprint 18BC : 4 colonnes pour accueillir le toggle FR/EN à droite */
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: rgba(232, 237, 242, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

/* Sprint 18BC : Toggle FR/EN */
.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.lang-toggle-btn {
  padding: .4rem .65rem;
  color: var(--ink, #111);
  text-decoration: none !important;
  transition: background .15s ease, color .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
}
.lang-toggle-btn:hover:not(.active) {
  background: rgba(244, 196, 101, .12);
  color: var(--copper, #C97F1F);
}
.lang-toggle-btn.active {
  background: linear-gradient(135deg, #F4C465 0%, #E5A340 100%);
  color: #0E1A3A;
  cursor: default;
}
.lang-toggle-btn + .lang-toggle-btn {
  border-left: 1px solid var(--line);
}
@media (max-width: 768px) {
  .site-header { grid-template-columns: auto auto 1fr auto; }
  .lang-toggle { font-size: .72rem; }
  .lang-toggle-btn { padding: .35rem .55rem; min-width: 24px; }
}

/* Sprint 23 : Bouton "Installer l'app" du menu mobile SUPPRIMÉ
   (doublon avec celui du header). Le bouton header .site-header-install reste visible
   sur mobile (header sticky toujours en haut, accessible sans ouvrir le menu). */
.nav-install-mobile { display: none !important; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-weight: 800;
  letter-spacing: 0;
  text-decoration: none;
  transition: opacity .2s ease;
}
.brand:hover { opacity: .85; }
.brand:hover .brand-mark { transform: rotate(12deg) scale(1.04); }

/* Mark SVG inline — le P de PROCESPHERE vient se loger dans l ouverture
   (l ouverture occupe ~30 % de la largeur droite du SVG, soit ~12 px sur 42 px). */
.brand-mark {
  width: 2.6rem;
  height: 2.6rem;
  flex-shrink: 0;
  margin-right: -0.75rem;       /* chevauche le wordmark de ~12 px */
  filter: drop-shadow(0 4px 10px rgba(59, 125, 216, .18));
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* ═══════════════════════════════════════════════════════════════
   PROTECTION LOGO : anti-selection, anti-drag, anti-save UX
   + TAILLES STRICTES (forcees au cas ou le CSS cache des navigateurs)
   ═══════════════════════════════════════════════════════════════ */
.brand-mark,
.footer-mark,
.modal-mark,
.not-found-mark,
.premium-mark-icon {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
  -webkit-touch-callout: none;
}
.brand { -webkit-user-drag: none; user-drag: none; }
.brand:hover .brand-mark { pointer-events: auto; }

/* TAILLES STRICTES — !important pour eviter tout debordement
   meme si une autre regle CSS tente de l agrandir. */
.brand-mark         { width: 2.6rem !important; height: 2.6rem !important; max-width: 2.6rem !important; max-height: 2.6rem !important; }
.footer-mark        { width: 2.4rem !important; height: 2.4rem !important; max-width: 2.4rem !important; max-height: 2.4rem !important; }
.modal-mark         { width: 3.2rem !important; height: 3.2rem !important; max-width: 3.2rem !important; max-height: 3.2rem !important; }
.not-found-mark     { width: 5rem   !important; height: 5rem   !important; max-width: 5rem   !important; max-height: 5rem   !important; }
.premium-mark-icon  { width: 1.05rem !important; height: 1.05rem !important; max-width: 1.05rem !important; max-height: 1.05rem !important; }

/* Garde-fou ULTIME : tout SVG inline DOIT etre limite a 100% de son parent
   et le conteneur global du <symbol> est retire du flux.

   ══ LOGO ABSENT SUR IPHONE — LA CAUSE ETAIT ICI ═════════════════════════
   Ce bloc visait le porteur du sprite (le <svg width="0" height="0"> qui ne
   contient QUE les <symbol> et les degrades). Deux declarations le rendaient
   fatal sur WebKit, donc sur TOUS les navigateurs iOS :

     1. visibility: hidden  — visibility S HERITE, et WebKit la propage au
        contenu clone par <use>. Le symbole restait invisible PARTOUT ou le
        logo etait appele : en-tete, pied de page, modale, 404. Chrome ne
        propage pas, d ou un defaut visible sur iPhone seulement.
     2. svg symbol { display:none }  — c est deja le comportement par defaut
        du navigateur, mais en !important dans une feuille auteur la regle
        atteint aussi le clone <use> la ou WebKit conserve le nom d element
        symbol dans son arbre fantome. Le clone ne s affiche plus.

   Le sprite reste invisible SANS ces deux declarations : hors flux, dimensions
   nulles, debordement masque, et derriere tout le reste. NE PAS LES REMETTRE.
   ════════════════════════════════════════════════════════════════════════ */
svg { max-width: 100%; }
svg[width="0"][height="0"],
svg[aria-hidden="true"][width="0"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: -9999 !important;
}

/* Wordmark : PROCE en navy, SPHERE en gradient or vivant */
.brand-word {
  display: inline-flex;
  font-size: 1.05rem;
  letter-spacing: .04em;
  /* Sprint 22 : empêche la coupure inopportune au milieu de "PROCESPHERE" sur petits écrans */
  white-space: nowrap;
  flex-shrink: 0;
}
.brand-pro {
  color: var(--navy);
}
.brand-sphere {
  background: linear-gradient(135deg, #F4C465 0%, #E5A340 50%, #C97F1F 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Animation pulse subtile sur le pivot central du logo */
@keyframes brand-pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.18); opacity: 1; }
}
.brand-pulse {
  animation: brand-pulse 2.4s ease-in-out infinite;
  transform-origin: 32px 32px;
  transform-box: view-box;
}
@media (prefers-reduced-motion: reduce) {
  .brand-pulse { animation: none; }
  .brand:hover .brand-mark { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LOGO — Déclinaisons par contexte
   ═══════════════════════════════════════════════════════════════ */

/* FOOTER : mark + wordmark inline sur fond navy */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1rem;
}
.footer-mark {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: -.65rem;       /* le P chevauche l ouverture */
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(244, 196, 101, .25));
}
.footer-wordmark {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.brand-pro-light {
  color: #fff;
}

/* PREMIUM-MARK : badge en haut des sections dark, avec mini-mark inline */
.premium-mark {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .9rem .45rem .55rem;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(244, 196, 101, .35);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.premium-mark-icon {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  /* Le SVG utilise des gradients donc indifferent au color: parent */
}

/* MODAL : mark centré au-dessus du titre */
.modal-mark {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  margin: 0 auto .85rem;
  filter: drop-shadow(0 6px 16px rgba(59, 125, 216, .2));
}

/* PAGE 404 : version empilée + baseline centrée */
.not-found-section {
  text-align: center;
  padding-top: 3rem;
}
.not-found-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  margin-bottom: 2.5rem;
}
.not-found-mark {
  width: 5rem;
  height: 5rem;
  filter: drop-shadow(0 8px 22px rgba(59, 125, 216, .22));
}
.not-found-word {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: .05em;
}
.not-found-baseline {
  font-style: italic;
  font-weight: 500;
  color: var(--muted);
  font-size: .95rem;
  letter-spacing: .02em;
  margin: 0;
}
.not-found-section .eyebrow {
  margin-top: 1rem;
  color: var(--copper);
}
.not-found-section h1 {
  margin: .8rem auto;
  font-size: clamp(2rem, 4vw, 3rem);
  max-width: 100%;
}
.not-found-section > p {
  max-width: 580px;
  margin: 0 auto 1.5rem;
}
.not-found-section .btn { display: inline-flex; }

.site-nav {
  display: flex;
  justify-content: center;
  gap: .35rem;
  flex-wrap: wrap;
}

.site-nav a {
  padding: .55rem .8rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: .94rem;
  font-weight: 600;
}

.site-nav a:hover,
.site-nav .is-active {
  background: #fff;
  color: var(--ink);
}

.nav-toggle {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: .78rem 1rem;
  border: 1px solid var(--navy);
  border-radius: 8px;
  font-weight: 700;
  background: transparent;
}

.btn.primary {
  background: var(--navy);
  color: #fff;
}

.btn.ghost {
  border-color: var(--line);
  background: #fff;
}

.btn.small {
  min-height: 2.4rem;
  padding: .55rem .8rem;
  background: var(--navy);
  color: #fff;
}

/* ─── Socle boutons premium (06/09/2026) : une géométrie, trois variantes, états complets ─── */
/* Les <button> natifs n'héritent pas de la police : ils rendaient en Arial (formulaire lead, newsletter, menu). */
button, input, select, textarea { font-family: inherit; }
.btn {
  font-family: inherit;
  gap: .5rem;
  text-decoration: none;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .25s ease, background-color .25s ease, background-position .4s ease, border-color .25s ease, color .25s ease;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(0); }
/* Anneau de focus : navy sur fond clair (contraste ≥ 3:1), or sur les fonds sombres */
.btn:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 2px; }
.section-premium-dark .btn:focus-visible, .cta-section-premium .btn:focus-visible, .psf-fe-signup .btn:focus-visible, .hero-copy-premium .btn:focus-visible { outline-color: rgba(244, 196, 101, .9); }
.btn.primary:hover { background: var(--navy-900); box-shadow: 0 10px 24px rgba(14, 26, 58, .22); }
.btn.ghost:hover { border-color: var(--navy); box-shadow: 0 8px 20px rgba(17, 24, 39, .08); }
/* .btn.gold : utilisé sur des dizaines de pages sans jamais avoir été défini (il héritait du bouton de base). */
.btn.gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 55%, var(--copper-deep) 100%);
  background-size: 200% 200%;
  background-position: 0 0;
  color: var(--navy-900);
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(201, 127, 31, .28);
}
.btn.gold:hover { background-position: 100% 100%; box-shadow: 0 12px 28px rgba(201, 127, 31, .38); color: var(--navy-900); }
/* Pas de règle de focus propre à .btn.gold : elle écrasait l'anneau or des fonds sombres (contraste mesuré 1,13:1). Les deux règles ci-dessus — navy sur fond clair, or sur fond sombre — suffisent. */
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; transform: none; box-shadow: none; }

/* ─── Composants média (06/09/2026) : rendus par render_media_hero / render_media_band / render_media_frame, seulement si le fichier existe ─── */
.hero-visual.hero-visual--media { padding: 0; border: none; background: transparent; box-shadow: none; min-height: 0; overflow: visible; }
.hero-visual--media .media-hero { border-radius: 12px; aspect-ratio: 16 / 10; }
.media-hero { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 16 / 9; background: var(--navy-900); box-shadow: var(--shadow); }
.media-hero > img, .media-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* La vidéo reste invisible tant qu'elle ne joue pas : la photo dessous tient le cadre, et le passage
   de l'une à l'autre se fait en fondu au lieu d'un saut. La classe est posée sur l'événement « playing ». */
.media-hero > video { opacity: 0; transition: opacity .9s ease; }
.media-hero > video.pret { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .media-hero > video { transition: none; } }
/* Vidéo du héros : ordinateur seulement ; sous 900 px la photo reste seule. Le non-téléchargement est assuré par preload="none" + data-src dans render_media_hero(), PAS par cette règle : display:none n'empêche aucune requête. */
@media (max-width: 900px) { .media-hero > video { display: none !important; } }
.media-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 26, 58, 0) 45%, rgba(14, 26, 58, .55) 100%); pointer-events: none; }
.media-band { position: relative; width: 100%; min-height: clamp(260px, 38vw, 480px); display: grid; align-items: end; margin: 0; color: #fff; overflow: hidden; isolation: isolate; }
/* 07/09/2026 : l'image de la bande est un <img> positionné et non plus un background-image — c'est ce qui rend possibles loading="lazy", srcset et fetchpriority. Elle passe SOUS le dégradé (::before, z-index -1). */
.media-band > .media-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; }
.media-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 26, 58, .12) 0%, rgba(14, 26, 58, .8) 100%); }
.media-band .media-band-inner { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: clamp(2rem, 5vw, 4rem) 0; }
.media-band blockquote { margin: 0; font-family: 'Inter Tight', Inter, sans-serif; font-weight: 600; font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.2; max-width: 24ch; color: #fff; }
.media-band blockquote::before { content: "« "; color: var(--gold); }
.media-band blockquote::after { content: " »"; color: var(--gold); }
.media-band .media-band-source { margin: .8rem 0 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.media-frame { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.media-frame img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
.media-frame.ratio-4-3 img { aspect-ratio: 4 / 3; }
.media-frame.ratio-16-9 img { aspect-ratio: 16 / 9; }
.media-frame.ratio-5-4 img { aspect-ratio: 5 / 4; }
.media-frame.ratio-1-1 img { aspect-ratio: 1 / 1; }
.media-frame.ratio-3-4 img { aspect-ratio: 3 / 4; }
/* Visuel en tête de carte : bord à bord, coins hauts arrondis, pas d'ombre propre */
.card .media-frame { margin: -28px -26px 18px; border-radius: 12px 12px 0 0; box-shadow: none; }
.card.offer-card .media-frame { margin: -30px -28px 18px; }
.card .media-frame::after { display: none; }
/* 07/09/2026 : rapport verrouillé au lieu d'un plafond de hauteur. Avec un plafond, la largeur continuait
   de croître seule : à 2560 px la section tombait à 4,89:1 et il ne restait que 48 % de la hauteur source —
   la feuille et les mains, c'est-à-dire le sujet, sortaient du cadre. Le rapport 3,07 garde exactement la
   même fenêtre source à toutes les largeurs. En dessous de 676 px, min-height reprend la main. */
.media-band.media-band--image { min-height: 220px; aspect-ratio: 3.07; }
.rdv-portrait-section .media-frame { max-width: 320px; margin: 0 auto; }
.card:has(> .media-frame)::before { z-index: 2; }  /* 2 et non 1 : .card > * vaut déjà 1, la figure passait devant */
/* Calculateurs : vignette carrée compacte en tête de carte (objet sur table), jamais pleine largeur */
.card.calc-hub-card .media-frame { width: 112px; margin: 0 0 18px; border-radius: 14px; box-shadow: none; border: 1px solid var(--line); }
@media (max-width: 640px) { .card.calc-hub-card .media-frame { width: 96px; margin-bottom: 14px; } }
.media-frame figcaption { padding: .8rem 1rem; font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line); }
.media-frame::after { content: ""; position: absolute; top: 0; right: 0; width: 44px; height: 44px; background: linear-gradient(225deg, var(--copper-deep) 0 50%, transparent 50%); opacity: .9; pointer-events: none; }
/* ─── Cartes d'offres (06/09/2026) : « Explorer l'offre » devient un bouton dans son propre conteneur, calé en bas ; hauteur naturelle, respiration ─── */
.card.offer-card { display: flex; flex-direction: column; min-height: 0; padding: 30px 28px 26px; }
.card.offer-card .kicker { margin-bottom: .8rem; }
.card.offer-card h3 { margin: 0 0 .6rem; font-size: 20px; }
.card.offer-card p:not(.kicker) { margin: 0 0 1.5rem; }
.card.offer-card .card-actions { margin-top: auto; padding-top: 1.15rem; border-top: 1px solid var(--line-warm); }
.card.offer-card .card-btn, .card.gain-card .card-btn { width: 100%; justify-content: space-between; gap: .75rem; min-height: 2.8rem; padding: .78rem 1.1rem; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--navy-900); font-weight: 700; }
.card.offer-card .card-btn svg, .card.gain-card .card-btn svg { flex-shrink: 0; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .card.offer-card .card-btn:hover, .card.gain-card .card-btn:hover { border-color: var(--copper-deep); background: rgba(244, 196, 101, .08); box-shadow: 0 8px 20px rgba(201, 127, 31, .14); }
  .card.offer-card .card-btn:hover svg, .card.gain-card .card-btn:hover svg { transform: translateX(3px); }
}
@media (max-width: 640px) { .card.offer-card { padding: 24px 20px 20px; } .card.offer-card .media-frame { margin: -24px -20px 16px; } }
/* ─── Menu bureau : huit entrées sur une ligne entre le seuil mobile et les très grands écrans (06/09/2026) ─── */
@media (min-width: 1101px) and (max-width: 1640px) {
  .site-nav { gap: .15rem; }
  .site-nav a { padding: .5rem .55rem; font-size: .88rem; }
}
/* Entre 1101 et 1400 px, la place à côté du logo et des deux boutons ne suffit pas : la barre passe sur sa propre ligne, centrée, plutôt que de rejeter « Rendez-vous » seul en dessous. */
@media (min-width: 1101px) and (max-width: 1400px) {
  .site-header { row-gap: .35rem; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .card.offer-card .card-btn:hover svg, .card:hover, .psf-premium-card:hover { transform: none !important; transition: none !important; }
  .media-hero > video { display: none; }
}

.section {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 6rem) 0;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .75fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: calc(100svh - 74px);
}

.eyebrow,
.kicker {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--amber);
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.08;
  letter-spacing: 0;
}

h1 {
  max-width: 900px;
  font-size: clamp(3.2rem, 7vw, 6.8rem);
  line-height: 1.05;
}

h2 {
  max-width: 820px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.15;
}

/* Dans une colonne split (largeur reduite), reduire encore h2 pour eviter
   les titres qui debordent verticalement sur 5+ lignes. */
.split h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  line-height: 1.2;
  max-width: 100%;
}

/* Espacement standardise entre titre et description dans split */
.split > div > h2 + p,
.split > div > .eyebrow + h2 {
  margin-top: .8rem;
}
.split > div > p {
  margin-bottom: 1rem;
  line-height: 1.7;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.7rem);
}

p {
  color: var(--muted);
}

.lead {
  max-width: 720px;
  font-size: clamp(1.08rem, 1.6vw, 1.35rem);
}

.actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.hero-visual {
  position: relative;
  min-height: 440px;
  padding: 1rem;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  border-radius: 8px;
  overflow: hidden;
}

.signal-bar {
  display: flex;
  gap: .45rem;
  margin-bottom: 1.5rem;
}

.signal-bar span {
  display: block;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--line);
}

.system-map {
  position: relative;
  height: 300px;
  border: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(39, 95, 143, .08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(39, 95, 143, .08) 1px, transparent 1px);
  background-size: 36px 36px;
  border-radius: 8px;
}

.node {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 120px;
  min-height: 56px;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(17, 24, 39, .08);
}

.node:nth-child(1) { left: 24px; top: 28px; }
.node:nth-child(2) { right: 26px; top: 70px; }
.node:nth-child(3) { left: 60px; bottom: 42px; }
.node:nth-child(4) { right: 44px; bottom: 28px; }
.node.strong { background: var(--navy); color: #fff; }
.node.accent { background: var(--teal); color: #fff; }

.line {
  position: absolute;
  height: 2px;
  background: var(--amber);
  transform-origin: left center;
}

.l1 { width: 155px; left: 144px; top: 74px; transform: rotate(12deg); }
.l2 { width: 160px; left: 130px; bottom: 92px; transform: rotate(-18deg); background: var(--blue); }
.l3 { width: 125px; right: 118px; bottom: 72px; transform: rotate(11deg); background: var(--green); }

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  margin-top: 1rem;
}

.metrics span,
.pillar-row span,
.evidence-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: .5rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: .9rem;
  font-weight: 700;
}

.evidence-list span {
  min-height: 2.9rem;
  padding: .8rem 1.2rem;
  border-radius: 12px;
  font-size: .98rem;
  color: var(--ink);
  text-align: center;
  box-shadow: 0 1px 2px rgba(17, 24, 39, .04);
  transition: transform .15s ease, box-shadow .15s ease;
}

.evidence-list span:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 24, 39, .08);
}

/* ═══════════════════════════════════════════════════════════════
   PORTRAIT FONDATEUR — photo carre bord arrondi, parfaitement centree
   ═══════════════════════════════════════════════════════════════ */
.evidence-with-portrait {
  display: grid;
  gap: .9rem;
  justify-items: center;     /* CENTRE les items horizontalement dans la grille */
}
.evidence-with-portrait > span {
  width: 100%;               /* les pills reprennent toute la largeur */
}
.founder-portrait {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 200px;
  margin: 0 auto .6rem !important;
  padding: 0;
}
.founder-portrait picture,
.founder-portrait img {
  display: block;
  margin: 0 auto;
}
.founder-portrait img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 18px;
  object-fit: cover;
  object-position: center top;
  border: 3px solid #fff;
  box-shadow:
    0 8px 24px rgba(17, 24, 39, .12),
    0 0 0 1px var(--line);
  background: #f5f7fa;
}
.founder-portrait figcaption {
  margin-top: .55rem;
  font-size: .78rem;
  font-style: italic;
  color: var(--muted);
  text-align: center;
  letter-spacing: .01em;
  width: 100%;
}

.strip {
  border-block: 1px solid var(--line);
}

.pillar-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.section-head {
  display: grid;
  gap: .8rem;
  margin-bottom: 2rem;
}

.grid {
  display: grid;
  gap: 1rem;
}

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

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

/* 08/09/2026 : quatrième offre. À quatre cartes, trois colonnes laissaient la dernière
   seule sur sa ligne. En dessous de 1100 px la grille passe à deux colonnes : quatre
   cartes à image sur une tablette deviennent des timbres-poste. */
.grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sprint 22 — Cards premium globales (bande or + halo doré + hover lift)
   Style anciennement appliqué uniquement sur /experts et /partenaires via .psf-premium-card,
   désormais étendu à toutes les .card du site public. */
.card {
  position: relative;
  min-height: 260px;
  padding: 28px 26px 26px;
  border: 1px solid #ece4d0;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fefcf6 100%);
  box-shadow: 0 1px 2px rgba(14, 26, 58, 0.04), 0 8px 24px rgba(14, 26, 58, 0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #F4C465 0%, #C97F1F 50%, #F4C465 100%);
}
.card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(244, 196, 101, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(14, 26, 58, 0.08), 0 16px 40px rgba(244, 196, 101, 0.12);
  border-color: #F4C465;
}
.card h3 {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #0E1A3A;
  margin: 0 0 10px;
  letter-spacing: -0.3px;
  line-height: 1.3;
}
.card .kicker {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2.5px;
  color: #C97F1F;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(244, 196, 101, 0.12);
  border-radius: 999px;
}
.card strong { color: #0E1A3A; font-weight: 700; }

.card.compact {
  min-height: 150px;
  padding: 20px 22px 18px;
}

.card p {
  color: #3a4255;
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 1.2rem;
}
.card p:last-child { margin-bottom: 0; }

.list-card ul,
.article-body ul {
  display: grid;
  gap: .65rem;
  padding-left: 1.1rem;
  color: var(--muted);
}

.list-card li::marker,
.article-body li::marker {
  color: var(--amber);
}

.text-link {
  font-weight: 800;
  color: var(--blue);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(1.5rem, 4vw, 3.2rem);
  align-items: center;
}

@media (max-width: 860px) {
  .split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.evidence-list {
  display: grid;
  gap: .7rem;
}

.timeline {
  display: grid;
  gap: .9rem;
}

.step {
  display: grid;
  grid-template-columns: 4rem 1fr 1.4fr;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.step span {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}

.form {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin: 0;
  font-size: .92rem;
}

label {
  display: grid;
  gap: .45rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  min-height: 2.8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .7rem .8rem;
  font: inherit;
}

textarea {
  resize: vertical;
}

.legal {
  max-width: 900px;
}

.legal h1 {
  font-size: clamp(2.4rem, 5vw, 4.8rem);
}

.legal h2 {
  margin-top: 2rem;
  font-size: 1.5rem;
}

.article-body {
  max-width: 900px;
}

.article-body h2 {
  margin-top: 2.6rem;
  margin-bottom: .95rem;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  line-height: 1.2;
}

.article-body h3 {
  margin-top: 2rem;
  margin-bottom: .6rem;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.3;
}

.article-body p {
  font-size: 1.06rem;
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

.article-body p:last-child { margin-bottom: 0; }

.article-body > figure,
.article-body figure.article-img,
.article-body figure.article-gallery {
  margin: 2rem 0;
}

.article-body blockquote {
  margin: 2rem 0;
}

.article-cta {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  background: linear-gradient(135deg, #0E1A3A, #18233a);
  color: #fff;
  border-radius: 18px;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: 0 18px 50px rgba(14, 26, 58, .18);
  border: 1px solid rgba(244, 196, 101, .25);
}

.article-cta .eyebrow { color: var(--gold); }
.article-cta h2 { color: #fff; margin: .25rem 0 .55rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.article-cta .article-cta-main p { color: rgba(255, 255, 255, .82); font-size: 1.02rem; line-height: 1.65; }

.article-cta-reassure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.article-cta-reassure li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  font-size: .98rem;
  color: #fff;
}

.article-cta-reassure li .psf-icon { color: var(--gold); flex-shrink: 0; }

.article-cta .btn.primary {
  background: var(--gold);
  color: #0E1A3A;
  border: none;
  font-weight: 800;
}
.article-cta .btn.primary:hover { background: #ffd680; }

.article-cta .btn.ghost {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(244, 196, 101, .55);
  color: #fff;
}
.article-cta .btn.ghost:hover {
  background: rgba(244, 196, 101, .12);
  border-color: var(--gold);
}

@media (max-width: 760px) {
  .article-cta { grid-template-columns: 1fr; padding: 1.5rem 1.3rem; gap: 1.2rem; }
  .article-cta .actions { display: flex; flex-direction: column; gap: .6rem; }
  .article-cta .actions .btn { width: 100%; text-align: center; justify-content: center; }
}

.notice {
  padding: 1rem;
  border-left: 4px solid var(--amber);
  background: #fff;
  border-radius: 8px;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 2rem clamp(1rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
  background: var(--navy);
  color: #fff;
}

/* Sprint 12 : icônes réseaux sociaux dans le footer */
.footer-social {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}
.footer-social li { margin: 0; }
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  text-decoration: none;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.footer-social a:hover {
  background: linear-gradient(135deg, #F4C465, #C97F1F);
  color: #0E1A3A;
  transform: translateY(-2px);
}
.footer-social svg { display: block; }

.site-footer p,
.site-footer a {
  color: rgba(255,255,255,.78);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  justify-content: end;
}

@media (max-width: 900px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .site-header > .btn.small {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    justify-content: center;
    padding: .55rem .8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-weight: 800;
  }

  .site-nav {
    display: none;
    grid-column: 1 / -1;
    justify-content: start;
  }

  .site-nav.is-open {
    display: flex;
  }

  .hero,
  .split,
  .grid.three,
  .grid.four,
  .grid.two,
  .form-grid,
  .step,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: auto;
  }

  .hero-visual {
    min-height: 380px;
  }

  .site-footer nav {
    justify-content: start;
  }
}

@media (max-width: 560px) {
  h1 {
    font-size: clamp(2.7rem, 15vw, 4rem);
  }

  .section {
    width: min(100% - 1rem, 1180px);
  }

  .hero-visual {
    display: none;
  }

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

  .actions {
    flex-direction: column;
  }
}

/* ─────────────────────────────────────────────────────────────
   COMPOSANTS AJOUTES : KPI row, Pain/Gain, ROI, Pricing, Booking, Proof
   ───────────────────────────────────────────────────────────── */

/* KPI ROW (bandeau chiffres production) */
.kpi-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* ─── Stories : films courts en cadre de téléphone (07/09/2026) ───────────────
 * Le cadre est entièrement dessiné en CSS — aucune image de coque à charger.
 * Rien ne se télécharge au premier rendu : les <video> n'ont pas de source tant
 * que le script ne l'a pas posée, et une seule joue à la fois. */
/* Le bloc est un vrai conteneur, avec un fond assumé : sans lui, l'ombre du téléphone
   dessinait un halo gris qui s'arrêtait n'importe où et se lisait comme un défaut. */
.psf-stories {
  margin: 0 0 2.2rem;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.6vw, 1.8rem);
}
/* Moins de trois films : le rail à gauche, un bloc de côté à droite, pour ne pas laisser
   un vide. À partir de trois, le rail reprend toute la largeur et ce bloc disparaît. */
.psf-stories--cote {
  --stories-gap: clamp(1.2rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: auto minmax(240px, 1fr);
  gap: var(--stories-gap);
  align-items: center;
}
/* Le bloc est centré dans l'espace qui reste entre le téléphone et le bord droit :
   il est posé au milieu de sa colonne, et sa mesure est bornée pour rester lisible. */
/* Disposition retournée : le panneau à gauche, le téléphone à droite. L'ordre du
   HTML est inchangé — le téléphone reste lu en premier par un lecteur d'écran —
   seule la grille est inversée. */
.psf-stories--inverse { grid-template-columns: minmax(240px, 1fr) auto; }
.psf-stories--inverse .stories-rail { order: 2; }
.psf-stories--inverse .stories-cote { order: 1; }
@media (max-width: 860px) {
  .psf-stories--inverse .stories-rail { order: 1; }
  .psf-stories--inverse .stories-cote { order: 2; }
}

.stories-cote {
  justify-self: center;
  /* La colonne commence APRÈS la gouttière : sans compensation, le bloc est centré
     dans sa colonne et non dans l'espace vu à l'écran — 21 px trop à droite à 1440.
     La marge vaut UNE gouttière entière et non la moitié : justify-self centre la
     boîte AVEC ses marges, donc une marge de -x ne déplace le bloc que de x/2. */
  margin-left: calc(var(--stories-gap) * -1);
  max-width: 46ch;
  text-align: center;
}
.stories-cote h3 {
  margin: 0 0 .7rem;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--navy-900);
  text-wrap: balance;
}
.stories-cote p {
  margin: 0 auto 1.5rem;
  max-width: 42ch;
  line-height: 1.55;
  color: var(--muted);
}
.stories-cote .card-btn {
  margin-inline: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 2.8rem;
  padding: .78rem 1.1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy-900);
  font-weight: 700;
}
/* ── Variante panneau : l'image occupe le cadre, le texte se pose dessus ────── */
/* Le panneau est TOUJOURS un panneau, avec ou sans image : fond navy par défaut,
   l'image vient s'y superposer quand elle existe. Sans ce fond, un visuel manquant
   faisait retomber le bloc en texte sombre sur fond clair — deux allures pour un
   même composant selon qu'un fichier était là ou non. */
.stories-cote--panneau {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 100%);
  /* Le panneau occupe toute la colonne : plus de mesure bornée ni de compensation
     de gouttière, c'est le cadre lui-même qui remplit l'espace. */
  justify-self: stretch;
  margin-left: 0;
  max-width: none;
  width: 100%;
  min-height: clamp(260px, 26vw, 340px);
  display: grid;
  place-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem);
}
.stories-cote-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  z-index: -2;
}
.stories-cote--panneau::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(14, 26, 58, .70) 0%, rgba(14, 26, 58, .82) 55%, rgba(14, 26, 58, .90) 100%);
}
.stories-cote--panneau .stories-cote-inner { max-width: 46ch; }
.stories-cote--panneau .stories-cote-inner h3 { color: #fff; }
/* !important assumé et localisé. La règle générale `section p:not(...)` de la ligne ~2205
   force #1a1f2e sur tout paragraphe de section, avec huit `:not()` qui lui donnent une
   spécificité de (0,8,2) : aucune sélection raisonnable ne passe devant. Sans ceci, le
   texte sortait quasi noir sur l'image — illisible, et invisible à la mesure de contraste
   qui, elle, supposait du blanc. */
.stories-cote--panneau .stories-cote-inner p {
  color: rgba(255, 255, 255, .94) !important;
  max-width: 44ch;
  margin: 0 auto 1.5rem;
}
/* Bouton sur l'image : navy plein, filet d'or, texte blanc, flèche or. */
.stories-cote--panneau .stories-cote-inner .card-btn {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 100%);
  border: 1px solid var(--gold);
  color: #fff;
  box-shadow: 0 10px 26px rgba(14, 26, 58, .38);
}
.stories-cote--panneau .stories-cote-inner .card-btn svg { color: var(--gold); }
.stories-cote-alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: .6rem;
  padding: .4rem .75rem;
  font-size: .92rem;
  text-decoration: underline;
  color: var(--navy-900);
}
.stories-cote--panneau .stories-cote-inner .stories-cote-alt { color: rgba(255, 255, 255, .8); }
.stories-cote--panneau .stories-cote-inner .stories-cote-alt:hover { color: var(--gold); }
@media (hover: hover) and (pointer: fine) {
  .stories-cote--panneau .stories-cote-inner .card-btn:hover {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 55%, var(--copper-deep) 100%);
    border-color: transparent;
    color: var(--navy-900);
  }
  .stories-cote--panneau .stories-cote-inner .card-btn:hover svg { color: var(--navy-900); }
}
.stories-cote .media-frame { margin-bottom: 1.1rem; }
@media (max-width: 860px) {
  .psf-stories--cote { grid-template-columns: 1fr; }
  .stories-cote { margin-left: 0; }  /* une seule colonne : plus de gouttière à compenser */
}
.stories-rail {
  display: flex;
  /* Sans bloc de côté, le rail occupe toute la largeur : on le centre plutôt que de
     le coller à gauche. Avec un bloc de côté, la règle ci-dessous le remet à gauche. */
  justify-content: center;
  gap: clamp(.9rem, 2.4vw, 1.6rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: .25rem .25rem 1rem;
  scrollbar-width: thin;
}
.story-phone {
  flex: 0 0 auto;
  /* 07/09/2026 : cadre agrandi pour retrouver la présence de l'aperçu de génération.
     Le rapport reste 9:16 — c'est celui du film ; le changer remettrait du rognage. */
  width: clamp(240px, 66vw, 300px);
  margin: 0;
  scroll-snap-align: center;
}
.story-screen {
  position: relative;
  /* 07/09/2026 : le rapport porte sur la SURFACE D'ÉCRAN, pas sur le cadre.
     En box-sizing: border-box, la bordure de 6 px mangeait le rapport — l'écran était
     bien en 9:16 mais la zone vidéo tombait à 0,5504, et object-fit: cover rognait
     les bords du film. En content-box, la vidéo occupe exactement 9:16, sans perte. */
  box-sizing: content-box;
  width: calc(100% - 12px);
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: var(--navy-900);
  border: 6px solid #101a2f;
  box-shadow: 0 18px 44px rgba(14, 26, 58, .34), 0 0 0 1px rgba(244, 196, 101, .18);
}
/* L'encoche : suggérée, jamais imitée. */
.story-screen::before {
  content: "";
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 74px; height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  z-index: 3;
}
.story-screen > video,
.story-screen > .story-affiche {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* L'affiche remplace l'attribut `poster`, qui se téléchargeait au premier rendu même six
   écrans plus bas. Elle est POSÉE AU-DESSUS de la vidéo et s'efface quand la lecture
   commence réellement — et non l'inverse. C'est ce sens qui évite le cadre noir : une
   balise <video> sans source ne peint rien dans certains navigateurs et en peint un dans
   d'autres ; ici elle n'est jamais visible tant que l'affiche ne s'est pas retirée.
   L'état `data-playing` vient des événements de la vidéo, jamais d'une supposition. */
.story-screen > video { z-index: 0; }
.story-screen > .story-affiche { z-index: 2; opacity: 1; transition: opacity .3s ease; }
.story-phone[data-playing="1"] .story-affiche { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .story-screen > .story-affiche { transition: none; } }
.story-progress {
  position: absolute;
  top: 22px; left: 14px; right: 14px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .22);
  z-index: 3;
  overflow: hidden;
}
.story-progress > i {
  display: block; height: 100%; width: 0;
  background: var(--gold);
  transition: width .12s linear;
}
.story-toggle {
  /* 08/09/2026 : le bouton central ne couvre plus tout l'écran. Les deux bords reviennent aux
     gestes — un appui pour changer de film, deux pour sauter dix secondes — et le centre garde
     lire/pause. Sans ce retrait, le bouton avalait tous les appuis. */
  position: absolute; top: 0; bottom: 0; left: 30%; right: 30%;
  z-index: 4;
  border: 0; padding: 0;
  background: transparent;
  cursor: pointer;
  display: grid; place-items: center;
}
.story-toggle-ic {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: rgba(14, 26, 58, .62);
  border: 1px solid rgba(244, 196, 101, .55);
  position: relative;
  transition: opacity .2s ease;
}
.story-toggle-ic::after {
  content: "";
  position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--gold);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.story-phone[data-playing="1"] .story-toggle-ic { opacity: 0; }
/* 08/09/2026 — le pictogramme respire pendant que le film se charge. Un bouton qui ne répond
   pas est indiscernable d'un bouton cassé : c'est exactement ce que décrivait Nelson. */
@keyframes psf-attente { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.9); } }
.story-phone[data-chargement="1"] .story-toggle-ic { animation: psf-attente 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .story-phone[data-chargement="1"] .story-toggle-ic { animation: none; opacity: .55; }
}
.story-toggle:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 26px; }
.story-phone figcaption {
  margin-top: .7rem;
  text-align: center;
  font-family: 'Inter Tight', Inter, sans-serif;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--copper-deep);
}
/* Avec un bloc de côté, le rail ne contient qu'un ou deux téléphones : il reste calé
   à gauche de sa colonne, c'est le bloc voisin qui occupe le reste. */
.psf-stories--cote .stories-rail { justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .story-progress > i { transition: none; }
}

/* ─── Fond d'image de section (07/09/2026) ───────────────────────────────────
 * « Une peinture sur le mur » : l'image court d'un bord à l'autre et le MÊME voile navy
 * que les héros la calme, pour que la page n'ait qu'un seul régime de fond sombre.
 * Le contenu DIRECT de la section passe en clair ; les cartes filles, elles, gardent
 * leur fond clair et leur texte sombre : sur le navy elles ressortent comme des
 * cartouches posés sur la peinture, au lieu de se dissoudre dedans. */
.psf-js .psf-section-media {
  position: relative;
  isolation: isolate;
  /* La section quitte sa colonne de 1180 px pour toucher les deux bords ; son contenu,
     lui, reste aligné sur cette colonne grâce au rembourrage calculé. */
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(1rem, calc((100% - 1180px) / 2));
}
/* 09/09/2026 — LA PHOTO NE COUVRE PLUS LES SECTIONS GEANTES SUR TOUTE LEUR HAUTEUR.
   Mesure : un bandeau 2,36:1 pose en `cover` dans une section de 2 800 px ne montre plus que
   22 % de la largeur de la photo — sur /confidentialite, en eclaircissant la bande cinq fois,
   il ne restait AUCUN sujet, juste un lavis bleu. 15 sections sur 169 etaient sous 50 %.
   Aucun `object-position` ne rattrape cela : c'est la hauteur qui est en cause.
   On borne donc la hauteur PEINTE a environ 58 % de la largeur de l'ecran (plancher 220 px) :
   la fenetre visible revient autour des 70 % de largeur voulus par la direction photographique,
   a toutes les tailles d'ecran. Sous cette borne (la majorite des sections), `min()` retient
   100 % et rien ne change. En dessous de l'image, la section garde son navy : le raccord est
   navy sur navy, invisible, parce que le voile devient opaque sur ses derniers pour cent. */
.psf-js .psf-section-media { background-color: var(--navy-900, #0E1A3A); }
.psf-js .psf-section-media > .section-media-bg,
.psf-js .psf-media-duo > .section-media-bg {
  position: absolute;
  inset: 0;
  bottom: auto;
  height: min(100%, max(220px, 58vw));
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}
/* 09/09/2026 — le fond de section est enveloppe d'un <picture> (variante mobile plafonnee a
   1600 px). `display: contents` fait disparaitre la boite du <picture> : l'<img> reste, pour
   la mise en page, l'enfant direct de .section-media-bg et garde son inset:0 / cover. Sans
   cette ligne le <picture> cree une boite en ligne et l'image perd sa hauteur. */
.section-media-bg > picture, .hero-media-bg > picture { display: contents; }
.psf-js .psf-section-media > .section-media-bg img,
.psf-js .psf-media-duo > .section-media-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
/* ─── SUR TELEPHONE, L'IMAGE ENTIERE, JAMAIS RECADREE (09/09/2026) ──────────
   Decision de Nelson : plus aucune tete coupee. `cover` remplit la boite en rognant ce qui
   depasse — a 375 px de large, il ne restait que 72 % de la largeur de la photo et les
   sujets excentres sortaient du cadre. `contain` fait l'inverse : il DEZOOME jusqu'a ce que
   l'image tienne en entier, sans perdre un pixel de definition (la source 2K est simplement
   affichee plus petite). Le vide sous l'image n'en est pas un : la section porte le navy,
   le raccord est navy sur navy. Ancree en haut, l'image se lit avant le texte.
   Au-dessus de 900 px, rien ne change : le rendu bureau validé est conservé. */
@media (max-width: 900px) {
  .psf-js .psf-section-media > .section-media-bg img,
  .psf-js .psf-media-duo > .section-media-bg img {
    object-fit: contain;
    object-position: 50% 0;
  }
  /* La bande epouse alors le rapport de l'image la plus large du jeu (2,36:1) : plus de
     letterbox que necessaire, et la photo occupe toute la largeur de l'ecran. */
  .psf-js .psf-section-media > .section-media-bg,
  .psf-js .psf-media-duo > .section-media-bg { height: min(100%, 43vw); }
}
/* Le voile : navy, comme les héros — décision du 07/09. L'image garde sa profondeur
   cinéma et le contenu direct de la section passe en clair. Les cartes, elles, restent
   blanches : posées sur le navy, elles ressortent au lieu de se fondre. */
.psf-js .psf-section-media > .section-media-bg::after,
.psf-js .psf-media-duo > .section-media-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Le dernier pour cent passe a l'opacite pleine : c'est ce qui rend invisible le raccord
       entre le bas de l'image bornee et le navy de la section (voir la note ci-dessus). */
    linear-gradient(180deg, rgba(14, 26, 58, .88) 0%, rgba(14, 26, 58, .74) 42%, rgba(14, 26, 58, .90) 92%, rgba(14, 26, 58, 1) 100%),
    linear-gradient(90deg, rgba(14, 26, 58, .30) 0%, rgba(14, 26, 58, 0) 55%);
}
/* Le contenu DIRECT de la section passe en clair. Les descendants des cartes ne sont
   jamais visés : elles gardent leur fond blanc et leur texte sombre.
   `!important` sur les paragraphes : la règle générale `section p:not(...)` force #1a1f2e
   avec une spécificité de (0,8,2) qu'aucune sélection raisonnable ne dépasse. */
.psf-js .psf-section-media > .section-head h2,
.psf-js .psf-section-media.split > div > h2,
.psf-js .psf-section-media > .psf-pod-wrap h2,
.psf-js .psf-section-media > h2 { color: #fff; }.psf-js .psf-section-media > .section-head > p:not(.eyebrow),
.psf-js .psf-section-media.split > div > p:not(.eyebrow),
.psf-js .psf-section-media > p:not(.eyebrow) { color: rgba(255, 255, 255, .90) !important; }.psf-js .psf-section-media > .section-head > .eyebrow,
.psf-js .psf-section-media.split > div > .eyebrow,
.psf-js .psf-section-media > .psf-pod-wrap .eyebrow,
.psf-js .psf-section-media > .cta-section-premium > .section-head > .eyebrow,
.psf-js .psf-section-media > .eyebrow { color: var(--gold) !important; }
/* 09/09/2026 — deux chemins de balisage echappaient a la liste ci-dessus, a cause d'un `div`
   intercalaire, et leur surtitre restait en ambre #b7791f : contraste mesure 3,90 sur le voile
   navy et 3,42 sur la feuille claire, pour du 12,5 px qui demande 4,5.
   1) Les trois pages « preuves » : le surtitre est sous `.cta-section-premium` (ligne ci-dessus),
      il passe en or sur le navy.
   2) Les pages legales : le contenu est pose sur une FEUILLE CLAIRE (#F7F8F9). Ni l'or (2,3)
      ni le cuivre profond (2,98) n'y tiennent le seuil : on met le surtitre en navy, seule
      couleur de la charte qui passe (15,3). Ne pas « corriger » en or : ce serait pire. */
.psf-js .psf-section-media > .psf-legal-feuille > .eyebrow { color: var(--navy-900, #0E1A3A) !important; }
/* Une section « split » range son titre dans un `div` nu, pas dans un `.section-head` :
   sans les trois sélecteurs ci-dessus, titre et paragraphes resteraient sombres sur le navy.
   La légende du portrait, elle, est un descendant profond et porte une couleur bleue qui
   disparaîtrait : on la remonte en blanc doux. */
.psf-js .psf-section-media .founder-portrait figcaption { color: rgba(255, 255, 255, .86); }
/* Bouton secondaire sur fond sombre : même traitement que dans les sections premium. */
.psf-js .psf-section-media .btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
  background: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .psf-section-media .btn.ghost:hover { border-color: var(--gold); color: var(--gold); }
}.psf-js .psf-section-media .btn:focus-visible { outline-color: rgba(244, 196, 101, .9); }
/* Le bouton primaire est navy sur navy : sur le voile, son fond et sa bordure se confondaient
   avec le décor (1,09:1) et l'action secondaire, elle, gardait un contour blanc visible — la
   hiérarchie était inversée. On reprend le bouton or des sections premium, déjà dans la charte. */
/* 09/09/2026 — LE LIBELLE PASSE EN NAVY SUR LE DEGRADE OR.
   Mesure au pixel sur 26 boutons et 17 pages : blanc sur ce degrade donne 2,35 a 3,34 (calcul
   refait a la main sur #d4a04e : 2,35), la ou l'AA demande 4,5. En navy : 4,70 sur l'ambre,
   7,28 sur l'or intermediaire. Ce n'est pas une invention : c'est deja le traitement du
   `.btn.gold` de la charte et du bouton « Lancer mon audit » de /audit-facturation-electronique.
   Decision de Nelson, 09/09. */
.psf-js .psf-section-media .btn.primary {
  background: linear-gradient(135deg, var(--amber), var(--copper));
  color: var(--navy-900, #0E1A3A);
  border: none;
}
@media (hover: hover) and (pointer: fine) {
  .psf-section-media .btn.primary:hover { box-shadow: 0 8px 24px rgba(192, 133, 82, .5); }
}
/* GARDE-FOU : un bouton à l'intérieur d'une carte n'est PAS sur le fond sombre, il est sur
   le fond clair de la carte. Sans cette reprise, la règle ci-dessus le peignait en blanc sur
   blanc — le bouton « Voir la preuve détaillée » devenait invisible. */
.psf-js .psf-section-media .card .btn.ghost {
  color: var(--navy-900);
  border-color: var(--line);
  background: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .psf-section-media .card .btn.ghost:hover { border-color: var(--copper-deep); color: var(--navy-900); }
}.psf-js .psf-section-media .card .btn:focus-visible { outline-color: var(--navy-900); }
/* Même garde-fou pour le bouton principal : dans une carte claire il reste navy. En or, il
   se retrouvait blanc sur cuivre au milieu d'une carte blanche — le contraste tombe et le
   bouton change de nature d'une page à l'autre sans raison. */
.psf-js .psf-section-media .card .btn.primary,
.psf-js .psf-section-media .price-card .btn.primary {
  background: var(--navy);
  color: #fff;
  border: none;
}
/* Et quand le même groupe de boutons contient déjà des boutons or, le principal ne passe
   PAS en or : quatre ors empilés effacent la hiérarchie, l'action principale ne se distingue
   plus des raccourcis. Il reste navy, détaché du fond par un filet d'or. */
.psf-js .psf-section-media .actions:has(> .btn.gold) .btn.primary {
  background: var(--navy);
  color: #fff;
  border: 1px solid rgba(244, 196, 101, .6);
}
/* Sur une section à fond d'image, le bloc des films quitte sa carte crème : il devient une
   vitre. La photo respire dessous au lieu d'être cachée par un aplat, et le bloc se lit comme
   une pièce posée sur le mur. L'intitulé sous chaque téléphone passe du cuivre à l'or : le
   cuivre est une couleur sombre, illisible dès que le fond cesse d'être clair. */
.psf-js .psf-section-media .psf-stories {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
  box-shadow: 0 18px 44px rgba(14, 26, 58, .28);
}.psf-js .psf-section-media .story-phone figcaption { color: var(--gold); }
/* Un FORMULAIRE posé sur une section à fond d'image devient une carte claire. On aurait pu
   repeindre en blanc ses intitulés, ses aides et son panneau de résultat un par un — c'est une
   longue liste, et chaque nouveau champ aurait rouvert le trou. Une carte opaque règle la
   question une fois : tout ce qui est dedans garde ses couleurs d'origine, l'image respire autour. */
.psf-js .psf-section-media .diag-wizard,
.psf-js .psf-section-media .ds-result {
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.1rem, 2.6vw, 1.8rem);
  box-shadow: 0 18px 44px rgba(14, 26, 58, .28);
}.psf-js .psf-section-media .ds-result { margin-top: 1.2rem; }
/* Podcast : la rangée des plateformes porte ses couleurs dans une balise <style> de la page
   (cuivre #C97F1F et ardoise #475569), toutes deux invisibles sur le navy. La reprise est ici,
   pas dans la page : c'est le fond de section qui crée le besoin, c'est à lui de le résoudre. */
.psf-js .psf-section-media .psf-pod-social-eyebrow { color: var(--gold) !important; }
/* Facturation électronique : l'inter-titre « Et à l'échelle de votre organisation » porte
   son navy dans un <style> de la page ; posé sur le voile navy, il disparaît. */
.psf-js .psf-section-media .psf-fe-scale-title { color: #fff !important; }

/* ─── Mode statut des films (08/09/2026) ─────────────────────────────────
 * Un seul écran pour plusieurs films, comme un statut WhatsApp ou une story Instagram :
 * une barre segmentée en tête (un segment par film), le film suivant enchaîne tout seul,
 * et les deux bords de l'écran servent à avancer ou reculer. Quatre cadres alignés
 * demandaient quatre décisions au visiteur ; celui-ci n'en demande aucune. */
.story-progress--multi {
  display: flex;
  gap: 4px;
  background: transparent;
}
.story-seg {
  flex: 1 1 0;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .24);
  overflow: hidden;
}
.story-seg > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--gold);
}
.story-slide { position: absolute; inset: 0; }
.story-slide[hidden] { display: none; }
.story-slide > video,
.story-slide > .story-affiche {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.story-slide > video { z-index: 0; }
.story-slide > .story-affiche { z-index: 2; opacity: 1; transition: opacity .3s ease; }
.story-phone--statut[data-playing="1"] .story-slide:not([hidden]) > .story-affiche { opacity: 0; }
/* Les deux bords de l'écran : avancer à droite, reculer à gauche. Invisibles mais
   focalisables au clavier, avec un anneau franc quand ils prennent le focus. */
.story-zone {
  position: absolute;
  top: 0; bottom: 0;
  width: 30%;
  z-index: 4;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.story-zone--prec { left: 0; }
.story-zone--suiv { right: 0; }
.story-zone:focus-visible { outline: 3px solid var(--gold); outline-offset: -4px; border-radius: 22px; }

@media (prefers-reduced-motion: reduce) { .story-slide > .story-affiche { transition: none; } }.psf-js .psf-section-media .psf-pod-social-name { color: rgba(255, 255, 255, .88) !important; }
/* Marqué par le script : ce bouton est posé sur un fond CLAIR à l'intérieur de la section.
   Il reprend donc l'apparence normale, quelle que soit la carte qui le porte. Une règle,
   au lieu d'une liste de classes de cartes qui s'allonge à chaque page. */
.psf-js .psf-section-media .btn.ghost.psf-sur-clair {
  /* `!important` ici aussi : certaines pages de démo habillent leurs boutons dans un
     <style> avec un sélecteur d'identifiant, qu'aucune classe ne peut battre. La règle
     ne vise que les boutons dont le script a CONSTATÉ le fond clair. */
  color: var(--navy-900) !important;
  border-color: var(--line) !important;
  background: #fff !important;
}.psf-js .psf-section-media .btn.primary.psf-sur-clair {
  background: var(--navy) !important;
  color: #fff !important;
  border: none !important;
}.psf-js .psf-section-media .btn.psf-sur-clair:focus-visible { outline-color: var(--navy-900); }
/* Lien ordinaire posé à même le voile : il n'a aucun fond opaque au-dessus de lui. */
.psf-js .psf-section-media a.psf-sur-voile:not(.btn) {
  /* `!important` assumé : certains liens de démo portent leur couleur en attribut `style`,
     qu'aucune feuille ne peut battre autrement. La règle ne vise que les liens dont le script
     a CONSTATÉ qu'ils sont posés à même le voile — jamais ceux d'une carte. */
  color: rgba(255, 255, 255, .92) !important;
  text-decoration-color: rgba(244, 196, 101, .65);
}
/* Un filet d'or discret en haut et en bas, pour que la bande se lise comme un cadre voulu. */
.psf-js .psf-section-media::before,
.psf-js .psf-section-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 196, 101, .55) 22%, rgba(244, 196, 101, .55) 78%, transparent 100%);
  z-index: -1;
}.psf-js .psf-section-media::before { top: 0; }
/* Une section qui est déjà une carte blanche (l'appel à l'action) cacherait l'image
   derrière son propre fond : on la rend transparente et pleine largeur, son contenu se
   pose alors directement sur le mur, comme les autres. */
.psf-js .psf-section-media.cta-section {
  /* 09/09/2026 — navy et non `transparent` : depuis que la hauteur PEINTE du fond est bornée,
     tout ce qui dépasse la bande n'avait plus AUCUN fond, et le texte forcé en blanc se
     retrouvait sur le gris clair de la page. Mesuré sur /annonceurs à 500 px : 101 px de
     section découverte sous la bande, bouton fantôme blanc illisible. La propriété raccourcie
     `background` remet `background-color` à transparent — elle écrasait le navy de secours. */
  background: var(--navy-900, #0E1A3A);
  border: 0;
  border-radius: 0;
  max-width: none;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  /* 08/09/2026 : `.cta-section` porte son propre `padding: … 1.5rem`, qui gagnait sur le
     rembourrage calculé de la bande. Résultat mesuré à 1440 px : son contenu commençait à
     24 px quand toutes les autres sections commençaient à 115 px. On lui rend la gouttière. */
  padding-inline: max(1rem, calc((100% - 1180px) / 2));
}.psf-js .psf-section-media::after { bottom: 0; }
/* ─── Duo : une seule image pour deux sections voisines (08/09/2026) ─────────────
 * Deux sections collées qui portaient chacune leur image faisaient un raccord visible au
 * milieu du défilement : la photo repartait de zéro. Le conteneur porte l'image, le voile et
 * les filets ; les sections à l'intérieur gardent leurs couleurs claires et ne dessinent plus
 * rien. Le regard traverse une seule photo. */
.psf-js .psf-media-duo {
  position: relative;
  isolation: isolate;
}.psf-js .psf-media-duo::before,
.psf-js .psf-media-duo::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 196, 101, .55) 22%, rgba(244, 196, 101, .55) 78%, transparent 100%);
  z-index: -1;
}.psf-js .psf-media-duo::before { top: 0; }.psf-js .psf-media-duo::after { bottom: 0; }
/* Les sections intérieures ne tracent ni fond ni filet : le conteneur s'en charge. */
.psf-js .psf-section-media--herite::before,
.psf-js .psf-section-media--herite::after { display: none; }
/* `.strip` trace déjà un trait clair en haut et en bas : sur le navy il doublerait le
   filet d'or et se lirait comme une bavure. Le filet suffit. */
.psf-js .psf-section-media.strip { border-block: 0; }
/* Deux bandes qui se touchent ne doivent pas afficher deux filets colles l'un a l'autre :
   la seconde efface le sien en haut, la première garde le sien en bas. */
.psf-js .psf-section-media + .psf-section-media::before { display: none; }

/* ─── Chiffre premium (07/09/2026) ────────────────────────────────────────────
 * Reprend exactement le traitement du numéro de téléphone du bandeau haut :
 * Inter Tight 800, dégradé blanc → crème → or clippé sur le texte.
 * `color` est posé AVANT le clip : c'est le repli si background-clip n'est pas
 * supporté, ou en impression, ou en contraste forcé — le chiffre reste lisible. */
.psf-figure-premium {
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--gold);
  background: linear-gradient(110deg, #FFFFFF 0%, #FBE7B0 42%, #F4C465 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active), print {
  .psf-figure-premium { -webkit-text-fill-color: currentColor; background: none; color: currentColor; }
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  box-shadow: var(--shadow);
}
.kpi-cell {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-align: left;
  padding-right: 1rem;
  border-right: 1px solid rgba(255,255,255,.08);
}
.kpi-cell:last-child { border-right: none; }
.kpi-value {
  font-size: 2.4rem;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--gold);
  background: linear-gradient(110deg, #FFFFFF 0%, #FBE7B0 42%, #F4C465 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active), print {
  .kpi-value { -webkit-text-fill-color: currentColor; background: none; color: currentColor; }
}
.kpi-label {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
}
.kpi-detail {
  font-size: .82rem;
  color: rgba(255,255,255,.55);
  margin-top: .15rem;
}

/* PAIN / GAIN comparison */
.compare-grid {
  gap: 1.5rem;
}
.pain-card {
  border-left: 4px solid var(--red);
  background: #fff;
}
.pain-card h3 {
  color: var(--red);
}
.pain-card .kicker {
  color: var(--red);
}
/* 07/09/2026 : le vert n'appartient pas à la charte. Fond en deux temps — voile d'or en tête,
   blanc ensuite — filet cuivre à gauche, titres navy, intitulé cuivre. */
.gain-card {
  display: flex;
  flex-direction: column;
  border-left: 4px solid var(--copper-deep);
  /* 07/09/2026 : le voile d'or est posé SUR le fond blanc de la carte, au lieu de le
     remplacer. Avant, les 78 premiers pour cent de la carte étaient translucides : sur une
     page claire cela ne se voyait pas, mais sur une section à fond d'image le navy passait
     au travers et le texte sombre devenait illisible. */
  background:
    linear-gradient(180deg, rgba(244, 196, 101, .14) 0%, rgba(244, 196, 101, .04) 38%, rgba(244, 196, 101, 0) 78%),
    linear-gradient(180deg, #ffffff 0%, #fefcf6 100%);
}
.gain-card h3 {
  color: var(--navy-900);
}
.gain-card .kicker {
  color: var(--copper-deep);
}
.gain-card p:not(.kicker) { margin-bottom: 1.4rem; }
.gain-card .card-actions { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line-warm); }

/* ROI strip */
.roi-section {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.roi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
  /* 07/09/2026 : le dégradé bleu-vert sortait de la charte. Navy profond, filet d'or en tête. */
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy) 100%);
  color: #fff;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  border-top: 3px solid var(--gold);
  box-shadow: 0 18px 44px rgba(14, 26, 58, .28);
}
.roi-cell {
  text-align: center;
  padding: .5rem;
}
.roi-value {
  display: block;
  font-size: 2.6rem;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--gold);
  background: linear-gradient(110deg, #FFFFFF 0%, #FBE7B0 42%, #F4C465 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (forced-colors: active), print {
  .roi-value { -webkit-text-fill-color: currentColor; background: none; color: currentColor; }
}
.roi-label {
  display: block;
  font-size: .82rem;
  margin-top: .5rem;
  color: rgba(255,255,255,.85);
}

/* CTA section */
.cta-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
/* Forcer le centrage des elements dans .section-head (qui est grid par defaut)
   pour que h2 (avec max-width) ne reste pas calé a gauche du grid-cell. */
.cta-section .section-head {
  justify-items: center;
}
.cta-section .section-head h2,
.cta-section .section-head p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.cta-section .actions {
  justify-content: center;
}

/* PRICING */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.price-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  transition: transform .15s ease, box-shadow .15s ease;
  /* Sprint 22 : override le overflow:hidden de .card global pour permettre au badge "LE PLUS DEMANDÉ" de dépasser */
  overflow: visible !important;
}
.price-card::before,
.price-card::after { display: none !important; } /* neutralise bande or + halo du .card global pour les pricing cards (design dédié) */
.price-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.price-card-featured {
  border: 2px solid var(--blue);
  background: linear-gradient(180deg, #fff, #f3f8fc);
  position: relative;
  overflow: visible !important;
}
/* Sprint 22 : badge "LE PLUS DEMANDÉ" repositionné au-dessus de la card (suspendu)
   pour ne plus chevaucher le kicker "PIPELINE DURABLE". */
.price-card-featured .price-card-top {
  padding-top: .4rem; /* laisse respirer le badge qui dépasse au-dessus */
}
.price-card-featured .price-card-top::before {
  content: "LE PLUS DEMANDÉ";
  position: absolute;
  top: -.85rem;       /* sort au-dessus de la card */
  right: 1rem;
  z-index: 5;
  background: linear-gradient(135deg, #F4C465 0%, #C97F1F 100%);
  color: #0E1A3A;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .4rem .85rem;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(14,26,58,.25), 0 0 0 2px #fff;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .price-card-featured .price-card-top::before {
    /* Mobile : badge plus compact mais toujours suspendu */
    font-size: .62rem;
    padding: .35rem .7rem;
    right: .6rem;
    top: -.75rem;
    letter-spacing: .08em;
  }
}
.price-card .kicker {
  color: var(--blue);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}
.price-card h3 {
  margin: .25rem 0 .25rem;
}
.price-amount {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
  line-height: 1.1;
}
.price-unit {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 0 .5rem;
}
.price-lead {
  font-size: .92rem;
  color: var(--muted);
  margin: 0 0 .5rem;
}
.price-section-label {
  margin: .5rem 0 .3rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--ink);
}
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 .5rem;
  font-size: .88rem;
}
.price-list li {
  padding: .25rem 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.price-included li::before {
  content: "+ ";
  color: var(--green);
  font-weight: 700;
}
.price-excluded li::before {
  content: "- ";
  color: var(--red);
  font-weight: 700;
}
.price-excluded li {
  color: var(--muted);
}
.block-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: auto;
}

/* BOOKING */
.booking-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
}
.booking-discovery { border-top: 4px solid var(--blue); }
.booking-demo { border-top: 4px solid var(--teal); }
.booking-scoping { border-top: 4px solid var(--amber); }
.booking-card .kicker {
  color: var(--ink);
  font-weight: 700;
}
.card-meta-label {
  margin: .55rem 0 .15rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.card-meta-value {
  font-size: .9rem;
  margin: 0;
}
.booking-frame-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.5rem;
}
.booking-frame-placeholder {
  background: linear-gradient(135deg, #f5f8fd, #fff);
  border: 2px dashed var(--blue);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  margin: 1.5rem 0;
}
.booking-frame-placeholder .kicker {
  color: var(--blue);
  font-weight: 700;
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.booking-frame-placeholder a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
}

/* HERO TAGLINE */
.hero-tagline {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 60ch;
  margin: .5rem 0 1rem;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 1rem; }
  .roi-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; }
  .roi-row { grid-template-columns: 1fr; }
  .kpi-value { font-size: 2rem; }
  .roi-value { font-size: 2.2rem; }
}

/* ─────────────────────────────────────────────────────────────
   COMPOSANTS GROWTH VIRAL : doctrine, refus, atelier, calculateur
   ───────────────────────────────────────────────────────────── */

/* DOCTRINE / Articles */
.doctrine-card {
  border-left: 4px solid var(--navy);
  background: linear-gradient(180deg, #fff, #fafbfd);
  padding: 1.5rem;
  border-radius: 12px;
  position: relative;
}
.doctrine-card .kicker {
  color: var(--navy);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .78rem;
  text-transform: uppercase;
}
.doctrine-card h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: .35rem 0 .6rem;
  color: var(--ink);
}

/* CE QUE NOUS REFUSONS */
.refuse-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--red);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
}
.refuse-card .kicker {
  color: var(--red);
  font-weight: 800;
  letter-spacing: .08em;
  font-size: .78rem;
  text-transform: uppercase;
}
.refuse-card h3 {
  font-size: 1.1rem;
  line-height: 1.35;
  margin: .35rem 0 .6rem;
}

/* SIGNED LETTER */
.signed-letter {
  background: var(--navy);
  color: #fff;
  padding: 2.5rem 1.5rem;
  border-radius: 16px;
  margin: 2rem 0;
}
.signed-letter-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.signed-letter .eyebrow {
  color: var(--amber);
  letter-spacing: .14em;
  font-weight: 800;
}
.signed-letter h2 {
  color: #fff;
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  line-height: 1.3;
  margin: .8rem 0 1.2rem;
}
.signed-letter p {
  color: rgba(255, 255, 255, .96) !important;
  line-height: 1.75;
  font-size: 1.02rem;
}
/* Centrer la carte signed-letter dans la page (max 880px + auto) */
.signed-letter {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.signed-letter .signature {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-family: Georgia, serif;
  font-style: italic;
  color: rgba(255, 255, 255, .88);
  font-size: .95rem;
  letter-spacing: .02em;
}

/* CODE BLOCK (Atelier) */
.code-block {
  background: #0e1525;
  color: #d8e3f3;
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  overflow-x: auto;
  font-family: "JetBrains Mono", "SF Mono", Consolas, Monaco, monospace;
  font-size: .82rem;
  line-height: 1.55;
  border-left: 4px solid var(--teal);
  margin: 1rem 0;
  box-shadow: var(--shadow);
}
.code-block code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
  white-space: pre;
  display: block;
}

/* CALCULATEUR ROI */
.calculator-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2rem 1.5rem;
}
.calculator-form {
  max-width: 720px;
  margin: 0 auto;
}
/* Calculateurs : header (eyebrow + titre) centré, aligné sur la largeur du formulaire */
.calculator-section .section-head,
#scoring-form .section-head {
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.calc-result {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, #f3f8fc, #fff);
  border: 2px solid var(--blue);
  border-radius: 16px;
}
.calc-result .eyebrow {
  color: var(--blue);
  font-weight: 800;
}
.calc-result h3 {
  font-size: 2.4rem;
  color: var(--navy);
  margin: .3rem 0;
}
.calc-result .kpi-card {
  border-top: 4px solid var(--blue);
  text-align: center;
}
.calc-cta {
  margin-top: 1.5rem;
  text-align: center;
}
.calc-cta p {
  color: var(--muted);
  font-size: .9rem;
  margin-bottom: 1rem;
}
.calc-cta .actions {
  justify-content: center;
}

/* FOOTER SIGNE */
.footer-sign {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .85rem;
  color: rgba(255,255,255,.55) !important;
  font-style: italic;
}
.footer-sign a {
  color: rgba(255,255,255,.75);
  text-decoration: underline;
}
.footer-sign a:hover {
  color: #fff;
}

/* PULL QUOTE (pour citations memorables) */
.pull-quote {
  font-family: Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--navy);
  padding: 1.5rem 1.5rem 1.5rem 2.5rem;
  border-left: 4px solid var(--amber);
  background: #faf6ee;
  border-radius: 0 12px 12px 0;
  margin: 2rem 0;
  font-style: italic;
}
.pull-quote::before {
  content: '\201C';
  font-size: 3rem;
  color: var(--amber);
  line-height: 0;
  vertical-align: -.4em;
  margin-right: .15em;
}

@media (max-width: 700px) {
  .code-block { font-size: .72rem; }
  .calc-result h3 { font-size: 1.6rem; }
}

/* Calculateur HUB - card featured (Marketing Ops = core profil Nelson) */
.calc-hub-card { position: relative; }
.calc-hub-featured {
  border: 2px solid var(--blue);
  background: linear-gradient(180deg, #fff, #f3f8fc);
}
.calc-hub-featured::before {
  content: "Core profil Nelson";
  position: absolute;
  top: -.8rem;
  left: 1.25rem;
  background: var(--blue);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────
   MODAL LEAD CAPTURE (mini-form prototype / calculateur)
   ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.modal-overlay[hidden] {
  display: none !important;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, .72);
  backdrop-filter: blur(4px);
}
.modal-content {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 2rem 2rem 1.5rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(17, 24, 39, .35);
  animation: modalIn .25s ease;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute;
  top: .5rem;
  right: .8rem;
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: .25rem .5rem;
  border-radius: 50%;
  transition: background .15s;
}
.modal-close:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.modal-content .eyebrow { color: var(--amber); margin-bottom: .5rem; }
.modal-content h3 {
  margin: 0 0 .6rem;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--navy);
}
.modal-lead {
  font-size: .95rem;
  color: var(--ink) !important;
  margin: 0 0 1rem;
}
.modal-form {
  padding: 0;
  background: transparent;
  border: none;
}
.modal-form label {
  display: block;
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink);
  margin-bottom: .7rem;
}
.modal-form input {
  display: block;
  width: 100%;
  margin-top: .25rem;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: var(--ink);
}
.modal-form input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}
.modal-note {
  font-size: .8rem;
  color: var(--muted) !important;
  margin: .7rem 0 0;
  text-align: center;
}
.modal-note a { color: var(--blue); text-decoration: underline; }

body.modal-open {
  overflow: hidden;
}

/* Honeypot field (hidden) */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ─────────────────────────────────────────────────────────────
   AJUSTEMENT TEXTE DESCRIPTIONS : noir normal au lieu de muted grey
   ───────────────────────────────────────────────────────────── */
/* Body / paragraphes hors lead : passage en noir lisible (vs muted grey) */
.card p:not(.kicker):not(.modal-lead):not(.modal-note):not(.price-lead):not(.price-unit):not(.price-section-label),
.section split p,
.split p,
section p:not(.lead):not(.kicker):not(.eyebrow):not(.modal-note):not(.modal-lead):not(.footer-sign):not(.signature):not(.hero-tagline) {
  color: #1a1f2e;
}

/* lead reste avec contraste eleve mais legerement plus doux */
.lead,
.hero-tagline {
  color: #2c3444;
}

/* Les eyebrows, kickers, prix, footers restent dans leurs couleurs accent */

/* ─────────────────────────────────────────────────────────────
   HERO BACKGROUND PATTERN (subtil, B2B sober)
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -50px;
  z-index: -2;
  background:
    radial-gradient(ellipse at top right, rgba(39, 95, 143, .10) 0%, transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(192, 133, 82, .12) 0%, transparent 55%),
    linear-gradient(180deg, rgba(232, 237, 242, 1) 0%, rgba(221, 228, 236, .85) 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(24, 35, 58, .035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(24, 35, 58, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

/* ─────────────────────────────────────────────────────────────
   HERO VISUAL : DASHBOARD MOCKUP (remplace l ancien system-map)
   ───────────────────────────────────────────────────────────── */
.hero-visual {
  position: relative;
  padding: 0;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 30px 80px rgba(17, 24, 39, .12),
    0 8px 24px rgba(17, 24, 39, .06);
  border: 1px solid var(--line);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
.dash-header {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem 1rem;
  background: linear-gradient(180deg, #f8f9fc, #f1f3f8);
  border-bottom: 1px solid var(--line);
}
.dash-dots {
  display: flex;
  gap: .35rem;
}
.dash-dots span {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: #cfd6df;
}
.dash-dots span:nth-child(1) { background: #ed6a5e; }
.dash-dots span:nth-child(2) { background: #f4be4f; }
.dash-dots span:nth-child(3) { background: #62c554; }
.dash-tabs {
  display: flex;
  gap: .35rem;
  margin-left: .5rem;
  flex-wrap: wrap;
}
.dash-tab {
  font-size: .72rem;
  padding: .25rem .55rem;
  border-radius: 4px;
  color: var(--muted);
  background: transparent;
  font-weight: 600;
}
.dash-tab.active {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
}
.dash-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  flex: 1;
}
.dash-kpi-hero {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, var(--navy), #243454);
  border-radius: 10px;
  color: #fff;
}
.dash-kpi-hero .dash-kpi-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .6);
  font-weight: 700;
}
.dash-kpi-hero .dash-kpi-value {
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 1.05;
  color: var(--amber);
  letter-spacing: -.02em;
}
.dash-kpi-hero .dash-kpi-trend {
  font-size: .82rem;
  color: rgba(255, 255, 255, .8);
  margin-top: .15rem;
}

.dash-chart {
  width: 100%;
  height: auto;
}

.dash-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.dash-kpi-cell {
  display: flex;
  flex-direction: column;
  padding: .65rem .8rem;
  background: #f8f9fc;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.dash-kpi-cell .dash-kpi-num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1;
}
.dash-kpi-cell .dash-kpi-sub {
  font-size: .68rem;
  color: var(--muted);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}

.dash-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding-top: .5rem;
  border-top: 1px dashed var(--line);
}
.dash-tag {
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: rgba(39, 95, 143, .08);
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.dash-tag:nth-child(2) { background: rgba(47, 118, 109, .1); color: var(--teal); }
.dash-tag:nth-child(3) { background: rgba(183, 121, 31, .1); color: var(--amber); }
.dash-tag:nth-child(4) { background: rgba(143, 45, 45, .08); color: #8f2d2d; }

/* Reset les styles obsoletes du system-map */
.signal-bar, .system-map, .metrics, .node, .line {
  display: none !important;
}

@media (max-width: 900px) {
  .hero-visual {
    min-height: 440px;
  }
  .dash-kpi-hero .dash-kpi-value {
    font-size: 2rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   HERO TEXT-ONLY (pas de dashboard, pleine largeur)
   Utilise sur toutes les pages SAUF l accueil
   ───────────────────────────────────────────────────────────── */
.hero.hero-text-only {
  grid-template-columns: 1fr;
  min-height: auto;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.hero.hero-text-only .hero-copy {
  max-width: 900px;
}
.hero.hero-text-only h1 {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
}
/* Fond premium (dégradé bleu/cuivre + grille) CONSERVÉ sur les pages text-only
   (méthode, à-propos, réalisations…). L'override display:none qui l'effaçait a
   été retiré : le hero avait perdu son arrière-plan vs les autres pages. */
.hero.hero-text-only::before,
.hero.hero-text-only::after {
  display: block;
}

/* ─────────────────────────────────────────────────────────────
   SECTIONS AVEC IMAGE BACKGROUND (Unsplash hotlinks haute resolution)
   - section-image-hero : grande image avec overlay text
   - section-image-side : image cote a cote avec texte
   ───────────────────────────────────────────────────────────── */
.section-image-hero {
  position: relative;
  width: 100%;
  margin: 0;
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
  color: #fff;
  background-size: cover;
  /* 07/09/2026 : cadrage ancré haut et hauteur minimale proportionnelle. Ces bandes sont
     très larges et courtes : avec un cadrage centré, le recadrage cover coupait la tête du
     sujet de `working.jpg` (haut du crâne à 8 % de la hauteur source). La hauteur minimale
     borne le rapport du conteneur, le second terme empêche la bande de manger l'écran. */
  min-height: min(30vw, 60vh);
  background-position: 50% 12%;
  background-repeat: no-repeat;
  isolation: isolate;
}
.section-image-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(24, 35, 58, .88) 0%, rgba(24, 35, 58, .72) 50%, rgba(192, 133, 82, .55) 100%);
}
.section-image-hero .section-inner {
  position: relative;
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  z-index: 1;
}
.section-image-hero .eyebrow { color: var(--amber); }
.section-image-hero h2 {
  color: #fff;
  max-width: 720px;
}
.section-image-hero p {
  color: rgba(255, 255, 255, .9) !important;
  max-width: 640px;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* Image cote droit avec texte cote gauche */
.section-image-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: center;
}
.section-image-side-img {
  position: relative;
  height: 380px;
  border-radius: 16px;
  background-size: cover;
  background-position: center center;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.section-image-side-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(24, 35, 58, .25) 100%);
}

@media (max-width: 900px) {
  .section-image-side { grid-template-columns: 1fr; }
  .section-image-side-img { height: 280px; }
}

/* ─────────────────────────────────────────────────────────────
   CARDS PREMIUM : moitie top navy/cuivre + moitie bas blanc
   Style inspire ASUS premium brochure (or + cuivre brillant)
   ───────────────────────────────────────────────────────────── */

/* Coins decoratifs or (corner brackets) */
.card-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 2;
}
.card-corner-tl {
  top: 10px;
  left: 10px;
  border-top: 1.5px solid var(--amber);
  border-left: 1.5px solid var(--amber);
}
.card-corner-tr {
  top: 10px;
  right: 10px;
  border-top: 1.5px solid var(--amber);
  border-right: 1.5px solid var(--amber);
}

/* BOOKING CARD : top dark + body blanc */
.booking-card {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 50px rgba(17, 24, 39, .10);
  display: flex;
  flex-direction: column;
  min-height: 480px;
}
.booking-card-top {
  position: relative;
  padding: 2rem 1.5rem 1.5rem;
  background: linear-gradient(135deg, var(--navy) 0%, #1f2c4a 60%, var(--copper) 130%);
  color: #fff;
  border-bottom: 2px solid var(--amber);
}
.booking-card-top .kicker {
  color: var(--amber) !important;
  font-weight: 800;
  margin-bottom: .6rem;
}
.booking-card-top h3 {
  color: #fff !important;
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0;
}
.booking-card-body {
  flex: 1;
  padding: 1.4rem 1.5rem 1.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.booking-card-body p { color: var(--ink) !important; margin-bottom: .5rem; }
.booking-card-body .btn { margin-top: auto; }
.booking-card-body ul { padding-left: 1.2rem; margin: .5rem 0 1rem; color: var(--ink); }

/* Variantes tones (laisse les top borders teintees pour la couleur) */
.booking-card.booking-discovery .booking-card-top { border-bottom-color: var(--blue); }
.booking-card.booking-demo .booking-card-top      { border-bottom-color: var(--teal); }
.booking-card.booking-scoping .booking-card-top   { border-bottom-color: var(--copper); }

/* PRICE CARD : meme pattern moitie-haute */
.price-card {
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 50px rgba(17, 24, 39, .10);
  display: flex;
  flex-direction: column;
}
.price-card-top {
  position: relative;
  padding: 1.8rem 1.4rem 1.4rem;
  background: linear-gradient(135deg, var(--navy) 0%, #1f2c4a 60%, var(--copper) 140%);
  color: #fff;
  border-bottom: 2px solid var(--amber);
}
.price-card-top .kicker {
  color: var(--amber) !important;
  margin-bottom: .4rem;
}
.price-card-top h3 {
  color: #fff !important;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 .6rem;
}
.price-card-top .price-amount {
  color: #fff !important;
  font-size: 1.8rem;
  margin: 0;
}
.price-card-top .price-unit {
  color: rgba(255,255,255,.7) !important;
  margin: 0;
}
.price-card-body {
  flex: 1;
  padding: 1.3rem 1.4rem 1.5rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.price-card-body .price-lead { margin-bottom: .8rem; color: var(--ink) !important; }
.price-card-body .btn { margin-top: auto; }

/* Featured price-card : top en gradient cuivre brillant + or */
.price-card-featured .price-card-top {
  background: linear-gradient(135deg, var(--copper) 0%, #b7791f 60%, #d4a04e 120%);
  border-bottom-color: var(--amber);
}
/* Sur fond cuivre, l eyebrow amber devient invisible : forcer blanc */
.price-card-featured .price-card-top .kicker {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}

/* ─────────────────────────────────────────────────────────────
   SECTION PREMIUM DARK (style ASUS - lignes or geometriques)
   Pour pages strategiques (hero QSE, hero offre haute valeur, etc.)
   ───────────────────────────────────────────────────────────── */
.section-premium-dark {
  position: relative;
  background: linear-gradient(135deg, #0e1525 0%, var(--navy) 40%, #1a2237 100%);
  color: #fff;
  padding: clamp(4rem, 8vw, 7rem) 0;
  overflow: hidden;
  isolation: isolate;
}

/* Lignes or geometriques en arriere-plan (style ASUS) */
.section-premium-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(135deg, transparent 48%, rgba(212, 160, 78, .12) 49%, rgba(212, 160, 78, .25) 50%, rgba(212, 160, 78, .12) 51%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(212, 160, 78, .08) 49%, rgba(212, 160, 78, .18) 50%, rgba(212, 160, 78, .08) 51%, transparent 52%);
  background-size: 240px 240px, 380px 380px;
  background-position: 0 0, 80px 80px;
  opacity: .9;
}

/* Coins or brackets (corner accents premium) */
.section-premium-dark::after {
  content: "";
  position: absolute;
  inset: 1.5rem;
  z-index: 0;
  pointer-events: none;
  background:
    /* Top-left */
    linear-gradient(to right, var(--amber) 0, var(--amber) 60px, transparent 60px) top left/100% 1.5px no-repeat,
    linear-gradient(to bottom, var(--amber) 0, var(--amber) 60px, transparent 60px) top left/1.5px 100% no-repeat,
    /* Top-right */
    linear-gradient(to left, var(--amber) 0, var(--amber) 60px, transparent 60px) top right/100% 1.5px no-repeat,
    linear-gradient(to bottom, var(--amber) 0, var(--amber) 60px, transparent 60px) top right/1.5px 100% no-repeat,
    /* Bottom-left */
    linear-gradient(to right, var(--amber) 0, var(--amber) 60px, transparent 60px) bottom left/100% 1.5px no-repeat,
    linear-gradient(to top, var(--amber) 0, var(--amber) 60px, transparent 60px) bottom left/1.5px 100% no-repeat,
    /* Bottom-right */
    linear-gradient(to left, var(--amber) 0, var(--amber) 60px, transparent 60px) bottom right/100% 1.5px no-repeat,
    linear-gradient(to top, var(--amber) 0, var(--amber) 60px, transparent 60px) bottom right/1.5px 100% no-repeat;
}

.section-premium-dark .section-inner {
  position: relative;
  z-index: 2;
  width: min(1100px, calc(100% - 4rem));
  margin: 0 auto;
}

.section-premium-dark .eyebrow {
  color: var(--amber) !important;
  letter-spacing: .12em;
}
.section-premium-dark h1,
.section-premium-dark h2 {
  color: #fff;
}
.section-premium-dark h2 {
  background: linear-gradient(135deg, #fff 0%, #f6e5c8 70%, var(--amber) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-premium-dark p {
  color: rgba(255, 255, 255, .85) !important;
}
.section-premium-dark .btn.primary {
  background: linear-gradient(135deg, var(--amber), var(--copper));
  color: var(--navy-900, #0E1A3A);  /* voir la note du 09/09 sur le contraste */
  border: none;
}
.section-premium-dark .btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .05);
}

/* QSE page : style sobre pour les sections detaillees */
.qse-card {
  padding: 1.8rem 1.6rem;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--copper);
  box-shadow: 0 14px 36px rgba(17, 24, 39, .07);
}
.qse-card h3 {
  color: var(--navy);
  font-size: 1.3rem;
  line-height: 1.3;
  margin-bottom: .5rem;
}
.qse-card .kicker {
  color: var(--copper) !important;
}
.qse-card ul {
  list-style: none;
  padding-left: 0;
  margin: .8rem 0;
}
.qse-card ul li {
  padding: .3rem 0 .3rem 1.4rem;
  position: relative;
  color: var(--ink);
}
.qse-card ul li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--amber);
  font-weight: 800;
}


/* ─────────────────────────────────────────────────────────────
   PREMIUM-DARK V2 : enrichissement (3 angles or, brackets +, shimmer)
   Style ASUS pousse pour pages vitrine
   ───────────────────────────────────────────────────────────── */
.section-premium-dark {
  background:
    radial-gradient(ellipse at top right, rgba(192, 133, 82, .20) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(183, 121, 31, .15) 0%, transparent 55%),
    linear-gradient(135deg, #0c1220 0%, var(--navy) 50%, #1a2438 100%);
}

/* Pattern lignes or : 3 angles superposes pour effet ASUS premium */
.section-premium-dark::before {
  background-image:
    /* Diagonale 135 (epaisse) */
    linear-gradient(135deg, transparent 47%, rgba(212, 160, 78, .14) 49%, rgba(212, 160, 78, .28) 50%, rgba(212, 160, 78, .14) 51%, transparent 53%),
    /* Diagonale 45 (fine) */
    linear-gradient(45deg, transparent 48%, rgba(212, 160, 78, .08) 49.5%, rgba(212, 160, 78, .18) 50%, rgba(212, 160, 78, .08) 50.5%, transparent 52%),
    /* Diagonale 90 (verticale fine) */
    linear-gradient(90deg, transparent 49%, rgba(212, 160, 78, .04) 50%, transparent 51%);
  background-size: 280px 280px, 420px 420px, 100px 100px;
  background-position: 0 0, 100px 100px, 50px 50px;
  opacity: .9;
}

/* Brackets aux 4 coins (plus prononces) */
.section-premium-dark::after {
  inset: 2rem;
  background:
    linear-gradient(to right, var(--amber) 0, var(--amber) 80px, transparent 80px) top left/100% 2px no-repeat,
    linear-gradient(to bottom, var(--amber) 0, var(--amber) 80px, transparent 80px) top left/2px 100% no-repeat,
    linear-gradient(to left, var(--amber) 0, var(--amber) 80px, transparent 80px) top right/100% 2px no-repeat,
    linear-gradient(to bottom, var(--amber) 0, var(--amber) 80px, transparent 80px) top right/2px 100% no-repeat,
    linear-gradient(to right, var(--amber) 0, var(--amber) 80px, transparent 80px) bottom left/100% 2px no-repeat,
    linear-gradient(to top, var(--amber) 0, var(--amber) 80px, transparent 80px) bottom left/2px 100% no-repeat,
    linear-gradient(to left, var(--amber) 0, var(--amber) 80px, transparent 80px) bottom right/100% 2px no-repeat,
    linear-gradient(to top, var(--amber) 0, var(--amber) 80px, transparent 80px) bottom right/2px 100% no-repeat;
}

/* Logo / mark or stylise en haut a gauche (subtil) */
.section-premium-dark .premium-mark {
  position: absolute;
  top: 2.5rem;
  left: 2.5rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .25em;
  color: var(--amber);
  z-index: 3;
  text-transform: uppercase;
}

/* Eyebrow premium — Sprint 26z14n : barre horizontale or supprimée (jugée superflue par Nelson).
   Garde le padding-bottom pour préserver l'espacement, mais sans la ligne dorée ::after. */
.section-premium-dark .eyebrow {
  position: relative;
  display: inline-block;
  padding-bottom: .35rem;
}

/* H1/H2 avec effet gravure (text-shadow subtil) */
.section-premium-dark h1,
.section-premium-dark h2 {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

/* Boutons primary : effet metallic shimmer au hover */
.section-premium-dark .btn.primary {
  background: linear-gradient(135deg, var(--amber) 0%, #d4a04e 50%, var(--copper) 100%);
  background-size: 200% 200%;
  background-position: 0 0;
  transition: background-position .4s ease, box-shadow .3s;
  box-shadow: 0 4px 12px rgba(192, 133, 82, .3);
}
.section-premium-dark .btn.primary:hover {
  background-position: 100% 100%;
  box-shadow: 0 8px 24px rgba(192, 133, 82, .5);
}
.section-premium-dark .btn.ghost {
  color: #fff;
  border: 1.5px solid rgba(212, 160, 78, .5);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(8px);
  transition: border-color .3s, background .3s;
}
.section-premium-dark .btn.ghost:hover {
  border-color: var(--amber);
  background: rgba(212, 160, 78, .1);
}

/* Hover sur cards premium (booking + price) : leger lift + glow or */
.booking-card,
.price-card {
  transition: transform .25s ease, box-shadow .3s ease;
}
.booking-card:hover,
.price-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 64px rgba(17, 24, 39, .14),
    0 0 0 1px rgba(212, 160, 78, .3);
}
.booking-card:hover .booking-card-top,
.price-card:hover .price-card-top {
  border-bottom-color: var(--amber);
}

/* Card corners or au hover : s etendent legerement */
.booking-card .card-corner,
.price-card .card-corner {
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
.booking-card:hover .card-corner,
.price-card:hover .card-corner {
  width: 28px;
  height: 28px;
  opacity: 1;
}

/* CTA section premium dark pour pages preuves (variante reduite) */
.cta-section-premium {
  background: linear-gradient(135deg, var(--navy) 0%, #1f2c4a 60%, var(--copper) 130%);
  color: #fff;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
}
.cta-section-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49%, rgba(212, 160, 78, .15) 50%, transparent 51%);
  background-size: 140px 140px;
  pointer-events: none;
  opacity: .8;
}
.cta-section-premium .section-head {
  position: relative;
  z-index: 1;
  justify-items: center;
}
.cta-section-premium .eyebrow { color: var(--amber); }
/* centre le bloc h2/p (le global h2{max-width:820px} le calerait à gauche sinon) */
.cta-section-premium h2,
.cta-section-premium p { margin-left: auto; margin-right: auto; }
.cta-section-premium h2 { color: #fff; }
.cta-section-premium .actions { justify-content: center; position: relative; z-index: 1; }
.cta-section-premium .btn.primary {
  background: linear-gradient(135deg, var(--amber), var(--copper));
  border: none;
  color: var(--navy-900, #0E1A3A);  /* voir la note du 09/09 sur le contraste */
}
.cta-section-premium .btn.ghost {
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  background: transparent;
}


/* ─────────────────────────────────────────────────────────────
   DOCTRINE & REFUSE CARDS : enrichissement avec brackets or
   Style ASUS premium sans modification HTML
   ───────────────────────────────────────────────────────────── */

/* Doctrine card : top bar navy + brackets or aux 2 coins haut */
.doctrine-card {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  border-left: 4px solid var(--navy);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 2rem 1.6rem 1.6rem;
  transition: transform .25s ease, box-shadow .3s ease;
}
.doctrine-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--navy) 0%, var(--copper) 70%, var(--amber) 100%);
}
.doctrine-card::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-top: 1.5px solid var(--amber);
  border-right: 1.5px solid var(--amber);
  pointer-events: none;
}
.doctrine-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(17, 24, 39, .12), 0 0 0 1px rgba(212, 160, 78, .25);
}
.doctrine-card .kicker {
  color: var(--copper) !important;
  font-weight: 800;
  letter-spacing: .12em;
}

/* Refuse card : top bar rouge + brackets or */
.refuse-card {
  position: relative;
  background: #fff;
  border-left: 4px solid var(--red);
  border-top: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 2rem 1.6rem 1.6rem;
  transition: transform .25s ease, box-shadow .3s ease;
}
.refuse-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--red) 0%, var(--copper) 100%);
}
.refuse-card::after {
  content: "";
  position: absolute;
  top: 16px;
  right: 16px;
  width: 20px;
  height: 20px;
  border-top: 1.5px solid var(--amber);
  border-right: 1.5px solid var(--amber);
  pointer-events: none;
}
.refuse-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(17, 24, 39, .12), 0 0 0 1px rgba(143, 45, 45, .25);
}
.refuse-card .kicker {
  color: var(--red) !important;
}

/* ─────────────────────────────────────────────────────────────
   FOOTER ENRICHI - lignes or geometriques style ASUS
   ───────────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  background: linear-gradient(135deg, #0c1220 0%, var(--navy) 60%, #1a2438 100%);
  color: rgba(255, 255, 255, .8);
  padding: 3rem clamp(1rem, 4vw, 3rem) 2.5rem;
  border-top: 2px solid var(--copper);
  overflow: hidden;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 49%, rgba(212, 160, 78, .08) 50%, transparent 51%);
  background-size: 200px 200px;
  opacity: .7;
  pointer-events: none;
}
.site-footer > * {
  position: relative;
  z-index: 1;
}
.site-footer strong {
  color: var(--amber);
  font-size: 1.1rem;
  letter-spacing: .05em;
}
.site-footer p {
  color: rgba(255, 255, 255, .75) !important;
  line-height: 1.6;
}
.site-footer .footer-sign {
  border-top: 1px solid rgba(212, 160, 78, .2);
  margin-top: 1.2rem;
  padding-top: 1rem;
  color: rgba(255, 255, 255, .55) !important;
}
.site-footer .footer-sign a {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.site-footer .footer-sign a:hover {
  border-bottom-color: var(--amber);
}
.site-footer nav a {
  color: rgba(255, 255, 255, .65);
  padding: .35rem .6rem;
  border-radius: 4px;
  transition: color .2s, background .2s;
}
.site-footer nav a:hover {
  color: var(--amber);
  background: rgba(212, 160, 78, .08);
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — fixes pour ecrans < 768px
   - Titres h1/h2 ramenes a une taille lisible sans deborder
   - Premium-mark badge en position relative (plus en absolute qui chevauche)
   - Section padding reduit
   - Hyphenation / word-break sur les longs mots
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ANTI-COUPURE DES MOTS - regle ULTRA-FORTE !important
   Empeche TOUTE coupure automatique (ré-ponse, exé-cution, ir-ritants)
   En cas de mot trop long, il passe sur la ligne suivante ENTIER.
   ═══════════════════════════════════════════════════════════════ */
*,
h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd,
.eyebrow, .kicker, .lead, .form-note,
.btn, .pillar-row span, .evidence-list span {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
}

h1, h2, h3, h4, h5, h6,
p, span, a, li, dt, dd,
.eyebrow, .kicker, .lead {
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  word-break: normal !important;
}

/* Sur mobile : si le mot ne tient vraiment pas, on permet la coupure SANS hyphen */
@media (max-width: 480px) {
  h1, h2, h3 {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
}

/* Seuls les conteneurs avec contenu user-genere (URLs, ids) gardent break-word */
.code-block, code, pre {
  overflow-wrap: anywhere !important;
  hyphens: none !important;
}

@media (max-width: 768px) {
  /* Hero : reduire le h1 drastiquement pour eviter le debordement */
  h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em;
  }

  h2 {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    line-height: 1.15 !important;
  }

  /* Sprint 23 : Premium-mark badge CENTRÉ horizontalement en haut du cadre or sur mobile
     (au lieu d'aligné à gauche). Le parent .section-inner a padding 2.5rem horizontal. */
  .section-premium-dark .premium-mark {
    position: static !important;
    display: flex !important;                          /* flex pour permettre margin auto */
    width: fit-content !important;
    margin: 0 auto 1.8rem auto !important;             /* margin:0 auto = centré horizontalement */
    padding: .45rem .85rem .45rem .6rem !important;
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    max-width: 100% !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    z-index: 2;
    gap: .4rem !important;
    box-sizing: border-box !important;
  }
  /* Aussi : centrer l'eyebrow et h1 du hero sur mobile pour cohérence avec le badge */
  .section-premium-dark .section-inner > .eyebrow,
  .section-premium-dark .section-inner > .premium-mark + .eyebrow {
    /* L'eyebrow et le h1 restent alignés à gauche par défaut — c'est voulu pour la lisibilité du contenu.
       Seul le badge est centré. */
  }
  .premium-mark span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }
  /* Réduire l'icône SVG du badge à l'intérieur (sur mobile) */
  .section-premium-dark .premium-mark .premium-mark-icon {
    width: .85rem !important;
    height: .85rem !important;
    max-width: .85rem !important;
    max-height: .85rem !important;
  }

  /* Section premium dark : padding-top GENEREUX 4rem pour passer SOUS les
     brackets or de 80px = 5rem (4rem + 1rem de marge propre dans le cadre) */
  .section-premium-dark {
    padding: 4.5rem 0 clamp(2rem, 6vw, 3rem) 0 !important;
    overflow: hidden !important;  /* Fix iOS : clip tout débordement horizontal des descendants */
  }
  /* Sprint 23 : .section-inner avec padding horizontal renforcé pour iOS Safari
     (qui peut mal interpréter width:min() avec calc()). Approche prévisible : padding direct. */
  .section-premium-dark .section-inner {
    width: 100% !important;
    max-width: 1100px !important;
    padding: 1rem 2.5rem 0 !important;   /* 2.5rem horizontal = badge respire DANS le cadre or (qui est à inset 1.5rem) */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    position: relative;
    z-index: 1;
  }
  .section-premium-dark .eyebrow {
    margin: 0 0 .9rem 0 !important;
    display: block !important;
    line-height: 1.45;
  }

  /* Brackets or reduits sur mobile : 80px etait trop long et le badge chevauchait
     Now 45px (≈2.8rem) pour mieux delimiter le cadre sans gener le badge */
  .section-premium-dark::after {
    background:
      linear-gradient(to right, var(--amber) 0, var(--amber) 45px, transparent 45px) top left/100% 2px no-repeat,
      linear-gradient(to bottom, var(--amber) 0, var(--amber) 45px, transparent 45px) top left/2px 100% no-repeat,
      linear-gradient(to left, var(--amber) 0, var(--amber) 45px, transparent 45px) top right/100% 2px no-repeat,
      linear-gradient(to bottom, var(--amber) 0, var(--amber) 45px, transparent 45px) top right/2px 100% no-repeat,
      linear-gradient(to right, var(--amber) 0, var(--amber) 45px, transparent 45px) bottom left/100% 2px no-repeat,
      linear-gradient(to top, var(--amber) 0, var(--amber) 45px, transparent 45px) bottom left/2px 100% no-repeat,
      linear-gradient(to left, var(--amber) 0, var(--amber) 45px, transparent 45px) bottom right/100% 2px no-repeat,
      linear-gradient(to top, var(--amber) 0, var(--amber) 45px, transparent 45px) bottom right/2px 100% no-repeat !important;
  }
  .section-premium-dark .actions {
    flex-direction: column;
    align-items: stretch;
  }
  .section-premium-dark .actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Hero standard : reduire le padding */
  .hero {
    padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
  }

  /* Boutons sur mobile : pleine largeur et hauteur confortable */
  .actions {
    flex-direction: column;
    width: 100%;
    gap: .6rem;
  }
  .actions .btn,
  .actions a.btn,
  .actions button.btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: .85rem 1.2rem;
  }

  /* Site nav : meilleur espacement sur mobile */
  .site-nav {
    flex-direction: column;
    width: 100%;
    gap: .25rem;
  }
  .site-nav a {
    width: 100%;
    padding: .8rem 1rem;
    text-align: left;
  }

  /* Header : agencement reduit */
  .site-header {
    padding: .7rem .75rem;
    grid-template-columns: auto 1fr;
    gap: .35rem;
    overflow: hidden;  /* protection : empêche tout débordement horizontal du header */
  }
  .brand {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    gap: 0;
    flex-shrink: 1;
  }
  .brand-mark {
    width: 1.85rem !important;
    height: 1.85rem !important;
    max-width: 1.85rem !important;
    max-height: 1.85rem !important;
    margin-right: -0.45rem;
  }
  .brand-word {
    font-size: .82rem !important;
    letter-spacing: .01em;
    min-width: 0;
    flex-shrink: 1;
  }
  /* Sprint 23 : .nav-install-mobile reste caché — doublon supprimé.
     Le bouton header .site-header-install est le seul actif sur mobile. */

  /* Footer : empile verticalement, padding reduit */
  .site-footer {
    padding: 2rem 1.25rem;
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  /* Pricing / booking cards : empile et reduit */
  .pricing-grid,
  .booking-grid {
    grid-template-columns: 1fr !important;
    gap: 1.2rem;
  }

  /* Grid two / three / four : empile sur mobile */
  .grid.two,
  .grid.three,
  .grid.four {
    grid-template-columns: 1fr !important;
  }

  /* Step (methode) : empile au lieu de 3 colonnes */
  .step {
    grid-template-columns: 1fr !important;
    gap: .5rem;
  }

  /* Calculator form : champs en colonne */
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sections : padding standard */
  .section {
    padding: 2rem 1rem !important;
  }

  /* Modal : occupe presque tout l ecran */
  .modal-content {
    max-width: calc(100vw - 1rem);
    margin: .5rem;
    padding: 1.5rem 1.25rem;
  }
  .modal-mark {
    width: 2.6rem !important;
    height: 2.6rem !important;
  }

  /* Evidence list pills : un peu plus compactes */
  .evidence-list span {
    padding: .65rem 1rem;
    font-size: .92rem;
  }

  /* Founder portrait : centre et taille adaptee */
  .founder-portrait img {
    width: 100px !important;
    height: 100px !important;
  }

  /* Eyebrow : letter-spacing reduit pour eviter overflow */
  .eyebrow {
    font-size: .66rem;
    letter-spacing: .12em;
  }

  /* Premium-mark icone : taille reduite proportionnellement */
  .premium-mark-icon {
    width: .92rem !important;
    height: .92rem !important;
  }
}

/* Sprint 22-23 : palier intermédiaire 480px (iPhone SE 2-3, Pixel 4a) */
@media (max-width: 480px) {
  html, body { overflow-x: hidden !important; }
  .site-header {
    padding: .6rem .6rem !important;
    gap: .3rem !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .brand {
    min-width: 0 !important;
    overflow: hidden !important;
    flex-shrink: 1 !important;
  }
  .brand-word {
    font-size: .76rem !important;
    letter-spacing: 0 !important;
    min-width: 0 !important;
  }
  .brand-mark {
    width: 1.65rem !important;
    height: 1.65rem !important;
    max-width: 1.65rem !important;
    max-height: 1.65rem !important;
    margin-right: -0.35rem !important;
    flex-shrink: 0 !important;
  }
  /* Nav-toggle (Menu button) plus compact pour laisser respirer le brand */
  .nav-toggle {
    font-size: .78rem !important;
    padding: .3rem .55rem !important;
    flex-shrink: 0 !important;
  }
}

/* Tres petits ecrans (Galaxy Fold, iPhone SE 1G) */
@media (max-width: 380px) {
  h1 {
    font-size: clamp(1.7rem, 9vw, 2.3rem) !important;
  }
  /* Sprint 23 : badge premium-mark CENTRÉ sur très petits écrans (Galaxy Fold, iPhone SE 1G) */
  .section-premium-dark .section-inner {
    padding: .8rem 2rem 0 !important;
  }
  .section-premium-dark .premium-mark {
    display: flex !important;
    width: fit-content !important;
    margin: 0 auto 1.5rem auto !important;             /* centré horizontalement */
    font-size: .55rem !important;
    padding: .35rem .65rem .35rem .45rem !important;
    max-width: 100% !important;
    letter-spacing: .1em !important;
    gap: .3rem !important;
    align-items: center;
    justify-content: center;
  }
  .section-premium-dark .premium-mark .premium-mark-icon {
    width: .75rem !important;
    height: .75rem !important;
    max-width: .75rem !important;
    max-height: .75rem !important;
  }
  .site-header { padding: .5rem .5rem !important; gap: .25rem !important; }
  .brand-word { font-size: .68rem !important; letter-spacing: -.01em !important; }
  .brand-mark { width: 1.5rem !important; height: 1.5rem !important; max-width: 1.5rem !important; max-height: 1.5rem !important; margin-right: -0.3rem !important; }
  .nav-toggle { font-size: .72rem !important; padding: .28rem .5rem !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOME HERO PREMIUM-DARK — meme cadre que /a-propos /offres /realisations
   Layout en 2 colonnes desktop, empile sur mobile
   ═══════════════════════════════════════════════════════════════════════ */
.home-hero-premium {
  /* herite de .section-premium-dark : gradient navy + brackets or */
}
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 480px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: 1rem clamp(1.5rem, 4vw, 2.5rem) 0;
}
.hero-copy-premium { color: #fff; }

/* ─── Héros de l'Accueil : le visuel devient le FOND de la section (07/09/2026) ──────
 * Il n'y a plus de vignette dans la grille — c'était un second cadre dans le cadre.
 * Le média est un enfant direct de la section, sous le cadre doré et sous le texte.
 * Conditionné par .psf-hero-media : sans fichier, le héros illustré d'origine
 * est rendu à l'identique et rien de ce qui suit ne s'applique. */
.psf-js .psf-hero-media > .hero-media-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}.psf-js .psf-hero-media > .hero-media-bg .media-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}.psf-js .psf-hero-media > .hero-media-bg .media-hero::after { display: none; }
/* Voile de lisibilité : dense à gauche où se pose le texte, ouvert à droite sur l'image. */
.psf-js .psf-hero-media > .hero-media-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 07/09/2026, essai « couleur » : le voile se resserre sur la colonne de texte et
     libère les deux tiers droits, pour que l'image garde ses couleurs et ses reflets.
     Le contraste sous le texte est mesuré, pas estimé — voir la feuille de déploiement. */
  background:
    linear-gradient(90deg, rgba(14, 26, 58, .86) 0%, rgba(14, 26, 58, .78) 26%, rgba(14, 26, 58, .50) 46%, rgba(14, 26, 58, .14) 66%, rgba(14, 26, 58, .02) 84%, rgba(14, 26, 58, 0) 100%),
    linear-gradient(0deg, rgba(14, 26, 58, .22) 0%, rgba(14, 26, 58, 0) 30%),
    /* Bande haute : c'est là que passe le titre, et c'est là que la baie vitrée est la plus
       claire. Sans ce troisième voile le titre tombait à 2,78:1, sous le seuil de 3:1. */
    linear-gradient(180deg, rgba(14, 26, 58, .40) 0%, rgba(14, 26, 58, .22) 34%, rgba(14, 26, 58, 0) 62%);
}
/* La grille perd sa colonne de droite : le texte occupe la moitié gauche, l'image respire à droite. */
/* Le fond porte déjà la hauteur : la respiration verticale se resserre et le titre descend d'un cran.
   Mesuré à 1440 x 900 : le bas des deux boutons passe de 1 113 px à 649 px, donc dans le premier écran. */
.psf-js .psf-hero-media { padding-block: clamp(2.5rem, 3.5vw, 3.25rem); }.psf-js .psf-hero-media h1 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1.08; }.psf-js .psf-hero-media .home-hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 2.6rem; }

/* ─── Le même héros pour les autres pages (07/09/2026) ───────────────────────
 * Les héros secondaires sont tous rendus par render_hero() : ils partagent la
 * structure .section-premium-dark > .section-inner. La classe psf-hero-media
 * leur applique le traitement de l'Accueil — visuel en fond, voile navy, texte
 * posé dessus — dès qu'un fichier hero-<slug> existe. Sans fichier, rien ne change. */
.psf-js .psf-hero-media > .section-inner { position: relative; z-index: 2; padding-top: 2.6rem; }
/* Sur un écran très large, le héros reste court alors que la largeur grandit : le rapport
   du conteneur atteint 4:1 et le recadrage coupe de nouveau la tête. Une hauteur minimale
   proportionnelle à la largeur borne le rapport ; le second terme empêche le héros de
   dépasser les trois quarts de l'écran, pour que les boutons restent visibles. */
.psf-js .psf-hero-media { min-height: min(34vw, 72vh); }
/* Cadrage du fond. Première tentative : ancrer à 8 % pour sauver les visages — elle a
   sauvé la tête et coupé la tablette. La leçon : aucune valeur d'object-position ne peut
   montrer 70 % de la hauteur quand le conteneur n'en laisse voir que 60. Le plan a donc
   été RECADRÉ à la source sur la fenêtre utile (tête → tablette, 8 % à 78 %), image ET
   vidéo, ce qui ramène le rapport de la source à 2,56:1 — proche de celui du héros.
   Le cadrage peut dès lors rester centré, avec un léger biais vers le haut. */
.psf-js .psf-hero-media .media-hero > img,
.psf-js .psf-hero-media .media-hero > video { object-position: 50% 35%; }  /* dégage la pastille PROCESPHERE · … */
.psf-js .psf-hero-media > .section-inner > .eyebrow,
.psf-js .psf-hero-media > .section-inner > h1,
.psf-js .psf-hero-media > .section-inner > .lead,
.psf-js .psf-hero-media > .section-inner > .actions { max-width: min(680px, 62%); }.psf-js .psf-hero-media > .section-inner > h1 {
  background: linear-gradient(135deg, #fff 0%, #fff 50%, rgba(244, 196, 101, .95) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.2rem, 3.6vw, 3.3rem);
  line-height: 1.08;
}.psf-js .psf-hero-media > .section-inner > .lead { color: rgba(255, 255, 255, .92) !important; line-height: 1.65; }
@media (max-width: 900px) {
  .psf-hero-media > .section-inner > .eyebrow,
  .psf-hero-media > .section-inner > h1,
  .psf-hero-media > .section-inner > .lead,
  .psf-hero-media > .section-inner > .actions { max-width: 100%; }
}  /* dégage le badge PROCESPHERE · ACCUEIL */
.psf-js .psf-hero-media .hero-copy-premium { max-width: min(680px, 62%); }
@media (max-width: 900px) {
  .psf-hero-media .hero-copy-premium { max-width: 100%; }
  .psf-hero-media > .hero-media-bg::after {
    background: linear-gradient(180deg, rgba(14, 26, 58, .74) 0%, rgba(14, 26, 58, .93) 44%, rgba(14, 26, 58, .97) 100%);
  }
}
.hero-copy-premium .eyebrow {
  color: var(--amber) !important;
  font-weight: 800;
  letter-spacing: .15em;
}
.hero-copy-premium h1 {
  color: #fff;
  margin: .6rem 0 1rem;
  background: linear-gradient(135deg, #fff 0%, #fff 50%, rgba(244,196,101,.95) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy-premium .lead {
  color: rgba(255, 255, 255, .9) !important;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  font-size: 1.05rem;
}
.hero-copy-premium .actions .btn.primary {
  background: linear-gradient(135deg, var(--amber), var(--copper));
  border: none;
  color: var(--navy-900, #0E1A3A);  /* voir la note du 09/09 sur le contraste */
  box-shadow: 0 6px 18px rgba(244, 196, 101, .25);
}
.hero-copy-premium .actions .btn.ghost {
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  background: rgba(255,255,255,.05);
}
.hero-copy-premium .actions .btn.ghost:hover {
  background: rgba(255,255,255,.12);
}

/* Le dashboard mockup reste avec son fond clair pour contraster */
.home-hero-premium .hero-visual {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35), 0 0 0 1px rgba(244, 196, 101, .2);
  overflow: hidden;
  position: relative;
  z-index: 2;
}

@media (max-width: 860px) {
  .home-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
@media (max-width: 768px) {
  .home-hero-grid {
    padding: .6rem 1.25rem 0;
  }
  .hero-copy-premium h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    line-height: 1.1 !important;
  }
  .hero-copy-premium .lead {
    font-size: .98rem;
  }
}

/* ─── Thème « une image par section » : les sections qui SONT elles-mêmes une carte (08/09/2026) ───
 * Trois sections du site ne sont pas des bandes mais des cartes : la lettre signée (À propos,
 * Politique QSE), le calculateur (les cinq pages de calcul) et le rappel du blog. Leur fond opaque
 * masquait l'image qu'on venait de leur donner. La règle est la même partout : la SECTION
 * redevient une bande, et la carte se resserre sur ce qui doit rester lisible — la lettre, le
 * formulaire. C'est la leçon déjà apprise avec l'assistant de diagnostic : une carte opaque règle
 * la lisibilité d'un coup, au lieu de repeindre ses champs un par un. */
.psf-js .psf-section-media.signed-letter {
  /* 09/09/2026 — navy et non `transparent`, MÊME RAISON QUE `.cta-section` : la propriété
     raccourcie `background` remet `background-color` à transparent et écrase le navy de
     secours. Depuis que la hauteur PEINTE est bornée, tout ce qui dépasse la bande se
     retrouvait sans fond, texte blanc sur le gris clair de la page. Mesuré à 375 px :
     297 px découverts sur /a-propos, 215 px sur /politique-qse, signature à 1,18:1. */
  background: var(--navy-900, #0E1A3A);
  border-radius: 0;
  max-width: none;
  /* `.signed-letter` portait `margin: 2rem 0` : en carte c'était une respiration, en bande
     cela ouvrait deux bandeaux clairs entre deux sections illustrées. */
  margin: 0;
  padding-block: clamp(3rem, 5vw, 4.4rem);
  padding-inline: max(1rem, calc((100% - 1180px) / 2));
}
/* 08/09/2026, correction demandée par Nelson : PAS de carte. L'image court sur toute la largeur,
   le voile bleu nuit transparent la calme, et la lettre s'écrit directement dessus — exactement
   le régime des autres sections. La colonne de lecture reste étroite pour que la ligne se lise ;
   c'est le seul reste de l'ancienne carte. */
.psf-js .psf-section-media.signed-letter .signed-letter-inner {
  max-width: 820px;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
.psf-js .psf-section-media.calculator-section {
  /* 09/09/2026 — navy et non `transparent`, MÊME RAISON QUE `.cta-section` : la propriété
     raccourcie `background` remet `background-color` à transparent et écrase le navy de
     secours. Depuis que la hauteur PEINTE est bornée, tout ce qui dépasse la bande se
     retrouvait sans fond, texte blanc sur le gris clair de la page. Mesuré à 375 px :
     coupure franche navy → gris clair au tiers des cinq pages de calcul. */
  background: var(--navy-900, #0E1A3A);
  border: 0;
  border-radius: 0;
  padding-block: clamp(3rem, 5vw, 4.4rem);
  padding-inline: max(1rem, calc((100% - 1180px) / 2));
}
/* Le formulaire garde ses intitulés sombres et ses champs blancs : la carte les porte.
   Le panneau de résultat (.calc-result) a déjà son propre fond clair. */
.psf-js .psf-section-media.calculator-section .calculator-form {
  background: rgba(255, 255, 255, .96);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.2rem, 2.8vw, 1.9rem);
  box-shadow: 0 18px 44px rgba(14, 26, 58, .28);
}
/* Blog : le rappel de fin d'article portait son fond clair en style en ligne, ce qu'aucune
   règle ne peut neutraliser. Il est passé en classe, et cède la place à l'image. */
.psf-blog-cta { background: #eef2f8; border-top: 1px solid #d8dde5; }.psf-js .psf-blog-cta.psf-section-media { background: var(--navy-900, #0E1A3A); border-top: 0; }
/* Les pages courtes en gabarit « légal » (Merci) portent un h1, pas un h2. */
.psf-js .psf-section-media > h1 { color: #fff; }.psf-js .psf-section-media.legal > .actions .btn.ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }

/* ─── Héros de l'audit de facturation électronique (08/09/2026) ──────────────
 * Cette page a son propre héros, écrit dans son partial avec la recette des heros du site
 * recopiée à la main (dégradé navy, croisillons dorés, équerres d'angle). Il reçoit à son tour
 * le visuel de fond : les croisillons cèdent la place à la photo, les équerres restent — elles
 * signent la page — et le voile se referme sur les deux bords, parce que le texte y est CENTRÉ,
 * contrairement aux autres heros où il est calé à gauche. */
.psf-js .psf-audit.psf-hero-media { background: var(--navy-900, #0E1A3A); }.psf-js .psf-audit.psf-hero-media::before { display: none; }.psf-js .psf-audit.psf-hero-media > .hero-media-bg::after {
  background:
    linear-gradient(180deg, rgba(14, 26, 58, .86) 0%, rgba(14, 26, 58, .72) 45%, rgba(14, 26, 58, .90) 100%),
    linear-gradient(90deg, rgba(14, 26, 58, .38) 0%, rgba(14, 26, 58, .10) 50%, rgba(14, 26, 58, .38) 100%);
}

/* Texte posé à même le voile, repéré par le script (voir layout.php) : l'encre sombre passe
   en clair, les surtitres passent en or. Sans JavaScript rien n'est marqué et le rendu reste
   celui d'avant — aucun risque de blanc sur blanc introduit ici. */
.psf-js .psf-section-media .psf-sur-voile-texte { color: rgba(255, 255, 255, .92) !important; }.psf-js .psf-section-media .psf-sur-voile-or { color: var(--gold) !important; }

/* ─── Pages de lecture : la bande derrière, la feuille devant (08/09/2026) ───────────
 * Mentions légales, CGV, corps d'article : ces pages se lisent en entier. Elles reçoivent la
 * bande comme les autres, mais le texte reste sur une feuille opaque — la photo encadre, elle
 * ne passe pas sous les mots. Sans image, ces règles ne s'appliquent pas et la page est
 * exactement celle d'avant. */
.psf-js .psf-section-media .psf-legal-feuille,
.psf-js .psf-section-media .psf-article-feuille {
  max-width: 900px;
  margin-inline: auto;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 2.6rem);
  box-shadow: 0 18px 44px rgba(14, 26, 58, .28);
}.psf-js .psf-section-media .psf-article-feuille { max-width: 820px; }
/* Le kit média est une feuille imprimable : elle garde son blanc, la bande l'encadre. */
.psf-js .psf-section-media > .mk-wrap { position: relative; z-index: 1; }

/* ─── 09/09/2026 : les deux derniers régimes rejoignent le socle média ───────────────
 * 1. `.section-image-hero` portait son image en STYLE EN LIGNE : un seul fichier de 2400 px
 *    téléchargé même sur un téléphone, aucun `srcset`, aucun chargement différé, et un voile
 *    cuivré différent de celui de tout le reste du thème. Les trois bandes (À propos,
 *    Réalisations, Atelier) passent au socle : mêmes variantes, même voile, même paresse.
 *    Le décor d'origine est neutralisé quand — et seulement quand — le socle prend la main.
 * 2. `.cta-section-premium` (Annonceurs, Lab) était un pavé navy sans image ; il devient une
 *    bande comme les autres. Ses styles en ligne de largeur et d'arrondi ont été retirés du
 *    gabarit : un style en ligne ne se neutralise pas depuis une feuille. */
.psf-js .section-image-hero.psf-section-media { background-image: none; }.psf-js .section-image-hero.psf-section-media::before { display: none; }.psf-js .cta-section-premium.psf-section-media {
  /* 09/09/2026 — navy et non `transparent` : depuis que la hauteur PEINTE du fond est bornée,
     tout ce qui dépasse la bande n'avait plus AUCUN fond, et le texte forcé en blanc se
     retrouvait sur le gris clair de la page. Mesuré sur /annonceurs à 500 px : 101 px de
     section découverte sous la bande, bouton fantôme blanc illisible. La propriété raccourcie
     `background` remet `background-color` à transparent — elle écrasait le navy de secours. */
  background: var(--navy-900, #0E1A3A);
  border-radius: 0;
  max-width: none;
  /* 09/09/2026 — `margin-inline: 0` ne suffisait pas : la regle de base de
     `.cta-section-premium` pose `margin: 2rem 0`, et ces 2 rem de HAUT et de BAS survivaient.
     Resultat vu par Nelson sur /annonceurs et /lab : la bande flottait, detachee, avec une
     bande claire au-dessus et au-dessous, la ou toutes les autres sections a fond sont bord a
     bord et separees par un simple filet d'or. On coupe la marge sur les quatre cotes. */
  margin: 0;
  padding-block: clamp(3rem, 6vw, 4.5rem);
  padding-inline: max(1rem, calc((100% - 1180px) / 2));
}
/* Le filet d'or, redeclare ici. `.cta-section-premium::before` porte le motif diagonal de la
   carte : sur une bande illustree il n'a plus lieu d'etre, et il occupait le pseudo-element
   dont le theme se sert pour tracer le filet. On l'ecrase donc par le filet lui-meme, copie a
   l'identique de la regle des autres sections — sans quoi la bande n'avait AUCUNE separation. */
.psf-js .cta-section-premium.psf-section-media::before,
.psf-js .cta-section-premium.psf-section-media::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  width: auto;
  inset-block: auto;
  background-image: none;
  background: linear-gradient(90deg, transparent 0%, rgba(244, 196, 101, .55) 22%, rgba(244, 196, 101, .55) 78%, transparent 100%);
  background-size: auto;
  opacity: 1;
  z-index: -1;
}
.psf-js .cta-section-premium.psf-section-media::before { top: 0; }
/* 09/09/2026 — deux écarts avec la bande de référence de l'accueil, mesurés :
   1) sous 560 px, `.section { padding: 2rem 1rem !important }` s'applique à la bande de
      l'accueil (qui porte la classe `section`) mais pas à celle-ci : 48 px contre 32 px de
      respiration haute et basse sur /annonceurs et /lab. On aligne.
   2) `overflow: hidden`, hérité de la carte, rognerait l'anneau de focus d'un bouton posé
      en bord de bande. La bande de l'accueil est en `visible`. */
.psf-js .cta-section-premium.psf-section-media { overflow: visible; }
@media (max-width: 560px) {
  .psf-js .cta-section-premium.psf-section-media { padding-block: 2rem; }
}
.psf-js .cta-section-premium.psf-section-media::after { bottom: 0; }
/* Meme regle que partout ailleurs : deux bandes collees n'affichent pas deux filets. */
.psf-js .psf-section-media + .cta-section-premium.psf-section-media::before { display: none; }

/* Sans JavaScript, le thème entier est neutralisé (voir la classe .psf-js posée en tête de
   document) : il reste à retirer les images de fond elles-mêmes, qui sinon se déplieraient dans
   le flux, hautes de six cents pixels, entre deux sections. Une règle, et la page redevient
   exactement celle d'avant le chantier. */
html:not(.psf-js) .section-media-bg,
html:not(.psf-js) .hero-media-bg { display: none; }

/* ─── Reprises responsive du 09/09/2026 (revue de la flotte, mesures à 360/390/768 px) ──── */

/* La gouttière des bandes tombait à 16 px entre 769 et 1212 px — le texte frôlait le bord —
   alors que les sections ordinaires en gardaient 32. On relève le plancher. */
.psf-js .psf-section-media,
.psf-js .psf-section-media.signed-letter,
.psf-js .psf-section-media.calculator-section,
.psf-js .cta-section-premium.psf-section-media,
.psf-js .psf-section-media.cta-section { padding-inline: max(2rem, calc((100% - 1180px) / 2)); }

/* `.section-image-hero` centre son contenu avec sa PROPRE colonne : sous 768 px, elle démarrait
   16 px plus à droite que ses voisines. On lui rend la gouttière commune. */
@media (max-width: 768px) {
  .psf-js .section-image-hero.psf-section-media > .section-inner { width: 100%; }
}

/* Cibles tactiles : le bouton du menu était le SEUL accès à la navigation sur téléphone, à
   25,9 px de haut — sous le minimum de 24 px de la règle d'accessibilité, et très loin des 44 px
   confortables. Le lien de marque était pile sur le seuil. */
@media (max-width: 900px) {
  .nav-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .6rem .8rem !important;
  }
  .brand { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Menu ouvert : sur un écran de 640 à 740 px de haut, la dernière entrée tombait sous le pli,
   sans aucun moyen d'y accéder. Le menu défile désormais à l'intérieur de lui-même. */
@media (max-width: 900px) {
  .site-nav.is-open {
    max-height: calc(100dvh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

/* Le piège à robots était déporté à -10 000 px : il fabriquait un débordement horizontal que
   `overflow-x: hidden` masquait, et faussait toute mesure de débordement. Même invisibilité,
   sans sortir du cadre. */
.hp-field {
  position: absolute !important;
  left: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ─── Bandes média : alignement sur la gouttière des sections ordinaires (07/09/2026) ───
 * Une section ordinaire tient sa gouttière de `width: min(1180px, calc(100% - 2rem))`, réduite
 * à 1rem sous 560 px, puis reçoit 1rem de rembourrage sous 768 px — son contenu commence donc
 * à 32 px, puis à 24 px. Une bande média, elle, touche les deux bords : sans ces deux reprises
 * son contenu commençait 16 px plus à gauche que celui des sections voisines. Bloc placé en fin
 * de feuille : les requêtes de média ne se hiérarchisent pas, c'est l'ordre qui tranche. */
@media (max-width: 768px) {
  .psf-section-media { padding-inline: 2rem !important; }
}
@media (max-width: 560px) {
  .psf-section-media { padding-inline: 1.5rem !important; }
}

/* ─── Bouton de son des films (09/09/2026) ───────────────────────────────────
   Posé en haut à droite du cadre, au-dessus des zones d'appui (qui couvrent tout l'écran
   du téléphone) : sans ce z-index il serait mangé par `.story-zone`. Cible tactile de
   44 px, comme le reste du site. Les deux états sont dessinés en CSS, pas en image :
   barré = muet, deux ondes = sonore. */
.story-son {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 4;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(14, 26, 58, .55);
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s ease;
}
@media (hover: hover) and (pointer: fine) { .story-son:hover { background: rgba(14, 26, 58, .8); } }
.story-son:focus-visible { outline: 3px solid rgba(244, 196, 101, .9); outline-offset: 2px; }
.story-son-ic {
  position: relative;
  width: 20px; height: 20px;
  display: block;
}
/* Le haut-parleur : un carré et un triangle, en bordure or */
.story-son-ic::before {
  content: "";
  position: absolute; left: 1px; top: 6px;
  width: 7px; height: 8px;
  background: var(--gold, #F4C465);
  clip-path: polygon(0 0, 55% 0, 100% -35%, 100% 135%, 55% 100%, 0 100%);
}
/* Muet : une barre oblique. Sonore : une onde. */
.story-son-ic::after {
  content: "";
  position: absolute;
  left: 10px; top: 2px;
  width: 9px; height: 16px;
  border: 2px solid var(--gold, #F4C465);
  border-left: 0; border-top-color: transparent; border-bottom-color: transparent;
  border-radius: 0 12px 12px 0;
  opacity: 0;
  transition: opacity .18s ease;
}
.story-son[data-son="1"] .story-son-ic::after { opacity: 1; }
.story-son[data-son="0"] .story-son-ic {
  background: linear-gradient(to bottom right, transparent 45%, var(--gold, #F4C465) 45%, var(--gold, #F4C465) 55%, transparent 55%);
}
@media (prefers-reduced-motion: reduce) {
  .story-son, .story-son-ic::after { transition: none; }
}

/* Date de mise a jour des pages legales (09/09/2026). Posee juste sous le chapeau, en
   petites capitales cuivre : lisible sans voler la vedette au titre. Sur la feuille claire
   des pages legales, le cuivre profond passe le seuil pour cette graisse. */
.legal-maj {
  margin: -.4rem 0 1.4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--copper-deep, #C97F1F);
  letter-spacing: .02em;
}
.psf-js .psf-section-media > .psf-legal-feuille > .legal-maj { color: var(--copper-deep, #C97F1F); }

/* ─── Accessibilite tactile mobile (09/09/2026) ───────────────────────────────
   Mesures a 375 px, audit responsive du 09/09 : plusieurs cibles descendaient sous
   44 px de haut, dont deux points de conversion (les creneaux de reservation a 33 px
   et le bouton Diagnostic de l'en-tete a 38,4 px). On ne touche QUE des hauteurs et
   des espacements : aucune couleur, aucun token, aucune police modifies. */
@media (max-width: 900px) {
  .booking-slot { min-height: 44px; padding-block: .55rem; }
  .site-header .btn.small { min-height: 44px; }
  .footer-social a { width: 44px; height: 44px; display: grid; place-items: center; }
  .site-footer nav a, .footer-sign a { display: inline-block; padding-block: .65rem; }
  /* Safari iOS agrandit la page des qu'un champ passe sous 16 px : le champ e-mail de
     la newsletter etait a 14 px, le prospect voyait la page zoomer et se decaler au
     moment ou il saisissait son adresse. */
  .site-footer input, .site-footer select, .site-footer textarea,
  .psf-newsletter input, .psf-newsletter select, .psf-newsletter textarea { font-size: 16px; }
}
/* Les pieges anti-robot (champ « website » hors tabulation) n'ont pas de largeur propre et
   heritent de celle du formulaire : ils sortent du cadre a droite, sans defilement lateral
   uniquement parce que html/body portent overflow-x: hidden. On leur en donne une.
   NE PAS etendre cette regle a `not_a_robot` : malgre son nom, ce n'est PAS un piege mais une
   case a cocher REELLE, visible et obligatoire, dans les formulaires de diagnostic et de
   demande de demonstration (layout.php:1231 et :1455) — la reduire a 1 px la rendrait
   impossible a cocher. Verifie avant d'ecrire cette ligne. */
input[name="website"][tabindex="-1"] { width: 1px; height: 1px; }

/* ─── HEROS SUR TELEPHONE : L'IMAGE ENTIERE, EN TETE (09/09/2026) ───────────
   Posee en fin de feuille a dessein : la regle du heros illustre (`.psf-js .psf-hero-media >
   .hero-media-bg .media-hero`) est declaree plus haut et l'emporterait autrement.
   Meme doctrine que les fonds de section : `contain` DEZOOME jusqu'a montrer la photo en
   entier — aucune tete coupee — et la boite epouse le rapport de l'image au lieu de reserver
   toute la hauteur du heros. La definition n'est pas perdue : la source 2K est simplement
   affichee plus petite. Le navy de la section occupe le reste, le titre se pose dessus. */
@media (max-width: 900px) {
  .psf-js .psf-hero-media > .hero-media-bg .media-hero {
    height: auto;
    bottom: auto;
    aspect-ratio: 2400 / 1018;
    border-radius: 0;
    box-shadow: none;
  }
  .psf-js .psf-hero-media > .hero-media-bg .media-hero > img {
    position: absolute; inset: 0;
    object-fit: contain;
    object-position: 50% 0;
  }
}

/* ═══ RESPONSIVE MOBILE — passe du 10/09/2026 (mesures à 375 px sur 7 gabarits) ═══════════
   Posé en FIN de feuille : les règles qu'il corrige sont en `!important` plus haut, il faut
   passer après elles avec la même force. Mesuré avant correction, jamais estimé. */

/* 1. TITRES DE HÉROS. `clamp(2rem, 8vw, 2.8rem)` (≤ 768 px) et `clamp(1.7rem, 9vw, 2.3rem)`
   (≤ 380 px) prennent la largeur d'écran pour moteur : à 375 px, 9vw = 33,75 px. Mesuré :
   le titre du héros tenait sur 5 à 13 LIGNES (/facturation-electronique 13, /tarifs 7,
   /rendez-vous 7, /podcast 7, /diagnostic 6, / 5) et repoussait le premier contenu à deux ou
   trois écrans. Sur ordinateur, le même titre tient en 2 ou 3 lignes : le mobile était moins
   bien servi que le bureau, l'inverse de ce qu'on veut. On passe à 6,9vw, plancher 1,55rem :
   26 px à 375, 28,5 px à 414, et le titre reste le plus grand texte de l'écran. */
@media (max-width: 768px) {
  h1,
  .psf-js .psf-hero-media h1,
  .psf-js .psf-hero-media > .section-inner > h1,
  .hero-copy-premium h1 {
    font-size: clamp(1.55rem, 6.9vw, 2.2rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -.01em;
  }
  /* Hiérarchie : mesuré sur l'accueil à 375 px, titre de héros 24 px contre 22,4 px pour les
     titres de section — un écart de 7 %, le titre ne dominait plus. Titre ≈ 26 px, titres de
     section ≈ 22 px, titres de cartes (h3, non touchés) 19 px : une échelle de 1,15 à 1,2 entre
     chaque niveau. À 20 px le titre de section se confondait avec celui des cartes (19 px). */
  main section h2 { font-size: clamp(1.3rem, 5.8vw, 1.65rem) !important; line-height: 1.2 !important; }
}

/* 2. CIBLES TACTILES sous 44 px, mesurées :
   - le numéro de téléphone du bandeau haut : 34 px — c'est un point de conversion ;
   - les liens « Lancer le calcul » vers les autres calculateurs : 21 px ;
   - les pastilles Spotify / YouTube / Deezer des cartes du podcast : 33 px. */
@media (max-width: 900px) {
  a[href^="tel:"] { min-height: 44px; }
  main .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .psf-pod-link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .8rem; }
}

/* 3. La case « je ne suis pas un robot » des formulaires de rendez-vous : c'est une VRAIE case
   obligatoire, habillée par une case dessinée. L'input réel, invisible et en position absolue,
   n'avait pas de largeur propre : il héritait de 375 px et sortait de 68 px à droite (masqué
   seulement par overflow-x:hidden). On l'enferme dans son label, sans le rendre plus petit que
   la zone cliquable dessinée — il reste cochable exactement comme avant. */
.pro-not-robot { position: relative; }
.pro-not-robot > input[type="checkbox"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: 100%; margin: 0;
}

/* (La réserve de bas de page sous la barre d'onglets existe déjà : psf_premium_nav.css,
   `padding-bottom: var(--psf-tab-h)` en !important. Rien à ajouter ici.) */

/* 4. HÉROS SUR TÉLÉPHONE : LA COLONNE À 62 % SURVIVAIT. Sur ordinateur, le texte du héros
   illustré tient dans `min(680px, 62%)` pour laisser l'image respirer à droite. La règle de
   rattrapage (≤ 900 px, `max-width: 100%`) existait, mais sans le préfixe `.psf-js` : moins
   spécifique, elle perdait. Mesuré à 375 px : le titre tenait dans 193 px sur 311 possibles,
   soit 8 à 9 LIGNES sur /facturation-electronique, /accompagnement-entreprise, /parrains et
   /offres/data-bi/preuves. Même défaut pour le bloc de l'accueil (.hero-copy-premium). */
@media (max-width: 900px) {
  .psf-js .psf-hero-media > .section-inner > .eyebrow,
  .psf-js .psf-hero-media > .section-inner > h1,
  .psf-js .psf-hero-media > .section-inner > .lead,
  .psf-js .psf-hero-media > .section-inner > .actions,
  .psf-js .psf-hero-media .hero-copy-premium { max-width: 100%; }

  /* Le texte pleine largeur ne doit pas se poser sur la photo, là où le voile s'ouvre : il
     commence SOUS l'image entière (hauteur `--psf-hero-img-h`, voir le point 7), après un souffle
     de 1,2rem. La marge est portée par la SECTION et le bloc de texte repart de zéro : les marges
     héritées changent d'un palier à l'autre (4,5rem sous 768 px, 2,5rem au-delà, badge dans le
     flux ou non) et un calcul qui les supposait décalait le texte sur la photo entre 769 et
     900 px — la largeur d'un iPad en portrait. */
  .psf-js .psf-hero-media:not(.psf-audit) { padding-top: calc(var(--psf-hero-img-h, 42.42vw) + 1.2rem) !important; }
  .psf-js .psf-hero-media:not(.psf-audit) > .section-inner { padding-top: 0 !important; }
  /* Le badge PROCESPHERE passe SOUS l'image, en tête du texte. Posé sur la photo (premier essai
     du 10/09), il était centré — et ces photos, cadrées pour le bureau, placent le sujet au centre
     ou à droite : la revue adversariale l'a mesuré sur la TÊTE du sujet à /a-propos, /calculateurs,
     /rendez-vous et /demo-scoring. C'était reproduire en petit la tête coupée qu'on venait de
     supprimer. Dans le flux, sous l'image, il ne masque plus rien ; en or, il tient son contraste
     sur le voile (l'ambre y tombait sous 3:1). Au-dessus de 900 px, rien ne change. */
  .psf-js .psf-hero-media:not(.psf-audit) > .premium-mark {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    transform: none;
    display: flex !important;
    width: fit-content !important;
    max-width: calc(100% - 4rem) !important;
    margin: 0 auto 1rem !important;
    color: var(--gold, #F4C465) !important;
  }

  /* Le voile mobile du héros est défini plus bas (point 7), avec le calque d'ambiance. */
}

/* 5. CIBLES TACTILES restantes (mesurées à 375 px sur les 70 routes) : les pastilles de
   catégories du blog (37 px), « ou réserver un RDV directement » sous les articles (24 px),
   « Réserver » de la démo nettoyage CRM (24 px), le retour « Page Annonceurs » du kit média
   (40 px). Liens à style en ligne : une classe dédiée, et !important pour passer devant
   `display:inline-block` écrit dans l'attribut. */
@media (max-width: 900px) {
  .psf-blog-cats > a,
  .psf-lien-tactile { display: inline-flex !important; align-items: center; min-height: 44px; }
}

/* 6. CHAMPS À 15,2 px : iOS agrandit la page dès qu'on touche un champ dont le texte fait
   moins de 16 px, et ne la remet pas à l'échelle ensuite. Démos scoring et Qualiopi, questionnaire
   du diagnostic. `main` en tête pour passer devant les feuilles internes des pages (même
   spécificité, déclarées plus tard). */
@media (max-width: 900px) {
  main .diag-field input, main .diag-field textarea, main .diag-field select,
  main .ds-field input, main .ds-field select,
  main .dq-field input, main .dq-field select { font-size: 16px; }
}

/* 7. HÉROS SUR TÉLÉPHONE : LE TEXTE SUR LA PHOTO SOUS VOILE NAVY (10/09/2026, retour de Nelson
   sur /offres, validé). Depuis que la photo se montre entière en tête du héros, le texte se posait
   dessous sur les croisillons dorés du fond de section — le seul endroit du site où le texte
   n'était pas sur une photo sous voile navy. Le calque d'ambiance (voir `render_media_hero`)
   reprend la même photo sur toute la hauteur du héros ; l'image entière reste au-dessus, nette
   et non recadrée ; le voile est léger sur l'image entière et se referme à 78-86 % sous le
   texte — la plage des voiles de section (74 à 90 %) — pour que le texte blanc garde son
   contraste quelle que soit la photo. Le flou léger évite de lire un détail agrandi quatre
   fois : on voit la couleur et la lumière de la photo, pas un morceau d'épaule.
   S'applique à TOUS les héros illustrés, audit compris. */
.psf-hero-ambiance { display: none; }
@media (max-width: 900px) {
  /* HAUTEUR DE L'IMAGE ENTIÈRE, bornée par la hauteur d'écran. En largeur seule (42,42vw), un
     téléphone à l'horizontale (844 × 390) ou un bureau zoomé à 150 % remplissait tout le premier
     écran avec la photo : le titre tombait à 1,5 écran, le premier bouton à 2 (revue du 10/09).
     Bornée à 45 % de la hauteur visible, l'image reste entière (`contain`), se centre, et le
     calque flou remplit les côtés. En portrait rien ne change : 42,42vw y est toujours le plus
     petit. Une seule variable pilote la boîte, la marge du texte et les arrêts du voile. */
  .psf-js .psf-hero-media { --psf-hero-img-h: min(42.42vw, 45vh); }
  @supports (height: 1svh) {
    .psf-js .psf-hero-media { --psf-hero-img-h: min(42.42vw, 45svh); }
  }
  /* Écran bas (téléphone à l'horizontale : 390 px de haut, dont 181 d'en-tête) : l'image descend
     à 30 % de la hauteur, pour que le badge et le surtitre entrent dans le premier écran. */
  @media (max-height: 500px) {
    .psf-js .psf-hero-media { --psf-hero-img-h: min(42.42vw, 30vh); }
    @supports (height: 1svh) {
      .psf-js .psf-hero-media { --psf-hero-img-h: min(42.42vw, 30svh); }
    }
  }
  .psf-js .psf-hero-media > .hero-media-bg .media-hero {
    height: var(--psf-hero-img-h);
    aspect-ratio: auto;
  }
  .psf-js .psf-hero-media > .hero-media-bg .media-hero > img { object-position: 50% 0; }
  .psf-js .psf-hero-media > .hero-media-bg > .psf-hero-ambiance {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
    filter: blur(6px) saturate(1.1);
    transform: scale(1.06);   /* le flou éclaircit les bords : on les pousse hors cadre */
    z-index: 0;
  }
  .psf-js .psf-hero-media > .hero-media-bg > .media-hero { z-index: 1; }
  .psf-js .psf-hero-media > .hero-media-bg::after { z-index: 2; }
  /* Classe doublée : passe devant le voile propre à l'audit (.psf-js .psf-audit.psf-hero-media).
     Le haut de l'image n'a plus de badge à protéger (il est passé dessous) : le voile y reste
     très léger, et ne se referme qu'au pied de l'image, là où commence le texte. */
  .psf-js .psf-hero-media.psf-hero-media > .hero-media-bg::after {
    background: linear-gradient(180deg,
      rgba(14, 26, 58, .20) 0,
      rgba(14, 26, 58, .04) calc(var(--psf-hero-img-h) * .38),
      rgba(14, 26, 58, 0) calc(var(--psf-hero-img-h) * .66),
      rgba(14, 26, 58, .32) calc(var(--psf-hero-img-h) * .92),
      rgba(14, 26, 58, .78) var(--psf-hero-img-h),
      rgba(14, 26, 58, .84) calc(var(--psf-hero-img-h) + 3.5rem),
      rgba(14, 26, 58, .82) 70%,
      rgba(14, 26, 58, .90) 94%,
      rgba(14, 26, 58, 1) 100%);
  }
  /* L'audit suit la même mise en page : image entière en tête, texte dessous. */
  .psf-js .psf-audit.psf-hero-media { padding-top: calc(var(--psf-hero-img-h, 42.42vw) + 1.2rem) !important; }
  /* SURTITRE EN OR, comme celui des sections. Il était en ambre #b7791f : posé sur le voile, juste
     sous l'image, son contraste tombait entre 2,3 et 3,9 (seuil 4,5) sur 59 des 60 héros — mesuré
     par la revue du 10/09. En or : 5,2 au pire cas absolu (pixel blanc sous le voile le plus léger
     de la zone de texte). Sur ordinateur, l'ambre reste. */
  .psf-js .psf-hero-media > .section-inner > .eyebrow,
  .psf-js .psf-hero-media .hero-copy-premium .eyebrow { color: var(--gold, #F4C465) !important; }
  /* ÉQUERRES DORÉES resserrées à 14 px du bord, comme sur l'audit. À 32 px, leurs bras de 80 px
     tombaient pile sur les bords des boutons pleine largeur du bas du héros : l'équerre se lisait
     comme un coin de bouton. À 14 px elles encadrent sans rien toucher, sans hauteur ajoutée. */
  .psf-js .psf-hero-media.section-premium-dark::after { inset: 14px; }
  /* L'audit n'est pas une `.section-premium-dark` : ses équerres restaient à 32 px entre 561 et
     900 px, et une branche traversait la première lettre du texte (tablette de 600 px). On étend
     à 900 px le cadrage mobile déjà validé sous 560 px (audit_fe.php). */
  .psf-js .psf-audit.psf-hero-media::after { inset: 14px; }
  .psf-js .psf-audit.psf-hero-media { padding-left: 26px; padding-right: 26px; }
}

/* 8. PIED DE PAGE ET NEWSLETTER : UNE PHOTO SOUS LE VOILE NAVY (10/09/2026, décision de Nelson).
   Exclus du thème le 08/09, ils le rejoignent : même fond que les sections — photo sous le voile
   navy, contenu en clair, cartes blanches. Classe dédiée `.psf-fond-media` et non
   `.psf-section-media` : cette dernière impose la largeur et les gouttières des sections, qui
   auraient déplacé la mise en page du pied de page (16 px de marge au lieu de 20 sur téléphone).
   Mêmes règles d'image que les sections : `cover` sous le voile sur ordinateur, image entière
   (`contain`) en tête sur téléphone. */
.psf-js .psf-fond-media {
  position: relative;
  isolation: isolate;
  background: var(--navy-900, #0E1A3A);
}
.psf-js .psf-fond-media::before { display: none; }   /* le motif de lignes cède la place à la photo */
.psf-js .psf-fond-media > .section-media-bg {
  position: absolute;
  inset: 0;
  bottom: auto;
  height: min(100%, max(220px, 58vw));
  z-index: 0;                 /* sous le contenu : `.site-footer > *` et `.psf-newsletter-inner` sont à 1 */
  overflow: hidden;
  pointer-events: none;
}
.psf-js .psf-fond-media > .section-media-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.psf-js .psf-fond-media > .section-media-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 26, 58, .88) 0%, rgba(14, 26, 58, .74) 42%, rgba(14, 26, 58, .90) 92%, rgba(14, 26, 58, 1) 100%),
    linear-gradient(90deg, rgba(14, 26, 58, .30) 0%, rgba(14, 26, 58, 0) 55%);
}
@media (max-width: 900px) {
  .psf-js .psf-fond-media > .section-media-bg img { object-fit: contain; object-position: 50% 0; }
  .psf-js .psf-fond-media > .section-media-bg { height: min(100%, 43vw); }
}
/* Newsletter sur le navy : titre et texte en clair, surtitre en or, bouton or à libellé navy
   (celui des sections), note et pastilles éclaircies. Le champ et les trois cartes restent blancs.
   Spécificité (0,4,x) : la feuille interne de la Newsletter, écrite dans la page après app.css,
   est en (0,1,x) — sans cela elle gagnerait. */
.psf-js .psf-newsletter.psf-fond-media { border-top: 0; }
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-text .eyebrow { color: var(--gold, #F4C465); }
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-text h3 { color: #fff; }
/* `!important` : la règle générale `section p:not(.lead):not(...)` force un texte sombre avec une
   spécificité (0,8,2) qu'aucune sélection raisonnable ne dépasse — mesuré : le paragraphe était
   navy sur navy, donc invisible, au premier rendu. Même traitement que les sections. */
/* `:not(.eyebrow)` : le surtitre est lui aussi un <p>, et cette règle en !important le passait en
   blanc au lieu de l'or voulu (revue du 10/09) — même exclusion que dans les sections. */
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-text p:not(.eyebrow) { color: rgba(255, 255, 255, .90) !important; }
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-form input[type=email] { border-color: rgba(255, 255, 255, .35); }
/* Focus : la règle ci-dessus, plus spécifique, figeait la bordure ; la feuille interne retire le
   contour natif (`outline: none`) et son halo ambre à 15 % ne se voit pas sur le navy (1,2:1).
   Un visiteur au clavier ne savait plus où il était (revue du 10/09). Bordure et halo or. */
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-form input[type=email]:focus {
  border-color: var(--gold, #F4C465);
  box-shadow: 0 0 0 3px rgba(244, 196, 101, .55);
}
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-form button {
  background: linear-gradient(135deg, var(--amber), var(--copper));
  color: var(--navy-900, #0E1A3A);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
@media (hover: hover) and (pointer: fine) {
  .psf-js .psf-newsletter.psf-fond-media .psf-newsletter-form button:hover {
    background: linear-gradient(135deg, var(--amber), var(--copper));
    box-shadow: 0 8px 24px rgba(192, 133, 82, .5);
  }
}
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-form button:focus-visible { outline: 3px solid rgba(244, 196, 101, .9); outline-offset: 2px; }
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-note { color: rgba(255, 255, 255, .74); }
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-trust span {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .88);
}
.psf-js .psf-newsletter.psf-fond-media .psf-newsletter-trust b { color: var(--gold, #F4C465); }
/* Pied de page sur la photo : l'ambre #b7791f des liens et du nom tombe sous 3:1 sur une zone
   claire de la photo, même voilée. On passe en or, qui tient 4,5 au pire cas ; le texte courant
   remonte de .75 à .90 d’opacité (la signature de .55 à .80) pour la même raison. */
.psf-js .site-footer.psf-fond-media strong { color: var(--gold, #F4C465); }
.psf-js .site-footer.psf-fond-media p { color: rgba(255, 255, 255, .90) !important; }
.psf-js .site-footer.psf-fond-media .footer-sign { color: rgba(255, 255, 255, .80) !important; }
.psf-js .site-footer.psf-fond-media .footer-sign a { color: var(--gold, #F4C465); }
.psf-js .site-footer.psf-fond-media nav a { color: rgba(255, 255, 255, .82); }
.psf-js .site-footer.psf-fond-media nav a:hover,
.psf-js .site-footer.psf-fond-media nav a:focus-visible { color: var(--gold, #F4C465); }

/* 9. BANDEAUX DE CHIFFRES EN VERRE NAVY (10/09/2026, demande de Nelson). Le bandeau des chiffres
   de production (.kpi-row) et celui du bénéfice mesurable (.roi-row) étaient des cartes navy
   OPAQUES posées sur la photo de leur section : la photo disparaissait derrière un aplat, le seul
   de la page. Ils passent en navy translucide flouté — la photo se devine au travers, comme sous
   le voile des autres sections. Libellés et détails éclaircis (.70 → .80, .55 → .70) : sur une zone
   claire de la photo, sous le voile de section puis sous ce verre, le détail à .55 tombait à 4,2:1
   au pire cas ; à .70 il tient 6,4. Hors photo (sans .psf-section-media), rien ne change. */
.psf-js .psf-section-media .kpi-row,
.psf-js .psf-section-media .roi-row {
  background: rgba(14, 26, 58, .55);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  border: 1px solid rgba(244, 196, 101, .22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}
.psf-js .psf-section-media .roi-row { border-top: 3px solid var(--gold, #F4C465); }
.psf-js .psf-section-media .kpi-cell { border-right-color: rgba(255, 255, 255, .14); }
.psf-js .psf-section-media .kpi-label { color: rgba(255, 255, 255, .80); }
.psf-js .psf-section-media .kpi-detail { color: rgba(255, 255, 255, .70); }
.psf-js .psf-section-media .roi-label { color: rgba(255, 255, 255, .90); }
@media (max-width: 900px) {
  .psf-js .psf-section-media .kpi-cell { border-bottom-color: rgba(255, 255, 255, .14); }
}
/* Sans flou d'arrière-plan (anciens navigateurs), le verre reste lisible : on l'épaissit. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .psf-js .psf-section-media .kpi-row,
  .psf-js .psf-section-media .roi-row { background: rgba(14, 26, 58, .72); }
}

/* 10. BOUTON DE SON DU HÉROS D'ACCUEIL (10/09/2026). Reprend le dessin du bouton des films
   (.story-son) ; placé en bas à droite du héros, à l'intérieur des équerres, au-dessus de la
   vidéo et du voile. Créé par le script du héros seulement au-delà de 900 px. */
.psf-js .psf-hero-media > .psf-hero-son.story-son {
  top: auto;
  right: clamp(3rem, 4vw, 4.25rem);
  bottom: clamp(3rem, 4vw, 4.25rem);
  width: 48px;
  height: 48px;
  z-index: 5;
  background: rgba(14, 26, 58, .62);
  border: 1px solid rgba(244, 196, 101, .45);
}
@media (hover: hover) and (pointer: fine) {
  .psf-js .psf-hero-media > .psf-hero-son.story-son:hover { background: rgba(14, 26, 58, .85); border-color: var(--gold, #F4C465); }
}

/* 11. PICTOGRAMMES DE SON (10/09/2026, revue). Le haut-parleur dessiné en CSS ne se lisait pas :
   l'état muet ressemblait à une coche « validé ». On prend les deux icônes du jeu (volume barré,
   volume) ; une seule est visible selon l'état. `!important` : psf_icon() écrit son display en ligne. */
.story-son .story-son-pictos { display: grid; place-items: center; line-height: 0; color: var(--gold, #F4C465); }
.story-son[data-son="0"] .story-son-on,
.story-son[data-son="1"] .story-son-off { display: none !important; }
/* Filet : sous 901 px la vidéo du héros est masquée, son bouton de son aussi (le script le retire
   et coupe le son ; cette règle garantit qu'il ne recouvre jamais « Réserver le diagnostic »). */
@media (max-width: 900px) {
  .psf-js .psf-hero-media > .psf-hero-son { display: none; }
}


/* ─── Page /offres (28/09/2026) : pages détaillées d'une offre en pastilles cliquables, service associé ─── */
.offer-card-liens-titre { margin: .9rem 0 .45rem; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-deep); }
.offer-card-liens { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.offer-card-liens .offer-lien { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .45rem .85rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--navy); font-size: .88rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.offer-card-liens .offer-lien svg { flex: none; color: var(--copper-deep); }
@media (hover: hover) and (pointer: fine) { .offer-card-liens .offer-lien:hover { border-color: var(--copper-deep); background: #fff8ec; box-shadow: 0 6px 16px rgba(14, 26, 58, .08); } }
.offer-card-liens .offer-lien:focus-visible { outline: 3px solid var(--navy-900); outline-offset: 2px; }
.card.offer-card.offer-card--associe { margin-top: 1.6rem; }
@media (min-width: 900px) {
  .card.offer-card.offer-card--associe { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 36px; align-items: center; padding: 0 36px 0 0; overflow: hidden; }
  .card.offer-card.offer-card--associe .media-frame { margin: 0; height: 100%; min-height: 260px; border-radius: 0; box-shadow: none; }
  .card.offer-card.offer-card--associe .media-frame img { height: 100%; aspect-ratio: auto; }
  .offer-card--associe .offer-card-associe-corps { padding: 30px 0 26px; }
}

/* 29/09/2026 : sur téléphone, le badge « PROCESPHERE · … » des héros doublait le surtitre qui le suit : masqué sous 900 px. */
@media (max-width: 900px) { .premium-mark, .psf-js .psf-hero-media:not(.psf-audit) > .premium-mark { display: none !important; } }

/* 29/09/2026 : sur ordinateur (4 colonnes), les rangées des cartes d'offres sont partagées (sous-grille) :
   visuel, étiquette, titre, texte, « Voir le détail », pastilles et bouton commencent à la même hauteur dans les quatre cartes. */
@media (min-width: 1101px) {
  .grid.four.offer-grid { row-gap: 0; }
  .grid.four.offer-grid > .card.offer-card { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; align-content: start; margin-bottom: 1rem; }
  .grid.four.offer-grid > .card.offer-card > .card-actions { align-self: end; }
  .grid.four.offer-grid > .card.offer-card > .offer-card-liens { align-self: start; align-content: flex-start; }
}