/*
 * psub-v3 — pompesubmersible.com — feuille de style du thème.
 * DA « la sonde de niveau » (DIRECTION-ARTISTIQUE.md 02/10/2026). Mode clair.
 * P-110/P-351 : le bloc @media(prefers-color-scheme:dark) réaffirme EXPLICITEMENT
 * les mêmes jetons clairs — ce site reste clair même quand l'OS de Mathias est en
 * sombre (DA §3 : « palette mode clair uniquement »), jamais une bascule inversée
 * qui casserait le contraste prévu.
 */

/* ===== 1. JETONS ===================================================== */
:root{
  --blanc:#FFFFFF;
  --pierre:#EEEEE8;
  --basalte:#1E2428;
  --schiste:#5B666C;
  --vert:#5DAA2E;
  --vert-fonce:#3D7A1A;
  --vert-pale:#E9F4E1;
  --alerte:#C8402A;

  --fond:var(--blanc);
  --encre:var(--basalte);
  --encre-douce:var(--schiste);
  --accent:var(--vert);
  --accent-fonce:var(--vert-fonce);
  --accent-pale:var(--vert-pale);

  --r-disque:999px;
  --r-carte:28px;
  --r-tuile:16px;
  --r-bouton:12px;

  --ombre:0 2px 6px rgba(30,36,40,.06),0 18px 48px rgba(30,36,40,.14);
  --ombre-dure:0 10px 26px rgba(30,36,40,.20);

  --f-titre:'Darker Grotesque',Georgia,serif;
  --f-corps:'Reddit Sans',system-ui,-apple-system,sans-serif;

  --conteneur:1280px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --blanc:#FFFFFF;--pierre:#EEEEE8;--basalte:#1E2428;--schiste:#5B666C;
    --vert:#5DAA2E;--vert-fonce:#3D7A1A;--vert-pale:#E9F4E1;--alerte:#C8402A;
    --fond:var(--blanc);--encre:var(--basalte);--encre-douce:var(--schiste);
    --accent:var(--vert);--accent-fonce:var(--vert-fonce);--accent-pale:var(--vert-pale);
  }
}

/* ===== 2. RESET & BASE ================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--f-corps);font-size:18px;line-height:1.6;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--f-titre);font-weight:800;line-height:.96;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:clamp(46px,3.2vw + 20px,64px)}
h2{font-size:clamp(30px,2vw + 16px,44px)}
h3{font-size:clamp(21px,1vw + 14px,26px)}
p{margin:0 0 1em}
.conteneur{max-width:var(--conteneur);margin-inline:auto;padding-inline:24px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--accent);color:var(--basalte);padding:10px 16px;z-index:200}
.skip-link:focus{left:12px;top:12px}
main{display:block}
:focus-visible{outline:3px solid var(--vert-fonce);outline-offset:2px}

/* ===== 3. UTILITAIRES =================================================*/
.etiquette{display:inline-block;font-family:var(--f-corps);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:lowercase;color:var(--accent-fonce)}
.etiquette--claire{color:var(--accent-pale)}
.chapo{font-size:20px;line-height:1.55;color:var(--encre-douce);max-width:46ch}
.mot-accent{color:var(--accent-fonce)}
.tabulaire{font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-bouton);padding:14px 26px;font-weight:700;font-size:16px;min-height:52px;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.bouton--accent{background:var(--accent);color:var(--basalte);box-shadow:var(--ombre)}
.bouton--accent:hover{background:var(--accent-fonce);color:var(--blanc);transform:translateY(-1px)}
.bouton--fantome{background:transparent;color:var(--encre);border:1.5px solid rgba(30,36,40,.18)}
.bouton--fantome:hover{border-color:var(--accent-fonce);color:var(--accent-fonce)}
.bouton--sur-encre{background:var(--blanc);color:var(--basalte)}
.bouton--large{padding:16px 32px;font-size:17px}
.bouton--pleine{width:100%}

