/* ══════════════════════════════════════════════════════════════════════
   rd-interface.css — ce que la maquette ne porte pas.

   La maquette du designer est une extraction statique : toute sa mise en
   page vit dans des attributs `style` en ligne, avec des largeurs fixes
   (le corps d'article fait 750 px) et des grilles à trois colonnes. C'est
   juste au pixel sur un grand écran, et inutilisable sous 900 px : mesuré
   le 16 août, le corps d'article débordait de 688 px sur un écran de 390,
   douze tableaux sortaient de l'écran, et des libellés tombaient à 10 px.

   Un style en ligne l'emporte sur une feuille : les règles de rupture
   doivent donc porter `!important`. Ce n'est pas de la paresse, c'est la
   seule façon de reprendre la main sur une maquette extraite sans la
   réécrire — et le rendu sur grand écran reste identique au pixel, parce
   que toutes ces règles vivent dans des `@media`.

   Au-dessus de 1080 px, ce fichier ne change RIEN, sauf les états de
   survol et les composants ajoutés (appel à l'action, lecteur audio,
   infographie), qui n'existent pas dans la maquette.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --rd-bleu:#0e4c7e; --rd-bleu-f:#0a3a61; --rd-bleu-l:#eaf3fa;
  --rd-or:#a9762c; --rd-or-f:#6e4713; --rd-creme:#fdfaf2;
  --rd-brun:#8a5f22;
  --rd-ligne:#ede8de; --rd-encre:#14171e; --rd-encre2:#423e36; --rd-encre3:#8b8577;
}

/* ─────────────────────────────────────────────────────────────────
   1 · LES ÉTATS DE SURVOL
   Aucun bouton de la maquette ne réagit au passage de la souris. Sur un
   site dont toute la conversion tient à un formulaire, c'est le défaut
   qui coûte le plus cher : rien ne dit au visiteur que c'est cliquable.
   ───────────────────────────────────────────────────────────────── */
button, .rd-cta-btn{ transition:transform .14s ease, box-shadow .14s ease, filter .14s ease }
button:hover, a:hover > button{
  filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(14,76,126,.22);
}
button:active, a:active > button{ transform:translateY(0); box-shadow:none }
button:focus-visible, a:focus-visible{ outline:3px solid var(--rd-or); outline-offset:2px }

/*  Le bouton d'en-tête respire — très légèrement, trois fois, puis se
    repose. Un mouvement permanent fatigue ; un mouvement qui s'arrête
    attire l'œil une fois et laisse lire ensuite.  */
@keyframes rd-souffle{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.035)} }
header [data-dc-tpl="21"]{ animation:rd-souffle 2.6s ease-in-out 1.2s 3; transform-origin:center }
header a:hover [data-dc-tpl="21"]{ animation:none }
@media (prefers-reduced-motion:reduce){
  header [data-dc-tpl="21"]{ animation:none }
  button:hover, a:hover > button{ transform:none }
}

/* ─────────────────────────────────────────────────────────────────
   2 · L'APPEL À L'ACTION
   Fond bleu, coins arrondis, bouton à droite, texte plus long et écrit
   pour donner envie de cliquer.
   ───────────────────────────────────────────────────────────────── */
/*  Le bloc tenait sur deux colonnes, un tiers pour le bouton. Le titre
    s'y trouvait comprimé sans raison : il y a toute la largeur
    disponible. Le titre et le texte la prennent donc entièrement, et le
    bouton se pose seul en bas à droite, là où l'œil finit sa lecture.  */
.rd-cta{
  display:block;
  background:linear-gradient(135deg,var(--rd-bleu) 0%,var(--rd-bleu-f) 100%);
  border-radius:18px; padding:28px 32px 26px; margin:34px 0; color:#fff;
}
.rd-cta-txt{ min-width:0 }
.rd-cta-pied{ display:flex; justify-content:flex-end; margin-top:18px }
.rd-cta-titre{ font-size:21px; font-weight:800; letter-spacing:-.022em;
  line-height:1.25; margin:0 0 7px; color:#fff }
.rd-cta-txt p{ margin:0; font-size:16px; line-height:1.6; color:rgba(255,255,255,.9) }
.rd-cta a{ text-decoration:none; flex:0 0 auto }
/*  Le bouton reste rond, et respire : trois montées d'un pixel et demi,
    puis il s'arrête. Un mouvement permanent fatigue l'œil et finit par se
    lire comme une bannière publicitaire ; un mouvement qui cesse attire
    une fois et laisse lire ensuite. Le survol le relance.  */
.rd-cta-btn{
  border:0; border-radius:999px; cursor:pointer; background:#fff; color:var(--rd-bleu);
  animation:rd-respire 2.4s ease-in-out 3;
  font:inherit; font-size:16px; font-weight:700; padding:15px 28px; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.16);
}
.rd-cta-btn:hover{ background:var(--rd-creme); color:var(--rd-or-f); filter:none;
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.26);
  animation:rd-respire 1.6s ease-in-out infinite }
@keyframes rd-respire{
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-3px) }
}
/*  Personne ne doit subir une animation qu'il a demandé à ne pas voir.  */
@media (prefers-reduced-motion:reduce){
  .rd-cta-btn, .rd-cta-btn:hover{ animation:none }
}

/* ─────────────────────────────────────────────────────────────────
   3 · LES ENCADRÉS, TOUS À LA MÊME TYPOGRAPHIE
   « Attention », « Bon à savoir » et les cas chiffrés portaient trois
   tailles de texte et trois interlignes différents.
   ───────────────────────────────────────────────────────────────── */
[data-dc-tpl="850"] p, [data-dc-tpl="952"] p, .rd-calcul p, .rd-calcul li{
  font-size:17px !important; line-height:1.7 !important;
}
[data-dc-tpl="850"] p + p, [data-dc-tpl="952"] p + p{ margin-top:12px !important }
[data-dc-tpl="853"], [data-dc-tpl="957"]{ font-size:20px !important; line-height:1.3 !important }
[data-dc-tpl="850"], [data-dc-tpl="952"]{ border-radius:0 !important }

/*  L'exemple chiffré sort de la rédaction courante : doré, encadré, avec
    son étiquette. C'est le bloc que le lecteur cherche en diagonale.  */
.rd-calcul{
  background:var(--rd-creme); border:1px solid #e8dcc2;
  border-top:5px solid var(--rd-or); border-radius:0;
  padding:22px 26px 24px; margin:30px 0;
}
.rd-calcul-lab{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:#fff; background:var(--rd-or);
  padding:4px 11px; border-radius:0; margin-bottom:12px;
}
.rd-calcul h4{ font-size:20px; font-weight:800; letter-spacing:-.02em;
  color:var(--rd-or-f); margin:0 0 6px }
