/* =========================================================================
   externalisation-service-client.fr
   Famille V5-pupitre, habillage réservé du 27/08/2026 (lot 43).
   Registre R5 : poste de travail clair, flux, volumes, intégrations.
   La géométrie vient de la famille (cartes nettes 1px, zéro ombre, rayon 3px,
   filets, chiffres en très grand corps maigre). Le MATÉRIAU est re-dérivé :
   teinte 148 réservée, Philosopher en titres, Andika en corps.
   Préfixes propres au site : esc- (structure) · flc- (flux de conversation,
   module signature) · obn- (obligations et blocs réglementaires).
   ========================================================================= */

/* Les déclarations @font-face sont en BAS de cette feuille : leur descripteur
   `font-weight` n'est pas une règle de cascade, et le placer avant les règles
   de typographie le fait lire comme une base écrasée plus bas. */

:root{
  /* Matériau : gris-bleu pâle d'écran, casque, tableau de bord. Teinte 148
     RÉSERVÉE pour ce NDD — les cinq valeurs de la fiche sont recopiées telles
     quelles, les dérivées restent sur la même teinte. */
  --ink:        oklch(22% 0.030 148);
  --paper:      oklch(97% 0.012 148);
  --surface:    oklch(93% 0.026 148);
  --accent:     oklch(59% 0.165 148);
  --accent-ink: oklch(16% 0.032 148);
  --line:       oklch(85% 0.024 148);
  --field-line: oklch(44% 0.070 148);
  /* dérivées, même teinte */
  --ink-soft:   oklch(41% 0.026 148);
  --ink-mute:   oklch(55% 0.020 148);
  --card:       oklch(99% 0.006 148);
  --line-firm:  oklch(74% 0.030 148);
  /* --accent-deep porte le TEXTE BLANC des actions : il doit atteindre 4.5:1.
     La teinte réservée 148 est conservée ; seule la clarté descend, ce qui est
     une dérivée, pas une dérive de teinte (l'accent réservé reste sur les
     filets, les surtitres et les bordures). */
  --accent-deep:oklch(40% 0.118 148);
  --accent-wash:oklch(94% 0.042 148);
  --ink-on:     oklch(84% 0.018 148);   /* texte secondaire sur fond encre */
  --line-on:    oklch(36% 0.030 148);   /* filets sur fond encre           */

  --r: 3px;
  --r-lg: 4px;
  --hdr: 66px;
  --hdr-m: 58px;
  --mbar: 60px;
  --sec-y: clamp(54px, 5.6vw, 100px);

  /* Philosopher n'a que deux graisses : la finesse de la famille se joue au
     corps et à l'approche, pas à la graisse variable. */
  --titre: "Philosopher", ui-serif, Georgia, serif;
  --corps: "Andika", ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
}

/* ===================== Base ============================================= */
*,*::before,*::after{box-sizing:border-box}
/* L'en-tête est collant : sans cette réserve, une ancre amène le HAUT de sa
   cible DERRIÈRE l'en-tête, et le titre du formulaire est mangé au moment
   exact de la conversion. */
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 18px)}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--corps);font-weight:400;font-size:16.5px;line-height:1.62;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:clip;
  -webkit-hyphens:manual;hyphens:manual;
  padding-bottom:0;
}
input[type=range],input[type=checkbox],input[type=radio],progress{accent-color:var(--accent)}
img{max-width:100%;display:block}
a{color:var(--accent-deep);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--titre);margin:0;overflow-wrap:break-word;text-wrap:balance}
p,ul,ol{margin:0}

.esc-skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 18px;z-index:200}
.esc-skip:focus{left:8px;top:8px}

/* ===================== Largeurs et rythme =============================== */
.esc-wrap{width:100%;max-width:1208px;margin:0 auto;padding:0 26px}
.esc-narrow{max-width:880px;margin:0 auto}
section{padding:var(--sec-y) 0}
.esc-bg-s{background:var(--surface)}
.esc-bg-ink{background:var(--ink);color:var(--paper)}
.esc-bg-ink h2,.esc-bg-ink h3{color:var(--paper)}
.esc-bg-ink p,.esc-bg-ink li{color:var(--ink-on)}
.esc-bg-ink a{color:oklch(86% 0.110 148)}