/* ===== 4. EN-TÊTE ====================================================*/
.entete{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);border-bottom:1px solid rgba(30,36,40,.06)}
.entete.est-flou{backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(30,36,40,.08)}
.entete-inner{display:flex;align-items:center;gap:28px;height:76px;max-width:var(--conteneur);margin-inline:auto;padding-inline:24px}
.marque{display:flex;align-items:center;gap:10px;flex:none}
.marque-svg{height:32px;width:auto}
.nav-principale{display:flex;align-items:center;gap:26px;flex:1}
.nav-lien{font-weight:600;font-size:15px;color:var(--encre);position:relative;padding:6px 0}
.nav-lien:hover{color:var(--accent-fonce)}
.entete-cta{margin-left:auto;display:flex;align-items:center;gap:18px}
.nav-toggle{display:none;flex:none;width:40px;height:40px;position:relative}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";position:absolute;left:8px;right:8px;height:2px;background:var(--basalte);transition:transform .2s ease,opacity .2s ease}
.nav-toggle-bars{top:19px}
.nav-toggle-bars::before{top:-7px}
.nav-toggle-bars::after{top:7px}
.panneau-mobile{position:fixed;inset:0;background:var(--blanc);z-index:200;display:flex;flex-direction:column;gap:20px;padding:88px 28px 40px;transform:translateX(100%);transition:transform .25s ease;visibility:hidden}
.panneau-mobile.est-ouvert{transform:translateX(0);visibility:visible}
.panneau-mobile-fermer{position:absolute;top:22px;right:24px;font-size:22px;width:40px;height:40px}
.panneau-mobile .nav-lien{font-size:22px;font-family:var(--f-titre);font-weight:700}
.panneau-mobile-cta{margin-top:10px}
.panneau-mobile-coords{margin-top:auto;color:var(--encre-douce);font-size:13px}

/* ===== 5. HÉROS (pièce HERO-puits-rond-formulaire-devant-sonde) ====== */
.hero{position:relative;padding-block:56px 0;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:20px;align-items:center;position:relative}
.hero-texte{position:relative;z-index:2;padding-bottom:70px}
.hero-badge{display:inline-block;margin-bottom:18px;color:var(--encre-douce);font-weight:600;font-size:14px}
.hero h1{margin-bottom:18px}
.hero h1 .mot-panne{color:var(--accent-fonce)}
.hero .chapo{margin-bottom:22px}
.hero-reassurances{display:flex;gap:18px;flex-wrap:wrap;font-weight:700;font-size:14px;color:var(--accent-fonce)}
.hero-reassurances li::before{content:"✓ ";color:var(--accent)}
.hero-reassurances li{display:inline-flex}

.hero-visuel{position:relative;min-height:560px}
.hero-disque{position:absolute;right:-8%;top:10%;width:62%;aspect-ratio:1;border-radius:var(--r-disque);overflow:hidden;box-shadow:var(--ombre-dure);opacity:0;transform:scale(.92);transition:opacity .7s ease,transform .7s ease}
.js-ready .hero-disque{opacity:1;transform:scale(1)}
.hero-disque img{width:100%;height:100%;object-fit:cover}
.hero-disque-credit{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);background:rgba(30,36,40,.55);color:var(--blanc);font-size:11px;padding:3px 10px;border-radius:999px;white-space:nowrap}

.fil-sonde-hero{position:absolute;left:38%;top:0;width:2px;height:46%;background:var(--basalte);z-index:3;transform-origin:top;transform:scaleY(0);transition:transform .9s ease .2s}
.js-ready .fil-sonde-hero{transform:scaleY(1)}
.fil-sonde-hero::after{content:"";position:absolute;left:50%;bottom:-3px;width:11px;height:22px;background:var(--accent);border-radius:999px;transform:translateX(-50%)}

.carte-formulaire-flottante{position:relative;z-index:4;max-width:440px;margin-top:40px;background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre-dure);padding:26px 24px 24px;opacity:0;transform:translateY(16px);transition:opacity .7s ease .3s,transform .7s ease .3s}
.js-ready .carte-formulaire-flottante{opacity:1;transform:translateY(0)}

@media (max-width:1180px){
  .hero-inner{grid-template-columns:1fr}
  .hero-visuel{min-height:380px;margin-top:20px}
  .hero-disque{right:0;top:0;width:70%}
  .carte-formulaire-flottante{max-width:none;margin-top:28px}
  .fil-sonde-hero{display:none}
}
@media (max-width:700px){
  .hero{padding-block:32px 0}
  .hero-visuel{min-height:0}
  .hero-disque{position:relative;right:-18px;top:0;width:min(300px,70vw);margin-left:auto}
  .hero-texte{padding-bottom:0}
}

