/* ================== Base ================== */

html, body {
  width: 100%;
  overscroll-behavior-x: none;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Verdana, sans-serif;
  color: #000;
  line-height: 1.6;
}

* { box-sizing: border-box; }

img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block; /* évite les espaces de ligne sur les images */
}

/* ================== Layout global ================== */

.container-narrow {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 1rem; /* petit gutter */
}

/* ================== Jumbotron ================== */

.jumbotron {
  padding-top: 1rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* image de fond */
.jumbotron-bg {
  z-index: -2;
  object-fit: cover;
}

/* calque blanc semi-transparent */
.jumbotron::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: -1;
}

/* s'assurer que le contenu est au-dessus de l’overlay */
.jumbotron .container {
  position: relative;
  z-index: 1;
}

.jumbotron h1 {
  margin-top: 1rem;
}

.jumbotron .lead {
  padding-top: 1rem;
  font-size: 1.2rem;
  line-height: 1.2;
  font-weight: 900;
}

/* Pour les logos dans le jumbotron */
.logo-strip {
  display: block;
  max-height: 50px;
  width: auto !important;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .logo-strip { max-height: 30px; }
}

.logo-strip + .logo-strip { margin-top: 15px !important; }

@media (min-width: 992px) {
  .logo-strip + .logo-strip { margin-top: 15px !important; }
}

/* =============== HERO RÉSULTAT (pastille verte / rouge) =============== */

#resultWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.3rem;
  margin-bottom: 1.4rem;
}

#resultBlock {
  font-weight: 700;
  padding: 0.55rem 1.8rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: center;
  display: inline-block;
}

#resultBlock.result-ok {
  background-color: #d8f0d3;
  color: #137333;
}

#resultBlock.result-bad {
  background-color: #ffe2e2;
  color: #b00020;
}

#resultMessage {
  max-width: 820px;
  text-align: center;
  line-height: 1.6;
  color: #222;
}

/* ================== Typo & espacements ================== */

section { margin-bottom: 2.5rem; }

h1, h2, h3 { margin-bottom: .6rem; }

h1 {
  font-size: 3.8rem;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0.03em 0.03em 0 #00000010;
}

h2 {
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: var(--bs-primary, #0d6efd); /* fallback */
}

h3 {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.2;
  color: #2D4E72;
}

/* Paragraphes */
p, ul, li {
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

/* ================== Navbar ================== */

.navbar .navbar-nav .nav-item,
.navbar .navbar-nav .nav-link {
  font-size: 1rem;
  margin-bottom: 0 !important;
}

@media (min-width: 992px) {
  .navbar .navbar-nav .nav-link {
    display: flex;
    align-items: center;
  }
}

.navbar-brand img {
  height: 35px;
  width: auto;
}

/* Barre du haut (bleue) + barre promo (orange) */
.topbar { font-size: 0.95rem; }

/* Texte des deux barres : même padding, même line-height */
.topbar .navbar-text,
.topbar .promo-link {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
  line-height: 1.2;
}

/* ================== Bouton principal ================== */

@media (min-width: 768px) {
  .btn-lg.w-md-auto { min-width: 320px; }
}

/* ================== Footer ================== */

.site-footer {
  background-color: #f8f9fa; /* léger fond gris */
  font-size: 0.95rem;        /* texte un peu plus discret que le corps */
}

.site-footer,
.site-footer ul,
.site-footer li,
.site-footer a {
  font-size: inherit;
}

.footer-links a {
  color: #0d6efd;
  text-decoration: none;
}

.footer-links a:hover { text-decoration: underline; }

.footer-links ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

/* ===== Mobile / tablettes ===== */
@media (max-width: 768px) {
  .site-footer .d-flex {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }

  .footer-links { width: 100%; }

  .footer-links ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    column-gap: 0.75rem;
    row-gap: 0.15rem;
    padding-left: 0;
  }

  .footer-links li { margin: 0; }

  .footer-links a {
    font-size: 0.9rem;
    display: inline-block;
  }
}

.site-footer ul { padding-left: 0; }

.site-footer li {
  margin-bottom: 0.15rem;
  line-height: 1.4;
}

/* ================== Mobile / petits écrans ================== */

@media (max-width: 576px) {
  h1 {
    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 900;
    margin-bottom: 0.4rem;
    text-shadow: 0.03em 0.03em 0 #00000010;
  }

  .jumbotron h1 {
  margin-top: 0.5rem;
  }

  h2 {
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 900;
    margin-bottom: 1rem;
  }

  h3 {
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 900;
  }

  .container-narrow { padding-inline: 1rem; }

  section { margin-bottom: 1.8rem; }

  ul {
    font-size: 1.1rem;
    padding-left: 1.2rem;
  }

  li {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
  }

  p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  .mobile-break::before {
    content: "\A";
    white-space: pre;
  }

  .navbar-brand img {
    height: 35px;
    width: auto;
  }

  #resultBlock {
    display: block !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.7rem 1.2rem !important;
    margin: 0 auto 0.75rem;
  }
}

