/* ══════════════════════════════════════════════════════════════
   LEAD MAGNETS — SOCLE
   Feuille du module v9/leadmagnets/. Elle porte ce qui ne depend
   d AUCUN type de ressource : la grille, la landing, les apercus
   (jauge, barres, releve tronque), la coquille de lecture des pages
   de parcours et, depuis qu il existe deux types de quiz, la
   composition du QUESTIONNAIRE lui-meme (derniere section du
   fichier). Ce qui reste propre au diagnostic complet vit dans
   big_quizz_leadmagnets/assets/big_quizz.css, chargee en plus.
   Elle est chargee A LA DEMANDE, par les seules pages du module :
   voir $page_styles dans leadmagnets/router.php. Elle suppose donc
   style.css deja chargee, dont elle lit les variables --gdn-*.
   Tout reste dans la grammaire du site : pilules, rayon 25px pour
   les cartes, 15px pour les elements internes, vert de marque
   comme seule couleur d action.
   ══════════════════════════════════════════════════════════════ */

/* ── Grille des ressources ──────────────────────────────────────── */
.gdn-ressources { background: var(--gdn-bg); }

.gdn-res-badge {
  background: rgba(25,135,84,.1);
  color: var(--gdn-green);
  font-size: .8125rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 30px;
  display: inline-block;
  white-space: nowrap;
}

/* Etiquettes empilees d une carte : la nature de la ressource sur la
   premiere ligne, sa duree sur la seconde. Empilees et non alignees, pour
   que la duree tombe toujours au meme endroit d une carte a l autre et se
   lise en balayant la colonne. */
.gdn-res-etiquettes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Troisieme registre de pastille de la grille, apres le bleu de .gdn-tag
   (la nature) et le vert de .gdn-res-badge (la gratuite) : neutre et
   cercle d un trait, la duree est une information, pas un argument. */