/* ===================== Typographie ====================================== */
h1{font-size:clamp(31px,4.1vw,54px);font-weight:400;line-height:1.06;letter-spacing:-.022em}
h2{font-size:clamp(25px,2.9vw,39px);font-weight:400;line-height:1.12;letter-spacing:-.018em;
  margin:0 0 16px}
h3{font-size:clamp(18px,1.4vw,22px);font-weight:700;line-height:1.26;letter-spacing:-.008em;
  margin:0 0 8px}
h1 strong,h2 strong{font-weight:700}
.esc-lede{font-family:var(--corps);font-size:clamp(16.5px,1.2vw,19px);color:var(--ink-soft);
  line-height:1.58;margin:0}
.esc-sec p + p{margin-top:15px}
.esc-sec p{color:var(--ink-soft)}

/* Surtitre : petites capitales espacées + filet, signature de la famille */
.esc-badge{display:flex;align-items:center;gap:13px;font-family:var(--corps);
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-deep);margin:0 0 16px}
.esc-badge::after{content:"";flex:1 1 auto;height:1px;background:var(--line-firm);min-width:20px}
.esc-bg-ink .esc-badge{color:oklch(82% 0.100 148)}
.esc-bg-ink .esc-badge::after{background:var(--line-on)}

.esc-maj{font-size:13px;color:var(--ink-soft);margin:26px 0 0}

/* ===================== En-tête ========================================== */
.esc-bandeau{background:var(--ink);color:var(--ink-on);font-size:13px}
.esc-bandeau .esc-wrap{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:space-between;
  padding-top:9px;padding-bottom:9px}
.esc-bandeau a{color:oklch(88% 0.090 148)}

.esc-hdr{position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--line)}
.esc-hdr .esc-wrap{height:var(--hdr);display:flex;align-items:center;gap:22px}
.esc-mark{display:flex;flex-direction:column;line-height:1.1;text-decoration:none}
.esc-mark b{font-family:var(--titre);font-size:21px;font-weight:700;color:var(--ink);
  letter-spacing:-.02em}
.esc-mark span{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:3px}
.esc-mark:hover{text-decoration:none}

.esc-nav{margin-left:auto}
.esc-nav > ul{display:flex;align-items:center;gap:3px;list-style:none;margin:0;padding:0}
.esc-nav details{position:relative}
.esc-nav summary{list-style:none;cursor:pointer;padding:9px 12px;border-radius:var(--r);
  font-size:15.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:7px}
.esc-nav summary::-webkit-details-marker{display:none}
.esc-nav summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.esc-nav summary:hover,.esc-nav details[open] summary{background:var(--surface)}
/* Panneau ancré à DROITE de son entrée, jamais à gauche : la navigation est
   collée au bord droit, et un panneau de 470 px ouvert sur le dernier groupe
   sortait de 81 px du viewport à 1200 px (mesuré). Ancré à droite, il reste
   par construction dans la laize de la navigation. */
.esc-panel{position:absolute;top:calc(100% + 9px);left:auto;right:0;width:min(470px,calc(100vw - 36px));
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:10px;z-index:70}
.esc-panel ul{list-style:none;margin:0;padding:0}
.esc-panel a{display:block;padding:11px 12px;border-radius:var(--r);text-decoration:none}
.esc-panel a:hover{background:var(--surface);text-decoration:none}
.esc-panel a strong{display:block;font-size:15.5px;font-weight:700;color:var(--ink)}
.esc-panel a small{display:block;font-size:13px;color:var(--ink-mute);margin-top:2px}
.esc-cta-hdr{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;
  border-radius:var(--r);background:var(--accent-deep);color:oklch(99% 0.004 148);
  font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.esc-cta-hdr:hover{background:var(--ink);color:var(--paper);text-decoration:none}

.esc-burger{display:none;margin-left:auto;min-height:44px;padding:0 14px;background:transparent;
  border:1px solid var(--line-firm);border-radius:var(--r);cursor:pointer;
  font-size:14px;font-weight:700;color:var(--ink)}

/* ===================== Hero — archétype flux-hero, capture mode A ======= */
/* Le formulaire est PREMIER dans le DOM (mode A). En 390 il reste au-dessus du
   pli ; en 1440 il occupe sa colonne et le schéma de routage tient la gauche. */
.esc-hero{padding-top:clamp(26px,3vw,44px);padding-bottom:var(--sec-y);background:var(--surface);
  border-bottom:1px solid var(--line)}
.esc-hero-g{display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:start}
.esc-hero-t{grid-column:1;grid-row:1}
.esc-hero-c{grid-column:1;grid-row:2}
.esc-hero-f{grid-column:2;grid-row:1 / span 2;align-self:start}
.esc-hero h1{margin:0 0 14px}

.esc-form{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:var(--r);padding:22px}
.esc-form-t{font-family:var(--titre);font-size:21px;font-weight:700;letter-spacing:-.015em;
  margin:0 0 6px;color:var(--ink)}
.esc-form-n{font-size:14px;color:var(--ink-mute);margin:0 0 16px}
.esc-f{margin:0 0 12px}
.esc-f label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 6px}
.esc-f-g{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.esc-req{font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-mute)}
.esc-form input[type=text],.esc-form input[type=email],.esc-form input[type=tel],
.esc-form select,.esc-form textarea{
  width:100%;min-height:48px;padding:11px 13px;font-size:16px;font-family:var(--corps);
  background:var(--paper);border:1px solid var(--field-line);border-radius:var(--r);color:var(--ink)}
