/* logiciel-gestion-des-rh.fr · famille V5-pupitre (2ᵉ passage), habillage « le violet-prune
   humain ». Préfixes rhg- (coque : structure, tokens, header/footer/grille) et dos- (dossier :
   composants ACTIFS : accent, faces et statuts de la fiche, formulaire, badges). Palette OKLCH ->
   sRGB calculée avec le script du parc (cf. Design-Familles/_habillages/logiciel-gestion-des-rh.fr.md
   §2, hue 307). Mode de capture A : le formulaire réel vit DANS le hero (pas de volet latéral).
   Module signature : la fiche collaborateur, une carte à 4 faces (identité & contrat / documents /
   parcours / conformité), dessinée en CSS + icônes SVG maison, jamais une capture d'écran. */

@font-face{font-family:"Author";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/author-400.woff2") format("woff2")}
@font-face{font-family:"Author";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/author-500.woff2") format("woff2")}
@font-face{font-family:"Author";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/author-600.woff2") format("woff2")}
@font-face{font-family:"Author";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/author-700.woff2") format("woff2")}

:root{
  --rhg-ink:#251930;
  --rhg-ink-soft:#62596c;
  --rhg-paper:#fbf9fd;
  --rhg-surface:#f1ecf6;
  --rhg-surface-2:#e3dceb;
  --rhg-on-ink:#fbf9fd;
  --rhg-on-ink-2:#b5adbe;
  --dos-accent:#7d40ad;
  --dos-accent-deep:#58227f;
  --dos-accent-soft:#e6d9f5;
  --dos-line:#d5d0d9;
  --dos-line-strong:#8f8996;
  --dos-field-line:#746c7d;
  --dos-danger:#c53637;
  --r:3px;
  --hdr-h:64px;
  --maxw:1180px;
  --gut:clamp(18px,4vw,44px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--rhg-paper);color:var(--rhg-ink);
  font-family:"Author",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;font-size:17px;line-height:1.6;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto}
a{color:var(--rhg-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:var(--dos-line)}
a:hover{text-decoration-color:var(--dos-accent)}
:focus-visible{outline:3px solid var(--dos-accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.rhg-skip{position:absolute;left:-9999px;top:0;background:var(--rhg-ink);color:var(--rhg-on-ink);
  padding:12px 18px;z-index:99}
.rhg-skip:focus{left:0}

.rhg-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.rhg-narrow{max-width:72ch}

/* ── Typographie : contraste 700/400 dans chaque titre (invariant de graisse §3 habillage) ── */
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.16;letter-spacing:-.005em;font-weight:700;
  font-family:"Author",system-ui,sans-serif}
h1{font-size:clamp(2rem,4.2vw,3rem);max-width:23ch}
h2{font-size:clamp(1.4rem,2.6vw,2rem);max-width:26ch}
h3{font-size:1.05rem;font-weight:600}
b.dos-doux,span.dos-doux{font-weight:400}
p{margin:0 0 1.1em}
.rhg-lede{font-size:clamp(1.02rem,1.35vw,1.15rem);color:var(--rhg-ink-soft);max-width:64ch}
.rhg-bg-ink .rhg-lede,.rhg-bg-ink p{color:var(--rhg-on-ink-2)}
.rhg-bg-ink h2,.rhg-bg-ink h3{color:var(--rhg-on-ink)}
.rhg-kicker{font-weight:600;font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dos-accent-deep);margin:0 0 10px;display:inline-block;position:relative;padding-bottom:8px}
.rhg-kicker::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:32px;background:var(--dos-accent)}
.rhg-bg-ink .rhg-kicker{color:var(--dos-accent-soft)}

/* ── En-tête ─────────────────────────────────────────────────────────── */
.rhg-bandeau{background:var(--rhg-ink);color:var(--rhg-paper);font-size:13.5px;letter-spacing:.01em}
.rhg-bandeau .rhg-wrap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;
  justify-content:space-between;min-height:36px;padding-top:6px;padding-bottom:6px}
.rhg-bandeau a{color:var(--rhg-paper);text-decoration-color:rgba(251,249,253,.4)}
.rhg-bandeau b{font-weight:700}

.rhg-hdr{position:sticky;top:0;z-index:40;background:var(--rhg-paper);border-bottom:1px solid var(--dos-line)}
.rhg-hdr .rhg-wrap{display:flex;align-items:center;gap:14px;min-height:var(--hdr-h);flex-wrap:nowrap}
.rhg-mark{display:flex;flex-direction:column;line-height:1.1;text-decoration:none;flex:0 0 auto}
.rhg-mark b{font-weight:700;font-size:16px;letter-spacing:-.01em}
.rhg-mark span{font-weight:400;font-size:11.5px;color:var(--rhg-ink-soft);letter-spacing:.02em}
.rhg-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:nowrap;white-space:nowrap}
.rhg-nav>ul{display:flex;list-style:none;margin:0;padding:0;gap:2px}
.rhg-nav li{position:relative}
.rhg-nav>ul>li>a,.rhg-nav .rhg-drop>button{
  display:flex;align-items:center;height:42px;font:inherit;font-size:14.5px;font-weight:600;
  color:var(--rhg-ink);background:none;border:0;padding:0 10px;cursor:pointer;text-decoration:none;
  line-height:1.2}
.rhg-nav>ul>li>a:hover,.rhg-nav .rhg-drop>button:hover{background:var(--rhg-surface)}
.rhg-nav .rhg-drop>button::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1.6px solid var(--rhg-ink-soft);border-bottom:1.6px solid var(--rhg-ink-soft);transform:rotate(45deg) translateY(-2px)}
.rhg-nav .rhg-panel{position:absolute;top:100%;left:0;min-width:280px;background:var(--rhg-paper);
  border:1px solid var(--dos-line);border-top:2px solid var(--dos-accent);padding:8px;display:none;border-radius:0 0 var(--r) var(--r)}
.rhg-nav .rhg-drop[data-open="1"] .rhg-panel{display:block}
.rhg-nav .rhg-panel ul{list-style:none;margin:0;padding:0}
.rhg-nav .rhg-panel a{display:block;padding:9px 10px;text-decoration:none;font-size:14.5px;line-height:1.3;border-radius:var(--r)}
.rhg-nav .rhg-panel a small{display:block;color:var(--rhg-ink-soft);font-size:12.5px;font-weight:400;margin-top:2px}
.rhg-nav .rhg-panel a:hover{background:var(--rhg-surface)}
.rhg-burger{display:none;font:inherit;background:none;border:1px solid var(--dos-line);
  padding:9px 12px;margin-left:auto;cursor:pointer;font-weight:600;font-size:14px;border-radius:var(--r)}

/* ── Boutons ─────────────────────────────────────────────────────────── */
.dos-btn{display:inline-block;border:0;cursor:pointer;font:inherit;
  font-weight:700;font-size:15px;letter-spacing:.002em;padding:13px 22px;text-decoration:none;
  background:var(--dos-accent);color:var(--rhg-on-ink);text-align:center;border-radius:var(--r)}
.dos-btn:hover{background:var(--dos-accent-deep);color:var(--rhg-on-ink)}
.dos-btn-ghost{background:transparent;color:var(--rhg-ink);border:1.5px solid var(--rhg-ink)}
.rhg-hero .dos-btn-ghost{color:var(--rhg-ink);border-color:var(--dos-line-strong)}
.dos-btn-ghost:hover{background:var(--rhg-surface)}

/* ── Trait de coupe ──────────────────────────────────────────────────── */
.rhg-coupe{height:1px;border:0;margin:0;background:
  repeating-linear-gradient(to right,var(--dos-line) 0 18px,transparent 18px 26px);position:relative}
.rhg-coupe::after{content:"";position:absolute;top:-4px;left:var(--x,22%);width:2px;height:9px;background:var(--dos-accent)}

/* ── Sections, alternance des fonds ─────────────────────────────────────── */
section{padding:clamp(42px,6vw,74px) 0}
.rhg-bg-surface{background:var(--rhg-surface)}
.rhg-bg-ink{background:var(--rhg-ink);color:var(--rhg-on-ink)}
.rhg-bg-ink a{color:var(--rhg-on-ink);text-decoration-color:rgba(251,249,253,.4)}

/* ── Hero mode A — formulaire réel dans le hero, deux colonnes ─────────── */
.rhg-hero{position:relative;border-bottom:1px solid var(--dos-line);
  background:linear-gradient(160deg,var(--rhg-paper) 0%,var(--rhg-surface) 100%);overflow:hidden}
.rhg-hero .rhg-wrap{padding-top:clamp(26px,4vw,46px);padding-bottom:clamp(24px,3.6vw,40px)}
.rhg-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:clamp(20px,3vw,40px);align-items:start}
.rhg-hero-copy h1{margin-bottom:.4em}
.rhg-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 8px}
.rhg-hero-reassure{font-size:13px;color:var(--rhg-ink-soft);margin:0}
.rhg-hero-reduit .rhg-wrap{padding-top:clamp(20px,3vw,32px);padding-bottom:clamp(18px,2.6vw,26px)}
.rhg-hero-reduit h1{max-width:24ch}
.rhg-hero-editorial{border-bottom:1px solid var(--dos-line);background:var(--rhg-surface)}
.rhg-hero-editorial .rhg-wrap{padding:clamp(30px,4.4vw,52px) var(--gut) clamp(24px,3.4vw,36px)}