.gdn-res-duree {
  background: #fff;
  border: 1px solid var(--gdn-border);
  color: var(--gdn-black);
  font-size: .8125rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.gdn-res-duree i { color: var(--gdn-green); font-size: .75rem; }

.gdn-res-filter {
  background: #fff;
  border: 1px solid var(--gdn-border);
  color: var(--gdn-text-sec);
  font-size: .875rem;
  padding: 8px 20px;
  border-radius: 999px;
  transition: background var(--gdn-transition), color var(--gdn-transition), border-color var(--gdn-transition);
}
.gdn-res-filter:hover { border-color: var(--gdn-green); color: var(--gdn-green); }
.gdn-res-filter.active { background: var(--gdn-green); border-color: var(--gdn-green); color: #fff; }

.gdn-res-card {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  overflow: hidden;
  color: var(--gdn-black);
  transition: transform var(--gdn-transition), box-shadow var(--gdn-transition);
}
.gdn-res-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.gdn-res-card__body { padding: 28px; display: flex; flex-direction: column; flex: 1 1 auto; }
.gdn-res-card__title { font-size: 1.25rem; font-weight: 500; line-height: 1.35; }
.gdn-res-card__kicker { font-size: .875rem; color: var(--gdn-grey); }
.gdn-res-card__foot {
  padding: 18px 28px;
  border-top: 1px solid var(--gdn-border);
}

/* Carte vedette : reponse a une grille d'un seul element, qui serait faible. */
.gdn-res-vedette {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  overflow: hidden;
}
.gdn-res-vedette__body { padding: 48px; }
.gdn-res-vedette__title { font-size: 1.75rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
.gdn-res-vedette__kicker { font-size: .9375rem; color: var(--gdn-grey); }
.gdn-res-vedette__aside {
  background: var(--gdn-bg);
  border-left: 1px solid var(--gdn-border);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gdn-res-vedette__aside-label {
  font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gdn-grey);
  align-self: flex-start;
}
@media (max-width: 991.98px) {
  .gdn-res-vedette__body { padding: 32px; }
  .gdn-res-vedette__aside { border-left: none; border-top: 1px solid var(--gdn-border); padding: 32px; }
}

/* ── Elements partages (apercus, jauges, barres) ────────────────── */
.gdn-lm-jauge, .gdn-lm-radar { max-width: 100%; height: auto; }

/* Jauge a remplissage (modele arc-meter) : le score et le palier sortent du
   SVG pour redevenir du texte HTML, remonte sous l arc via --jauge-leve
   (calculee cote PHP a l echelle de la largeur demandee). */
.gdn-lm-jauge-carte { text-align: center; }
.gdn-lm-jauge-carte .gdn-lm-jauge { display: block; margin: 0 auto; }
.gdn-lm-jauge__lecture {
  margin-top: calc(-1 * var(--jauge-leve, 34px));
  font-variant-numeric: tabular-nums;
}
.gdn-lm-jauge__valeur { font-size: 30px; font-weight: 500; color: var(--gdn-black); line-height: 1; }
.gdn-lm-jauge__max { font-size: 13px; font-weight: 500; color: var(--gdn-grey); margin-left: 2px; }
.gdn-lm-jauge__statut {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 6px;
}
.gdn-lm-jauge__point { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.gdn-lm-jauge__libelle { font-size: 13px; font-weight: 500; }

.gdn-lm-preview {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
  padding: 32px;
}
.gdn-lm-preview__label {
  font-size: .75rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gdn-grey);
}

.gdn-lm-bar__label { font-size: .875rem; color: var(--gdn-text-sec); }
.gdn-lm-bar__value { font-size: .875rem; font-weight: 500; color: var(--gdn-black); white-space: nowrap; }
.gdn-lm-bar__track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(119,119,119,.18);
  overflow: visible;
}
.gdn-lm-bar__fill { display: block; height: 8px; border-radius: 999px; }
/* Repere de lecture, en pointilles : c'est un point de comparaison, pas une norme. */
.gdn-lm-bar__seuil {
  position: absolute; top: -3px; bottom: -3px;
  width: 0;
  border-left: 1px dashed var(--gdn-black);
  opacity: .55;
}

.gdn-lm-note { font-size: .8125rem; color: var(--gdn-grey); line-height: 1.6; }
.gdn-lm-note a { color: var(--gdn-grey); text-decoration: underline; }

/* Promesse de confidentialite, posee la ou le visiteur donne quelque chose.
   Le cadenas vert la distingue des notes grises sans en faire une alerte :
   c est une assurance, pas un avertissement. */
.gdn-lm-securite {
  font-size: .8125rem;
  color: var(--gdn-text-sec);
  line-height: 1.6;
}
.gdn-lm-securite i { color: var(--gdn-green); margin-right: .4rem; }

/* Formes sous lesquelles le rapport arrive, sous le bloc d appel a l action
   du releve. Discret : c est une precision, pas une promesse de plus. */
.gdn-lm-formats {
  font-size: .875rem;
  color: var(--gdn-text-sec);
}
.gdn-lm-formats i { color: var(--gdn-green); margin-right: .2rem; }

/* Variante encadree, pour les blocs d information des pages publiques
   (grille des ressources, landing) ou elle porte un paragraphe entier. */
.gdn-lm-securite--encart {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  background: #fff;
}
.gdn-lm-securite--encart i { font-size: 1rem; margin-right: 0; margin-top: .15rem; }

/* Cartes du bloc « Ce que deviennent vos reponses » (landing). Meme rayon et
   meme filet que .gdn-lm-etape : c est une variante de la meme famille, avec
   une icone en tete de ligne plutot qu un numero. */
.gdn-lm-securite-carte {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.75rem;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  background: #fff;
}
.gdn-lm-securite-carte > i {
  flex: 0 0 auto;
  font-size: 1.15rem;
  color: var(--gdn-green);
  margin-top: .2rem;
}
.gdn-lm-securite-carte__titre { font-size: 1.0625rem; font-weight: 500; }


/* ── Landing : sections ─────────────────────────────────────────── */
/* Le header minimal n'est pas fixe : le hero n'a pas besoin de lui reserver
   les 160px du hero standard. */
/* Hero de landing : meme rythme vertical que .gdn-hero--sm (le header est fixe,
   sa hauteur doit rester reservee), mais aligne a gauche car il est sur deux
   colonnes au lieu d etre centre. */
/* Le bloc d ouverture des pages ressource suit le hero general du site :
   centre, largeur de lecture bornee.
   Le centrage est porte ici plutot que par une classe utilitaire du markup,
   parce que la meme section contient, sur la landing, le bandeau sombre et
   l apercu du releve, qui doivent rester alignes a gauche : on ne vise donc
   que la PREMIERE ligne de la section, celle qui porte eyebrow, H1 et intro. */
.gdn-lm-hero { padding-bottom: 100px; }
.gdn-lm-hero > .container > .row:first-child,
.gdn-lm-hero > .container-xl > .row:first-child { text-align: center; }

/* Aucun plafond propre : la largeur de lecture vient de la colonne col-md-9,
   exactement comme le sous-titre des autres heros du site. */

.gdn-lm-rule { border: 0; border-top: 1px solid var(--gdn-border); opacity: 1; margin: 0 0 20px; }
.gdn-lm-repere__val { font-size: 1.5rem; font-weight: 500; color: var(--gdn-black); display: block; line-height: 1.2; }
.gdn-lm-repere__lab { font-size: .8125rem; color: var(--gdn-grey); }

.gdn-lm-dark { background: var(--gdn-dark); }
.gdn-eyebrow--light { color: rgba(255,255,255,.5); }

.gdn-lm-symptome {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--gdn-radius-sm);
  padding: 24px;
}
.gdn-lm-symptome__axe {
  font-size: .75rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gdn-green);
}
.gdn-lm-symptome__text { color: rgba(255,255,255,.85); line-height: 1.6; font-size: .9375rem; }