/* ===== 6. BANDES GÉNÉRIQUES ========================================= */
.bande{padding-block:76px}
.bande--pierre{background:var(--pierre)}
.bande--basalte{background:var(--basalte);color:var(--blanc)}
.bande--basalte h2,.bande--basalte .chapo{color:var(--blanc)}
.bande--basalte .chapo{color:rgba(255,255,255,.72)}
.ouverture-section{max-width:640px;margin-bottom:40px}
.ouverture-section.est-centree{margin-inline:auto;text-align:center}
.h1-page{font-size:clamp(34px,2.4vw + 18px,54px)}

/* ===== 7. CHIFFRES ====================================================*/
.grille-chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.tuile-chiffre{text-align:center}
.chiffre-geant{display:block;font-family:var(--f-titre);font-weight:800;font-size:clamp(48px,4vw + 10px,72px);color:var(--accent)}
.tuile-libelle{color:rgba(255,255,255,.78);font-size:15px;max-width:28ch;margin-inline:auto}
@media (max-width:700px){.grille-chiffres{grid-template-columns:1fr;gap:34px}}

/* ===== 8. « CE QUI VOUS ARRIVE » — mosaïque situations ===============*/
.grille-situations{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,190px);gap:16px}
.carte-situation{position:relative;border-radius:var(--r-tuile);overflow:hidden;box-shadow:var(--ombre);padding:0;margin:0;width:100%;height:100%;display:block}
.carte-situation:nth-child(1){grid-column:1/2;grid-row:1/3}
.carte-situation:nth-child(2){grid-column:2/3;grid-row:1/2}
.carte-situation:nth-child(3){grid-column:3/4;grid-row:1/2}
.carte-situation:nth-child(4){grid-column:2/4;grid-row:2/3}
.carte-situation img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.carte-situation:hover img{transform:scale(1.05)}
.carte-situation::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,36,40,0) 40%,rgba(30,36,40,.72) 100%)}
.carte-situation-label{position:absolute;left:16px;right:16px;bottom:14px;color:var(--blanc);font-weight:700;z-index:2}
@media (max-width:900px){
  .grille-situations{grid-template-columns:1fr 1fr;grid-template-rows:none}
  .carte-situation:nth-child(1){grid-column:1/3;grid-row:auto;height:220px}
  .carte-situation:nth-child(2),.carte-situation:nth-child(3),.carte-situation:nth-child(4){grid-column:auto;grid-row:auto;height:160px}
}
@media (max-width:560px){
  .grille-situations{grid-template-columns:1fr}
  .carte-situation:nth-child(1),.carte-situation:nth-child(2),.carte-situation:nth-child(3),.carte-situation:nth-child(4){grid-column:auto;grid-row:auto;height:170px}
}

/* ===== 9. « COMMENT ÇA SE PASSE » ====================================*/
.sequence-photo{position:relative;border-radius:var(--r-carte);overflow:hidden;min-height:360px}
.sequence-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sequence-carte{position:relative;z-index:2;background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre-dure);margin:-70px 32px 0;padding:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.sequence-etape{display:flex;gap:14px}
.sequence-num{font-family:var(--f-titre);font-weight:800;font-size:34px;color:var(--accent-pale);-webkit-text-stroke:1.5px var(--accent-fonce)}
.sequence-etape h3{margin-bottom:4px;font-size:18px}
.sequence-etape p{color:var(--encre-douce);font-size:15px;margin:0}
@media (max-width:900px){.sequence-carte{grid-template-columns:1fr;margin:-40px 16px 0}}