/* Réduit l'espace sous le bloc "Voici ton résultat" */
#compte { margin-bottom: 1.2rem !important; }

/* ================== MAIN : padding global (sitewide) ================== */
/* ✅ Modif SAFE : on supprime :has() et on “remonte” #controls dans le padding */
:root { --cc-main-pt: 2rem; }

main.container-narrow {
  padding-top: var(--cc-main-pt) !important;
  background-color: #ffffff;  /* adapte si ton fond n'est pas #fff */
}

/* ✅ seulement si #controls existe : il vient manger l’espace du padding-top */
main.container-narrow #controls {
  margin-top: calc(-1 * var(--cc-main-pt));
}

/* ================== Styles examen / corrections ================== */

.imgFaux {
  border: 5px solid #d11141;
  border-radius: 20px;
}

.imgJuste {
  border: 5px solid #00b159;
  border-radius: 20px;
}

.choices{
  width: 100%;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
  background-color: #6a8494;
}

.choiceJuste { background-color: #00b159; }
.choiceFaux  { background-color: #6a8494; }

.choiceFauxUser {
  background-color: #f5cccc;
  color: #520100;
}

.correction {
  overflow: hidden;
  border-radius: 10px;
}



/* ================== Correction détaillée : full-width sur mobile ================== */
@media (max-width: 576px) {
  main.container-narrow {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  #question {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  #question .swiper-slide.examForm.row {
    margin-left: 0;
    margin-right: 0;
  }

  #blocQst.row {
    margin-left: 0;
    margin-right: 0;
  }

  #blocQst .col-12 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
}

/* ====== Grille de bénéfices sur la landing ====== */

.features-grid { row-gap: 2rem; }

.feature-card {
  background-color: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
  border: 1px solid #e5e7eb;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-card figure {
  margin: 0 0 1rem;
  border-radius: 0.75rem;
  overflow: hidden;
}

.feature-card img {
  width: 100%;
  height: auto;
  display: block;
}

.feature-card h3 { margin-bottom: 0.5rem; }
.feature-card p  { margin-bottom: 0; }

@media (max-width: 576px) {
  .feature-card { padding: 1rem 1rem 1.25rem; }
}

/* Bloc vidéo : on garde juste le contour, plus de "carte" ni d'ombre grise */
.video-phone-shell {
  background: linear-gradient(135deg, #111, #333);
  border-radius: 1.5rem;
  padding: 0.75rem;
  box-shadow: none;
}

.video-vertical {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  background-color: #000;
}

@media (max-width: 576px) {
  .video-phone-shell {
    padding: 0.5rem;
    border-radius: 1.25rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
  }
}

.feature-card--video { padding: 1rem; }

@media (min-width: 992px) {
  .feature-card--video {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
  }
}

.cta-section {
  background-color: #f8fafc;
  border-radius: 0.75rem;
  padding: 2.5rem 1.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.06);
  border: 1px solid #e5e7eb;
}

.field-label {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
  color: #111;
}

/* Test gratuit */

.boutons{
  width: 100%;
  border: 1px solid #fff;
  border-radius: 15px;
  padding: 10px;
  color: #fff;
}

/* Desktop : comme avant */
.nextQst-wrapper{
  margin-top: 1rem; /* 👈 espace au-dessus du bouton */
}

/* Mobile/tablette : bouton collé en bas, même largeur que le contenu */
@media (max-width: 1023.98px){
  body.cc-exam .nextQst-wrapper{
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(960px, calc(100vw - 1rem));  /* même largeur que ton contenu */
    background: #fff;
    border-top: 1px solid #6a849455;
    padding: 1rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom)); /* 👈 espace au-dessus + safe area */
    z-index: 3;
  }
}

/* Checkbox masquée (tu cliques le label) */
input[type=checkbox]{
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Cards "LANCER LE TEST" */
.startTest{
  position: relative;
  text-decoration: none;
}
.startTest:hover,
.startTest:focus{
  text-decoration: none;
}

/* Marqueur difficulté */
#levelQst{
  color: #B03200;
}
.nQst.dur{
  border-color: #B03200;
}