.rd-calcul table{ background:#fff }

/* ─────────────────────────────────────────────────────────────────
   4 · LES TABLEAUX
   Douze tableaux dépassaient l'écran d'un téléphone. Ils défilent
   maintenant dans leur cadre. On ne les casse pas en fiches empilées :
   cela détruirait précisément ce qu'un tableau sert à faire, comparer
   deux colonnes d'un coup d'œil.
   ───────────────────────────────────────────────────────────────── */
.rd-tab{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:0; margin:0 }
.rd-tab, .rd-tab table, .rd-tab thead, .rd-tab tr, .rd-tab th, .rd-tab td{ border-radius:0 }

/* ─────────────────────────────────────────────────────────────────
   5 · LE LECTEUR AUDIO
   Il ne coupe plus l'article en deux : c'est un panneau collé au bord
   droit de la fenêtre, apparu au défilement, replié en pastille tant
   qu'on ne le sollicite pas. Le sommaire tient la gauche, l'écoute
   tient la droite, et le texte garde toute sa largeur entre les deux.
   ───────────────────────────────────────────────────────────────── */
.rd-audio{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:80; display:flex; flex-direction:column; align-items:flex-end; gap:0;
}
.rd-audio[hidden]{ display:none }

.rd-audio-pouce{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  border:1px solid var(--rd-ligne); border-radius:999px; background:#fff;
  color:var(--rd-bleu); font:inherit; font-size:14px; font-weight:700;
  padding:11px 17px 11px 14px; box-shadow:0 6px 20px rgba(20,30,45,.13);
}
.rd-audio-hp{ font-size:12px; line-height:1 }
.rd-audio.lit .rd-audio-pouce{ background:var(--rd-bleu); color:#fff;
  border-color:var(--rd-bleu) }
.rd-audio.ouvert .rd-audio-pouce{ display:none }

.rd-audio-corps{
  position:relative;
  display:none; width:250px; background:#fff; border:1px solid var(--rd-ligne);
  border-top:4px solid var(--rd-bleu); padding:16px 17px 15px;
  box-shadow:0 12px 34px rgba(20,30,45,.16);
}
.rd-audio.ouvert .rd-audio-corps{ display:block }
.rd-audio-titre{ font-size:15px; font-weight:800; letter-spacing:-.02em;
  color:var(--rd-encre); margin-bottom:11px }
.rd-audio-b{ display:block; width:100%; border:0; background:var(--rd-bleu);
  color:#fff; font:inherit; font-size:15px; font-weight:700; padding:11px 14px;
  cursor:pointer }
.rd-audio-rang{ display:flex; gap:7px; margin-top:8px }
.rd-audio-s{ flex:1 1 0; border:1px solid var(--rd-ligne); background:#fff;
  font:inherit; font-size:13px; font-weight:600; color:var(--rd-encre2);
  padding:8px 6px; cursor:pointer; white-space:nowrap }
.rd-audio-i{ display:block; font-size:12px; line-height:1.45;
  color:var(--rd-encre3); margin-top:10px }

/*  La croix. Sans elle, il fallait remonter la page pour faire disparaître
    le panneau — ce qui est exactement ce qu'on ne veut pas demander à
    quelqu'un qui vient de finir d'écouter.  */
.rd-audio-x{ position:absolute; top:6px; right:6px; width:28px; height:28px;
  border:0; background:none; cursor:pointer; line-height:1;
  font-size:20px; color:var(--rd-encre3); border-radius:999px }
.rd-audio-x:hover{ background:var(--rd-creme); color:var(--rd-encre);
  filter:none; transform:none; box-shadow:none }
.rd-audio-titre{ padding-right:26px }

/*  Le suivi du texte est un choix, pas un réglage imposé : décoché par
    défaut, puisque la page qui bouge sous les yeux avait été refusée.  */
.rd-audio-suivi{ display:flex; align-items:center; gap:8px; margin-top:11px;
  font-size:13px; color:var(--rd-encre2); cursor:pointer; line-height:1.35 }
.rd-audio-suivi input{ width:15px; height:15px; accent-color:var(--rd-bleu);
  flex:0 0 auto; margin:0 }
.rd-lu{ background:#fdf3dc; box-shadow:0 0 0 4px #fdf3dc; border-radius:2px }

/*  Sur un téléphone, le panneau se pose en bas plutôt que sur le côté :
    à mi-hauteur, il masquerait le texte.  */
@media (max-width:900px){
  .rd-audio{ right:12px; top:auto; bottom:16px; transform:none }
  .rd-audio-corps{ width:min(88vw, 300px) }
}

/* ─────────────────────────────────────────────────────────────────
   6 · L'INFOGRAPHIE
   ───────────────────────────────────────────────────────────────── */
/*  L'infographie ne prend plus toute la largeur de l'article. Elle se
    pose en vignette contre la marge droite, à hauteur de l'introduction,
    et le texte l'habille. Un clic l'ouvre en grand ; le lien dessous la
    télécharge. Celui qui ne veut que lire n'est pas arrêté par un bloc
    de 1 120 pixels de haut.  */
.rd-info{
  float:right; width:230px; margin:4px 0 18px 26px;
  border:1px solid var(--rd-ligne); border-radius:0; background:#fff;
}
.rd-info figure{ margin:0; cursor:zoom-in; overflow:hidden; max-height:290px }
.rd-info svg{ display:block; width:100%; height:auto }
.rd-info-p{ display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:9px 11px; border-top:1px solid var(--rd-ligne);
  background:var(--rd-creme) }
.rd-info-k{ font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rd-or) }
.rd-info-p button, .rd-info-p a{
  border:1px solid var(--rd-ligne); border-radius:0; background:#fff;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--rd-encre2);
  padding:5px 11px; cursor:pointer; text-decoration:none }

/*  Sous 900 px, une vignette flottante de 230 px laisse des colonnes de
    texte de trois mots. Elle repasse en pleine largeur, au-dessus.  */
@media (max-width:900px){
  .rd-info{ float:none; width:100%; margin:0 0 22px }
  .rd-info figure{ max-height:none }
}

.rd-plein{ position:fixed; inset:0; z-index:9000; background:rgba(20,23,30,.94);
  display:none; align-items:center; justify-content:center; padding:24px }
.rd-plein.on{ display:flex }
.rd-plein svg{ max-width:min(1200px,96vw); max-height:92vh; width:auto; height:auto;
  background:#fff; border-radius:14px }
.rd-plein-x{ position:absolute; top:18px; right:20px; border:0; border-radius:999px;
  background:#fff; color:var(--rd-encre); font:inherit; font-size:15px; font-weight:700;
  padding:10px 18px; cursor:pointer }

/*  L'infographie se loge à droite du premier bloc sur grand écran, et
    repasse au-dessus du texte dès que la place manque.  */
.rd-tete{ display:grid; grid-template-columns:1fr 340px; gap:26px; align-items:start }

/* ══════════════════════════════════════════════════════════════════
   7 · LES RUPTURES — rien de tout ceci au-dessus de 1080 px
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  /*  La colonne d'article est fixée à 750 px dans la maquette, à côté
      d'un sommaire de 280 px. Sur écran étroit, les deux passent l'un
      sous l'autre et prennent toute la largeur.  */
  [data-dc-tpl="749"], [data-dc-tpl="766"], [data-dc-tpl="750"]{
    grid-template-columns:1fr !important; width:auto !important;
    max-width:100% !important; min-width:0 !important;
  }
  [data-dc-tpl="766"]{ width:100% !important }
  /*  Le sommaire cesse d'être collant : au milieu d'un écran de
      téléphone il mangerait la moitié de la hauteur utile.  */
  [data-somm]{ position:static !important; max-height:none !important;
    overflow:visible !important; margin-bottom:26px }
  main [style*="max-width: 1280px"]{ max-width:100% !important }
  .rd-tete{ grid-template-columns:1fr }
}

@media (max-width:900px){
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"]{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important }
  main section, main > div{ padding-left:20px !important; padding-right:20px !important }
  h1{ font-size:34px !important; line-height:1.14 !important }
  h2{ font-size:26px !important; line-height:1.22 !important }
  h3{ font-size:20px !important }
  .rd-cta-pied{ justify-content:stretch }
  .rd-cta-pied a, .rd-cta-btn{ width:100% }
}

@media (max-width:640px){
  /*  Plus aucune grille à plusieurs colonnes : chaque carte prend la
      largeur. C'est la seule mise en page qui reste lisible sans
      descendre la police sous 15 px.  */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important }
  main section, main > div{ padding-left:16px !important; padding-right:16px !important }
  h1{ font-size:29px !important }
  h2{ font-size:23px !important }
  h3{ font-size:18.5px !important }
  /*  Aucun texte sous 15 px : la maquette descendait à 10 px sur ses
      libellés, illisible sur un écran tenu à bout de bras.  */
  main p, main li, main td, main th{ font-size:16px !important; line-height:1.65 !important }
  header [data-dc-tpl="11"]{ padding:12px 16px !important; gap:10px !important }
  header [data-dc-tpl="21"]{ width:100%; margin-top:4px }
  [data-dc-tpl="1317"]{ bottom:20px !important; right:16px !important }
  .rd-cta{ padding:22px 20px; border-radius:14px }
  .rd-cta-titre{ font-size:19px }
  .rd-tab table{ min-width:520px }
  .rd-tab td, .rd-tab th{ padding:9px 10px !important; font-size:14.5px !important }
}