.gdn-lm-etape {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  padding: 32px;
}
.gdn-lm-etape__num {
  font-size: .875rem; font-weight: 700; letter-spacing: .08em;
  color: var(--gdn-green);
}
.gdn-lm-etape__duree {
  font-size: .75rem;
  color: var(--gdn-grey);
  background: rgba(0,0,0,.04);
  padding: 4px 12px;
  border-radius: 999px;
}
.gdn-lm-etape__titre { font-size: 1.125rem; font-weight: 500; }
.gdn-lm-etape__livrable {
  font-size: .8125rem;
  color: var(--gdn-text-sec);
  border-top: 1px solid var(--gdn-border);
  padding-top: 14px;
}
.gdn-lm-etape__livrable span {
  font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
  font-size: .6875rem; color: var(--gdn-grey);
  display: block; margin-bottom: 2px;
}

.gdn-lm-prio-mini { display: flex; flex-direction: column; gap: 12px; font-size: .9375rem; }
.gdn-lm-prio-mini__num {
  width: 22px; height: 22px; flex: 0 0 22px;
  border-radius: 50%;
  background: var(--gdn-black); color: #fff;
  font-size: .75rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}

.gdn-lm-fact {
  background: var(--gdn-bg);
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  padding: 24px;
}
.gdn-lm-fact__lab { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gdn-grey); }
.gdn-lm-fact__val { font-size: 2rem; font-weight: 500; line-height: 1; color: var(--gdn-black); }
.gdn-lm-fact__leg { font-size: .8125rem; color: var(--gdn-text-sec); line-height: 1.5; }


.gdn-lm-bandeau {
  background: var(--gdn-dark);
  border-radius: var(--gdn-radius-card);
  padding: 72px 32px;
}
@media (max-width: 767.98px) { .gdn-lm-bandeau { padding: 48px 24px; } }

/* Variante colonne : le meme bloc sombre, mais dans une demi-colonne de hero.
   Moins de respiration verticale, texte a gauche, et une ombre portee pour qu il
   se detache du fond degrade du hero. */
