/* ============================================================
   BALIMANA — Design System  ·  v1.0
   Direction « Méridien » (rigueur éditoriale) + énergie data « Flux »
   Tokens exportables + composants. Importer ce seul fichier suffit.
   ============================================================ */

:root{
  /* ---- Brand palette (contrainte) ---- */
  --navy:#29235c;   /* primaire   */
  --blue:#044998;   /* secondaire */
  --cyan:#009fe3;   /* tertiaire  */
  --orange:#f39200; /* accent/CTA */

  /* ---- Navy scale ---- */
  --navy-50:#f3f2f8;  --navy-100:#e4e2ef; --navy-200:#c4c0db;
  --navy-300:#9a93c0; --navy-400:#635a93; --navy-500:#29235c;
  --navy-600:#241f52; --navy-700:#1d1942; --navy-800:#161333; --navy-900:#0f0d22;

  /* ---- Blue scale ---- */
  --blue-50:#eaf1fa;  --blue-100:#cfe0f3; --blue-200:#9cc0e6;
  --blue-300:#5d97d4; --blue-400:#2470bf; --blue-500:#044998;
  --blue-600:#043e82; --blue-700:#03316a; --blue-800:#022550; --blue-900:#021a39;

  /* ---- Cyan scale ---- */
  --cyan-50:#e6f6fd;  --cyan-100:#c2eafb; --cyan-200:#87d6f6;
  --cyan-300:#45bdee; --cyan-400:#1aabe8; --cyan-500:#009fe3;
  --cyan-600:#0086c0; --cyan-700:#006a98; --cyan-800:#005075; --cyan-900:#003a55;

  /* ---- Orange scale ---- */
  --orange-50:#fff6e8;  --orange-100:#fde8c4; --orange-200:#facf86;
  --orange-300:#f7b649; --orange-400:#f5a31f; --orange-500:#f39200;
  --orange-600:#d47c00; --orange-700:#a86000; --orange-800:#7d4700; --orange-900:#5a3300;

  /* ---- Neutrals (teintés navy) ---- */
  --white:#ffffff;
  --neutral-50:#f9f9f9;  --neutral-100:#f1f1f3; --neutral-200:#e4e4e8;
  --neutral-300:#cfcfd6; --neutral-400:#a8a8b3; --neutral-500:#7d7d8a;
  --neutral-600:#565664; --neutral-700:#3e3e49; --neutral-800:#2a2a31;
  --neutral-900:#222222; --black:#111114;

  /* ---- Semantic ---- */
  --ink:#333333;
  --text-strong:var(--navy-700);
  --text:var(--ink);
  --text-muted:var(--neutral-500);
  --text-ondark:#ffffff;
  --text-ondark-muted:#aaa8c6;
  --bg:var(--white);
  --bg-subtle:var(--neutral-50);
  --bg-dark:var(--navy-800);
  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --link:var(--blue-500);
  --focus:var(--cyan-500);
  --success:#1f8a5b; --warning:var(--orange-600); --danger:#c0392b;

  /* ---- Typographie ---- */
  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:'Archivo', system-ui, -apple-system, sans-serif;
  --font-data:'Space Grotesk', var(--font-sans);
  --font-mono:'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Échelle modulaire fluide — ratio 1.25 (tierce majeure), base 16px.
     Chaque échelon haut interpole entre sa valeur mobile (atteinte à 360px de
     viewport) et sa valeur historique (atteinte dès 1200px). La borne haute de
     chaque clamp() vaut EXACTEMENT l'ancienne valeur fixe : au-delà de 1200px,
     et donc sur tout le desktop, le rendu est inchangé au pixel près.
     --text-xs, --text-sm et --text-base restent fixes : le texte courant ne
     descend jamais sous 16px. */
  --text-xs:0.75rem;   --text-sm:0.875rem; --text-base:1rem;
  --text-md:clamp(1rem, 0.239vw + 0.9462rem, 1.125rem);
  --text-lg:clamp(1.125rem, 0.239vw + 1.0712rem, 1.25rem);
  --text-xl:clamp(1.25rem, 0.477vw + 1.1427rem, 1.5rem);
  --text-2xl:clamp(1.5rem, 0.715vw + 1.3391rem, 1.875rem);
  --text-3xl:clamp(1.75rem, 0.953vw + 1.5356rem, 2.25rem);
  --text-4xl:clamp(2rem, 1.905vw + 1.5714rem, 3rem);
  --text-5xl:clamp(2.25rem, 2.858vw + 1.6069rem, 3.75rem);
  --text-6xl:clamp(2.5rem, 3.81vw + 1.6427rem, 4.5rem);

  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-eyebrow:0.2em;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* ---- Espacements (base 4px) ----
     Les petits pas (--space-0 à --space-12) restent FIXES : ils règlent des
     rapports internes de composant (gouttières, padding de bouton), pas du
     rythme de page ; les rendre fluides déformerait les composants.
     Seuls les grands pas deviennent fluides — ce sont eux qui produisent des
     respirations démesurées sur mobile. Même règle que la typographie : borne
     haute EXACTEMENT égale à l'ancienne valeur, atteinte dès 1200px. */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
  --space-16:clamp(2rem, 3.81vw + 1.1427rem, 4rem);
  --space-20:clamp(2.5rem, 4.763vw + 1.4283rem, 5rem);
  --space-24:clamp(3rem, 5.715vw + 1.7141rem, 6rem);
  --space-32:clamp(3.5rem, 8.572vw + 1.5713rem, 8rem);

  /* ---- Rayons (Méridien = angles nets) ---- */
  --radius-xs:2px; --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:999px;

  /* ---- Ombres (teintées navy) ---- */
  --shadow-xs:0 1px 2px rgba(41,35,92,.06);
  --shadow-sm:0 2px 8px -2px rgba(41,35,92,.10);
  --shadow-md:0 8px 24px -8px rgba(41,35,92,.14);
  --shadow-lg:0 20px 48px -16px rgba(41,35,92,.20);
  --shadow-xl:0 30px 60px -24px rgba(41,35,92,.30);
  --ring:0 0 0 3px rgba(0,159,227,.35);

  /* ---- Animation ---- */
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-slower:500ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- Layout ---- */
  --container:1320px; --container-narrow:880px;
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
.ds *{margin:0}
.ds{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---- Typographic primitives ---- */
.ds-display{font-family:var(--font-display);font-weight:var(--weight-regular);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.ds-display em{font-style:italic;color:var(--blue-500)}
.ds-h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-5xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.ds-h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-3xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);color:var(--text-strong)}
.ds-h3{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);line-height:var(--leading-snug);color:var(--text-strong)}
.ds-lead{font-size:var(--text-md);line-height:var(--leading-relaxed);color:var(--neutral-600)}
.ds-body{font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--text)}
.ds-small{font-size:var(--text-sm);color:var(--text-muted)}
.ds-eyebrow{font-family:var(--font-data);font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--blue-500);display:inline-flex;align-items:center;gap:10px}
.ds-eyebrow::before{content:"";width:26px;height:2px;background:var(--orange);flex:none}
.ds-data{font-family:var(--font-data);font-feature-settings:"tnum" 1}
a.ds-link{color:var(--link);text-decoration:none;border-bottom:1px solid var(--blue-200);padding-bottom:1px;transition:border-color var(--dur-base) var(--ease-out),color var(--dur-base)}
a.ds-link:hover{border-color:var(--blue-500)}
/* Cible tactile du lien de design system sur mobile (26 px de haut nativement).
   MOTIF UNIQUE DU THÈME : plancher en base mobile, neutralisé à 900 px.
   `inline-flex` plutôt qu'un remplissage vertical : un remplissage sur un
   élément `inline` décollerait le trait de soulignement (border-bottom) de neuf
   pixels sous le texte. La boîte inline-flex, elle, grandit autour du texte sans
   déplacer ni le texte ni son trait, et reste de niveau ligne — elle ne sort
   donc pas son bloc parent du champ de mesure de la troncature (C4), à la
   différence d'un passage en `block`.
   Le `.ds-link` en pleine phrase (front-page, « Écrivez-nous ») est exempté de
   la règle des 44 px par WCAG 2.5.8 comme par le harnais ; `inline-flex` y
   serait néanmoins malvenu, d'où l'exclusion des liens enfants de <p>. */