/*  L'image de tête est posée derrière le titre, à 50 % d'opacité, avec un
    voile en dégradé qui l'éclaircit à gauche — là où le texte commence.
    Sur un grand écran le texte occupe la moitié gauche et reste lisible ;
    sur un téléphone il traverse toute la largeur, donc la partie claire
    du dégradé ne le couvre plus. On rend le voile uniforme en dessous de
    900 px : l'image reste visible, le texte redevient net.  */
@media (max-width:900px){
  [data-dc-tpl="562"]{ opacity:.28 !important }
  [data-dc-tpl="563"]{
    background:linear-gradient(180deg,rgba(251,247,239,.90) 0%,
                                      rgba(251,247,239,.97) 42%,
                                      rgba(251,247,239,.99) 100%) !important;
  }
}


/* ─────────────────────────────────────────────────────────────────
   LE REPLI DES SOUS-PARTIES SUR TÉLÉPHONE
   Chaque H3 devient un accordéon sous 900 px. Le style reprend celui des
   accordéons de la maquette : filet clair, chevron doré, fond crème à
   l'ouverture.
   ───────────────────────────────────────────────────────────────── */
.rd-acc-m{ border:1px solid var(--rd-ligne); border-radius:12px; margin:14px 0;
  background:#fff; overflow:hidden }
.rd-acc-m > summary{ list-style:none; cursor:pointer; padding:16px 18px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px }
.rd-acc-m > summary::-webkit-details-marker{ display:none }
.rd-acc-m > summary h3{ margin:0 !important; font-size:18px !important;
  line-height:1.35 !important; flex:1 1 auto }
.rd-acc-m .rd-acc-fl{ flex:0 0 auto; color:var(--rd-or); font-size:14px;
  transition:transform .18s; margin-top:3px }
.rd-acc-m[open] > summary{ background:var(--rd-creme);
  border-bottom:1px solid var(--rd-ligne) }
.rd-acc-m[open] .rd-acc-fl{ transform:rotate(180deg) }
.rd-acc-m > *:not(summary){ padding-left:18px; padding-right:18px }
.rd-acc-m > *:last-child{ padding-bottom:16px }
.rd-acc-m > summary:hover{ background:var(--rd-creme) }


/* ─────────────────────────────────────────────────────────────────
   LE MENU À TROIS BARRES
   Six libellés en ligne ne tiennent pas sur un écran de 390 px : la barre
   passait sur trois lignes et mangeait le tiers de la hauteur utile. Sous
   1080 px, ils disparaissent derrière un bouton, et le panneau qui s'ouvre
   reprend exactement le même menu — mêmes entrées, mêmes sous-parties,
   mêmes mentions « à publier ».
   ───────────────────────────────────────────────────────────────── */
.rd-burger{ display:none; position:relative; width:46px; height:42px; padding:0;
  border:1px solid var(--rd-ligne); border-radius:12px; background:#fff;
  cursor:pointer; flex:0 0 auto; margin-left:auto }
.rd-burger span{ position:absolute; left:12px; right:12px; height:2.4px; border-radius:2px;
  background:var(--rd-bleu); transition:transform .2s, opacity .18s }
.rd-burger span:nth-child(1){ top:13px }
.rd-burger span:nth-child(2){ top:20px }
.rd-burger span:nth-child(3){ top:27px }
.rd-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.rd-burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.rd-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

@media (max-width:1080px){
  .rd-burger{ display:block }
  header [data-dc-tpl="14"]{
    display:none !important; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--rd-ligne);
    box-shadow:0 22px 44px rgba(20,23,30,.14);
    max-height:calc(100vh - 74px); overflow-y:auto;
    padding:10px 18px 22px !important; flex-direction:column; align-items:stretch;
  }
  header[data-menu-ouvert] [data-dc-tpl="14"]{ display:flex !important }
  header [data-dc-tpl="14"] .rd-nav{ width:100%; border-bottom:1px solid var(--rd-ligne) }
  header [data-dc-tpl="14"] .rd-nav:last-child{ border-bottom:0 }
  header [data-dc-tpl="14"] .rd-nav > a{
    display:flex !important; align-items:center; justify-content:space-between;
    width:100%; padding:15px 6px !important; font-size:17px; border-radius:0 !important;
    background:none !important;
  }
  header [data-dc-tpl="11"]{ position:relative }
  /*  Le bouton d'action reste visible sous le menu, il ne se replie pas :
      c'est le seul élément de la barre qui convertit.  */
  header [data-dc-tpl="21"]{ order:9 }
}
@media (max-width:640px){
  header [data-dc-tpl="14"]{ max-height:calc(100vh - 130px) }
}

@media print{
  .rd-audio, .rd-info-p, .rd-cta, [data-dc-tpl="1317"], .rd-mega{ display:none !important }
}

/* ─────────────────────────────────────────────────────────────────
   12 · LES CARTES DE RÉSULTAT DES CALCULATEURS
   Trois cartes côte à côte, un chiffre par carte. La taille venait de
   la maquette, où le chiffre est court ; « au moins 3 334 € » y tenait
   sur trois lignes, une syllabe par ligne. Le chiffre s'adapte
   maintenant à la place réellement disponible.
   ───────────────────────────────────────────────────────────────── */
[data-carte] [data-res]{
  font-size:clamp(19px, 1.9vw, 32px) !important;
  line-height:1.18 !important;
  word-break:normal !important; overflow-wrap:normal !important;
  hyphens:none !important;
}
[data-carte] [data-res-lib]{ line-height:1.35 !important }
[data-carte]{ border-radius:0 !important }
[data-outil]{ border-radius:0 !important }

@media (max-width:900px){
  [data-outil] [data-carte]{ }
  [data-carte] [data-res]{ font-size:23px !important }
}