/* ===== 10. CALCULATEUR HMT ============================================*/
.calculateur{display:grid;grid-template-columns:1fr 1fr;gap:40px;background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre);padding:36px}
.calc-titre{display:block;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:lowercase;color:var(--encre-douce);margin-bottom:16px}
.champ{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.champ label{font-size:14px;font-weight:600;color:var(--encre-douce)}
.champ input,.champ textarea{font-family:var(--f-corps);font-size:16px;border:1.5px solid rgba(30,36,40,.16);border-radius:10px;padding:12px 14px;background:var(--blanc);color:var(--encre)}
.champ input:focus,.champ textarea:focus{border-color:var(--accent-fonce)}
.calculateur-resultat{text-align:center;display:flex;flex-direction:column;align-items:center}
.calc-colonne{position:relative;width:2px;height:150px;background:rgba(30,36,40,.14);border-radius:2px;margin:0 auto 18px;--profondeur-pct:0%}
.calc-colonne-fil{display:block;width:100%;height:100%}
.calc-colonne-perle{position:absolute;left:50%;top:var(--profondeur-pct,0%);width:12px;height:22px;background:var(--accent);border-radius:999px;transform:translate(-50%,-50%);transition:top .3s ease}
.calculateur-resultat-valeur{font-family:var(--f-titre);font-weight:800;font-size:clamp(56px,6vw,96px);line-height:.9;margin:0}
.calculateur-resultat-aide{color:var(--encre-douce);font-size:14px;max-width:26ch;margin-top:8px}
.calculateur-source{font-size:12px;color:var(--encre-douce);margin-top:14px}
@media (max-width:900px){.calculateur{grid-template-columns:1fr}}

/* ===== 11. CARTE DES 20 COMMUNES ======================================*/
.zone-mise-en-page{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:36px;align-items:start}
.carte-zone-bloc{background:var(--basalte);border-radius:var(--r-carte);padding:16px}
.carte-zone{width:100%;height:auto}
.carte-zone .commune-servie{fill:var(--pierre);stroke:var(--basalte);stroke-width:1.4;transition:fill .2s ease;cursor:pointer}
.carte-zone .commune-servie:hover,.carte-zone .commune-servie:focus,.carte-zone .commune-servie.a-survole{fill:var(--accent-pale);outline:none}
.carte-zone .commune-active{fill:var(--accent);stroke:var(--vert-fonce)}
.carte-zone .commune-voisine{fill:#4B5459;stroke:#39403F;stroke-width:1}
.carte-zone .libelle{font-family:var(--f-titre);font-size:16px;font-weight:700;fill:var(--basalte);paint-order:stroke fill;stroke:rgba(255,255,255,.88);stroke-width:5px;stroke-linejoin:round;pointer-events:none;opacity:0;transition:opacity .15s ease}
.carte-zone .libelle.toujours-visible,.carte-zone .libelle.est-survole{opacity:1}
.carte-zone-bloc--hub{max-width:760px;margin-inline:auto}

.grille-pastilles-communes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px}
.pastille-commune{display:block;background:rgba(255,255,255,.08);border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:var(--blanc);text-align:center}
.pastille-commune:hover{background:var(--accent);color:var(--basalte)}
.pastille-commune--inactive{color:rgba(255,255,255,.4);background:transparent;border:1px solid rgba(255,255,255,.12)}
@media (max-width:640px){.grille-pastilles-communes{grid-template-columns:repeat(3,1fr)}}

/* ===== 12. TIRAGES / CARTES ARTICLES =================================*/
.grille-tirages{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grille-tirages--centree{grid-template-columns:repeat(2,minmax(0,360px));justify-content:center}
.carte-tirage{display:flex;flex-direction:column}
.carte-tirage.span-2{grid-column:span 2}
.tirage{display:block;border-radius:18px;overflow:hidden;position:relative}
.tirage-photo{display:block;position:relative;aspect-ratio:4/3;background:var(--pierre);overflow:hidden}
.tirage-photo--16-9{aspect-ratio:16/9}
.tirage-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease}
.tirage:hover .tirage-photo img{transform:scale(1.04)}
.tirage-legende{display:block;font-size:13px;color:var(--encre-douce);margin-top:10px}
.carte-meta{margin-top:4px}
.carte-titre{font-family:var(--f-titre);font-weight:800;font-size:21px;margin:0}
.carte-titre a:hover{color:var(--accent-fonce)}
.carte-excerpt{font-size:14px;color:var(--encre-douce);margin-top:4px}
.carte-cta{background:var(--pierre);border-radius:var(--r-tuile);padding:26px;height:100%;display:flex;flex-direction:column;gap:10px;justify-content:center}
.commune-a-venir{display:flex;align-items:center;justify-content:center;text-align:center;color:var(--encre-douce);font-size:14px;font-weight:600;min-height:120px}
@media (max-width:900px){.grille-tirages{grid-template-columns:repeat(2,1fr)}.carte-tirage.span-2{grid-column:auto}}
@media (max-width:560px){.grille-tirages,.grille-tirages--centree{grid-template-columns:1fr}}

/* ===== 13. FORMULAIRE MULTI-ÉTAPES (pièce maîtresse) =================*/
.formulaire{background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre-dure);padding:30px;display:grid;grid-template-columns:52px 1fr;gap:26px;position:relative}
.formulaire--compact{grid-template-columns:1fr;padding:22px}
.formulaire--compact .formulaire-rail{display:none}
.honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

