/*
Theme Name: Drive de Marius
Theme URI: https://drivedemarius.fr
Author: Seobooster LTD
Description: Thème sur mesure de drivedemarius.fr — « ce n'est pas une ferme, c'est un QUAI ».
Version: 1.0.0
Text Domain: drive-de-marius
*/

/* ==========================================================================
   DRIVE DE MARIUS — gabarit « QUAI »
   Un point de retrait en activité : pistes numérotées 01→05, plaques de
   préparation horodatées, marquage peint, bacs gerbables qui circulent.
   Procédés signature (DIRECTION-ARTISTIQUE.md §7) :
   1. L'ENCOCHE — entaille rectangulaire (22% x 10px) sur le bord HAUT de
      chaque image / plaque (clip-path).
   2. Les PISTES NUMÉROTÉES 01→05, partout : nav, fil d'Ariane, cartes, H2.
   3. Le TRAIT DE MARQUAGE — 5px, bouts biseautés 45°, 8px plus long que ce
      qu'il souligne. Asphalte sur le clair, jaune SEULEMENT sur le sombre.
   4. La HACHURE de bord de quai — 10px, rayures 45° jaune/asphalte.
   5. Le COMPTEUR DE QUAI — tuiles de très gros chiffres, tous calculés.
   6. La CARTE DES POINTS DE RETRAIT — pastilles de villes, grille irrégulière.
   7. La PLAQUE DE PRÉPARATION — horodatage + libellé, encoche, angles vifs.
   ⛔ Aucun border-radius > 2px. ⛔ Jamais de jaune sur une surface claire.
   ⛔ Grille 3 colonnes, jamais 4. ⛔ Aucune couleur sémantique (rouge/vert).
   ========================================================================== */

/* ---------- 0. POLICES AUTO-HÉBERGÉES -----------------------------------
   Fichiers attendus dans assets/fonts/ (voir functions.php : je n'ai aucun
   outil réseau dans cet environnement pour les télécharger — à déposer avant
   publication). La pile de repli système est réelle et lisible sans eux. */
@font-face{
  font-family:'Wix Madefor Display';font-style:normal;font-weight:500;font-display:swap;
  src:url('assets/fonts/wix-madefor-display-500.woff2') format('woff2');
}
@font-face{
  font-family:'Wix Madefor Display';font-style:normal;font-weight:700;font-display:swap;
  src:url('assets/fonts/wix-madefor-display-700.woff2') format('woff2');
}
@font-face{
  font-family:'Wix Madefor Display';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/wix-madefor-display-800.woff2') format('woff2');
}
@font-face{
  font-family:'Vollkorn';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/vollkorn-400.woff2') format('woff2');
}
@font-face{
  font-family:'Vollkorn';font-style:italic;font-weight:400;font-display:swap;
  src:url('assets/fonts/vollkorn-400-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Vollkorn';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/vollkorn-600.woff2') format('woff2');
}

/* ---------- 1. JETONS ---------------------------------------------------- */
:root{
  /* les 6 valeurs de la DA, littérales, jamais renommées */
  --bac:#CDE4D4;         --plaque:#E6F2E9;      --asphalte:#111A15;
  --quai:#17201B;        --nuit:#0E1512;        --jaune:#FFD100;
  --service-c:#3F5148;   --service-s:#9DB3A6;

  /* rôles — mode clair par défaut */
  --bg:var(--bac);
  --bg-carte:var(--plaque);
  --bg-survol:color-mix(in srgb, var(--plaque) 90%, var(--asphalte) 10%);
  --txt:var(--asphalte);
  --txt-service:var(--service-c);
  --filet:color-mix(in srgb, var(--asphalte) 16%, transparent);
  --marquage:var(--asphalte);   /* le jaune ne tient QUE sur l'asphalte : asphalte en clair */

  --rayon:2px;
  --colonne:680px;
  --large:1200px;
  --gouttiere:28px;
  --marge:24px;

  --f-titre:'Wix Madefor Display', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-corps:'Vollkorn', Georgia, 'Times New Roman', serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:var(--nuit); --bg-carte:var(--quai); --bg-survol:#222D26;
    --txt:var(--plaque); --txt-service:var(--service-s);
    --filet:color-mix(in srgb, var(--plaque) 14%, transparent);
    --marquage:var(--jaune);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:var(--nuit); --bg-carte:var(--quai); --bg-survol:#222D26;
  --txt:var(--plaque); --txt-service:var(--service-s);
  --filet:color-mix(in srgb, var(--plaque) 14%, transparent);
  --marquage:var(--jaune);
  color-scheme:dark;
}

/* ---------- 2. SOCLE ----------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--f-corps);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block;border-radius:0}
a{color:inherit;text-decoration:none}
a:not([class]):hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--marquage);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:700;margin:0;line-height:1.1;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit}
.dm-oeil{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dm-oeil:focus{left:.5rem;top:.5rem;width:auto;height:auto;padding:.55rem .9rem;
  background:var(--asphalte);color:var(--plaque);z-index:99}

.dm-in{width:min(var(--colonne),100% - 2 * var(--marge));margin-inline:auto}
.dm-in--large{width:min(var(--large),100% - 2 * var(--marge));margin-inline:auto}
@media (max-width:480px){:root{--marge:16px}}

/* ---------- 3. LE PROCÉDÉ DE L'ENCOCHE (§7.1) ---------------------------
   Entaille rectangulaire (22% x 10px) découpée dans le bord HAUT, en clip-path.
   S'applique à toute image et à toute plaque. */
.dm-encoche{
  position:relative;display:block;overflow:hidden;border:1px solid var(--asphalte);
  clip-path:polygon(
    0 10px, 39% 10px, 39% 0, 61% 0, 61% 10px, 100% 10px,
    100% 100%, 0 100%
  );
}
.dm-encoche img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.dm-encoche.dm-encoche--paysage img{aspect-ratio:3/2}
.dm-plaque-repli{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;
  background:var(--bg-carte);color:var(--txt);
  font-family:var(--f-titre);font-weight:800;font-size:44px}

/* ---------- 4. LE TRAIT DE MARQUAGE (§7.3) -------------------------------
   5px, bouts coupés en biseau à 45°, asphalte sur le clair / jaune sur le sombre. */
.dm-trait{display:block;height:5px;background:var(--marquage);
  clip-path:polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%)}
