/* ═══════════════════════════════════════════════════════════════════
   IGOR — Centre de ressources (/ressources)

   Theme SOMBRE, aligne sur le produit. Premiere version en fond clair
   (facon Stripe Docs) : plus confortable pour du texte long, mais elle
   faisait rupture. Un visiteur qui arrive de Google, lit un guide, puis
   clique « Essayer » changeait d'univers en chemin, et la coherence de
   marque compte plus au moment de convertir qu'un gain marginal de
   confort de lecture.

   Un fond sombre se lit tres bien en format long a trois conditions,
   toutes appliquees ici :
     1. jamais de blanc pur sur noir pur (halo lumineux autour des
        lettres) : texte #E4E2EE sur #0D0F17 ;
     2. graisse legerement plus basse qu'en clair, un texte clair sur
        fond sombre paraissant toujours plus gras qu'il n'est ;
     3. interlignage plus genereux (1,8) et largeur de lecture bornee.

   Une seule couleur vive : le violet IGOR #7B5CFF, exactement les memes
   valeurs que igor.css.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --d-fond:      #13131D;   /* gris tres fonce, pas un noir plat */
  --d-fond-2:    #181926;
  --d-fond-3:    #1E1F2E;
  --d-texte:     #EFEEF6;   /* corps plus lumineux */
  --d-texte-2:   #BCBCD2;
  --d-texte-3:   #8B8DA6;
  --d-line:      #2A2B3D;
  --d-line-2:    #3A3C55;
  --d-violet:    #7B5CFF;
  --d-violet-d:  #A896FF;   /* en sombre, l'accent doit MONTER en clarte */
  --d-violet-40: #6B4FE8;
  --d-violet-05: rgba(123, 92, 255, .13);
  --d-ok:        #4ADE80;
  --d-rayon:     14px;
  --d-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --d-lisiere:   1200px;
  --d-lecture:   720px;
  --d-ombre:     0 1px 2px rgba(0, 0, 0, .30),
                 0 8px 28px -18px rgba(0, 0, 0, .60);
  --d-ombre-h:   0 2px 6px rgba(0, 0, 0, .35),
                 0 18px 44px -22px rgba(123, 92, 255, .40);
  --d-surface:   #1B1C2A;   /* cartes : nettement AU-DESSUS du fond */
  --d-surface-2: #212234;   /* cartes de la colonne laterale */
  --d-bord-violet: rgba(123, 92, 255, .22);
  --d-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto,
            "Helvetica Neue", Arial, sans-serif;
}


*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  font-family: var(--d-font);
  background: var(--d-fond);
  color: var(--d-texte);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

.d-skip {
  position: absolute; left: -9999px; top: 8px; z-index: 99;
  background: var(--d-violet); color: #fff; padding: 10px 16px;
  border-radius: 8px;
}
.d-skip:focus { left: 12px; }

.d-wrap { max-width: var(--d-lisiere); margin: 0 auto; padding: 0 24px; }
.d-sect { margin-top: clamp(48px, 7vw, 88px); }

/* ── Barre de navigation ─────────────────────────────────────────── */
.d-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(19, 19, 29, .84);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--d-line);
}
.d-nav-in {
  max-width: var(--d-lisiere); margin: 0 auto; padding: 13px 24px;
  display: flex; align-items: center; gap: 26px;
}
.d-marque { display: flex; align-items: center; gap: 9px; font-weight: 750;
  letter-spacing: -.01em; font-size: 16px; }