/* ─────────────────────────────────────────────────────────────────
   13 · PAGE D'ACCUEIL — LE BANDEAU « COMMENT REDUCTIS TRAVAILLE »
   Le fond crème s'arrêtait au bord du contenu, à 1 280 px : sur un
   grand écran, la bande flottait au milieu du blanc. Elle prend
   maintenant toute la largeur de la fenêtre, et seul le texte reste
   aligné sur la colonne de lecture.
   ───────────────────────────────────────────────────────────────── */
[data-dc-tpl="325"]{
  background:var(--rd-creme) !important;
  padding:0 32px !important; margin-top:78px !important;
}
[data-dc-tpl="326"]{ background:transparent !important; padding:60px 24px !important }

/*  Les trois temps 01 · 02 · 03 du bloc « Comprendre l'opération » :
    la maquette les pose côte à côte sans les distinguer. Un filet en
    haut et le numéro en gros les séparent au premier regard.  */
[data-dc-tpl="376"], [data-dc-tpl="380"], [data-dc-tpl="384"]{
  border-top:3px solid var(--rd-bleu); padding-top:18px;
}

/*  « Ce que vous y gagnez » et « ce que vous y perdez » se lisaient
    comme deux listes jumelles. Le vert et le rouge de la maquette ne
    portaient que sur les titres ; ils descendent sur les puces.  */