/* Sommaire */
nav[aria-label="Sommaire du code de la route"]{
  background: #f8fbfd;
  border: 1px solid rgba(106, 132, 148, 0.15);
  border-radius: 12px;
  padding: 1.5rem 1.25rem;
}

.toc-code{
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
.toc-code li{
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.2rem;
}
.toc-code li::before{
  content: "";
  position: absolute;
  left: 0.3rem;
  top: 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #0d6efd;
  border-radius: 9999px;
}
.toc-code a{
  color: #0d6efd;
  text-decoration: none;
}
.toc-code a:hover{
  text-decoration: none;
}

/* Image thématique */
img[title="Code de la route"]{
  border-radius: 14px;
}

/* Mobile */
@media (max-width: 575.98px) {
  nav[aria-label="Sommaire du code de la route"]{
    padding: 1rem .9rem;
  }
  .toc-code{
    line-height: 1.45;
  }
  .toc-code li::before{
    top: 0.5rem;
  }
}

/* =========================
   Mode EXAMEN (image collée / full-bleed / typo + suppression du blanc)
   ========================= */
body.cc-exam main.container-narrow{
  padding-top: .25rem !important;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
  padding-bottom: .75rem !important;
}

/* wrapper image : supprime les margins bootstrap */
body.cc-exam .examForm > div:first-child{
  margin: 0 !important;
  padding: 0 !important;
}

/* image : quasi collée en haut */
body.cc-exam .examForm #imageQst{
  margin-top: 0 !important;
  display: block;
}

/* #media : éviter qu'il crée une “bande blanche” */
body.cc-exam #media{
  margin: 0 !important;
  padding: 0 !important;
}
body.cc-exam #media:empty{
  display: none !important;
}
body.cc-exam #media audio{
  display: none !important;
}

/* Image: quasi collée sur les côtés (mobile) */
@media (max-width: 768px){
  body.cc-exam .examForm #imageQst{
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 14px;
  }
}

/* Cadre bleu (9/40...) collé sous la photo */
body.cc-exam .nQst{
  margin-top: .35rem !important;
  margin-bottom: .6rem !important;
  padding: .35rem .6rem !important;
  font-size: .95rem;
}

/* Question: réduit + homogène */
body.cc-exam #qstA{ margin-top: .4rem !important; }
body.cc-exam #qstA p,
body.cc-exam #qstB p{
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: .75rem;
}

/* Optionnel: évite que le <strong> fasse “énorme” visuellement */
body.cc-exam #qstA strong,
body.cc-exam #qstB strong{
  font-weight: 700;
}

/* Aligne les blocs du formulaire (dont le cadre bleu) avec la photo */
body.cc-exam #blocQst.row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* (optionnel) si tu veux aussi virer le petit padding latéral des colonnes */
body.cc-exam #blocQst.row > .col-12{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Cadre bleu = exactement la largeur du bloc (comme l'image w-100) */
body.cc-exam .nQst{
  display: block;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ================== Archive du forum ================== */
/* Ajouts propres à forum.codeclic.com. Le reste de ce fichier reprend
   les styles du site principal (header.php). */

.forum-post .card-header { background-color: #f8f9fa; }
.forum-post .forum-subject { color: #6c757d; font-weight: 600; margin-bottom: .75rem; }

.forum-content { overflow-wrap: anywhere; line-height: 1.6; }
/* Le site affiche les images en bloc. Dans les messages, elles restent dans le texte (smileys, panneaux). */
.forum-content img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.forum-content ul, .forum-content ol { font-size: inherit; }

.forum-content blockquote {
  margin: .75rem 0;
  padding: .5rem .9rem;
  border-left: 4px solid #446e9b;
  background: #f1f4f8;
  border-radius: .25rem;
  font-size: .95em;
}
.forum-content blockquote cite {
  display: block;
  font-style: normal;
  font-weight: 600;
  margin-bottom: .25rem;
}
.forum-content .codebox,
.forum-content pre {
  background: #f8f9fa;
  padding: .5rem .75rem;
  border-radius: .25rem;
  overflow-x: auto;
}
.forum-content .inline-attachment { font-style: italic; color: #6c757d; }

.forum-topics .forum-topic-link,
.forum-list h2 a { text-decoration: none; }
.forum-topics .forum-topic-link:hover,
.forum-list h2 a:hover { text-decoration: underline; }
.forum-topics .forum-topic-link { font-size: 1.05rem; }
.forum-last { white-space: nowrap; }

@media (max-width: 767.98px) {
  .forum-last { white-space: normal; margin-top: .4rem; }
}