/* ==========================================================================
   OLYMPE — Employé libre service
   Charte visuelle ATRIUM Insertion — chaleureuse, colorée, accueillante.
   Mobile d'abord. Texte 17 px minimum, cibles tactiles larges.
   Polices : Bricolage Grotesque (titres) + Figtree (texte), AUTO-HÉBERGÉES
   (assets/fonts/*.woff2), avec repli système solide. Aucune dépendance externe.
   ========================================================================== */

/* Polices auto-hébergées — fontes variables (un fichier couvre la plage de
   graisses). Sous-ensemble « latin » : couvre les accents du français. */
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:600 800;
  font-display:swap; src:url("fonts/bricolage.woff2") format("woff2");
}
@font-face{
  font-family:"Figtree"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("fonts/figtree.woff2") format("woff2");
}

:root{
  --encre:#1b2a4e;
  --creme:#faf8f3;
  --carte:#ffffff;
  --rouge:#d93a3a;
  --rouge-fonce:#bf2f2f;
  --orange:#ed9b25;
  --vert:#3f9256;
  --vert-fond:#eaf4ec;
  --rouge-doux:#fbeceb;
  --bleu:#3877bd;
  --juste:#3f9256;   /* alias utilisé par le moteur pour les bordures de validation */
  --faux:#d93a3a;
  --trait:#ece7dd;
  --gris:#5c6478;
  --gris-clair:#9098a8;
  --ombre:0 2px 10px rgba(27,42,78,.06);
  --titre:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --texte:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font:17px/1.65 var(--texte);
  color:var(--encre);
  background:var(--creme);
  overflow-x:hidden;
}

/* ---------- En-tête et pied ATRIUM (injectés sur toutes les pages) ---------- */
.atrium-entete{
  position:sticky; top:0; z-index:30;
  background:#fff; border-bottom:3px solid var(--orange);
  box-shadow:0 1px 8px rgba(27,42,78,.05);
}
.atrium-entete-in{
  max-width:720px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:12px;
}
.atrium-logo{ display:flex; align-items:center; }
.atrium-logo img{ height:44px; width:auto; display:block; }
.atrium-bonjour{
  margin-left:auto; font-family:var(--titre); font-weight:700;
  color:var(--encre); font-size:1rem;
}
.atrium-pied{
  background:#fff; border-top:3px solid var(--orange); margin-top:40px;
}
.atrium-pied-in{
  max-width:720px; margin:0 auto; padding:18px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.atrium-pied img{ height:38px; width:auto; }
.atrium-pied p{ margin:0; font-size:.82rem; color:var(--gris); }

/* ---------- Structure ---------- */
.page{ max-width:720px; margin:0 auto; padding:22px 16px 40px; }

h1{ font-family:var(--titre); font-weight:800; font-size:1.6rem; line-height:1.2; margin:0 0 8px; color:var(--encre); }
h2{ font-family:var(--titre); font-weight:700; font-size:1.22rem; margin:24px 0 10px; color:var(--encre); }
h3{ font-family:var(--titre); font-weight:700; }
.sous{ color:var(--gris); margin:0 0 20px; font-size:1rem; }
.fil{ font-family:var(--titre); font-size:.82rem; letter-spacing:.03em; text-transform:uppercase; color:var(--rouge); margin:0 0 12px; font-weight:700; }
a{ color:var(--rouge); }

/* ---------- Cartes ---------- */
.carte{
  background:var(--carte); border:1px solid var(--trait);
  border-radius:16px; padding:22px 20px; margin-bottom:16px;
  box-shadow:var(--ombre);
}

/* ---------- Saisie ---------- */
label{ display:block; font-family:var(--titre); font-weight:600; margin-bottom:8px; }
input[type=text], textarea, select{
  width:100%; padding:13px 14px; font:1rem/1.5 var(--texte);
  border:2px solid var(--trait); border-radius:11px; background:#fff; color:inherit;
}
textarea{ min-height:88px; resize:vertical; }
input[type=text]:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(237,155,37,.18);
}
.aide{ font-size:.9rem; color:var(--gris); margin-top:7px; }
.champ{ margin-bottom:14px; }

/* ---------- Boutons ---------- */
button{ font-family:var(--texte); }
button.action{
  background:var(--rouge); color:#fff; border:0; border-radius:12px;
  padding:14px 26px; font-family:var(--titre); font-weight:700; font-size:1.04rem;
  cursor:pointer; min-height:50px;
}
button.action:hover:not(:disabled){ background:var(--rouge-fonce); }
button.action:disabled{ background:#c9ccd6; cursor:default; }
button.secondaire{
  background:#fff; color:var(--rouge); border:2px solid var(--rouge);
  border-radius:12px; padding:11px 18px; font-family:var(--titre); font-weight:700; font-size:1rem;
  cursor:pointer; min-height:48px;
}
button.secondaire:hover{ background:var(--rouge-doux); }
.barre-actions{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; }

/* ---------- Options (QCM / vrai-faux / décision) ---------- */
.consigne{ font-family:var(--titre); font-weight:700; font-size:1.08rem; margin:0 0 14px; }
.enonce{ font-weight:600; margin:16px 0 12px; }
.num{ font-family:var(--titre); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--orange); margin-bottom:6px; font-weight:700; }

