/* ══════════════════════════════════════════════════════════════
   GDN — Page « Médaille Platine CyberVadis » v2
   ──────────────────────────────────────────────────────────────
   Feuille d'appoint, chargee APRES style.css et uniquement sur la
   route `medaille-platine-cybervadis` (voir router_fr.php, qui
   empile ce chemin dans $page_styles). Elle ne redefinit rien de
   la v1 : les blocs .gdn-cv-hero, .gdn-cv-bars, .gdn-cv-panel,
   .gdn-cv-cta et .gdn-cv-transparency restent dans style.css.

   Trois ajouts seulement :
     1. .gdn-cv2-text        — texte de lecture quasi noir
     2. .gdn-cv-detail__*    — la grille detaillee (38 questions)
     3. .gdn-cv-reuse__*     — le bloc « a reprendre dans vos dossiers »
   ══════════════════════════════════════════════════════════════ */

/* ─── TEXTE DE LECTURE ───────────────────────────────────────────
   Le gris du design system (--gdn-text-sec, #4a5565) a ete juge
   illisible en conditions reelles sur de longs paragraphes. Cette
   page en compte beaucoup, et son lecteur type (DSI, acheteur, DPO)
   la lit en entier. On passe donc le corps de texte en quasi noir,
   sans toucher a style.css ni aux autres pages. */
.gdn-cv2-text { color: #111111; }

/* Les liens inseres dans ce texte gardent leur soulignement mais
   suivent la meme encre, sauf survol. */
.gdn-cv2-text a { color: inherit; }
.gdn-cv2-text a:hover { color: var(--gdn-green); }


/* ══════════════════════════════════════════════════════════════
   1. GRILLE DETAILLEE — 4 fonctions / 14 criteres / 38 questions
   ══════════════════════════════════════════════════════════════ */

/* En-tete d'accordeon : nom de la fonction a gauche, son libelle
   anglais d'origine juste apres (le rapport est en anglais, et un
   lecteur qui a le PDF sous les yeux doit retrouver ses reperes),
   score pousse a droite par .ms-auto. */
.gdn-cv-detail__fn {
  font-size: 1.0625rem;
  font-weight: 500;
}

.gdn-cv-detail__fn-en {
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: .55;
  margin-left: .5rem;
}

.gdn-cv-detail__fn-score {
  font-size: 1.0625rem;
  font-weight: 700;
  white-space: nowrap;
  padding-left: 1rem;
}
.gdn-cv-detail__fn-max {
  font-size: 0.8125rem;
  font-weight: 400;
  opacity: .6;
}

/* Corps du panneau : .gdn-accordion-body (style.css) l'affiche en
   gris a 0.9375rem. Meme raison que plus haut, on repasse en encre
   forte pour le contenu de cette page. */
.gdn-cv-detail .gdn-accordion-body { color: #111111; }

.gdn-cv-detail__resume {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--gdn-border);
}

.gdn-cv-detail__critere + .gdn-cv-detail__critere { margin-top: 1.75rem; }

/* Titre de critere : libelle + score de regroupement, sur une ligne
   qui tient aussi en mobile (wrap autorise). */
.gdn-cv-detail__critere-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  margin-bottom: .75rem;
}

.gdn-cv-detail__critere-score {
  font-weight: 400;
  color: var(--gdn-grey);
  white-space: nowrap;
}

/* Une question = un libelle elastique + un score aligne a droite.
   Les points de suite (border-bottom en pointilles) relient l'un a
   l'autre sur les lignes longues : c'est une grille de notes, elle
   doit se lire comme telle. */
.gdn-cv-detail__q {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px dashed var(--gdn-border);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.gdn-cv-detail__q:last-child { border-bottom: none; }

.gdn-cv-detail__q-label { flex: 1 1 auto; }

.gdn-cv-detail__q-score {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gdn-green);
  white-space: nowrap;
}

/* Question sous 1000/1000 : le score passe en encre neutre plutot
   qu'en vert. Pas de rouge, pas d'alerte — ce n'est pas un defaut,
   c'est une marge de progression, et elle doit se voir sans etre
   dramatisee. */
.gdn-cv-detail__q--partiel .gdn-cv-detail__q-score { color: var(--gdn-black); }

/* Sur petit ecran, le corps d'accordeon de style.css reserve 52px a
   gauche pour aligner le texte sous le libelle du bouton. A cette
   largeur, cette gouttiere coute plus qu'elle ne rapporte. */
@media (max-width: 575.98px) {
  .gdn-cv-detail .gdn-accordion-body { padding-left: 20px; }
  .gdn-cv-detail__fn-en { display: none; }
  .gdn-cv-detail__q { flex-wrap: wrap; }
}


/* ══════════════════════════════════════════════════════════════
   2. AXES DE PROGRES
   ══════════════════════════════════════════════════════════════ */

/* Les barres reutilisent .gdn-cv-bars de style.css. Seule difference :
   le libelle peut etre long et ne doit pas ecraser le score. */
.gdn-cv-progres__label { max-width: 75%; }

/* Remplissage en encre plutot qu'en vert : ces sept lignes ne sont
   pas des reussites a celebrer, elles sont le chantier en cours. */
.gdn-cv-progres__fill { background: var(--gdn-black); }


/* ══════════════════════════════════════════════════════════════
   3. BLOC « A REPRENDRE DANS VOS DOSSIERS »
   ══════════════════════════════════════════════════════════════ */

.gdn-cv-reuse__card {
  border-color: var(--gdn-border) !important;
}

.gdn-cv-reuse__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gdn-grey);
  margin-bottom: .75rem;
}

/* Une URL complete depasse facilement la colonne : on autorise la
   coupure plutot que le debordement horizontal. */
.gdn-cv-reuse__url {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* La formulation a recopier : presentee comme une citation, pour
   qu'on voie du premier coup d'oeil ou commence et ou s'arrete le
   texte autorise. */
.gdn-cv-reuse__quote {
  background: var(--gdn-bg);
  border-left: 3px solid var(--gdn-green);
  border-radius: 0 var(--gdn-radius-sm) var(--gdn-radius-sm) 0;
  padding: .875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #111111;
}