.d-marque-sep { color: var(--d-line-2); font-weight: 400; }
.d-marque-sec { color: var(--d-texte-3); font-weight: 550; }
.d-oeil {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #fff 0 18%, var(--d-violet) 19% 46%, #14161F 47% 100%);
  box-shadow: 0 0 0 2px #EDE9E3 inset, 0 2px 8px -2px rgba(123, 92, 255, .5);
}
.d-oeil-mini { width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  vertical-align: -2px; margin-right: 6px;
  background: radial-gradient(circle at 50% 50%,
    #fff 0 18%, var(--d-violet) 19% 46%, #14161F 47% 100%); }
.d-nav-liens { display: flex; gap: 20px; margin-left: 6px; flex: 1;
  overflow-x: auto; scrollbar-width: none; }
.d-nav-liens::-webkit-scrollbar { display: none; }
.d-nav-liens a { font-size: 14px; color: var(--d-texte-2); white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent; transition: color .18s; }
.d-nav-liens a:hover { color: var(--d-texte); }
.d-nav-liens a[aria-current="page"] { color: var(--d-violet);
  border-bottom-color: var(--d-violet); }

/* ── Boutons ─────────────────────────────────────────────────────── */
.d-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 620; font-size: 14.5px; padding: 11px 20px;
  border-radius: 11px; border: 1px solid transparent; cursor: pointer;
  transition: transform .18s var(--d-ease), box-shadow .18s var(--d-ease),
              background .18s;
}
.d-btn-primaire {
  background: linear-gradient(135deg, var(--d-violet), var(--d-violet-d));
  color: #fff; box-shadow: 0 8px 22px -12px rgba(91, 65, 224, .8);
}
.d-btn-primaire:hover { transform: translateY(-1px);
  box-shadow: 0 14px 32px -14px rgba(91, 65, 224, .9); }
.d-btn-lg { font-size: 15.5px; padding: 14px 26px; border-radius: 13px; }
.d-nav-cta { flex: none; }
@media (max-width: 720px) { .d-nav-cta { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────── */
.d-hero {
  position: relative; overflow: hidden;
  padding: clamp(56px, 9vw, 104px) 0 clamp(28px, 4vw, 44px);
  text-align: center;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(123,92,255,.16) 0%, transparent 72%);
  border-bottom: 1px solid var(--d-line);
}
.d-hero h1 {
  font-size: clamp(38px, 6vw, 60px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 780;
}
.d-hero-lede {
  max-width: 640px; margin: 20px auto 0; font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--d-texte-2); line-height: 1.6;
}
.d-recherche {
  position: relative; display: flex; align-items: center; gap: 12px;
  max-width: 680px; margin: 38px auto 0; padding: 0 20px;
  background: var(--d-surface); border: 1px solid var(--d-line-2);
  border-radius: 16px; box-shadow: var(--d-ombre);
  transition: box-shadow .2s, border-color .2s;
}
.d-recherche:focus-within { border-color: var(--d-violet-40);
  box-shadow: 0 0 0 4px rgba(123, 92, 255, .12), var(--d-ombre-h); }
.d-recherche svg { color: var(--d-texte-3); flex: none; }
.d-recherche input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16.5px; padding: 19px 0; color: var(--d-texte);
}
.d-recherche input::placeholder { color: var(--d-texte-3); }
.d-recherche kbd {
  flex: none; font: inherit; font-size: 12px; color: var(--d-texte-3);
  border: 1px solid var(--d-line-2); border-radius: 6px; padding: 2px 8px;
  background: var(--d-fond-2);
}
@media (max-width: 620px) { .d-recherche kbd { display: none; } }
.d-resultats {
  max-width: 680px; margin: 10px auto 0; text-align: left;
  border: 1px solid var(--d-line); border-radius: 14px; background: var(--d-surface);
  box-shadow: var(--d-ombre); overflow: hidden;
}
.d-res { display: block; padding: 13px 18px; border-bottom: 1px solid var(--d-line); }
.d-res:last-child { border-bottom: 0; }
.d-res:hover { background: var(--d-violet-05); }
.d-res b { display: block; font-size: 14.5px; font-weight: 620; }
.d-res span { display: block; font-size: 13px; color: var(--d-texte-3);
  margin-top: 2px; }

/* ── Cartes de categories ────────────────────────────────────────── */
.d-cats {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
}
.d-cat {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  padding: 26px 24px 22px; border-radius: var(--d-rayon);
  background: var(--d-surface); border: 1px solid var(--d-line);
  transition: transform .2s var(--d-ease), box-shadow .2s var(--d-ease),
              border-color .2s;
}
.d-cat:hover { transform: translateY(-3px); border-color: var(--d-violet-40);
  box-shadow: var(--d-ombre-h); }
.d-cat-emo { font-size: 26px; line-height: 1; }
.d-cat-emo-xl { font-size: 42px; line-height: 1; display: block; margin-bottom: 10px; }
.d-cat-nom { font-size: 18px; font-weight: 700; letter-spacing: -.015em; }
.d-cat-res { font-size: 14px; color: var(--d-texte-2); line-height: 1.55; }
.d-cat-n { margin-top: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--d-violet); }

/* ── Listes d'articles ───────────────────────────────────────────── */
.d-h2 { font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.025em;
  font-weight: 730; margin-bottom: 20px; }