/* Carte du formulaire, colonne droite du hero */
.rhg-hero-card{background:var(--rhg-paper);border:1.5px solid var(--dos-line-strong);
  padding:clamp(14px,2vw,20px);border-radius:var(--r)}
.rhg-hero-card h2{font-size:1rem;margin-bottom:.2em}
.rhg-hero-card .rhg-note{margin-bottom:10px}

/* ── Formulaire (unique, mode A : dans le hero de chaque page business) ── */
.rhg-note{font-size:12.6px;color:var(--rhg-ink-soft);margin:0 0 10px}
.rhg-hero-card form>div{margin-bottom:8px}
.rhg-f-row{display:grid;gap:8px;margin-bottom:8px}
.rhg-f-2{grid-template-columns:1fr 1fr;gap:8px}
label{display:block;font-size:12px;font-weight:600;margin-bottom:3px;color:var(--rhg-ink);line-height:1.2}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;font:inherit;font-size:14.5px;padding:9px 11px;border:1px solid var(--dos-field-line);
  background:#fff;color:var(--rhg-ink);border-radius:var(--r)}
textarea{min-height:52px;resize:vertical;line-height:1.35}
input:focus,select:focus,textarea:focus{border-color:var(--dos-accent);outline:2px solid var(--dos-accent-soft)}
.rhg-consent{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--rhg-ink-soft);margin:8px 0}
.rhg-consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--dos-accent-deep)}
.rhg-consent label{font-size:12.5px;font-weight:400;color:var(--rhg-ink-soft);margin:0}
.rhg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rhg-hero-card button.dos-btn{width:100%;padding:11px 20px}
.rhg-rassure{margin:8px 0 0;font-size:12px;color:var(--rhg-ink-soft);line-height:1.4}
.rhg-rassure b{color:var(--rhg-ink)}
.rhg-req{color:var(--dos-accent-deep)}