.dm-trait--court{width:34px}

/* ---------- 5. LA HACHURE DE BORD DE QUAI (§7.4) -------------------------
   Bande de 10px en rayures 45° jaune/asphalte : seule texture du site. */
.dm-hachure{height:10px;background:repeating-linear-gradient(45deg,
  var(--jaune) 0 10px, var(--asphalte) 10px 20px)}

/* ---------- 6. LES PISTES NUMÉROTÉES (§7.2) ------------------------------ */
.dm-piste-num{font-family:var(--f-titre);font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:0}
.dm-etiquette{display:inline-flex;align-items:baseline;gap:.4em;font-family:var(--f-titre);
  font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-service)}

/* ---------- 7. LA PLAQUE DE PRÉPARATION (§7.7) --------------------------- */
.dm-plaque-prep{display:inline-flex;flex-direction:column;gap:2px;padding:.6rem .8rem;
  background:var(--bg-carte);border:1px solid var(--asphalte)}
.dm-plaque-h{font-family:var(--f-titre);font-weight:500;font-size:13px;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.08em}
.dm-plaque-l{font-family:var(--f-titre);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-service)}

/* ---------- 8. LA TÊTE : BARRE DE SERVICE, UNE SEULE LIGNE --------------- */
.dm-tete{position:sticky;top:0;z-index:30;background:var(--bg-carte);
  border-bottom:2px solid var(--asphalte)}
.dm-tete-in{display:flex;align-items:center;gap:1.6rem;min-height:76px}
.dm-logo{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.dm-logo svg{width:34px;height:34px;flex:0 0 auto}
.dm-logo-mot{display:flex;align-items:baseline;gap:.4em;white-space:nowrap}
.dm-logo-drive{position:relative;display:inline-block;font-family:var(--f-titre);
  font-weight:800;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--txt)}
.dm-logo-drive::after{content:"";position:absolute;left:0;bottom:-4px;height:5px;
  width:calc(100% + 8px);background:var(--marquage);
  clip-path:polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%)}
.dm-logo-demarius{font-family:var(--f-titre);font-weight:500;font-size:19px;
  letter-spacing:.10em;text-transform:uppercase;color:var(--txt-service)}
@media (max-width:420px){.dm-logo-demarius{display:none}}

.dm-pistes-nav{display:flex;align-items:center;gap:1.4rem;margin-inline:auto;overflow-x:auto;
  scrollbar-width:none}