.d-liste { display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.d-item {
  display: flex; flex-direction: column; gap: 5px; padding: 20px 22px;
  border: 1px solid var(--d-line); border-radius: var(--d-rayon);
  background: var(--d-surface); box-shadow: var(--d-ombre); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.d-item:hover { border-color: var(--d-violet-40); box-shadow: var(--d-ombre-h);
  transform: translateY(-2px); }
.d-item-cat { font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--d-violet); }
.d-item-t { font-size: 16.5px; font-weight: 650; letter-spacing: -.015em; }
.d-item-d { font-size: 14px; color: var(--d-texte-2); line-height: 1.55; }
.d-item-m { font-size: 12.5px; color: var(--d-texte-3); margin-top: 4px; }
.d-vide { color: var(--d-texte-2); padding: 18px; font-size: 15px; }
.d-vide a { color: var(--d-violet); text-decoration: underline; }

/* ── Fil d'Ariane + tete de categorie ────────────────────────────── */
.d-fil { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-size: 13px; color: var(--d-texte-3); padding-top: 26px; }
.d-fil a:hover { color: var(--d-violet); }
.d-fil span[aria-current] { color: var(--d-texte-2); }
.d-cat-tete { padding-top: 26px; max-width: 760px; }
.d-cat-tete h1 { font-size: clamp(32px, 4.6vw, 46px); letter-spacing: -.03em;
  font-weight: 770; line-height: 1.1; }
.d-cat-tete .d-hero-lede { margin: 16px 0 0; text-align: left; }
.d-cat-compte { margin-top: 14px; font-size: 13px; font-weight: 600;
  color: var(--d-violet); }

/* ── Article : grille sommaire + texte ───────────────────────────── */
.d-art-grille {
  max-width: var(--d-lisiere); margin: 0 auto; padding: 22px 24px 0;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px;
  align-items: start;
}
@media (max-width: 1000px) {
  /* minmax(0, 1fr) et non 1fr : une colonne de grille refuse par defaut de
     descendre sous la largeur intrinseque de son contenu. Sans cela, la
     scene de signature (520 px minimum) elargissait la colonne et faisait
     deborder toute la page en 375 px. Mesure : document a 574 px pour une
     fenetre de 375. */
  .d-art-grille { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
.d-art { min-width: 0; max-width: min(var(--d-lecture), 100%); }
.d-signature { max-width: 100%; }
.d-somm { position: sticky; top: 84px; }
@media (max-width: 1000px) { .d-somm { position: static; } }
.d-somm-boite { border: 1px solid var(--d-bord-violet);
  border-radius: var(--d-rayon); background: var(--d-surface-2);
  padding: 16px 18px; box-shadow: var(--d-ombre); }
.d-somm-boite summary { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--d-texte-3); cursor: pointer;
  list-style: none; }
.d-somm-boite summary::-webkit-details-marker { display: none; }
.d-somm-boite ol { list-style: none; margin-top: 12px; display: grid; gap: 3px; }
.d-somm-boite a { display: block; font-size: 13.5px; color: var(--d-texte-2);
  padding: 5px 0 5px 12px; border-left: 2px solid var(--d-line);
  line-height: 1.45; transition: color .15s, border-color .15s; }
.d-somm-boite a:hover { color: var(--d-texte); }
.d-somm-boite a.actif { color: var(--d-violet); border-left-color: var(--d-violet);
  font-weight: 600; }
/* La carte d'appel : un vrai bloc, pas un lien discret. Elle suit le
   defilement avec le sommaire, parce que sur un article de dix minutes un
   bouton place en haut n'existe plus au moment ou le lecteur est convaincu. */
.d-somm-cta { display: block; margin-top: 16px; padding: 20px 18px 18px;
  border-radius: 16px; text-align: left;
  background: linear-gradient(165deg, rgba(123,92,255,.18), var(--d-surface-2) 72%);
  border: 1px solid rgba(123,92,255,.34);
  box-shadow: 0 18px 44px -26px rgba(123,92,255,.55), var(--d-ombre);
  transition: transform .2s var(--d-ease), box-shadow .2s var(--d-ease); }
.d-somm-cta:hover { transform: translateY(-2px);
  box-shadow: 0 24px 56px -24px rgba(123,92,255,.75); }
.d-somm-cta .dc-ic { display: block; font-size: 20px; line-height: 1;
  margin-bottom: 10px; }
.d-somm-cta b { display: block; font-size: 15.5px; font-weight: 700;
  color: #FBFAFF; letter-spacing: -.015em; }
.d-somm-cta em { display: block; font-style: normal; font-size: 13px;
  color: var(--d-texte-2); line-height: 1.55; margin-top: 7px; }
.d-somm-cta i { display: block; font-style: normal; margin-top: 14px;
  padding: 11px 14px; border-radius: 10px; text-align: center;
  font-size: 14px; font-weight: 650; color: #fff;
  background: linear-gradient(135deg, var(--d-violet), #5B41E0);
  box-shadow: 0 10px 24px -12px rgba(91,65,224,.9); }
.d-somm-cta small { display: block; margin-top: 10px; text-align: center;
  font-size: 11.5px; color: var(--d-texte-3); }

.d-art { max-width: var(--d-lecture); font-size: 17px; }
/* Lecture longue en sombre : interlignage plus genereux et graisse
   des titres legerement reduite (un texte clair sur fond sombre
   parait plus gras qu'il ne l'est). */
.d-s p, .d-intro { line-height: 1.8; }
.d-art-tete h1 { font-weight: 750; color: #FBFAFF; }
.d-h2, .d-s h2, .d-s h3, .d-cat-nom, .d-item-t { color: #FBFAFF; }
.d-s h2 { font-weight: 700; }
.d-art-tete { padding-bottom: 26px; border-bottom: 1px solid var(--d-line); }
.d-art-tete h1 { font-size: clamp(31px, 4.4vw, 44px); line-height: 1.12;
  letter-spacing: -.032em; font-weight: 780; margin: 14px 0 0; }
.d-art-chapo { margin-top: 16px; font-size: 18.5px; color: var(--d-texte-2);
  line-height: 1.6; }
.d-art-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 9px;
  align-items: center; font-size: 13.5px; color: var(--d-texte-3); }
.d-auteur { display: inline-flex; align-items: center; font-weight: 600;
  color: var(--d-texte-2); }
.d-pastille { display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 5px 11px;
  border-radius: 999px; }
.d-pastille-violet { color: var(--d-violet-d); background: var(--d-violet-05); }
.d-pastille-gris { color: var(--d-texte-3); background: var(--d-fond-3); }

.d-intro { margin-top: 28px; font-size: 18px; line-height: 1.7;
  color: var(--d-texte); }
.d-s { margin-top: 44px; scroll-margin-top: 90px; }
.d-s h2 { font-size: clamp(22px, 2.7vw, 28px); letter-spacing: -.025em;
  font-weight: 730; line-height: 1.2; margin-bottom: 14px; }
.d-s h3 { font-size: 19px; font-weight: 680; margin: 26px 0 10px; }
.d-s p { margin-top: 14px; color: var(--d-texte); line-height: 1.75; }
.d-ul, .d-ol { margin: 16px 0 0 20px; display: grid; gap: 9px; }
.d-ul li, .d-ol li { line-height: 1.7; padding-left: 4px; }
.d-ul li::marker { color: var(--d-violet); }
.d-ol li::marker { color: var(--d-violet); font-weight: 700; }

.d-encadre, .d-conseil {
  margin-top: 22px; padding: 18px 20px; border-radius: var(--d-rayon);
  background: var(--d-fond-2); border: 1px solid var(--d-line);
  font-size: 15.5px;
}
.d-encadre b { display: block; margin-bottom: 6px; font-weight: 680; }
.d-encadre p, .d-conseil p { margin: 0; color: var(--d-texte-2); line-height: 1.7; }
.d-conseil { background: var(--d-violet-05); border-color: rgba(123,92,255,.30); }
.d-conseil-t { display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--d-violet-d);
  margin-bottom: 6px; }
.d-exemple { margin-top: 22px; border: 1px solid var(--d-line);
  border-radius: var(--d-rayon); overflow: hidden; background: var(--d-fond-2); }
.d-exemple figcaption { font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--d-texte-3); padding: 11px 18px;
  border-bottom: 1px solid var(--d-line); background: var(--d-surface); }
.d-exemple pre { padding: 18px; font-family: var(--d-font); font-size: 15px;
  line-height: 1.7; white-space: pre-wrap; color: var(--d-texte-2); }
.d-tab-wrap { margin-top: 22px; overflow-x: auto; border: 1px solid var(--d-line);
  border-radius: var(--d-rayon); }
.d-tab { width: 100%; border-collapse: collapse; font-size: 15px; }
.d-tab th, .d-tab td { padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--d-line); }
.d-tab th { background: var(--d-fond-2); font-weight: 650; font-size: 13.5px; }
.d-tab tr:last-child td { border-bottom: 0; }

.d-check { list-style: none; margin-top: 18px; display: grid; gap: 10px; }
.d-check li { position: relative; padding-left: 32px; line-height: 1.7; }
.d-check li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--d-violet-05);
  border: 1px solid rgba(123,92,255,.34);
}
.d-check li::after {
  content: ""; position: absolute; left: 6px; top: 10px;
  width: 8px; height: 4px; border-left: 2px solid var(--d-violet);
  border-bottom: 2px solid var(--d-violet); transform: rotate(-45deg);
}
.d-faq { margin-top: 12px; border: 1px solid var(--d-line);
  border-radius: var(--d-rayon); background: var(--d-surface); overflow: hidden; }