a.ds-link:not(p > a){display:inline-flex;align-items:center;min-height:44px}
@media(min-width:900px){a.ds-link:not(p > a){display:inline;min-height:0}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  --btn-bg:var(--orange);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-weight:var(--weight-bold);font-size:var(--text-sm);
  letter-spacing:.01em;line-height:1;cursor:pointer;user-select:none;white-space:nowrap;
  padding:13px 22px;border-radius:var(--radius-xs);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base),
             border-color var(--dur-base),box-shadow var(--dur-base),transform var(--dur-fast);
}
.btn:hover{background:var(--orange-600);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.btn:active{transform:translateY(0);background:var(--orange-700)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn[disabled],.btn.is-disabled{opacity:.45;pointer-events:none;box-shadow:none;transform:none}
.btn .btn-ico{width:16px;height:16px;flex:none}

.btn--secondary{--btn-bg:var(--navy);--btn-fg:#fff}
.btn--secondary:hover{background:var(--navy-700)}
.btn--secondary:active{background:var(--navy-800)}

.btn--outline{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:var(--border-strong)}
.btn--outline:hover{background:var(--navy-50);border-color:var(--navy);box-shadow:none}
.btn--outline:active{background:var(--navy-100)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);--btn-bd:transparent}
.btn--ghost:hover{background:var(--neutral-100);box-shadow:none}

.btn--link{--btn-bg:transparent;--btn-fg:var(--blue-500);--btn-bd:transparent;padding:6px 2px;border-radius:0}
.btn--link:hover{background:transparent;box-shadow:none;color:var(--blue-700);text-decoration:underline;text-underline-offset:4px}

.btn--sm{padding:9px 15px;font-size:var(--text-xs)}
.btn--lg{padding:16px 30px;font-size:var(--text-base)}
.btn--block{display:flex;width:100%}

/* ARBITRAGE — le bouton mesure 42 px, il en manquait deux.
   Les tâches 4 et 5 l'avaient laissé intact au motif que le gain au harnais
   était nul (d'autres cibles maintenaient les mêmes contrôles au rouge) tandis
   que le risque de design était réel (un plancher global aurait porté .btn--sm
   de 33 à 44 px, en écrasant la hiérarchie des tailles de bouton).
   Les deux termes ont changé : le gain n'est plus nul — une fois CF7 traité,
   ce bouton est la dernière cause de rouge sur l'accueil et sur domaines — et
   le risque est écarté par une exclusion explicite de .btn--sm.
   On corrige donc, avec le MOTIF UNIQUE DU THÈME : plancher en base mobile,
   neutralisé au palier 900 px. Le rendu desktop est inchangé au pixel, y
   compris pour .btn--sm, .btn--lg et .btn--link. Correction par le remplissage
   (plancher de boîte), jamais par la taille du texte. */
.btn:not(.btn--sm):not(.btn--link){min-height:44px}
@media(min-width:900px){.btn:not(.btn--sm):not(.btn--link){min-height:0}}

/* Base mobile : le libelle peut revenir a la ligne.
   `white-space:nowrap` fige la largeur du bouton sur celle de son texte. Or
   plusieurs libelles sont GENERES DEPUIS LE BACK-OFFICE — « Voir les 13
   domaines d'intervention » (front-page.php, _n() sur le nombre de domaines
   publies) mesure 357 px : il passait a 2 px pres a 360 px et debordait de
   18 px a 320 px. Le vert tenait donc a la longueur d'une chaine editable, pas
   au CSS. Un editeur ajoutant un domaine, ou traduisant un libelle, cassait la
   mise en page sans rien toucher au code.
   Le retour a la ligne est autorise en base, avec centrage du texte et
   `max-width:100%` pour que le bouton ne depasse jamais son conteneur.
   `nowrap` est restaure au palier 900, ou la place ne manque plus et ou le
   dessin d'origine (un bouton d'une seule ligne) reprend ses droits. */
.btn{white-space:normal;text-align:center;max-width:100%}
@media(min-width:900px){.btn{white-space:nowrap;max-width:none}}

.btn.is-loading{color:transparent !important;pointer-events:none;position:relative}
.btn.is-loading::after{content:"";position:absolute;width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;color:#fff;animation:ds-spin .6s linear infinite}
.btn--outline.is-loading::after,.btn--ghost.is-loading::after{color:var(--navy)}
@keyframes ds-spin{to{transform:rotate(360deg)}}

/* ============================================================
   BADGES
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-data);font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;padding:5px 11px;border-radius:var(--radius-full);line-height:1.2}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge--solid{background:var(--navy);color:#fff}
.badge--blue{background:var(--blue-50);color:var(--blue-700)}
.badge--cyan{background:var(--cyan-50);color:var(--cyan-700)}
.badge--orange{background:var(--orange-50);color:var(--orange-700)}
.badge--success{background:#e8f5ee;color:var(--success)}
.badge--neutral{background:var(--neutral-100);color:var(--neutral-700)}
.badge--outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--border-strong)}

/* ============================================================
   FORM FIELDS
   ============================================================ */
.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:var(--text-sm);font-weight:600;color:var(--text-strong)}
.field-label .req{color:var(--orange-600)}
.field-hint{font-size:var(--text-xs);color:var(--text-muted)}
.field-error{font-size:var(--text-xs);color:var(--danger);display:none;align-items:center;gap:5px}
.input,.textarea,.select{
  font-family:var(--font-sans);font-size:var(--text-base);color:var(--text);
  background:var(--white);border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);
  padding:11px 13px;width:100%;transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base);
}
.input::placeholder,.textarea::placeholder{color:var(--neutral-400)}
.input:hover,.textarea:hover,.select:hover{border-color:var(--neutral-400)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--cyan-500);box-shadow:var(--ring)}
.textarea{resize:vertical;min-height:96px;line-height:var(--leading-normal)}
/* Cibles tactiles des champs — MOTIF UNIQUE DU THÈME : plancher en base
   mobile, neutralisé à 900 px. Même correction que dans cf7.css, appliquée ici
   au CHEMIN DE REPLI : quand Contact Form 7 est absent, c'est
   inc/contact-fallback.php qui rend le formulaire, avec .input / .select /
   .textarea. Les deux chemins doivent être conformes, et cf7.css n'est même pas
   chargé dans ce cas-là — la règle ne peut donc pas y vivre.
   (.textarea a déjà 96 px de plancher, elle n'a rien à rattraper.) */
