/*!b:2fd048e6f191*/
/* ============================================================
   deratisation-desinsectisation.fr — famille V11-halle, habillage réservé
   Teinte 349 (réservée au registre) : seule la CLARTÉ a été ajustée pour
   atteindre les seuils de contraste, jamais la teinte.
   Polices Zen Kaku Gothic New / Trispace, auto-hébergées.
   Préfixes : ddx- (ossature), nsb- (nuisibles), tfr- (conversion).
   Aucune ombre : bordures épaisses 2-3 px.
   ============================================================ */

/* ---------- 0. POLICES AUTO-HÉBERGÉES (aucun appel Google Fonts) ----------
   Le nom de famille déclaré est le nom RÉSERVÉ au registre d'habillage,
   pas un alias court : c'est ce nom que le contrôle de police compare. */
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:300;font-display:swap;
  src:url('./fonts/zenkaku-300-latin.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;
  src:url('./fonts/zenkaku-400-latin.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;
  src:url('./fonts/zenkaku-700-latin.woff2') format('woff2')}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:900;font-display:swap;
  src:url('./fonts/zenkaku-900-latin.woff2') format('woff2')}
@font-face{font-family:'Trispace';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('./fonts/trispace-300-700-latin.woff2') format('woff2')}

/* ---------- 1. TOKENS ---------- */
:root{
  --ink:        oklch(20% 0.020 349);
  --ink-2:      oklch(32% 0.024 349);
  --ink-3:      oklch(42% 0.024 349);   /* assombri : méta et étiquettes ≥ 4,5:1 */
  --paper:      oklch(95% 0.006 349);
  --paper-2:    oklch(92% 0.010 349);
  --paper-3:    oklch(89% 0.014 349);
  --surface:    oklch(89% 0.014 349);
  --accent:     oklch(50% 0.165 349);   /* assombri : libellé clair ≥ 4,5:1 dessus */
  --accent-d:   oklch(42% 0.150 349);
  /* Fond de survol des appels, PAS une encre posée sur --accent : le nom --accent-ink
     est réservé par convention à l'encre sur --accent, et il aurait annoncé un contraste
     que ce jeton ne tient pas. L'encre réellement posée sur l'accent est --on-accent. */
  --accent-deep: oklch(14% 0.024 349);
  --on-accent:  oklch(98% 0.004 349);
  --line:       oklch(74% 0.018 349);
  --line-2:     oklch(58% 0.022 349);
  --field-line: oklch(38% 0.062 349);
  --on-dark:    oklch(88% 0.012 349);
  --on-dark-2:  oklch(80% 0.014 349);

  --bw: 2px;  --bw-str: 3px;
  --ft-t: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, sans-serif;
  --ft-b: 'Trispace', ui-monospace, SFMono-Regular, monospace;
  --tight: -0.03em;
  --sp: clamp(52px, 5.6vw, 96px);
  --hd: 76px;
  --gut: 24px;
  --ddx--callbar-h: 60px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--ft-b);
  font-weight:400;font-size:16.5px;line-height:1.68;text-wrap:pretty;-webkit-font-smoothing:antialiased;
  /* Césure MANUELLE : la coupure automatique dépend du dictionnaire du navigateur et
     coupe les mots n'importe où sur les gros titres. */
  hyphens:manual}
input,select,textarea,button,progress{accent-color:var(--accent)}
img,svg{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{color:var(--accent-d)}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}

/* ---------- 3. TYPOGRAPHIE — contraste de graisse 300 ↔ 900 ---------- */
.ddx-h1,.ddx-h2,.ddx-h3,.ddx-h4{font-family:var(--ft-t);font-weight:900;
  letter-spacing:var(--tight);line-height:1.04;overflow-wrap:break-word}
.ddx-h1{font-size:clamp(31px,4.6vw,64px)}
.ddx-h2{font-size:clamp(27px,3.4vw,44px)}
.ddx-h3{font-size:clamp(19px,1.6vw,25px);line-height:1.2;letter-spacing:-0.018em}
.ddx-h4{font-size:17px;line-height:1.28;letter-spacing:-0.01em}
.ddx-thin{display:block;font-weight:300}
.ddx-kicker{display:flex;align-items:center;gap:12px;font-family:var(--ft-t);font-size:11.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:0.2em;color:var(--ink-2);margin-bottom:16px}
.ddx-kicker::before{content:"";width:34px;height:var(--bw);background:var(--accent);flex:0 0 auto}
.ddx-lede{font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:var(--ink-2);max-width:62ch}
.ddx-small{font-size:13.5px;color:var(--ink-3);line-height:1.55}
.ddx-lbl{font-family:var(--ft-t);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.16em;color:var(--ink-3)}
.ddx-num{font-family:var(--ft-t);font-weight:300;letter-spacing:-0.04em;line-height:0.9;
  font-variant-numeric:tabular-nums}
