/* =========================================================================
   Qualidemy — système visuel
   -------------------------------------------------------------------------
   Écrit après la sortie d'Elementor. Aucune dépendance à un constructeur de
   pages : tout part de HTML sémantique dans `post_content`.

   PARTI PRIS. Un organisme qui forme des professionnels réglementés doit
   avoir l'air d'un organisme, pas d'une place de marché. D'où un empattement
   pour les titres (autorité, lisibilité en gros corps) et une linéale de
   travail pour le texte dense — beaucoup de tableaux, beaucoup de références
   d'articles. Le bleu existant de la marque est conservé pour l'interactif ;
   un marine plus profond structure les titres, et l'ambre ne sert QUE aux
   avertissements réglementaires, jamais à décorer.
   ========================================================================= */

:root {
  --qd-encre:        #14212F;
  --qd-encre-douce:  #46586C;
  --qd-encre-tenue:  #77869A;
  --qd-marine:       #12283F;
  --qd-bleu:         #0274be;
  --qd-bleu-fonce:   #075A8F;
  --qd-bleu-pale:    #EAF3FA;
  --qd-ambre:        #A8641A;
  --qd-ambre-pale:   #FBF2E4;
  --qd-vert:         #1C6046;
  --qd-vert-pale:    #E9F2ED;
  --qd-rouge:        #96302F;
  --qd-rouge-pale:   #FBEDEC;
  --qd-papier:       #F6F8FA;
  --qd-trait:        #DEE4EB;
  --qd-trait-fin:    #EDF0F4;
  --qd-large:        1160px;
  --qd-texte:        68ch;
}

/* ---- socle typographique ------------------------------------------------ */