/* ── La fiche collaborateur (module signature) ───────────────────────────
   Carte à 4 faces (identité & contrat / documents / parcours / conformité), dessinée en CSS +
   icônes SVG maison. 3 états sur data-state : plein (accent, face concernée par CETTE page) ·
   renseignee (accent-soft, second niveau) · estompe (surface-2, non concernée pour ce segment). */
.dos-fiche{margin-top:8px}
.dos-fiche-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dos-face{position:relative;border:1.5px solid var(--dos-line);background:var(--rhg-paper);
  border-radius:0 var(--r) var(--r) var(--r);padding:16px 14px 14px;border-top:3px solid var(--dos-line-strong)}
.dos-face-icon{width:26px;height:26px;margin-bottom:9px;color:var(--rhg-ink-soft)}
.dos-face-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.6}
.dos-face[data-state="plein"]{background:var(--rhg-surface-2);border-color:var(--dos-accent);border-top-color:var(--dos-accent)}
.dos-face[data-state="plein"] .dos-face-icon{color:var(--dos-accent-deep)}
.dos-face[data-state="renseignee"]{border-top-color:var(--dos-accent-soft)}
.dos-face[data-state="renseignee"] .dos-face-icon{color:var(--dos-accent)}
/* .dos-face peint toujours son propre fond clair (paper/surface-2), quelle que soit la section
   qui l'entoure (y compris .rhg-bg-ink) : son texte reste donc TOUJOURS en encre foncée, jamais
   la variante claire réservée au texte posé À MÊME le fond sombre (G46, corrigé 2026-08-20).
   L'état "estompe" (non concernée pour ce segment) se lit par la bordure et l'icône, jamais par
   une opacité posée sur toute la carte : une opacité globale fait dériver le texte vers la
   couleur de la section derrière la carte plutôt que vers son propre fond, et retombe sous le
   seuil de contraste dès que la carte est posée sur une section sombre (G46, re-corrigé
   2026-08-20 après un 1er correctif incomplet). */
