/* ══════════════════════════════════════════════════════════════
   LEAD MAGNETS — TYPE « BIG QUIZZ » (diagnostic QCM)
   Feuille du type, chargee EN PLUS de leadmagnets/assets/leadmagnets.css
   sur les seules pages du parcours : questionnaire, releve, capture,
   rapport. Elle ne redefinit rien du socle ; les deux selecteurs
   communs (.gdn-lm-rapport, .gdn-lm-wrap--large) sont des variantes
   d impression, qui doivent passer apres, d ou l ordre de chargement.

   CE QUI N EST PLUS ICI : la composition du questionnaire lui-meme
   (panneau, progression, question, options, ecran de calcul) est
   partie dans leadmagnets.css le jour ou un second type de quiz est
   apparu. Elle ne connaissait ni bareme ni axe, elle n avait donc
   aucune raison d appartenir a ce type plutot qu a l autre. Reste
   ici ce qui est vraiment propre au diagnostic complet : la modale
   de reprise, le plan d actions, le rapport et son impression.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   MODALE DE SORTIE DU PARCOURS
   Construite a la main plutot qu avec Bootstrap : elle doit pouvoir
   s ouvrir avant que le bundle JS de Bootstrap soit charge, celui-ci
   etant place en fin de body.
   ══════════════════════════════════════════════════════════════ */