body,
.ast-container,
.entry-content {
  font-family: "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body {
  color: var(--qd-encre);
  font-size: 17px;
  line-height: 1.65;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.qd-hero h1, .qd-pied__nom, h1.entry-title {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  color: var(--qd-marine);
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.entry-content h2 {
  font-size: clamp(1.5rem, 3vw, 1.95rem);
  line-height: 1.22;
  margin: 2.4em 0 .7em;
  padding-bottom: .3em;
  border-bottom: 1px solid var(--qd-trait);
}
.entry-content h3 {
  font-size: clamp(1.12rem, 2vw, 1.28rem);
  line-height: 1.3;
  margin: 1.9em 0 .5em;
}
.entry-content p, .entry-content ul, .entry-content ol { max-width: var(--qd-texte); }
.entry-content li { margin-bottom: .45em; }
.entry-content a { color: var(--qd-bleu-fonce); text-underline-offset: 2px; }
.entry-content a:hover { color: var(--qd-marine); }
:where(a, button, summary):focus-visible {
  outline: 2px solid var(--qd-bleu); outline-offset: 3px; border-radius: 3px;
}

/* ---- chapeau, encarts, cas pratiques ------------------------------------ */

.qd-chapeau {
  font-size: 1.14em; line-height: 1.55; color: var(--qd-encre-douce);
  border-left: 3px solid var(--qd-bleu); padding-left: 18px;
  margin: 0 0 34px; max-width: 62ch;
}
.qd-encart {
  background: var(--qd-ambre-pale); border-left: 3px solid var(--qd-ambre);
  padding: 16px 20px; margin: 26px 0; border-radius: 0 5px 5px 0;
  max-width: var(--qd-texte);
}
.qd-encart.qd-alerte { background: var(--qd-rouge-pale); border-left-color: var(--qd-rouge); }
.qd-encart p, .qd-cas p, .qd-statut p { max-width: none; }
.qd-encart p:last-child, .qd-cas p:last-child, .qd-statut p:last-child { margin-bottom: 0; }
.qd-cas {
  background: var(--qd-papier); border: 1px solid var(--qd-trait);
  padding: 22px 26px; margin: 30px 0; border-radius: 6px;
}
.qd-cas hr { border: 0; border-top: 1px solid var(--qd-trait); margin: 20px 0; }
.qd-statut {
  background: var(--qd-ambre-pale); border-left: 3px solid var(--qd-ambre);
  padding: 16px 20px; margin: 26px 0; border-radius: 0 5px 5px 0;
}
.qd-statut--ok { background: var(--qd-vert-pale); border-left-color: var(--qd-vert); }
.qd-maj {
  font-size: .88em; color: var(--qd-encre-tenue); margin-top: 38px;
  padding-top: 14px; border-top: 1px solid var(--qd-trait);
}

/* ---- tableaux : nombreux et denses sur ce site --------------------------- */

.entry-content table {
  width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .95em;
  display: block; overflow-x: auto; border: 1px solid var(--qd-trait);
  border-radius: 6px;
}
.entry-content table th, .entry-content table td {
  border-bottom: 1px solid var(--qd-trait-fin); padding: 11px 15px;
  text-align: left; vertical-align: top;
}
.entry-content table thead th {
  background: var(--qd-bleu-pale); color: var(--qd-marine);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; border-bottom: 1px solid var(--qd-trait); white-space: nowrap;
}
.entry-content table tbody tr:last-child td { border-bottom: 0; }

/* ---- accordéons --------------------------------------------------------- */

.entry-content details {
  border: 1px solid var(--qd-trait); border-radius: 6px;
  padding: 0 18px; margin: 10px 0; max-width: var(--qd-texte); background: #fff;
}
.entry-content details[open] { background: var(--qd-papier); }
.entry-content summary {
  cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none;
  color: var(--qd-marine); display: flex; justify-content: space-between; gap: 16px;
}
.entry-content summary::-webkit-details-marker { display: none; }
.entry-content summary::after { content: "+"; font-weight: 400; font-size: 1.3em; line-height: 1; color: var(--qd-bleu); }
.entry-content details[open] summary::after { content: "–"; }
.entry-content details > *:not(summary) { padding-bottom: 4px; }
.entry-content details p:last-child { margin-bottom: 16px; }

/* ---- citations ---------------------------------------------------------- */

.entry-content blockquote {
  border-left: 3px solid var(--qd-trait); margin: 22px 0; padding: 4px 0 4px 20px;
  max-width: var(--qd-texte); font-style: normal; color: var(--qd-encre-douce);
}
.entry-content blockquote cite {
  display: block; margin-top: 8px; font-size: .9em; font-style: normal;
  color: var(--qd-encre-tenue);
}

/* ---- boutons ------------------------------------------------------------ */

.qd-btn, .qd-bouton, .entry-content a.qd-bouton {
  display: inline-block; background: var(--qd-bleu); color: #fff !important;
  padding: 12px 24px; border-radius: 5px; text-decoration: none;
  font-weight: 600; font-size: .96rem; line-height: 1.3; border: 1px solid transparent;
}
.qd-btn:hover, .qd-bouton:hover { background: var(--qd-bleu-fonce); color: #fff !important; }
.qd-btn--fantome {
  background: transparent; color: var(--qd-encre) !important; border-color: var(--qd-trait);
}
.qd-btn--fantome:hover { background: var(--qd-papier); color: var(--qd-marine) !important; border-color: var(--qd-bleu); }

/* ---- hero de la page d'accueil ------------------------------------------ */

.qd-hero {
  background: linear-gradient(165deg, var(--qd-bleu-pale) 0%, #fff 72%);
  border: 1px solid var(--qd-trait); border-radius: 10px;
  margin: 0 0 46px; padding: 42px 40px 38px;
}
.qd-hero__in { max-width: none; }
.qd-hero__sur {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--qd-bleu-fonce); margin: 0 0 14px;
}
.qd-hero h1 {
  font-size: clamp(2.05rem, 5vw, 3.05rem); line-height: 1.08; margin: 0 0 18px;
  max-width: 18ch;
}
.qd-hero__texte { font-size: 1.14rem; color: var(--qd-encre-douce); max-width: 56ch; margin: 0 0 26px; }
.qd-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.qd-hero__points {
  display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 30px 0 0;
  padding: 22px 0 0; border-top: 1px solid var(--qd-trait); list-style: none;
  font-size: .94rem; color: var(--qd-encre-douce); max-width: none;
}
.qd-hero__points li { margin: 0; padding-left: 22px; position: relative; }
.qd-hero__points li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--qd-bleu);
}

/* ---- cartes des publics ------------------------------------------------- */

.qd-public {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 20px; margin: 30px 0; max-width: none;
}
.qd-public > div {
  border: 1px solid var(--qd-trait); border-radius: 8px; padding: 22px 24px;
  background: #fff; display: flex; flex-direction: column; gap: 8px;
  border-top: 3px solid var(--qd-bleu);
}
.qd-public h3 { margin: 0; font-size: 1.06rem; line-height: 1.3; }
.qd-public h3 a { text-decoration: none; color: var(--qd-marine); }
.qd-public h3 a:hover { color: var(--qd-bleu-fonce); text-decoration: underline; }
.qd-public p { margin: 0; font-size: .95em; color: var(--qd-encre-douce); max-width: none; }

/* ---- liste d'articles --------------------------------------------------- */

.qd-articles { list-style: none; padding: 0; margin: 26px 0; max-width: var(--qd-texte); }
.qd-articles > li { border-bottom: 1px solid var(--qd-trait-fin); padding: 16px 0; }
.qd-articles > li > a { font-weight: 600; font-size: 1.04rem; text-decoration: none; }
.qd-articles > li > a:hover { text-decoration: underline; }
.qd-articles__date { color: var(--qd-encre-tenue); font-size: .9em; }
.qd-articles p { margin: 6px 0 0; color: var(--qd-encre-douce); font-size: .95em; }

/* ---- formulaire natif --------------------------------------------------- */

.qd-form { max-width: 620px; margin: 26px 0; }
.qd-form__ligne { margin-bottom: 18px; }
.qd-form label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; color: var(--qd-marine); }
.qd-form input[type=text], .qd-form input[type=email], .qd-form select, .qd-form textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--qd-trait); border-radius: 5px;
  font: inherit; font-size: .97rem; background: #fff; color: var(--qd-encre);
}
.qd-form textarea { min-height: 160px; resize: vertical; }
.qd-form input:focus, .qd-form select:focus, .qd-form textarea:focus {
  outline: 2px solid var(--qd-bleu); outline-offset: 1px; border-color: var(--qd-bleu);
}
.qd-form__aide { font-size: .87rem; color: var(--qd-encre-tenue); margin: 6px 0 0; }
.qd-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .93rem; }
.qd-form__consent input { margin-top: .28em; flex: 0 0 auto; }
.qd-form__consent label { font-weight: 400; color: var(--qd-encre-douce); margin: 0; }
.qd-form__pot { position: absolute; left: -9999px; }
.qd-msg { padding: 14px 18px; border-radius: 5px; margin: 20px 0; max-width: 620px; }
.qd-msg--ok { background: var(--qd-vert-pale); border-left: 3px solid var(--qd-vert); }
.qd-msg--ko { background: var(--qd-rouge-pale); border-left: 3px solid var(--qd-rouge); }
.qd-msg p { margin: 0; max-width: none; }