.dos-face[data-state="estompe"]{border-top-color:var(--dos-line)}
.dos-face[data-state="estompe"] .dos-face-icon{opacity:.55}
.dos-face h3{font-size:14px;margin-bottom:.3em;color:var(--rhg-ink)}
.dos-face[data-state="estompe"] h3{color:var(--rhg-ink-soft);font-weight:500}
.dos-face p{font-size:12.6px;color:var(--rhg-ink-soft);margin:0}
.dos-face-badge{position:absolute;top:-11px;right:12px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  background:var(--rhg-ink-soft);color:var(--rhg-on-ink);border:2px solid var(--rhg-paper)}
.dos-face[data-state="plein"] .dos-face-badge{background:var(--dos-accent)}
.dos-face[data-state="renseignee"] .dos-face-badge{background:var(--dos-accent-soft);color:var(--dos-accent-deep)}
/* rupture de symétrie n°1 : le badge numéroté de la SEULE face "plein" mord sur le bord
   supérieur de la carte, comme un onglet physique qui dépasse du dossier — jamais deux faces
   actives dans la même rangée (cf. habillage §4). */
.dos-face[data-state="plein"] .dos-face-badge{top:-13px}
.dos-fiche-teaser .dos-fiche-row{grid-template-columns:auto;justify-content:start;max-width:220px}
.dos-fiche-teaser .dos-face{padding:11px 13px 10px}
.dos-fiche-teaser .dos-face-icon{width:20px;height:20px;margin-bottom:5px}
.dos-fiche-teaser .dos-face p{display:none}
.dos-fiche-teaser h3{font-size:12.6px}
.dos-fiche-compact .dos-face p{display:none}
.dos-fiche-compact .dos-face{padding:12px 12px 10px}
.dos-fiche-compact .dos-face-icon{width:20px;height:20px;margin-bottom:5px}
.dos-fiche-compact h3{font-size:12.8px}
.dos-fiche-full{padding:clamp(6px,1vw,14px) 0}
.dos-fiche-reduit .dos-fiche-row{gap:10px}