.gdn-lm-bandeau--hero {
  /* Meme boite que .gdn-lm-preview, la carte de la colonne d en face : meme
     padding, meme rayon, meme geometrie d ombre. Seule l opacite de l ombre
     differe, une ombre a 7 % etant invisible sous un bloc sombre. */
  padding: 32px;
  text-align: left;
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  /* Il porte moins de contenu que la carte d en face : il remplit quand meme sa
     colonne (h-100) et centre son contenu, pour que les deux blocs commencent et
     finissent a la meme hauteur. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* En colonne flex, un bouton s etirerait sur toute la largeur du bloc. */
.gdn-lm-bandeau--hero .btn { align-self: flex-start; }
@media (max-width: 767.98px) { .gdn-lm-bandeau--hero { padding: 32px; text-align: left; } }


/* ── Coquille des pages de parcours (partagee avec la landing) ──── */
/* Colonne de lecture centree et bornee : la lisibilite prime sur la densite. */
/* Ces pages n ouvrent pas sur un hero : elles degagent elles-memes la hauteur
   du header fixe. --gdn-header-h vaut 108px en desktop et 68px sous 992px, le
   calcul suit donc la bascule en barre plate sans media query. */
.gdn-lm-parcours, .gdn-lm-rapport { padding: calc(var(--gdn-header-h) + 48px) 0 96px; }
/* Quand un hero precede la section, c'est lui qui degage l'en-tete fixe :
   le rappel de padding ferait un blanc de la hauteur du header. */
.gdn-lm-parcours--sous-hero { padding-top: 0; }
.gdn-lm-wrap { max-width: 680px; margin: 0 auto; }
.gdn-lm-wrap--large { max-width: 860px; }

/* ─── APERCU DU RELEVE : liste tronquee ────────────────────────────
   L apercu ne montre que quelques axes sur les huit evalues. Le fondu bas dit
   que la liste continue, au lieu de laisser croire a un releve de quatre lignes.
   Le masque porte sur la liste seule : la note et le compte restent nets, ce
   sont eux qui portent l information honnete. */
.gdn-lm-apercu--tronque {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.15) 100%);
          mask-image: linear-gradient(to bottom, #000 58%, rgba(0,0,0,.15) 100%);
}
/* Le flou porte sur la derniere barre seulement : c est ce qui fait lire
   « ca continue » plutot que « c est coupe ». Non applique s il n y a qu une
   seule barre, ou elle serait la donnee principale. */
.gdn-lm-apercu--tronque > li:last-child:not(:first-child) { filter: blur(1.6px); }

.gdn-lm-apercu__reste {
  margin-top: 10px;
  font-size: .75rem;
  color: var(--gdn-grey);
  text-align: center;
}

/* Le fondu est decoratif : a l impression et pour qui demande moins d effets
   visuels, la liste redevient entierement lisible. */
@media print, (prefers-reduced-motion: reduce) {
  .gdn-lm-apercu--tronque { -webkit-mask-image: none; mask-image: none; }
  .gdn-lm-apercu--tronque > li:last-child { filter: none; }
}


.gdn-lm-titre { font-size: 1.75rem; font-weight: 500; line-height: 1.3; text-wrap: balance; }
@media (min-width: 992px) { .gdn-lm-titre { font-size: 2.125rem; } }
/* Titre de section des ecrans de parcours. Monte de 1.25 a 1.5rem pour
   ouvrir l ecart avec l entree de liste du plan, qui vaut desormais
   1.25rem. Volontairement change PARTOUT et non seulement sur le rapport :
   la classe designe un niveau, et le meme niveau ne peut pas valoir deux
   tailles selon la page. */
.gdn-lm-sous-titre { font-size: 1.5rem; font-weight: 500; }


/* ══════════════════════════════════════════════════════════════
   LE QUESTIONNAIRE
   Extrait de big_quizz.css le jour ou un SECOND type de quiz est
   apparu (light_quizz_leadmagnets). Ces regles ne connaissent ni
   bareme, ni pilier, ni axe : elles composent un questionnaire,
   quel qu il soit. Les deux types les partagent, et c est ce qui
   garantit qu ils se ressemblent. Ce qui reste dans big_quizz.css
   est ce qui lui est propre : la modale de reprise, le plan d
   actions, le rapport et ses variantes d impression.
   ══════════════════════════════════════════════════════════════ */

/* ── En-tete de parcours : ou j en suis, comment en sortir ──────── */
.gdn-lm-step-label { font-size: .75rem; font-weight: 500; color: var(--gdn-grey); }
.gdn-lm-step-sep { opacity: .5; margin: 0 4px; }
.gdn-lm-quit { font-size: .75rem; color: var(--gdn-grey); text-decoration: underline; }
.gdn-lm-quit:hover { color: var(--gdn-green); }

/* Meme traitement que .gdn-lm-quit : un lien texte, pas un bouton, pour rester
   au meme niveau visuel discret que "Quitter" juste a cote. */
.gdn-lm-restart {
  font: inherit; font-size: .75rem; color: var(--gdn-grey);
  text-decoration: underline; background: none; border: 0; padding: 0;
  cursor: pointer;
}
.gdn-lm-restart:hover { color: var(--gdn-green); }

.gdn-lm-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--gdn-border);
  overflow: hidden;
}
.gdn-lm-progress__fill {
  display: block; height: 4px;
  background: var(--gdn-black);
  transition: width var(--gdn-transition);
}

.gdn-lm-card {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  padding: 24px;
  margin-top: 24px;
}

