@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;500;700&family=Barlow:wght@400;500&display=swap');

:root {
  --bleu: #0a3d62;
  --bleu-clair: #1e6fb8;
  --accent: #e58e26;
  --vert: #1e8449;
  --vert-clair: #e8f6ee;
  --rouge: #c0392b;
  --rouge-clair: #fdecea;
  --gris-fond: #f0f3f7;
  --gris-bord: #d8dee6;
  --gris-texte: #4a5568;
  --blanc: #ffffff;
  --ombre: 0 6px 24px rgba(10, 61, 98, 0.10);
  --radius: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--gris-fond);
  color: #1a202c;
  line-height: 1.5;
  padding: 16px;
}

.app { max-width: 760px; margin: 0 auto; }

/* En-tete */
.entete { text-align: center; padding: 18px 0 22px; }
.logo {
  font-size: 30px; font-weight: 800; letter-spacing: 2px; color: var(--bleu);
}
.logo span { color: var(--accent); }
.sous-titre { color: var(--gris-texte); font-size: 14px; margin-top: 2px; }

/* Ecrans */
.ecran { display: none; animation: apparition .25s ease; }
.ecran.active { display: block; }
@keyframes apparition { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Cartes */
.carte {
  background: var(--blanc); border-radius: var(--radius);
  box-shadow: var(--ombre); padding: 26px;
}
.carte h1 { color: var(--bleu); font-size: 24px; margin-bottom: 10px; }
.carte h2 { color: var(--bleu); font-size: 17px; margin: 22px 0 12px; }
.intro { color: var(--gris-texte); margin-bottom: 20px; }

/* Champ nom */
.champ { display: block; margin-bottom: 6px; }
.champ span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.champ input {
  width: 100%; padding: 13px 14px; font-size: 16px;
  border: 2px solid var(--gris-bord); border-radius: 10px; outline: none;
  transition: border-color .15s;
}
.champ input:focus { border-color: var(--bleu-clair); }
.erreur { color: var(--rouge); font-size: 13px; margin-top: 6px; }

/* Liste des quiz */
.liste-quiz { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz-item {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 16px; border: 2px solid var(--gris-bord); border-radius: 12px;
  background: var(--blanc); cursor: pointer; transition: all .15s; font: inherit;
}
.quiz-item:hover { border-color: var(--bleu-clair); transform: translateY(-2px); box-shadow: var(--ombre); }
.quiz-item .q-emoji { font-size: 26px; }
.quiz-item .q-titre { font-weight: 700; color: var(--bleu); font-size: 15px; }
.quiz-item .q-nb { font-size: 12px; color: var(--gris-texte); }
.quiz-item.complet { grid-column: 1 / -1; background: var(--bleu); border-color: var(--bleu); }
.quiz-item.complet .q-titre, .quiz-item.complet .q-nb { color: #fff; }

/* Examen final + verrouillage + quiz terminés */
.quiz-item.final, .quiz-item.verrou { grid-column: 1 / -1; }
.quiz-item.final { background: linear-gradient(135deg, #fff6e6, #fffdf8); border-color: var(--accent); }
.quiz-item.final .q-titre { color: #b9770e; }
.quiz-item.verrou { opacity: .65; cursor: not-allowed; border-style: dashed; background: var(--gris-fond); }
.quiz-item.verrou:hover { transform: none; box-shadow: none; border-color: var(--gris-bord); }
.quiz-item.fait { border-color: #a5d6a7; }
.parcours-titre { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gris-texte); margin-top: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--gris-bord); }
.quiz-item .q-check { color: var(--vert); font-weight: 800; margin-left: 4px; }

/* Barre du haut (quiz) */
.barre-haut { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.progression { flex: 1; }
.progression #num-question { font-size: 13px; font-weight: 600; color: var(--gris-texte); }
.barre-progress { height: 6px; background: var(--gris-bord); border-radius: 3px; margin-top: 6px; overflow: hidden; }
#barre-progress-fill { height: 100%; width: 0; background: var(--bleu-clair); border-radius: 3px; transition: width .3s; }

/* Chrono */
.chrono {
  display: flex; align-items: baseline; gap: 1px; min-width: 64px; justify-content: center;
  background: var(--bleu); color: #fff; padding: 8px 12px; border-radius: 10px;
  font-weight: 800; font-size: 22px; transition: background .3s;
}
.chrono small { font-size: 12px; font-weight: 600; }
.chrono.alerte { background: var(--rouge); animation: pulse .8s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* Barre de temps fine */
.barre-temps { height: 5px; background: var(--gris-bord); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
#barre-temps-fill { height: 100%; width: 100%; background: var(--vert); border-radius: 3px; }

/* Question */
.carte-question { padding: 24px; }
.texte-question { font-size: 17px; font-weight: 600; color: #1a202c; margin-bottom: 18px; }
.liste-options { display: flex; flex-direction: column; gap: 10px; }
.option {
  display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 14px 16px; border: 2px solid var(--gris-bord); border-radius: 11px;
  background: var(--blanc); cursor: pointer; font: inherit; font-size: 15px; transition: all .12s;
}
.option:hover { border-color: var(--bleu-clair); background: #f7fafd; }
.option .lettre {
  flex: 0 0 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gris-fond); font-weight: 700; color: var(--bleu);
}
.option.choisie { border-color: var(--bleu-clair); background: #eaf3fb; }
.option.choisie .lettre { background: var(--bleu-clair); color: #fff; }
/* Consigne (réponses multiples, remise dans l'ordre, points) */
.consigne { display: none; font-size: 13px; font-weight: 600; color: var(--bleu); background: #eaf3fb; border-radius: 8px;
  padding: 8px 12px; margin: -4px 0 12px; }
/* Remise dans l'ordre : le rang s'affiche dans la pastille, l'élément reste figé */
.option.range { cursor: default; }
.option.range .lettre { background: var(--bleu); color: #fff; }
.btn-lien { display: none; margin-top: 10px; background: none; border: none; color: var(--bleu-clair); font-weight: 600;
  font-size: 14px; cursor: pointer; padding: 4px 0; text-decoration: underline; }
.btn-lien:hover { color: var(--bleu); }
/* Résultat pondéré (quiz Vente) */
.ponderation { display: none; margin: 8px 0 4px; font-size: 14px; color: inherit; background: #eaf3fb; border-left: 4px solid var(--bleu-clair);
  border-radius: 6px; padding: 8px 12px; line-height: 1.5; }

/* Actions */
.actions { margin-top: 18px; text-align: right; }
.actions-fin { text-align: center; }
.btn {
  padding: 13px 24px; font-size: 16px; font-weight: 700; border: none;
  border-radius: 11px; cursor: pointer; transition: all .15s;
}
.btn-principal { background: var(--accent); color: #fff; }
.btn-principal:hover:not(:disabled) { background: #cf7c18; }
.btn-principal:disabled { opacity: .45; cursor: not-allowed; }
.btn-secondaire { background: var(--bleu); color: #fff; }
.btn-secondaire:hover { background: #08304d; }
.btn-large { width: 100%; margin-top: 14px; padding: 16px; font-size: 17px; }

/* Accueil : note duree + badge gamme */
.note-duree { text-align: center; font-size: 13px; color: var(--gris-texte); margin-top: 14px; }
.regles {
  background: #fff8ec; border: 1px solid #f0d9b0; border-radius: 12px;
  padding: 14px 18px; margin: 18px 0 4px;
}
.regles-titre { font-weight: 700; color: #b9770e; margin-bottom: 8px; }
.regles ul { margin: 0; padding-left: 20px; }
.regles li { font-size: 14px; margin: 5px 0; color: #4a5568; }
.gamme-badge {
  display: inline-block; background: #eaf3fb; color: var(--bleu);
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 20px; margin-bottom: 14px;
}

/* Resultats */
.bandeau-resultat { display: flex; align-items: center; gap: 22px; padding-bottom: 8px; flex-wrap: wrap; }
.score-cercle {
  flex: 0 0 110px; height: 110px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 800;
}
.score-cercle.reussi { background: var(--vert); }
.score-cercle.echoue { background: var(--accent); }
.resultat-texte h1 { font-size: 26px; }
.resultat-texte #score-detail { color: var(--gris-texte); font-size: 15px; }
.info-envoi { font-size: 13px; margin-top: 6px; color: var(--gris-texte); }

/* Correction */
.liste-correction { display: flex; flex-direction: column; gap: 12px; }
.correction-item { border: 1px solid var(--gris-bord); border-radius: 11px; padding: 14px 16px; }
.correction-item.ok { border-left: 5px solid var(--vert); background: var(--vert-clair); }
.correction-item.ko { border-left: 5px solid var(--rouge); background: var(--rouge-clair); }
.correction-item .c-q { font-weight: 600; margin-bottom: 8px; }
.correction-item .c-statut { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.correction-item.ok .c-statut { color: var(--vert); }
.correction-item.ko .c-statut { color: var(--rouge); }
.correction-item .c-ligne { font-size: 14px; margin: 2px 0; }
.correction-item .c-bonne { color: var(--vert); font-weight: 600; }
.correction-item .c-donnee { color: var(--rouge); }
.correction-item .c-expli { font-size: 13px; color: var(--gris-texte); font-style: italic; margin-top: 8px; }

/* Responsive / Mobile */
@media (max-width: 560px) {
  body { padding: 10px; }
  .liste-quiz { grid-template-columns: 1fr; }
  .carte { padding: 18px; }
  .carte h1 { font-size: 21px; }
  .bandeau-resultat { justify-content: center; text-align: center; }
  .texte-question { font-size: 16px; }
  /* Cibles tactiles plus grandes pour le doigt */
  .option { padding: 16px 14px; font-size: 16px; }
  .option .lettre { flex-basis: 34px; height: 34px; }
  .btn { padding: 15px 20px; }
  .actions { text-align: stretch; }
  #btn-suivant { width: 100%; }
  .chrono { font-size: 20px; padding: 7px 10px; min-width: 58px; }
  .score-cercle { flex-basis: 96px; height: 96px; font-size: 23px; }
}

/* ===== Page de garde : Fondamentaux de la vente (styles isolés) ===== */
#ecran-fondamentaux .slide{
  --c-accent:#1A6FD4;--c-accent2:#E8960A;--c-dark:#0D1B2E;--c-mid:#1C2F47;--c-border:#2A4060;--c-text:#F0F4F8;--c-muted:#8AA6C2;
  position:relative;overflow:hidden;font-family:'Barlow',sans-serif;color:var(--c-text);
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(26,111,212,0.22) 0%, transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(232,150,10,0.16) 0%, transparent 50%),
    linear-gradient(165deg,#0e2038 0%,#0b1626 100%);
  padding:2.25rem 1.75rem;border-radius:18px;border:1px solid rgba(42,64,96,0.7);
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
}
#ecran-fondamentaux .slide::before{content:"";position:absolute;top:-45%;right:-15%;width:55%;height:130%;background:radial-gradient(circle, rgba(26,111,212,0.18) 0%, transparent 70%);pointer-events:none;}
#ecran-fondamentaux .slide-hero{position:relative;text-align:center;padding-bottom:1.25rem;margin-bottom:1.25rem;border-bottom:1px solid var(--c-border);opacity:0;animation:fondIn .55s ease forwards;}
#ecran-fondamentaux .slide-logo{width:min(300px,78%);height:auto;display:block;margin:0 auto 1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.08);box-shadow:0 12px 32px -14px rgba(0,0,0,0.75);}
#ecran-fondamentaux .slide-brand{font-family:'Barlow Condensed',sans-serif;font-size:48px;font-weight:700;letter-spacing:1px;line-height:1;text-transform:uppercase;background:linear-gradient(90deg,#ffffff 0%,#bcd6f5 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
#ecran-fondamentaux .slide-brand span{background:linear-gradient(90deg,#f3a73f 0%,#E8960A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
#ecran-fondamentaux .slide-baseline{font-family:'Barlow Condensed',sans-serif;font-size:17px;letter-spacing:2.5px;text-transform:uppercase;color:var(--c-muted);margin-top:10px;}
#ecran-fondamentaux .grid-label{position:relative;font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--c-accent);margin-bottom:.9rem;opacity:0;animation:fondIn .55s ease .08s forwards;}
#ecran-fondamentaux .grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
#ecran-fondamentaux .grid > *{opacity:0;animation:fondUp .5s cubic-bezier(.2,.7,.3,1) forwards;}
#ecran-fondamentaux .grid > *:nth-child(1){animation-delay:.14s}
#ecran-fondamentaux .grid > *:nth-child(2){animation-delay:.20s}
#ecran-fondamentaux .grid > *:nth-child(3){animation-delay:.26s}
#ecran-fondamentaux .grid > *:nth-child(4){animation-delay:.32s}
#ecran-fondamentaux .grid > *:nth-child(5){animation-delay:.38s}
#ecran-fondamentaux .grid > *:nth-child(6){animation-delay:.44s}
#ecran-fondamentaux .grid > *:nth-child(7){animation-delay:.50s}
#ecran-fondamentaux .grid > *:nth-child(8){animation-delay:.56s}
#ecran-fondamentaux .grid > *:nth-child(9){animation-delay:.62s}
#ecran-fondamentaux .item{display:flex;align-items:flex-start;gap:14px;padding:13px 16px;border:1px solid rgba(42,64,96,0.55);border-radius:12px;background:linear-gradient(145deg,#1d3148,#16273b);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
#ecran-fondamentaux .item .num{margin-top:-2px;}
#ecran-fondamentaux .item .icon-block{margin-top:1px;}
#ecran-fondamentaux .item.accent-left{border-left:3px solid var(--c-accent);}
#ecran-fondamentaux .item.accent-amber{border-left:3px solid var(--c-accent2);}
#ecran-fondamentaux .item:hover{transform:translateY(-3px);border-color:var(--c-accent);box-shadow:0 12px 26px -14px rgba(26,111,212,0.7);}
#ecran-fondamentaux .item.accent-amber:hover{border-color:var(--c-accent2);box-shadow:0 12px 26px -14px rgba(232,150,10,0.6);}
#ecran-fondamentaux .num{font-family:'Barlow Condensed',sans-serif;font-size:28px;font-weight:700;color:var(--c-accent);min-width:34px;line-height:1;text-shadow:0 0 16px rgba(26,111,212,0.45);}
#ecran-fondamentaux .num.amber{color:var(--c-accent2);text-shadow:0 0 16px rgba(232,150,10,0.45);}
#ecran-fondamentaux .item-title{font-family:'Barlow Condensed',sans-serif;font-size:18px;font-weight:500;letter-spacing:0.5px;text-transform:uppercase;color:var(--c-text);}
#ecran-fondamentaux .item-desc{font-family:'Barlow',sans-serif;font-size:11.5px;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--c-muted);margin-top:4px;}
#ecran-fondamentaux .icon-block{width:38px;height:38px;border-radius:9px;background:#0D1B2E;border:1px solid rgba(26,111,212,0.2);box-shadow:inset 0 0 12px rgba(26,111,212,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#ecran-fondamentaux .item.accent-amber .icon-block{border-color:rgba(232,150,10,0.22);box-shadow:inset 0 0 12px rgba(232,150,10,0.1);}
#ecran-fondamentaux .icon-block svg{width:18px;height:18px;}
#ecran-fondamentaux .item7-wrapper{grid-column:span 2;border:1px solid rgba(42,64,96,0.55);border-left:3px solid var(--c-accent2);border-radius:12px;background:linear-gradient(145deg,#1d3148,#16273b);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
#ecran-fondamentaux .item7-wrapper:hover{transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(232,150,10,0.6);}
#ecran-fondamentaux .item7-top{display:flex;align-items:center;gap:14px;padding:13px 16px 10px;}
#ecran-fondamentaux .item7-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--c-muted);padding:0 16px 8px;font-family:'Barlow Condensed',sans-serif;}
#ecran-fondamentaux .item7-split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--c-border);}
#ecran-fondamentaux .split-card{padding:11px 16px;display:flex;align-items:center;gap:10px;transition:background .2s ease;}
#ecran-fondamentaux .split-card:hover{background:rgba(232,150,10,0.06);}
#ecran-fondamentaux .split-card:first-child{border-right:1px solid var(--c-border);}
#ecran-fondamentaux .split-num{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:700;color:#0D1B2E;background:var(--c-accent2);width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 14px -2px rgba(232,150,10,0.6);}
#ecran-fondamentaux .split-title{font-family:'Barlow Condensed',sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;color:var(--c-text);}
#ecran-fondamentaux .split-desc{font-size:11px;color:var(--c-muted);margin-top:2px;}
#ecran-fondamentaux .slide-footer{position:relative;margin-top:1.3rem;padding-top:1rem;border-top:1px solid var(--c-border);}
#ecran-fondamentaux .slide-footer-text{font-size:11px;color:var(--c-muted);letter-spacing:1px;text-transform:uppercase;}
#ecran-fondamentaux #btn-vers-quiz{background:linear-gradient(135deg,#f0a13a 0%,#d97e15 100%);box-shadow:0 12px 30px -10px rgba(229,142,38,0.65);transition:transform .15s ease,box-shadow .15s ease;opacity:0;animation:fondIn .55s ease .72s forwards;}
#ecran-fondamentaux #btn-vers-quiz:hover{transform:translateY(-2px);box-shadow:0 16px 36px -8px rgba(229,142,38,0.8);filter:none;}
@keyframes fondIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fondUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width: 560px) {
  #ecran-fondamentaux .slide{padding:1.75rem 1.25rem;}
  #ecran-fondamentaux .grid{grid-template-columns:1fr;}
  #ecran-fondamentaux .item7-wrapper{grid-column:span 1;}
  #ecran-fondamentaux .slide-brand{font-size:34px;}
  #ecran-fondamentaux .slide-baseline{font-size:15px;letter-spacing:1.5px;}
  #ecran-fondamentaux .item7-split{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce) {
  #ecran-fondamentaux .header,
  #ecran-fondamentaux .slide-intro,
  #ecran-fondamentaux .grid > *,
  #ecran-fondamentaux #btn-vers-quiz{animation:none;opacity:1;}
}

/* ---------- Correction immédiate (bonne réponse en vert) ---------- */
.option:disabled { cursor: default; color: inherit; opacity: 1; }
.option:disabled:hover { border-color: var(--gris-bord); background: var(--blanc); }
.option.bonne, .option.bonne:disabled:hover { border-color: var(--vert); background: var(--vert-clair); }
.option.bonne .lettre { background: var(--vert); color: #fff; }
.option.fausse, .option.fausse:disabled:hover { border-color: var(--rouge); background: var(--rouge-clair); }
.option.fausse .lettre { background: var(--rouge); color: #fff; }
.option.partielle, .option.partielle:disabled:hover { border-color: var(--accent); background: #fff6e6; }
.option.partielle .lettre { background: var(--accent); color: #fff; }
.feedback { margin-top: 12px; font-weight: 700; font-size: 15px; min-height: 22px; }
.feedback.ok { color: var(--vert); }
.feedback.ko { color: var(--rouge); }
.feedback.partiel { color: var(--accent); }
.explication { display: none; margin-top: 10px; padding: 12px 14px; border-left: 4px solid var(--rouge);
  background: var(--rouge-clair); border-radius: 8px; font-size: 15px; line-height: 1.45; }
.explication.visible { display: block; }

/* ---------- Résultat candidat : produits à retravailler ---------- */
.liste-produits { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.liste-produits li { background: var(--rouge-clair); border: 1px solid var(--rouge); color: var(--rouge);
  border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.sans-faute { color: var(--vert); font-weight: 600; margin-top: 10px; }

/* ---------- Validation terrain (terrain.html) ---------- */
.recap { background: var(--gris-fond); border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; }
.recap-ligne { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--gris-bord); font-size: 15px; }
.recap-ligne:last-child { border-bottom: none; }
.recap-ligne span { color: var(--gris-texte); }
.recap-ligne.total strong { font-size: 20px; color: var(--bleu); }
.champ select, .champ textarea {
  width: 100%; padding: 13px 14px; font-size: 16px; font-family: inherit;
  border: 2px solid var(--gris-bord); border-radius: 10px; outline: none; background: var(--blanc);
}
.champ select:focus, .champ textarea:focus { border-color: var(--bleu-clair); }
.champ textarea { resize: vertical; line-height: 1.5; }
.champ small, .facultatif { font-weight: 400; color: var(--gris-texte); font-size: 13px; }
.case { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 10px 0; cursor: pointer; }
.case input { width: 18px; height: 18px; }
.grille-competences { width: 100%; border-collapse: collapse; font-size: 14px; }
.grille-competences th { text-align: center; font-size: 12px; color: var(--gris-texte); padding: 6px 4px; font-weight: 600; }
.grille-competences th:first-child { text-align: left; }
.grille-competences td { padding: 8px 4px; border-top: 1px solid var(--gris-bord); text-align: center; }
.grille-competences td:first-child { text-align: left; }
.grille-competences input { width: 18px; height: 18px; cursor: pointer; }

/* ---------- Carte du vendeur (carte.html) : filigrane nominatif, consultation seule ---------- */
body, body * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea { user-select: text; -webkit-user-select: text; }
.filigrane { position: fixed; inset: 0; z-index: 50; pointer-events: none; background-repeat: repeat; }
.voile { position: fixed; inset: 0; z-index: 60; background: rgba(10, 61, 98, .97); color: #fff; display: flex; align-items: center;
  justify-content: center; text-align: center; font-size: 22px; font-weight: 700; line-height: 1.5; padding: 20px; }
.voile[hidden] { display: none; }
.voile small { font-size: 15px; font-weight: 400; color: #cfe0f2; }
.masque .app { filter: blur(14px); }
.remise { font-size: 13px; font-weight: 600; color: var(--rouge); text-align: center; margin-bottom: 10px; }
.carte-vendeur h1 { text-align: center; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; }
.carte-sous-titre { text-align: center; color: var(--bleu-clair); font-weight: 800; font-size: 17px; text-transform: uppercase; margin: 2px 0 8px; }
.carte-vendeur .intro { text-align: center; }
.reflexes { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.reflexes > li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 10px; border-top: 1px solid var(--gris-bord); }
.reflexes > li:first-child { border-top: none; }
.reflexe-num { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center; font-size: 16px; }
.reflexe-icone { flex: 0 0 46px; height: 46px; border-radius: 50%; background: #eaf3fb; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-top: -6px; }
.reflexe-corps h2 { margin: 0 0 6px; font-size: 17px; text-transform: uppercase; color: var(--bleu-clair); }
.reflexe-corps ul { padding-left: 18px; }
.reflexe-corps li { font-size: 15px; margin: 3px 0; }
.carte-conclusion { margin-top: 18px; padding: 14px 16px; background: var(--bleu); color: #fff; border-radius: 10px; text-align: center; font-weight: 600; line-height: 1.5; }
.carte-important { margin-top: 16px; padding: 12px 16px; border: 2px solid var(--bleu); border-radius: 10px; background: #eaf3fb; font-weight: 600; line-height: 1.5; }
.carte-important[hidden], .carte-conclusion[hidden] { display: none; }
.carte-note { font-size: 12px; color: var(--gris-texte); text-align: center; margin-top: 12px; }
.quiz-item.carte-lien { grid-column: 1 / -1; }
.actions a.btn { display: inline-block; text-decoration: none; }
@media print { .app, .filigrane { display: none !important; }
  body::after { content: "Impression interdite — document interne Normbel, interdit à la divulgation en dehors du personnel de Normbel."; display: block; font: 700 20px Arial; padding: 40px; } }
/* Onglets parcours / quiz */
.onglets[hidden] { display: none; }
.onglets { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.onglet { flex: 1; min-width: 150px; padding: 12px 14px; border: 2px solid var(--gris-bord); border-radius: 12px; background: var(--blanc);
  font-size: 15px; font-weight: 700; color: var(--gris-texte); cursor: pointer; transition: all .15s; }
.onglet:hover { border-color: var(--bleu-clair); }
.onglet.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.onglet-identite { flex-basis: 100%; text-align: right; font-size: 12px; color: var(--gris-texte); }
.onglet-identite a { color: var(--bleu-clair); }
/* Verrou des cartes (code d'accès personnel) */
.verrou { padding: 16px; border: 2px dashed var(--accent); border-radius: 12px; background: #fff9f0; margin-bottom: 10px; }
.verrou p { font-size: 14px; color: var(--gris-texte); margin-bottom: 10px; }
@media (max-width: 600px) { .reflexe-icone { display: none; } }

/* ---------- Administration (admin.html) ---------- */
.app-large { max-width: 1100px; }
.tableau-admin { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
.tableau-admin th { text-align: left; font-size: 12px; color: var(--gris-texte); padding: 8px 6px; border-bottom: 2px solid var(--gris-bord); }
.tableau-admin td { padding: 10px 6px; border-bottom: 1px solid var(--gris-bord); vertical-align: top; }
.tableau-admin tr.inactif td { opacity: .55; }
.tableau-admin .progression { font-size: 12px; color: var(--gris-texte); line-height: 1.5; }
.tableau-admin input.niveau { width: 60px; padding: 6px; font-size: 15px; border: 2px solid var(--gris-bord); border-radius: 8px; }
.code-vendeur { font-size: 16px; font-weight: 700; letter-spacing: .08em; color: var(--bleu); user-select: text; -webkit-user-select: text; }
.btn-lien.visible { display: inline-block; margin: 2px 0; font-size: 13px; }
.btn-lien.danger { color: var(--rouge); }
.etiquette-inactif { font-size: 11px; color: var(--rouge); font-weight: 700; }
.grille-ajout { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 600px) { .grille-ajout { grid-template-columns: 1fr; } .tableau-admin { font-size: 12px; } }
/* Espace direction : détail vendeur, banques de questions */
.petit { font-size: 12px; color: var(--gris-texte); }
.tableau-admin tr.detail td { background: var(--gris-fond); }
.detail-bloc { padding: 8px 4px; font-size: 13px; }
.detail-bloc h4 { margin: 10px 0 4px; color: var(--bleu); font-size: 14px; }
.historique { width: 100%; border-collapse: collapse; font-size: 12px; background: var(--blanc); }
.historique th, .historique td { padding: 5px 6px; border-bottom: 1px solid var(--gris-bord); text-align: left; vertical-align: top; }
.banque-question { padding: 10px 0; border-bottom: 1px solid var(--gris-bord); font-size: 14px; }
.banque-options, .banque-ordre { margin: 6px 0 0 22px; }
.banque-options li { margin: 2px 0; }
.banque-options li.bonne { color: var(--vert); font-weight: 700; }
.banque-ordre li { margin: 2px 0; color: var(--vert); font-weight: 600; }
.defilable { overflow-x: auto; }
.tableau-ensemble th, .tableau-ensemble td { font-size: 13px; }
.tableau-ensemble td.centre, .tableau-ensemble th { text-align: center; }
.tableau-ensemble td:first-child, .tableau-ensemble th:first-child { text-align: left; }
.ok { color: var(--vert); font-weight: 700; }
.ko { color: var(--rouge); font-weight: 700; }
.copie-erreurs { margin: 8px 0 4px 18px; font-size: 12px; }
.copie-erreurs li { margin: 6px 0; line-height: 1.45; }
.copie-erreurs .ok, .copie-erreurs .ko { font-weight: 500; }
details summary { cursor: pointer; color: var(--bleu-clair); font-weight: 600; font-size: 12px; }
.etiquette-direction { font-size: 11px; color: #fff; background: var(--bleu); border-radius: 6px; padding: 1px 6px; font-weight: 700; vertical-align: middle; }