.esc-form textarea{min-height:92px;resize:vertical}
.esc-form select{appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 49%,var(--ink-soft) 50%),
                   linear-gradient(-45deg,transparent 49%,var(--ink-soft) 50%);
  background-size:6px 6px,6px 6px;background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-repeat:no-repeat}
.esc-form :is(input,select,textarea):focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 3px var(--accent-wash)}
.esc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.esc-consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0}
.esc-consent input{margin-top:4px;width:17px;height:17px;flex:0 0 17px}
.esc-consent label{font-size:13px;color:var(--ink-soft);line-height:1.45}
.esc-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  min-height:50px;padding:0 22px;border-radius:var(--r);border:1px solid var(--accent-deep);
  background:var(--accent-deep);color:oklch(99% 0.004 148);cursor:pointer;
  font-family:var(--corps);font-size:14.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;transition:background .16s ease,border-color .16s ease}
.esc-btn:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:var(--paper)}
.esc-btn-l{width:auto;background:transparent;color:var(--ink);border-color:var(--line-firm);
  text-decoration:none}
.esc-btn-l:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);text-decoration:none}
.esc-rassure{font-size:13px;color:var(--ink-soft);margin:12px 0 0}

/* ===================== Module signature : le flux de conversation ======= */
/* TYPE réservé au registre : aucun autre site de la niche ne sert ce dispositif.
   Rupture 1 de l'habillage : c'est la pièce maîtresse, et elle se relit en 390
   sans défilement horizontal — d'où l'empilement vertical en mobile, jamais un
   rail qui déborde. */
.flc-bloc{border-top:1px solid var(--line-firm);padding-top:30px}
.flc-intro{max-width:72ch;margin:0 0 30px}
.flc-flux{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);list-style:none;margin:0;padding:0}
.flc-etape{background:var(--card);padding:20px 18px;position:relative;display:flex;
  flex-direction:column;gap:9px}
.flc-etape h3{margin:0;font-size:16.5px}
.flc-etape p{font-size:14.5px;color:var(--ink-soft);margin:0}
/* La colonne « qui tient le maillon » : c'est l'angle du site, elle est traitée
   comme une étiquette de pupitre, pas comme du corps de texte. */
.flc-qui{margin-top:auto;padding-top:12px;border-top:1px dashed var(--line-firm);
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-mute)}
.flc-etape.flc-vous .flc-qui{color:var(--accent-deep)}
.flc-etape.flc-vous{background:var(--accent-wash)}
.flc-note{font-size:14.5px;color:var(--ink-soft);margin:18px 0 0;max-width:76ch}

/* Canaux couverts : quatre files, un même client */
.flc-canaux{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.flc-canal{background:var(--card);padding:22px 20px}
.flc-canal h3{font-size:16.5px}
.flc-canal p{font-size:14.5px;color:var(--ink-soft);margin:0}
.flc-canal span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-deep);margin:0 0 9px}