/* ── Barre de preuve chiffrée (data-bloc="preuve") ──────────────────────
   rupture de symétrie n°2 : le chiffre chevauche légèrement le filet du dessous */
.rhg-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,36px);position:relative}
.rhg-trust>div{padding-top:6px}
.rhg-trust .dos-figure{font-weight:700;font-size:clamp(2.1rem,4vw,2.9rem);color:var(--dos-accent);
  line-height:1;margin:0 0 6px;position:relative;z-index:1}
.rhg-trust .dos-figure-rule{height:2px;background:var(--rhg-ink);margin-top:-14px;margin-bottom:12px;z-index:0;position:relative}
.rhg-bg-ink .rhg-trust .dos-figure-rule{background:var(--rhg-on-ink)}
.rhg-trust h3{font-size:14.5px;margin-bottom:.25em}
.rhg-trust p{font-size:13.5px;color:var(--rhg-ink-soft);margin:0}
.rhg-bg-ink .rhg-trust p{color:var(--rhg-on-ink-2)}

/* ── Encadré « fait / cadre » (légal ou factuel sourcé) ─────────────────── */
.dos-cadre{border:1.5px solid var(--dos-line);border-left:4px solid var(--dos-accent);background:var(--rhg-paper);
  padding:clamp(16px,2vw,22px);margin:0 0 26px;border-radius:0 var(--r) var(--r) 0}
.rhg-bg-ink .dos-cadre{background:rgba(251,249,253,.06);border-color:rgba(251,249,253,.2);border-left-color:var(--dos-accent-soft)}
.rhg-bg-surface .dos-cadre{background:var(--rhg-paper)}
.dos-cadre h3{font-size:12.5px;letter-spacing:.04em;font-weight:700;margin-bottom:.5em;text-transform:uppercase}
.dos-cadre p{margin:0;font-size:15px}
.rhg-bg-ink .dos-cadre p{color:var(--rhg-on-ink-2)}

/* ── Listes à pastille ───────────────────────────────────────────────── */
ul.rhg-rep{list-style:none;padding:0;margin:0 0 1.2em}
ul.rhg-rep li{position:relative;padding-left:24px;margin-bottom:9px}
ul.rhg-rep li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--dos-accent);border-radius:2px}

/* ── Cartes ──────────────────────────────────────────────────────────── */
.rhg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:14px;margin-top:24px}
.rhg-cards a{display:block;border:1px solid var(--dos-line);background:var(--rhg-paper);padding:17px 18px;
  text-decoration:none;border-left:3px solid var(--dos-line);border-radius:0 var(--r) var(--r) 0}
.rhg-cards a:hover{border-left-color:var(--dos-accent);background:#fff}
.rhg-cards strong{display:block;color:var(--rhg-ink);font-weight:700;font-size:15px;margin-bottom:5px}
.rhg-cards span{display:block;color:var(--rhg-ink-soft);font-size:13.4px;line-height:1.45}

/* ── Cas types anonymisés (avant / après) ───────────────────────────────
   rupture de symétrie n°3 : la 2ᵉ carte porte une légère rotation, seule de la rangée */
.dos-cas-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.dos-cas{border:1px solid var(--dos-line);background:var(--rhg-paper);padding:18px;border-radius:var(--r)}
.dos-cas:nth-child(2){transform:rotate(1.5deg)}
.dos-cas .dos-avant,.dos-cas .dos-apres{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:4px}
.dos-cas .dos-avant{color:var(--rhg-ink-soft)}
.dos-cas .dos-apres{color:var(--dos-accent-deep);margin-top:12px}
.dos-cas p{font-size:14px;margin:0 0 4px;color:var(--rhg-ink)}

/* ── Étapes (méthode) ────────────────────────────────────────────────── */
.rhg-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:clamp(16px,2.2vw,28px);margin-top:20px}
.rhg-steps>div{border-top:2px solid var(--dos-accent);padding-top:13px}
.rhg-bg-ink .rhg-steps>div{border-top-color:var(--dos-accent-soft)}
.rhg-steps h3{font-size:15px;margin-bottom:.35em}
.rhg-steps p{font-size:13.6px;color:var(--rhg-ink-soft);margin:0}
.rhg-bg-ink .rhg-steps p{color:var(--rhg-on-ink-2)}