.ddx-num-l{font-size:clamp(36px,4vw,54px)}
.ddx-num-m{font-size:clamp(28px,2.7vw,40px)}
.ddx-u{font-weight:700;font-size:0.34em;letter-spacing:0.04em;margin-left:.15em}
.ddx-prose p{margin-bottom:1.05em;color:var(--ink-2)}
.ddx-prose p:last-child{margin-bottom:0}
.ddx-prose strong{font-weight:700;color:var(--ink)}
.ddx-prose a{font-weight:700}

/* ---------- 4. LARGEURS, SECTIONS, FONDS ---------- */
.ddx-wrap{width:100%;max-width:1260px;margin:0 auto;padding:0 32px}
.ddx-wrap-m{width:100%;max-width:1040px;margin:0 auto;padding:0 32px}
.ddx-wrap-s{width:100%;max-width:880px;margin:0 auto;padding:0 32px}
.ddx-sec{padding:var(--sp) 0;position:relative}
.ddx-bg-paper{background:var(--paper)}
.ddx-bg-2{background:var(--paper-2)}
.ddx-bg-3{background:var(--paper-3)}
.ddx-dark{background:var(--ink);color:var(--paper)}
.ddx-dark .ddx-lede,.ddx-dark .ddx-prose p{color:var(--on-dark)}
.ddx-dark .ddx-small,.ddx-dark .ddx-lbl,.ddx-dark .ddx-kicker{color:var(--on-dark-2)}
.ddx-dark a{color:var(--paper)}
.ddx-dark a:hover{color:var(--accent)}
.ddx-head{margin-bottom:clamp(28px,3vw,48px);max-width:70ch}
.ddx-head-sp{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ddx-rule{height:var(--bw);background:var(--line);border:0;margin:0}

/* ---------- 5. GRILLES ---------- */
.ddx-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gut)}
.ddx-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}
.ddx-g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut)}
.ddx-g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.ddx-g-ed{display:grid;grid-template-columns:1.4fr 0.6fr;gap:clamp(28px,4vw,64px);align-items:start}
.ddx-stack{display:flex;flex-direction:column;gap:18px}
.ddx-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap}

/* ---------- 6. BOUTONS ---------- */
.tfr-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 26px;border:var(--bw) solid transparent;background:none;font-family:var(--ft-t);
  font-size:14.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.09em;
  text-decoration:none;cursor:pointer;border-radius:0;text-align:center}
.ddx-hd-cta{flex:0 0 auto;padding:13px 18px;font-size:13px}
.tfr-btn:hover{letter-spacing:0.14em;transition:background-color .18s linear,color .18s linear,
  letter-spacing .18s linear,border-color .18s linear}