/* ---- listes de formations LearnDash ------------------------------------- */

.ld-course-list-items { gap: 20px !important; }
.entry-content .ld-course-list-items .ld_course_grid .thumbnail.course {
  border: 1px solid var(--qd-trait) !important; border-radius: 8px !important;
  box-shadow: none !important;
}

@media (max-width: 782px) {
  body { font-size: 16px; }
  .qd-hero { padding: 38px 0 32px; margin-bottom: 34px; }
  .qd-hero h1 { max-width: none; }
  .qd-cas { padding: 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* =========================================================================
   Conteneur de contenu
   -------------------------------------------------------------------------
   ⚠️ ASTRA ÉTAIT RÉGLÉ EN PLEINE LARGEUR : `.ast-container{max-width:100%}`
      avec 0,54 em de marge, soit ~9 px. Sur un écran large le texte se collait
      au bord gauche. On borne et on centre, avec une marge qui respire.
   ========================================================================= */

/* ⚠️ `!important` ASSUMÉ. Astra injecte
   `.ast-separate-container #content .ast-container{padding:0.54em}` EN LIGNE
   dans le <head>, sous  (max-width:544px), avec une spécificité égale
   à la nôtre. Résultat : 8,6 px de marge sur mobile, le texte frôlait le bord.
   On ne peut ni réordonner une règle en ligne, ni la battre autrement. */
.ast-separate-container #content > .ast-container,
#content > .ast-container {
  max-width: var(--qd-large);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 40px) !important;
}