/* ── Tableau ─────────────────────────────────────────────────────────── */
.rhg-tw{overflow-x:auto;margin:20px 0 0}
table{border-collapse:collapse;width:100%;min-width:540px;font-size:14.4px}
caption{text-align:left;font-size:13px;color:var(--rhg-ink-soft);padding-bottom:9px}
.rhg-bg-ink caption{color:var(--rhg-on-ink-2)}
th,td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--dos-line);vertical-align:top}
th{font-weight:700;font-size:12.8px;letter-spacing:.02em;border-bottom:2px solid var(--rhg-ink)}
.rhg-bg-ink th{border-bottom-color:var(--rhg-on-ink)}
.rhg-bg-ink th,.rhg-bg-ink td{border-bottom-color:rgba(251,249,253,.25)}

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.rhg-faq{max-width:82ch}
.rhg-faq details{border-bottom:1px solid var(--dos-line)}
.rhg-faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;font-weight:600;font-size:15.6px;position:relative}
.rhg-faq summary::-webkit-details-marker{display:none}
.rhg-faq summary::after{content:"";position:absolute;right:6px;top:23px;width:9px;height:9px;
  border-right:2px solid var(--dos-accent);border-bottom:2px solid var(--dos-accent);transform:rotate(45deg)}
.rhg-faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.rhg-faq .dos-a{padding:0 0 18px;color:var(--rhg-ink-soft);max-width:74ch}

/* ── Fil d'Ariane, fraîcheur ─────────────────────────────────────────── */
.rhg-crumb{font-size:13px;color:var(--rhg-ink-soft);padding:14px 0 0}
.rhg-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.rhg-crumb li+li::before{content:"›";margin-right:8px;color:var(--dos-line-strong)}
.rhg-maj-date{font-size:12.4px;color:var(--rhg-ink-soft);margin:26px 0 0;padding-top:14px;border-top:1px solid var(--dos-line)}

/* ── Index blog ──────────────────────────────────────────────────────── */
.rhg-blog-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:24px}
.rhg-blog-index a{display:block;border:1px solid var(--dos-line);border-left:3px solid var(--dos-accent);
  padding:16px 18px;text-decoration:none;background:var(--rhg-paper);border-radius:0 var(--r) var(--r) 0}
