/*
Theme Name: Le Fil d'Eau
Theme URI: https://debouchage-canalisation-paris.net
Author: Le Fil d’Eau
Description: Thème code-pur pour debouchage-canalisation-paris.net — édition assainissement Paris.
Version: 1.0.0.1
Text Domain: fde
*/

/* ============================================================
   0. POLICES — self-hostées (P-086). Les 7 binaires WOFF2 sont
   présents dans assets/fonts/ (vérifiés fichier par fichier le
   31/08/2026) : Andada Pro 400/400i/600, Encode Sans 600,
   Encode Sans Condensed 300/600/700.
   ============================================================ */
@font-face {
  font-family: 'Encode Sans Condensed';
  src: url('assets/fonts/encode-sans-condensed-300.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Encode Sans Condensed';
  src: url('assets/fonts/encode-sans-condensed-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Encode Sans Condensed';
  src: url('assets/fonts/encode-sans-condensed-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Encode Sans';
  src: url('assets/fonts/encode-sans-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Andada Pro';
  src: url('assets/fonts/andada-pro-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Andada Pro';
  src: url('assets/fonts/andada-pro-400-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Andada Pro';
  src: url('assets/fonts/andada-pro-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ============================================================
   1. JETONS — 3 strates neutres + 1 accent (P-116), clair/sombre (P-351)
   ============================================================ */
:root{
  --fde-bg:#EFECE5;            /* strate 0 — bitume clair */
  --fde-remblai:#DCD6C9;       /* strate 1 — remblai */
  --fde-encre:#151A17;         /* encre de plan */
  --fde-encre-att:#4C554F;     /* encre effacée */
  --fde-filet:#B9B2A2;         /* filet de coupe */
  --fde-accent:#0E5C42;        /* vert de collecteur — SEUL accent */
  --fde-accent-survol:#0A4331;

  /* zones FIXES — jamais inversées entre les deux thèmes */
  --fde-collecteur-fixe:#101512;
  --fde-encre-fixe:#E9E5DB;
  --fde-accent-fixe:#5CC79E;
  --fde-filet-fixe:#2A312C;

  --fde-serif:'Andada Pro', Georgia, 'Times New Roman', serif;
  --fde-cond:'Encode Sans Condensed', 'Arial Narrow', Arial, sans-serif;
  --fde-sans:'Encode Sans', Arial, sans-serif;

  --fde-max:1180px;
  --fde-axe:56px;
  --fde-gouttiere:24px;

  --fde-12:.75rem; --fde-14:.875rem; --fde-16:1rem; --fde-18:1.125rem;
  --fde-22:1.375rem; --fde-28:1.75rem; --fde-36:2.25rem; --fde-46:2.875rem;
  --fde-60:3.75rem; --fde-88:clamp(2.75rem,6vw + 1rem,5.5rem);
  --fde-120:clamp(3.25rem,9vw + 1rem,7.5rem);
}
@media (prefers-color-scheme: dark){
  :root{
    --fde-bg:#1C211D;
    --fde-remblai:#161A17;
    --fde-encre:#E9E5DB;
    --fde-encre-att:#A7ADA6;
    --fde-filet:#3A423C;
    --fde-accent:#5CC79E;
    --fde-accent-survol:#86DCBB;
  }
}

/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fde-bg);
  color:var(--fde-encre);
  font-family:var(--fde-serif);
  font-size:var(--fde-18);
  line-height:1.6;
  font-variant-numeric:lining-nums;
}
img{max-width:100%;display:block}
a{color:var(--fde-accent)}
a:hover,a:focus{color:var(--fde-accent-survol)}
h1,h2,h3,h4{
  font-family:var(--fde-cond);
  font-weight:600;
  line-height:1.1;
  margin:0 0 .5em;
  /* ⛔ jamais color:var(--fde-encre) ici : sur une bande FIXE le titre devient
     quasi-noir sur quasi-noir en clair (1.05:1) et blanc sur blanc en sombre.
     Le titre hérite de sa bande — mesuré chk_contraste_reel 31/08/2026. */
  color:inherit;
}
ul,ol{padding-left:1.1em}
nav ul{list-style:none;margin:0;padding:0}
table{border-collapse:collapse;width:100%}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
.fde-num{font-family:var(--fde-cond);font-variant-numeric:lining-nums tabular-nums}
.fde-cap{text-transform:uppercase;letter-spacing:.06em}
.fde-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fde-saut{position:absolute;left:-999px;top:0;background:var(--fde-accent);color:#fff;padding:.5em 1em;z-index:100}
.fde-saut:focus{left:8px;top:8px}

/* ============================================================
   3. STRUCTURE — la colonne axe de profondeur (procédé 5.1)
   ============================================================ */
.fde-page{position:relative}
.fde-bande{position:relative;border-top:1px solid var(--fde-filet)}
.fde-bande--surface{background:var(--fde-bg)}
.fde-bande--remblai{background:var(--fde-remblai)}
.fde-bande--fixe{background:var(--fde-collecteur-fixe);color:var(--fde-encre-fixe);border-top-color:var(--fde-filet-fixe)}
.fde-bande--fixe a{color:var(--fde-accent-fixe)}
.fde-bande--fixe .fde-encre-att{color:#9aa39c}

.fde-conteneur{
  max-width:calc(var(--fde-max) + var(--fde-axe));
  margin:0 auto;
  padding:0 var(--fde-gouttiere) 0 calc(var(--fde-axe) + var(--fde-gouttiere));
  position:relative;
}
.fde-axe{
  position:absolute;left:0;top:0;bottom:0;width:var(--fde-axe);
  border-right:1px solid var(--fde-filet);
}
.fde-bande--fixe .fde-axe{border-right-color:var(--fde-filet-fixe)}
.fde-axe .fde-cote{
  position:absolute;left:4px;transform:translateY(-50%);
  font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-12);
  color:var(--fde-accent);white-space:nowrap;
}
.fde-bande--fixe .fde-axe .fde-cote{color:var(--fde-accent-fixe)}
.fde-cote-inline{
  font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-14);
  color:var(--fde-accent);display:inline-block;margin-bottom:.4em;
}
.fde-bande--fixe .fde-cote-inline{color:var(--fde-accent-fixe)}

/* ============================================================
   4. BARRE D'ASTREINTE (bande 0, fixe, P-186)
   ============================================================ */
.fde-astreinte{
  position:sticky;top:0;z-index:50;
  background:var(--fde-collecteur-fixe);color:var(--fde-encre-fixe);
  height:56px;display:flex;align-items:center;border-bottom:1px solid var(--fde-filet-fixe);
}
.fde-astreinte__inner{
  max-width:var(--fde-max);margin:0 auto;width:100%;
  padding:0 var(--fde-gouttiere);
  display:flex;align-items:center;justify-content:space-between;gap:1em;
}
.fde-astreinte__texte{font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-14);letter-spacing:.02em}
.fde-astreinte__texte .fde-encre-att{color:#9aa39c;font-weight:600}
.fde-bouton{
  font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-14);
  background:var(--fde-accent-fixe);color:var(--fde-collecteur-fixe);
  border:none;padding:.6em 1.1em;border-radius:2px;text-decoration:none;
  display:inline-block;cursor:pointer;
}
.fde-bouton:hover,.fde-bouton:focus{background:#86DCBB;color:var(--fde-collecteur-fixe)}
/* le bouton garde SON encre même dans une bande fixe (sinon texte vert sur fond vert, 1.00:1) */
.fde-bande--fixe a.fde-bouton,.fde-bande--fixe a.fde-bouton:hover,.fde-bande--fixe a.fde-bouton:focus{color:var(--fde-collecteur-fixe)}
.fde-bouton--ligne{
  background:transparent;color:var(--fde-encre);border:1px solid var(--fde-encre);
}
.fde-bouton--ligne:hover{border-color:var(--fde-accent);color:var(--fde-accent)}

/* ============================================================
   5. EN-TÊTE / NAV (P-004 : flex, sans puces)
   ============================================================ */
.fde-entete{background:var(--fde-bg);border-bottom:1px solid var(--fde-filet)}
.fde-entete__inner{
  max-width:var(--fde-max);margin:0 auto;padding:1em var(--fde-gouttiere);
  display:flex;align-items:center;justify-content:space-between;gap:1.5em;flex-wrap:wrap;
}
.fde-logo{display:flex;align-items:center;gap:.6em;text-decoration:none;color:var(--fde-encre)}
.fde-logo svg{height:34px;width:auto}
.fde-logo__texte{font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-18);letter-spacing:.01em}
.fde-nav{display:flex;flex-wrap:wrap;gap:1.4em;font-family:var(--fde-sans);font-size:var(--fde-14)}
.fde-nav a{color:var(--fde-encre);text-decoration:none;display:flex;flex-direction:column}
.fde-nav a:hover,.fde-nav a:focus{color:var(--fde-accent)}
.fde-nav__cote{font-family:var(--fde-cond);font-weight:700;font-size:.7rem;color:var(--fde-encre-att)}
.fde-nav-toggle{display:none}

/* ============================================================
   6. HERO (bande 1, fixe, départ de l'axe)
   ============================================================ */
.fde-hero{background:var(--fde-collecteur-fixe);color:var(--fde-encre-fixe)}
.fde-hero__grille{
  display:grid;grid-template-columns:1.1fr .9fr;gap:2.5em;align-items:center;
  padding:3em 0;
}
.fde-hero__photo{position:relative;border:1px solid var(--fde-filet-fixe);aspect-ratio:4/3;overflow:hidden}
.fde-hero__photo img{width:100%;height:100%;object-fit:cover}
.fde-hero h1{
  font-size:var(--fde-46);color:var(--fde-encre-fixe);max-width:14ch;
}
.fde-hero p{font-family:var(--fde-serif);font-size:var(--fde-18);max-width:48ch;color:var(--fde-encre-fixe)}
.fde-hero__prix{font-family:var(--fde-cond);font-weight:300;font-size:var(--fde-60);line-height:1}
.fde-hero__prix small{font-family:var(--fde-cond);font-weight:600;font-size:var(--fde-16);display:block;color:#9aa39c}

/* bandeau de relevé sur chaque photo (procédé 5.4) */
.fde-releve{position:relative}
.fde-releve__bandeau{
  position:absolute;left:0;bottom:0;height:26px;
  background:rgba(16,21,18,.9);color:var(--fde-encre-fixe);
  font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-12);
  display:flex;align-items:center;padding:0 .6em;letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums;
}
.fde-releve img{border:1px solid var(--fde-filet)}

/* ============================================================
   7. BARÈME (bande 2, procédé 5.3) — LE PRIX EN PREMIER
   ============================================================ */
.fde-bareme{padding:3em 0}
.fde-bareme table{font-family:var(--fde-serif)}
.fde-bareme th{
  font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-12);
  text-transform:uppercase;letter-spacing:.05em;text-align:left;
  border-bottom:1px solid var(--fde-filet);padding:.7em .8em;color:var(--fde-encre-att);
}
.fde-bareme td{
  border-bottom:1px solid var(--fde-filet);padding:.9em .8em;vertical-align:top;
}
.fde-bareme tr{border-left:3px solid transparent}
.fde-bareme tbody tr:hover{border-left-color:var(--fde-accent)}
.fde-bareme .fde-prix{font-family:var(--fde-cond);font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.fde-tampon{
  margin-top:1.4em;border:2px solid var(--fde-encre);padding:1em 1.2em;
  font-family:var(--fde-cond);font-size:var(--fde-12);text-transform:uppercase;letter-spacing:.05em;
  background:transparent;max-width:60ch;
}

/* ============================================================
   8. TUILES DE TRÈS GROS CHIFFRES (bande 3, fixe)
   ============================================================ */
.fde-tuiles{background:var(--fde-collecteur-fixe);color:var(--fde-encre-fixe);padding:3em 0}
.fde-tuiles__grille{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--fde-filet-fixe)}
.fde-tuile{background:var(--fde-collecteur-fixe);padding:1.4em 1em;text-align:left}
.fde-tuile__chiffre{font-family:var(--fde-cond);font-weight:300;font-size:var(--fde-88);line-height:1;color:var(--fde-accent-fixe)}
.fde-tuile__unite{font-family:var(--fde-cond);font-weight:600;font-size:var(--fde-14)}
.fde-tuile__date{font-size:var(--fde-12);color:#9aa39c;margin-top:.4em}

/* ============================================================
   9. LA COUPE CLIQUABLE (bande 4, procédé 5.6)
   ============================================================ */
.fde-coupe{padding:3em 0}
.fde-coupe__svg{width:100%;height:auto}
.fde-coupe__svg text{font-family:var(--fde-cond);font-weight:700;font-size:13px;fill:var(--fde-encre)}
.fde-coupe__svg .fde-coupe-niveau{stroke:var(--fde-encre);fill:none;stroke-width:1}
.fde-coupe__svg a.fde-coupe-lien .fde-coupe-niveau{stroke:var(--fde-encre)}
.fde-coupe__svg a.fde-coupe-lien:hover .fde-coupe-niveau,
.fde-coupe__svg a.fde-coupe-lien:focus .fde-coupe-niveau{stroke:var(--fde-accent)}
.fde-coupe__svg a.fde-coupe-lien:hover text,
.fde-coupe__svg a.fde-coupe-lien:focus text{fill:var(--fde-accent)}
.fde-coupe__liste{display:none;list-style:none;margin:0;padding:0;border-top:1px solid var(--fde-filet)}
.fde-coupe__liste li{border-bottom:1px solid var(--fde-filet)}
.fde-coupe__liste a{
  display:flex;justify-content:space-between;gap:1em;padding:.9em 0;
  text-decoration:none;color:var(--fde-encre);font-family:var(--fde-cond);font-weight:700;
}
.fde-coupe__liste a:hover,.fde-coupe__liste a:focus{color:var(--fde-accent)}

/* ============================================================
   10. SECTEUR & DÉLAIS (bande 5, procédé 5.5)
   ============================================================ */
.fde-secteurs{padding:3em 0}
.fde-secteurs__grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1px;background:var(--fde-filet)}
.fde-secteur{background:var(--fde-remblai);padding:1em 1.2em;display:flex;align-items:baseline;gap:.8em}
.fde-secteur__num{font-family:var(--fde-cond);font-weight:300;font-size:var(--fde-46);color:var(--fde-encre);line-height:1}
.fde-secteur__detail{display:flex;flex-direction:column}
.fde-secteur__delai{font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-22)}
.fde-secteur__date{font-size:var(--fde-12);color:var(--fde-encre-att)}
.fde-secteur__na{font-size:var(--fde-14);color:var(--fde-encre-att);font-style:italic}

/* ============================================================
   11. PREUVES / CARTES (bande 6) — une photo dans CHAQUE carte
   ============================================================ */
.fde-preuves{padding:3em 0}
.fde-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fde-gouttiere)}
.fde-carte{border:1px solid var(--fde-filet);display:flex;flex-direction:column}
.fde-carte__photo{aspect-ratio:4/3;overflow:hidden;position:relative}
.fde-carte__photo img{width:100%;height:100%;object-fit:cover}
.fde-carte__corps{padding:1em 1.1em}
.fde-carte h3{font-size:var(--fde-18)}
.fde-carte p{font-size:var(--fde-16);color:var(--fde-encre-att);margin:0}

/* ============================================================
   12. LE REGARD — colonne d'actualité (bande 7)
   ============================================================ */
.fde-regard{padding:3em 0}
.fde-regard__grille{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5em}
.fde-regard__liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--fde-filet)}
.fde-regard__liste li{border-bottom:1px solid var(--fde-filet);padding:1em 0}
.fde-regard__liste a{text-decoration:none;color:var(--fde-encre);display:block}
.fde-regard__date{font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-12);color:var(--fde-accent);display:block;margin-bottom:.3em}
.fde-regard__titre{font-family:var(--fde-serif);font-size:var(--fde-18)}
.fde-regard__avant{display:flex;flex-direction:column;gap:1.4em}
.fde-regard__avant .fde-carte{flex-direction:row}
.fde-regard__avant .fde-carte__photo{width:38%;aspect-ratio:1/1;flex-shrink:0}
.fde-regard__avant .fde-carte__corps{flex:1}