.input,.select{min-height:44px}
@media(min-width:900px){.input,.select{min-height:0}}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2329235c' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:38px}
.field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{border-color:var(--danger)}
.field.is-invalid .field-error{display:flex}
.field.is-invalid .field-hint{display:none}
.input:disabled,.textarea:disabled,.select:disabled{background:var(--neutral-100);color:var(--neutral-400);cursor:not-allowed}

.input-group{position:relative;display:flex;align-items:center}
.input-group .input{padding-left:38px}
.input-group .grp-ico{position:absolute;left:12px;width:16px;height:16px;color:var(--neutral-400);pointer-events:none}

/* check & radio */
.choice{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:var(--text-sm);color:var(--text)}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice .box{flex:none;width:20px;height:20px;border:1.5px solid var(--border-strong);background:#fff;border-radius:var(--radius-xs);display:grid;place-items:center;transition:all var(--dur-base) var(--ease-out);margin-top:1px}
.choice .box.round{border-radius:50%}
.choice .box svg{width:12px;height:12px;stroke:#fff;stroke-width:3;opacity:0;transition:opacity var(--dur-fast)}
.choice input:checked + .box{background:var(--blue-500);border-color:var(--blue-500)}
.choice input:checked + .box svg{opacity:1}
.choice input:checked + .box.round{background:var(--blue-500)}
.choice input:checked + .box.round::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.choice input:focus-visible + .box{box-shadow:var(--ring)}

/* toggle */
.toggle{position:relative;width:42px;height:24px;flex:none;cursor:pointer}
.toggle input{position:absolute;opacity:0}
.toggle .track{position:absolute;inset:0;background:var(--neutral-300);border-radius:var(--radius-full);transition:background var(--dur-base) var(--ease-out)}
.toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:#fff;border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--dur-base) var(--ease-spring)}
.toggle input:checked + .track{background:var(--cyan-500)}
.toggle input:checked + .track::after{transform:translateX(18px)}
.toggle input:focus-visible + .track{box-shadow:var(--ring)}

/* ============================================================
   CARDS
   ============================================================ */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6);transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base),transform var(--dur-base)}
