/* ==========================================================================
   VTCPass — composants
   Formes qui portent du sens :
     épreuve = panneau de direction bleu · risque = triangle ambre
     éliminé = cercle rouge · validé = cartouche vert
   ========================================================================== */

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--asphalte);
  color: var(--bitume-clair);
  border-bottom: 4px solid var(--bleu-autoroute);
}
.entete .page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  min-height: 60px;
  padding-block: var(--e-2);
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  color: inherit;
  text-decoration: none;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--t-1);
  letter-spacing: -0.01em;
  min-height: var(--cible);
}
.logo svg { width: 36px; height: 36px; }
.logo:hover { text-decoration: none; }
.entete-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.entete a:not(.btn), .entete .lien-bouton, .entete .btn-discret { color: var(--bitume-clair); }

/* Bascule de langue FR / عربي */
.bascule-langue {
  display: inline-flex;
  border: 2px solid currentColor;
  border-radius: var(--r-bouton);
  overflow: hidden;
}
.bascule-langue a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--cible);
  min-height: 40px;
  padding: 0 var(--e-3);
  text-decoration: none;
  font-weight: 700;
}
.bascule-langue a[aria-current="true"] { background: var(--bitume-clair); color: var(--asphalte); }
.bascule-langue a:lang(ar) { font-family: var(--police-arabe); }

/* Menu repliable (sans JavaScript : <details>) */
.menu { position: relative; }
.menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border-radius: var(--r-bouton);
  cursor: pointer;
  font-weight: 700;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: rgba(255, 255, 255, .12); }
.menu-liste {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--e-2));
  min-width: 15rem;
  margin: 0;
  padding: var(--e-2);
  list-style: none;
  background: var(--surface);
  color: var(--texte);
  border-radius: var(--r-feuille);
  box-shadow: 0 12px 32px rgba(27, 36, 48, .25);
}
.menu-liste li + li { margin-top: 0; }
.menu-liste a, .menu-liste button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-bouton);
  background: none;
  color: var(--texte) !important;
  font: inherit;
  text-decoration: none;
  text-align: start;
  cursor: pointer;
}
.menu-liste a:hover, .menu-liste button:hover { background: var(--fond); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible-confort);
  padding: var(--e-2) var(--e-5);
  border: 2px solid transparent;
  border-radius: var(--r-bouton);
  font-family: var(--police-texte);
  font-size: var(--t-0);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duree), border-color var(--duree), transform var(--duree);
}
.btn:active { transform: translateY(1px); }
.btn-principal { background: var(--marque); color: var(--sur-marque); }
.btn-principal:hover { background: var(--marque-survol); color: var(--sur-marque); }
.btn-secondaire { background: transparent; color: var(--texte); border-color: currentColor; }
.btn-secondaire:hover { background: var(--surface); }
.btn-discret { background: transparent; color: var(--lien); min-height: var(--cible); padding-inline: var(--e-3); }
.btn-danger { background: var(--danger); color: var(--blanc-panneau); }
.btn-large { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.lien-bouton {
  background: none; border: 0; padding: 0 var(--e-3); min-height: var(--cible);
  color: var(--lien); font: inherit; text-decoration: underline; cursor: pointer;
}

/* ---------- Panneau de direction (épreuve) ----------
   Fond bleu, filet blanc intérieur, lettre dans un cartouche blanc,
   note à droite comme une distance. */
.panneau {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 64px;
  padding: var(--e-3) var(--e-4);
  background: var(--bleu-autoroute);
  color: var(--blanc-panneau);
  border-radius: var(--r-panneau);
  box-shadow: inset 0 0 0 4px var(--bleu-autoroute), inset 0 0 0 6px var(--blanc-panneau);
  font-family: var(--police-titre);
  font-weight: 700;
  text-decoration: none;
}
a.panneau:hover { background: var(--bleu-autoroute-fonce); box-shadow: inset 0 0 0 4px var(--bleu-autoroute-fonce), inset 0 0 0 6px var(--blanc-panneau); color: var(--blanc-panneau); }
.cartouche {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--e-2);
  background: var(--blanc-panneau);
  color: var(--bleu-autoroute);
  border-radius: 4px;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--t-1);
  line-height: 1;
}
.panneau-titre { flex: 1; line-height: 1.25; }
.panneau-note {
  margin-inline-start: auto;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--t-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.panneau-note small { font-size: var(--t-moins-1); color: inherit; opacity: .85; font-weight: 700; }
.panneau-statut { display: inline-flex; align-items: center; gap: var(--e-1); }

/* Grand panneau (hero, question jouable) */
.panneau-grand {
  display: block;
  padding: var(--e-5);
  border-radius: var(--r-panneau);
  background: var(--bleu-autoroute);
  color: var(--blanc-panneau);
  box-shadow: inset 0 0 0 6px var(--bleu-autoroute), inset 0 0 0 9px var(--blanc-panneau);
}
.panneau-grand h1, .panneau-grand h2 { color: var(--blanc-panneau); }

/* ---------- Signaux d'état (jamais la couleur seule : forme + texte) ---------- */
.signal {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 700;
}
.signal svg { width: 1.5em; height: 1.5em; flex: none; }

/* Validé : cartouche vert */
.cartouche-vert {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: var(--e-1) var(--e-3);
  background: var(--vert-direction);
  color: var(--blanc-panneau);
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--vert-direction), inset 0 0 0 3px var(--blanc-panneau);
  font-family: var(--police-titre);
  font-weight: 800;
}