.gdn-lm-modale {
  position: fixed;
  inset: 0;
  z-index: 1080;               /* au-dessus du header fixe (1030) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.gdn-lm-modale[hidden] { display: none; }

.gdn-lm-modale__fond {
  position: absolute;
  inset: 0;
  background: rgba(24, 21, 21, .55);
  cursor: pointer;
}

.gdn-lm-modale__boite {
  position: relative;
  width: 100%;
  max-width: 34rem;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 2rem;
  background: #fff;
  border-radius: var(--gdn-radius-card);
  box-shadow: 0 24px 60px rgba(24, 21, 21, .28);
}

@media (max-width: 575.98px) {
  .gdn-lm-modale { padding: 1rem; }
  .gdn-lm-modale__boite { padding: 1.5rem; }
}

/* Le fond ne defile pas pendant que la modale est ouverte. */
body.gdn-lm-modale-ouverte { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .gdn-lm-modale__boite { animation: gdn-lm-modale-entree var(--gdn-transition); }
  @keyframes gdn-lm-modale-entree {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Champ de code a usage unique ───────────────────────────────── */
/* Chiffres espaces et centres : la saisie se relit caractere par
   caractere, ce qui est exactement ce que fait l oeil en recopiant
   un code depuis un autre ecran. */
.gdn-lm-otp-input {
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;          /* compense l espacement du dernier caractere */
  padding-top: .75rem;
  padding-bottom: .75rem;
}


/* ══════════════════════════════════════════════════════════════
   PLAN D ACTIONS : carte du rapport
   Composant repris du projet Claude Design « Redesign plan d actions »,
   variante « 1b responsive ». Jetons du design system GDN, mappes sur
   ceux du site : --gdn-text = --gdn-black, --gdn-text-muted = --gdn-grey,
   --radius-lg = --gdn-radius-card, --radius-md = --gdn-radius-sm.

   CE QUI TIENT LE RESPONSIVE, et pourquoi il n y a AUCUNE requete media
   dans ce bloc : la carte est un flex qui passe a la ligne, la lecture
   demandant six parts de l espace pour une au rail de mesures. Sous
   environ 600px de CARTE, et non de fenetre, le rail bascule dessous de
   lui-meme, puis ses trois mesures se remettent en ligne. Le composant
   s adapte donc a son conteneur : il se tient aussi bien dans le rapport
   pleine largeur que dans une colonne etroite, sans qu on ait a prevoir
   ou il sera pose.
   ══════════════════════════════════════════════════════════════ */
.gdn-lm-plan { display: flex; flex-direction: column; gap: 20px; }

.gdn-lm-plan__carte {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  transition: box-shadow var(--gdn-transition-slow);
}
.gdn-lm-plan__carte:hover { box-shadow: 0 20px 48px rgba(0,0,0,.10); }

/* Six parts contre une : a 860px de carte, la colonne de lecture mesure
   environ 590px et le rail 270px. La base de 360px est ce qui declenche
   le repli quand la carte se resserre. */
.gdn-lm-plan__lecture {
  flex: 6 1 360px;
  min-width: 0;                 /* sans quoi un mot long deborde la carte */
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Entree : le rang et l axe traite ───────────────────────────── */
.gdn-lm-plan__entree { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.gdn-lm-plan__num {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gdn-black);
  color: #fff;
  font-size: .75rem; font-weight: 500;
}
/* Etiquette de rangement, pas un titre : elle dit de quel axe l action
   releve, et s efface devant elle. */
.gdn-lm-plan__axe {
  font-size: .75rem; font-weight: 500; line-height: 1.3;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gdn-grey);
}

/* L action EST le titre de la carte : c est elle que le lecteur emporte. */
.gdn-lm-plan__action {
  margin: 0;
  font-size: 1.25rem; font-weight: 500; line-height: 1.35;
  color: var(--gdn-black);
  text-wrap: pretty;
}

.gdn-lm-plan__constat {
  margin: 0;
  font-size: .9375rem; font-weight: 300; line-height: 1.65;
  color: var(--gdn-grey);
  text-wrap: pretty;
}

/* Synthese IA du panneau de lecture d ensemble : meme grain que
   .gdn-lm-plan__faire (texte noir, taille normale), pour que le lecteur
   n y voie pas un texte secondaire alors qu il porte le message principal. */
.gdn-lm-resume-texte {
  font-size: 1rem; font-weight: 400; line-height: 1.65;
  color: var(--gdn-black);
  text-wrap: pretty;
}

/* Seule ligne du bloc a porter une pastille : la coche marque la phrase
   qui dit quoi faire, au milieu de trois paragraphes de meme grain. */
.gdn-lm-plan__faire {
  margin: 0;
  display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start;
  font-size: 1rem; font-weight: 400; line-height: 1.65;
  color: var(--gdn-black);
  text-wrap: pretty;
}
.gdn-lm-plan__coche {
  width: 22px; height: 22px; margin-top: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--gdn-green);
  color: #fff;
  font-size: 11px; line-height: 1;
}

/* ── Message pret a envoyer ─────────────────────────────────────── */
/* Bordure pointillee : l encart est un brouillon a emporter, pas un bloc
   de contenu arrete. */
.gdn-lm-plan__message {
  min-width: 0;
  padding: 16px 18px;
  background: var(--gdn-bg);
  border: 1px dashed var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  display: flex; flex-direction: column; gap: 12px;
}
.gdn-lm-plan__message-tete {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.gdn-lm-plan__message-label {
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gdn-grey);
}
/* 44px de haut : cible de clic tenable au doigt, y compris en colonne
   mobile ou le bouton passe sous son etiquette. */
.gdn-lm-plan__copier {
  white-space: nowrap;
  padding: 12px 20px; min-height: 44px;
  border: 1px solid rgba(24,21,21,.18);      /* --gdn-veil-edge */
  border-radius: 50px;
  background: rgba(255,255,255,.65);          /* --gdn-veil */
  color: var(--gdn-black);
  font-family: inherit;
  font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--gdn-transition), color var(--gdn-transition),
              border-color var(--gdn-transition), transform var(--gdn-transition);
}
.gdn-lm-plan__copier:hover {
  background: var(--gdn-green);
  border-color: var(--gdn-green);
  color: #fff;
  transform: translateY(-2px);
}
.gdn-lm-plan__copier:active { transform: translateY(0); }

/* <pre> parce que les sauts de ligne font partie du texte : c est un
   brouillon d email, pas un paragraphe. La police reste celle du site,
   un rendu machine a ecrire donnerait un faux air de code. */
.gdn-lm-plan__message-corps {
  margin: 0;
  font-family: inherit;
  font-size: .8125rem; font-weight: 300; line-height: 1.75;
  color: var(--gdn-text-sec);
  white-space: pre-wrap;
  word-break: break-word;
  text-wrap: pretty;
}

/* ── Rail de mesures ────────────────────────────────────────────── */
/* Aucune bordure gauche : c est le fond qui separe le rail de la lecture,
   un trait qui reste juste que le rail soit a droite ou replie dessous. */
.gdn-lm-plan__rail {
  flex: 1 1 190px;
  min-width: 190px;
  padding: 26px;
  background: var(--gdn-bg);
  display: flex; flex-wrap: wrap; align-content: flex-start;
  gap: 22px 28px;
}
/* Une fois le rail replie, les trois mesures se remettent en ligne, puis
   retombent en colonne sur mobile etroit. Elles ne se compressent jamais. */
.gdn-lm-plan__mesure { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gdn-lm-plan__mesure:first-child { gap: 8px; }

.gdn-lm-plan__label {
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gdn-grey);
}
.gdn-lm-plan__valeur {
  font-size: .9375rem; font-weight: 500; line-height: 1.4;
  color: var(--gdn-black);
  text-wrap: pretty;
}
.gdn-lm-plan__score { font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--gdn-black); }
.gdn-lm-plan__score-sur { font-size: .8125rem; font-weight: 300; color: var(--gdn-grey); }

.gdn-lm-plan__jauge {
  position: relative; display: block; overflow: hidden;
  height: 4px; border-radius: 3px;
  background: #eceae7;                        /* --gdn-doc-track */
}
.gdn-lm-plan__jauge-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.gdn-lm-plan__repere { font-size: .75rem; font-weight: 300; color: var(--gdn-grey); }

.gdn-lm-plan__cout { color: var(--gdn-green); }
.gdn-lm-plan__cout-note { font-size: .75rem; font-weight: 300; line-height: 1.5; color: var(--gdn-grey); text-wrap: pretty; }