.card--hover:hover{box-shadow:var(--shadow-md);border-color:transparent;transform:translateY(-3px)}
.card__eyebrow{margin-bottom:var(--space-4)}
.card__title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-strong);line-height:var(--leading-snug);margin-bottom:var(--space-2)}
.card__body{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--neutral-600)}
.card__foot{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}

/* feature card with topo motif corner */
.card--feature{position:relative;overflow:hidden}
.card--feature .topo-corner{position:absolute;top:0;right:0;width:140px;height:140px;opacity:.5;pointer-events:none}
.card--feature .card__ico{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--navy-50);color:var(--blue-600);display:grid;place-items:center;margin-bottom:var(--space-5)}
.card--feature .card__ico svg{width:22px;height:22px}

/* dark stat card (Flux energy) */
.card--stat{background:var(--navy-800);border:none;color:#fff;position:relative;overflow:hidden}
.card--stat .grid-bg{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(0,159,227,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(0,159,227,.12) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(90% 90% at 80% 0,#000,transparent)}
.card--stat .stat-n{position:relative;font-family:var(--font-display);font-size:var(--text-4xl);line-height:1;letter-spacing:-.02em}
.card--stat .stat-n b{color:var(--orange);font-weight:400}
.card--stat .stat-l{position:relative;margin-top:var(--space-3);font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--cyan-200)}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.ds-header{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:relative}
.ds-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) var(--space-6);max-width:var(--container);margin:0 auto}
/* Le remplissage vertical porte le logo à 44 px de haut sur mobile — cible
   tactile minimale — sans toucher à l'échelle typographique. Il est annulé à
   partir de 900 px pour laisser la hauteur d'en-tête desktop inchangée. */
.ds-logo{font-family:var(--font-display);font-size:var(--text-lg);color:var(--navy);letter-spacing:.01em;text-decoration:none;flex:none;padding:9px 0}
.ds-logo b{color:var(--orange);font-weight:400}
/* Base mobile : barre horizontale masquée, burger visible (cf. palier 900 px). */
.ds-nav{display:none;align-items:center;gap:var(--space-6)}
.ds-nav a{font-size:var(--text-sm);font-weight:600;color:var(--neutral-700);text-decoration:none;position:relative;padding:6px 0;transition:color var(--dur-base) var(--ease-out)}
.ds-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--orange);transition:right var(--dur-base) var(--ease-out)}
.ds-nav a:hover{color:var(--navy)}
.ds-nav a:hover::after,.ds-nav a.is-active::after{right:0}
.ds-nav a.is-active{color:var(--navy)}
.ds-header__cta{display:flex;align-items:center;gap:var(--space-4)}
.ds-header__cta .btn{display:none}
.ds-burger{display:block;background:none;border:none;cursor:pointer;width:44px;height:44px;margin-right:-8px;color:var(--navy)}
@media(min-width:900px){
  .ds-nav{display:flex}
  .ds-header__cta .btn{display:inline-flex}
  .ds-burger{display:none}
  .ds-logo{padding:0}
}

