/* =====================================================================
   QCM DES COURS GRATUITS — APPARENCE
   ---------------------------------------------------------------------
   Reprend les couleurs du site :
     bleu marine #071e66 / #092d74 (titres), rouge #e71922 (boutons),
     orange #e64b14 (étiquette), bleu #1f5fd6 (bonne réponse).
   Tout est préfixé par « fb-qcm » pour ne toucher à rien d'autre.
   Le bloc porte aussi la classe « course-detail-article » : il hérite donc
   du même cadre blanc, des mêmes marges et de la même largeur que le cours.
   ===================================================================== */

/* ---------- Bloc QCM ---------- */
.course-detail-article.fb-qcm-section{
  margin-top:0;
  scroll-margin-top:110px;
}
.course-detail-article.fb-qcm-section h2{margin-bottom:6px}
.course-detail-article.fb-qcm-section h2:focus{outline:none}
/* Correctif 20261029 : le titre « QCM — Questions à choix multiples » reprend le petit
   encadré orange « Cours gratuit – Génie civil et BTP » (classe course-label, style.css). */
.course-detail-article.fb-qcm-section .fb-qcm-title:focus{outline:none}
/* « AS-TU BIEN RETENU CE COURS ? » : un titre h2 (même taille que les titres de la page),
   en orange comme auparavant. */
.course-detail-article.fb-qcm-section h2.fb-qcm-lead{
  margin:0 0 6px;
  color:#e64b14;
}
.course-detail-article.fb-qcm-section .fb-qcm-intro{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.6;
  color:#4b5870;
}
/* Correction 20261029 : le contenu du QCM occupe toute la largeur utile de la carte,
   exactement comme le texte du cours (avant : colonne de 760 px centrée, d'où le décalage). */
.fb-qcm-inner{
  max-width:none;
  margin:0;
}
.fb-qcm-card{scroll-margin-top:110px}