.dm-pistes-nav::-webkit-scrollbar{display:none}
.dm-piste-lien{display:inline-flex;align-items:baseline;gap:.4em;white-space:nowrap;
  font-family:var(--f-titre);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt-service);padding-block:.4rem;position:relative}
.dm-piste-lien .dm-piste-num{font-size:11px}
.dm-piste-lien:hover{color:var(--txt)}
.dm-piste-lien.is-actif{color:var(--txt)}
.dm-piste-lien.is-actif::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-2px;
  height:5px;background:var(--marquage);
  clip-path:polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%)}

.dm-cta-tete{flex:0 0 auto;display:inline-flex;align-items:center;background:var(--asphalte);
  color:var(--plaque);font-family:var(--f-titre);font-weight:700;font-size:13px;
  letter-spacing:.04em;padding:.7rem 1.1rem;white-space:nowrap}
.dm-cta-tete:hover{background:color-mix(in srgb, var(--asphalte) 85%, var(--jaune) 15%)}

.dm-burger{display:none;flex:0 0 auto;background:none;border:1px solid var(--asphalte);
  padding:.5rem .6rem;cursor:pointer}
.dm-burger span{display:block;width:20px;height:2px;background:var(--txt);margin:4px 0}

.dm-panneau-pistes{display:none;position:fixed;inset:0;z-index:50;background:var(--bg);
  padding:1.4rem var(--marge);overflow-y:auto}
.dm-panneau-pistes.is-ouvert{display:block}
.dm-panneau-tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}
.dm-panneau-fermer{background:none;border:1px solid var(--asphalte);padding:.5rem .8rem;
  font-family:var(--f-titre);font-weight:700;font-size:13px}
.dm-panneau-pistes .dm-pistes-nav{flex-direction:column;align-items:flex-start;gap:0;width:100%}
.dm-panneau-pistes .dm-piste-lien{width:100%;padding-block:1rem;font-size:15px;
  border-bottom:1px solid var(--filet)}
.dm-panneau-pistes .dm-cta-tete{margin-top:1.4rem}

/* ---------- 9. LE HERO « QUAI » ------------------------------------------ */
.dm-hero{position:relative;min-height:60vh;display:flex;align-items:flex-end;
  background:var(--asphalte) center/cover no-repeat;
  /* 08/09/2026 — la photo de quai a été retirée : les trois banques d'images n'ont rendu que
     des piles de cageots de récupération portant des marques tierces lisibles (photographiées
     comme un dépôt de rebut), ce qui dit l'inverse du site. Un fond d'asphalte assumé vaut
     mieux qu'une photo qui contredit le sujet. À reprendre avec une vraie prise de vue. */
  background-image:linear-gradient(rgba(17,26,21,.55),rgba(17,26,21,.85))}
.dm-hero-in{position:relative;z-index:2;padding-block:3rem 3.4rem;width:100%}
.dm-hero h1{color:var(--plaque);font-size:clamp(2.5rem,6vw,4.6rem);line-height:.98;
  letter-spacing:-.02em;max-width:14ch}
.dm-hero-chapo{color:var(--plaque);font-family:var(--f-corps);font-size:clamp(1.05rem,2vw,1.3rem);
  line-height:1.5;margin-top:1.1rem;max-width:56ch;opacity:.92}
.dm-hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem}
.dm-bouton{display:inline-flex;align-items:center;font-family:var(--f-titre);font-weight:700;
  font-size:14px;letter-spacing:.03em;padding:.9rem 1.4rem;border:1px solid transparent}
.dm-bouton--jaune{background:var(--jaune);color:var(--asphalte)}
.dm-bouton--jaune:hover{background:color-mix(in srgb, var(--jaune) 85%, white 15%)}
.dm-bouton--contour{background:transparent;border-color:var(--plaque);color:var(--plaque)}
.dm-bouton--contour:hover{background:rgba(230,242,233,.12)}
.dm-hero-plaque{position:absolute;left:var(--marge);bottom:0;transform:translateY(50%);z-index:3}
.dm-hero .dm-hachure{position:absolute;left:0;right:0;bottom:0;z-index:1}
@media (max-width:760px){
  .dm-hero{min-height:52vh}
  .dm-hero-plaque{position:static;transform:none;margin-top:1.6rem}
}