/* ============================================================
   13. PIED DE PAGE (bande 8, fixe, dense)
   ============================================================ */
.fde-pied{background:var(--fde-collecteur-fixe);color:var(--fde-encre-fixe);padding:3.5em 0 1.6em}
.fde-pied__grille{display:grid;grid-template-columns:repeat(5,1fr);gap:2em;margin-bottom:2.4em}
.fde-pied h4{font-family:var(--fde-cond);font-size:var(--fde-14);color:var(--fde-encre-fixe);text-transform:uppercase;letter-spacing:.05em}
.fde-pied ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em}
.fde-pied a{color:#9aa39c;text-decoration:none;font-size:var(--fde-14)}
.fde-pied a:hover,.fde-pied a:focus{color:var(--fde-accent-fixe)}
.fde-pied__bas{
  border-top:1px solid var(--fde-filet-fixe);padding-top:1.4em;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em;
  font-size:var(--fde-12);color:#9aa39c;
}
.fde-pied__bas a{color:#9aa39c}
.fde-pied__editeur{max-width:70ch;font-size:var(--fde-14);color:#9aa39c;border-top:1px solid var(--fde-filet-fixe);padding-top:1.4em;margin-top:1.4em}

/* ============================================================
   14. FORMULAIRE (P-186 : visible sans défiler sur home/service)
   ============================================================ */
.fde-form{
  background:var(--fde-bg);color:var(--fde-encre);border:1px solid var(--fde-filet);
  padding:1.6em;max-width:420px;
}
.fde-hero .fde-form{background:var(--fde-encre-fixe);color:var(--fde-collecteur-fixe);border:none}
.fde-hero .fde-form label{color:var(--fde-collecteur-fixe)}
.fde-form h2{font-size:var(--fde-22);margin-bottom:.2em}
.fde-form__note{font-size:var(--fde-14);color:var(--fde-encre-att);margin-bottom:1em}
.fde-hero .fde-form__note{color:#3a4239}
.fde-champ{margin-bottom:1em;display:flex;flex-direction:column;gap:.35em}
.fde-champ label{font-family:var(--fde-cond);font-weight:600;font-size:var(--fde-14)}
.fde-champ input,.fde-champ select,.fde-champ textarea{
  border:1px solid var(--fde-filet);background:var(--fde-bg);color:var(--fde-encre);
  padding:.7em .8em;font-family:var(--fde-serif);font-size:var(--fde-16);
}
.fde-hero .fde-champ input,.fde-hero .fde-champ select{background:#fff;border-color:#c9c2ae}
.fde-champ input:focus,.fde-champ select:focus,.fde-champ textarea:focus{outline:2px solid var(--fde-accent);outline-offset:1px}
.fde-form__rgpd{font-size:var(--fde-12);color:var(--fde-encre-att);margin-top:.8em}
.fde-hero .fde-form__rgpd{color:#3a4239}
.fde-champ--piege{position:absolute;left:-9999px}
.fde-form__ok{border:2px solid var(--fde-accent);padding:1em;font-family:var(--fde-cond);font-weight:600}
/* liens du formulaire : îlot clair posé sur une bande fixe (P-410) */
.fde-bande--fixe .fde-form a{color:var(--fde-accent)}
.fde-hero .fde-form a{color:#0E5C42}
.fde-hero .fde-form a:hover,.fde-hero .fde-form a:focus{color:#0A4331}

/* ============================================================
   15. PAGE DE SERVICE (V1/V2/V3) — le gabarit qui paie 50 fois
   ============================================================ */
.fde-service-hero{background:var(--fde-collecteur-fixe);color:var(--fde-encre-fixe);padding:2.4em 0}
.fde-service-hero__grille{display:grid;grid-template-columns:1.2fr .8fr;gap:2em;align-items:start}
.fde-fil{font-family:var(--fde-sans);font-size:var(--fde-12);color:#9aa39c;margin-bottom:.6em}
.fde-fil a{color:#9aa39c}
.fde-corps{padding:3em 0;max-width:72ch}
.fde-corps h2{font-size:var(--fde-28);margin-top:1.6em}
.fde-corps h3{font-size:var(--fde-22)}
.fde-corps p{margin:0 0 1.1em}
.fde-corps blockquote{
  border-left:3px solid var(--fde-accent);margin:1.6em 0;padding:.2em 0 .2em 1.2em;
  font-style:italic;color:var(--fde-encre-att);
}
.sbs_tableau{overflow-x:auto;margin:1.6em 0}
.sbs_tableau table{border:1px solid var(--fde-filet)}
.sbs_tableau th,.sbs_tableau td{border-bottom:1px solid var(--fde-filet);padding:.7em .9em;text-align:left}
.sbs_tableau th{font-family:var(--fde-cond);font-weight:700;background:var(--fde-remblai)}

/* ============================================================
   16. ARTICLE (Le Regard) — bloc auteur, image plafonnée
   ============================================================ */
.fde-article__une{max-height:420px;overflow:hidden;position:relative;margin-bottom:1.6em}
.fde-article__une img{width:100%;height:100%;object-fit:cover}
.fde-article__meta{font-family:var(--fde-cond);font-size:var(--fde-12);color:var(--fde-encre-att);margin-bottom:.6em}
.fde-auteur{
  display:flex;align-items:center;gap:1em;border-top:1px solid var(--fde-filet);
  border-bottom:1px solid var(--fde-filet);padding:1.2em 0;margin:2em 0;
}
.fde-auteur__ecusson{
  width:52px;height:52px;border:2px solid var(--fde-encre);display:flex;align-items:center;justify-content:center;
  font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-18);flex-shrink:0;
}
.fde-auteur__nom{font-family:var(--fde-cond);font-weight:700}
.fde-auteur__role{font-size:var(--fde-14);color:var(--fde-encre-att)}

/* ============================================================
   17. HUB DE RUBRIQUE — toutes les entrées avant tout texte
   ============================================================ */
.fde-hub__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fde-gouttiere);margin:2em 0 3em}
.fde-hub__intro{max-width:72ch;margin-top:2em}

/* ============================================================
   18. UTILITAIRES / BOUTONS
   ============================================================ */
.fde-btn-primaire{
  font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-16);
  background:var(--fde-accent);color:#fff;border:none;padding:.8em 1.4em;
  border-radius:2px;cursor:pointer;display:inline-block;text-decoration:none;
}
.fde-btn-primaire:hover,.fde-btn-primaire:focus{background:var(--fde-accent-survol);color:#fff}

/* ============================================================
   19. RESPONSIVE — mobile 390 px (P-186)
   ============================================================ */
@media (max-width:900px){
  .fde-hero__grille,.fde-service-hero__grille,.fde-regard__grille{grid-template-columns:1fr}
  .fde-cartes,.fde-hub__grille{grid-template-columns:repeat(2,1fr)}
  .fde-tuiles__grille{grid-template-columns:repeat(2,1fr)}
  .fde-pied__grille{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .fde-conteneur{padding-left:calc(4px + var(--fde-gouttiere))}
  .fde-axe{width:4px}
  .fde-axe .fde-cote{display:none}
  .fde-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--fde-bg);
    border-bottom:1px solid var(--fde-filet);flex-direction:column;gap:0;padding:.5em var(--fde-gouttiere) 1em;
  }
  .fde-nav.fde-nav--ouvert{display:flex}
  .fde-nav a{padding:.6em 0;border-bottom:1px solid var(--fde-filet);flex-direction:row;justify-content:space-between}
  .fde-nav-toggle{
    display:inline-flex;background:none;border:1px solid var(--fde-encre);color:var(--fde-encre);
    padding:.4em .7em;font-family:var(--fde-cond);font-weight:700;
  }
  .fde-hero__photo{max-height:240px;aspect-ratio:auto}
  .fde-hero h1{font-size:var(--fde-36)}
  .fde-cartes,.fde-hub__grille{grid-template-columns:1fr}
  .fde-tuiles__grille{grid-template-columns:1fr}
  .fde-regard__avant .fde-carte{flex-direction:column}
  .fde-regard__avant .fde-carte__photo{width:100%;aspect-ratio:16/9}
  .fde-bareme table,.fde-bareme thead{display:none}
  .fde-bareme tbody tr{
    display:block;border:1px solid var(--fde-filet);margin-bottom:1em;padding:1em;border-left:3px solid transparent;
  }
  .fde-bareme tbody tr:hover,.fde-bareme tbody tr:focus-within{border-left-color:var(--fde-accent)}
  .fde-bareme td{display:block;border:none;padding:.3em 0}
  .fde-bareme td::before{content:attr(data-label);font-family:var(--fde-cond);font-weight:700;font-size:var(--fde-12);display:block;color:var(--fde-encre-att)}
  .fde-secteurs__grille{grid-template-columns:1fr}
  .fde-pied__grille{grid-template-columns:1fr;gap:1.6em}
  .fde-astreinte__texte{font-size:var(--fde-12)}
  .fde-coupe__svg{display:none}
  .fde-coupe__liste{display:block}
}

/* ============================================================
   20. MODE SOMBRE — recontrastes hors jetons (P-351)
   L'accent bascule de #0E5C42 (foncé) à #5CC79E (clair) : un bouton plein en
   accent doit donc inverser sa couleur de texte, sinon il devient illisible
   uniquement en sombre. Les zones fixes ne sont jamais concernées ici.
   ============================================================ */
@media (prefers-color-scheme: dark){
  .fde-btn-primaire{color:var(--fde-collecteur-fixe)}
  .fde-btn-primaire:hover,.fde-btn-primaire:focus{color:var(--fde-collecteur-fixe)}
}

/* --- Bloc « À lire ensuite » (template-parts/connexes.php) -----------------
   Le maillage interne, rendu par le gabarit sur les ~29 pages de service.
   Couleurs prises AUX VARIABLES : elles basculent seules en mode sombre. */
.fde-connexes{padding:2.6em 0}
.fde-connexes__titre{
  font-family:var(--fde-cond);font-size:var(--fde-14);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--fde-encre-att);margin:0 0 1.1em}
.fde-connexes__liste{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1px;background:var(--fde-filet);
  border:1px solid var(--fde-filet)}
.fde-connexes__item{background:var(--fde-bg);margin:0}
.fde-connexes__item a{
  display:block;padding:.95em 1.1em;
  font-family:var(--fde-serif);font-size:var(--fde-18);line-height:1.35;
  color:var(--fde-encre);text-decoration:none;
  transition:background .15s ease,color .15s ease}
.fde-connexes__item a:hover,
.fde-connexes__item a:focus-visible{
  background:var(--fde-remblai);color:var(--fde-accent-survol)}
.fde-connexes__item a::after{
  content:" →";color:var(--fde-accent);font-family:var(--fde-sans)}
@media (min-width:720px){
  .fde-connexes__liste{grid-template-columns:1fr 1fr}
}