/* ===================== Blocs d'obligation ============================== */
/* obn- : tout ce qui porte du droit. Filet d'accent à gauche, jamais d'ombre. */
.obn-loi{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;padding:20px 22px;margin:0 0 18px}
.obn-loi-t{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-deep);margin:0 0 10px}
.obn-loi p{font-size:15.5px;color:var(--ink);margin:0}
.obn-loi p + p{margin-top:11px}

.obn-objection{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;margin:0 0 24px}
.obn-q{font-family:var(--titre);font-size:20px;font-weight:700;color:var(--ink);margin:0 0 10px;
  letter-spacing:-.012em}
.obn-objection p{margin:0;color:var(--ink-soft)}

.obn-liste{list-style:none;margin:18px 0 0;padding:0}
.obn-liste li{position:relative;padding:8px 0 8px 24px;color:var(--ink-soft)}
.obn-liste li::before{content:"";position:absolute;left:1px;top:16px;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)}

/* Rupture 3 : le tableau comparatif est assumé en PLEINE LAIZE */
.obn-plein{background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.obn-tw{width:100%}
.obn-tbl{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line)}
.obn-tbl caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--ink-mute);
  padding:12px 2px 0}
.obn-tbl th,.obn-tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);
  font-size:15px;vertical-align:top}
.obn-tbl thead th{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--surface)}
.obn-tbl tbody th{font-weight:700;color:var(--ink);width:32%}
.obn-tbl tr:last-child th,.obn-tbl tr:last-child td{border-bottom:0}
.obn-vous{background:var(--accent-wash);font-weight:700;color:var(--ink)}

/* ===================== Preuve et déroulé (grille nationale G56) ========= */
.esc-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.esc-trust > div{background:var(--card);padding:22px 20px}
.esc-trust-t{font-family:var(--titre);font-size:18px;font-weight:700;color:var(--ink);
  margin:0 0 8px;letter-spacing:-.01em}
.esc-trust p{font-size:14.5px;color:var(--ink-soft);margin:0}

.esc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.esc-steps > div{padding:0 24px;border-left:1px solid var(--line)}
.esc-steps > div:first-child{padding-left:0;border-left:0}
.esc-steps h3{font-size:17px;margin:0 0 7px}
.esc-steps p{font-size:14.5px;color:var(--ink-soft);margin:0}
.esc-bg-ink .esc-steps > div{border-left-color:var(--line-on)}
/* Sur aplat encre, le texte secondaire doit repasser en clair : sans cette
   règle, `.esc-steps p` (même spécificité, déclarée plus bas) gagne et rend du
   vert foncé sur vert foncé. */
.esc-bg-ink .esc-steps h3{color:var(--paper)}
.esc-bg-ink .esc-steps p{color:var(--ink-on)}

.esc-attentes{list-style:none;margin:16px 0 0;padding:0}
.esc-attentes li{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.esc-attentes li:last-child{border-bottom:0}

/* ===================== Cartes de maillage =============================== */
.esc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 0}
.esc-cards a{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;text-decoration:none;
  transition:border-color .16s ease}
.esc-cards a:hover{border-color:var(--accent);text-decoration:none}
.esc-cards strong{display:block;font-family:var(--titre);font-size:18px;font-weight:700;
  color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
.esc-cards span{display:block;font-size:14.5px;color:var(--ink-soft)}

.esc-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:22px 0 0}
.esc-index a{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;text-decoration:none}
.esc-index a:hover{border-color:var(--accent);text-decoration:none}
.esc-index strong{display:block;font-family:var(--titre);font-size:19px;font-weight:700;
  color:var(--ink);margin:0 0 7px;letter-spacing:-.012em}
.esc-index span{display:block;font-size:14.5px;color:var(--ink-soft)}

/* ===================== Relance intermédiaire ============================ */
.esc-relance{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;margin:26px 0 0}
.esc-relance p{flex:1 1 300px;margin:0;color:var(--ink-soft)}

/* ===================== Sommaire de page + corps ========================= */
.esc-doc{display:grid;grid-template-columns:236px minmax(0,1fr);gap:48px;align-items:start}
.esc-toc{position:sticky;top:calc(var(--hdr) + 22px);border-left:2px solid var(--accent);
  padding-left:16px}