/* ---------- 10. LE COMPTEUR DE QUAI (§5.3 / §7.5) ------------------------ */
.dm-compteur{background:var(--bg);padding-block:2.6rem}
.dm-compteur-in{display:grid;grid-template-columns:repeat(4,1fr)}
.dm-tuile{padding:0 1.4rem;border-left:1px solid var(--filet)}
.dm-tuile:first-child{border-left:0;padding-left:0}
.dm-tuile-trait{width:28px;margin-bottom:.8rem}
.dm-tuile-n{display:block;font-family:var(--f-titre);font-weight:800;
  font-size:clamp(2.4rem,5vw,4.5rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.dm-tuile-l{display:block;margin-top:.5rem;font-family:var(--f-titre);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-service)}
@media (max-width:760px){
  .dm-compteur-in{grid-template-columns:1fr 1fr;gap:1.6rem 0}
  .dm-tuile:nth-child(2n+1){border-left:0}
  .dm-tuile:nth-child(n+3){padding-top:1rem;border-top:1px solid var(--filet)}
}

/* ---------- 11. LE TABLEAU DE SERVICE — 5 pistes en 3 colonnes (§5.4) ---- */
.dm-section-tete{padding-block:1rem 1.6rem}
.dm-section-tete h2{font-size:clamp(1.65rem,3vw,2.35rem);letter-spacing:-.01em}
.dm-section-chapo{font-family:var(--f-corps);font-style:italic;font-size:clamp(1.05rem,2vw,1.2rem);
  color:var(--txt-service);margin-top:.6rem;max-width:56ch}

.dm-pistes-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere)}
.dm-piste-carte{display:block;background:var(--bg-carte);padding:1.3rem}
.dm-piste-carte .dm-encoche{margin-bottom:1rem}
.dm-piste-carte-num{font-family:var(--f-titre);font-weight:800;font-size:2.2rem;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dm-piste-carte h3{font-size:1.25rem;margin-top:.5rem}
.dm-piste-carte p{font-family:var(--f-corps);color:var(--txt-service);font-size:15px;
  line-height:1.55;margin-top:.5rem}
.dm-piste-carte-n{display:block;margin-top:.8rem;font-family:var(--f-titre);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-service)}
.dm-piste-carte .dm-trait{width:34px;margin-top:1rem;transition:width .18s ease}
.dm-piste-carte:hover{transform:translateY(-2px)}
.dm-piste-carte:hover .dm-trait{width:100%}
@media (max-width:900px){.dm-pistes-grille{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.dm-pistes-grille{grid-template-columns:1fr}}

/* rubrique avec moins de 6 articles → 2 colonnes, jamais de trou (§6 RUBRIQUE.5) */
.dm-grille--2{grid-template-columns:repeat(2,1fr)}
@media (max-width:600px){.dm-grille--2{grid-template-columns:1fr}}

/* ---------- 12. BANDE ASPHALTE — littéralement asphalte, dans les 2 modes -
   Un « quai » reste un quai qu'on le regarde de jour comme de nuit : ces
   bandes ne suivent pas le bascule clair/sombre du site. */
.dm-bande-asphalte{background:var(--asphalte);color:var(--plaque);padding-block:2.6rem}
.dm-bande-asphalte .dm-etiquette{color:var(--service-s)}
.dm-bon{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:1.1rem;
  padding-block:1rem;border-bottom:1px solid rgba(230,242,233,.14)}
.dm-bon:last-child{border-bottom:0}
.dm-bon-heure{font-family:var(--f-titre);font-weight:500;font-size:13px;
  font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--service-s)}
.dm-bon-num{font-family:var(--f-titre);font-weight:800;font-size:15px;color:var(--jaune)}
.dm-bon h3{font-size:16px;font-weight:700;color:var(--plaque);min-width:0}
.dm-bon h3 a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-bon .dm-encoche{width:64px;height:48px;border-color:rgba(230,242,233,.3)}
@media (max-width:600px){
  .dm-bon{grid-template-columns:auto 1fr;row-gap:.3rem}
  .dm-bon .dm-encoche{display:none}
}

/* ---------- 13. LA CARTE DES POINTS DE RETRAIT (§7.6) -------------------- */
.dm-villes{display:flex;flex-wrap:wrap;gap:.9rem 1.1rem;padding-block:1.4rem}
.dm-ville{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--f-titre);
  font-weight:600;font-size:14px;color:var(--txt);padding:.4rem .3rem}
.dm-ville-anneau{width:6px;height:6px;border:1px solid var(--txt);border-radius:50%;
  flex:0 0 auto}