/* A l impression, le lecteur doit pouvoir recopier le message : on detache
   l encart et on interdit qu une action soit coupee en deux pages. */
@media print {
  .gdn-lm-plan__carte { break-inside: avoid; box-shadow: none; }
  .gdn-lm-plan__rail { background: transparent; border-top: 1px solid var(--gdn-border); }
  .gdn-lm-plan__message { background: transparent; }
}


/* ── Releve ─────────────────────────────────────────────────────── */


.gdn-lm-scoreline { font-size: .9375rem; color: var(--gdn-text-sec); }
.gdn-lm-scoreline strong { color: var(--gdn-black); font-weight: 500; }

.gdn-lm-axe__nom { font-size: 1rem; font-weight: 500; display: flex; align-items: center; gap: 10px; }
.gdn-lm-axe__constat { font-size: .8125rem; color: var(--gdn-text-sec); margin-top: 8px; line-height: 1.6; }

.gdn-lm-prio {
  background: var(--gdn-dark);
  border-radius: var(--gdn-radius-card);
  padding: 40px;
  color: #fff;
}
@media (max-width: 767.98px) { .gdn-lm-prio { padding: 28px; } }
.gdn-lm-prio__num {
  width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 50%;
  background: var(--gdn-green); color: #fff;
  font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.gdn-lm-prio__nom { font-size: 1rem; font-weight: 500; color: #fff; }
.gdn-lm-prio__score { font-size: .8125rem; color: rgba(255,255,255,.55); margin-left: 8px; }
.gdn-lm-prio__reco { font-size: .9375rem; color: rgba(255,255,255,.75); line-height: 1.65; }

.gdn-lm-cta {
  background: var(--gdn-bg);
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-card);
  padding: 48px 32px;
}
.gdn-lm-lien-sec { color: var(--gdn-text-sec); text-decoration: underline; font-size: .875rem; }
.gdn-lm-lien-sec:hover { color: var(--gdn-green); }

/* ── Capture ────────────────────────────────────────────────────── */
.gdn-lm-steps { font-size: .8125rem; }
.gdn-lm-steps__item {
  border: 1px solid var(--gdn-border);
  border-radius: 999px;
  padding: 6px 16px;
  color: var(--gdn-grey);
}
.gdn-lm-steps__item span { font-weight: 500; }
.gdn-lm-steps__item.is-active { border-color: var(--gdn-green); color: var(--gdn-green); background: rgba(25,135,84,.08); }
.gdn-lm-steps__item.is-done { border-color: var(--gdn-border); color: var(--gdn-black); }

/* ── Rapport ────────────────────────────────────────────────────── */
.gdn-lm-confirm {
  background: rgba(25,135,84,.08);
  border: 1px solid rgba(25,135,84,.25);
  border-radius: var(--gdn-radius-sm);
  padding: 16px 20px;
  font-size: .9375rem;
  color: var(--gdn-text-sec);
}

.gdn-lm-table { width: 100%; font-size: .9375rem; border-collapse: collapse; }
.gdn-lm-table th, .gdn-lm-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gdn-border);
  text-align: left;
  vertical-align: middle;
}
.gdn-lm-table thead th {
  font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gdn-grey);
  border-bottom-color: var(--gdn-grey);
}
.gdn-lm-table tbody th { font-weight: 500; }

.gdn-lm-prio-card {
  background: #fff;
  border: 1px solid var(--gdn-border);
  border-radius: var(--gdn-radius-sm);
  padding: 24px;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--gdn-text-sec);
}
.gdn-lm-prio-card__num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gdn-black); color: #fff;
  font-size: .8125rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.gdn-lm-prio-card__nom { font-size: 1rem; font-weight: 500; color: var(--gdn-black); }
.gdn-lm-prio-card__score { font-size: .8125rem; color: var(--gdn-grey); }

.gdn-lm-reponses { display: flex; flex-direction: column; gap: 18px; }
.gdn-lm-reponses__q { font-size: .9375rem; font-weight: 500; line-height: 1.5; }
.gdn-lm-reponses__num { color: var(--gdn-grey); margin-right: 6px; }
.gdn-lm-reponses__a { font-size: .9375rem; color: var(--gdn-text-sec); padding-left: 22px; }
.gdn-lm-reponses__meta { font-size: .75rem; color: var(--gdn-grey); display: block; margin-top: 2px; }

.gdn-lm-hypo { color: var(--gdn-text-sec); font-size: .9375rem; line-height: 1.7; padding-left: 20px; }
.gdn-lm-hypo li { margin-bottom: 8px; }

/* Le rapport est fait pour etre imprime et circuler en interne. */
@media print {
  .gdn-header, .gdn-site-footer, .d-print-none { display: none !important; }
  .gdn-lm-rapport { padding: 0; }
  .gdn-lm-wrap--large { max-width: 100%; }
  .gdn-lm-prio-card, .gdn-lm-table { break-inside: avoid; }
  .gdn-lm-reponses li { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}