/* Risque d'élimination : triangle ambre (SVG) + texte */
.risque-texte { color: var(--texte); }
.bandeau-risque {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-4);
  background: var(--ambre-chantier);
  color: var(--sur-risque);
  border-radius: var(--r-panneau);
  font-weight: 700;
}

/* Éliminé : cercle rouge (SVG) + texte */
.elimine-texte { color: var(--danger); font-weight: 700; }

/* ---------- Borne d'arrivée (compte à rebours) ---------- */
.borne {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 7.5rem;
  background: var(--blanc-panneau);
  color: var(--asphalte);
  border: 2px solid var(--asphalte);
  border-radius: 40% 40% 6px 6px / 22% 22% 6px 6px;
  overflow: hidden;
  text-align: center;
}
.borne-tete {
  width: 100%;
  padding: var(--e-2) var(--e-3) var(--e-1);
  background: var(--bleu-autoroute);
  color: var(--blanc-panneau);
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--t-moins-1);
}
.borne-chiffre {
  padding: var(--e-2) var(--e-3) 0;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--t-4);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.borne-unite { padding: 0 var(--e-3) var(--e-3); font-weight: 700; }

/* ---------- Feuilles (cartes de contenu), alertes ---------- */
.feuille {
  background: var(--surface);
  border-radius: var(--r-feuille);
  padding: var(--e-5);
  border: 1px solid var(--ligne);
}
.feuille > :last-child { margin-bottom: 0; }

.alerte {
  display: flex;
  gap: var(--e-3);
  align-items: flex-start;
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-panneau);
  border-inline-start: 6px solid var(--marque);
  background: var(--surface);
  margin-bottom: var(--e-4);
}
.alerte p { margin: 0; }
.alerte-succes { border-inline-start-color: var(--succes); }
.alerte-erreur { border-inline-start-color: var(--danger); }
.alerte .icon { width: 1.5rem; height: 1.5rem; margin-top: .1rem; }
.alerte-succes .icon { color: var(--succes); }
.alerte-erreur .icon { color: var(--danger); }
.alerte-info .icon { color: var(--marque); }

/* ---------- Formulaires ---------- */
.champ { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-5); }
.champ label, .champ legend { font-weight: 700; }
.champ .aide { color: var(--texte-doux); font-size: var(--t-0); margin: 0; }
.champ .erreur { color: var(--danger); font-weight: 700; margin: 0; display: flex; gap: var(--e-2); align-items: center; }
input[type="email"],
input[type="text"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  min-height: var(--cible-confort);
  padding: var(--e-3) var(--e-4);
  border: 2px solid var(--gris-glissiere);
  border-radius: var(--r-bouton);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
}
textarea { min-height: 8rem; resize: vertical; }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--danger); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--e-5); }