.dm-ville:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.dm-villes{flex-direction:column;gap:.4rem}}

/* ---------- 14. LE PANNEAU (CTA lead) — seul grand aplat jaune (§5.7) ---- */
.dm-panneau{background:var(--jaune);color:var(--asphalte);padding-block:0}
.dm-panneau-in{padding-block:2.6rem}
.dm-panneau h2{font-size:clamp(1.5rem,3vw,2rem);color:var(--asphalte)}
.dm-panneau p{font-family:var(--f-corps);margin-top:.5rem;max-width:52ch}
.dm-panneau-form{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.4rem}
.dm-panneau-form input{font:inherit;font-family:var(--f-corps);font-size:15px;
  padding:.8rem 1rem;border:1px solid var(--asphalte);background:var(--plaque);
  color:var(--asphalte);flex:1 1 220px}
.dm-panneau-form button{background:var(--asphalte);color:var(--plaque);border:1px solid var(--asphalte);
  font-family:var(--f-titre);font-weight:700;font-size:14px;padding:.85rem 1.4rem;cursor:pointer}
.dm-panneau-form button:hover{background:color-mix(in srgb, var(--asphalte) 85%, white 15%)}

/* ---------- 15. GRILLE DES GUIDES — 3 colonnes jamais 4 (§5.8) ----------- */
.dm-guides{padding-block:2.8rem}
.dm-carte{display:block;background:var(--bg-carte)}
.dm-carte .dm-encoche{position:relative}
.dm-carte-badge{position:absolute;top:14px;left:14px;z-index:2;display:inline-flex;
  align-items:baseline;gap:.4em;background:var(--asphalte);color:var(--plaque);
  padding:.3rem .55rem;font-family:var(--f-titre);font-weight:700;font-size:11px;
  letter-spacing:.06em}
.dm-carte-corps{padding:1.1rem 1.2rem 1.3rem}
.dm-carte h3{font-size:1.15rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dm-date{font-family:var(--f-titre);font-weight:500;font-size:12.5px;color:var(--txt-service);
  margin-top:.6rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* ---------- 16. LE PIED DE PAGE DENSE (§5.9) ----------------------------- */
.dm-pied{background:var(--asphalte);color:var(--plaque)}
.dm-pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-block:2.8rem 2rem}
.dm-pied-marque .dm-logo-drive,.dm-pied-marque .dm-logo-demarius{color:var(--plaque)}
.dm-pied-marque .dm-logo-demarius{color:var(--service-s)}
.dm-pied-base{font-family:var(--f-corps);font-size:14.5px;color:var(--service-s);
  margin-top:.8rem;max-width:32ch;line-height:1.5}
.dm-pied-t{font-family:var(--f-titre);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--service-s);padding-bottom:.6rem;
  border-bottom:1px solid rgba(230,242,233,.16);margin-bottom:.7rem}
.dm-pied-liste li{display:flex;justify-content:space-between;gap:.7rem;padding:.32rem 0;font-size:14.5px}
.dm-pied-liste a:hover{text-decoration:underline;text-underline-offset:3px}
.dm-pied-liste span{font-variant-numeric:tabular-nums;color:var(--service-s);font-size:12.5px}
.dm-ours{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-block:1.1rem 1.4rem;border-top:1px solid rgba(230,242,233,.16);font-size:13px;
  color:var(--service-s)}