/* ⚠️ UNE SEULE MARGE HORIZONTALE, PAS TROIS. Astra pose 40 px sur #primary et
   16 px sur l'article ; additionnés à la nôtre, cela mangeait 137 px sur un
   écran de 375 — plus d'un tiers de la largeur. On neutralise les siennes et
   on garde la nôtre, qui est la seule à s'adapter à la taille de l'écran. */
#content #primary,
#content .site-main,
#content article.ast-article-single,
#content article { padding-inline: 0; }
#content #primary { padding-block: 0; }
.entry-header.ast-no-title { margin-bottom: 0; }

/* =========================================================================
   En-tête
   ========================================================================= */

.qd-entete {
  background: #fff; border-bottom: 1px solid var(--qd-trait);
  position: relative; z-index: 60;
}
.qd-entete__in {
  max-width: var(--qd-large); margin: 0 auto;
  padding: 14px clamp(18px, 5vw, 40px);
  display: flex; align-items: center; gap: 24px;
}
.qd-logo { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; text-decoration: none; }
.qd-logo__marque { height: 38px; width: auto; display: block; }
.qd-logo__nom {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 700; font-size: 1.32rem; color: var(--qd-marine);
  letter-spacing: -0.015em; line-height: 1;
}
.qd-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.qd-menu { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; max-width: none; }
.qd-menu li { position: relative; margin: 0; }
.qd-menu a {
  color: var(--qd-encre); text-decoration: none; font-size: .95rem;
  font-weight: 500; padding: 6px 0; display: block;
}
.qd-menu a:hover, .qd-menu a:focus-visible { color: var(--qd-bleu-fonce); text-decoration: underline; }
.qd-menu .sub-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 244px;
  background: #fff; border: 1px solid var(--qd-trait); border-radius: 7px;
  padding: 7px 0; list-style: none; margin: 0; box-shadow: 0 10px 28px rgba(18, 40, 63, .1);
}
.qd-menu li:hover > .sub-menu, .qd-menu li:focus-within > .sub-menu { display: block; }
.qd-menu .sub-menu a { padding: 9px 17px; font-weight: 400; }
.qd-actions { display: flex; align-items: center; gap: 10px; }
.qd-actions .qd-btn { padding: 9px 17px; font-size: .9rem; white-space: nowrap; }

.qd-burger {
  display: none; margin-left: auto; background: none;
  border: 1px solid var(--qd-trait); border-radius: 6px;
  width: 46px; height: 42px; cursor: pointer; position: relative;
}
.qd-burger__trait, .qd-burger__trait::before, .qd-burger__trait::after {
  position: absolute; left: 13px; width: 20px; height: 2px;
  background: var(--qd-encre); content: ""; border-radius: 2px;
}
.qd-burger__trait { top: 20px; }
.qd-burger__trait::before { top: -6px; left: 0; }
.qd-burger__trait::after { top: 6px; left: 0; }

/* =========================================================================
   Pied de page
   ========================================================================= */

