/*! © 2026 BGP Associés (BGP Formations) · Outils RH by BGP. Tous droits réservés. */
/* Ma première journée : charte BGP (bleu #4285F4, rouge #F04437, or #FCBC05, sombre #1B1B1E) */
:root{
  --bleu:#4285F4; --bleu-fonce:#2E6CDB; --bleu-texte:#1F4FA8; --bleu-clair:#E8F0FE;
  --or:#FCBC05; --or-clair:#FFF1C2; --rouge:#F04437;
  --sombre:#1B1B1E; --gris:#4A5262; --bord:#D3DBEA; --fond:#F3F6FC; --fond-page:#E9EEF7;
  --alerte-fond:#FDE3E1; --alerte-texte:#A3241A;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--fond-page);color:var(--sombre);font-family:'Century Gothic','Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;color:inherit}
button:focus-visible,a:focus-visible{outline:3px solid var(--or);outline-offset:2px}
img{max-width:100%}

.app{max-width:100%;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--fond);display:flex;flex-direction:column;position:relative;
  padding-bottom:env(safe-area-inset-bottom)}

.chargement{padding:40px 24px;text-align:center;font-size:18px;color:var(--gris)}

/* En-tête de progression */
.entete{display:flex;align-items:center;gap:14px;padding:calc(14px + env(safe-area-inset-top)) 16px 10px;position:sticky;top:0;background:var(--fond);z-index:5}
.entete .prog{flex:1;display:flex;flex-direction:column;gap:7px}
.entete .etape{font-size:15px;font-weight:600;color:var(--gris)}
.barre{height:8px;border-radius:99px;background:#DCE3F0;overflow:hidden}
.barre span{display:block;height:100%;background:var(--or);border-radius:99px;transition:width .4s}
.btn-audio{width:52px;height:52px;flex:none;border-radius:50%;border:none;background:var(--sombre);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.btn-audio.clair{background:transparent;border:2px solid #fff}

.contenu{flex:1;display:flex;flex-direction:column;gap:12px;padding:0 14px 18px}

/* Accueil */
.bandeau{background:var(--sombre);color:#fff;padding:calc(22px + env(safe-area-inset-top)) 22px 66px;display:flex;flex-direction:column;gap:10px}
.bandeau .ligne{display:flex;align-items:center;justify-content:space-between}
.points{display:flex;gap:6px}
.points i{width:12px;height:12px;border-radius:50%;display:block}
.surtitre{font-size:14px;font-weight:600;color:var(--or);text-transform:uppercase;letter-spacing:.05em}
.bandeau h1{margin:0;font-size:34px;line-height:1.15}
.bandeau p{margin:0;font-size:17px;line-height:1.45;color:#E6E8EE}
.cartes{margin-top:-46px;padding:0 16px 18px;display:flex;flex-direction:column;gap:14px}

.carte{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #fff;border-radius:22px;box-shadow:0 10px 30px rgba(27,27,30,.12);padding:16px 18px;display:flex;flex-direction:column;gap:11px}
.carte h2{margin:0;font-size:18px}
.carte p{margin:0;font-size:17px;line-height:1.5}
.info{display:flex;align-items:flex-start;gap:11px;font-size:16px;line-height:1.45}
.pastille{width:44px;height:44px;flex:none;border-radius:50%;background:var(--bleu-clair);color:var(--bleu-texte);display:flex;align-items:center;justify-content:center}
.coche{width:26px;height:26px;flex:none;border-radius:50%;background:var(--or-clair);display:flex;align-items:center;justify-content:center;margin-top:1px}
.petit{font-size:14px;line-height:1.45;color:var(--gris)}
.signature{display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;color:var(--gris)}
.signature .points i{width:8px;height:8px}

/* Boutons principaux */
.btn{width:100%;min-height:60px;border:none;border-radius:16px;background:var(--bleu-fonce);color:#fff;font-size:19px;font-weight:700;cursor:pointer;padding:12px 16px}
.btn:disabled{background:#C9D2E3;color:var(--gris);cursor:not-allowed}
.btn.secondaire{background:transparent;color:var(--sombre);border:2px solid var(--sombre)}

/* Scènes */
.scene{position:relative;border-radius:20px;overflow:hidden;background:#EEF2F8;flex:none}
.scene img{display:block;width:100%;height:auto}
.scene.pleine{border-radius:0;margin:0 -14px}
.heure{position:absolute;left:12px;top:12px;background:var(--sombre);color:#fff;font-size:14px;font-weight:600;padding:6px 12px;border-radius:99px}
.zone{position:absolute;border:none;background:transparent;border-radius:14px;cursor:pointer;padding:0}
.zone.clignote{animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(252,188,5,.9)}70%{box-shadow:0 0 0 16px rgba(252,188,5,0)}100%{box-shadow:0 0 0 0 rgba(252,188,5,0)}}
@media (prefers-reduced-motion:reduce){.zone.clignote{animation:none;box-shadow:0 0 0 4px var(--or)}.barre span{transition:none}}
.etiquette{position:absolute;transform:translateX(-50%);background:#fff;font-size:13px;font-weight:600;padding:4px 10px;border-radius:99px;box-shadow:0 2px 8px rgba(27,27,30,.15);pointer-events:none;white-space:nowrap}
.dialogue{margin-top:-14px;position:relative}
.qui{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--bleu-texte)}
.qui i{width:10px;height:10px;border-radius:50%;background:var(--or)}

/* Carte du site */
.carte-site{background:#EEF2F8}
.point{position:absolute;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:none;background:rgba(252,188,5,.25);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
.point i{width:20px;height:20px;border-radius:50%;background:var(--or);border:3px solid var(--sombre);display:block}
.point.clignote{animation:pulse 1.6s ease-out infinite}
.marque{position:absolute;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;border:2px solid var(--bleu-fonce);display:flex;align-items:center;justify-content:center;color:var(--bleu-fonce)}
.marque.vue{background:var(--bleu-fonce);color:#fff}
.marque.ici{background:var(--sombre);border-color:#fff;color:#fff;width:28px;height:28px;margin:-14px 0 0 -14px;box-shadow:0 2px 8px rgba(27,27,30,.3)}
.legende{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--gris)}
.legende>span{display:flex;align-items:center;gap:8px}
.legende .marque{position:static;margin:0;flex:none}
.repere{position:absolute;transform:translateX(-50%);background:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:99px;box-shadow:0 2px 8px rgba(27,27,30,.15);white-space:nowrap;pointer-events:none}
.repere.actif{background:var(--sombre);color:#fff;font-size:13px}
.repere.discret{transform:translate(-50%,-50%);background:rgba(255,255,255,.75);color:var(--gris);box-shadow:none}

/* Réponses */
.reponse{width:100%;display:flex;align-items:flex-start;gap:12px;text-align:left;padding:14px;min-height:64px;border-radius:16px;border:2px solid var(--bord);background:#fff;font-size:17px;line-height:1.4;cursor:pointer}
.reponse .lettre{flex:none;width:32px;height:32px;border-radius:50%;background:#EEF2F9;font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center}
.reponse[aria-pressed="true"]{border-color:var(--bleu-fonce);background:var(--bleu-clair);box-shadow:0 0 0 3px rgba(66,133,244,.25)}
.reponse[aria-pressed="true"] .lettre{background:var(--bleu-fonce);color:#fff}

/* Épreuve de préparation de commande */
.bon{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.bon div{display:flex;justify-content:space-between;font-size:18px;padding:6px 10px;border-radius:10px;background:var(--fond)}
.ref{font-weight:700;letter-spacing:.03em}
.titre-bloc{font-size:15px;font-weight:700}
.etagere{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 10px}
.carton{position:relative;height:96px;border:2px solid var(--bord);border-radius:14px;background:#fff;cursor:pointer;padding:4px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.carton img{width:56px;height:auto}
.carton .ref{background:var(--sombre);color:#fff;font-size:16px;padding:2px 7px;border-radius:6px}
.compte{position:absolute;top:-9px;right:-7px;min-width:26px;height:26px;border-radius:13px;background:var(--bleu-fonce);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 6px}
.ligne-chariot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:18px}
.moins{width:44px;height:44px;border-radius:12px;border:2px solid var(--bord);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}

/* Fin */
.fort{display:flex;gap:10px;align-items:flex-start}
.etoile{width:30px;height:30px;flex:none;border-radius:50%;background:var(--or);display:flex;align-items:center;justify-content:center}
.fort b{display:block;font-size:16px;line-height:1.35}
.fort span{font-size:16px;line-height:1.4;color:var(--gris)}

/* Fiche de test (recruteur) */
.niveau{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:10px 12px;border-radius:14px;background:var(--fond)}
.niveau b{font-size:15px;line-height:1.35}
.niveau small{display:block;font-size:13px;color:var(--gris)}
.pill{font-size:13px;font-weight:700;padding:5px 11px;border-radius:99px;white-space:nowrap}
.pill.fort-n{background:var(--bleu-fonce);color:#fff}
.pill.acquis{background:#E3ECFD;color:var(--bleu-texte)}
.pill.approfondir{background:var(--or-clair);border:1px solid var(--or)}
.pill.vide{background:#EEF0F4;color:var(--gris)}
.alerte{padding:12px;border-radius:14px;background:var(--alerte-fond);color:var(--alerte-texte);font-size:15px;line-height:1.45;font-weight:600}

/* Fiche de poste (fenêtre) */
.voile{position:absolute;inset:0;background:rgba(27,27,30,.55);display:flex;align-items:flex-end;z-index:10}
.fenetre{width:100%;background:#fff;border-radius:26px 26px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px}
.regle{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.45}
.regle b{width:30px;height:30px;flex:none;border-radius:50%;background:var(--bleu-fonce);color:#fff;font-size:15px;display:flex;align-items:center;justify-content:center}

/* Colonnes : sur téléphone, tout s'empile dans l'ordre du texte */
.col-a,.col-b,.cmd-info,.cmd-etagere,.cmd-chariot{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- Tablette (portrait) ---------- */
@media (min-width:600px){
  body{padding:24px}
  .app{max-width:680px;min-height:calc(100dvh - 48px);border-radius:28px;overflow:hidden;box-shadow:0 24px 60px rgba(27,27,30,.18)}
  .contenu{padding:4px 24px 24px}
  .entete{padding-left:24px;padding-right:24px}
  .scene.pleine{margin:0;border-radius:20px}
  .bandeau{padding:36px 32px 76px}
  .bandeau h1{font-size:40px}
  .cartes{padding:0 24px 24px}
}

/* ---------- Ordinateur et tablette (paysage) ---------- */
@media (min-width:960px){
  .app{max-width:1180px}
  .contenu{padding:8px 32px 32px}
  .entete{padding:20px 32px 14px}
  .entete .prog{max-width:520px}
  .deux-col{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:start}
  .deux-col .col-a{position:sticky;top:96px}
  .deux-col.inverse .col-a{order:-1}
  .dialogue{margin-top:0}
  .commande{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"etagere info" "etagere chariot";grid-template-rows:auto 1fr;gap:20px 28px;align-items:start}
  .cmd-info{grid-area:info}
  .cmd-etagere{grid-area:etagere}
  .cmd-chariot{grid-area:chariot}
  .carton{height:118px}
  .carton img{width:72px}
  .bandeau{padding:48px 48px 96px}
  .bandeau h1{font-size:48px}
  .bandeau p{font-size:19px;max-width:640px}
  .cartes{display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:20px;padding:0 32px 32px;margin-top:-60px}
  .cartes .btn{grid-column:1 / -1;max-width:420px;justify-self:center}
  .cartes .signature{grid-column:1 / -1}
  .carte.liste{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .fenetre{max-width:560px;margin:0 auto;border-radius:26px;margin-bottom:24px}
  .voile{align-items:center}
}