/* Choix sous forme de grosses cases (onboarding, préférences) */
.choix {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--cible-confort);
  padding: var(--e-3) var(--e-4);
  border: 2px solid var(--ligne);
  border-radius: var(--r-bouton);
  background: var(--surface);
  cursor: pointer;
  font-weight: 700;
}
.choix + .choix { margin-top: var(--e-2); }
.choix input { width: 1.4rem; height: 1.4rem; accent-color: var(--marque); flex: none; margin: 0; }
.choix:has(input:checked) { border-color: var(--marque); box-shadow: inset 0 0 0 1px var(--marque); }

/* ---------- Tableau de bord à 3 boutons ---------- */
.tableau-bord { display: grid; gap: var(--e-4); }
.action-route {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  min-height: 92px;
  padding: var(--e-4) var(--e-5);
  border-radius: var(--r-panneau);
  text-decoration: none;
  font-family: var(--police-titre);
  font-weight: 800;
  font-size: var(--t-1);
  line-height: 1.2;
}
.action-route .icon { width: 2.25rem; height: 2.25rem; }
.action-route small { display: block; font-family: var(--police-texte); font-weight: 400; font-size: var(--t-0); color: inherit; opacity: .9; margin-top: var(--e-1); }
.action-route-principale {
  background: var(--bleu-autoroute);
  color: var(--blanc-panneau);
  box-shadow: inset 0 0 0 4px var(--bleu-autoroute), inset 0 0 0 6px var(--blanc-panneau);
}
.action-route-principale:hover { background: var(--bleu-autoroute-fonce); color: var(--blanc-panneau); box-shadow: inset 0 0 0 4px var(--bleu-autoroute-fonce), inset 0 0 0 6px var(--blanc-panneau); }
.action-route-secondaire {
  background: var(--surface);
  color: var(--texte);
  border: 2px solid var(--ligne);
}
.action-route-secondaire:hover { border-color: var(--marque); color: var(--texte); }

[dir="rtl"] .action-fleche, [dir="rtl"] .icon-fleche { transform: scaleX(-1); }

/* ---------- Ligne de route (séparateur signature) ---------- */
.ligne-route {
  height: 6px;
  border: 0;
  margin-block: var(--e-6);
  background: repeating-linear-gradient(90deg, var(--ligne) 0 28px, transparent 28px 44px);
}

/* ---------- Pied de page ---------- */
.pied {
  margin-top: var(--e-8);
  background: var(--asphalte);
  color: var(--bitume-clair);
  padding-block: var(--e-6) var(--e-5);
  border-top: 4px solid var(--bleu-autoroute);
}
.pied a { color: var(--bitume-clair); }
.pied-colonnes { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pied h2 { font-size: var(--t-0); font-family: var(--police-titre); margin-bottom: var(--e-3); color: var(--bitume-clair); }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li + li { margin-top: var(--e-1); }
.pied li a { display: inline-flex; align-items: center; min-height: 36px; }
.pied-legal { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid #3A4759; color: #AEB8C6; font-size: var(--t-moins-1); }
.pied-legal p { max-width: none; }

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-1) var(--e-3);
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--ligne);
  font-size: var(--t-0);
  font-weight: 700;
}

/* ---------- Accordéon (FAQ, sections repliées) ---------- */
.repli { border-bottom: 1px solid var(--ligne); }
.repli > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible-confort);
  padding: var(--e-3) 0;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.repli > summary::-webkit-details-marker { display: none; }
.repli > summary::after { content: "+"; font-family: var(--police-titre); font-size: var(--t-2); line-height: 1; }
.repli[open] > summary::after { content: "−"; }
.repli > div { padding-bottom: var(--e-4); }