.esc-toc p{font-size:11.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 8px}
/* Pas de numérotation décorative : une section se nomme par son titre. */
.esc-toc ol{list-style:none;margin:0;padding:0}
.esc-toc a{display:block;padding:5px 0;font-size:14px;color:var(--ink-soft);font-weight:700;
  text-decoration:none}
.esc-toc a:hover{color:var(--accent-deep);text-decoration:none}
.esc-marge{min-height:1px}
.esc-sec{max-width:76ch}
.esc-mid{margin:26px 0 0}

/* ===================== FAQ ============================================== */
.esc-faq{border-top:1px solid var(--line-firm);margin-top:8px}
.esc-faq details{border-bottom:1px solid var(--line)}
.esc-faq summary{cursor:pointer;list-style:none;padding:18px 38px 18px 0;position:relative;
  font-family:var(--titre);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.esc-faq summary::-webkit-details-marker{display:none}
.esc-faq summary::after{content:"";position:absolute;right:5px;top:25px;width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(45deg);transition:transform .18s ease}
.esc-faq details[open] summary::after{transform:rotate(-135deg)}
.esc-a{padding:0 38px 20px 0;color:var(--ink-soft);margin:0}

/* ===================== Fil d'Ariane ===================================== */
.esc-crumb{padding-top:18px}
.esc-crumb ol{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;
  font-size:13px;color:var(--ink-soft)}
.esc-crumb a{color:var(--ink-soft)}
.esc-crumb li + li::before{content:"›";margin-right:7px;color:var(--line-firm)}

/* ===================== Pied de page ===================================== */
.esc-ft{background:var(--ink);color:var(--ink-on);padding:54px 0 0;margin-top:0}
.esc-ft h3{font-family:var(--corps);font-size:11px;font-weight:700;letter-spacing:.19em;
  text-transform:uppercase;color:oklch(70% 0.030 148);margin:0 0 13px}
.esc-ft-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:32px}
.esc-ft-cols > div > p{font-size:14.5px;color:var(--ink-on);margin:0 0 12px}
/* Sur l'aplat encre du pied, la couleur de lien par défaut (accent foncé) tombe
   sous le seuil : les liens de prose y repassent en clair, comme ceux de liste. */
.esc-ft p a{color:oklch(86% 0.110 148)}
.esc-ft ul{list-style:none;margin:0;padding:0}
.esc-ft li a{display:block;padding:5px 0;font-size:14.5px;color:var(--ink-on);text-decoration:none}
.esc-ft li a:hover{color:oklch(86% 0.110 148);text-decoration:underline}
.esc-ft-src{font-size:13px;color:oklch(70% 0.026 148);margin:34px 0 0;padding:18px 0 0;
  border-top:1px solid var(--line-on);line-height:1.65}
.esc-ft-src a{color:oklch(78% 0.070 148)}
.esc-ft-end{font-size:13px;color:oklch(64% 0.024 148);margin:0;padding:16px 0 22px}

/* ===================== Volet latéral (pages internes) =================== */
.esc-tab{position:fixed;right:0;top:54%;z-index:55;transform:translateY(-50%);
  writing-mode:vertical-rl;background:var(--accent-deep);color:oklch(99% 0.004 148);border:0;
  cursor:pointer;padding:18px 11px;font-size:12.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;border-radius:var(--r) 0 0 var(--r)}
.esc-tab:hover{background:var(--accent-ink)}
.esc-drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);z-index:90;
  background:var(--paper);border-left:1px solid var(--line);transform:translateX(101%);
  transition:transform .26s ease;overflow-y:auto;padding:22px}
.esc-drawer.is-open{transform:translateX(0)}
.esc-drawer-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:0 0 16px}
/* 44 px : plancher de cible tactile. */
.esc-x{width:44px;height:44px;background:transparent;border:1px solid var(--line-firm);
  border-radius:var(--r);cursor:pointer;font-size:19px;line-height:1;flex:0 0 44px}
/* Le lien des mentions vit dans une phrase de consentement : il lui faut une
   hauteur tactile propre sans casser le fil du texte. */
.esc-consent a{display:inline-block;padding:11px 0;line-height:1.2}
.esc-scrim{position:fixed;inset:0;z-index:85;background:oklch(22% 0.030 148 / .48);opacity:0;
  pointer-events:none;transition:opacity .2s ease}
.esc-scrim.is-on{opacity:1;pointer-events:auto}