.formulaire-rail{display:flex;flex-direction:column;align-items:center;gap:10px;--etape-pct:0%}
.rail-ligne{width:2px;flex:1;background:rgba(30,36,40,.14);position:relative;border-radius:2px;min-height:160px}
.rail-perle{position:absolute;left:50%;top:var(--etape-pct,0%);width:13px;height:24px;background:var(--accent);border-radius:999px;transform:translate(-50%,-50%);transition:top .35s ease,left .35s ease}
.rail-libelle{font-size:11px;font-weight:700;color:var(--encre-douce);text-align:center;letter-spacing:.03em}

.fs-etape{display:none;animation:fs-glisse .22s ease}
.fs-etape.est-active{display:block}
@keyframes fs-glisse{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.fs-question{font-family:var(--f-titre);font-weight:800;font-size:24px;margin:0 0 18px}
.fs-sousquestion{font-weight:700;font-size:14px;color:var(--encre-douce);margin:18px 0 10px;display:block}

.fs-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.fs-option{display:flex;align-items:center;gap:12px;min-height:88px;padding:14px 16px;border:1.5px solid rgba(30,36,40,.14);border-radius:var(--r-tuile);background:var(--blanc);text-align:left;font-weight:600;transition:border-color .15s ease,background .15s ease}
.fs-option:hover{border-color:var(--accent)}
.fs-option.est-choisi{border-color:var(--accent-fonce);background:var(--accent-pale)}
.fs-option-icone{flex:none;color:var(--accent-fonce)}
.fs-option--urgent{border-color:var(--alerte);color:var(--alerte)}
.fs-option--urgent.est-choisi{background:#FBE7E3;border-color:var(--alerte)}
.fs-option-photo{flex:none;width:56px;height:42px;border-radius:10px;overflow:hidden;background:var(--pierre)}
.fs-option-photo img{width:100%;height:100%;object-fit:cover}
.fs-etape-photos .fs-options{grid-template-columns:repeat(2,1fr)}
.fs-etape-communes .fs-options{grid-template-columns:repeat(2,1fr)}

.fs-champs{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;margin-bottom:6px}
.champ--pleine{grid-column:1/-1}
.champ-case{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--encre-douce);margin:14px 0 4px}
.champ-case input{margin-top:3px}
.champ-case a{text-decoration:underline}

.fs-nav{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:12px}
.fs-nav-droite{display:flex;align-items:center;gap:16px}
.fs-passer{font-size:13px;color:var(--encre-douce);text-decoration:underline;text-underline-offset:2px}

.fs-confirmation{margin-top:18px;padding:20px;border-radius:var(--r-tuile);background:var(--accent-pale);color:var(--accent-fonce);font-weight:700;text-align:center}

@media (max-width:700px){
  .formulaire{grid-template-columns:1fr;padding:22px}
  .formulaire-rail{flex-direction:row;order:-1}
  .rail-ligne{flex:1;height:2px;width:auto;min-height:0}
  .rail-perle{top:50%!important;left:var(--etape-pct,0%);transform:translate(-50%,-50%)}
  .fs-options,.fs-champs{grid-template-columns:1fr}
}

/* ===== 14. FAQ ========================================================*/
.faq{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:10px}
.faq details{background:var(--blanc);border-radius:16px;box-shadow:var(--ombre);padding:6px 20px}
.faq summary{list-style:none;padding:16px 36px 16px 0;font-weight:700;cursor:pointer;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:12px;width:26px;height:26px;border-radius:999px;background:var(--accent-pale);color:var(--accent-fonce);display:flex;align-items:center;justify-content:center;font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq-reponse{color:var(--encre-douce);padding-bottom:16px;margin:0}

/* ===== 15. PANNEAU FINAL ==============================================*/
.panneau-final{position:relative;border-radius:var(--r-carte);overflow:hidden;height:520px}
.panneau-final img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.panneau-final-carte{position:absolute;left:40px;bottom:40px;right:40px;z-index:2;background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre-dure);max-width:480px;padding:30px}
@media (max-width:700px){.panneau-final{height:auto;min-height:420px}.panneau-final-carte{left:16px;right:16px;bottom:16px;max-width:none}}

/* ===== 16. PIED DE PAGE ===============================================*/
.pied{background:var(--basalte);color:var(--blanc);padding-top:60px}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)}
.pied-marque .marque{margin-bottom:14px}
.pied-mission{color:rgba(255,255,255,.65);font-size:14px;max-width:32ch}
.pied-titre{font-weight:700;margin-bottom:14px;font-size:14px;letter-spacing:.02em}
.pied-liens{display:flex;flex-direction:column;gap:9px}
.pied-liens a,.pied-liens span{color:rgba(255,255,255,.72);font-size:14px}
.pied-liens a:hover{text-decoration:underline;text-underline-offset:2px}
.pied-bandeau{padding-block:18px;color:rgba(255,255,255,.5);font-size:13px}
.pied-legal{text-align:center;padding:16px;background:rgba(0,0,0,.18);font-size:12px;color:rgba(255,255,255,.55)}
.tampon{font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (max-width:900px){.pied-haut{grid-template-columns:1fr 1fr;gap:28px}}

.barre-mobile{display:none;position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--blanc);border-top:1px solid rgba(30,36,40,.1);padding:8px 6px;justify-content:space-around}
.barre-mobile-item{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600;color:var(--encre-douce);padding:4px 8px}
.barre-mobile-item--accent{color:var(--accent-fonce)}

