/* Projet Pro 2026-2027 — ATRIUM Insertion — pages de l'application (accueil du stagiaire, connexion, espace de l'équipe).
   Même graphisme que le site : fond crème, vert profond, terre cuite ; polices hébergées sur le site (aucun appel à Google). */
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/atkinson-hyperlegible-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(polices/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(polices/atkinson-hyperlegible-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(polices/atkinson-hyperlegible-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(polices/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600; font-display: swap; src: url(polices/bricolage-grotesque-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap; src: url(polices/bricolage-grotesque-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 800; font-display: swap; src: url(polices/bricolage-grotesque-latin-800-normal.woff2) format('woff2'); }

:root {
  --creme:#FBF6EC; --encre:#2A2520; --gris:#5C5347; --gris2:#8A8072; --filet:#EADFC8; --filet2:#D8CCB4;
  --vert:#26573A; --vert2:#3E8A50; --vert-pale:#E7F2EA; --terre:#C25532; --terre2:#A84424; --bleu:#3E7CB8; --bleu-pale:#EAF2FA;
  --jaune:#E8B420; --jaune-pale:#FFF6E5; --rouge:#B3261E; --rouge-pale:#FBE9E7; --blanc:#FFFFFF;
  --titre:'Bricolage Grotesque','Atkinson Hyperlegible',system-ui,sans-serif;
  --texte:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ombre:0 6px 22px rgba(38,87,58,.10);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--creme);color:var(--encre);font-family:var(--texte);font-size:16.5px;line-height:1.55}
a{color:var(--terre)} a:hover{color:var(--vert)}
h1,h2,h3,h4{font-family:var(--titre);color:var(--vert);line-height:1.2}
img{max-width:100%}
.cache{display:none!important}
.visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--bleu);outline-offset:2px}

/* ---------------------------------------------------------------- boutons et champs */
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--titre);font-weight:700;font-size:16.5px;
  background:var(--terre);color:#FFF7EF;border:none;border-radius:12px;padding:11px 20px;cursor:pointer;min-height:46px;text-decoration:none;line-height:1.2}
.bouton:hover{background:var(--terre2);color:#fff}
.bouton:disabled{opacity:.55;cursor:default}
.bouton.second{background:#fff;color:var(--vert);border:1.5px solid var(--filet2)}
.bouton.second:hover{border-color:var(--vert2);background:#F3F8F1;color:var(--vert)}
.bouton.vert{background:var(--vert)} .bouton.vert:hover{background:#1C4630}
.bouton.danger{background:#fff;color:var(--rouge);border:1.5px solid #E7B9B4} .bouton.danger:hover{background:var(--rouge-pale)}
.bouton.petit{font-size:14.5px;min-height:36px;padding:7px 13px;border-radius:10px}
.bouton.lien{background:none;border:none;color:var(--terre);padding:4px 6px;min-height:0;text-decoration:underline;font-weight:700}
.champ{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:15px;color:var(--gris)}
.champ input,.champ select,.champ textarea,input.saisie{font-family:inherit;font-size:16.5px;padding:11px 14px;border:1.5px solid var(--filet2);border-radius:10px;
  background:#fff;color:var(--encre);min-height:46px;width:100%}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--vert2);outline:none;box-shadow:0 0 0 3px rgba(62,138,80,.18)}
.case{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;cursor:pointer}
.case input{width:20px;height:20px;margin-top:2px;accent-color:var(--vert);flex:none}
.message{margin:10px 0 0;padding:10px 14px;border-radius:10px;font-size:15.5px;font-weight:700}
.message.erreur{background:var(--rouge-pale);color:#7A1A14} .message.ok{background:var(--vert-pale);color:#16653B} .message.info{background:var(--bleu-pale);color:#1F4B78}
.message:empty{display:none}

/* ---------------------------------------------------------------- en-tête commun */
.tete{background:#fff;border-bottom:1px solid var(--filet)}
.tete .in{max-width:1120px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tete img{height:52px;width:auto;display:block}
.tete .titres{flex:1;min-width:180px}
.tete h1{font-size:clamp(21px,3vw,28px);margin:0;font-weight:800}
.tete p{margin:2px 0 0;color:var(--gris);font-size:15px}
.tete .actions-tete{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.enveloppe{max-width:1120px;margin:0 auto;padding:0 16px 56px}
.carte-blanche{background:#fff;border:1px solid var(--filet);border-radius:18px;padding:20px 22px;margin-top:20px}
.carte-blanche h2{margin:0 0 8px;font-size:22px}
.aide{color:var(--gris);font-size:15px;margin:0 0 12px}
.pied{text-align:center;color:var(--gris2);font-size:14px;padding:24px 0 0}

/* ---------------------------------------------------------------- page « pas encore ouverte » */
body.porte{display:grid;place-items:center;min-height:100vh;padding:16px}
.porte-boite{background:#fff;border:1px solid var(--filet);border-radius:22px;padding:28px 26px;max-width:520px;text-align:center;box-shadow:var(--ombre)}
.porte-logo{height:76px}
.porte-boite h1{font-size:26px;margin:14px 0 8px}
.porte-boite p{font-size:17.5px}

/* ---------------------------------------------------------------- connexion */
.connexion{max-width:560px;margin:0 auto;padding:24px 16px 48px}
.connexion .logo{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.connexion .logo img{height:70px}
.connexion h1{font-size:30px;margin:0;font-weight:800}
.connexion .sous{margin:2px 0 0;color:var(--gris)}
.connexion form{display:grid;gap:16px}
.connexion .code input{font-size:26px;letter-spacing:.3em;font-family:var(--titre);font-weight:700}
.connexion .identifiant input{font-size:22px;letter-spacing:.06em;text-transform:uppercase;font-family:var(--titre);font-weight:700}
.connexion .ligne-code{display:flex;gap:8px}
.connexion .ligne-code input{flex:1;min-width:0}
.connexion .bouton.gros{font-size:20px;min-height:56px;width:100%}
.connexion .qr-aide{margin-top:16px;display:flex;gap:12px;align-items:flex-start;background:var(--jaune-pale);border:2px solid var(--jaune);border-radius:14px;padding:12px 14px;font-size:16px}
.connexion .qr-aide b{font-size:26px;line-height:1}
.connexion .equipe{margin-top:22px;text-align:center;font-size:15px}
.connexion .premiere{margin:18px 0 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;font-weight:700;color:var(--gris)}
.piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.carte-inscrit{border:2px solid var(--vert2);border-radius:16px;padding:16px 18px;margin:12px 0 16px;background:#F7FBF6;display:grid;gap:2px}
.carte-inscrit .qui{font-family:var(--titre);font-size:21px;font-weight:800;color:var(--vert);margin-bottom:6px}
.carte-inscrit .lib{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.carte-inscrit .val{font-family:var(--titre);font-size:30px;font-weight:800;letter-spacing:.06em;color:var(--encre);margin-bottom:8px;word-break:break-all}
.carte-inscrit .val.code{letter-spacing:.28em}
#bloc-fait .bouton.gros{margin-top:10px}
.connecte{display:grid;gap:12px}
.connecte .qui{font-family:var(--titre);font-size:24px;font-weight:800;color:var(--vert)}

/* ---------------------------------------------------------------- accueil du stagiaire */
.bonjour{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bonjour .qui{font-family:var(--titre);font-size:25px;font-weight:800;color:var(--vert);margin:0}
.bonjour .grp{color:var(--gris);font-size:15.5px}
.bonjour .bouton{margin-left:auto}
.barre{height:16px;background:#F1EADB;border-radius:999px;overflow:hidden;margin:8px 0 4px}
.barre>i{display:block;height:100%;background:var(--vert2);border-radius:999px;transition:width .4s}
.compteurs{display:flex;gap:16px;flex-wrap:wrap;font-size:16px;color:var(--gris)}
.compteurs b{color:var(--encre);font-size:19px}
.partie{margin-top:26px}
.partie>.kicker{font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--terre);text-transform:uppercase}
.partie>h2{font-size:clamp(22px,3vw,28px);margin:2px 0 4px;font-weight:800}
.partie .voir{font-size:15px;font-weight:700}
.rubrique{margin-top:14px}
.rubrique h3{font-size:17px;margin:12px 0 8px}
.activites{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act{display:flex;align-items:center;gap:13px;border:1.5px solid var(--filet);border-radius:14px;padding:11px 14px;text-decoration:none;color:var(--encre);background:#fff;min-height:64px}
.act:hover{border-color:var(--vert2);background:#F3F8F1;color:var(--encre)}
.act .num{width:40px;height:40px;border-radius:10px;color:var(--creme);font-family:var(--titre);font-weight:800;font-size:15px;display:grid;place-items:center;flex:none;background:var(--vert)}
.act.faite .num{background:var(--vert2)} .act.a_faire .num{background:var(--terre)}
.act .txt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.act .etiq{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--terre)}
.act .titre{font-weight:700;font-size:16px;line-height:1.25}
.pastille{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap;flex:none}
.pastille.faite{background:var(--vert-pale);color:#16653B}
.pastille.en_cours,.pastille.commencee{background:var(--jaune-pale);color:#7A5A0E}
.pastille.a_faire{background:#F4EEE2;color:var(--gris)}
.pastille.nouveau{background:var(--terre);color:#fff}
.vide{background:#fff;border:2px dashed var(--filet2);border-radius:18px;padding:22px;text-align:center;color:var(--gris);font-size:17px;margin-top:20px}
.appli-lien{text-align:center;margin-top:24px}
.attente{border:2px solid var(--vert2);background:#F7FBF6}
.attente h2{margin:0 0 6px}
.mes-identifiants h2{font-size:19px}
.mes-identifiants .ligne-ident{margin:6px 0;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:17px}
.mes-identifiants .ligne-ident b{font-family:var(--titre);font-size:21px;letter-spacing:.08em}
@media (pointer:fine){.appli-lien.mobile{display:none}}

/* ---------------------------------------------------------------- espace de l'équipe */
.esp-nav{background:var(--vert)}
.esp-nav .in{max-width:1280px;margin:0 auto;padding:0 12px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin}
.esp-nav a{color:#E8F1EA;text-decoration:none;font-weight:700;font-size:15px;padding:12px 14px;white-space:nowrap;border-bottom:3px solid transparent}
.esp-nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.esp-nav a.actif{color:#fff;border-bottom-color:var(--jaune)}
.esp{max-width:1280px;margin:0 auto;padding:18px 16px 64px}
.esp .tete-page{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:6px 0 14px}
.esp .tete-page h2{margin:0;font-size:26px;flex:1;min-width:200px}
.esp .fil{font-size:14px;color:var(--gris);margin:0 0 4px}
.esp .fil a{font-weight:700}
.onglets{display:flex;gap:6px;flex-wrap:wrap;border-bottom:2px solid var(--filet);margin:0 0 16px}
.onglets button{font-family:var(--titre);font-weight:700;font-size:15.5px;background:none;border:none;border-bottom:3px solid transparent;margin-bottom:-2px;padding:10px 12px;cursor:pointer;color:var(--gris)}
.onglets button.actif{color:var(--vert);border-bottom-color:var(--terre)}
.grille-cartes{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.gcarte{background:#fff;border:1px solid var(--filet);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--encre)}
.gcarte:hover{border-color:var(--vert2);box-shadow:var(--ombre);color:var(--encre)}
.gcarte h3{margin:0;font-size:19px}
.gcarte .meta{color:var(--gris);font-size:14.5px}
.gcarte.archive{opacity:.65}
.enligne{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#16653B}
.enligne::before{content:'';width:10px;height:10px;border-radius:50%;background:#2DA44E;box-shadow:0 0 0 3px rgba(45,164,78,.2)}
.horsligne{color:var(--gris2)}
.panneau{background:#fff;border:1px solid var(--filet);border-radius:16px;padding:16px 18px;margin-bottom:16px}
.panneau h3{margin:0 0 10px;font-size:18px}
.panneau .entete-panneau{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.panneau .entete-panneau h3{margin:0;flex:1}
.formulaire-ligne{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.formulaire-ligne .champ{flex:1;min-width:160px}
table.tab{width:100%;border-collapse:collapse;font-size:15px}
table.tab th{text-align:left;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris);background:#F8F3E8;padding:9px 10px;border-bottom:1px solid var(--filet);white-space:nowrap}
table.tab td{padding:9px 10px;border-bottom:1px solid var(--filet);vertical-align:top}
table.tab tr:hover td{background:#FDFAF3}
.defile{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:#F4EEE2;border-radius:999px;padding:5px 11px;font-size:14px;font-weight:700;color:var(--gris)}
.chip.vert{background:var(--vert-pale);color:#16653B}
.chip.terre{background:#F8E3DA;color:#8A3417}
.chip.bleu{background:var(--bleu-pale);color:#1F4B78}
.vide-esp{color:var(--gris);font-style:italic;padding:8px 0}

/* grille du suivi en direct */
.grille-suivi{border-collapse:separate;border-spacing:0;font-size:13.5px;min-width:100%}
.grille-suivi th,.grille-suivi td{border-bottom:1px solid var(--filet);border-right:1px solid var(--filet);padding:6px 7px;text-align:center;background:#fff}
.grille-suivi thead th{position:sticky;top:0;z-index:2;background:#F8F3E8;font-size:12px;font-weight:700;color:var(--gris);vertical-align:bottom;min-width:74px;max-width:110px;line-height:1.25}
.grille-suivi thead th .sym{display:block;font-family:var(--titre);font-size:14px;color:var(--vert)}
.grille-suivi .nom{position:sticky;left:0;z-index:1;text-align:left;min-width:170px;max-width:220px;background:#fff;font-weight:700}
.grille-suivi thead .nom{z-index:3;background:#F8F3E8}
.grille-suivi .nom a{color:var(--encre);text-decoration:none} .grille-suivi .nom a:hover{color:var(--terre)}
.grille-suivi .nom small{display:block;font-weight:400;color:var(--gris);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.case-s{display:block;border-radius:8px;padding:4px 3px;font-weight:700;font-size:12.5px;line-height:1.2;min-height:24px}
.case-s.faite{background:#DCEFE1;color:#16653B}
.case-s.faite.moyen{background:#FFF0CC;color:#7A5A0E}
.case-s.faite.faible{background:#F9DDD4;color:#8A3417}
.case-s.en_cours,.case-s.commencee{background:var(--jaune-pale);color:#7A5A0E}
.case-s.a_faire{color:#B9AE98}
.case-s.fermee{color:#CFC6B5;font-weight:400}
.flash{animation:flash 2.2s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--jaune)}100%{box-shadow:0 0 0 0 transparent}}
.fil-evenements{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.fil-evenements li{display:flex;gap:10px;padding:8px 2px;border-bottom:1px solid var(--filet);font-size:14.5px;align-items:baseline}
.fil-evenements time{color:var(--gris2);font-size:13px;white-space:nowrap;min-width:44px}
.fil-evenements .ic{width:22px;flex:none;text-align:center}
.fil-evenements b{color:var(--encre)}
.direct-haut{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.direct-haut .maj{margin-left:auto;color:var(--gris2);font-size:13.5px}
.colonnes{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(280px,1fr);gap:16px;align-items:start}

/* ouverture des activités */
.arbre .partie-o{margin-bottom:18px}
.arbre .partie-o>h3{font-size:19px;margin:0 0 8px}
.arbre .rub-o{border:1px solid var(--filet);border-radius:14px;margin-bottom:10px;background:#fff;overflow:hidden}
.arbre .rub-o>header{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:#F8F3E8}
.arbre .rub-o>header b{flex:1;font-family:var(--titre);font-size:16px;color:var(--vert)}
.arbre .ligne-o{display:flex;gap:12px;align-items:center;padding:9px 14px;border-top:1px solid var(--filet);flex-wrap:wrap}
.arbre .ligne-o .sym{width:34px;height:34px;border-radius:9px;background:var(--vert);color:var(--creme);display:grid;place-items:center;font-family:var(--titre);font-weight:800;font-size:13.5px;flex:none}
.arbre .ligne-o.fermee .sym{background:#CFC6B5}
.arbre .ligne-o .t{flex:1;min-width:180px}
.arbre .ligne-o .t small{display:block;color:var(--gris);font-size:13px}
.bascule{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:14.5px;color:var(--gris)}
.bascule input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;background:#D8CCB4;position:relative;cursor:pointer;transition:background .15s;flex:none;margin:0}
.bascule input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.bascule input:checked{background:var(--vert2)}
.bascule input:checked::after{left:23px}
.bascule input:disabled{opacity:.5;cursor:default}

/* fiche d'un stagiaire */
.fiche-tete{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.fiche-tete .ident{flex:1;min-width:220px}
.fiche-tete .ident h2{margin:0}
.tuiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}
.tuile{background:#fff;border:1px solid var(--filet);border-radius:14px;padding:12px 14px;border-left:5px solid var(--vert)}
.tuile .l{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);font-weight:700}
.tuile .v{font-family:var(--titre);font-size:26px;font-weight:800;color:var(--vert)}
.tuile.t2{border-left-color:var(--vert2)} .tuile.t3{border-left-color:var(--terre)} .tuile.t3 .v{color:var(--terre)} .tuile.t4{border-left-color:var(--bleu)} .tuile.t4 .v{color:var(--bleu)}
details.depli{border-top:1px solid var(--filet);padding:8px 0}
details.depli summary{cursor:pointer;font-weight:700;color:var(--vert)}
.conseil-texte{white-space:pre-wrap;background:#F9F4ED;border-radius:10px;padding:10px 12px;font-size:14.5px;margin:6px 0 0}
pre.detail{white-space:pre-wrap;font-family:inherit;background:#F9F4ED;border-radius:10px;padding:8px 10px;font-size:13.5px;margin:6px 0 0;max-height:280px;overflow:auto}

/* fenêtres et notifications */
dialog.fenetre{border:none;border-radius:18px;padding:0;max-width:min(640px,calc(100vw - 24px));width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog.fenetre::backdrop{background:rgba(42,37,32,.45)}
dialog.fenetre .contenu{padding:20px 22px}
dialog.fenetre h3{margin:0 0 10px;font-size:21px}
dialog.fenetre .boutons{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:16px}
.carte-acces-apercu{background:var(--jaune-pale);border:2px solid var(--jaune);border-radius:14px;padding:12px 14px;margin:8px 0}
.carte-acces-apercu .code{font-family:var(--titre);font-size:28px;font-weight:800;letter-spacing:.14em;color:var(--vert)}
#notifs{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;display:grid;gap:8px;width:max-content;max-width:calc(100vw - 24px)}
.notif{background:var(--vert);color:#fff;border-radius:12px;padding:11px 16px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:15px}
.notif.erreur{background:var(--rouge)}
.chargement{color:var(--gris);padding:18px 0}

/* cartes d'accès à imprimer */
.impression-barre{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.planche{display:grid;grid-template-columns:repeat(2,1fr);gap:10mm}
.carte-acces{border:1.5px dashed #B9AE98;border-radius:4mm;padding:5mm 6mm;display:grid;grid-template-columns:1fr 34mm;gap:4mm;background:#fff;break-inside:avoid;page-break-inside:avoid;min-height:62mm}
.carte-acces .haut{display:flex;align-items:center;gap:3mm;grid-column:1/-1}
.carte-acces .haut img{height:11mm}
.carte-acces .haut b{font-family:var(--titre);font-size:13pt;color:var(--vert)}
.carte-acces .qui{font-family:var(--titre);font-size:15pt;font-weight:800;color:var(--encre);line-height:1.15}
.carte-acces .lib{font-size:8.5pt;text-transform:uppercase;letter-spacing:.08em;color:var(--gris);font-weight:700;margin-top:2mm}
.carte-acces .val{font-family:var(--titre);font-size:16pt;font-weight:800;letter-spacing:.06em;color:var(--vert)}
.carte-acces .val.code{letter-spacing:.2em;color:var(--terre)}
.carte-acces .qr svg{width:34mm;height:34mm;display:block}
.carte-acces .qr p{font-size:7.5pt;text-align:center;margin:1mm 0 0;color:var(--gris)}
.carte-acces .adr{grid-column:1/-1;font-size:9pt;color:var(--gris);border-top:1px solid var(--filet);padding-top:2mm}

@media (max-width:900px){
  .colonnes{grid-template-columns:1fr}
  .tuiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .activites{grid-template-columns:1fr}
  .tete img{height:42px}
  .esp .tete-page h2{font-size:22px}
  .planche{grid-template-columns:1fr}
}
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff}
  .tete,.esp-nav,.impression-barre,.onglets,.esp .tete-page,#notifs,.esp .fil{display:none!important}
  .esp{padding:0;max-width:none}
  .planche{grid-template-columns:repeat(2,1fr)!important;gap:6mm}
  .carte-acces{min-height:0}
}

/* ------------------------------------------------------------------ nouveaux comptes, inscription */
.reglage-ins{border-top:1px solid var(--filet);margin-top:14px;padding-top:12px;display:grid;gap:10px}
.code-ins{font-family:var(--titre);letter-spacing:.08em}
.affiche-ins{background:#fff;border:1px solid var(--filet);border-radius:22px;max-width:640px;margin:0 auto;padding:28px 30px;text-align:center}
.affiche-ins .haut{display:flex;align-items:center;justify-content:center;gap:12px;font-family:var(--titre);font-size:20px;color:var(--vert)}
.affiche-ins .haut img{height:56px}
.affiche-ins h2{font-size:40px;margin:14px 0 10px}
.affiche-ins .etape{font-size:22px;margin:10px 0;text-align:left}
.affiche-ins .qr{width:min(340px,80%);margin:8px auto}
.affiche-ins .qr svg{width:100%;height:auto;display:block}
.affiche-ins .adr{font-family:var(--titre);font-size:22px;font-weight:700;color:var(--terre);word-break:break-all;margin:4px 0 14px}
@media print{
  .affiche-ins{border:none;max-width:none;padding:0}
  .affiche-ins h2{font-size:48px}
  .affiche-ins .etape{font-size:24px}
}
.tab select,.chips select,.fenetre select{font-family:inherit;font-size:15px;padding:7px 10px;border:1.5px solid var(--filet2);border-radius:10px;background:#fff;color:var(--encre);max-width:100%}
.attente-ins{border:2px solid var(--vert2)}
.attente-ins .entete-panneau h3{flex:none}
.attente-ins .entete-panneau .bouton{margin-left:auto}
.tout-cocher{margin:4px 0 8px;font-weight:700}
.liste-attente{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
.ligne-attente{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1px solid var(--filet);border-radius:12px;padding:9px 12px;cursor:pointer;background:#fff}
.ligne-attente:hover{border-color:var(--vert2);background:#F7FBF6}
.ligne-attente input{width:20px;height:20px;accent-color:var(--vert)}
.ligne-attente small{flex-basis:100%;color:var(--gris);padding-left:30px}
.barre-lot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:10px 12px;background:#F8F3E8;border-radius:12px}