.qd-pied { background: var(--qd-marine); color: #fff; margin-top: 72px; }
.qd-pied a { color: #fff; text-decoration: none; }
.qd-pied a:hover, .qd-pied a:focus-visible { text-decoration: underline; }
.qd-pied__in {
  max-width: var(--qd-large); margin: 0 auto;
  padding: 52px clamp(18px, 5vw, 40px) 36px;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px;
}
.qd-pied__nom { font-size: 1.4rem; font-weight: 700; margin: 0 0 8px; color: #fff; }
.qd-pied__baseline { opacity: .8; margin: 0 0 18px; max-width: 32ch; font-size: .96rem; }
.qd-pied__contact { margin: 0; font-size: .96rem; line-height: 1.9; }
.qd-pied__titre {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  opacity: .6; margin: 0 0 13px; font-weight: 700;
}
.qd-pied__liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; font-size: .95rem; max-width: none;
}
.qd-pied__liste li { margin: 0; }
.qd-pied__bas {
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding: 18px clamp(18px, 5vw, 40px); font-size: .84rem; opacity: .68;
}
.qd-pied__bas p { margin: 0; max-width: var(--qd-large); margin-inline: auto; }

/* =========================================================================
   Adaptation aux petits écrans
   ========================================================================= */

@media (max-width: 1080px) {
  .qd-pied__in { grid-template-columns: 1fr 1fr; gap: 34px; }
}
@media (max-width: 900px) {
  .qd-burger { display: block; }
  .qd-nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px clamp(18px, 5vw, 40px) 22px; border-bottom: 1px solid var(--qd-trait);
    box-shadow: 0 12px 26px rgba(18, 40, 63, .1); max-height: 78vh; overflow-y: auto;
  }
  .qd-nav--ouvert { display: flex; }
  .qd-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .qd-menu > li { border-bottom: 1px solid var(--qd-trait-fin); }
  .qd-menu a { padding: 13px 0; }
  .qd-menu .sub-menu {
    display: none; position: static; border: 0; box-shadow: none;
    padding: 0 0 8px 16px; min-width: 0;
  }
  .qd-menu li.qd-ouvert > .sub-menu { display: block; }
  .qd-actions { flex-direction: column; align-items: stretch; gap: 9px; margin-top: 18px; }
  .qd-actions .qd-btn { text-align: center; padding: 12px 18px; }
}
@media (max-width: 782px) {
  .qd-hero { padding: 30px 22px 28px; border-radius: 8px; }
  .qd-hero h1 { font-size: clamp(1.72rem, 7vw, 2.1rem); }
  .qd-hero__texte { font-size: 1.03rem; }
  .qd-hero__actions { flex-direction: column; align-items: stretch; }
  .qd-hero__actions .qd-btn { text-align: center; }
  .qd-hero__points { gap: 9px; flex-direction: column; }
  .qd-public { grid-template-columns: 1fr; gap: 14px; }
  .qd-cas { padding: 17px 18px; }
  .qd-encart { padding: 14px 16px; }
  .entry-content h2 { margin-top: 1.9em; }
  .qd-pied__in { grid-template-columns: 1fr; gap: 30px; padding-top: 38px; }
  .qd-pied { margin-top: 48px; }
  .qd-form { max-width: none; }
}
@media (max-width: 420px) {
  .qd-logo__nom { font-size: 1.14rem; }
  .qd-logo__marque { height: 32px; }
  .qd-entete__in { gap: 12px; }
}

/* =========================================================================
   Composants de page de parcours — ajoutés le 27/08/2026
   -------------------------------------------------------------------------
   Objectif : une page de formation qui se PARCOURT, au lieu d'un long article.
   Les chiffres clés en tête, le programme en cartes, le déroulé en étapes.
   Aucun JavaScript : les accordéons sont des <details> natifs, les grilles
   du CSS grid. Rien ici ne dépend d'un constructeur de pages.
   ========================================================================= */

/* ---- bandeau de chiffres clés ------------------------------------------- */

.qd-chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--qd-trait);
  border: 1px solid var(--qd-trait);
  border-radius: 6px;
  overflow: hidden;
  margin: 26px 0 30px;
  max-width: none;
}
.qd-chiffre {
  background: #fff;
  padding: 18px 16px;
  text-align: center;
}
.qd-chiffre__val {
  display: block;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1.5rem, 3.4vw, 1.95rem);
  line-height: 1.05;
  font-weight: 600;
  color: var(--qd-marine);
  font-variant-numeric: tabular-nums;
}
.qd-chiffre__lib {
  display: block;
  margin-top: 5px;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--qd-encre-tenue);
}