.dm-ours .dm-trait{width:60px}
.dm-ours-bas{display:flex;align-items:center;gap:.9rem}
@media (max-width:900px){.dm-pied-haut{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.dm-pied-haut{grid-template-columns:1fr}}

/* ---------- 17. GABARIT ARTICLE (§6 ARTICLE) ----------------------------- */
.dm-art-tete{padding-block:2rem 1.4rem;background:var(--bg)}
.dm-ariane{display:flex;align-items:center;gap:.5em;font-family:var(--f-titre);font-weight:600;
  font-size:12.5px;letter-spacing:.04em;color:var(--txt-service);margin-bottom:1rem}
.dm-ariane a:hover{text-decoration:underline;text-underline-offset:3px}
.dm-sep{color:var(--txt-service)}
.dm-art-tete h1{font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.1;position:relative;
  padding-bottom:1rem;margin-bottom:1rem}
.dm-art-tete h1 .dm-trait{position:absolute;left:0;bottom:0;width:64px}
.dm-ligne-service{display:flex;flex-wrap:wrap;align-items:center;gap:.6em;
  font-family:var(--f-titre);font-weight:500;font-size:13px;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;color:var(--txt-service)}

.dm-art-illu{width:min(calc(var(--colonne) + 120px), 100% - 2 * var(--marge));
  margin:1.6rem auto 0}
.dm-art-illu figcaption{font-family:var(--f-corps);font-style:italic;font-size:13.5px;
  color:var(--txt-service);margin-top:.6rem}

.dm-lecture{padding-block:2rem 3rem}
.dm-lecture-in{display:flex;gap:3rem;align-items:flex-start;width:min(calc(var(--colonne) + 320px),100% - 2*var(--marge));margin-inline:auto}
.dm-somm{flex:0 0 240px;position:sticky;top:96px;max-height:calc(100vh - 130px);overflow-y:auto}
.dm-somm-t{font-family:var(--f-titre);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--txt-service);margin-bottom:.7rem}
.dm-somm-item{display:block;margin-bottom:.55rem}
.dm-somm-item a{display:block;font-family:var(--f-corps);font-size:14px;line-height:1.4;
  padding:.55rem .7rem;background:var(--bg-carte);border:1px solid var(--asphalte)}
.dm-somm-item a:hover,.dm-somm-item a.is-actif{background:var(--bg-survol)}
.dm-corps{flex:1 1 auto;min-width:0;max-width:var(--colonne)}

.dm-texte{font-family:var(--f-corps);font-size:18px;line-height:1.65}
.dm-texte p{margin:0 0 1.3rem}
.dm-texte h2{margin:2.6rem 0 1.1rem;scroll-margin-top:100px}
.dm-h2-repere{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.dm-h2-num{font-family:var(--f-titre);font-weight:800;font-size:1.05rem;
  font-variant-numeric:tabular-nums;color:var(--txt)}
.dm-h2-texte{display:block;font-size:1.55rem;line-height:1.2}
.dm-texte h3{font-size:1.2rem;margin:1.8rem 0 .6rem}
.dm-texte ul,.dm-texte ol{margin:0 0 1.3rem}
.dm-texte ul li,.dm-texte ol li{position:relative;padding-left:1.3rem;margin-bottom:.5rem}
.dm-texte ul li::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:2px;
  background:var(--marquage)}
.dm-texte ol{counter-reset:dmol}
.dm-texte ol li{counter-increment:dmol}
.dm-texte ol li::before{content:counter(dmol);position:absolute;left:0;top:0;
  font-family:var(--f-titre);font-weight:700;font-size:13px}
.dm-texte a{text-decoration:underline;text-underline-offset:3px}
.dm-texte figure{margin:1.8rem 0}
.dm-texte figcaption{font-family:var(--f-corps);font-style:italic;font-size:13.5px;
  color:var(--txt-service);margin-top:.5rem}
.dm-texte img{border:1px solid var(--asphalte)}

.dm-texte blockquote,.dm-citation{margin:2rem 0;padding:.1rem 0 .1rem 1.4rem;
  border-left:5px solid var(--asphalte);font-family:var(--f-corps);font-style:italic;
  font-size:21px;line-height:1.5;color:var(--txt)}
.dm-texte blockquote p:last-child,.dm-citation p:last-child{margin-bottom:0}

.sbs_tableau{overflow-x:auto;margin:1.8rem 0}
.dm-texte table{width:100%;border-collapse:collapse;font-size:15.5px}
.dm-texte th,.dm-texte td{border-bottom:1px solid var(--filet);padding:.7rem .6rem;text-align:left;
  font-variant-numeric:tabular-nums}