/* ============================================================
   FOOTER
   ============================================================ */
.ds-footer{background:var(--navy-900);color:var(--text-ondark);position:relative;overflow:hidden}
.ds-footer__topo{position:absolute;inset:0;opacity:.4;pointer-events:none}
/* Base mobile : deux colonnes.
   `min-width:0` est indispensable ici. Une piste `1fr` conserve par défaut
   `min-width:auto`, donc ne peut pas descendre sous la largeur de contenu
   minimale de sa colonne. L'adresse e-mail du cabinet est un mot insécable de
   278 px : elle imposait sa largeur à la grille, qui débordait de 137 px à
   360 px sur TOUTES les pages. `overflow-wrap` autorise ensuite la coupure.
   Les deux sont rétablis à leur valeur initiale à partir de 900 px, où la
   grille desktop absorbe l'adresse sans déborder : le rendu y est inchangé. */
.ds-footer__inner{position:relative;max-width:var(--container);margin:0 auto;padding:var(--space-16) var(--space-6) var(--space-8);display:grid;gap:var(--space-8);grid-template-columns:1fr 1fr}
.ds-footer__inner > *{min-width:0}
.ds-footer__inner a{overflow-wrap:break-word}
@media(min-width:900px){
  .ds-footer__inner{grid-template-columns:1.6fr repeat(3,1fr);gap:var(--space-12)}
  .ds-footer__inner > *{min-width:auto}
  .ds-footer__inner a{overflow-wrap:normal}
}
.ds-footer .f-brand{font-family:var(--font-display);font-size:var(--text-2xl);color:#fff}
.ds-footer .f-brand b{color:var(--orange);font-weight:400}
.ds-footer .f-tag{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-ondark-muted);line-height:var(--leading-relaxed);max-width:34ch}
.ds-footer h4{font-family:var(--font-data);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-300);margin-bottom:var(--space-4)}
/* Base mobile : les liens du pied de page atteignent 44 px par le remplissage
   (la taille du texte ne bouge pas). La gouttière passe à 24 px : le pas de la
   liste devient 21 + 24 = 45 px, exactement la hauteur de la cible tactile, si
   bien que les zones de deux liens voisins se touchent sans se recouvrir.
   Les liens restent `display:inline` À DESSEIN : les passer en bloc sortait
   leur <li> du champ de mesure de C4 (un <li> à enfant de niveau bloc est tenu
   pour un conteneur, pas pour du texte) — le harnais l'a signalé, −13 % de
   dénominateur sur /contact/. Le remplissage vertical d'un élément inline est
   bien pris en compte par getBoundingClientRect et par le test de survol.
   Les icônes sociales sont exclues : elles sont mises en forme dans wp.css.
   Tout est rendu à l'identique à partir de 900 px. */
