/* ============================================================
   risque-habitat.fr : direction "Signalétique prévention"
   Angles francs, bordures solides, jaune signal en accent, gros chiffres.
   Pas d'ombres floues génériques. Noms de classes métier (rh-).
   ============================================================ */
:root{
  /* Le site n'a qu'une palette claire, assumée. Le déclarer empêche Chrome Android
     et Samsung Internet d'inverser eux-mêmes les couleurs en thème sombre forcé,
     ce qui détruit les jauges et les aplats de sévérité. */
  color-scheme:light;
  --nuit:#0f1f38; --nuit-2:#1c3052; --encre:#15212e;
  --fond:#f3f4f2; --surface:#ffffff; --voile:#e9ebe6;
  --signal:#f4b41a; --signal-d:#d9990a;
  --rouge:#d63d2e; --beton:#5b6675; --ligne:#d7dbd5; --ligne-2:#c2c8bd;
  --ink:#15212e; --ink-2:#46505e; --ink-3:#666f7f;
  /* échelle de sévérité */
  --niv-faible:#238045; --niv-present:#3a6ea5; --niv-modere:#b64d15; --niv-fort:#c02f22;
  --rayon:6px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.rh-accroche-chapo,.rh-chapo,.rh-intro,.rh-risque-desc{overflow-wrap:break-word}
.contenant{max-width:1080px;margin:0 auto;padding:0 22px}
a{color:var(--nuit);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
h1,h2,h3{font-family:'Schibsted Grotesk','Inter',sans-serif;color:var(--encre);line-height:1.1;letter-spacing:-.01em;overflow-wrap:break-word}
img{max-width:100%;height:auto}

/* lien d'évitement */
.rh-skip{position:absolute;left:-9999px}
.rh-skip:focus{left:12px;top:12px;z-index:100;background:var(--signal);color:var(--nuit);padding:9px 15px;border-radius:var(--rayon);font-weight:700}

/* ---- En-tête ---- */
.rh-tete{background:var(--nuit);position:sticky;top:0;z-index:40;border-bottom:3px solid var(--signal)}
.rh-bar{display:flex;align-items:center;gap:20px;min-height:64px}
.rh-logo{display:flex;align-items:center;gap:11px}
.rh-logo-img{height:34px;width:auto;display:block}
.rh-pied-logo{height:40px;width:auto;display:block;margin-bottom:6px}
.rh-logo-mot{font-family:'Schibsted Grotesk';font-weight:800;font-size:1.32rem;color:#fff;letter-spacing:-.02em}
.rh-logo-mot span{color:var(--signal)}
.rh-burger{display:none;margin-left:auto;background:transparent;border:1px solid #3a4a66;color:#fff;font-size:1.2rem;padding:5px 12px;border-radius:var(--rayon);cursor:pointer}
.rh-nav{display:flex;gap:6px;margin-left:auto}
.rh-nav a{color:#cdd6e4;font-weight:600;font-size:.95rem;padding:8px 13px;border-radius:var(--rayon)}
.rh-nav a:hover{background:var(--nuit-2);color:#fff;text-decoration:none}
.rh-rech{display:flex;align-items:center;gap:7px;background:var(--nuit-2);border:1px solid #33476b;border-radius:var(--rayon);padding:0 12px}
.rh-rech-ic{color:var(--signal);font-size:1.05rem}
.rh-rech input{background:transparent;border:0;color:#fff;font:inherit;font-size:.9rem;padding:9px 2px;min-width:150px;outline:none}
.rh-rech input::placeholder{color:#95a1b4}
.rh-cta-tete{background:var(--signal);color:var(--nuit);font-family:'Schibsted Grotesk';font-weight:800;font-size:.9rem;padding:9px 17px;border-radius:var(--rayon);white-space:nowrap}
.rh-cta-tete:hover{background:var(--signal-d);text-decoration:none}

/* ---- Fil d'Ariane ---- */
.rh-fil{background:var(--surface);border-bottom:1px solid var(--ligne)}
.rh-fil ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45em;margin:0;padding:11px 0;font-size:.82rem;color:var(--ink-3)}
.rh-fil li+li::before{content:"›";margin-right:.45em;color:var(--ligne-2)}

/* ---- Trame article ---- */
.rh-fiche{padding:34px 0 60px}
.rh-tete-fiche{margin-bottom:24px}
.rh-kicker{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:800;color:var(--nuit);background:var(--signal);padding:5px 12px;border-radius:3px;margin:0 0 16px}
h1{font-size:2.7rem;font-weight:800;margin:0 0 14px}
/* Pas de max-width sur les blocs de texte : ils doivent finir sur la même
   verticale que le placard, les cartes et les H2. Le conteneur borne déjà. */
.rh-chapo{font-size:1.16rem;color:var(--ink-2);margin:0}
.rh-chapo strong{color:var(--encre)}

/* ---- Placard de synthèse (bandeau signal) ---- */
.rh-placard{background:var(--nuit);color:#fff;border-radius:var(--rayon);padding:0;overflow:hidden;margin:8px 0 30px}
.rh-placard-rayures{height:8px;background:repeating-linear-gradient(45deg,var(--signal) 0 18px,var(--nuit) 18px 36px)}
.rh-placard-corps{display:flex;align-items:center;gap:26px;padding:22px 26px;flex-wrap:wrap}
.rh-placard-chiffre{font-family:'Schibsted Grotesk';font-weight:900;font-size:3.5rem;line-height:.9;color:var(--signal)}
.rh-placard-chiffre small{display:block;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#aeb9cc;margin-top:6px}
.rh-placard-txt{flex:1;min-width:240px;font-size:1.05rem}
.rh-placard-txt b{color:var(--signal)}

/* ---- Prose pilotée par la donnée ---- */
.rh-prose{margin:26px 0 4px}
.rh-prose p{margin:0 0 14px;color:var(--ink-2);font-size:1.05rem}
.rh-prose strong{color:var(--encre);font-weight:700}
.rh-prose sup{font-size:.68em}

/* ---- Sections ---- */
.rh-section{margin:38px 0}
.rh-section>h2{font-size:1.5rem;font-weight:800;margin:0 0 6px;display:flex;align-items:center;gap:11px}
.rh-section>h2::before{content:"";width:14px;height:14px;background:var(--signal);clip-path:polygon(50% 0,100% 100%,0 100%)}
.rh-intro{color:var(--ink-2);margin:0 0 18px}

/* ---- Tableau de bord des risques ---- */
.rh-dashboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:14px}
.rh-risque{background:var(--surface);border:1px solid var(--ligne);border-left:5px solid var(--beton);border-radius:var(--rayon);padding:16px 18px;display:flex;gap:14px;align-items:flex-start}
.rh-risque.niv-faible{border-left-color:var(--niv-faible)}
.rh-risque.niv-present{border-left-color:var(--niv-present)}
.rh-risque.niv-modere{border-left-color:var(--niv-modere)}
.rh-risque.niv-fort{border-left-color:var(--niv-fort)}
.rh-picto-cadre{flex:none;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--nuit);border-radius:var(--rayon);color:var(--signal)}
.rh-picto{width:30px;height:30px}
.rh-risque-nom{font-family:'Schibsted Grotesk';font-weight:700;font-size:1.04rem;margin:0 0 3px;color:var(--encre)}
.rh-risque-desc{font-size:.82rem;color:var(--ink-3);line-height:1.4;margin:0 0 8px}
.rh-niveau{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:3px 9px;border-radius:3px;color:#fff}
.niv-faible .rh-niveau{background:var(--niv-faible)}
.niv-present .rh-niveau{background:var(--niv-present)}
.niv-modere .rh-niveau{background:var(--niv-modere)}
.niv-fort .rh-niveau{background:var(--niv-fort)}

/* ---- Visualisations (données par commune) ---- */
.rh-viz{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.rh-viz-bloc{background:var(--surface);border:1px solid var(--ligne);border-top:4px solid var(--nuit);border-radius:var(--rayon);padding:18px 20px}
.rh-viz-bloc h3{font-size:1.02rem;margin:0 0 12px}
.rh-viz-leg{font-size:.8rem;color:var(--ink-3);margin:12px 0 0;line-height:1.45}
.rh-histo{width:100%;height:auto;display:block}
.rh-histo-val{font-family:'Schibsted Grotesk';font-weight:800;font-size:15px;fill:var(--encre)}
.rh-histo-lab{font-family:'Inter';font-size:12px;fill:var(--ink-3)}
.rh-compar{display:grid;gap:14px;margin-top:4px}
.rh-compar-row{display:grid;grid-template-columns:1fr auto;grid-template-areas:'lab lab' 'rail val';column-gap:12px;row-gap:5px;align-items:center}
.rh-compar-lab{grid-area:lab;font-size:.84rem;font-weight:600;color:var(--ink-2)}
.rh-compar-rail{grid-area:rail;height:16px;background:#eceee9;border-radius:var(--rayon);overflow:hidden}
.rh-compar-fill{display:block;height:100%;border-radius:var(--rayon);min-width:6px}
.rh-compar-val{grid-area:val;font-family:'Schibsted Grotesk';font-weight:800;font-size:.95rem;color:var(--encre)}
.rh-radon{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rh-radon-cell{border:1px solid var(--ligne);border-radius:var(--rayon);padding:14px 6px;text-align:center;color:var(--ink-3)}
.rh-radon-cell b{display:block;font-family:'Schibsted Grotesk';font-weight:800;font-size:1.4rem;line-height:1}
.rh-radon-cell span{font-size:.74rem;display:block;margin-top:4px}
.rh-radon-cell.on{border-color:transparent;box-shadow:0 0 0 2px var(--nuit) inset}
.rh-viz-large{grid-column:1/-1;margin-bottom:16px}
/* Donut */
.rh-donut{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rh-donut-svg{width:120px;height:120px;flex:none}
.rh-donut-tot{font-family:'Schibsted Grotesk';font-weight:800;font-size:24px;fill:var(--encre)}
.rh-donut-lab{font-size:11px;fill:var(--ink-3)}
.rh-donut-leg{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.86rem}
.rh-donut-leg li{display:flex;align-items:center;gap:8px}
.rh-donut-leg b{margin-left:auto;font-family:'Schibsted Grotesk'}
.rh-pastille{width:12px;height:12px;border-radius:3px;flex:none}
/* Frise chronologique */
.rh-timeline-svg{width:100%;height:auto;display:block;margin-top:4px}
.rh-tl-lab{font-family:'Inter';font-size:12px;fill:var(--ink-3)}
.rh-tl-legende{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0}
.rh-pastille-leg{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--ink-2)}
.rh-pastille-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
/* Carte contour */
.rh-carte-svg{width:100%;max-width:240px;height:auto;display:block;margin:0 auto}
/* Jauge de rang */
.rh-rang{margin-top:4px}
.rh-rang-track{position:relative;height:12px;border-radius:var(--rayon);background:linear-gradient(90deg,#d63d2e,#f4b41a,#8fc99a)}
.rh-rang-mark{position:absolute;top:-4px;width:6px;height:20px;background:var(--nuit);border:2px solid #fff;border-radius:3px;transform:translateX(-50%)}
.rh-rang-ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--ink-3);margin-top:6px}
.rh-rang-txt{margin:10px 0 0;font-size:.92rem}
.rh-rang-txt strong{font-family:'Schibsted Grotesk';font-size:1.1rem;color:var(--encre)}

/* ---- Focus (sécheresse/argiles) ---- */
.rh-focus{background:var(--surface);border:1px solid var(--ligne);border-top:4px solid var(--signal);border-radius:var(--rayon);padding:24px 26px}
.rh-focus h2{margin-top:0}

.rh-focus-cta{margin:18px 0 0;font-size:1rem;color:var(--ink-2)}
.rh-lien-guide{display:inline-block;margin-top:8px;font-family:'Schibsted Grotesk';font-weight:700;color:var(--nuit);border-bottom:3px solid var(--signal);padding-bottom:1px}
.rh-lien-guide:hover{text-decoration:none;color:var(--signal-d)}

/* ---- Frise chronologique ---- */
.rh-frise{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.rh-frise li{display:flex;align-items:center;gap:7px;background:var(--fond);border:1px solid var(--ligne);border-radius:var(--rayon);padding:6px 12px;font-weight:700;font-family:'Schibsted Grotesk';color:var(--nuit)}
.rh-frise-pt{width:9px;height:9px;background:var(--rouge);border-radius:50%}

/* ---- Étapes (indemnisation, que faire) ---- */
.rh-etapes{list-style:none;counter-reset:e;margin:18px 0 0;padding:0;display:grid;gap:12px}
.rh-etapes li{counter-increment:e;position:relative;padding:14px 16px 14px 56px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon)}
.rh-etapes li::before{content:counter(e);position:absolute;left:14px;top:13px;width:30px;height:30px;background:var(--nuit);color:var(--signal);font-family:'Schibsted Grotesk';font-weight:800;border-radius:var(--rayon);display:flex;align-items:center;justify-content:center}
.rh-etapes b{color:var(--encre)}

/* ---- Encadré statut CatNat ---- */
.rh-statut{display:flex;align-items:center;gap:14px;background:var(--nuit);color:#fff;border-radius:var(--rayon);padding:16px 20px;margin:18px 0;flex-wrap:wrap}
.rh-statut .rh-coche{flex:none;width:34px;height:34px;background:var(--niv-faible);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800}
.rh-statut.non .rh-coche{background:var(--beton)}

/* ---- CTA lead ---- */
.rh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;background:var(--signal);border-radius:var(--rayon);padding:20px 24px;margin:22px 0}
.rh-cta p{margin:0;flex:1;min-width:240px;font-weight:600;color:var(--nuit)}
.rh-btn{display:inline-block;background:var(--nuit);color:#fff;font-family:'Schibsted Grotesk';font-weight:700;padding:13px 24px;border-radius:var(--rayon);border:0;cursor:pointer}
.rh-btn:hover{background:var(--nuit-2);text-decoration:none}

/* ---- Note source ---- */
.rh-note{font-size:.85rem;color:var(--ink-3);background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--beton);border-radius:var(--rayon);padding:13px 16px;margin-top:26px}

/* ---- Accroche (accueil) ---- */
.rh-accroche{background:var(--nuit);color:#fff;border-bottom:3px solid var(--signal);padding:56px 0}
.rh-accroche .rh-kicker{background:var(--signal);color:var(--nuit)}
.rh-accroche h1{color:#fff;font-size:2.9rem;max-width:18ch}
.rh-accroche-chapo{font-size:1.18rem;color:#c9d3e2;max-width:60ch;margin:14px 0 26px}
.rh-accroche-chapo strong{color:#fff}
.rh-accroche-rech{display:flex;gap:0;max-width:560px;border:2px solid var(--signal);border-radius:var(--rayon);overflow:hidden;background:#fff}
.rh-accroche-rech input{flex:1;min-width:0;border:0;padding:15px 18px;font:inherit;font-size:1.02rem;color:var(--ink);outline:none}
.rh-accroche-rech button{border:0;background:var(--signal);color:var(--nuit);font-family:'Schibsted Grotesk';font-weight:800;font-size:1rem;padding:0 26px;cursor:pointer}
.rh-accroche-rech button:hover{background:var(--signal-d)}
.rh-rech-page{border-color:var(--nuit);margin-top:8px}
.rh-rech-page button{background:var(--nuit);color:#fff}

/* ---- Classement ---- */
.rh-classement{list-style:none;counter-reset:r;margin:0;padding:0;display:grid;gap:8px}
.rh-classement li{counter-increment:r;display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--ligne);border-radius:var(--rayon);padding:11px 16px 11px 50px;position:relative}
.rh-classement li::before{content:counter(r);position:absolute;left:12px;width:26px;height:26px;background:var(--nuit);color:var(--signal);font-family:'Schibsted Grotesk';font-weight:800;font-size:.82rem;border-radius:var(--rayon);display:flex;align-items:center;justify-content:center}
.rh-classement a{font-weight:700;color:var(--nuit)}
.rh-classement-val{margin-left:auto;font-size:.86rem;color:var(--ink-3)}
.rh-classement-val b{color:var(--encre);font-family:'Schibsted Grotesk'}

/* ---- Colonnes de communes ---- */
.rh-communes-cols{list-style:none;margin:0;padding:0;columns:4;column-gap:24px}
.rh-communes-cols li{break-inside:avoid;padding:5px 0;border-bottom:1px solid var(--ligne);font-size:.92rem;display:flex;justify-content:space-between;gap:8px}
@media(max-width:860px){.rh-communes-cols{columns:2}}
/* Deux colonnes jusqu'en bas : la liste d'un département fait 300 à 900 entrées,
   une colonne unique doublerait la hauteur de page sur mobile. */
@media(max-width:480px){.rh-communes-cols{columns:2;column-gap:14px;font-size:.88rem}}
/* Au doigt, une ligne de liste doit rester attrapable : 24 px de haut ne suffisent
   pas. C'est le lien lui-même qui doit faire la hauteur, pas seulement le <li>. */
@media(pointer:coarse){
  .rh-communes-cols li{padding:0;align-items:stretch}
  .rh-communes-cols li a{display:flex;align-items:center;flex:1;min-height:44px}
}

/* ---- Article / prose longue (colonne de lecture) ----
   La colonne étroite est obtenue en resserrant le CONTENEUR, pas en bridant les
   blocs un par un : sinon le titre reste large et le texte s'arrête 270 px avant,
   ce qui donne une page bancale. Ici tout partage le même bord gauche et le même
   bord droit. Les pages silo (/risque/) gardent la pleine largeur : elles mêlent
   de la prose et des blocs de données qui, eux, occupent tout le conteneur. */
.p-article main .contenant,.p-statique main .contenant{max-width:804px}
.p-article .rh-tete-fiche,.p-statique .rh-tete-fiche{text-align:center}
.rh-article-corps{margin:0;font-size:1.08rem}
.rh-article-media{margin:0 0 26px}
.rh-article-media img{width:100%;border-radius:var(--rayon);display:block}
.rh-article-media figcaption{font-size:.82rem;color:var(--ink-3);margin-top:7px;text-align:center}
.rh-article-corps figure{margin:22px 0}
.rh-article-corps figure img{width:100%;border-radius:var(--rayon);display:block}
.rh-article-corps h2{font-size:1.55rem;margin:34px 0 12px}
.rh-article-corps h3{font-size:1.2rem;margin:26px 0 8px}
.rh-article-corps p{margin:0 0 16px}
.rh-article-corps ul,.rh-article-corps ol{margin:0 0 16px;padding-left:22px}
.rh-article-corps li{margin:6px 0}
.rh-article-corps a{color:var(--nuit);text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px;font-weight:600}
.rh-article-corps strong{color:var(--encre)}
.rh-article-meta{color:var(--ink-3);font-size:.88rem;margin:6px 0 0}
.rh-table-wrap{overflow-x:auto;margin:0 0 18px}
.rh-article-corps table{border-collapse:collapse;width:100%;font-size:.95rem}
.rh-article-corps th,.rh-article-corps td{border:1px solid var(--ligne);padding:9px 12px;text-align:left}
.rh-article-corps thead th{background:var(--nuit);color:#fff;font-family:'Schibsted Grotesk'}

/* ---- Formulaire ---- */
.rh-form{display:grid;gap:14px;max-width:520px}
.rh-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.92rem}
.rh-form input,.rh-form textarea{font:inherit;padding:11px 13px;border:1px solid var(--ligne-2);border-radius:var(--rayon);background:#fff}
.rh-form input:focus,.rh-form textarea:focus{outline:none;border-color:var(--nuit);box-shadow:0 0 0 3px rgba(15,31,56,.12)}
.rh-form-ok{background:#e7f6ec;border:1px solid #b6e0c4;color:#1e7a43;border-radius:var(--rayon);padding:13px 16px}
.rh-form-err{background:#fdeceb;border:1px solid #f3b9b3;color:#9a2a1c;border-radius:var(--rayon);padding:12px 16px 12px 30px;margin:0 0 14px}

/* ---- Pied ---- */
.rh-pied{background:var(--nuit);color:#c4cddb;margin-top:50px;border-top:3px solid var(--signal)}
.rh-pied-grille{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding:40px 0 26px}
.rh-pied-mot{font-size:1.3rem;color:#fff}
.rh-pied-edito p{font-size:.92rem;line-height:1.6;margin:12px 0 0;max-width:42ch}
.rh-pied-col h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--signal);margin:0 0 12px}
.rh-pied-col a{display:block;color:#c4cddb;padding:5px 0;font-size:.92rem}
.rh-pied-col a:hover{color:#fff}
.rh-colophon{border-top:1px solid #2a3c5a;font-size:.8rem;color:#8b97ab}
.rh-colophon .contenant{padding-top:16px;padding-bottom:22px}
.rh-colophon p{margin:5px 0}

@media(max-width:860px){
  .rh-pied-grille{grid-template-columns:1fr 1fr}
  .rh-pied-edito{grid-column:1/-1}
}
@media(max-width:680px){
  h1{font-size:2.05rem}
  .rh-accroche h1{font-size:2.1rem}
  .rh-nav{display:none}
  .rh-nav.rh-nav-ouvert{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--nuit);border-top:1px solid #2a3c5a;border-bottom:3px solid var(--signal);padding:10px 22px;gap:2px}
  .rh-burger{display:block}
  .rh-rech{display:none}
  .rh-cta-tete{display:none}
  .rh-placard-chiffre{font-size:2.7rem}
  .rh-bar{flex-wrap:wrap}
  .rh-accroche{padding:40px 0}
  .rh-accroche-rech{flex-direction:column;border:0;background:transparent;gap:10px}
  .rh-accroche-rech input{border:2px solid var(--signal);border-radius:var(--rayon);width:100%}
  .rh-accroche-rech button{border-radius:var(--rayon);padding:14px 26px;width:100%}
}

/* ============================================================
   ACCUEIL (refonte maquette) : héro illustré, atouts, stats,
   carrousel départements, guides en photos, CTA final.
   ============================================================ */
.rh-accent{color:var(--nuit);background:linear-gradient(transparent 62%,rgba(244,180,26,.55) 62%)}
.rh-hero .rh-accent,.rh-stats .rh-accent,.rh-cta-final .rh-accent{color:var(--signal);background:none}

/* ---- Héro ---- */
.rh-hero{position:relative;overflow:hidden;background:var(--nuit);color:#fff;border-bottom:3px solid var(--signal);padding:46px 0 60px}
.rh-hero::before{content:"";position:absolute;inset:0;background:url("/img/stars.svg") repeat;background-size:460px;opacity:.9;pointer-events:none}
.rh-hero::after{content:"";position:absolute;top:-26%;right:-8%;width:64%;height:128%;background:radial-gradient(ellipse at center,rgba(58,110,165,.34),transparent 62%);pointer-events:none}
.rh-hero-grille{position:relative;z-index:2}
.rh-hero-txt{position:relative;z-index:3;max-width:468px}
.rh-hero .rh-kicker{background:var(--signal);color:var(--nuit)}
.rh-hero h1{color:#fff;font-size:3rem;line-height:1.08;margin:0 0 16px;max-width:15ch}
.rh-hero-chapo{font-size:1.15rem;color:#c9d3e2;max-width:42ch;margin:0 0 24px}
.rh-hero-chapo strong{color:#fff}
.rh-hero-rech{display:flex;align-items:center;background:#fff;border-radius:11px;padding:6px;max-width:560px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.rh-hero-rech-ic{flex:none;display:flex;align-items:center;color:var(--beton);margin:0 4px 0 10px}
.rh-hero-rech-ic svg{width:22px;height:22px}
.rh-hero-rech input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.02rem;color:var(--ink);padding:12px 6px;outline:none}
.rh-hero-rech button{flex:none;border:0;background:var(--signal);color:var(--nuit);font-family:'Schibsted Grotesk';font-weight:800;font-size:1rem;padding:13px 24px;border-radius:8px;cursor:pointer}
.rh-hero-rech button:hover{background:var(--signal-d)}
.rh-hero-trust{display:flex;align-items:center;gap:9px;color:#9fb0c8;font-size:.9rem;margin:16px 0 0}
.rh-hero-trust svg{width:18px;height:18px;color:var(--signal)}
.rh-hero-illu{position:absolute;top:0;bottom:0;left:48%;right:0;display:flex;align-items:center;justify-content:flex-end;z-index:1;pointer-events:none}
.rh-hero-illu img{display:block;width:100%;max-width:820px;height:auto}

/* ---- Atouts (4 cartes qui chevauchent le héro) ---- */
.rh-atouts{position:relative;z-index:5;margin-top:-42px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.rh-atout{background:#fff;border:1px solid var(--ligne);border-radius:11px;padding:20px}
.rh-atout-ic{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;background:var(--nuit);color:var(--signal);border-radius:9px;margin-bottom:13px}
.rh-atout-ic svg{width:24px;height:24px}
.rh-atout-nom{font-family:'Schibsted Grotesk';font-weight:700;font-size:1.06rem;color:var(--encre);margin:0 0 5px}
.rh-atout-desc{font-size:.86rem;color:var(--ink-3);line-height:1.48;margin:0}

/* ---- Bandeau statistiques ---- */
.rh-stats{position:relative;overflow:hidden;background:var(--nuit) url("/img/stars.svg") repeat;background-size:460px;border-radius:14px;color:#fff;padding:30px 28px;margin:32px 0}
.rh-stats-titre{text-align:center;font-family:'Schibsted Grotesk';font-weight:800;font-size:1.4rem;margin:0 0 24px}
.rh-stats-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rh-stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.rh-stat-ic{display:flex;align-items:center;justify-content:center;color:var(--signal);margin-bottom:8px}
.rh-stat-ic svg{width:27px;height:27px}
.rh-stat b{font-family:'Schibsted Grotesk';font-weight:900;font-size:2.15rem;line-height:1;color:#fff}
.rh-stat span{font-size:.82rem;color:#aeb9cc;margin-top:5px}

/* ---- Têtes de section (titre + bouton) ---- */
.rh-bloc{margin:34px 0}
.rh-tete-section{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px}
.rh-tete-section h2{font-size:1.62rem;font-weight:800;margin:0;color:var(--encre)}
.rh-btn-ligne{flex:none;border:1.5px solid var(--ligne-2);color:var(--nuit);font-weight:700;font-size:.9rem;padding:9px 18px;border-radius:8px;background:#fff;white-space:nowrap}
.rh-btn-ligne:hover{border-color:var(--nuit);background:var(--nuit);color:#fff;text-decoration:none}

/* ---- Carrousel départements ---- */
.rh-carrousel-zone{position:relative}
.rh-carr-fleche{position:absolute;top:calc(50% - 12px);transform:translateY(-50%);z-index:6;width:42px;height:42px;border-radius:50%;border:1px solid var(--ligne);background:#fff;color:var(--nuit);font-size:1.5rem;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(15,31,56,.16);transition:opacity .15s,background .15s}
.rh-carr-fleche:hover{background:var(--nuit);color:#fff}
.rh-carr-prev{left:-8px}
.rh-carr-next{right:-8px}
.rh-carrousel-zone.au-debut .rh-carr-prev{opacity:0;pointer-events:none}
.rh-carrousel-zone.a-la-fin .rh-carr-next{opacity:0;pointer-events:none}
.rh-carrousel{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;scrollbar-width:thin;scrollbar-color:var(--ligne-2) transparent}
.rh-carrousel::-webkit-scrollbar{height:8px}
.rh-carrousel::-webkit-scrollbar-thumb{background:var(--ligne-2);border-radius:8px}
.rh-dept-carte{position:relative;flex:0 0 212px;height:172px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;scroll-snap-align:start;border:1px solid var(--ligne);transition:transform .18s,box-shadow .18s}
.rh-dept-carte:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,31,56,.22)}
.rh-dept-voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,17,34,.9),rgba(8,17,34,.15) 56%,rgba(8,17,34,.05))}
.rh-dept-info{position:relative;z-index:2;padding:14px 16px;color:#fff}
.rh-dept-nom{display:block;font-family:'Schibsted Grotesk';font-weight:800;font-size:1.12rem;border-bottom:2px solid var(--signal);padding-bottom:4px;width:fit-content}
.rh-dept-nb{display:block;font-size:.82rem;color:#dbe2ee;margin-top:7px}

/* ---- Guides (cartes photo) ---- */
.rh-guides-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rh-guide-carte{position:relative;min-height:236px;border-radius:12px;overflow:hidden;background-size:cover;background-position:center;display:flex;align-items:flex-end;color:#fff;border:1px solid var(--ligne);transition:transform .18s,box-shadow .18s}
.rh-guide-carte:hover{text-decoration:none;transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,31,56,.22)}
.rh-guide-voile{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,17,34,.93),rgba(8,17,34,.55) 45%,rgba(8,17,34,.12))}
.rh-guide-corps{position:relative;z-index:2;padding:18px 20px;display:flex;flex-direction:column}
.rh-guide-titre{font-family:'Schibsted Grotesk';font-weight:800;font-size:1.16rem;line-height:1.22}
.rh-guide-desc{font-size:.87rem;color:#d4dbe7;line-height:1.5;margin:8px 0 12px}
.rh-guide-lien{font-family:'Schibsted Grotesk';font-weight:700;font-size:.92rem;color:#fff}
.rh-guide-lien span{color:var(--signal)}
.rh-guide-carte:hover .rh-guide-lien span{margin-left:3px}

/* ---- CTA final (bandeau recherche) ---- */
.rh-cta-final{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;background:var(--nuit) url("/img/stars.svg") repeat;background-size:460px;border-radius:14px;color:#fff;padding:28px 32px;margin:36px 0}
.rh-cta-final-titre{font-family:'Schibsted Grotesk';font-weight:800;font-size:1.55rem;margin:0}
.rh-cta-final-sous{color:#aeb9cc;margin:7px 0 0;max-width:44ch;font-size:.95rem}
.rh-cta-final-rech{flex:1;min-width:300px;max-width:470px;margin:0}

/* ---- Note transparence ---- */
.rh-note-transparence{color:var(--ink-2);font-size:.95rem;background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--signal);border-radius:8px;padding:16px 18px;line-height:1.6;margin:0}
.rh-note-transparence strong{color:var(--encre)}
.rh-note-transparence a{color:var(--nuit);font-weight:600;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:2px}

/* ---- Harmonisation des autres pages ---- */
/* Survol des cartes-liens (tableaux de bord, listes départements…) */
a.rh-risque{transition:transform .16s,box-shadow .16s,border-color .16s}
a.rh-risque:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,31,56,.1)}
/* Page Guides : grille de cartes photo qui s'adapte */
.rh-guides-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
/* Résultats de recherche : cartes cliquables */
.rh-resultats{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.rh-resultat{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--niv-present);border-radius:var(--rayon);padding:13px 16px;transition:transform .16s,box-shadow .16s}
.rh-resultat:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,31,56,.12)}
.rh-resultat-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rh-resultat-nom{font-family:'Schibsted Grotesk';font-weight:700;font-size:1.04rem;color:var(--encre)}
.rh-resultat-fleche{color:var(--signal-d);font-weight:700}
.rh-resultat-dep{font-size:.82rem;color:var(--ink-3)}
.rh-resultat-tag{align-self:flex-start;margin-top:3px;font-size:.74rem;font-weight:700;color:var(--niv-modere);background:#fbeede;border-radius:3px;padding:2px 8px}

@media(max-width:1080px){
  .rh-hero-txt{max-width:none}
  .rh-hero-chapo{max-width:54ch}
  .rh-hero-illu{position:static;left:auto;right:auto;width:auto;max-width:520px;margin:14px auto 0;display:block}
}
@media(max-width:720px){
  .rh-carr-fleche{display:none}
}
@media(max-width:920px){
  .rh-atouts{grid-template-columns:repeat(2,1fr);margin-top:26px}
  .rh-stats-grille{grid-template-columns:repeat(2,1fr);gap:26px}
  .rh-guides-grille{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .rh-hero h1{font-size:2.15rem}
  .rh-hero-rech{flex-wrap:wrap;padding:10px}
  .rh-hero-rech input{flex:1 1 100%;padding:8px 6px}
  .rh-hero-rech button{flex:1 1 100%;margin-top:8px}
  .rh-atouts{grid-template-columns:1fr}
  .rh-guides-grille{grid-template-columns:1fr}
  .rh-cta-final{padding:24px 22px}
}

/* ---- FAQ (accordéon accessible, schema FAQPage) ---- */
.rh-faq{display:flex;flex-direction:column;gap:10px}
.rh-faq-item{background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--signal);border-radius:var(--rayon);overflow:hidden}
.rh-faq-item summary{cursor:pointer;list-style:none;padding:15px 46px 15px 18px;font-family:'Schibsted Grotesk',sans-serif;font-weight:700;font-size:1.04rem;color:var(--nuit);position:relative}
.rh-faq-item summary::-webkit-details-marker{display:none}
.rh-faq-item summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;color:var(--signal-d);line-height:1}
.rh-faq-item[open] summary::after{content:"\2212"}
.rh-faq-item summary:hover{color:var(--signal-d)}
.rh-faq-rep{padding:0 18px 16px;color:var(--ink-2);line-height:1.62}
.rh-faq-rep p{margin:0}
.rh-faq-rep a{color:var(--nuit);font-weight:600;text-decoration:underline;text-decoration-color:var(--signal);text-underline-offset:3px}

/* ---- Maillage : communes voisines ---- */
.rh-voisins{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:10px}
.rh-voisin{display:flex;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--niv-present);border-radius:var(--rayon);padding:11px 15px;transition:transform .16s,box-shadow .16s}
.rh-voisin:hover{text-decoration:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(15,31,56,.12)}
.rh-voisin-nom{font-family:'Schibsted Grotesk',sans-serif;font-weight:700;color:var(--nuit)}
.rh-voisin-meta{font-size:.8rem;color:var(--ink-3)}

/* ============================================================
   Composants ajoutés : méta de fiche, date de mise à jour,
   barres de classement, encadré d'action, autocomplétion.
   ============================================================ */

/* méta sous le chapô + date des données (balise <time>, lue par Google) */
.rh-sous-meta{margin:12px 0 0;font-size:.85rem;color:var(--ink-3);font-weight:500}
.rh-maj{margin:8px 0 0;font-size:.82rem;color:var(--ink-3)}
.rh-maj time{font-weight:600;color:var(--ink-2)}

/* chiffres clés (page département) */
.rh-chiffres-cles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.rh-cle{background:var(--surface);border:1px solid var(--ligne);border-left:4px solid var(--signal);border-radius:var(--rayon);padding:16px 18px}
.rh-cle b{display:block;font-family:'Schibsted Grotesk','Inter',sans-serif;font-size:2rem;font-weight:800;color:var(--nuit);line-height:1}
.rh-cle span{display:block;margin-top:6px;font-size:.86rem;color:var(--ink-2);line-height:1.4}

/* barres de classement */
.rh-barres{display:flex;flex-direction:column;gap:9px}
.rh-barre-row{display:grid;grid-template-columns:minmax(120px,1.1fr) 3fr auto;align-items:center;gap:12px}
.rh-barre-lab{font-size:.9rem;font-weight:600;color:var(--ink);overflow-wrap:break-word}
.rh-barre-lab a{color:var(--nuit)}
.rh-barre-rail{background:var(--voile);border-radius:3px;height:16px;overflow:hidden}
.rh-barre-fill{display:block;height:100%;background:var(--signal);border-radius:3px}
.rh-barre-val{font-family:'Schibsted Grotesk','Inter',sans-serif;font-weight:800;font-size:.95rem;color:var(--nuit);white-space:nowrap}
.rh-barre-val small{font-weight:500;color:var(--ink-3);font-size:.78em}

/* encadré d'action (état des risques, appel à la recherche) */
.rh-encadre{background:var(--surface);border:1px solid var(--ligne);border-top:4px solid var(--nuit);border-radius:var(--rayon);padding:26px 28px}
.rh-encadre h2{margin-top:0}
.rh-encadre p{color:var(--ink-2)}
.rh-liste-coches{list-style:none;padding:0;margin:16px 0}
.rh-liste-coches li{position:relative;padding-left:28px;margin-bottom:10px;color:var(--ink-2)}
.rh-liste-coches li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2.5px solid var(--niv-faible);border-bottom:2.5px solid var(--niv-faible);transform:rotate(-45deg)}

/* autocomplétion */
.rh-auto-zone{position:relative}
.rh-auto{position:fixed;z-index:120;margin:0;padding:6px;list-style:none;
  background:var(--surface);border:1px solid var(--ligne-2);border-radius:var(--rayon);box-shadow:0 10px 26px rgba(15,31,56,.14);max-height:60vh;overflow:auto}
.rh-auto li{margin:0}
.rh-auto a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;border-radius:4px;color:var(--ink);font-size:.95rem}
.rh-auto a>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rh-auto a:hover{text-decoration:none}
.rh-auto li.actif a,.rh-auto a:focus{background:var(--voile);outline:none}
.rh-auto b{color:var(--nuit);font-weight:800}
.rh-auto em{font-style:normal;font-size:.78rem;color:var(--ink-3);white-space:nowrap}

@media (max-width:640px){
  .rh-barre-row{grid-template-columns:1fr auto;grid-template-areas:"lab val" "rail rail";gap:5px 10px}
  .rh-barre-lab{grid-area:lab}
  .rh-barre-val{grid-area:val}
  .rh-barre-rail{grid-area:rail}
  .rh-encadre{padding:20px 18px}
}

/* ---- Correctifs liés à l'autocomplétion et à la barre de navigation ---- */
/* Le héros doit garder overflow:hidden (sinon le carrousel de départements
   déborde de la page). La liste de suggestions est donc positionnée en fixed,
   ce qui la sort du clipping : ses coordonnées sont calculées en JavaScript. */

/* Avec les entrées Argiles et Radon, « À propos » passait à la ligne */
.rh-nav{gap:2px}
.rh-nav a{padding:8px 10px;white-space:nowrap}
@media (max-width:1180px){
  .rh-nav a{font-size:.9rem;padding:8px 8px}
  .rh-rech input{min-width:110px}
}
@media (max-width:1040px){
  .rh-rech{display:none}
}

/* ---- Cibles tactiles : 44 px minimum sur les liens et boutons autonomes ---- */
.rh-btn-ligne,.rh-lien-guide{min-height:44px;display:inline-flex;align-items:center}
.rh-logo{min-height:44px}
.rh-burger{min-height:44px;min-width:44px}
.rh-faq-item summary{min-height:44px;display:flex;align-items:center}
.rh-auto a{min-height:44px}
@media (max-width:640px){
  .rh-voisin,.rh-resultat{min-height:56px}
  .rh-pied-col a{min-height:44px;display:flex;align-items:center}
  .rh-nav a{min-height:44px;display:flex;align-items:center}
}
/* les champs de recherche sont aussi des cibles tactiles */
.rh-hero-rech input,.rh-accroche-rech input,.rh-rech-page input,.rh-hero-rech button,.rh-accroche-rech button{min-height:44px}
.rh-btn{min-height:44px}
@media (max-width:640px){
  .rh-barre-lab a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---- Alignement des pages éditoriales ----
   Le chapeau était centré et le corps calé à gauche : deux bords gauches
   différents sur la même page. Tout part désormais du même bord. */
.p-article .rh-tete-fiche,.p-statique .rh-tete-fiche{margin-left:0;margin-right:0;text-align:left}
.p-article .rh-tete-fiche .rh-kicker,.p-statique .rh-tete-fiche .rh-kicker{margin-left:0;margin-right:0}
.p-article .rh-chapo,.p-statique .rh-tete-fiche .rh-chapo{margin-left:0;margin-right:0}
.p-article .rh-note,.p-statique .rh-note{margin-left:0;margin-right:0}
.rh-article-media{margin-left:0;margin-right:0}
.rh-article-media figcaption{text-align:left}