/* ---------- En-tête : question x / n, score, barre ---------- */
.fb-qcm-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:#4b5870;
}
.fb-qcm-top b{color:#071e66;font-weight:900}
.fb-qcm-score{
  background:#f5f8ff;
  border:1px solid #dce3ef;
  border-radius:999px;
  padding:5px 12px;
}
.fb-qcm-progress{
  height:8px;
  background:#e8edf6;
  border-radius:8px;
  margin:10px 0 16px;
  overflow:hidden;
}
.fb-qcm-progress span{
  display:block;
  height:100%;
  width:0;
  background:#092d74;
  border-radius:8px;
  transition:width .35s ease;
}

/* ---------- Question dans son cadre ---------- */
.fb-qcm-question{
  border:1.5px solid #cfd8e8;
  border-radius:14px;
  background:#fafcff;
  padding:14px 16px;
  margin-bottom:12px;
}
.fb-qcm-question:focus{outline:none;border-color:#092d74}
.course-detail-article.fb-qcm-section .fb-qcm-question p{
  margin:0;
  font-size:17px;
  line-height:1.5;
  font-weight:800;
  color:#071e66;
}

/* ---------- Réponses : un rectangle arrondi par réponse ---------- */
.fb-qcm-options{display:grid;gap:10px}
.fb-qcm-option{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:54px;           /* assez grand pour le doigt */
  margin:0;
  padding:11px 14px;
  text-align:left;
  font:inherit;
  font-size:15px;
  line-height:1.4;
  color:#10245a;
  background:#fff;
  border:1.5px solid #cfd8e8;
  border-radius:12px;
  cursor:pointer;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease, background-color .15s ease, opacity .2s ease, transform .1s ease;
}
.fb-qcm-option:hover:not(:disabled){border-color:#092d74;background:#f8faff}
.fb-qcm-option:active:not(:disabled){transform:scale(.99)}
.fb-qcm-option:focus-visible{outline:3px solid rgba(31,95,214,.45);outline-offset:2px}
.fb-qcm-option:disabled{cursor:default}
.fb-qcm-option-text{flex:1;min-width:0;overflow-wrap:anywhere}

/* Pastille ronde A / B / C / D */
.fb-qcm-badge{
  flex:none;
  display:inline-grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#eef2fa;
  border:1.5px solid #cfd8e8;
  color:#092d74;
  font-weight:900;
  font-size:14px;
  line-height:1;
}

/* Bonne réponse : tout le rectangle en bleu + coche */
.fb-qcm-option.is-correct{
  background:#e8f0ff;
  border:2px solid #1f5fd6;
  color:#0b3a99;
  opacity:1;
}
.fb-qcm-option.is-correct .fb-qcm-badge{background:#1f5fd6;border-color:#1f5fd6;color:#fff;font-size:17px}

/* Mauvaise réponse choisie : rouge clair + croix */
.fb-qcm-option.is-wrong{
  background:#fdecee;
  border:2px solid #e71922;
  color:#a3121a;
  opacity:1;
}
.fb-qcm-option.is-wrong .fb-qcm-badge{background:#e71922;border-color:#e71922;color:#fff;font-size:17px}

/* Les autres réponses sont grisées */
.fb-qcm-option.is-dimmed{opacity:.45}

/* Réponses multiples : proposition sélectionnée avant validation */
.fb-qcm-option.is-selected{background:#f1f5ff;border:2px solid #092d74}
.fb-qcm-option.is-selected .fb-qcm-badge{background:#092d74;border-color:#092d74;color:#fff}
.course-detail-article.fb-qcm-section .fb-qcm-hint{margin:-2px 0 10px;font-size:13px;font-weight:700;color:#4b5870}

/* Texte mis en forme depuis l'administration (gras, listes, couleurs) */
.course-detail-article.fb-qcm-section .fb-qcm-question p+p{margin-top:6px}
.course-detail-article.fb-qcm-section .fb-qcm-question ul,
.course-detail-article.fb-qcm-section .fb-qcm-question ol{margin:6px 0 0;padding-left:22px;color:#071e66;font-weight:700}
.fb-qcm-explain-body p,.course-detail-article.fb-qcm-section .fb-qcm-explain .fb-qcm-explain-body p{margin:6px 0 0}
.fb-qcm-explain-body ul,.fb-qcm-explain-body ol{margin:6px 0 0;padding-left:22px;font-size:14px;line-height:1.6}

/* Petite animation quand la réponse se colore */
.fb-qcm-option.is-correct .fb-qcm-badge,
.fb-qcm-option.is-wrong .fb-qcm-badge{animation:fbQcmPop .35s ease}
@keyframes fbQcmPop{0%{transform:scale(.6)}70%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ---------- Explication ---------- */
.fb-qcm-feedback:empty{display:none}
.fb-qcm-explain{
  margin-top:12px;
  border-radius:12px;
  padding:12px 14px;
  border:1px solid transparent;
  animation:fbQcmFade .25s ease;
}
.fb-qcm-explain.is-good{background:#e8f0ff;border-color:#bcd0f7;color:#0b3a99}
.fb-qcm-explain.is-bad{background:#fdecee;border-color:#f6c3c7;color:#a3121a}
.fb-qcm-explain-label{
  display:block;
  font-size:12px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin-bottom:3px;
  opacity:.85;
}
.course-detail-article.fb-qcm-section .fb-qcm-explain p{margin:0;font-size:14px;line-height:1.6;color:inherit}
.fb-qcm-explain strong{font-weight:900}
@keyframes fbQcmFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- Boutons (même style que le bouton rouge « Télécharger le PDF ») ---------- */
.fb-qcm-actions{margin-top:14px}
.fb-qcm-actions:empty{display:none}
.fb-qcm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:46px;
  padding:12px 20px;
  border-radius:8px;
  font:inherit;
  font-size:15px;
  font-weight:900;
  text-decoration:none!important;
  cursor:pointer;
  box-sizing:border-box;
  transition:background-color .15s ease, border-color .15s ease;
}
.fb-qcm-btn:focus-visible{outline:3px solid rgba(31,95,214,.45);outline-offset:2px}
.fb-qcm-btn-primary{background:#e71922;color:#fff!important;border:0}
.fb-qcm-btn-primary:hover{background:#c90013}
.fb-qcm-btn-primary:disabled{background:#e9a3a7;cursor:not-allowed}
.fb-qcm-btn-secondary{background:#fff;color:#09246b!important;border:1.5px solid #dce3ef}
.fb-qcm-btn-secondary:hover{border-color:#092d74}

/* ---------- Écran de résultat ---------- */
.fb-qcm-result{text-align:center;padding:6px 0 4px}
.fb-qcm-result-circle{
  --fb-qcm-pct:0;
  width:124px;
  height:124px;
  margin:4px auto 12px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:conic-gradient(#1f5fd6 calc(var(--fb-qcm-pct) * 1%), #e8edf6 0);
}
.fb-qcm-result-circle span{
  width:100px;
  height:100px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  font-size:26px;
  font-weight:900;
  color:#071e66;
}
.course-detail-article.fb-qcm-section .fb-qcm-result-title{margin:0 0 6px;font-size:21px;color:#071e66}
.fb-qcm-result-title:focus{outline:none}
.course-detail-article.fb-qcm-section .fb-qcm-result-text{margin:0 auto 6px;max-width:520px;font-size:15px;color:#24324e}
.course-detail-article.fb-qcm-section .fb-qcm-best{margin:0 0 4px;font-size:13px;color:#4b5870}
.course-detail-article.fb-qcm-section .fb-qcm-best.is-new{color:#1f5fd6;font-weight:900}
.fb-qcm-result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}

/* ---------- En-tête de la carte : libellé à gauche, « Aller au QCM » à droite ---------- */
.fb-course-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px 16px;
  margin-bottom:14px;
}
.fb-course-head .course-label{margin-bottom:0;min-width:0}
.fb-qcm-go{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:9px 18px;
  border-radius:999px;
  background:#e71922;
  color:#fff!important;
  font-size:13px;
  font-weight:900;
  line-height:1.2;
  text-decoration:none!important;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(231,25,34,.22);
  transition:background-color .15s ease;
}
.fb-qcm-go:hover{background:#c90013}
.fb-qcm-go:focus-visible{outline:3px solid rgba(31,95,214,.45);outline-offset:2px}

/* ---------- Extrait du cours visible avant « Lire la suite » ----------
   Avant : le texte du cours était entièrement replié (hauteur 0) jusqu'au clic.
   Maintenant : le début reste visible, avec un léger fondu ; « Lire la suite »
   déplie le reste et « Réduire » le replie (script.js, inchangé). */
#lecture-cours #courseMoreText:not(.open){
  max-height:320px;
  opacity:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);
  mask-image:linear-gradient(to bottom,#000 60%,transparent);
}
/* Cours assez court pour tenir dans l'extrait : affiché en entier, sans « Lire la suite ». */
#lecture-cours #courseMoreText.is-short{
  max-height:none;
  -webkit-mask-image:none;
  mask-image:none;
}
#lecture-cours #courseMoreText.is-short ~ .course-read-more-line{display:none}
#lecture-cours #courseMoreText > :first-child{margin-top:4px}

/* ---------- Bouton « Continuer vers le QCM » en fin de cours ---------- */
.fb-qcm-continue{display:none;justify-content:center;margin:22px 0 4px}
.course-more-text.open + .fb-qcm-continue,
.course-more-text.is-short + .fb-qcm-continue,
.fb-qcm-continue.is-always{display:flex}

/* Texte réservé aux lecteurs d'écran */
.fb-qcm-sr{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* ---------- Confettis ---------- */
.fb-qcm-confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2147483000;
  overflow:hidden;
}
.fb-qcm-piece{
  position:absolute;
  width:9px;
  height:13px;
  margin:-6px 0 0 -4px;
  border-radius:2px;
  opacity:0;
  animation:fbQcmBurst 1.4s cubic-bezier(.2,.7,.3,1) forwards;
}
.fb-qcm-piece.is-round{width:9px;height:9px;border-radius:50%}
.fb-qcm-piece.is-star{width:auto;height:auto;background:none!important;font-size:16px;line-height:1}
@keyframes fbQcmBurst{
  0%  {opacity:1;transform:translate(0,0) rotate(0) scale(.6)}
  55% {opacity:1;transform:translate(var(--fb-dx),var(--fb-dy)) rotate(var(--fb-rot)) scale(1)}
  100%{opacity:0;transform:translate(var(--fb-dx),var(--fb-dy2)) rotate(var(--fb-rot)) scale(.9)}
}

/* ---------- Téléphone ---------- */
/* Téléphone (20261029) : les 4 cartes statistiques sont masquées et la carte du
   cours suit directement la bannière. Ordinateur : inchangé. */
@media (max-width:767px){
  body.course-detail-body .course-page-left > .course-stats{display:none!important}
  body.course-detail-body .course-page-left > .course-detail-hero + .course-stats + #lecture-cours{margin-top:16px!important}
  .fb-course-head{gap:10px 12px}
  .fb-course-head .course-label{flex:1 1 0;white-space:normal;line-height:1.35}
  .fb-qcm-go{padding:9px 14px;font-size:12.5px}
  #lecture-cours #courseMoreText:not(.open){max-height:260px}
}

@media (max-width:700px){
  /* Correction 20261029 : plus de marge intérieure propre au QCM ; il garde celle
     de la carte du cours, pour que le texte du cours et le QCM soient alignés. */
  .course-detail-article.fb-qcm-section .fb-qcm-question p{font-size:16px}
  .fb-qcm-question{padding:12px 13px}
  .fb-qcm-option{padding:11px 12px;font-size:15px;gap:10px}
  .fb-qcm-top{font-size:13px}
  .fb-qcm-actions .fb-qcm-btn{width:100%}
  .fb-qcm-result-actions{flex-direction:column}
  .fb-qcm-result-actions .fb-qcm-btn{width:100%}
  .fb-qcm-continue .fb-qcm-btn{width:100%}
}
@media (max-width:360px){
  .fb-qcm-badge{width:28px;height:28px;font-size:13px}
  .course-detail-article.fb-qcm-section .fb-qcm-question p{font-size:15px}
}

/* Mouvements réduits demandés par l'appareil : pas d'animation. */
@media (prefers-reduced-motion:reduce){
  .fb-qcm-progress span,
  .fb-qcm-option,
  .fb-qcm-explain,
  .fb-qcm-option.is-correct .fb-qcm-badge,
  .fb-qcm-option.is-wrong .fb-qcm-badge{transition:none;animation:none}
  .fb-qcm-confetti{display:none}
}