/* Barre d'action mobile : UN seul bouton. Le site n'affiche aucun numéro,
   il n'y a donc rien à appeler — la barre d'appel de la famille devient une
   barre de demande écrite. */
.esc-mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:var(--surface);border-top:1px solid var(--line);padding:7px 12px}
.esc-mbar .esc-btn{min-height:46px;font-size:13.5px}

/* ===================== Responsive ======================================= */
/* Entre le seuil du burger (1080 px) et 1320 px, l'en-tête complet doit tenir
   sur une rangée : sans ce palier il déborde de 73 px, mesuré à 1200 px comme à
   1024 px, et l'appel d'en-tête devient inatteignable. */
@media (max-width:1320px){
  .esc-hdr .esc-wrap{gap:7px}
  .esc-mark b{font-size:18px}
  .esc-mark span{font-size:9px;letter-spacing:.08em}
  .esc-nav > ul{gap:0}
  .esc-nav summary{padding:9px 6px;font-size:13.5px;gap:4px}
  .esc-cta-hdr{padding:0 9px;font-size:11.5px;letter-spacing:0}
}
@media (max-width:1080px){
  .esc-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 0}
  .esc-steps > div:nth-child(3){padding-left:0;border-left:0}
  .flc-flux{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 980 px : seuil du socle du parc. Un seuil voisin mais différent (960) laisse
   une bande où ni la navigation ni le bouton Menu ne s'affichent. */
/* 1080 px : la navigation complète et l'appel d'en-tête ne tiennent plus sur une
   rangée en dessous, mesuré à 1024 px. Le burger prend la main ici, franchement
   au-dessus du seuil de 980 px, pour ne laisser aucune bande sans navigation. */
@media (max-width:1080px){
  .esc-nav,.esc-cta-hdr{display:none}
  .esc-burger{display:inline-flex;align-items:center}
  .esc-hdr .esc-wrap{height:var(--hdr-m)}
  .esc-tab{display:none}
  .esc-mbar{display:block}
  body{padding-bottom:var(--mbar)}
  .esc-hero-g{grid-template-columns:minmax(0,1fr);gap:22px}
  .esc-hero-t,.esc-hero-c,.esc-hero-f{grid-column:auto;grid-row:auto}
  /* Mode A en mobile : le TITRE ouvre, le formulaire suit immédiatement,
     le schéma de routage descend sous le formulaire. */
  .esc-hero-t{order:1}
  .esc-hero-f{order:2}
  .esc-hero-c{order:3}
  .esc-trust{grid-template-columns:minmax(0,1fr)}
  .esc-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .esc-doc{grid-template-columns:minmax(0,1fr);gap:22px}
  .esc-toc{position:static;margin:0 0 22px}
  .esc-marge{display:none}
  .esc-ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
  .flc-canaux{grid-template-columns:repeat(2,minmax(0,1fr))}
  .esc-drawer{width:100vw}
}
@media (max-width:720px){
  .esc-wrap{padding:0 20px}
  .esc-hero{padding-bottom:36px}
  /* Le schéma de routage s'EMPILE : pas un rail qui déborde (rupture 1). */
  .flc-flux{grid-template-columns:minmax(0,1fr)}
  .flc-etape{padding:16px}
  .flc-etape > div{flex:1 1 auto}
  .flc-qui{margin-top:10px;padding-top:9px}
  .flc-canaux{grid-template-columns:minmax(0,1fr)}
  .esc-cards,.esc-index{grid-template-columns:minmax(0,1fr)}
  .esc-steps{grid-template-columns:minmax(0,1fr);gap:0}
  .esc-steps > div{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
  .esc-steps > div:first-child{padding-top:0;border-top:0}
  .esc-f-g{grid-template-columns:minmax(0,1fr);gap:12px}
  /* Mode A : le bouton d'envoi reste ENTIÈREMENT au-dessus du pli en 390x844,
     barre d'action basse déduite. Chaque valeur ci-dessous a été resserrée pour
     cela ; ne pas les relâcher sans remesurer. */
  .esc-hero{padding-top:16px}
  .esc-hero-g{gap:14px}
  .esc-badge{margin-bottom:9px;font-size:10.5px;letter-spacing:.16em}
  h1{font-size:clamp(27px,7.2vw,34px);line-height:1.08}
  .esc-hero h1{margin-bottom:0}
  .esc-form{padding:14px 16px 16px}
  .esc-form-t{font-size:18px;margin-bottom:3px}
  .esc-form-n{font-size:13px;margin-bottom:9px}
  .esc-f{margin-bottom:8px}
  .esc-f label{margin-bottom:4px;font-size:10.5px}
  .esc-form input,.esc-form select{min-height:44px}
  .esc-consent{margin:9px 0}
  .esc-consent label{font-size:12.5px}
  .esc-consent a{padding:8px 0}
  .esc-btn{min-height:48px}
  .esc-ft-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* Tableau dense → cartes empilées, étiquette par cellule, aucun scroll-x. */
  .obn-tbl,.obn-tbl thead,.obn-tbl tbody,.obn-tbl tr,.obn-tbl th,.obn-tbl td{display:block;width:auto}
  .obn-tbl{border:0;background:transparent}
  .obn-tbl thead{display:none}
  .obn-tbl tbody tr{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
    margin-bottom:13px;padding:4px 15px 10px}
  .obn-tbl tbody th{width:auto;padding:13px 0 7px;border-bottom:1px solid var(--line);font-size:16.5px}
  .obn-tbl tbody td{padding:10px 0;border-bottom:1px dashed var(--line);background:transparent!important}
  .obn-tbl tbody td::before{content:attr(data-l);display:block;font-size:10.5px;font-weight:700;
    letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
  .obn-tbl tbody tr td:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto}
}
@media print{
  .esc-hdr,.esc-mbar,.esc-tab,.esc-drawer,.esc-scrim{display:none!important}
}

/* ===================== Polices self-hébergées ==========================
   Aucun appel à Google Fonts : les quatre fichiers sont servis depuis /fonts/
   et préchargés dans le head. Philosopher porte les titres, Andika le corps.
   ======================================================================== */
@font-face{font-family:'Philosopher';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/philosopher-400-latin.woff2') format('woff2');}
@font-face{font-family:'Philosopher';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/philosopher-700-latin.woff2') format('woff2');}
@font-face{font-family:'Andika';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/andika-400-latin.woff2') format('woff2');}
@font-face{font-family:'Andika';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/andika-700-latin.woff2') format('woff2');}

/* Comportements — couche séparée, concaténée après styles.css au build.
   Rien d'esthétique ici : uniquement des états pilotés par le script.

   Le menu mobile est un volet apparié : déclencheur data-drawer-open="menu",
   cible data-drawer="menu". Une conversion en <details> natif a été essayée
   puis abandonnée le 12/09 : elle rendait le menu invisible au contrôle de
   navigation, qui cherche un BOUTON, et cassait en plus la détection sur les
   pages légales. Le bouton reste donc la forme retenue. */

/* Menu mobile plein écran : une VRAIE navigation, jamais le formulaire. */
.esc-mnav{position:fixed;inset:0;z-index:80;background:var(--paper);display:none;
  overflow-y:auto;padding:calc(var(--hdr-m) + 14px) 22px 40px}
.esc-mnav.is-open{display:block}
.esc-mnav-g{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-soft);margin:24px 0 4px}
.esc-mnav-g:first-child{margin-top:0}
.esc-mnav a{display:block;padding:12px 0;border-bottom:1px solid var(--line);
  font-family:var(--titre);font-size:19px;font-weight:700;color:var(--ink);text-decoration:none}
.esc-mnav a:hover{text-decoration:none;color:var(--accent-deep)}
.esc-mnav-x{position:absolute;top:9px;right:18px;width:44px;height:44px;background:transparent;
  border:1px solid var(--line-firm);border-radius:var(--r);cursor:pointer;font-size:20px;line-height:1}

/* Aucun volet ne doit rester déplié si le script ne s'est pas chargé. */
.esc-drawer[hidden],.esc-mnav[hidden]{display:none!important}

/* Un seul panneau de menu déroulant ouvert à la fois : l'état visuel reste
   porté par le sélecteur natif details[open]. */
.esc-nav details[open] > .esc-panel{display:block}

/* Focus visible renforcé dans les surfaces sombres. */
.esc-bg-ink :focus-visible,.esc-ft :focus-visible{outline-color:oklch(86% 0.110 148)}