/* ===== 17. EN-TÊTE D'ARTICLE (ENTETE-titre-sonde-photo-capsule-a-cheval) =*/
.entete-article{background:var(--pierre);padding-block:48px 90px}
.fil-ariane{font-size:13px;color:var(--encre-douce);margin-bottom:14px}
.fil-ariane a:hover{color:var(--accent-fonce)}
.categorie-pastille{display:inline-block;background:var(--blanc);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700;color:var(--accent-fonce);margin-bottom:16px}
.entete-article-grille{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
.entete-article h1{font-size:clamp(40px,2.4vw + 20px,64px)}
.ligne-fil-photo{position:relative}
.fil-sonde-court{width:2px;height:40px;background:var(--basalte);margin:0 0 0 6px}
.fil-sonde-court::after{content:"";display:block;width:9px;height:16px;background:var(--accent);border-radius:999px;margin-top:-2px;margin-left:-3.5px}
.entete-article-photo{border-radius:var(--r-carte);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--ombre)}
.entete-article-photo img{width:100%;height:100%;object-fit:cover}
.capsule-auteur{position:relative;margin-top:-34px;margin-left:24px;display:inline-flex;align-items:center;gap:12px;background:var(--blanc);border-radius:999px;box-shadow:var(--ombre);padding:8px 18px 8px 8px;z-index:2}
.capsule-auteur .monogramme{width:40px;height:40px}
.capsule-auteur-texte{font-size:13px;color:var(--encre-douce)}
.capsule-auteur-texte a{font-weight:700;color:var(--encre)}
@media (max-width:980px){.entete-article-grille{grid-template-columns:1fr}}

/* ===== 18. EN-TÊTE DE RUBRIQUE (RUBRIQUE-bandeau-pierre-disque-photo-compte) */
.entete-rubrique{background:var(--pierre);padding-block:56px 0;position:relative}
.entete-rubrique-grille{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:center;padding-bottom:60px}
.entete-rubrique h1{font-size:clamp(34px,2vw+18px,48px)}
.entete-rubrique-disque{position:relative;width:300px;height:300px;border-radius:999px;overflow:hidden;box-shadow:var(--ombre-dure);margin-bottom:-90px;justify-self:end}
.entete-rubrique-disque img{width:100%;height:100%;object-fit:cover}
.pastille-compte{display:inline-flex;align-items:center;background:var(--blanc);border-radius:999px;padding:7px 16px;font-size:13px;font-weight:700;color:var(--accent-fonce);margin-top:14px}
@media (max-width:860px){.entete-rubrique-grille{grid-template-columns:1fr}.entete-rubrique-disque{width:200px;height:200px;margin-bottom:-50px;justify-self:center}}