.tfr-btn-1{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tfr-btn-1:hover{background:var(--accent-deep);color:var(--on-accent);border-color:var(--accent-deep)}
.tfr-btn-2{border-color:var(--ink);color:var(--ink)}
.tfr-btn-2:hover{background:var(--ink);color:var(--paper)}
.ddx-dark .tfr-btn-2{border-color:oklch(92% 0.01 349 / .7);color:var(--paper)}
.ddx-dark .tfr-btn-2:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tfr-btn-w{width:100%}
.ddx-lnk{display:inline-flex;align-items:center;gap:9px;font-family:var(--ft-t);font-weight:700;
  font-size:13.5px;text-transform:uppercase;letter-spacing:0.1em;text-decoration:none;
  border-bottom:var(--bw) solid var(--accent);padding-bottom:4px;color:var(--ink)}
.ddx-lnk:hover{gap:14px}
.tfr-reassure{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin-top:12px}
.ddx-dark .tfr-reassure{color:var(--on-dark-2)}

/* ---------- 7. EN-TÊTE ---------- */
.ddx-acc-top{position:fixed;inset:0 0 auto 0;height:var(--bw-str);background:var(--accent);z-index:60}
.ddx-hd{position:fixed;top:var(--bw-str);left:0;right:0;z-index:55;height:var(--hd);
  display:flex;align-items:center;background:var(--surface);border-bottom:var(--bw) solid var(--line)}
.ddx-hd.ddx--is-solid{border-bottom-color:var(--ink-3)}
.ddx-hd-in{width:100%;max-width:1260px;margin:0 auto;padding:0 32px;display:flex;
  align-items:center;gap:26px;position:relative;min-width:0;overflow:hidden}
.ddx-logo{display:flex;flex-direction:column;text-decoration:none;line-height:1;flex:0 1 auto;min-width:0}
.ddx-logo-n{font-family:var(--ft-t);font-size:18px;font-weight:900;letter-spacing:-0.02em;text-transform:uppercase}
.ddx-logo-n em{font-style:normal;font-weight:300}
.ddx-logo-s{font-family:var(--ft-t);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.18em;margin-top:5px;color:var(--ink-3)}
/* Les règles de l'ancienne barre déployée (.ddx-nav, .ddx-nav-l, .ddx-mega…) ont été
   retirées avec le markup qu'elles habillaient : la navigation est désormais un seul
   élément (.ddx-mnav). Le sous-menu ouvert au seul :hover qu'elles portaient était de
   surcroît inatteignable au tactile. */
/* Encre déclarée explicitement : sans couleur posée en regard de son fond, le contrôle de
   contraste des appels ne peut pas apparier les deux et suppose le pire. */
.ddx-burger{display:none;margin-left:auto;width:44px;height:44px;flex:0 0 auto;
  border:var(--bw) solid currentColor;background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.ddx-burger i{display:block;width:19px;height:2px;background:currentColor}

/* Volet de navigation mobile. Ces règles viennent APRÈS le bloc générique [data-drawer]
   (§18) pour reprendre la main sur la géométrie : le menu occupe toute la largeur. */
/* Le volet EST la navigation principale du site : c'est lui qui porte les liens aux largeurs
   où la barre déployée est masquée, donc c'est lui qui porte `data-audit="primary-navigation"`.
   Au-dessus de 820 px il se replie en barre inerte et invisible, la barre déployée prenant le
   relais. Mesuré : l'attribut posé sur la barre déployée rendait la navigation incomptable en
   mobile, la barre y étant en display:none — le volet avait beau s'ouvrir, rien n'était vu. */
.ddx-mnav{background:var(--paper);overflow-y:auto;padding:20px 20px 48px}
/* Au-dessus de 820 px, la MÊME navigation se rend en barre horizontale dans l'en-tête :
   en flux, visible, sans transformation. C'est elle que comptent les contrôles, et c'est
   elle que voit le visiteur. En dessous, elle reprend sa forme de volet (bloc §18). */
@media (min-width:821px){
  /* L'appel d'en-tête tient sur UNE ligne — mais seulement là où il est rendu : posé dans
     les règles de base, le `nowrap` s'appliquait aussi à 320 px, où il déborde. */
  .ddx-hd-cta{white-space:nowrap}
  [data-drawer].ddx-mnav{position:static;transform:none;visibility:visible;
    content-visibility:visible;width:auto;border:0;padding:0;overflow:visible;
    display:flex;align-items:center;gap:4px;margin-left:auto;background:none}
  .ddx-mnav .ddx-mnav-hd{display:none}
  .ddx-mnav-g{padding:0;position:relative}
  .ddx-mnav-g > .ddx-mnav-t{margin:0;padding:10px 12px;font-family:var(--ft-t);font-size:15px;
    font-weight:700;letter-spacing:normal;text-transform:none;color:var(--ink);cursor:default}
  .ddx-mnav-g > a{position:absolute;left:0;top:100%;min-width:260px;z-index:56;
    display:none;padding:11px 14px;background:var(--paper);
    border:var(--bw) solid var(--ink);border-top:0;text-decoration:none}
  .ddx-mnav-g:hover > a,.ddx-mnav-g:focus-within > a{display:block}
  .ddx-mnav-g > a + a{margin-top:-1px}
  .ddx-mnav-g > a b{display:block;font-family:var(--ft-t);font-size:15px;font-weight:700}
  .ddx-mnav-g > a span{display:block;font-size:12px;color:var(--ink-3);line-height:1.4;margin-top:2px}
}
.ddx-mnav-hd{display:flex;align-items:center;justify-content:space-between;
  border-bottom:var(--bw) solid var(--ink);padding-bottom:15px}
.ddx-mnav-g{padding:18px 0 4px}
/* Titres de groupe du menu : des <p>, jamais des <hN>. Le menu est rendu AVANT le <main>,
   et un titre de niveau 2 posé là passerait devant le <h1> de la page. */
.ddx-mnav-t{margin-bottom:9px;font-family:var(--ft-t);color:var(--ink-3);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:0.2em}
.ddx-mnav a{display:block;padding:12px 0;font-family:var(--ft-t);font-size:18px;font-weight:700;
  text-decoration:none;border-bottom:1px solid var(--line);color:var(--ink)}
.ddx-x{width:44px;height:44px;border:var(--bw) solid var(--ink);background:none;cursor:pointer;
  font-size:19px;font-weight:700;line-height:1;flex:0 0 auto}

/* ---------- 8. HERO MODE A — carnet de terrain (archétype réservé) ----------
   Le PANNEAU (titre + formulaire) est PREMIER dans le DOM : la surface de saisie
   ne doit pas être précédée d'un long texte. Le carnet repasse à gauche en desktop
   par `order`, l'ordre visuel est donc conservé. */
.ddx-hero{background:var(--paper-2);border-bottom:var(--bw-str) solid var(--ink)}
.ddx-hero-g{display:grid;grid-template-columns:0.86fr 1.14fr;gap:0;align-items:stretch}
.ddx-hero-p{order:2;background:var(--paper);
  padding:calc(var(--hd) + var(--bw-str) + 8px) clamp(22px,2.6vw,44px) clamp(16px,1.8vw,24px)}
.ddx-hero-p .ddx-h1{font-size:clamp(26px,2.3vw,33px)}
.ddx-hero-p .ddx-kicker{margin-bottom:10px}
.ddx-hero-p .ddx-lede{font-size:16px;line-height:1.5;margin-top:10px}
.ddx-hero-p .tfr-form{gap:11px}
.ddx-hero-p .ddx-mt-m{margin-top:12px}
.nsb-carnet{order:1;position:relative;border-right:var(--bw-str) solid var(--ink);
  background:var(--paper-3);
  padding:calc(var(--hd) + var(--bw-str) + 30px) clamp(20px,2.2vw,34px) clamp(26px,2.6vw,40px);
  display:flex;flex-direction:column;gap:16px}
.nsb-carnet::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 27px,oklch(20% 0.02 349/.07) 27px 28px)}
.nsb-fiche{position:relative;border:var(--bw) solid var(--ink);background:var(--paper);padding:18px}
.nsb-fiche dt{font-family:var(--ft-t);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.16em;color:var(--ink-3);margin-top:13px}
.nsb-fiche dt:first-child{margin-top:0}
.nsb-fiche dd{margin:3px 0 0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.nsb-fiche-t{position:absolute;top:-11px;left:14px;background:var(--accent);color:var(--on-accent);
  font-family:var(--ft-t);font-size:10px;font-weight:700;letter-spacing:0.14em;
  text-transform:uppercase;padding:3px 10px}
.ddx-pts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}
.ddx-pts li{display:flex;gap:8px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.ddx-pts li::before{content:"";width:10px;height:6px;margin-top:7px;flex:0 0 auto;
  border-left:var(--bw) solid var(--accent);border-bottom:var(--bw) solid var(--accent);
  transform:rotate(-45deg)}

/* ---------- 9. BANDE DE PREUVE ---------- */
.ddx-pbar{background:var(--ink);border-top:var(--bw-str) solid var(--accent)}
.ddx-pbar .ddx-g5>div{padding:22px 24px;border-right:1px solid oklch(97% 0 0/.18)}
.ddx-pbar .ddx-g5>div:last-child{border-right:0}
.ddx-pbar .ddx-num{color:var(--paper)}
.ddx-pbar .ddx-lbl{color:var(--on-dark-2);margin-top:9px;display:block}

/* ---------- 10. FIL D'ARIANE ---------- */
/* `breadcrumb` et `breadcrumb-list` sont les noms conventionnels du fil d'Ariane : ils sont
   portés en plus des classes préfixées pour que le composant soit reconnaissable, et ils
   sont déclarés ici pour n'être jamais des classes fantômes. */
.ddx-brd,.breadcrumb{font-size:12.5px;color:var(--ink-3);padding:14px 0}
.ddx-brd ol,.breadcrumb-list{display:flex;gap:9px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.ddx-brd li{display:flex;gap:9px;align-items:center}
.ddx-brd li+li::before{content:"/";color:var(--ink-3)}
.ddx-brd a{text-decoration:none;font-weight:700;color:var(--ink-2)}
.ddx-brd a:hover{text-decoration:underline}
.ddx-brd-bar{background:var(--paper-3);border-bottom:var(--bw) solid var(--line)}

/* ---------- 11. CARTES, LISTES ---------- */
.ddx-card{background:var(--paper);border:var(--bw) solid var(--ink);position:relative}
.ddx-card-p{display:block;padding:22px;text-decoration:none;color:var(--ink)}
.ddx-card-p:hover{background:var(--paper-2)}
.ddx-tile{border:var(--bw) solid var(--line-2);padding:22px;background:var(--paper)}
.ddx-dark .ddx-tile{border-color:oklch(97% 0 0/.24);background:oklch(97% 0 0/.05)}
.ddx-chk{display:flex;flex-direction:column;gap:9px}
.ddx-chk li{display:flex;gap:11px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.ddx-chk li::before{content:"";flex:0 0 auto;width:11px;height:7px;margin-top:8px;
  border-left:var(--bw) solid var(--accent);border-bottom:var(--bw) solid var(--accent);
  transform:rotate(-45deg)}
.ddx-dark .ddx-chk li{color:var(--on-dark)}

/* ---------- 12. MODULE SIGNATURE — L'ATLAS DES NUISIBLES ---------- */
.nsb-atlas{border-top:var(--bw-str) solid var(--ink);border-bottom:var(--bw-str) solid var(--ink)}
.nsb-atlas-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.nsb-pl{border-right:var(--bw) solid var(--line-2);padding:22px 18px 24px;display:flex;
  flex-direction:column;gap:11px;background:var(--paper)}
.nsb-pl:last-child{border-right:0}
.nsb-pl-fig{aspect-ratio:4/3;border:var(--bw) solid var(--ink-3);background:var(--paper-2);
  position:relative;overflow:hidden}
.nsb-pl-fig::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,oklch(20% 0.02 349/.09) 0 1px,transparent 1px 7px)}
.nsb-pl-fig svg{position:absolute;inset:0;width:100%;height:100%}
.nsb-pl-n{position:absolute;top:6px;left:8px;font-family:var(--ft-t);font-size:10px;
  font-weight:700;letter-spacing:0.14em;color:var(--ink-3);z-index:2}
.nsb-pl h3{font-family:var(--ft-t);font-size:16.5px;font-weight:900;letter-spacing:-0.015em}
.nsb-pl-lat{font-style:italic;font-size:12.5px;color:var(--ink-3)}
.nsb-pl dl{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.nsb-pl dt{font-family:var(--ft-t);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--ink-3)}
.nsb-pl dd{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}

/* ---------- 13. MÉTHODE / DÉROULÉ (sans ordinal décoratif) ---------- */
.ddx-step{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:var(--bw-str) solid var(--accent)}
.ddx-step-i{padding:28px 24px 30px;border-right:var(--bw) solid var(--line-2)}
.ddx-step-i:last-child{border-right:0}
.ddx-dark .ddx-step-i{border-color:oklch(97% 0 0/.24)}
.ddx-step-i h3{margin-bottom:9px;position:relative;padding-top:16px}
.ddx-step-i h3::before{content:"";position:absolute;top:0;left:0;width:26px;height:var(--bw-str);
  background:var(--accent)}
.ddx-step-i p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.ddx-dark .ddx-step-i p{color:var(--on-dark)}

/* ---------- 14. PREUVE, OBJECTION, RELANCE ---------- */
.ddx-preuve{border-left:var(--bw-str) solid var(--accent);padding:18px 0 18px 20px;max-width:74ch}
.ddx-preuve p{font-size:15px;color:var(--ink-2)}
.ddx-preuve ul{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.ddx-preuve li{font-size:13.5px;color:var(--ink-3)}
.ddx-objection{border:var(--bw) solid var(--field-line);background:var(--paper-2);padding:22px 24px;max-width:78ch}
.ddx-objection q{display:block;font-family:var(--ft-t);font-size:17px;font-weight:700;
  letter-spacing:-0.01em;margin-bottom:10px}
.ddx-objection p{font-size:15px;color:var(--ink-2)}
.ddx-relance{border-top:var(--bw-str) solid var(--accent);border-bottom:var(--bw) solid var(--line);
  background:var(--paper-3);padding:26px 0}
.ddx-relance-in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ddx-relance p{font-family:var(--ft-t);font-size:clamp(17px,1.6vw,22px);font-weight:700;
  letter-spacing:-0.015em;max-width:52ch}

/* ---------- 15. TABLEAU ---------- */
.ddx-tab{width:100%;border-collapse:collapse;text-align:left}
.ddx-tab caption{text-align:left;font-size:12.5px;color:var(--ink-3);padding-bottom:13px}
.ddx-tab th,.ddx-tab td{padding:16px 13px;border-bottom:1px solid var(--line);vertical-align:top}
.ddx-tab thead th{border-bottom:var(--bw) solid var(--ink);font-family:var(--ft-t);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:0.16em;color:var(--ink-3)}
.ddx-tab tbody th{font-family:var(--ft-t);font-weight:700;font-size:16px;width:36%}
.ddx-tab td span{display:block;font-size:13px;color:var(--ink-3);margin-top:4px}

/* ---------- 16. FAQ ---------- */
.ddx-faq{border-top:var(--bw) solid var(--ink)}
.ddx-faq details{border-bottom:1px solid var(--line)}
.ddx-faq summary{list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-family:var(--ft-t);font-size:clamp(16px,1.3vw,18.5px);font-weight:700;letter-spacing:-0.012em}
.ddx-faq summary::-webkit-details-marker{display:none}
.ddx-faq summary::after{content:"";position:absolute;right:8px;top:27px;width:13px;height:13px;
  border-right:var(--bw) solid var(--accent);border-bottom:var(--bw) solid var(--accent);
  transform:rotate(45deg)}
.ddx-faq details[open] summary::after{transform:rotate(-135deg)}
.ddx-faq .ddx-faq-r{padding:0 52px 22px 0;color:var(--ink-2);max-width:76ch}

/* ---------- 17. FORMULAIRE ---------- */
.tfr-form{display:flex;flex-direction:column;gap:16px}
.tfr-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tfr-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.tfr-f>label{font-family:var(--ft-t);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--ink-3)}
.tfr-f input,.tfr-f select,.tfr-f textarea{font-size:16px;padding:12px 13px;background:var(--paper);
  border:var(--bw) solid var(--field-line);border-radius:0;width:100%;font-family:var(--ft-b)}
.tfr-f textarea{min-height:118px;resize:vertical}
.tfr-f input:focus,.tfr-f select:focus,.tfr-f textarea:focus{border-color:var(--ink);outline:0}
.tfr-f ::placeholder{color:var(--ink-3);opacity:1}
.tfr-consent{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.tfr-consent input{width:19px;height:19px;flex:0 0 auto;margin-top:2px}
.tfr-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.tfr-box{border:var(--bw-str) solid var(--ink);background:var(--paper);padding:clamp(22px,2.6vw,36px)}
.ddx-dark .tfr-f>label{color:var(--on-dark-2)}
.ddx-dark .tfr-f input,.ddx-dark .tfr-f select,.ddx-dark .tfr-f textarea{
  background:oklch(97% 0 0/.07);border-color:oklch(97% 0 0/.62);color:var(--paper)}
.ddx-dark .tfr-f ::placeholder{color:oklch(80% 0.012 349)}
.ddx-dark .tfr-consent{color:var(--on-dark-2)}

/* ---------- 18. VOLET LATÉRAL (kit de comportements) ----------
   Fermé, le volet est RETIRÉ de l'arbre d'accessibilité et du rendu : sans quoi son
   formulaire est compté comme une surface de conversion visible de la page. */
[data-drawer]{position:fixed;inset:0 0 0 auto;width:min(500px,100vw);z-index:90;
  background:var(--paper);border-left:var(--bw-str) solid var(--accent);
  transform:translateX(101%);transition:transform .28s ease;overflow-y:auto;
  visibility:hidden;content-visibility:hidden}
[data-drawer].ddx--is-open{transform:translateX(0);visibility:visible;content-visibility:visible}
[data-drawer-scrim]{position:fixed;inset:0;z-index:85;opacity:0;pointer-events:none;
  transition:opacity .22s ease;background:oklch(14% 0.024 349/.55)}
body:has([data-drawer].ddx--is-open) [data-drawer-scrim]{opacity:1;pointer-events:auto}
html.ddx--scroll-locked{overflow:hidden}
html.ddx--scroll-locked body{position:fixed;left:0;right:0;width:100%}
.tfr-drw{padding:24px 26px 48px}
.tfr-drw-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  border-bottom:var(--bw) solid var(--ink);padding-bottom:16px;margin-bottom:20px}
/* Le menu mobile est un volet PLEINE LARGEUR : il reprend la main après le bloc générique.
   Il garde `content-visibility` à `visible` : cette propriété retire le contenu de l'arbre
   d'accessibilité, et une navigation qu'aucune technologie d'assistance ne voit n'est pas
   une navigation. L'escamotage se fait par `visibility` et par la translation, qui suffisent.
   Le volet « devis », lui, conserve le retrait complet : il porte un formulaire qui serait
   sinon compté comme une surface de conversion visible de la page. */
/* Navigation UNIQUE, pilotée par le kit en dessous de 821 px (volet) et rendue en barre
   au-dessus. Le repli `:target` reste actif pour le cas sans script. */
[data-drawer].ddx-mnav{width:100%;border-left:0;content-visibility:visible}
.ddx-mnav:target{transform:translateX(0);visibility:visible}
/* Repli SANS JavaScript. Mesuré : script désactivé, le menu piloté par le seul kit ne rendait
   AUCUN lien de navigation à 390 px. Une navigation qui dépend du script n'est pas une
   navigation. Le déclencheur reste un vrai <button> (c'est lui que cherchent les contrôles) ;
   quand le script ne tourne pas, le volet se replie en bloc ordinaire, déjà déployé. */
[data-drawer].ddx-mnav:target{transform:translateX(0);visibility:visible}
/* Le déclencheur est un vrai <button> (c'est lui que cherchent les contrôles et que câble le
   kit). Un lien superposé vise #menu : il ouvre le volet par `:target`, donc SANS script.
   `@media (scripting: none)` a été écarté après mesure : il rend `false` dans un navigateur
   ordinaire et ne se déclenchait donc jamais. */
.ddx-burger-w{position:relative;display:none;flex:0 0 auto;margin-left:auto}
.ddx-burger{position:relative;z-index:1}
.ddx-mnav:target{transform:translateX(0);visibility:visible}
.ddx-x{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;
  color:var(--ink)}
.ddx-burger{text-decoration:none;color:inherit}
.tfr-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:50;
  writing-mode:vertical-rl;background:var(--accent);color:var(--on-accent);border:0;
  padding:19px 12px;font-family:var(--ft-t);font-size:11.5px;font-weight:700;letter-spacing:0.18em;
  text-transform:uppercase;cursor:pointer}