.ds-footer ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-6)}
.ds-footer a{color:#d9d8ea;text-decoration:none;font-size:var(--text-sm);transition:color var(--dur-base)}
.ds-footer a:hover{color:var(--orange)}
/* 15 px vertical : la boîte d'un élément inline mesure la zone de caractère
   (~15 px pour --text-sm), pas l'interligne — 15 + 15 + 15 = 45 px.
   16 px à droite : garde-fou de largeur. Les libellés de ces menus viennent du
   back-office ; un libellé court (« FAQ », « Blog ») tomberait sous 44 px de
   large. La zone s'étend dans la colonne vide, le texte ne bouge pas.
   Aucun libellé actuel n'en dépend — le plus court, « Contact », fait 65 px. */
.ds-footer ul li:not(.ds-footer__social) a{padding:15px 16px 15px 0}
.ds-footer__bar a{padding:13px 0}
/* Le bouton du pied de page est un .btn--sm (34 px) : on ne touche pas à son
   remplissage — qui règle son rapport de forme — mais à son plancher. */
.ds-footer__inner .btn{min-height:44px}
/* Les icônes sociales sont mises en forme dans wp.css (glue WordPress), qui
   n'y déclare ni min-width ni min-height : ce plancher les atteint donc sans
   entrer en concurrence avec elle. Voir la préoccupation « couture » du
   rapport — la mise en forme de ce composant est à cheval sur deux fichiers. */
.ds-footer__social a{min-width:44px;min-height:44px;justify-content:center}
@media(min-width:900px){
  .ds-footer ul{gap:var(--space-3)}
  .ds-footer ul li:not(.ds-footer__social) a{padding:0}
  .ds-footer__bar a{padding:0}
  .ds-footer__inner .btn{min-height:0}
  .ds-footer__social a{min-width:0;min-height:0}
}
.ds-footer__bar{position:relative;border-top:1px solid rgba(255,255,255,.1);max-width:var(--container);margin:0 auto;padding:var(--space-5) var(--space-6);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);font-size:var(--text-xs);color:var(--text-ondark-muted)}