.d-faq summary { padding: 16px 20px; font-weight: 620; cursor: pointer;
  font-size: 16px; list-style: none; }
.d-faq summary::-webkit-details-marker { display: none; }
.d-faq summary::after { content: "+"; float: right; color: var(--d-violet);
  font-weight: 700; }
.d-faq[open] summary::after { content: "−"; }
.d-faq p { padding: 0 20px 18px; color: var(--d-texte-2); line-height: 1.7; }

/* ── Blocs de conversion ─────────────────────────────────────────── */
.d-cta {
  margin-top: 40px; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 26px; align-items: center; padding: 30px;
  border-radius: 20px; border: 1px solid rgba(123,92,255,.30);
  background: linear-gradient(135deg, rgba(123,92,255,.10) 0%, var(--d-fond-2) 62%);
  box-shadow: var(--d-ombre);
}
.d-cta h2 { font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -.025em;
  font-weight: 740; line-height: 1.2; }
.d-cta p { margin-top: 10px; color: var(--d-texte-2); font-size: 15.5px;
  line-height: 1.65; }
.d-cta .d-btn { margin-top: 20px; }
.d-cta-note { display: block; margin-top: 10px; font-size: 12.5px;
  color: var(--d-texte-3); }
.d-cta-illu { display: grid; place-items: center; }
.d-illu { width: 100%; max-width: 220px; height: auto; }
@media (max-width: 760px) {
  .d-cta { grid-template-columns: 1fr; }
  .d-cta-illu { order: -1; }
}