/* ===== 19. CORPS D'ARTICLE, COLONNE LATÉRALE, SOMMAIRE, AUTEUR ======= */
.article-mise-en-page{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;margin-top:-54px}
.colonne-lecture{background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre);padding:44px;position:relative;z-index:1}
.corps-article{font-size:18px;line-height:1.75;max-width:70ch}
.corps-article h2{margin-top:1.6em;display:flex;gap:10px;align-items:baseline}
.num-h2{font-family:var(--f-titre);font-weight:800;color:var(--accent-pale);-webkit-text-stroke:1px var(--accent-fonce);font-size:.7em}
.corps-article table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;white-space:nowrap}
.corps-article table th,.corps-article table td{border:1px solid rgba(30,36,40,.12);padding:10px 14px;text-align:left}
.corps-article figure{margin:1.6em 0}
.corps-article img{border-radius:16px}

.colonne-laterale{position:sticky;top:96px;display:flex;flex-direction:column;gap:20px}
.sidebar-bloc{background:var(--pierre);border-radius:18px;padding:22px}
.bloc-titre{font-weight:700;font-size:14px;margin:0 0 12px}
.sommaire{display:flex;flex-direction:column;gap:9px}
.sommaire a{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--encre-douce)}
.sommaire a:hover{color:var(--accent-fonce)}
.capsule-etage-puce{width:7px;height:7px;border-radius:999px;background:var(--accent);flex:none}
.sidebar-mini-form .formulaire{box-shadow:none;padding:0}

.bloc-auteur{display:flex;gap:18px;align-items:flex-start;background:var(--pierre);border-radius:var(--r-carte);padding:26px;margin-top:40px}
.bloc-auteur .monogramme{width:64px;height:64px;flex:none}
.specialite{display:inline-block;font-size:12px;font-weight:700;color:var(--accent-fonce);background:var(--accent-pale);border-radius:999px;padding:3px 10px;margin-bottom:6px}
.bloc-auteur h4{margin:0 0 6px;font-size:19px}
.bloc-auteur p{color:var(--encre-douce);font-size:14px;margin-bottom:8px}
.voir-tout{font-weight:700;font-size:13px;color:var(--accent-fonce)}

.a-lire-ensuite{margin-top:48px}
.a-lire-ensuite h3{margin-bottom:20px}

.monogramme-disque{fill:var(--pierre);stroke:var(--basalte);stroke-width:1.5}
.monogramme-fil{stroke:var(--basalte);stroke-width:2}
.monogramme-perle{fill:var(--accent)}
.monogramme-texte{font-family:var(--f-titre);font-weight:800;font-size:22px;fill:var(--basalte)}
.bloc-auteur .monogramme-disque,.capsule-auteur .monogramme-disque{fill:var(--blanc)}

@media (max-width:980px){
  .article-mise-en-page{grid-template-columns:1fr;margin-top:0}
  .colonne-laterale{position:static}
  .colonne-lecture{padding:28px}
}