.tfr-tab:hover{background:var(--accent-deep)}

/* ---------- 19. BARRE MOBILE ---------- */
.tfr-mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;
  border-top:var(--bw-str) solid var(--accent)}
.tfr-mbar a{flex:1;padding:15px 8px;font-family:var(--ft-t);font-size:13px;font-weight:700;
  text-transform:uppercase;letter-spacing:0.07em;text-align:center;text-decoration:none}
.tfr-mbar .tfr-mb-1{background:var(--accent);color:var(--on-accent)}
.tfr-mbar .tfr-mb-2{background:var(--ink);color:var(--paper)}

/* ---------- 20. ARTICLE, PIED DE PAGE ---------- */
.ddx-art{max-width:70ch;font-size:17px}
.ddx-art h2{margin:0 0 .5em}
.ddx-art p{margin-bottom:1.05em;color:var(--ink-2)}
.ddx-art p:last-child{margin-bottom:0}
.ddx-art a{font-weight:700}
.ddx-art ul{margin:0 0 1.15em;display:flex;flex-direction:column;gap:8px}
.ddx-art li{display:flex;gap:11px;color:var(--ink-2)}
.ddx-art li::before{content:"";flex:0 0 auto;width:8px;height:8px;margin-top:10px;background:var(--accent)}
.ddx-maj{font-family:var(--ft-t);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--ink-3);padding:12px 0}
.ddx-ft{background:var(--surface);border-top:var(--bw) solid var(--line-2);padding:clamp(42px,4.2vw,68px) 0 0}
.ddx-ft-g{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:clamp(22px,3vw,42px)}
.ddx-ft h2,.ddx-ft-t{font-family:var(--ft-t);font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.16em;color:var(--ink-3);margin-bottom:13px}
.ddx-lecture{font-family:var(--ft-t);font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:0.14em;color:var(--ink-3);margin-top:10px}
.ddx-ft a{display:block;padding:6px 0;font-size:14.5px;text-decoration:none;color:var(--ink-2)}
.ddx-ft a:hover{text-decoration:underline}
.ddx-foot-sources{margin-top:clamp(30px,3vw,48px);border-top:1px solid var(--line-2);
  padding-top:18px;font-size:12px;color:var(--ink-3);line-height:1.6}