/* ---------- Nuancier (page design system) ---------- */
.nuancier { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); padding: 0; list-style: none; max-width: none; }
.nuancier li { margin: 0; border-radius: var(--r-panneau); overflow: hidden; border: 1px solid var(--ligne); background: var(--surface); }
.nuancier .pastille { height: 64px; }
.nuancier p { margin: 0; padding: var(--e-2) var(--e-3); font-size: var(--t-moins-1); }
.pastille-asphalte { background: #1B2430; }
.pastille-bitume { background: #EEF1F4; }
.pastille-bleu { background: #1D4E9E; }
.pastille-vert { background: #0F7A50; }
.pastille-ambre { background: #F2A900; }
.pastille-rouge { background: #C8102E; }
.pastille-blanc { background: #FFFFFF; }

.grille-2 { display: grid; gap: var(--e-5); }
@media (min-width: 48rem) {
  .grille-2 { grid-template-columns: 1fr 1fr; }
  .tableau-bord { grid-template-columns: 1fr 1fr; }
  .tableau-bord .action-route-principale { grid-column: 1 / -1; }
}

/* ---------- Accueil ---------- */
.hero-sous-titre { font-size: var(--t-1); line-height: 1.45; max-width: 46ch; }
.hero-note { margin: 0; opacity: .9; }
.btn-hero { background: var(--blanc-panneau); color: var(--bleu-autoroute); min-height: 56px; font-size: var(--t-1); }
.btn-hero:hover { background: var(--bitume-clair); color: var(--bleu-autoroute-fonce); }
.panneau-grand { padding: var(--e-6) var(--e-5); }
@media (min-width: 48rem) { .panneau-grand { padding: var(--e-7); } }

.liste-panneaux { list-style: none; padding: 0; max-width: none; display: grid; gap: var(--e-4); }
.liste-panneaux li { margin: 0; }
@media (min-width: 48rem) { .liste-panneaux { grid-template-columns: 1fr 1fr; } }
.panneau-legende { display: flex; align-items: center; gap: var(--e-2); margin: var(--e-2) 0 0; color: var(--texte-doux); }
.panneau-legende .icon { width: 1.4em; height: 1.4em; }

.etapes { list-style: none; padding: 0; display: grid; gap: var(--e-4); max-width: 46rem; }
.etapes li { display: flex; gap: var(--e-4); align-items: flex-start; margin: 0; }
.etapes .chiffre {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-panneau);
  background: var(--asphalte);
  color: var(--bitume-clair);
  font-size: var(--t-1);
}
.etapes p { margin: .35rem 0 0; }

/* ---------- Pages courtes (connexion, erreurs, compte) ---------- */
.carte-centree { max-width: 34rem; margin-inline: auto; }
.carte-centree h1 { font-size: var(--t-3); }
.entete-page { display: flex; align-items: center; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-5); }
.entete-page h1 { margin: 0; }
.statut-acces { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }
.zone-danger { border-color: var(--danger); }
.action-route .icon-fleche { margin-inline-start: auto; width: 1.75rem; height: 1.75rem; }
.h-moyen { font-size: var(--t-1); }
.erreur-code { margin: 0; font-size: var(--t-5); line-height: 1; color: var(--marque); }
details.feuille > summary { list-style: none; cursor: pointer; }
details.feuille > summary::-webkit-details-marker { display: none; }
details.feuille[open] > summary { margin-bottom: var(--e-4); }
.h1-exemple { font-family: var(--police-titre); font-weight: 800; font-size: var(--t-3); line-height: 1.15; }
.ds-chiffre { font-size: var(--t-5); }
.ds-signaux { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.ds-signaux li { margin: 0; }
.ds-rangee { display: flex; flex-wrap: wrap; gap: var(--e-3); max-width: none; }

/* Petits écrans : en-tête compact */
@media (max-width: 26rem) {
  .logo > span { display: none; }  /* le panneau seul reste identifiable ; nom lu via aria-label */
  .logo svg { width: 32px; height: 32px; }
  .entete .btn-discret { padding-inline: var(--e-2); }
  .bascule-langue a { padding: 0 var(--e-2); }
}