/* ===== 20. PAGE VILLE ==================================================*/
.ville-entete{padding-block:46px}
.ville-entete-grille{display:grid;grid-template-columns:44% 56%;gap:40px;align-items:start}
.ville-entete-titre h1{max-width:14ch}
.ville-entete-photo{position:relative;border-radius:var(--r-carte);overflow:hidden;height:420px;box-shadow:var(--ombre)}
.ville-entete-photo img{width:100%;height:100%;object-fit:cover}
.pastille-compte--photo{position:absolute;bottom:-14px;left:20px}
.ville-entete-photo-bloc .tirage-legende{margin-top:14px}
@media (max-width:860px){
  .ville-entete-grille{grid-template-columns:1fr;gap:20px}
  .ville-entete-photo-bloc{order:-1}
  .ville-entete-photo{height:auto;aspect-ratio:4/3}
}
.ville-mise-en-page{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start}
.ville-colonne-form{position:sticky;top:96px}
.ville-blocs{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
.communes-voisines-grille{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.commune-voisine-carte{display:flex;align-items:center;gap:10px;background:var(--pierre);border-radius:999px;padding:6px 14px 6px 6px}
.commune-voisine-carte img{width:34px;height:34px;border-radius:999px;object-fit:cover}
.commune-voisine-carte span{font-size:13px;font-weight:600}
.guides-lies-liste{display:flex;flex-direction:column;gap:10px}
.guides-lies-liste a{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--encre)}
.guides-lies-liste a:hover{color:var(--accent-fonce)}
.guides-lies-photo{flex:none;width:52px;height:40px;border-radius:8px;overflow:hidden;background:var(--pierre)}
.guides-lies-photo img{width:100%;height:100%;object-fit:cover}
.carte-zone-bloc--mini{padding:10px}
@media (max-width:980px){.ville-mise-en-page{grid-template-columns:1fr}.ville-colonne-form{position:static}.ville-blocs{grid-template-columns:1fr}}

/* ===== 21. CONTACT, QUI SOMMES-NOUS, AUTEUR ============================*/
.contact-mise-en-page{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.contact-disque{position:absolute;top:50%;right:140px;transform:translateY(-50%);width:360px;height:360px;border-radius:999px;overflow:hidden;z-index:0;opacity:.85}
.contact-disque img{width:100%;height:100%;object-fit:cover}
.sequence-apres-envoi{display:flex;flex-direction:column;gap:12px;font-size:14px;color:var(--encre-douce)}
.sequence-apres-envoi li{display:flex;gap:10px;align-items:flex-start}
.sequence-apres-envoi span{flex:none;width:22px;height:22px;border-radius:999px;background:var(--accent-pale);color:var(--accent-fonce);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center}
@media (max-width:980px){.contact-mise-en-page{grid-template-columns:1fr}.contact-disque{display:none}}

.trois-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trois-cartes>div{background:var(--pierre);border-radius:var(--r-tuile);padding:26px}
.grille-auteurs{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:720px;margin-inline:auto}
.carte-auteur{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;background:var(--blanc);border-radius:var(--r-carte);box-shadow:var(--ombre);padding:30px 20px}
.carte-auteur .monogramme{width:76px;height:76px}
@media (max-width:760px){.trois-cartes,.grille-auteurs{grid-template-columns:1fr}}

.auteur-entete{display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:center;padding-block:40px}
.auteur-entete .monogramme{width:140px;height:140px}
@media (max-width:600px){.auteur-entete{grid-template-columns:1fr;text-align:center}.auteur-entete .monogramme{margin-inline:auto}}

/* ===== 22. PAGINATION / DIVERS ========================================*/
.pagination-rubrique{display:flex;justify-content:center;gap:10px;margin-top:40px}
.pagination-rubrique .page-numbers{display:none}
.pagination-rubrique .prev,.pagination-rubrique .next{display:inline-flex;padding:10px 18px;border-radius:999px;border:1.5px solid rgba(30,36,40,.16);font-weight:600;font-size:14px}
.relance-rubrique{margin-block:40px;border-radius:var(--r-carte)}
.cta-riche{background:var(--accent-pale);border-radius:var(--r-tuile);padding:28px;margin:2em 0;text-align:center}
.bloc-sources{background:var(--pierre);border-radius:12px;padding:16px 20px;margin-top:2em;font-size:13px}
.bloc-sources ol{padding-left:18px;color:var(--encre-douce)}

/* ===== 23. RESPONSIVE GLOBAL =========================================*/
@media (max-width:980px){
  .entete-cta .nav-principale{display:none}
  .nav-principale{display:none}
  .nav-toggle{display:block}
}
@media (max-width:700px){
  body{font-size:17px}
  .bande{padding-block:52px}
  .barre-mobile{display:flex}
  .pied{padding-bottom:70px}
}

/* ===== 24. ACCESSIBILITÉ MOUVEMENT ====================================*/
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .hero-disque,.fil-sonde-hero,.carte-formulaire-flottante{opacity:1!important;transform:none!important}
}