.rhg-blog-index a:hover{background:#fff}
.rhg-blog-index strong{display:block;font-size:15px;font-weight:700;margin-bottom:4px}
.rhg-blog-index span{color:var(--rhg-ink-soft);font-size:13.4px;line-height:1.45}

/* ── Pied de page ────────────────────────────────────────────────────── */
.rhg-ft{background:var(--rhg-ink);color:var(--rhg-on-ink-2);padding:clamp(36px,5vw,56px) 0 26px;font-size:13.8px}
.rhg-ft a{color:var(--rhg-on-ink-2);text-decoration-color:rgba(251,249,253,.32)}
.rhg-ft-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr;gap:clamp(20px,3vw,40px)}
.rhg-ft h3{color:var(--rhg-paper);font-size:12px;letter-spacing:.06em;font-weight:700;margin-bottom:.9em}
.rhg-ft ul{list-style:none;margin:0;padding:0}
.rhg-ft li{margin-bottom:7px;font-size:13.4px}
.rhg-foot-sources{border-top:1px solid rgba(251,249,253,.18);margin-top:28px;padding-top:16px;
  font-size:12px;color:#a99fb3;line-height:1.65}
.rhg-ft-end{margin-top:14px;font-size:12px;color:#948aa0}

/* ── Reprise de conversion ───────────────────────────────────────────── */
.dos-reprise{border-left:3px solid var(--dos-accent);background:var(--rhg-surface);
  padding:14px clamp(14px,2.4vw,22px) 16px;margin:26px 0;border-radius:0 var(--r) var(--r) 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 22px}
.dos-reprise .dos-rp-q{margin:0;max-width:62ch;font-size:clamp(.97rem,1.2vw,1.05rem);line-height:1.5;color:var(--rhg-ink)}
.dos-reprise .dos-rp-a{font-weight:700;font-size:.94rem;color:var(--rhg-ink);text-decoration:none;
  white-space:nowrap;display:inline-flex;align-items:center;min-height:44px;background:none;border:0;
  cursor:pointer;font:inherit;box-shadow:inset 0 -3px 0 var(--dos-accent)}
.dos-reprise .dos-rp-a:hover{box-shadow:inset 0 -3px 0 var(--rhg-ink)}

/* ── Mobile / tablette ───────────────────────────────────────────────── */
@media(max-width:900px){
  /* budget vertical serré (G32 : bouton d'envoi visible sans défiler à 390×844) —
     en-tête et hero compactés, colonne copy AVANT la carte (titre au-dessus du
     formulaire, contrat mode A de l'habillage §7), ghost CTA/fiche teaser/reassure
     masqués sur la copie du hero (ils restent lisibles plus bas dans la page). */
  :root{--hdr-h:50px}
  .rhg-bandeau .rhg-wrap{min-height:24px}
  .rhg-hero .rhg-wrap{padding-top:10px;padding-bottom:10px}
  .rhg-hero-grid{grid-template-columns:1fr;gap:10px}
  .rhg-hero-copy{order:0}
  .rhg-hero-card{order:1}
  .rhg-hero-copy .rhg-kicker,.rhg-hero-copy .rhg-hero-cta,.rhg-hero-copy .rhg-hero-reassure,.rhg-hero-copy .dos-fiche{display:none}
  .rhg-hero h1{font-size:1.32rem;line-height:1.18;margin-bottom:.2em}
  .rhg-hero .rhg-lede{font-size:.92rem;margin-bottom:0;-webkit-line-clamp:3;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .rhg-hero-card{padding:12px}
  .dos-fiche-row{grid-template-columns:repeat(2,1fr);row-gap:22px}
  .rhg-bandeau span:first-child{display:none}
  .rhg-bandeau .rhg-wrap{justify-content:flex-start}
  .rhg-f-row{margin-bottom:9px}
  .rhg-trust{grid-template-columns:1fr}
  .rhg-ft-cols{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .rhg-burger{display:block}
  .rhg-nav{position:absolute;top:100%;left:0;right:0;background:var(--rhg-paper);border-bottom:1px solid var(--dos-line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gut) 18px;display:none;
    max-height:76vh;overflow-y:auto}
  .rhg-hdr[data-nav="1"] .rhg-nav{display:flex}
  .rhg-nav>ul{flex-direction:column;gap:0}
  .rhg-nav .rhg-panel{position:static;display:block;border:0;border-left:2px solid var(--dos-line);
    padding:0 0 8px 12px;min-width:0}
  .rhg-nav .rhg-drop>button{width:100%;text-align:left}
  .rhg-nav .rhg-drop>button::after{float:right;margin-top:7px}
  h1{max-width:none}
  h2{max-width:none}
}
@media(max-width:360px){
  .rhg-hero-card .rhg-f-2{grid-template-columns:1fr}
}
@media(max-width:560px){
  .rhg-ft-cols{grid-template-columns:1fr}
  .rhg-cards,.rhg-blog-index{grid-template-columns:1fr}
  .dos-fiche-row{grid-template-columns:1fr 1fr}
  .dos-cas-grid{grid-template-columns:1fr}
  .dos-cas:nth-child(2){transform:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}