.d-av-ap { margin-top: 46px; }
.d-av-ap h2 { font-size: clamp(22px, 2.7vw, 28px); letter-spacing: -.025em;
  font-weight: 730; margin-bottom: 18px; }
.d-av-ap-grille { display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 18px; align-items: stretch; }
.d-av, .d-ap { padding: 22px; border-radius: var(--d-rayon);
  border: 1px solid var(--d-line); background: var(--d-fond-2); }
.d-ap { background: var(--d-surface); border-color: rgba(123,92,255,.30); box-shadow: var(--d-ombre); }
.d-av ul, .d-ap ul { list-style: none; margin-top: 14px; display: grid; gap: 10px;
  font-size: 15px; line-height: 1.6; }
.d-av li { color: var(--d-texte-3); padding-left: 20px; position: relative; }
.d-av li::before { content: "—"; position: absolute; left: 0; }
.d-ap li { color: var(--d-texte); padding-left: 20px; position: relative; }
.d-ap li::before { content: "✓"; position: absolute; left: 0;
  color: var(--d-ok); font-weight: 700; }
.d-av-fleche { display: grid; place-items: center; color: var(--d-violet-40); }
@media (max-width: 780px) {
  .d-av-ap-grille { grid-template-columns: 1fr; }
  .d-av-fleche { transform: rotate(90deg); }
}

.d-pourquoi { margin-top: 46px; }
.d-pourquoi h2 { font-size: clamp(22px, 2.7vw, 28px); letter-spacing: -.025em;
  font-weight: 730; margin-bottom: 18px; }
.d-pourquoi-grille { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.d-carte-p { padding: 22px; border: 1px solid var(--d-line);
  border-radius: var(--d-rayon); background: var(--d-surface); }
.d-carte-p h3 { font-size: 16px; font-weight: 680; margin: 12px 0 6px; }
.d-carte-p p { font-size: 14px; color: var(--d-texte-2); line-height: 1.6; }
.d-ic { display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--d-violet-05); }
.d-illu-ic { width: 28px; height: 28px; }