.opt{
  display:block; width:100%; text-align:left;
  padding:14px 16px; margin-bottom:10px;
  background:#fff; border:2px solid var(--trait); border-radius:13px;
  font:1rem/1.45 var(--texte); color:inherit; cursor:pointer; min-height:50px;
  transition:border-color .12s, background .12s;
}
.opt:hover:not(:disabled){ border-color:var(--orange); background:#fffdf8; }
.opt:disabled{ cursor:default; }
.opt.bon{ border-color:var(--vert); background:var(--vert-fond); }
.opt.mauvais{ border-color:var(--rouge); background:var(--rouge-doux); }

.vf-groupe{ display:flex; gap:10px; margin-bottom:4px; }
.vf-groupe .opt{ flex:1; text-align:center; }

.item-ex{ padding:14px 0; border-top:1px solid var(--trait); }
.item-ex:first-of-type{ border-top:0; }

/* ---------- Retour / feedback ---------- */
.retour{
  margin-top:12px; padding:13px 15px; border-radius:12px;
  font-size:.96rem; background:var(--vert-fond); border-left:5px solid var(--vert);
}
.retour.rate{ background:var(--rouge-doux); border-left-color:var(--rouge); }
.retour strong{ display:block; margin-bottom:3px; font-family:var(--titre); }

/* ---------- Textes supports ---------- */
.support{
  background:#fffdf8; border:1px solid var(--trait); border-left:5px solid var(--bleu);
  border-radius:13px; padding:16px 18px; margin-bottom:14px;
  white-space:pre-wrap; line-height:1.75;
}
.support h3{ margin:0 0 8px; font-size:1.08rem; }
.support .meta{ font-size:.82rem; color:var(--gris-clair); margin-bottom:8px; white-space:normal; }

.encadre{
  background:#fff7e6; border:1px solid #f0dca6; border-left:5px solid var(--orange);
  border-radius:13px; padding:16px 18px; margin-bottom:14px; white-space:pre-wrap; line-height:1.75;
}
.encadre h3{ margin:0 0 8px; font-size:1.08rem; }

.memo{
  background:#eef4fb; border:1px solid #cfe0f3; border-left:5px solid var(--bleu);
  border-radius:13px; padding:16px 18px; margin-bottom:14px;
}
.memo h3{ margin:0 0 8px; font-size:1.08rem; }
.memo-texte{ white-space:pre-wrap; line-height:1.75; font-size:.96rem; }

/* ---------- Support toujours visible (panneau repliable) ---------- */
.support-fixe{
  background:#fffdf8; border:1px solid var(--trait); border-radius:13px;
  margin-bottom:16px; box-shadow:var(--ombre); overflow:hidden;
}
.support-fixe > summary{
  cursor:pointer; padding:13px 16px; font-family:var(--titre); font-weight:700;
  color:var(--bleu); background:#f3f7fc; list-style:none;
}
.support-fixe > summary::-webkit-details-marker{ display:none; }
.support-fixe > summary::before{ content:"\25BE  "; }
.support-fixe:not([open]) > summary::before{ content:"\25B8  "; }
.support-fixe-inner{ padding:4px 14px 10px; max-height:320px; overflow:auto; }
.support-fixe-inner .support, .support-fixe-inner .offre, .support-fixe-inner .memo, .support-fixe-inner .tableau-wrap{ margin-bottom:8px; box-shadow:none; }

/* ---------- Tableaux ---------- */
.tableau-wrap{ overflow-x:auto; margin-bottom:14px; }
table{ border-collapse:collapse; width:100%; font-size:.95rem; background:#fff; }
th, td{ border:1px solid var(--trait); padding:10px 11px; text-align:left; }
th{ background:#eef4fb; font-family:var(--titre); font-weight:700; }

/* ---------- Offres en champs ---------- */
.offre{
  background:#fff; border:1px solid var(--trait); border-left:5px solid var(--vert);
  border-radius:13px; padding:14px 16px; margin-bottom:12px;
}
.offre .ligne{ display:flex; gap:10px; padding:5px 0; border-bottom:1px dashed #eee; }
.offre .ligne:last-child{ border-bottom:0; }
.offre .cle{ font-family:var(--titre); font-weight:700; min-width:130px; color:var(--encre); }
.offre .val{ flex:1; }

/* ---------- Images ---------- */
.grille-images{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:6px 0 14px; }
.grille-images figure{ margin:0; }
.grille-images img{ width:100%; height:auto; border-radius:12px; border:1px solid var(--trait); display:block; }
.grille-images figcaption{ font-size:.85rem; color:var(--gris); text-align:center; margin-top:4px; font-family:var(--titre); font-weight:600; }
.credit-img{ font-size:.72rem; color:var(--gris-clair); margin:2px 0 0; }

.appar-ligne{ display:flex; gap:10px; align-items:center; padding:9px 0; flex-wrap:wrap; }
.appar-ligne .gauche{ flex:1 1 170px; font-weight:600; }
.appar-ligne select{ flex:1 1 200px; }

/* Illustration d'en-tête d'activité (réservée, alimentée par donnees.js) */
.illu-entete{ width:100%; height:auto; max-height:200px; object-fit:cover; border-radius:16px; margin-bottom:14px; display:block; }

/* ---------- Audio ---------- */
.audio-boite{ background:#eef4fb; border:1px solid #cfe0f3; border-radius:13px; padding:16px; margin-bottom:14px; }
.audio-boite .boutons{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; }
.bandeau-voix{ background:#fff7e6; border:1px solid #f0dca6; border-radius:11px; padding:12px 14px; margin-bottom:12px; font-size:.94rem; color:#8a6a12; }
.script-clair{ white-space:pre-wrap; line-height:1.75; background:#fff; border:1px solid var(--trait); border-radius:11px; padding:14px; margin-top:10px; }

/* ---------- Progression ---------- */
.progress{ height:8px; background:#efe9dd; border-radius:5px; margin:0 0 16px; overflow:hidden; }
.progress > span{ display:block; height:100%; background:linear-gradient(90deg,var(--orange),var(--rouge)); width:0; transition:width .25s; }

/* ---------- Résultats + états d'envoi ---------- */
.score-grand{ font-family:var(--titre); font-size:2.6rem; font-weight:800; color:var(--rouge); margin:0 0 6px; }
.bilan li{ margin-bottom:5px; }
.etat{ font-size:.92rem; padding:13px 15px; border-radius:12px; margin-top:16px; line-height:1.5; }
.etat.pending{ background:#eef1f6; color:var(--gris); }
.etat.sent{ background:var(--vert-fond); color:#276b3c; }
.etat.failed{ background:var(--rouge-doux); color:#93231d; }
.etat.demo{ background:#fff7e6; color:#8a6a12; }
.etat code{ background:#fff; padding:1px 6px; border-radius:5px; }

/* ---------- Page de garde ---------- */
.illu-accueil{ width:100%; height:auto; border-radius:18px; display:block; margin:4px 0 20px; box-shadow:var(--ombre); }
.metier{ background:#fff; border:1px solid var(--trait); border-left:5px solid var(--orange); border-radius:14px; padding:16px 18px; margin-bottom:16px; box-shadow:var(--ombre); }
.metier h2{ margin-top:0; }
.apercu{ display:grid; gap:12px; margin-bottom:8px; }
.apercu .bloc-carte{ background:#fff; border:1px solid var(--trait); border-radius:14px; padding:14px 16px; border-top:5px solid var(--gris-clair); box-shadow:var(--ombre); }
.apercu .bloc-carte h3{ margin:0 0 4px; font-size:1.05rem; }
.apercu .bloc-carte p{ margin:0; font-size:.95rem; color:var(--gris); }

/* ---------- Sommaire (blocs colorés) ---------- */
.section-bloc{ margin-top:22px; }
.bloc-titre{ font-family:var(--titre); font-size:1.12rem; font-weight:800; margin:0 0 10px; color:var(--couleur, var(--encre)); }
.bloc-a{ --couleur:var(--bleu); }
.bloc-b{ --couleur:var(--vert); }
.bloc-c{ --couleur:var(--orange); }
.bloc-conj{ --couleur:var(--rouge); }

.liste-activites{ list-style:none; padding:0; margin:0; }
.liste-activites li{ margin-bottom:10px; }
.lien-activite{
  display:block; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--trait); border-left:6px solid var(--couleur, var(--gris-clair));
  border-radius:13px; padding:15px 16px; min-height:58px; box-shadow:var(--ombre);
}
.lien-activite:hover{ background:#fffdf8; }
.lien-activite .t{ display:block; margin-bottom:3px; font-family:var(--titre); font-weight:700; }
.lien-activite .d{ font-size:.86rem; color:var(--gris); margin-top:2px; }
.lien-activite.desactive{ opacity:.55; pointer-events:none; }
.badge{ display:inline-block; font-family:var(--texte); font-weight:600; font-size:.7rem; background:#fff2d9; color:#8a6a12; border-radius:6px; padding:2px 8px; margin-left:6px; vertical-align:middle; }

/* Bouton « lire à haute voix » (aide à la lecture sur les écrans de texte) */
.lire-haut{ display:inline-flex; align-items:center; gap:6px; margin:0 0 16px; font-size:.92rem; padding:9px 15px; }

.cache{ display:none !important; }
.rgpd{ font-size:.8rem; color:var(--gris-clair); margin-top:26px; line-height:1.5; }

@media (min-width:560px){
  .grille-images{ grid-template-columns:repeat(3,1fr); }
  .apercu{ grid-template-columns:1fr 1fr; }
  .illu-entete{ max-height:240px; }
}