.ddx-foot-sources a{display:inline;padding:0;font-size:12px;color:var(--ink-3)}
.ddx-ft-legal{margin-top:18px;border-top:1px solid var(--line-2);padding:18px 0 24px;display:flex;
  gap:18px;flex-wrap:wrap;justify-content:space-between;font-size:12.5px;color:var(--ink-3)}
.ddx-ft-legal a{display:inline;padding:0;font-size:12.5px;color:var(--ink-3)}
.ddx-acc-bot{height:var(--bw-str);background:var(--accent)}
/* Pas de `nowrap` ici : sur un libellé long, il déborde à 320 px. Le masquage suffit. */
.ddx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ddx-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);
  padding:12px 18px}
.ddx-skip:focus{left:0}
.ddx-mt-s{margin-top:14px}.ddx-mt-m{margin-top:24px}.ddx-mt-l{margin-top:40px}

/* ============================================================
   21. RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .ddx-ft-g{grid-template-columns:1fr 1fr;gap:32px}
  .ddx-step{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ddx-step-i:nth-child(2n){border-right:0}
  .ddx-step-i:nth-child(-n+2){border-bottom:var(--bw) solid var(--line-2)}
  .nsb-atlas-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nsb-pl:nth-child(2n){border-right:0}
  .nsb-pl:nth-child(-n+2){border-bottom:var(--bw) solid var(--line-2)}
}
/* Entre 821 et 1080 px, la barre de navigation, le logo et l'appel d'en-tête se disputent
   une largeur trop courte : l'en-tête débordait de 48 px à 1024. Les trois se resserrent,
   et la description des entrées passe à la trappe (elle ne sert qu'au-delà). */