/* ============================================================
   ACCORDION
   ============================================================ */
.accordion{border-top:1px solid var(--border)}
.accordion__item{border-bottom:1px solid var(--border)}
.accordion__head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);background:none;border:none;cursor:pointer;text-align:left;padding:var(--space-5) var(--space-1);font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-strong);transition:color var(--dur-base)}
.accordion__head:hover{color:var(--blue-600)}
.accordion__head:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--radius-xs)}
.accordion__icon{flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--border-strong);display:grid;place-items:center;color:var(--navy);transition:transform var(--dur-slow) var(--ease-spring),background var(--dur-base),border-color var(--dur-base),color var(--dur-base)}
.accordion__icon::before,.accordion__icon::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.accordion__icon::before{width:12px;height:2px}
.accordion__icon::after{width:2px;height:12px;transition:transform var(--dur-slow) var(--ease-spring)}
.accordion__item.is-open .accordion__icon{background:var(--orange);border-color:var(--orange);color:#fff;transform:rotate(90deg)}
.accordion__item.is-open .accordion__icon::after{transform:scaleY(0)}
.accordion__panel{overflow:hidden;height:0;transition:height var(--dur-slow) var(--ease-out)}
.accordion__panel-inner{padding:0 var(--space-1) var(--space-6);font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--neutral-600);max-width:64ch}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2);font-size:var(--text-sm)}
.breadcrumbs a{color:var(--neutral-600);text-decoration:none;transition:color var(--dur-base)}
/* Cible tactile du fil d'Ariane sur mobile — la taille du texte est inchangée.
   `min-width` autant que `min-height` : les libellés du fil viennent des titres
   de page, et un titre court (« Blog », 29 px) tombe sous 44 px de LARGE. Le
   texte reste centré dans sa boîte, la zone s'étend symétriquement de part et
   d'autre ; l'écart visuel entre deux miettes reste porté par le gap du flex.
   Neutralisées toutes deux à partir de 900 px. */
.breadcrumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
@media(min-width:900px){.breadcrumbs a{display:inline;min-height:0;min-width:0}}
.breadcrumbs a:hover{color:var(--blue-600)}
.breadcrumbs .sep{color:var(--neutral-300);font-family:var(--font-data)}
.breadcrumbs .current{color:var(--navy);font-weight:600}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{display:flex;align-items:center;gap:var(--space-2)}
.pagination .pg{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-data);font-size:var(--text-sm);font-weight:600;color:var(--neutral-700);background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;transition:all var(--dur-base) var(--ease-out)}
.pagination .pg:hover{border-color:var(--navy);color:var(--navy)}
.pagination .pg.is-active{background:var(--navy);border-color:var(--navy);color:#fff}
.pagination .pg[disabled]{opacity:.4;pointer-events:none}
.pagination .pg-ellipsis{color:var(--neutral-400);padding:0 4px}