.dm-texte th{background:var(--asphalte);color:var(--plaque);font-family:var(--f-titre);
  font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

.dm-art-pied{width:min(var(--colonne),100% - 2*var(--marge));margin:2.6rem auto 0;
  padding-top:1.6rem;border-top:1px solid var(--filet)}
.dm-signature{display:flex;gap:1rem;align-items:flex-start}
.dm-signature-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.dm-signature-nom{font-family:var(--f-titre);font-weight:700;font-size:16px}
.dm-signature-bio{font-family:var(--f-corps);font-size:15px;color:var(--txt-service);
  margin-top:.3rem;line-height:1.5}
.dm-partage{display:flex;gap:.6rem;margin-top:1.2rem}
.dm-partage a{border:1px solid var(--asphalte);padding:.5rem .9rem;font-family:var(--f-titre);
  font-weight:700;font-size:12.5px}

.dm-suite{padding-block:2.4rem 3rem}

/* ---------- 18. GABARIT RUBRIQUE (§6 RUBRIQUE) --------------------------- */
.dm-rub-tete{padding-block:2.6rem 1rem;display:flex;align-items:flex-start;gap:1.6rem}
.dm-rub-num{font-family:var(--f-titre);font-weight:800;font-size:clamp(3rem,7vw,5.5rem);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dm-rub-tete h1{font-size:clamp(1.7rem,4vw,2.4rem)}
.dm-rub-chapo{font-family:var(--f-corps);font-style:italic;color:var(--txt-service);
  margin-top:.6rem;max-width:58ch}
.dm-rub-compte{margin-top:.8rem;font-family:var(--f-titre);font-weight:700;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt-service)}

.dm-rail-pistes{background:var(--asphalte);overflow-x:auto;scrollbar-width:none}
.dm-rail-pistes::-webkit-scrollbar{display:none}
.dm-rail-pistes-in{display:flex;gap:1.6rem;white-space:nowrap}
.dm-rail-pistes a{display:inline-flex;align-items:baseline;gap:.4em;padding-block:.9rem;
  font-family:var(--f-titre);font-weight:700;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--service-s);position:relative}
.dm-rail-pistes a.is-actif{color:var(--plaque)}
.dm-rail-pistes a.is-actif::after{content:"";position:absolute;left:-3px;right:-3px;bottom:0;
  height:5px;background:var(--jaune);
  clip-path:polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%)}

.dm-rub-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gouttiere);padding-block:2rem}
.dm-rub-grille .dm-carte:first-child{grid-column:span 2}
@media (max-width:900px){
  .dm-rub-grille{grid-template-columns:1fr 1fr}
  .dm-rub-grille .dm-carte:first-child{grid-column:span 2}
}
@media (max-width:600px){
  .dm-rub-grille{grid-template-columns:1fr}
  .dm-rub-grille .dm-carte:first-child{grid-column:span 1}
}

.dm-pagination{display:flex;gap:.5rem;flex-wrap:wrap;padding-block:1rem 3rem}
.dm-pagination a,.dm-pagination span{display:inline-flex;align-items:center;padding:.55rem .85rem;
  font-family:var(--f-titre);font-weight:700;font-size:13px;background:var(--bg-carte);
  border:1px solid var(--asphalte)}
.dm-pagination .current{background:var(--asphalte);color:var(--plaque)}

/* ---------- 19. PAGES GÉNÉRIQUES / RECHERCHE / 404 ----------------------- */
.dm-page{padding-block:2.6rem 3.4rem}
.dm-page h1{font-size:clamp(1.9rem,4.4vw,2.7rem);margin-bottom:1.2rem}
.dm-page .dm-texte{max-width:none}
.dm-form-recherche{display:flex;gap:.7rem;margin-top:1rem}
.dm-form-recherche input{flex:1 1 auto;font:inherit;font-family:var(--f-corps);font-size:16px;
  padding:.8rem 1rem;border:1px solid var(--asphalte);background:var(--bg-carte);color:var(--txt)}
.dm-form-recherche button{background:var(--asphalte);color:var(--plaque);border:1px solid var(--asphalte);
  font-family:var(--f-titre);font-weight:700;padding:.8rem 1.2rem;cursor:pointer}

/* ---------- 20. REPLIS < 900 / < 600 ------------------------------------- */
@media (max-width:900px){
  .dm-pistes-nav{display:none}
  .dm-burger{display:flex;align-items:center;justify-content:center;flex-direction:column}
  .dm-cta-tete{display:none}
  .dm-lecture-in{flex-direction:column}
  .dm-somm{position:static;max-height:none;width:100%;display:flex;flex-wrap:wrap;gap:.6rem}
  .dm-somm-item{margin-bottom:0}
  .dm-somm-item a{padding:.5rem .7rem}
  .dm-corps{max-width:none}
}
@media (max-width:600px){
  body{font-size:17px}
  .dm-tete-in{min-height:60px}
  .dm-logo svg{width:28px;height:28px}
  .dm-logo-drive,.dm-logo-demarius{font-size:16px}
}

/* ---------- 21. ACCESSIBILITÉ --------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;
    scroll-behavior:auto!important}
}
[hidden]{display:none!important}