[data-dc-tpl="392"] li::marker{ color:#0b8a61 }
[data-dc-tpl="400"] li::marker{ color:#c4442a }
[data-dc-tpl="388"]{ border-radius:0 !important }

/* ─────────────────────────────────────────────────────────────────
   14 · PAGE D'ACCUEIL — UN CRAN DE ZOOM EN MOINS
   Les titres de la maquette sont calibrés pour une démonstration en
   plein écran ; sur un portable de 13 pouces, le H1 à 62 px mange
   l'écran entier. Tout ce qui dépasse 19 px descend de 8 %. Le corps
   de texte, lui, ne bouge pas : il est déjà au bon calibre, et le
   réduire rendrait la page moins lisible, pas plus élégante.
   ───────────────────────────────────────────────────────────────── */
.rd-accueil [data-dc-tpl="29"]{ font-size:57.0px !important }
.rd-accueil [data-dc-tpl="189"]{ font-size:36.8px !important }
.rd-accueil [data-dc-tpl="249"], .rd-accueil [data-dc-tpl="330"], .rd-accueil [data-dc-tpl="355"]{ font-size:35.0px !important }
.rd-accueil [data-dc-tpl="372"], .rd-accueil [data-dc-tpl="409"], .rd-accueil [data-dc-tpl="453"], .rd-accueil [data-dc-tpl="496"]{ font-size:33.1px !important }
.rd-accueil [data-dc-tpl="288"], .rd-accueil [data-dc-tpl="537"]{ font-size:31.3px !important }
.rd-accueil [data-dc-tpl="360"], .rd-accueil [data-dc-tpl="363"], .rd-accueil [data-dc-tpl="366"]{ font-size:27.6px !important }
.rd-accueil [data-dc-tpl="70"]{ font-size:26.7px !important }
.rd-accueil [data-dc-tpl="419"], .rd-accueil [data-dc-tpl="422"], .rd-accueil [data-dc-tpl="431"], .rd-accueil [data-dc-tpl="434"], .rd-accueil [data-dc-tpl="442"], .rd-accueil [data-dc-tpl="445"]{ font-size:24.8px !important }
.rd-accueil [data-dc-tpl="50"], .rd-accueil [data-dc-tpl="54"]{ font-size:23.9px !important }
.rd-accueil [data-dc-tpl="193"], .rd-accueil [data-dc-tpl="201"], .rd-accueil [data-dc-tpl="209"]{ font-size:23.0px !important }
.rd-accueil [data-dc-tpl="12"], .rd-accueil [data-dc-tpl="217"], .rd-accueil [data-dc-tpl="222"], .rd-accueil [data-dc-tpl="227"], .rd-accueil [data-dc-tpl="232"], .rd-accueil [data-dc-tpl="237"], .rd-accueil [data-dc-tpl="242"]{ font-size:21.2px !important }
.rd-accueil [data-dc-tpl="415"], .rd-accueil [data-dc-tpl="427"], .rd-accueil [data-dc-tpl="438"], .rd-accueil [data-dc-tpl="1317"]{ font-size:20.2px !important }
.rd-accueil [data-dc-tpl="1321"]{ font-size:19.3px !important }
.rd-accueil [data-dc-tpl="378"], .rd-accueil [data-dc-tpl="382"], .rd-accueil [data-dc-tpl="386"], .rd-accueil [data-dc-tpl="544"], .rd-accueil [data-dc-tpl="551"], .rd-accueil [data-dc-tpl="557"]{ font-size:18.4px !important }
.rd-accueil [data-dc-tpl="32"], .rd-accueil [data-dc-tpl="337"], .rd-accueil [data-dc-tpl="342"], .rd-accueil [data-dc-tpl="347"]{ font-size:17.9px !important }
.rd-accueil [data-dc-tpl="74"], .rd-accueil [data-dc-tpl="77"], .rd-accueil [data-dc-tpl="80"]{ font-size:17.5px !important }

/*  Le H1 gagne aussi un interlignage plus serré : réduit sans cela,
    il laisse des blancs entre ses lignes.  */
.rd-accueil [data-dc-tpl="29"], .rd-accueil [data-dc-tpl="31"]{ line-height:1.04 !important }

/* ─────────────────────────────────────────────────────────────────
   15 · PAGE D'ACCUEIL — LE RYTHME DES FONDS
   Six sections blanches à la suite se lisent comme un seul long bloc.
   On alterne : « Le même dossier, trois décisions » et « Conso ou
   immobilier » passent sur fond crème pleine largeur, ce qui découpe
   la page en respirations au lieu d'un déroulé continu.
   ───────────────────────────────────────────────────────────────── */
.rd-accueil [data-dc-tpl="405"]{
  background:var(--rd-creme) !important;
  padding:64px 32px 68px !important; margin-top:78px !important;
}
.rd-accueil [data-dc-tpl="283"]{
  background:#fbf9f5 !important;
  padding:58px 32px 62px !important; margin-top:64px !important;
  border-top:1px solid var(--rd-ligne); border-bottom:1px solid var(--rd-ligne);
}

/*  « Conso ou immobilier » sur l'accueil : le tableau reprenait tel quel
    la présentation des pages internes. Ici il ouvre le sujet au lieu de
    le traiter — filet bleu épais, en-tête plus calme, lignes plus aérées. */
.rd-accueil [data-dc-tpl="290"]{ border:2px solid var(--rd-bleu) !important;
  border-radius:0 !important; background:#fff !important }
.rd-accueil [data-dc-tpl="291"] thead tr{ background:var(--rd-bleu) !important }
.rd-accueil [data-dc-tpl="291"] td{ padding:16px 20px !important }

/*  « Un rachat de crédit, concrètement » : les trois temps 01 · 02 · 03
    étaient trois colonnes identiques, sans hiérarchie de lecture. Chacun
    devient une carte numérotée, sur fond blanc détaché du fond crème. */
.rd-accueil [data-dc-tpl="376"], .rd-accueil [data-dc-tpl="380"],
.rd-accueil [data-dc-tpl="384"]{
  background:#fff !important; border:1px solid var(--rd-ligne) !important;
  border-top:3px solid var(--rd-bleu) !important;
  padding:22px 22px 24px !important;
}
.rd-accueil [data-dc-tpl="377"], .rd-accueil [data-dc-tpl="381"],
.rd-accueil [data-dc-tpl="385"]{
  color:var(--rd-or) !important; opacity:1 !important; font-weight:800 !important;
}

/*  « Ce que vous y gagnez / ce que vous y perdez » : deux listes jumelles
    que rien ne distinguait au premier regard. Deux panneaux séparés, l'un
    bordé de vert, l'autre de rouge, comme les titres l'annonçaient déjà. */
.rd-accueil [data-dc-tpl="388"]{
  background:transparent !important; border:0 !important; padding:0 !important;
  gap:22px !important;
}
.rd-accueil [data-dc-tpl="389"], .rd-accueil [data-dc-tpl="397"]{
  background:#fff; border:1px solid var(--rd-ligne); padding:24px 26px 26px;
}
.rd-accueil [data-dc-tpl="389"]{ border-top:4px solid #0b8a61 }
.rd-accueil [data-dc-tpl="397"]{ border-top:4px solid #c4442a }

@media (max-width:900px){
  .rd-accueil [data-dc-tpl="405"], .rd-accueil [data-dc-tpl="283"]{
    padding-left:20px !important; padding-right:20px !important }
}

/* ─────────────────────────────────────────────────────────────────
   16 · LA BANDE DES ENSEIGNES
   Des noms en bulles, jamais de logos : un logo est une marque
   déposée, et l'afficher sans accord écrit sur un site rémunéré par
   des partenaires expose à une mise en demeure. Le monogramme carré
   donne le repère visuel qu'un logo aurait donné, sans le risque.
   ───────────────────────────────────────────────────────────────── */
.rd-enseignes{ background:var(--rd-creme); padding:62px 32px 58px; margin-top:70px;
  border-top:1px solid var(--rd-ligne); border-bottom:1px solid var(--rd-ligne) }
.rd-ens-int{ max-width:1280px; margin:0 auto }
.rd-ens-k{ font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rd-or) }
.rd-ens-t{ font-size:31px; font-weight:800; letter-spacing:-.028em; line-height:1.18;
  margin:9px 0 12px; color:var(--rd-encre) }
.rd-ens-p{ font-size:17px; line-height:1.65; color:var(--rd-encre2);
  margin:0 0 28px; max-width:760px }
.rd-ens-g{ display:flex; flex-wrap:wrap; gap:10px }

.rd-bulle{ display:inline-flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--rd-ligne); border-radius:999px;
  padding:8px 18px 8px 8px; text-decoration:none;
  font-size:15px; font-weight:700; color:var(--rd-encre);
  transition:border-color .14s, box-shadow .14s, transform .14s }
.rd-bulle:hover{ border-color:var(--rd-bleu);
  box-shadow:0 6px 18px rgba(14,76,126,.13); transform:translateY(-1px) }
.rd-bulle-m{ flex:0 0 auto; width:30px; height:30px; border-radius:999px;
  background:var(--rd-bleu); color:#fff; display:grid; place-items:center;
  font-size:11.5px; font-weight:800; letter-spacing:.01em }
/*  Une bulle sur trois passe en doré : la bande respire au lieu de
    former un aplat bleu uniforme.  */
.rd-bulle:nth-child(3n+2) .rd-bulle-m{ background:var(--rd-or) }
.rd-bulle:nth-child(4n+3) .rd-bulle-m{ background:#2f6f4f }
.rd-bulle-off{ opacity:.55; cursor:default }
.rd-bulle-off .rd-bulle-m{ background:var(--rd-encre3) }
.rd-bulle-off:hover{ border-color:var(--rd-ligne); box-shadow:none; transform:none }

.rd-ens-note{ font-size:13px; line-height:1.6; color:var(--rd-encre3);
  margin:24px 0 0; max-width:820px }

@media (max-width:900px){
  .rd-enseignes{ padding:44px 20px 42px }
  .rd-ens-t{ font-size:25px }
  .rd-bulle{ font-size:14px; padding:7px 14px 7px 7px }
  .rd-bulle-m{ width:26px; height:26px; font-size:10.5px }
}

/* ─────────────────────────────────────────────────────────────────
   17 · LE MAILLAGE DU COCON
   Le lien vers la page mère dans le chapô, les pages sœurs en pied.
   Une sœur non encore écrite reste VISIBLE, en pointillés et non
   cliquable : on montre le plan du site sans promettre une page qui
   renverrait un 404.
   ───────────────────────────────────────────────────────────────── */
.rd-mere{ margin:14px 0 0 !important; font-size:15.5px !important;
  color:var(--rd-encre2) !important }
.rd-mere a{ color:var(--rd-or-f); font-weight:700 }

.rd-freres{ margin:38px 0 0; padding:26px 28px 28px;
  background:var(--rd-creme); border:1px solid #e8dcc2 }
.rd-freres-t{ font-size:21px !important; font-weight:800; letter-spacing:-.02em;
  margin:0 0 6px !important; color:var(--rd-encre) }
.rd-freres-p{ font-size:15.5px; line-height:1.6; color:var(--rd-encre2);
  margin:0 0 16px }
.rd-freres-g{ display:flex; flex-wrap:wrap; gap:9px }
.rd-frere{ display:inline-block; background:#fff; border:1px solid var(--rd-ligne);
  border-radius:999px; padding:8px 16px; font-size:14.5px; font-weight:700;
  color:var(--rd-encre); text-decoration:none }
.rd-frere:hover{ border-color:var(--rd-bleu); color:var(--rd-bleu) }
/*  La sœur pas encore écrite : pointillés, gris, curseur normal. On voit
    qu'elle est prévue, on comprend qu'elle n'est pas encore là.  */
.rd-frere-abs{ background:transparent; border-style:dashed;
  border-color:#d8cdb4; color:var(--rd-encre3); font-weight:600;
  text-decoration:underline dotted; text-underline-offset:3px; cursor:default }

/* ─────────────────────────────────────────────────────────────────
   18 · LES ANCRES : DÉFILEMENT DOUX ET EN-TÊTE PRISE EN COMPTE
   Les appels à l'action pointent tous sur #formulaire. Le saut était
   sec, et l'en-tête collante recouvrait le sur-titre du formulaire :
   on atterrissait sur les champs sans avoir lu la question.
   `scroll-margin-top` réserve la hauteur de l'en-tête, mesurée par le
   JavaScript et rangée dans --hdr, plus une marge de respiration.
   ───────────────────────────────────────────────────────────────── */
html{ scroll-behavior:smooth }
:root{ --hdr:76px }
#formulaire, [id]:target, h2[id], h3[id]{
  scroll-margin-top:calc(var(--hdr) + 22px);
}
/*  Le formulaire mérite un peu plus d'air : on doit voir son sur-titre
    ET sa question, pas seulement le premier champ.  */
#formulaire{ scroll-margin-top:calc(var(--hdr) + 34px) }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
}

/* ─────────────────────────────────────────────────────────────────
   19 · LE BLOC CONSEIL
   Trois bleus, trois rôles, et il faut qu'on les distingue :
     · #eaf3fa — le bleu pâle des repères d'information ;
     · #0e4c7e — le bleu profond de l'appel à l'action ;
     · #eef3f8 sur accent #2e6c9a — celui-ci, pour le geste à faire.
   Le fond est à peine teinté et l'accent porte la couleur : un aplat
   bleu franc sur toute la boîte concurrencerait le call to action.
   ───────────────────────────────────────────────────────────────── */
.rd-conseil{
  background:#eef3f8 !important;
  border-color:#2e6c9a #d5e2ee #d5e2ee !important;
}
.rd-conseil > div:first-child span:first-child{
  background:#2e6c9a !important; color:#fff !important;
}
.rd-conseil > div:first-child span:last-child{ color:#1d4e73 !important }
.rd-conseil a{ color:#1d4e73 }

/* ─────────────────────────────────────────────────────────────────
   20 · LES ÉTAPES NUMÉROTÉES
   Modèle repris de la page bancaire montrée en référence : pastille du
   numéro à gauche, titre sur la même ligne, texte dessous, et un filet
   vertical qui relie une étape à la suivante.
   La maquette pose déjà la bonne disposition en ligne — on ne la touche
   PAS. On ne change que la couleur de la pastille et on ajoute le filet.
   ───────────────────────────────────────────────────────────────── */
[data-dc-tpl="1180"]{ gap:18px !important }
[data-dc-tpl="1180"] > li{ position:relative }
/*  Le filet qui descend d'une pastille vers la suivante.  */
[data-dc-tpl="1180"] > li:not(:last-child)::before{
  content:""; position:absolute; left:13px; top:34px; bottom:-20px;
  width:2px; background:var(--rd-or); opacity:.32;
}
[data-dc-tpl="1180"] > li > span:first-child{
  background:var(--rd-bleu) !important; color:#fff !important;
  font-size:14px !important; position:relative; z-index:1;
}
/*  Le premier gras devient le titre de l'étape, et le reste passe à la
    ligne dessous — sans jamais sortir le numéro de sa ligne.  */
[data-dc-tpl="1180"] strong{
  display:block; font-size:18px; line-height:1.3; letter-spacing:-.02em;
  color:var(--rd-encre); margin-bottom:4px;
}

@media (max-width:640px){
  [data-dc-tpl="1180"] strong{ font-size:16.5px }
  [data-dc-tpl="1180"] > li:not(:last-child)::before{ left:12px }
}

/* ─────────────────────────────────────────────────────────────────────────
   21 · LES H2 SE SOULIGNENT EN POINTILLÉS
   Une page longue se balaie avant de se lire. Le filet pointillé donne au
   regard une ligne d'arrêt franche à chaque changement de sujet, sans
   ajouter la lourdeur d'un trait plein. Il est posé en `border-bottom`
   plutôt qu'en `text-decoration` : il court sur toute la largeur de la
   colonne, y compris sous un titre qui tient sur une seule ligne.
   ───────────────────────────────────────────────────────────────────── */
main h2, article h2{
  border-bottom:1px dotted var(--rd-ligne, #e3ddd2) !important;
  padding-bottom:11px !important;
}
/*  Les H2 qui vivent dans un composant ne sont pas des titres de section :
    ni le cadre du formulaire, ni les encadrés, ni les cartes ne prennent
    le filet.  */
main .rd-bulle h2, main .rd-cta-pied h2, main .rd-info h2,
main section h2, main .ency h2, main [data-dc-tpl="586"] h2,
main .rd-acc-m h2, article .rd-acc-m h2{
  border-bottom:0 !important; padding-bottom:0 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   22 · LE CONTENU DES ACCORDÉONS A UNE SEULE TYPOGRAPHIE
   Selon que la réponse était écrite en paragraphe, en liste ou en tableau,
   elle sortait à 16, 16,5 ou 17 px, avec des marges héritées de trois
   endroits différents. À l'ouverture, deux réponses voisines n'avaient pas
   le même corps de texte. On fixe une taille, un interligne et un rythme
   vertical uniques pour tout ce qui vit sous un `summary`.
   ───────────────────────────────────────────────────────────────────── */
details > *:not(summary),
details > *:not(summary) > *,
.rd-acc-m > *:not(summary){
  font-size:16.5px !important; line-height:1.68 !important;
  color:var(--rd-encre2, #4a4438) !important;
}
.rd-acc-m > *:not(summary) p,
.rd-acc-m > *:not(summary) li{
  font-size:16.5px !important; line-height:1.68 !important;
}
.rd-acc-m > :not(summary):first-of-type{ margin-top:0 !important; padding-top:14px !important }
.rd-acc-m > :not(summary) + :not(summary){ margin-top:12px !important }
details ul, details ol, .rd-acc-m ul, .rd-acc-m ol{
  margin:12px 0 !important; padding-left:22px !important }
details li, .rd-acc-m li{ margin:0 0 7px !important;
  font-size:16.5px !important; line-height:1.68 !important }
details li:last-child, .rd-acc-m li:last-child{ margin-bottom:0 !important }
.rd-acc-m table{ margin:12px 0 !important }
.rd-acc-m strong{ color:var(--rd-encre, #14171e) }

/* ─────────────────────────────────────────────────────────────────────────
   23 · LE COMPOSANT « TROIS COLONNES » DEVIENT TROIS CARTES
   Il n'était qu'un filet bleu posé au-dessus d'un texte serré : les trois
   colonnes se lisaient comme un seul paragraphe coupé en trois. Chacune
   devient une carte — titre sur fond bleu, texte sur fond beige — séparée
   des voisines par du blanc. Les angles ne sont arrondis qu'en haut, sur
   le bandeau bleu : le pied reste carré, ce qui pose la carte au lieu de
   la faire flotter. Le corps de texte descend d'un demi-point,
   mais l'interligne reste celui du reste de la page : c'est l'air entre
   les lignes qui rend une colonne étroite lisible, pas la taille.
   ───────────────────────────────────────────────────────────────────── */
[data-dc-tpl="877"]{ gap:16px !important; align-items:stretch !important }
/*  Le cadre brun est porté par la CARTE, pas par le corps : posé sur le
    corps, il laissait passer un liseré blanc sous le bandeau bleu, parce
    que la maquette glisse un paragraphe vide entre les deux.  */
[data-dc-tpl="877"] > *{
  border-top:0 !important; padding:0 !important;
  background:#fff !important;
  border:2px solid var(--rd-brun, #8a5f22) !important;
  border-radius:0 !important; overflow:visible;
  display:flex !important; flex-direction:column; height:100% !important;
}
/*  Le titre : fond bleu pleine largeur, texte blanc.  */
/*  Le titre déborde de deux pixels sur les trois côtés : son cadre bleu
    recouvre le cadre brun en haut, et les deux se rejoignent sans jour.
    La hauteur minimale tient deux lignes, pour que trois cartes côte à
    côte alignent leur bandeau même quand un titre tient sur une ligne.  */
[data-dc-tpl="877"] > * > *:first-child{
  background:#fff !important; color:var(--rd-bleu, #0e4c7e) !important;
  border:2px solid var(--rd-bleu, #0e4c7e) !important;
  border-radius:0 !important;
  margin:-2px -2px 0 !important; padding:13px 17px !important;
  min-height:calc(2 * 1.35em + 26px); display:flex; align-items:center;
  font-size:16.5px !important; font-weight:800 !important;
  line-height:1.35 !important; letter-spacing:-.012em !important;
}
/*  Le corps : fond beige, respiration franche. La maquette laisse un
    paragraphe vide entre le titre et le texte ; il est replié à zéro,
    sinon il ouvre un trou de trente-quatre pixels sous le bandeau bleu.  */
/*  Le corps : fond blanc, encadré sur trois côtés seulement — le haut
    appartient déjà au cadre bleu du titre. Le brun est celui des ancres
    et du survol, pas un beige de fond.  */
[data-dc-tpl="877"] > * > *:not(:first-child){
  background:#fff !important;
  margin:0 !important; padding:0 15px !important;
  font-size:15.5px !important; line-height:1.72 !important;
  color:var(--rd-encre2, #4a4438) !important;
}
[data-dc-tpl="877"] > * > *:not(:first-child):empty{ padding:0 !important; display:none !important }
[data-dc-tpl="877"] > * > *:nth-child(2):not(:empty){ padding-top:16px !important }
[data-dc-tpl="877"] > * > *:last-child{ padding-bottom:18px !important; flex:1 }
[data-dc-tpl="877"] > * > *:not(:first-child):not(:empty) ~ *:not(:empty){ padding-top:0 !important }
[data-dc-tpl="877"] > * > *:not(:first-child) > *{ margin-top:0 !important }
[data-dc-tpl="877"] > * > *:not(:first-child) p{
  margin:0 0 11px !important; font-size:15.5px !important; line-height:1.72 !important }
[data-dc-tpl="877"] > * > *:not(:first-child) p:last-child{ margin-bottom:0 !important }
[data-dc-tpl="877"] > * > *:not(:first-child) ul{ margin:0 !important; padding-left:20px !important }
[data-dc-tpl="877"] > * > *:not(:first-child) li{
  margin:0 0 8px !important; font-size:15.5px !important; line-height:1.72 !important }
[data-dc-tpl="877"] > * > *:not(:first-child) li:last-child{ margin-bottom:0 !important }
[data-dc-tpl="877"] > * > *:not(:first-child) strong{ color:var(--rd-encre, #14171e) !important }
@media (max-width:760px){
  [data-dc-tpl="877"]{ gap:12px !important }
  [data-dc-tpl="877"] > * > *:first-child{ padding:11px 14px !important; font-size:16px !important }
  [data-dc-tpl="877"] > * > *:not(:first-child){ padding:14px 14px 15px !important }
}

/* ─────────────────────────────────────────────────────────────────────────
   24 · LE BOUTON D'APPEL À L'ACTION AU SURVOL
   Il ne bougeait que d'un cran d'ombre. Le fond fonce nettement et le
   texte reste blanc : on voit qu'on est dessus avant de cliquer.
   ───────────────────────────────────────────────────────────────────── */
.rd-cta-pied a, .rd-cta-pied button,
a.rd-btn, .rd-mega .rd-racc a[style*="background"]{
  transition:background-color .14s ease, color .14s ease, transform .14s ease,
             box-shadow .14s ease !important;
}
.rd-cta-pied a:hover, .rd-cta-pied a:focus-visible,
.rd-cta-pied button:hover, .rd-cta-pied button:focus-visible{
  background:#0a3556 !important; color:#fff !important;
  box-shadow:0 6px 20px rgba(10,53,86,.28) !important;
  transform:translateY(-1px);
}
.rd-cta-pied a:hover *, .rd-cta-pied button:hover *{ color:#fff !important }

/* ─────────────────────────────────────────────────────────────────────────
   25 · LA BANDE DE RÉASSURANCE, SOUS LE FORMULAIRE
   Quatre réponses aux quatre questions qu'on se pose devant un formulaire
   d'argent : combien de temps, mes données, ce que ça me coûte, suis-je
   engagé. Sur le bleu de la marque, pleine largeur, pour marquer une
   rupture nette avec la carte du simulateur.
   ───────────────────────────────────────────────────────────────────── */
.rd-rea{ background:var(--rd-bleu, #0e4c7e); color:#fff; padding:38px 32px 42px;
  margin:0 0 8px }
.rd-rea-int{ max-width:1280px; margin:0 auto }
.rd-rea-t{ margin:0 0 26px !important; padding:0 !important; border:0 !important;
  font-size:24px; font-weight:800; letter-spacing:-.02em; color:#fff !important;
  line-height:1.25 }
.rd-rea-g{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px }
.rd-rea-c{ border-top:2px solid rgba(255,255,255,.28); padding-top:16px }
.rd-rea-i{ display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px; background:rgba(255,255,255,.14);
  font-size:16px; margin:0 0 12px }
.rd-rea-h{ font-size:16.5px; font-weight:700; line-height:1.35; margin:0 0 7px;
  letter-spacing:-.012em }
.rd-rea-p{ margin:0 !important; font-size:15px; line-height:1.6;
  color:rgba(255,255,255,.82) }
@media (max-width:980px){ .rd-rea-g{ grid-template-columns:repeat(2, 1fr); gap:20px } }
@media (max-width:560px){ .rd-rea{ padding:28px 20px 30px }
  .rd-rea-g{ grid-template-columns:1fr; gap:16px } .rd-rea-t{ font-size:21px } }

/* ─────────────────────────────────────────────────────────────────────────
   26 · L'IMAGE DE TÊTE REDEVIENT VISIBLE
   Le voile de la maquette couvrait l'image à 97 % à gauche : on ne voyait
   plus une photo, on voyait un aplat beige. L'image passe à pleine
   opacité et le voile s'allège franchement — il reste assez dense sous le
   texte pour garder le contraste, et s'efface complètement à droite, là
   où il n'y a rien à lire.
   ───────────────────────────────────────────────────────────────────── */
[data-dc-tpl="562"]{ opacity:1 !important }
[data-dc-tpl="563"]{
  background:linear-gradient(90deg, rgba(251,247,239,.96) 0%,
                                    rgba(251,247,239,.93) 46%,
                                    rgba(251,247,239,.78) 66%,
                                    rgba(251,247,239,.34) 84%,
                                    rgba(251,247,239,.08) 100%) !important;
}
@media (max-width:900px){
  [data-dc-tpl="562"]{ opacity:.62 !important }
  [data-dc-tpl="563"]{
    background:linear-gradient(180deg, rgba(251,247,239,.80) 0%,
                                       rgba(251,247,239,.90) 40%,
                                       rgba(251,247,239,.96) 100%) !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   27 · LES ÉTIQUETTES DES NEUF DOSSIERS DEVIENNENT DES ACCORDÉONS
   Une étiquette était un mot posé là, sans fonction. Elle devient un
   bouton : le clic déroule sous la rangée un panneau pleine largeur qui
   porte deux paragraphes et un lien d'ancre vers la page de fond. La
   carte, elle, n'est plus un lien global — « Lire le dossier » prend ce
   rôle, sans quoi le clic sur l'étiquette partait sur la page.
   ───────────────────────────────────────────────────────────────────── */
.rd-do{ position:relative }
.rd-do:hover{ box-shadow:0 4px 18px rgba(20,16,8,.07) }

.rd-do-lire{ align-self:flex-start; font-size:14px; font-weight:700;
  color:#0e4c7e !important; text-decoration:none; letter-spacing:-.01em;
  border-bottom:1px solid rgba(14,76,126,.32); padding-bottom:1px }
.rd-do-lire:hover{ border-bottom-color:#0e4c7e; color:#0a3556 !important }

.rd-eti{ cursor:pointer; border:0; font-family:inherit; line-height:1.2;
  appearance:none; -webkit-appearance:none; text-align:left;
  transition:background .13s ease, color .13s ease }
.rd-eti:hover{ background:#e4d5b4 !important }
.rd-eti:focus-visible{ outline:2px solid #0e4c7e; outline-offset:2px }
.rd-eti[aria-expanded="true"]{ background:#0e4c7e !important; color:#fff !important }

/*  La boîte occupe toute la largeur de la grille : l'accordéon s'ouvre
    donc entre deux rangées de cartes, sans en déplacer aucune.  */
.rd-pan{ grid-column:1 / -1; display:none }
.rd-pan.on{ display:block }
[data-dc-tpl="190"] > .rd-pan-c{ grid-column:1 / -1 }
.rd-pan-c[hidden]{ display:none }
.rd-pan-c{ background:#f4ecda; border:1px solid #e3d5b6;
  border-left:4px solid #0e4c7e; padding:24px 28px 22px }
.rd-pan-h{ font-size:19px; font-weight:800; letter-spacing:-.02em;
  color:#1b1710; margin:0 0 12px }
.rd-pan-c p{ margin:0 0 11px !important; font-size:15.5px; line-height:1.62;
  color:#4a4438; max-width:78ch }
.rd-pan-l{ margin:14px 0 0 !important }
.rd-pan-a{ font-size:15px; font-weight:700; color:#0e4c7e !important;
  text-decoration:none; border-bottom:1px solid rgba(14,76,126,.3) }
.rd-pan-a:hover{ color:#0a3556 !important; border-bottom-color:#0a3556 }
.rd-pan-sep{ color:#a9762c; padding:0 4px }
@media (max-width:640px){
  .rd-pan-c{ padding:20px 18px 18px }
  .rd-pan-h{ font-size:17.5px }
}

/* ─────────────────────────────────────────────────────────────────────────
   28 · DEUX FONDS PHOTO SUR L'ACCUEIL
   La photo passe derrière le texte à très basse opacité, doublée d'un voile
   beige : on doit sentir une image, pas la regarder. Le contraste du texte
   ne bouge pas d'un point.
   ───────────────────────────────────────────────────────────────────── */
.rd-fond{ position:relative; z-index:0; padding-bottom:58px !important }
.rd-fond > *{ position:relative; z-index:2 }
.rd-fond .rd-fond-i{ position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 32%;
  background-repeat:no-repeat; opacity:.13 }
.rd-fond::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(251,247,239,.86) 0%,
                                     rgba(251,247,239,.66) 34%,
                                     rgba(251,247,239,.80) 72%,
                                     rgba(251,247,239,.96) 100%) }
@media (max-width:640px){
  .rd-fond .rd-fond-i{ opacity:.09 }
}

/* ─────────────────────────────────────────────────────────────────────────
   29 · LES DEUX ACCORDÉONS
   Un article de rachat de crédit porte deux sortes de matière : celle qu'on
   lit, et celle qu'on consulte. La seconde — décompte de frais, tableau
   d'amortissement, chronologie d'une marque, référence d'un article de code
   — n'a pas à occuper l'écran de celui qui cherche d'abord un montant et
   une durée. Elle passe sous un volet.

   Deux styles, et deux seulement :
   · l'accordéon ORDINAIRE replie du texte. Fond blanc, un filet autour du
     groupe, l'intitulé se lit comme un sous-titre — pas comme une carte
     posée au milieu de l'article ;
   · l'accordéon BLEU annonce des chiffres. Il ne sert qu'à ça. Employé
     partout, il ne signalerait plus rien et personne ne cliquerait.

   La FAQ garde son gabarit d'origine : elle est identifiée par son h2 et
   n'a pas besoin d'un cadre de plus.
   ───────────────────────────────────────────────────────────────────── */
[data-dc-tpl="1217"]:not(.rd-acc-bleu):not(#faq + *){
  border:1px solid var(--rd-ligne, #ede8de);
  background:#fff; gap:0 !important; margin:22px 0 26px !important;
}
[data-dc-tpl="1217"]:not(.rd-acc-bleu) > details{
  background:#fff !important; border:0 !important;
  border-top:1px solid var(--rd-ligne, #ede8de) !important;
}
[data-dc-tpl="1217"]:not(.rd-acc-bleu) > details:first-child{ border-top:0 !important }
[data-dc-tpl="1217"] > details > summary{
  cursor:pointer; list-style:none; position:relative;
  padding:15px 18px !important;
  font-size:17px !important; font-weight:700 !important;
  letter-spacing:-.015em; line-height:1.4;
  color:var(--rd-encre, #14171e) !important;
  transition:color .13s ease, background .13s ease;
}
[data-dc-tpl="1217"] > details > summary::-webkit-details-marker{ display:none }
/*  La maquette pose déjà un « + » dans un carré à droite. On ne lui
    ajoute pas un chevron : deux indicateurs pour un seul geste.
    Le « + » devient « − » à l'ouverture, par rotation.  */
[data-dc-tpl="1217"] > details[open] > summary .plus{ transform:rotate(45deg) }
[data-dc-tpl="1217"] > details > summary:hover{ color:var(--rd-brun, #8a5f22) !important }
[data-dc-tpl="1217"] > details > summary:hover .plus{
  background:var(--rd-brun, #8a5f22) !important; color:#fff !important }
[data-dc-tpl="1217"] > details > *:not(summary){ padding:0 18px 18px !important }

/*  Le volet bleu : celui qui cache un tableau ou un calcul.  */
.rd-acc-bleu{ border:0 !important; gap:0 !important; margin:22px 0 28px !important }
.rd-acc-bleu > details{
  border:2px solid var(--rd-bleu, #0e4c7e) !important; background:#fff !important;
}
.rd-acc-bleu > details > summary{
  background:var(--rd-bleu, #0e4c7e) !important; color:#fff !important;
  font-weight:800 !important; padding:14px 18px !important;
}
.rd-acc-bleu > details > summary > span{ color:#fff !important;
  font-size:16.5px !important }
.rd-acc-bleu > details > summary .plus{
  background:rgba(255,255,255,.18) !important; color:#fff !important }
.rd-acc-bleu > details > summary:hover .plus{
  background:#fff !important; color:var(--rd-bleu, #0e4c7e) !important }
.rd-acc-bleu > details > summary:hover{
  background:var(--rd-bleu-f, #0a3a61) !important; color:#fff !important;
}
.rd-acc-bleu > details > *:not(summary){ padding:16px 18px 18px !important }
.rd-acc-bleu table{ margin:0 !important }

@media (max-width:640px){
  [data-dc-tpl="1217"] > details > summary{ font-size:16px !important;
    padding:13px 14px !important }
  [data-dc-tpl="1217"] > details > *:not(summary){ padding:0 14px 15px !important }
  .rd-acc-bleu > details > *:not(summary){ padding:14px 14px 15px !important }
  .rd-acc-bleu table{ display:block; overflow-x:auto }
}