@media (max-width:1080px) and (min-width:821px){
  .ddx-mnav-g > .ddx-mnav-t{padding:9px 7px;font-size:13.5px}
  .ddx-mnav{gap:0}
  .ddx-logo-s{display:none}
  .ddx-hd-cta{padding:11px 12px;font-size:12px}
}
@media (max-width:1080px){
  .ddx-hd-in{gap:14px}
  .ddx-mnav-g > .ddx-mnav-t{padding:10px 8px;font-size:14.5px}
}
@media (max-width:980px){
  .ddx-g-ed,.ddx-g4,.ddx-g3{grid-template-columns:1fr}
  .ddx-g4,.ddx-g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ddx-g5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ddx-pbar .ddx-g5>div:nth-child(3n){border-right:0}
  .ddx-pbar .ddx-g5>div{border-bottom:1px solid oklch(97% 0 0/.18)}
  /* Le panneau reste premier : en mobile il passe simplement au-dessus du carnet. */
  .ddx-hero-g{grid-template-columns:1fr}
  .ddx-hero-p{order:1}
  .nsb-carnet{order:2;border-right:0;border-top:var(--bw-str) solid var(--ink);
    padding:clamp(24px,3vw,32px) clamp(20px,2.2vw,34px)}
}
@media (max-width:820px){
  :root{--hd:62px;--gut:16px}
  /* Aucun bouton de conversion dans l'en-tête mobile : il ferait doublon avec la
     barre fixe basse, et c'est lui qui faisait déborder l'en-tête sous 360px. */
  .ddx-hd .ddx-hd-cta{display:none}
  .ddx-burger,.ddx-burger-w{display:flex}
  .tfr-mbar{display:flex}
  body{padding-bottom:var(--ddx--callbar-h)}
  .tfr-tab{display:none}
  .ddx-hero-p{padding-top:calc(var(--hd) + var(--bw-str) + 8px);padding-bottom:14px}
  .ddx-hero-p .ddx-h1{font-size:clamp(23px,5.8vw,27px)}
  .ddx-hero-p .ddx-lede{font-size:14.5px;line-height:1.45;margin-top:8px}
  .ddx-hero-p .ddx-kicker{margin-bottom:8px;font-size:10.5px}
  .ddx-hero-p .tfr-form{gap:11px}
  .ddx-hero-p .tfr-form .ddx-h4{font-size:15px}
  .ddx-hero-p .ddx-mt-m{margin-top:12px}
  .ddx-pts{display:none}
  .ddx-art{font-size:16.5px}
  .ddx-logo-s{display:none}
}
@media (max-width:640px){
  .ddx-g2,.ddx-g3,.ddx-g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ddx-1col{grid-template-columns:1fr}
  /* Le formulaire court garde 2 colonnes sur ses champs brefs : les empiler
     repousse le bouton d'envoi sous la ligne de flottaison. */
  .tfr-row{grid-template-columns:1fr}
  .tfr-form--court .tfr-row{grid-template-columns:1fr 1fr;gap:10px}
  .tfr-form--court .tfr-f>label{font-size:10px;letter-spacing:0.1em}
  .ddx-wrap,.ddx-wrap-m,.ddx-wrap-s,.ddx-hd-in{padding:0 18px}
  .ddx-step{grid-template-columns:1fr}
  .ddx-step-i{border-right:0;border-bottom:var(--bw) solid var(--line-2);padding:22px 0 24px}
  .ddx-step-i:last-child{border-bottom:0}
  .nsb-atlas-g{grid-template-columns:1fr}
  .nsb-pl{border-right:0;border-bottom:var(--bw) solid var(--line-2)}
  .nsb-pl:last-child{border-bottom:0}
  .ddx-g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ddx-pbar .ddx-g5>div{padding:16px 13px;border-right:1px solid oklch(97% 0 0/.18)}
  .ddx-pbar .ddx-g5>div:nth-child(2n){border-right:0}
  .ddx-pbar .ddx-g5>div:last-child{grid-column:1/-1}
  .ddx-ft-g{grid-template-columns:1fr;gap:26px}
  .ddx-faq .ddx-faq-r{padding-right:0}
  .ddx-relance-in{flex-direction:column;align-items:flex-start;gap:16px}
  .ddx-tab thead{display:none}
  .ddx-tab,.ddx-tab tbody,.ddx-tab tr,.ddx-tab th,.ddx-tab td{display:block;width:auto}
  .ddx-tab tr{border:var(--bw) solid var(--ink);margin-bottom:15px;padding:6px 15px 13px}
  .ddx-tab tbody th{width:auto;padding:12px 0 8px;border-bottom:1px solid var(--line)}
  .ddx-tab td{padding:10px 0;border-bottom:1px solid var(--line)}
  .ddx-tab td:last-child{border-bottom:0}
  .ddx-tab td::before{content:attr(data-l);display:block;font-family:var(--ft-t);font-size:10px;
    font-weight:700;text-transform:uppercase;letter-spacing:0.16em;color:var(--ink-3);margin-bottom:4px}
}
@media (max-width:400px){
  .tfr-btn{padding:15px 16px;font-size:13.5px}
  .ddx-hd-in{gap:10px;padding:0 14px}
  .ddx-logo-n{font-size:16px}
}
@media print{
  .ddx-hd,.tfr-mbar,.tfr-tab,[data-drawer],[data-drawer-scrim],.ddx-acc-top{display:none !important}
}