/* ---- programme en cartes ------------------------------------------------ */

.qd-modules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 16px;
  margin: 24px 0 32px;
  max-width: none;
}
.qd-module {
  background: #fff;
  border: 1px solid var(--qd-trait);
  border-radius: 6px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.qd-module:hover {
  border-color: var(--qd-bleu);
  box-shadow: 0 2px 10px rgba(2, 116, 190, .08);
}
.qd-module__tete {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.qd-module__num {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--qd-bleu-pale);
  color: var(--qd-bleu-fonce);
  border-radius: 50%;
  font-weight: 700;
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  align-self: center;
}
.qd-module__titre {
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--qd-marine);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.3;
  margin: 0;
  flex: 1 1 auto;
}
.qd-module__duree {
  flex: 0 0 auto;
  align-self: center;
  background: var(--qd-papier);
  border: 1px solid var(--qd-trait);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--qd-encre-douce);
  white-space: nowrap;
}
.qd-module p {
  margin: 0;
  max-width: none;
  font-size: .95rem;
  color: var(--qd-encre-douce);
}
.qd-module p + p { margin-top: .7em; }

/* ---- déroulé en étapes -------------------------------------------------- */

.qd-etapes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin: 26px 0 32px;
  padding: 0;
  list-style: none;
  max-width: none;
  counter-reset: qdetape;
}
.qd-etapes li {
  margin: 0;
  padding-top: 16px;
  border-top: 3px solid var(--qd-bleu-pale);
  position: relative;
}
.qd-etapes li::before {
  counter-increment: qdetape;
  content: counter(qdetape);
  position: absolute;
  top: -15px; left: 0;
  width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  background: var(--qd-bleu);
  color: #fff;
  border-radius: 50%;
  font-size: .82rem;
  font-weight: 700;
}
.qd-etapes strong {
  display: block;
  color: var(--qd-marine);
  margin: 12px 0 4px;
  font-size: 1.02rem;
}
.qd-etapes span { color: var(--qd-encre-douce); font-size: .94rem; }

/* ---- bande d'appel à l'action ------------------------------------------- */

.qd-cta {
  background: var(--qd-papier);
  border: 1px solid var(--qd-trait);
  border-radius: 6px;
  padding: 24px 26px;
  margin: 32px 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.qd-cta__texte { flex: 1 1 320px; }
.qd-cta__texte strong {
  display: block;
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--qd-marine);
  font-size: 1.18rem;
  margin-bottom: 3px;
}
.qd-cta__texte span { color: var(--qd-encre-douce); font-size: .95rem; }
.qd-cta .qd-btn { flex: 0 0 auto; }

/* ---- informations pratiques en grille ----------------------------------- */

.qd-infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--qd-trait);
  border: 1px solid var(--qd-trait);
  border-radius: 6px;
  overflow: hidden;
  margin: 24px 0 30px;
  max-width: none;
}
.qd-infos > div { background: #fff; padding: 16px 18px; }
.qd-infos dt,
.qd-infos > div > strong {
  display: block;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--qd-encre-tenue);
  margin-bottom: 4px;
  font-weight: 600;
}
.qd-infos > div > span { color: var(--qd-encre); font-size: .97rem; }

@media (max-width: 600px) {
  .qd-chiffres { grid-template-columns: repeat(2, 1fr); }
  .qd-modules  { grid-template-columns: 1fr; }
  .qd-cta      { padding: 20px; }
}