.d-stats { margin-top: 40px; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.d-stat { padding: 26px 22px; border-radius: var(--d-rayon);
  border: 1px solid var(--d-line); background: var(--d-fond-2);
  text-align: center; }
.d-stat-val { font-size: clamp(26px, 3.4vw, 34px); font-weight: 780;
  letter-spacing: -.03em; color: var(--d-violet-d); line-height: 1.1; }
.d-stat-lib { margin-top: 6px; font-size: 14px; color: var(--d-texte-2);
  line-height: 1.5; }

.d-cta-final { margin-top: 52px; text-align: center; padding: 46px 26px;
  border-radius: 22px; border: 1px solid rgba(123,92,255,.30);
  background: radial-gradient(70% 120% at 50% 0%, rgba(123,92,255,.13) 0%, var(--d-fond-2) 70%); }
.d-cta-final h2 { font-size: clamp(24px, 3.2vw, 32px); letter-spacing: -.03em;
  font-weight: 760; }
.d-cta-final p { max-width: 460px; margin: 12px auto 22px;
  color: var(--d-texte-2); }
.d-lies { margin-top: 52px; }

/* ── Pied de page ────────────────────────────────────────────────── */
.d-pied { margin-top: clamp(64px, 9vw, 110px); border-top: 1px solid var(--d-line);
  background: var(--d-fond-2); }
.d-pied-in { max-width: var(--d-lisiere); margin: 0 auto;
  padding: 46px 24px 30px; display: grid; gap: 30px;
  grid-template-columns: 1.4fr repeat(3, 1fr); }
.d-pied-marque { font-weight: 750; font-size: 17px; }
.d-pied p { margin-top: 8px; font-size: 14px; color: var(--d-texte-3);
  max-width: 280px; line-height: 1.6; }
.d-pied h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--d-texte-3); margin-bottom: 11px; }
.d-pied a { display: block; font-size: 14px; color: var(--d-texte-2);
  padding: 4px 0; }
.d-pied a:hover { color: var(--d-violet); }
.d-pied-bas { max-width: var(--d-lisiere); margin: 0 auto;
  padding: 18px 24px 34px; font-size: 13px; color: var(--d-texte-3);
  border-top: 1px solid var(--d-line); }
@media (max-width: 820px) {
  .d-pied-in { grid-template-columns: 1fr 1fr; }
}

/* Même règle que sur le site vitrine : la flèche partout, le curseur
   d'écriture uniquement dans le champ de recherche. Le texte des guides
   reste sélectionnable, seule l'icône change. */
body { cursor: default; }
input[type="search"], input[type="text"], textarea { cursor: text; }
a[href], button, summary, label[for] { cursor: pointer; }

/* ── Visuel de signature en tete d'article ──────────────────────────
   Retour de Mohamed : « il manque un visuel signature, aujourd'hui on
   voit essentiellement du texte ». La scene montre la chaine complete
   (l'offre lue, les mots attendus reperes, le score, le CV reecrit) en
   une seconde, avant meme la premiere phrase. */
.d-signature {
  margin: 28px 0 4px;
  padding: 20px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(123, 92, 255, .10), var(--d-surface) 68%);
  border: 1px solid var(--d-bord-violet);
  box-shadow: var(--d-ombre);
}
.d-signature svg { width: 100%; height: auto; display: block; }
@media (max-width: 620px) {
  /* En dessous de 620 px les etiquettes deviennent illisibles : on garde
     la scene mais on la laisse defiler plutot que de l'ecraser. */
  .d-signature { overflow-x: auto; padding: 16px 14px; }
  .d-signature svg { min-width: 520px; }
}

/* Entree de connexion dans la barre du centre de ressources. Elle n'y
   figurait pas du tout : un lecteur venu de Google et deja client devait
   descendre jusqu'au pied de page pour entrer. Elle reste un lien texte,
   pour ne pas rivaliser avec « Essayer gratuitement », et elle SURVIT sur
   telephone la ou le bouton d'essai, lui, se retire. */
.d-nav-connexion { flex: none; font-size: 14px; color: var(--d-texte-2);
  white-space: nowrap; padding: 6px 0; transition: color .18s; }
.d-nav-connexion:hover { color: var(--d-texte); }
@media (max-width: 720px) { .d-nav-connexion { font-size: 13px; } }