/* Panneau du parcours : la carte unique qui contient le titre de l outil, la
   progression et les etapes. */
.gdn-lm-panneau {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  padding: 28px 32px 32px;
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}
@media (max-width: 575.98px) { .gdn-lm-panneau { padding: 20px; } }

/* ── Le questionnaire lui-meme ──────────────────────────────────── */
.gdn-lm-panneau__tete {
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--gdn-border);
}

/* Une carte dans une carte ferait deux bordures pour un seul objet : a l
   interieur du panneau, les etapes ne sont plus qu un espacement. */
.gdn-lm-panneau .gdn-lm-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-top: 0;
}
.gdn-lm-panneau [data-lm-chrome] { margin-bottom: 24px; }

/* Repli sans JavaScript : toutes les etapes sont empilees dans le panneau, il
   leur faut donc un separateur. Avec JavaScript une seule est visible a la
   fois, et une regle de voisinage tracerait un filet au-dessus de l etape
   affichee : le separateur est reserve au cas sans script. */
.gdn-lm-qcm:not(.gdn-lm-qcm--js) .gdn-lm-card + .gdn-lm-card {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--gdn-border);
}
/* Sans JavaScript, toutes les etapes restent visibles et le formulaire se
   soumet en une fois. Le script ajoute .gdn-lm-qcm--js et prend la main. */
.gdn-lm-qcm--js .gdn-lm-card[hidden] { display: none; }

.gdn-lm-question {
  font-size: 1.125rem; font-weight: 500; line-height: 1.45;
  color: var(--gdn-black);
  margin: 0; padding: 0; float: none; width: auto;
}
.gdn-lm-question:focus { outline: none; }
.gdn-lm-context { font-size: .75rem; color: var(--gdn-grey); margin: 4px 0 0; }

.gdn-lm-options { display: flex; flex-direction: column; gap: 8px; }

.gdn-lm-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 18px;
  border: 1.5px solid rgba(119,119,119,.3);
  border-radius: var(--gdn-radius-sm);
  background: #fff;
  font-size: .875rem; font-weight: 500; line-height: 1.4;
  color: var(--gdn-black);
  cursor: pointer;
}
.gdn-lm-option:hover { border-color: var(--gdn-green); }
/* Option d'echappatoire : une reponse de plein droit, jamais culpabilisante,
   mais visuellement distincte d'un vrai choix. */
.gdn-lm-option--unsure { color: var(--gdn-grey); border-style: dashed; }

/* Le radio natif porte l'accessibilite (groupe, fleches, lecteur d'ecran),
   le label porte l'apparence. Selection instantanee, sans transition qui
   retarderait la lecture du choix. */
.gdn-lm-radio:checked + .gdn-lm-option {
  background: rgba(25,135,84,.12);
  border-color: var(--gdn-green);
  border-style: solid;
  color: var(--gdn-black);
}
.gdn-lm-radio:focus-visible + .gdn-lm-option {
  outline: 2px solid var(--gdn-green);
  outline-offset: 2px;
}
.gdn-lm-option__tag {
  font-size: .75rem; font-weight: 400; color: var(--gdn-grey);
  margin-left: 8px;
}

.gdn-lm-aide { font-size: .75rem; color: var(--gdn-grey); line-height: 1.6; }
.gdn-lm-erreur { font-size: .875rem; color: #dc3545; }

/* Ecran de calcul, entre la soumission et le releve. */
.gdn-lm-calcul {
  position: fixed; inset: 0;
  background: rgba(249,249,249,.94);
  display: flex; align-items: center; justify-content: center;
  z-index: 1080;
  color: var(--gdn-text-sec);
}
.gdn-lm-spinner {
  display: inline-block; width: 34px; height: 34px;
  border: 3px solid var(--gdn-border);
  border-top-color: var(--gdn-green);
  border-radius: 50%;
  animation: gdn-lm-spin .8s linear infinite;
}
@keyframes gdn-lm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gdn-lm-spinner { animation-duration: 2.4s; } }

/* ── Repere d outil, en tete de chaque ecran du parcours ────────── */
/* Nom de l outil, repete en tete de chaque ecran du parcours. C est le repere
   qui dit « vous etes dans ce diagnostic », la ou le titre de la page dit
   seulement « vous etes a cette etape ». Discret mais toujours present. */
.gdn-lm-outil {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gdn-green);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gdn-lm-outil::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 6px;
}