/* Passerelle Stage — feuille de styles
   Reprise de la palette de la version Apps Script, pour que la bascule ne
   change rien à l'œil des utilisateurs. */

:root{
  --ground:#F6F4F0; --surface:#FFFFFF; --surface-2:#EFEDE6;
  --ink:#17262B; --ink-2:#5C6B70; --ink-3:#8A979B;
  --line:#DEDACF; --accent:#1F4E5A; --accent-soft:#E2EDEF;
  --ok:#2E7D58; --ok-soft:#E4F1EA; --warn:#B26B10; --warn-soft:#FAEEDC;
  --yousign:#2F5DA8; --yousign-soft:#E3EBF8;
  --crit:#AF3628; --crit-soft:#FAE7E3;
  --f-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1A1E; --surface:#16242A; --surface-2:#1C2F36;
    --ink:#EDEAE2; --ink-2:#9FB0B6; --ink-3:#7A8C92;
    --line:#2A3E46; --accent:#7FC4D4; --accent-soft:#17343D;
    --ok:#63C293; --ok-soft:#153024; --warn:#E0A44E; --warn-soft:#332413;
    --yousign:#8AB0EC; --yousign-soft:#16243B;
    --crit:#E8877A; --crit-soft:#361D19;
  }
}
*{box-sizing:border-box}
body{margin:0; background:var(--ground); color:var(--ink); font-family:var(--f-body);
     font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
     padding:env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0)}
.page{max-width:1080px; margin:0 auto; padding:26px 20px 56px}
.page.etroite{max-width:620px}
h1{font-family:var(--f-display); font-size:23px; margin:2px 0 6px; letter-spacing:-.018em}
.eyebrow{font:500 10.5px/1 var(--f-mono); letter-spacing:.09em; text-transform:uppercase;
         color:var(--ink-3); margin:0}
.muted{color:var(--ink-2); font-size:13.5px; margin:0 0 18px}
.avis{border-radius:9px; padding:12px 14px; font-size:14px; margin-bottom:16px}
.avis.ok{background:var(--ok-soft); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 26%,transparent)}
.avis.warn{background:var(--warn-soft); color:var(--warn); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent)}
.controles{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.controles li{display:flex; gap:10px; align-items:flex-start; background:var(--surface);
              border:1px solid var(--line); border-radius:9px; padding:12px 14px}
.pastille{flex:none; width:9px; height:9px; border-radius:50%; margin-top:6px}
.controles li.ok .pastille{background:var(--ok)}
.controles li.ko .pastille{background:var(--crit)}
.texte{display:flex; flex-direction:column; gap:2px}
.texte b{font-size:13.5px; font-weight:600}
.texte span{font-size:12.5px; color:var(--ink-2); font-family:var(--f-mono)}
.pied{font-size:12px; color:var(--ink-3); margin-top:24px; text-align:center}

/* ------------------------------------------------ barre et boutons */
.barre{background:var(--surface); border-bottom:1px solid var(--line)}
.barre-in{max-width:1080px; margin:0 auto; padding:11px 20px; display:flex;
          align-items:center; gap:12px}
.barre .logo{display:flex; flex:none; align-items:center; text-decoration:none; border-radius:7px}
/* Le logo garde ses proportions et ses angles : ni rogné par un arrondi, ni
   écrasé quand la bannière manque de place. */
.barre .logo img{display:block; height:46px; width:auto; max-width:none; object-fit:contain;
                 border-radius:0; flex:none}
.barre .logo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.barre b{font-size:14px; white-space:nowrap}
/* Une seule ligne, quelle que soit la largeur : c'est le nom de la personne qui cède la place, pas les boutons. */
.barre b, .barre .qui{min-width:0; overflow:hidden; text-overflow:ellipsis}
.barre .qui{margin-right:auto; flex:1 1 auto; white-space:nowrap; font-size:12px; color:var(--ink-2); font-family:var(--f-mono)}
.barre b, .barre .deconnexion, .barre .lien-drive{flex:none}
.barre .vues{flex:none; flex-wrap:nowrap}
.barre .vues > span{white-space:nowrap}
.barre .vues select{max-width:9.5em}
@media (max-width: 1240px){ .barre .vues > span:first-child{display:none} }
@media (max-width: 1100px){
  .barre-in{gap:8px}
  /* Le sélecteur « Voir comme » de l'administrateur prend la place du nom. */
  .barre-in:has(.vues) .qui{display:none}
  .barre-in:has(.vues) b{margin-right:auto}
  .barre .vues select{max-width:8em}
}
.btn{display:inline-block; font-size:15px; font-weight:600; color:#fff; text-decoration:none;
     background:var(--accent); border:0; border-radius:9px; padding:12px 18px; cursor:pointer}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--line)}
.btn.sm{font-size:13px; padding:6px 11px; border-radius:7px}
.avis.crit{background:var(--crit-soft); color:var(--crit);
           border:1px solid color-mix(in srgb, var(--crit) 30%, transparent)}
.mono{font-family:var(--f-mono); font-size:.92em}
.mini{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin:10px 0 0}
a{color:var(--accent)}

/* ------------------------------------------- calendrier de l'alternance */
.periodes{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.periode{display:flex; background:var(--surface); border:1px solid var(--line);
         border-radius:10px; overflow:hidden}
.periode .rail{flex:none; width:5px; background:var(--ink-3)}
.periode.p-signee .rail{background:var(--ok)}
.periode.p-encours .rail{background:var(--warn)}
.periode.p-nontrouve .rail{background:var(--crit)}
.periode .corps{padding:12px 14px; flex:1; min-width:0}
.periode .haut{display:flex; justify-content:space-between; align-items:center;
               gap:10px; flex-wrap:wrap; margin-bottom:3px}
.periode .dates{font-size:11.5px; color:var(--ink-2)}
.periode .etat{font-size:11px; font-weight:600; padding:3px 9px; border-radius:20px}
.periode.p-signee .etat{background:var(--ok-soft); color:var(--ok)}
.periode.p-encours .etat{background:var(--warn-soft); color:var(--warn)}
.periode.p-nontrouve .etat{background:var(--crit-soft); color:var(--crit)}
.periode h2{font-size:15px; margin:0; font-weight:600; letter-spacing:-.01em}
.periode .sous{font-size:12.5px; color:var(--ink-2); margin:3px 0 0}
.periode .sous.vide{font-style:italic; color:var(--ink-3)}
.periode details{margin-top:7px}
.periode summary{font-size:12.5px; cursor:pointer; color:var(--accent)}
.periode details p{font-size:12.5px; color:var(--ink-2); margin:6px 0 0}
.liste{list-style:none; margin:14px 0 0; padding:0; display:flex;
       flex-direction:column; gap:6px}
.liste a{display:flex; justify-content:space-between; gap:10px; text-decoration:none;
         background:var(--surface); border:1px solid var(--line); border-radius:9px;
         padding:11px 14px; color:var(--ink)}
.liste a b{font-size:14px; font-weight:600}
.liste a span{font-size:12px; color:var(--ink-3); font-family:var(--f-mono)}

/* ------------------------------------------- recherche de structures */
.filtres{display:flex; flex-direction:column; gap:9px; margin-top:14px;
         background:var(--surface); border:1px solid var(--line);
         border-radius:10px; padding:13px 14px}
.filtres .ligne{display:flex; gap:9px; flex-wrap:wrap}
.filtres .ligne label{flex:1 1 140px}
.filtres label{display:flex; flex-direction:column; gap:3px; font-size:12px;
               color:var(--ink-2); font-weight:600}
.filtres label.case{flex-direction:row; align-items:center; gap:7px; font-weight:400}
.filtres input[type=search], .filtres input[type=text], .filtres input[type=date],
.filtres input[type=number], .filtres input[type=time], .filtres input[type=email],
.filtres input[type=tel], .filtres input[type=url], .filtres textarea,
.filtres input[type=file], .filtres select{font:inherit; font-size:15px; color:var(--ink); background:var(--ground);
        border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%}
.liste a .col{display:flex; flex-direction:column; gap:2px; min-width:0}
.liste a .col b{font-size:14px; font-family:var(--f-body); color:var(--ink)}
.liste a .col span{font-size:12px; color:var(--ink-3); font-family:var(--f-body)}
.liste a .distance{flex:none; font-size:12px; color:var(--ink-2); align-self:center}
.fiche{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:14px 0 0;
       background:var(--surface); border:1px solid var(--line); border-radius:10px;
       padding:13px 14px; font-size:13.5px}
.fiche dt{color:var(--ink-3); font-size:12px}
.fiche dd{margin:0}
.trajets{display:flex; gap:7px; flex-wrap:wrap; margin:6px 0 16px}
.trajets a{font-size:12.5px; text-decoration:none; background:var(--accent-soft);
           color:var(--accent); border-radius:20px; padding:6px 13px}
.enligne{margin:0 0 6px}
h2.sect{font-size:15px; margin:22px 0 8px; padding-bottom:6px; border-bottom:1px solid var(--line)}
.demarches{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.demarches li{background:var(--surface); border:1px solid var(--line); border-radius:9px;
              padding:10px 13px; font-size:13px; display:flex; flex-wrap:wrap; gap:4px 10px}
.demarches li span{color:var(--ink-2); font-size:12.5px}

.filtres textarea{font:inherit; font-size:15px; color:var(--ink); background:var(--ground);
        border:1px solid var(--line); border-radius:8px; padding:9px 11px; width:100%;
        resize:vertical}
.filtres details{font-size:13px}
.filtres summary{cursor:pointer; color:var(--accent); padding:4px 0}

/* ------------------------------------------------------------- gabarit large
   Les écrans de travail occupent la largeur disponible sur un ordinateur, et
   se replient en une colonne sur un téléphone. Une version spécifiquement
   mobile viendra plus tard ; d'ici là, rien ne doit déborder. */
.periodes{display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
          gap:12px; align-items:start}
.liste{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:8px}
.controles{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:9px}
.avis, .fiche, h1, h2, .muted, .mini, .pied{max-width:none}

/* Un formulaire large devient illisible : on borne sa largeur, et ses champs
   se placent côte à côte quand la place le permet. */
.filtres{max-width:720px}
@media (min-width: 720px){
  .filtres{display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; align-items:end}
  .filtres > label, .filtres > button, .filtres > details, .filtres > h2,
  .filtres > p, .filtres > .ligne{grid-column:1 / -1}
  .filtres > label.court{grid-column:auto}
}
.fiche{max-width:720px}
@media (min-width: 900px){
  .periode .corps{padding:14px 16px}
}

/* --------------------------------------------- circuit de signature
   Une ligne par signataire, dans l'ordre où ils sont sollicités : le tuteur
   doit voir d'un coup d'œil où le circuit s'arrête. */
.signataires{list-style:none; padding:0; margin:12px 0 0; display:flex;
             flex-direction:column; gap:8px; max-width:720px; counter-reset:sig}
.signataires li{display:flex; align-items:center; gap:12px; padding:10px 14px;
                background:var(--surface); border:1px solid var(--line);
                border-radius:10px; border-left-width:5px}
.signataires li::before{counter-increment:sig; content:counter(sig);
                        font-family:var(--f-mono); font-size:12px; color:var(--ink-3)}
.signataires .col{display:flex; flex-direction:column; min-width:0; flex:1}
.signataires .col b{font-size:13.5px}
.signataires .col span{font-size:12.5px; color:var(--ink-2)}
.signataires .etat{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px;
                   background:var(--surface-2, transparent); color:var(--ink-2); white-space:nowrap}
.signataires li.s-ok{border-left-color:var(--ok)}
.signataires li.s-ok .etat{background:var(--ok-soft); color:var(--ok)}
.signataires li.s-attente{border-left-color:var(--warn)}
.signataires li.s-attente .etat{background:var(--warn-soft); color:var(--warn)}
.signataires li.s-crit{border-left-color:var(--crit)}
.signataires li.s-crit .etat{background:var(--crit-soft); color:var(--crit)}

/* Journal d'une vérification technique : police fixe, lisible ligne à ligne. */
.journal{font-family:var(--f-mono); font-size:12.5px; line-height:1.7;
         background:var(--surface); border:1px solid var(--line); border-radius:10px;
         padding:12px 14px; overflow-x:auto; white-space:pre-wrap; max-width:720px}
label.case{display:flex; align-items:center; gap:9px; font-size:14px}
label.case input{width:auto; margin:0}

/* ------------------------------------------------- tableau de suivi
   Une ligne par jeune, une colonne par période. Sur un téléphone le tableau
   défile horizontalement plutôt que de se tasser : la colonne des noms reste
   visible pour qu'on sache toujours de qui l'on parle. */
.defile{overflow-x:auto; margin:10px 0 18px; border:1px solid var(--line);
        border-radius:12px; background:var(--surface)}
.grille{border-collapse:collapse; width:100%; font-size:13px}
.grille th, .grille td{padding:9px 11px; text-align:left; vertical-align:middle;
                       border-bottom:1px solid var(--line)}
.grille thead th{font-size:11.5px; font-weight:600; color:var(--ink-2);
                 text-transform:uppercase; letter-spacing:.04em; white-space:nowrap}
.grille thead th span{display:block; font-weight:400; text-transform:none;
                      letter-spacing:0; font-family:var(--f-mono); font-size:11px}
.grille tbody tr:last-child th, .grille tbody tr:last-child td{border-bottom:0}
.grille th.qui{position:sticky; left:0; background:var(--surface); font-weight:600;
               white-space:nowrap; z-index:1; box-shadow:1px 0 0 var(--line)}
.grille th.qui a{text-decoration:none; color:inherit}
.grille th.qui a:hover{text-decoration:underline}
.grille td{min-width:150px; border-left:4px solid transparent}
.grille td a{text-decoration:none}
.grille td.v-signee{border-left-color:var(--ok); background:var(--ok-soft)}
.grille td.v-signee a{color:var(--ok)}
.grille td.v-encours{border-left-color:var(--warn); background:var(--warn-soft)}
.grille td.v-encours a{color:var(--warn)}
.grille td.v-nontrouve{border-left-color:var(--crit); background:var(--crit-soft)}
.grille td.v-nontrouve a.atrouver{color:var(--crit); font-weight:600}
.puce{display:inline-block; font-size:10.5px; font-weight:600; padding:2px 7px;
      border-radius:20px; background:var(--crit-soft); color:var(--crit); margin-left:6px}
.pastille{display:inline-block; width:10px; height:10px; border-radius:3px;
          vertical-align:-1px; margin-right:3px}
.pastille.v-signee{background:var(--ok)}
.pastille.v-encours{background:var(--warn)}
.pastille.v-nontrouve{background:var(--crit)}
h2.sect .mini{display:block; font-weight:400; margin-top:2px}

/* ------------------------------------------------------- menu de navigation
   Sur un ordinateur, une colonne à gauche qui reste en place ; sur un
   téléphone, une rangée d'onglets qui défile sous la bannière. Dans les deux
   cas, la rubrique courante est visible sans avoir à chercher. */
.cadre{display:block}
.menu{display:flex; gap:6px; overflow-x:auto; padding:9px 16px;
      background:var(--surface); border-bottom:1px solid var(--line);
      -webkit-overflow-scrolling:touch}
.menu a{flex:none; font-size:13.5px; font-weight:600; text-decoration:none;
        color:var(--ink-2); padding:7px 13px; border-radius:20px; white-space:nowrap}
.menu a.actif{background:var(--accent); color:#fff}

@media (min-width: 900px){
  .cadre{display:grid; grid-template-columns:216px minmax(0, 1fr);
         max-width:1320px; margin:0 auto; gap:0; align-items:start}
  .cadre{grid-template-columns:236px minmax(0, 1fr)}
  .menu{flex-direction:column; gap:2px; border-bottom:0; background:none;
        padding:22px 12px 26px 18px; position:sticky; top:0; max-height:100vh; overflow-y:auto}
  .menu a{padding:6px 12px 6px 38px; border-radius:8px; font-weight:500; white-space:normal}
  .menu a:hover{background:var(--surface)}
  .menu a.actif{background:var(--accent); color:#fff; font-weight:600}
  /* Une rubrique : un intitulé avec son icône, ses pages dessous. */
  .menu a.seul, .menu summary{display:flex; align-items:center; gap:10px; padding:8px 12px;
        font-size:13.5px; font-weight:650; color:var(--ink); border-radius:8px; cursor:pointer}
  .menu a.seul svg, .menu summary svg{width:18px; height:18px; flex:none; color:var(--ink-3)}
  .menu a.seul.actif{color:#fff}
  .menu a.seul.actif svg{color:#fff}
  .menu summary{list-style:none; user-select:none}
  .menu summary::-webkit-details-marker{display:none}
  .menu summary::after{content:""; margin-left:auto; width:7px; height:7px; border-right:1.6px solid var(--ink-3);
        border-bottom:1.6px solid var(--ink-3); transform:rotate(-45deg); transition:transform .15s}
  .menu details[open] > summary::after{transform:rotate(45deg)}
  .menu summary:hover{background:var(--surface)}
  .menu details.courant > summary{color:var(--accent)}
  .menu details.courant > summary svg{color:var(--accent)}
  .menu details{margin-bottom:2px}
  .menu details > a{display:block; font-size:13px; margin:1px 0}
  /* Le menu montre déjà les pages de la rubrique : pas de seconde rangée d'onglets. */
  .cadre .onglets{display:none}
  .cadre > main{padding-left:6px; padding-right:24px}
  .cadre > main.page{max-width:1080px; margin:0}
  .cadre > main.page.etroite{max-width:640px}
}

/* ------------------------------------------------------ visites de stage
   Un stage se replie sur une ligne tant qu'on ne le travaille pas : la
   tournée se lit d'abord, se remplit ensuite. */
.visite{background:var(--surface); border:1px solid var(--line); border-radius:10px;
        border-left:5px solid var(--warn); margin-bottom:8px; overflow:hidden}
.visite.faite{border-left-color:var(--ok)}
.visite > summary{display:flex; align-items:center; gap:12px; padding:11px 14px;
                  cursor:pointer; list-style:none}
.visite > summary::-webkit-details-marker{display:none}
.visite .col{display:flex; flex-direction:column; min-width:0; flex:1}
.visite .col b{font-size:13.5px}
.visite .col b .mini{font-weight:400; color:var(--ink-3)}
.visite .col > span{font-size:12.5px; color:var(--ink-2)}
.visite .etat{font-size:11.5px; font-weight:600; padding:3px 10px; border-radius:20px;
              white-space:nowrap; background:var(--warn-soft); color:var(--warn)}
.visite.faite .etat{background:var(--ok-soft); color:var(--ok)}
.visite > .corps{padding:0 14px 14px; border-top:1px solid var(--line)}
.visite > .corps .filtres{max-width:none; background:none; border:0; padding:8px 0 0}

/* Quatre chiffres qui résument un parcours. */
.chiffres{list-style:none; padding:0; margin:14px 0 4px; display:grid;
          grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px}
.chiffres li{background:var(--surface); border:1px solid var(--line); border-radius:10px;
             padding:12px 14px}
.chiffres b{display:block; font-size:24px; line-height:1.1}
.chiffres span{font-size:12.5px; color:var(--ink-2)}
@media (min-width: 720px){
  .visite > .corps .filtres > button{grid-column:auto; justify-self:start}
}

/* Un bloc de saisie par période : séparé du suivant, mais sans cadre lourd. */
.periode-edit{border:0; border-top:1px solid var(--line); border-radius:0;
              background:none; padding:14px 0 4px; max-width:820px}
.periode-edit:first-of-type{border-top:0}
.grille td.plein{border-left:0; min-width:0}
.grille td.manque{color:var(--crit); font-weight:600}
.liste a.eteint{opacity:.55}

/* La fiche d'un stage dans la tournée : lisible sans ouvrir quoi que ce soit. */
.visite .tete{display:flex; align-items:center; gap:12px; padding:11px 14px 4px}
.visite p.mini{padding:0 14px 10px; margin:4px 0 0}
.visite .btn.sm{margin-right:8px}
.ligne-piece{display:flex; align-items:center; gap:10px; padding:10px 14px;
             background:var(--surface); border:1px solid var(--line); border-radius:10px}
.ligne-piece .col{display:flex; flex-direction:column; min-width:0; flex:1}
.ligne-piece .col b{font-size:13.5px}
.ligne-piece .col span{font-size:12.5px; color:var(--ink-2)}

/* Une marque discrète : la voie de signature, un contrôle qui a parlé. */
.marque{display:inline-block; font-size:10.5px; font-weight:600; padding:1px 7px;
        border-radius:20px; background:var(--line); color:var(--ink-2); white-space:nowrap}
.marque.papier{background:#EDE7DA; color:#7A6A3F}
.marque.bloquant{background:var(--crit-soft); color:var(--crit)}
.marque.alerte{background:var(--warn-soft); color:var(--warn)}
.marque.rompue{background:var(--crit-soft); color:var(--crit)}
.voie{font-size:11px; font-weight:600; padding:2px 9px; border-radius:20px;
      background:var(--line); color:var(--ink-2)}
.voie.papier{background:#EDE7DA; color:#7A6A3F}
.avis ul{margin:6px 0 0; padding-left:20px}
.avis li{margin:3px 0}

/* Le bandeau « espace d'un jeune » : présent sans être criard, mais impossible
   à oublier — c'est tout son intérêt. */
.atelier{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px;
         padding:10px 14px; border-radius:10px; background:var(--warn-soft);
         border:1px solid color-mix(in srgb, var(--warn) 35%, transparent);
         color:var(--warn); font-size:13px}
.atelier span{flex:1; min-width:220px}
.atelier .btn{border-color:color-mix(in srgb, var(--warn) 40%, transparent); color:var(--warn)}

/* ------------------------------------------- choisir un jeune
   Cent noms ne se lisent pas en liste : on les range par initiale et chaque
   jeune devient une carte entièrement cliquable. Sur un écran tactile comme à
   la souris, la cible est le nom lui-même, pas un petit bouton à côté. */
.lettre{font-family:var(--f-mono); font-size:12px; font-weight:600; color:var(--ink-3);
        letter-spacing:.12em; margin:18px 0 6px; padding-bottom:4px;
        border-bottom:1px solid var(--line)}
.choix-jeunes{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
              gap:8px}
.choix-jeunes form{margin:0; display:flex}   /* la carte occupe toute la hauteur
                                                de sa rangée, quel que soit le nom */
.carte-jeune{display:flex; flex-direction:column; align-items:flex-start; gap:2px;
             flex:1; width:100%; text-align:left; font:inherit; cursor:pointer;
             background:var(--surface); border:1px solid var(--line); border-radius:10px;
             padding:11px 13px; color:var(--ink)}
.carte-jeune:hover{border-color:var(--accent); background:var(--ground)}
.carte-jeune:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.carte-jeune b{font-size:14px; font-weight:600; line-height:1.3}
.carte-jeune .prenom{font-weight:400}
.carte-jeune > span{font-size:12px; color:var(--ink-3); font-family:var(--f-mono)}
@media (min-width: 720px){
  .filtres > button.court{grid-column:auto; justify-self:start; align-self:end}
}

/* Les attendus d'une période : deux colonnes de cases, repliées par défaut
   pour ne pas noyer la saisie des dates et du thème. */
.attendus{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
          gap:14px; margin-top:8px}
.attendus > div > b{display:block; font-size:13px; margin-bottom:4px}
.attendus .groupe{font-size:11.5px; font-weight:600; color:var(--ink-3);
                  text-transform:uppercase; letter-spacing:.05em; margin:9px 0 3px}
.attendus label.case{display:flex; align-items:flex-start; gap:7px; font-size:12.5px;
                     font-weight:400; color:var(--ink); margin:2px 0; line-height:1.35}
.attendus label.case input{margin-top:2px; width:auto; flex:none}
.periode .attendu{font-size:12px; color:var(--ink-2); margin:4px 0 0; line-height:1.45}

/* Le formulaire de la structure : un volet qui n'apparaît qu'au besoin, et
   une aide à la saisie qui parle de scies et de tracteurs plutôt que
   d'articles du code du travail. */
.bloc-conditionnel{border-left:4px solid var(--warn); padding-left:14px; margin:14px 0}
.bloc-conditionnel.cache{display:none}
.aide-travaux{font-size:12.5px; line-height:1.5; color:var(--ink-2); max-width:720px}
.aide-travaux p{margin:9px 0}
.aide-travaux b{color:var(--ink)}
.filtres input:disabled{background:var(--ground); color:var(--ink-3)}

/* L'explication sous un champ n'est pas un intitulé : elle se lit en gris,
   sans gras, sinon elle crie plus fort que la question. */
.filtres label .mini{font-weight:400; color:var(--ink-2); margin:0}
.filtres label.case .mini{margin-left:26px}

/* Les articles officiels : repliés, lisibles un par un, jamais éditables. */
.article-officiel{background:var(--surface); border:1px solid var(--line);
                  border-radius:9px; padding:9px 14px; margin:6px 0; max-width:820px}
.article-officiel summary{cursor:pointer; font-weight:600; font-size:13.5px}
.article-officiel p{font-size:12.5px; line-height:1.55; color:var(--ink-2); margin:8px 0}

/* ------------------------------------------------------------- onglets
   Les pages d'une même rubrique se présentent comme les intercalaires d'un
   classeur : une ligne sous le titre de la rubrique, l'onglet courant
   souligné. Quand ils sont nombreux, ils passent à la ligne : tous restent
   visibles, sans rien faire défiler. */
.onglets{display:flex; flex-wrap:wrap; gap:2px 2px; margin:0 0 20px;
         border-bottom:1px solid var(--line)}
.onglets::-webkit-scrollbar{display:none}
.onglets a{flex:none; padding:10px 14px 9px; font-size:13.5px; font-weight:600;
           color:var(--ink-2); text-decoration:none; white-space:nowrap;
           border-bottom:3px solid transparent; margin-bottom:-1px}
.onglets a:hover{color:var(--ink)}
.onglets a.actif{color:var(--accent); border-bottom-color:var(--accent)}
.onglets a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* ------------------------------------------ semaines à cocher
   Une période d'alternance, ses semaines en dessous. La case de la période
   coche tout d'un geste ; une semaine déjà couverte par une autre convention
   reste visible, grisée, avec le nom de la structure — on sait pourquoi on
   ne peut pas la prendre. */
.choix-semaines > b{font-size:13.5px}
.periode-semaines{border:1px solid var(--line); border-radius:10px; padding:8px 12px 10px;
                  margin:0 0 10px; background:var(--ground)}
.periode-semaines legend{padding:0 4px}
.periode-semaines .tout{font-size:13.5px; gap:8px}
.periode-semaines .tout .mini{margin:0 0 0 6px}
.filtres label.semaine{display:flex; align-items:flex-start; gap:9px; font-size:13px;
                       font-weight:400; color:var(--ink); padding:5px 0 5px 22px}
.filtres label.semaine input{margin-top:2px; width:auto; flex:none}
.filtres label.semaine .mono{color:var(--ink-2); margin-left:6px}
.filtres label.semaine em{display:block; font-style:normal; font-size:12px; color:var(--ink-3)}
.filtres label.semaine.prise{color:var(--ink-3)}
#resume-semaines{font-weight:600; color:var(--accent)}
.periode.p-partiel .rail{background:var(--warn)}
.periode.p-partiel .etat{background:var(--warn-soft); color:var(--warn)}
.grille td.v-partiel{border-left-color:var(--warn);
                     background:linear-gradient(90deg, var(--warn-soft) 55%, var(--crit-soft))}
.grille td.v-partiel a{color:var(--warn)}
.pastille.v-partiel{background:linear-gradient(90deg, var(--warn) 50%, var(--crit) 50%)}
.periode .lieu{font-size:12.5px; margin:5px 0 0; line-height:1.5; color:var(--ink)}
.periode .lieu .mono{display:block; font-size:11px; color:var(--ink-2)}
.periode .lieu a{font-size:12px; margin-right:6px}

/* ------------------------------------------------ horaires de la structure
   Une ligne par jour, deux plages : la semaine type se lit comme un emploi du
   temps. Le jour interdit reste visible, grisé, pour qu'on sache pourquoi. */
fieldset.nu{border:0; margin:0; padding:0; min-width:0}
.cache{display:none !important}
.semaine-type{grid-column:1 / -1; overflow-x:auto}
.grille.horaires{max-width:720px}
.grille.horaires td, .grille.horaires th{padding:5px 6px; min-width:0; border-left:0}
.grille.horaires input[type=time]{font:inherit; font-size:14px; padding:5px 6px;
  border:1px solid var(--line); border-radius:7px; background:var(--ground); color:var(--ink)}
.grille.horaires tr.interdit{opacity:.5}
.grille.horaires tr.depasse .duree{color:var(--crit); font-weight:600}
.grille.horaires tfoot th, .grille.horaires tfoot td{font-weight:600}
.alertes-horaires{margin:8px 0 0; padding-left:18px; color:var(--crit); font-size:13px}
.alertes-horaires:empty{display:none}
.reglementation ul{margin:6px 0 4px}
.controles-ligne{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.controles-ligne form{margin:0}

/* Le suivi se lit en colonnes : chaque case centrée, l'étape en dessous. */
.grille.centre td{text-align:center}
.grille.centre thead th:not(.qui){text-align:center}
.grille .etape{display:block; font-size:11.5px; color:var(--ink-2); margin-top:3px;
               line-height:1.35}

/* Conseils : des cartes courtes, qu'un jeune lit sur son téléphone. */
.conseils{display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px}
.conseils section{background:var(--surface); border:1px solid var(--line); border-radius:10px;
                  padding:12px 16px}
.conseils h2{font-size:15px; margin:0 0 6px}
.conseils ul{margin:0; padding-left:18px; font-size:13.5px; line-height:1.5}
.conseils li{margin:5px 0}

/* Dans la liste des jeunes, les périodes s'alignent sous le nom, en tuiles
   de même largeur : on lit l'année d'un regard, de gauche à droite. */
.grille tr.jeune-tete th, .grille tr.jeune-tete td{border-bottom:0; padding-bottom:4px}
.grille tr.jeune-periodes td{padding-top:0; padding-bottom:12px}
.grille td.acces{white-space:nowrap; font-size:12.5px}
.periodes-jeune{display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px}
.periodes-jeune .per{display:flex; flex-direction:column; gap:3px; padding:5px 7px;
                     border-left:3px solid var(--line); border-radius:4px; background:var(--bg, transparent)}
.periodes-jeune .per b{font-size:12px}
.periodes-jeune .per .dates{font-size:11px; color:var(--ink-3)}
.periodes-jeune .per .gestes{display:flex; flex-wrap:wrap; gap:4px}
.periodes-jeune .per.v-signee{border-left-color:var(--ok); background:var(--ok-soft)}
.periodes-jeune .per.v-encours{border-left-color:var(--warn); background:var(--warn-soft)}
.periodes-jeune .per.v-partiel{border-left-color:var(--warn); background:var(--warn-soft)}
.periodes-jeune .per.v-nontrouve{border-left-color:var(--crit); background:var(--crit-soft)}
.periodes-jeune .btn.sm{font-size:11px; padding:2px 7px}

/* Les modes d'un administrateur : trois pastilles dans la bannière. */
.vues{display:flex; align-items:center; gap:4px; flex-wrap:wrap; font-size:12px}
.vues > span{color:var(--ink-3); margin-right:2px}
.vues a{padding:4px 10px; border-radius:20px; text-decoration:none; color:var(--ink-2);
        border:1px solid var(--line); font-weight:600}
.vues a.actif{background:var(--accent); color:#fff; border-color:var(--accent)}
.vues form{margin:0}
.vues select{font:inherit; font-size:12px; padding:4px 8px; border-radius:20px;
             border:1px solid var(--line); background:var(--surface); color:var(--ink-2)}
.marque.partenaire{background:var(--ok-soft); color:var(--ok); vertical-align:middle}
h1 .marque{font-size:11px; font-family:var(--f-body)}

/* ---------------------------------- semaines d'une période à cocher
   Une rangée par mois, une pastille par semaine avec ses dates : on coche le
   planning comme on le lit sur le livret. Une semaine prise par une autre
   période reste visible, hachurée. */
.tete-periode{display:flex; justify-content:space-between; align-items:center; gap:10px;
              flex-wrap:wrap}
.tete-periode .titre-periode{font-size:15px}
.tete-periode .supprimer{font-size:12.5px; color:var(--crit)}
.periode-edit.supprimee > :not(.tete-periode){opacity:.35; pointer-events:none}
.periode-edit.supprimee .titre-periode{text-decoration:line-through}
.choix-semaines-periode{grid-column:1 / -1}
.choix-semaines-periode .mois{display:flex; flex-wrap:wrap; align-items:center; gap:5px;
                              margin:6px 0}
.choix-semaines-periode .nom-mois{width:115px; font-size:12px; color:var(--ink-3);
                                  font-weight:600; text-transform:capitalize}
.filtres label.sem{display:inline-flex; flex-direction:row; align-items:center; gap:5px;
                   font-weight:400; font-size:12px; color:var(--ink); cursor:pointer;
                   border:1px solid var(--line); border-radius:8px; padding:4px 8px;
                   background:var(--surface)}
.filtres label.sem input{width:auto; margin:0}
.filtres label.sem b{font-family:var(--f-mono); font-size:11.5px}
.filtres label.sem:has(input:checked){background:var(--accent-soft); border-color:var(--accent)}
.filtres label.sem.ailleurs{opacity:.45;
  background:repeating-linear-gradient(45deg, transparent 0 4px, var(--line) 4px 6px)}
@media (max-width: 600px){
  .choix-semaines-periode .nom-mois{width:100%}
}

/* Ce qu'on tape dans un champ ne prend pas le gras de son intitulé. */
.filtres input[type], .filtres textarea, .filtres select{font-weight:400}

/* Une case du suivi : une ligne par structure, ses dates si la période est
   partagée, et « Incomplet » quand des semaines restent sans convention. */
.grille .lieu-case{padding:2px 0}
.grille .lieu-case + .lieu-case{border-top:1px dashed var(--line); margin-top:4px; padding-top:5px}
.grille .dates-case{display:block; font-family:var(--f-mono); font-size:11px; color:var(--ink-2)}
.grille em.incomplet{display:block; margin-top:4px; font-size:12px; color:var(--crit)}

/* Un résultat de l'annuaire se lit comme une fiche de la base ; le clic
   l'importe. */
.resultat-annuaire{margin:0}
.resultat-annuaire button{display:flex; justify-content:space-between; gap:10px; width:100%;
  text-align:left; font:inherit; cursor:pointer; background:var(--surface);
  border:1px dashed var(--line); border-radius:9px; padding:11px 14px; color:var(--ink)}
.resultat-annuaire button:hover{border-color:var(--accent)}
.resultat-annuaire .col{display:flex; flex-direction:column; gap:2px; min-width:0}
.resultat-annuaire .col b{font-size:14px}
.resultat-annuaire .col > span{font-size:12px; color:var(--ink-3)}
.resultat-annuaire .distance{flex:none; font-size:12px; color:var(--ink-2); align-self:center}
.marque.annuaire{background:var(--accent-soft); color:var(--accent); vertical-align:middle}

/* Le planning d'alternance : les couleurs du livret, une case par semaine. */
.grille.planning td, .grille.planning th{padding:3px 6px; min-width:0; border-left:0; text-align:center}
.grille.planning th.qui{text-align:left}
.grille.planning th.qui .mini{display:inline; margin-left:6px}
.grille.planning select{font:inherit; font-size:12.5px; border:1px solid var(--line);
  border-radius:6px; padding:3px 4px; background:transparent; color:var(--ink)}
.grille.planning td.t-stage{background:var(--ok-soft)}
.grille.planning td.t-mfr{background:var(--accent-soft)}
.grille.planning td.t-vacances{background:var(--surface-2)}
.grille.planning tr.outils th{font-weight:400; text-transform:none}
/* Une semaine hors stage au planning : visible, jamais cochable. */
.filtres label.sem.hors-stage{opacity:.35; cursor:not-allowed; border-style:dashed}

/* Fiche d'un jeune : deux blocs empilés, le jeune puis sa famille. */
form.fiche-jeune{display:flex; flex-direction:column; align-items:stretch; max-width:720px}
form.fiche-jeune fieldset{border:1px solid var(--line); border-radius:9px; padding:10px 14px 12px;
                          margin:0; display:flex; flex-direction:column; gap:9px; min-width:0}
form.fiche-jeune legend{font-weight:600; font-size:13.5px; padding:0 6px}
form.fiche-jeune legend .mini{font-weight:400}

/* Le statut de la convention, sous le nom du jeune dans les tournées. */
.statut-conv{font-size:12px; font-weight:600}
.statut-conv.ok{color:var(--ok)}
.statut-conv.warn{color:var(--warn)}
.statut-conv.crit{color:var(--crit)}
/* Fiche d'une convention : le formulaire de correction s'ouvre sous le
   récapitulatif, par blocs, comme la convention elle-même. */
details.corriger{margin-top:12px}
details.corriger > summary{display:inline-flex; list-style:none; cursor:pointer}
details.corriger > summary::-webkit-details-marker{display:none}
details.corriger[open] > summary{margin-bottom:4px}
details.corriger fieldset{border:1px solid var(--line); border-radius:9px; padding:10px 14px 12px;
                          margin:0; display:flex; flex-direction:column; gap:9px; min-width:0}
details.corriger legend{font-weight:600; font-size:13.5px; padding:0 6px}
details.corriger legend .mini{font-weight:400}
.semaines-conv{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; font-size:13px}
.semaines-conv b{min-width:70px; font-size:12.5px}
.filtres .semaines-conv label.case{font-size:13px; gap:4px}
.semaines-conv label.prise{color:var(--ink-3); text-decoration:line-through}
details.corriger form.filtres{display:flex; flex-direction:column; align-items:stretch; max-width:720px}
details.corriger form.filtres > *{grid-column:auto}

/* Le bouton Google Chat du jeune : fixe en bas à droite, au-dessus du contenu. */
.chat-tuteur{position:fixed; right:16px; bottom:16px; z-index:50; display:flex; align-items:center;
             gap:8px; padding:9px 15px 9px 11px; border-radius:28px; background:var(--surface);
             color:var(--ink); border:1px solid var(--line); box-shadow:0 4px 14px rgba(0,0,0,.14);
             font-weight:600; font-size:14px; text-decoration:none}
.chat-tuteur:hover{border-color:#00ac47}
.chat-tuteur:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width: 600px){ .chat-tuteur span{display:none} .chat-tuteur{padding:11px} }
main{padding-bottom:72px}
b.annulee{color:var(--crit)}

/* Un mail revenu en erreur : visible sur la ligne de la convention. */
.alerte-mail{display:inline-block; margin-left:4px; padding:1px 7px; border-radius:10px;
             background:var(--crit-soft); color:var(--crit); font-size:11.5px; font-weight:600}
.btn.rejet{color:var(--crit); border-color:var(--crit)}

/* ------------------------------------------------ application et téléphone
   Sous 900 px — un téléphone, ou l'application installée —, les rubriques
   passent dans une barre fixe en bas, sous le pouce ; l'en-tête ne garde
   que le logo et une icône de compte. Sur ordinateur, rien ne change. */
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.barre-bas, .compte-app{display:none}
@media (max-width: 899px){
  .menu{display:none}
  .barre .qui, .barre .vues, .barre .deconnexion{display:none}
  .barre-in{padding:8px 16px; gap:8px}
  .barre b{flex:0 1 auto; font-size:13px}
  .barre .logo img{height:36px}
  .barre .lien-drive{margin-left:auto}
  .barre .lien-drive ~ .compte-app{margin-left:0}
  .compte-app{display:flex; flex:none; margin-left:auto; color:var(--ink-2); padding:6px;
              border-radius:50%; border:1px solid var(--line); background:var(--surface)}
  .barre-bas{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
             background:var(--surface); border-top:1px solid var(--line);
             padding:4px 4px calc(4px + env(safe-area-inset-bottom));
             box-shadow:0 -2px 12px rgba(0,0,0,.06)}
  .barre-bas a{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
               gap:2px; padding:6px 0; text-decoration:none; color:var(--ink-3);
               font-size:10.5px; font-weight:600; letter-spacing:-.1px; border-radius:10px}
  .barre-bas a span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .barre-bas a.actif{color:var(--accent)}
  .barre-bas a.actif svg{background:var(--accent-soft); border-radius:14px; padding:2px 12px;
                         box-sizing:content-box}
  main, .cadre > main{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .chat-tuteur{bottom:calc(74px + env(safe-area-inset-bottom))}
  .onglets{margin-bottom:14px}
  .onglets a{padding:8px 11px 7px; font-size:13px}
}
/* L'application installée : pas de marge perdue autour de l'encoche. */
@media (display-mode: standalone){
  .barre{padding-top:env(safe-area-inset-top)}
}
.vues-app .vues{flex-wrap:wrap}

/* Fiche de validation : la période demandée face à la période d'alternance,
   puis les déclarations du jeune par blocs. */
.verif-periode{background:var(--surface); border:1px solid var(--line); border-radius:10px;
               padding:12px 14px; margin:8px 0 12px; max-width:720px}
.verif-periode .tete{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px}
.verif-periode .tete span{font-size:12.5px; color:var(--ink-2)}
.verif-periode .marque.ok{background:var(--ok-soft); color:var(--ok)}
.verif-periode .marque.alerte{background:var(--warn-soft); color:var(--warn)}
.semaines-verif{display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 2px}
.semaines-verif span{font-size:12px; padding:2px 7px; border-radius:6px; border:1px solid var(--line)}
.semaines-verif .prise{background:var(--ok-soft); color:var(--ok); border-color:transparent; font-weight:600}
.semaines-verif .libre{color:var(--ink-3)}
.verif-periode .fiche{margin-top:8px}
.verif-periode .fiche ul{margin:0; padding-left:18px}
form.fiche-validation{display:flex; flex-direction:column; align-items:stretch; max-width:720px}
form.fiche-validation fieldset{border:1px solid var(--line); border-radius:9px; padding:10px 14px 12px;
                               margin:0; display:flex; flex-direction:column; gap:9px; min-width:0}
form.fiche-validation legend{font-weight:600; font-size:13.5px; padding:0 6px}
form.fiche-validation legend .mini{font-weight:400}

/* Heures de stage de l'année : réalisé (plein) et prévu (clair), face à la cible. */
.heures-jeune{min-width:150px; text-align:left}
.heures-jeune .mini{display:block}
.jauge{position:relative; display:block; height:7px; border-radius:4px; background:var(--line);
       margin:5px 0 3px; overflow:hidden}
.jauge span{position:absolute; left:0; top:0; bottom:0; border-radius:4px}
.jauge .prevu{background:var(--accent-soft); outline:1px solid var(--accent)}
.jauge .fait{background:var(--accent)}
.volume-case{display:block; font-size:11.5px; color:var(--ink-2)}

/* ------------------------------------------------------ modes d'emploi */
.aide ol, .aide ul{padding-left:20px; line-height:1.55}
.aide li{margin:4px 0}
.sommaire{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 6px}
.sommaire a{font-size:12.5px; padding:4px 10px; border:1px solid var(--line); border-radius:14px;
            text-decoration:none; background:var(--surface)}
.choix-notice{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:14px}
.choix-notice a{font-size:13px; font-weight:600; padding:6px 12px; border-radius:18px;
                text-decoration:none; border:1px solid var(--line); color:var(--ink-2)}
.choix-notice a.actif{background:var(--accent); color:#fff; border-color:var(--accent)}
.choix-notice button{margin-left:auto}
/* La notice des jeunes : des cartes colorées, une par étape. */
.aide-jeune h1{font-size:30px}
.aide-jeune .accroche{font-size:16px; color:var(--ink-2)}
.etapes-jeune{display:grid; gap:12px; margin:16px 0}
.etape-jeune{position:relative; border-radius:16px; padding:16px 16px 14px 64px; color:#17262B}
.etape-jeune h2{margin:0 0 6px; font-size:17px}
.etape-jeune p, .etape-jeune ul{margin:6px 0; font-size:14.5px; line-height:1.5}
.etape-jeune .num{position:absolute; left:14px; top:14px; width:36px; height:36px; border-radius:50%;
                  background:#fff; display:flex; align-items:center; justify-content:center;
                  font-weight:800; font-size:18px; box-shadow:0 2px 6px rgba(0,0,0,.12)}
.e1{background:#FFE9C7} .e2{background:#DDF2E6} .e3{background:#E0ECFF}
.e4{background:#F3E1FA} .e5{background:#FFE0E0}
.etape-jeune .astuce{background:rgba(255,255,255,.65); border-radius:10px; padding:8px 10px}
.aide-jeune .rouge{color:#B3261E; font-weight:700} .aide-jeune .vert{color:#1E7A46; font-weight:700}
.bulle-chat{background:#00ac47; color:#fff; border-radius:16px; padding:14px 16px; margin:10px 0 18px}
.bulle-chat p{margin:6px 0 0}
@media print{
  .barre, .menu, .barre-bas, .onglets, .choix-notice, .chat-tuteur, .sommaire{display:none !important}
  body, main{background:#fff !important}
  .cadre{display:block}
  .etape-jeune{break-inside:avoid; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .bulle-chat{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}

/* Déclarer un stage conventionné hors outil, depuis une case du suivi. */
.grille td a.declarer{display:block; font-size:11.5px; margin-top:3px; color:var(--ink-2)}
.rappel-semaines{margin:4px 0 6px} .rappel-semaines .semaines-verif{margin-top:6px}
/* Conventions papier : une fiche par PDF, séparées pour la relecture. */
form.depot-papier{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 14px}
#papier-journal li{margin:2px 0}
.depot-semaines[hidden]{display:none}
/* Listes triables : l'en-tête se clique, la flèche dit le sens. */
table.triable thead th[aria-sort]{cursor:pointer; user-select:none; white-space:nowrap}
table.triable thead th[aria-sort]:hover, table.triable thead th[aria-sort]:focus-visible{color:var(--ink); outline:none; text-decoration:underline}
table.triable thead th[aria-sort]::after{content:"↕"; margin-left:5px; opacity:.35; font-size:11px}
table.triable thead th[aria-sort="ascending"]::after{content:"▲"; opacity:.9}
table.triable thead th[aria-sort="descending"]::after{content:"▼"; opacity:.9}
table.triable thead th[aria-sort] span{white-space:normal}
/* Consignes en infobulles : un ⓘ discret, ouvert au survol, au clavier ou au toucher. */
.js .consigne{display:none}
.bulle{position:relative; display:inline-block; vertical-align:middle; margin-left:6px;
  text-transform:none; letter-spacing:0; font-weight:400}
.bulle-i{width:17px; height:17px; padding:0; border-radius:50%; border:1.5px solid var(--ink-3);
  background:transparent; color:var(--ink-2); font:italic 700 11px/1 Georgia, 'Times New Roman', serif;
  cursor:help; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle}
.bulle-i:hover, .bulle-i:focus-visible, .bulle.ouverte .bulle-i{border-color:var(--accent, #1f4e5a);
  color:var(--accent, #1f4e5a); outline:none}
.bulle-texte{position:absolute; z-index:60; top:calc(100% + 6px); left:-8px; width:max-content;
  max-width:min(340px, 86vw); padding:10px 12px; border-radius:9px; background:var(--surface, #fff);
  color:var(--ink); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.14);
  font-size:13px; line-height:1.45; font-weight:400; text-align:left; white-space:normal;
  visibility:hidden; opacity:0; transition:opacity .12s}
.bulle-texte p, .bulle-texte span{margin:0; font-size:inherit; color:inherit}
.bulle-texte a{color:var(--accent, #1f4e5a)}
.bulle:hover .bulle-texte, .bulle-i:focus-visible + .bulle-texte, .bulle.ouverte .bulle-texte{visibility:visible; opacity:1}
.bulle-seule{margin:4px 0}
/* Un lien à transmettre : le champ, et son bouton « Copier ». */
.lien-copie{display:flex; gap:6px; align-items:center; max-width:640px; margin:4px 0}
.lien-copie input{flex:1; min-width:0; font:12px/1.4 ui-monospace, Menlo, Consolas, monospace;
  padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2, #f7f5f0); color:var(--ink-2)}
.lien-copie button{white-space:nowrap}
.copie-faite{background:var(--ok-soft, #e3f1e8) !important; color:var(--ok, #2d6a4f) !important}
/* Le fil de la convention : ce qui s'est passé, et ce qui reste à faire. */
.fil{list-style:none; margin:6px 0 14px; padding:0; border-left:2px solid var(--line)}
.fil li{position:relative; padding:4px 0 10px 16px; font-size:13.5px}
.fil li::before{content:""; position:absolute; left:-7px; top:8px; width:12px; height:12px; border-radius:50%;
  background:var(--surface, #fff); border:2px solid var(--line)}
.fil li.fait::before{background:var(--ok, #2d6a4f); border-color:var(--ok, #2d6a4f)}
.fil li.encours::before{background:var(--warn, #b7791f); border-color:var(--warn, #b7791f)}
.fil li.souci::before{background:var(--crit, #b23b3b); border-color:var(--crit, #b23b3b)}
.fil li .quand{color:var(--ink-3); font-size:12px; margin-left:4px}
.fil li .lien-copie{margin-top:6px}
.libelle-bulle{display:inline-flex; align-items:center; gap:0}
.bulle-seule .bulle{margin-left:0}
.bulle-mot{font-size:12px; color:var(--ink-3); margin-right:5px; vertical-align:middle}
.bulle-suite{display:block; margin-top:8px}
.btn.danger{background:var(--crit); border-color:var(--crit); color:#fff}
/* L'aperçu garde le fond blanc d'un mail, même en thème sombre. */
.apercu-signature{background:#fff; border:1px solid var(--line); border-radius:6px; padding:4px 18px;
  overflow-x:auto; max-width:640px; margin:8px 0}
.puce.source{background:var(--surface-2, #eef0f3); color:var(--ink-2)}
.puce.source.ok{background:var(--ok-soft, #e3f1e0); color:var(--ok)}
/* Ma signature mail : le formulaire à gauche, la carte et ses exports à droite. */
.signature-mail{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:24px; align-items:start}
.signature-mail > *{min-width:0}
@media (max-width:900px){.signature-mail{grid-template-columns:1fr}}
.signature-mail textarea{resize:vertical}
.visuels{display:flex; gap:10px; border:0; padding:0; margin:4px 0 10px}
.visuels legend{font-size:13.5px; font-weight:600; margin-bottom:6px}
.visuel{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; border:2px solid var(--line);
  border-radius:10px; padding:8px 6px; cursor:pointer; font-size:12.5px; text-align:center; background:var(--surface)}
.visuel input{position:absolute; opacity:0}
.visuel:has(input:checked){border-color:#CEAB5D; font-weight:600}
.visuel:has(input:focus-visible){outline:2px solid var(--accent)}
details.lignes-directes{border:1px solid var(--line); border-radius:8px; background:var(--surface-2); margin:-4px 0 10px}
details.lignes-directes summary{cursor:pointer; padding:7px 10px; font-size:13px; font-weight:600}
details.lignes-directes ul{list-style:none; margin:0; padding:0 6px 4px}
details.lignes-directes .mini{margin:2px 10px 8px}
button.ld{display:flex; justify-content:space-between; gap:10px; width:100%; background:none; border:0;
  border-bottom:1px dashed var(--line); padding:5px 4px; font:13px var(--f-body); color:var(--ink); cursor:pointer; text-align:left}
button.ld:hover, button.ld:focus-visible{background:var(--accent-soft); outline:none}
button.ld .num{font-family:var(--f-mono); font-size:12px; white-space:nowrap}
.carte-vive img, .signature-complete{max-width:100%; height:auto}
.carte-vive{background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; display:inline-block; max-width:100%}
.signature-complete{background:#fff; color:#020E1F; border:1px solid var(--line); border-radius:10px; padding:14px;
  overflow-x:auto; margin-top:12px}
.actions-signature{display:flex; flex-wrap:wrap; gap:8px}
details.notice-signature{border:1px solid var(--line); border-radius:10px; background:var(--surface); margin-top:12px}
details.notice-signature summary{cursor:pointer; padding:10px 14px; font-weight:600; font-size:13.5px}
details.notice-signature ol{margin:0 0 8px; padding:0 16px 0 34px; font-size:13.5px}
details.notice-signature li{margin-bottom:6px}
details.notice-signature .mini{padding:0 16px 12px; margin:0}
/* Le numéro de la livraison en ligne, discret, sous le menu. */
.menu .version{display:block; margin-top:14px; padding:0 14px; font:500 10.5px/1.4 var(--f-mono); color:var(--ink-3)}
/* Des repères, pas une mise en garde : ton neutre pour ce que lit un maître de stage. */
.avis.repere{background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-left:3px solid #C2A04C}
.travaux-brefs{margin:6px 0 8px; padding-left:18px}
.travaux-brefs li{margin-bottom:2px}
/* Le volet de la déclaration : l'inspection compétente et les deux boutons tiennent toute la largeur. */
.declaration-derogation > div{grid-column:1 / -1}
.declaration-derogation .avis{margin-bottom:0}
.declaration-derogation .btn{font-size:14px}
.declaration-derogation .sous-bloc{margin-top:0; max-width:none}
.declaration-derogation .sous-bloc > div{grid-column:1 / -1; margin-bottom:0}
.declaration-tuteur > fieldset, .declaration-tuteur > div, .declaration-tuteur > p{grid-column:1 / -1}

/* Carnet de suivi : une couleur par cadre, pour lire d'un coup d'œil où se passent les choses. */
:root{--cadre-mfr:var(--accent); --cadre-stage:var(--ok); --cadre-famille:#8A4FA3; --cadre-autre:var(--ink-3)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--cadre-famille:#C79BDB} }
.carnet-fiche{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:12px 14px;
              margin:0 0 14px; display:flex; flex-direction:column; gap:6px}
.carnet-saisie{margin:0 0 16px}
.carnet-saisie > summary{display:inline-block; list-style:none; cursor:pointer}
.carnet-saisie > summary::-webkit-details-marker{display:none}
.carnet-saisie[open] > summary{margin-bottom:6px}
.carnet-filtres{margin-top:0}
.carnet-filtres > div, .carnet-saisie .filtres > div{grid-column:1 / -1}
.etiquette{display:inline-block; font:500 11px/1.6 var(--f-mono); padding:0 7px; border-radius:20px; margin-right:6px;
           border:1px solid currentColor}
.etiquette.cadre-mfr{color:var(--cadre-mfr)} .etiquette.cadre-stage{color:var(--cadre-stage)}
.etiquette.cadre-famille{color:var(--cadre-famille)} .etiquette.cadre-autre{color:var(--cadre-autre)}
.carnet-liste{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.carnet-mois{font:600 12px/1 var(--f-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3);
             margin:12px 0 2px}
.carnet-note{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--cadre-autre);
             border-radius:9px; padding:10px 14px; display:flex; flex-direction:column; gap:5px}
.carnet-note.cadre-mfr{border-left-color:var(--cadre-mfr)} .carnet-note.cadre-stage{border-left-color:var(--cadre-stage)}
.carnet-note.cadre-famille{border-left-color:var(--cadre-famille)}
.carnet-note.important{box-shadow:0 0 0 1px var(--crit) inset}
.carnet-note .tete{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; font-size:14px}
.carnet-note .titre{font-weight:600}
.carnet-note .texte{font-size:14.5px}
.carnet-note .suite{font-size:13.5px; background:var(--warn-soft); color:var(--warn); border-radius:7px; padding:5px 9px}
.carnet-note .suite.faite{background:var(--ok-soft); color:var(--ok)}
.carnet-note form.enligne, .carnet-suites form.enligne{display:inline; margin:0 0 0 6px}
.carnet-repere{font-size:13.5px; color:var(--ink-2); padding:4px 14px; border-left:4px dotted var(--line)}
.carnet-suites{list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:5px}
.carnet-suites li{background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:7px 12px; font-size:14px}
.carnet-suites li.echue{border-color:var(--crit); color:var(--crit)}
.btn.petit{padding:2px 10px; font-size:12.5px}
.export-classe{margin:4px 0 10px}
.export-jeunes{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:2px 12px; padding-left:22px}
button.lien{background:none; border:0; padding:0; color:var(--accent); font:inherit; text-decoration:underline; cursor:pointer}

/* Remplacements : une carte par absence, le détail des jeunes confiés dessous. */
.remplacement-lot{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:10px 14px; margin-bottom:8px}
.remplacement-lot .tete{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.remplacement-lot form.enligne{margin:0 0 0 auto}
.remplacement-lot ul{margin:6px 0 0; padding-left:18px}
.remplacement .mode-bloc{padding-left:24px}

/* Le périmètre regardé : mes tutorés, ma classe, remplacements, tous. */
.onglets-vue{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px}
.onglets-vue a{padding:5px 12px; border:1px solid var(--line); border-radius:20px; font-size:13.5px; text-decoration:none;
               color:var(--ink-2); background:var(--surface)}
.onglets-vue a.actif{background:var(--accent); border-color:var(--accent); color:var(--surface); font-weight:600}

/* Dépôt Yousign : le tableau de relecture occupe toute la largeur, la liste des conventions reste lisible. */
.depot-yousign{max-width:none}
.depot-yousign > div, .depot-yousign > p{grid-column:1 / -1}
.depot-yousign td select{width:100%; min-width:280px}
.depot-yousign td:first-child{width:32px}

/* Conventions signées chez Yousign avant Passerelle : en bleu, pour ne pas les confondre avec celles de l'outil. */
.grille td.yousign{border-left-color:var(--yousign); background:var(--yousign-soft)}
.grille td.yousign a{color:var(--yousign)}
.grille td.yousign .lieu-nom{font-weight:600; color:var(--ink)}
.grille td.yousign .liens-yousign{display:flex; gap:8px; flex-wrap:wrap; font-size:12px}
.pastille.yousign{background:var(--yousign)}
.periodes-jeune .per.yousign{border-left-color:var(--yousign); background:var(--yousign-soft)}

/* Pied de page : le lien vers les données personnelles, discret mais toujours là. */
.pied-site{margin-top:40px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3)}
.pied-site a{color:var(--ink-3)}

/* Visite de stage : le fil des quatre étapes, cochées au fur et à mesure. */
.etapes-visite{display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:10px 0 18px; counter-reset:etape}
.etapes-visite li{counter-increment:etape; display:flex; align-items:center; gap:6px; padding:5px 12px 5px 6px;
  border:1px solid var(--line); border-radius:20px; font-size:13px; font-weight:600; color:var(--ink-3); background:var(--surface)}
.etapes-visite li::before{content:counter(etape); display:inline-grid; place-items:center; width:20px; height:20px;
  border-radius:50%; background:var(--line); color:var(--ink-2); font-size:11px}
.etapes-visite li.fait{color:var(--ok); border-color:color-mix(in srgb, var(--ok) 35%, transparent); background:var(--ok-soft)}
.etapes-visite li.fait::before{content:"✓"; background:var(--ok); color:#fff}
.etapes-visite li.courant{color:var(--accent); border-color:var(--accent)}
.etapes-visite li.courant::before{background:var(--accent); color:#fff}
.etapes-visite a{color:inherit; text-decoration:none}
.etapes-visite.mini-etapes{margin:6px 0 4px}
.etapes-visite.mini-etapes li{font-size:11.5px; padding:2px 9px 2px 4px}
.etapes-visite.mini-etapes li::before{width:16px; height:16px; font-size:10px}
.etape-visite{scroll-margin-top:16px}
.grille-cr{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin:12px 0}
.grille-cr label{display:flex; flex-direction:column; gap:4px; font-weight:600; font-size:13.5px}
.grille-cr textarea{width:100%}
.objectifs-visite{border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:0 0 6px; background:var(--surface)}
.objectifs-visite legend{font-weight:650; font-size:13.5px; padding:0 4px}
.objectifs-visite .case{display:flex; gap:8px; align-items:flex-start; margin:5px 0}
.depot-cr{margin:6px 0 4px}
.depot-cr summary{cursor:pointer; font-size:13.5px; color:var(--accent)}

/* Les fenêtres : confirmation après enregistrement, choix des destinataires. */
dialog.fenetre{border:0; border-radius:14px; padding:22px 24px 18px; max-width:min(520px, calc(100vw - 32px));
  width:100%; background:var(--surface, #fff); color:var(--ink); box-shadow:0 18px 50px rgba(0,0,0,.25)}
dialog.fenetre::backdrop{background:rgba(20,30,35,.45)}
dialog.fenetre h2{margin:0 0 8px; font-size:18px}
dialog.fenetre .case{display:flex; gap:8px; align-items:baseline; margin:8px 0}
.boutons-fenetre{display:flex; gap:8px; justify-content:flex-end; margin-top:16px}
dialog.confirmation .confirmation-corps{font-size:15px; line-height:1.5; padding-left:34px; position:relative}
dialog.confirmation .confirmation-corps::before{content:"✓"; position:absolute; left:0; top:-2px; width:24px; height:24px;
  border-radius:50%; background:var(--ok); color:#fff; display:grid; place-items:center; font-size:14px}

/* Les compteurs du menu : ce qui attend, sans avoir à ouvrir le tableau de bord. */
.menu .compteur{display:inline-block; min-width:19px; padding:1px 6px; margin-left:6px; border-radius:10px;
  font-size:11px; font-weight:700; line-height:16px; text-align:center; vertical-align:1px;
  background:var(--accent-soft); color:var(--accent)}
.menu .compteur.alerte{background:var(--warn-soft); color:var(--warn)}
.menu a.actif .compteur{background:rgba(255,255,255,.22); color:#fff}
.menu a.seul .compteur{margin-left:auto}

/* Liste des conventions : l'étape en couleur, sur la pastille et le liseré de la ligne. */
.etat-conv{display:inline-block; padding:1px 9px; border-radius:20px; font-size:11.5px; font-weight:700;
  margin-right:4px; white-space:nowrap}
.etat-conv.signee{background:var(--ok-soft); color:var(--ok)}
.etat-conv.encours{background:var(--warn-soft); color:var(--warn)}
.etat-conv.rompue{background:var(--crit-soft); color:var(--crit)}
.etat-conv.yousign{background:var(--yousign-soft); color:var(--yousign)}
.etat-conv.annulee{background:var(--surface); color:var(--ink-3); border:1px solid var(--line)}
.grille tr.etape-signee > th.qui{box-shadow:inset 4px 0 0 var(--ok), 1px 0 0 var(--line)}
.grille tr.etape-encours > th.qui{box-shadow:inset 4px 0 0 var(--warn), 1px 0 0 var(--line)}
.grille tr.etape-rompue > th.qui{box-shadow:inset 4px 0 0 var(--crit), 1px 0 0 var(--line)}
.grille tr.etape-yousign > th.qui{box-shadow:inset 4px 0 0 var(--yousign), 1px 0 0 var(--line)}
.grille tr.etape-annulee > th.qui{box-shadow:inset 4px 0 0 var(--line), 1px 0 0 var(--line); opacity:.75}
.legende-etapes{margin-top:10px}

/* Le Drive des documents sauvegardés, toujours dans la bannière de l'équipe : le logo seul. */
.barre .lien-drive{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border:1px solid var(--line); border-radius:50%; background:var(--surface); flex:none}
.barre .lien-drive:hover{border-color:var(--ink-3)}
.barre .lien-drive .texte{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* Dans le fil d'une convention : « en présence » et « Relancer » côte à côte. */
.fil .actions-etape{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:6px}
.fil .actions-etape form{margin:0}

/* Accordéon : le total d'une rubrique n'apparaît que refermée, ses liens le détaillent une fois ouverte. */
.menu details[open] > summary .compteur.total{display:none}
.menu summary .compteur.total{margin-left:auto}

/* Attestation : la question, puis une ligne par absence, ses trois champs côte à côte. */
#absences > *{grid-column:1 / -1}
#absences .choix-absence{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center}
#absences .choix-absence legend{font-weight:700; margin-bottom:6px; width:100%}
#absences .liste-absences{display:flex; flex-direction:column; gap:8px}
#absences .ligne-absence{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px}
@media (max-width:600px){ #absences .ligne-absence{grid-template-columns:1fr 1fr} }
#absences .liste-absences > .btn{align-self:flex-start}

/* Stages des jeunes : le lieu et l'étape dans chaque tuile, les alertes sur le nom. */
.periodes-jeune .per .lieu{display:block; font-size:12px; font-weight:600; line-height:1.3; margin-top:2px}
.periodes-jeune .per .lieu .etape{display:block; font-weight:400; color:var(--ink-2); font-size:11.5px}
.grille th.qui .puce.urgent{background:var(--crit-soft); color:var(--crit)}
.grille th.qui .mini{display:block; font-weight:400}
.grille td.heures-jeune.sous-cible b{color:var(--warn)}
.grille td.acces{white-space:normal; min-width:180px}

/* Attestations : l'état de l'envoi automatique, au-dessus des filtres. */
.etat-envoi{margin:8px 0 10px; padding:8px 12px; border-radius:10px; font-size:14px; border:1px solid var(--line)}
.etat-envoi.actif{background:var(--ok-soft); border-color:transparent}
.etat-envoi.inactif{background:var(--warn-soft); border-color:transparent}

/* Tableau de bord : une pastille numérotée par période, colorée selon son état. */
.pastilles-periodes{white-space:nowrap}
.pastille-periode{display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px;
  padding:0 5px; margin:0 3px 2px 0; border-radius:6px; font-size:11.5px; font-weight:700; color:#fff;
  text-decoration:none; background:var(--ink-3)}
.pastille-periode.v-signee{background:var(--ok)}
.pastille-periode.v-encours{background:var(--warn)}
.pastille-periode.v-nontrouve{background:var(--crit)}
.pastille-periode.v-partiel{background:linear-gradient(90deg, var(--warn) 50%, var(--crit) 50%)}
.pastille-periode.yousign{background:var(--yousign)}
a.pastille-periode:hover{outline:2px solid var(--ink); outline-offset:1px}

/* La carte des structures d'accueil. */
.carte-structures{height:480px; border-radius:12px; border:1px solid var(--line); margin:10px 0 6px; z-index:0}
@media (max-width:600px){ .carte-structures{height:380px} }
.actions-carte{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:6px 0 14px}
.carte-structures .leaflet-popup-content{font-size:13px; line-height:1.4}
.actions-carte .btn[hidden]{display:none}

/* Saisie d'une convention : toute la largeur sur ordinateur, les périodes côte à côte, leur titre dans le cadre. */
.filtres.saisie-convention{max-width:none}
.saisie-convention .choix-semaines{grid-column:1 / -1}
.saisie-convention .choix-semaines{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px}
.saisie-convention .choix-semaines > b, .saisie-convention .choix-semaines > p{grid-column:1 / -1; margin:0}
.saisie-convention .periode-semaines{margin:0; min-width:0}
.periode-semaines legend{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:6px 10px; width:100%; box-sizing:border-box; padding:4px 2px; float:left}
.periode-semaines legend + *{clear:both}
.periode-semaines .tout{align-items:flex-start; flex:1 1 220px; min-width:0}
.periode-semaines .titre-periode{display:block; line-height:1.35; overflow-wrap:anywhere}
.periode-semaines .dates-periode{display:block; font-size:12px; font-weight:400; color:var(--ink-2)}
.periode-semaines legend .btn{flex:none}
@media (min-width:900px){
  .filtres.saisie-convention{display:flex; flex-direction:column}
  .saisie-convention > *:not(.choix-semaines){max-width:900px; width:100%}
}

/* Apprenti : ses semaines sans convention se passent sur son lieu d'apprentissage, comptées couvertes (vert). */
.periode.p-apprenti .rail{background:var(--ok)}
.periode.p-apprenti .etat{background:var(--ok-soft); color:var(--ok)}
.grille td.v-apprenti{border-left-color:var(--ok); background:var(--ok-soft)}
.pastille.v-apprenti, .pastille-periode.v-apprenti{background:var(--ok)}
.periodes-jeune .per.v-apprenti{border-left-color:var(--ok); background:var(--ok-soft)}
.marque.apprenti{background:var(--ok-soft); color:var(--ok)}
.details-apprentissage[hidden]{display:none}
.pieces-note{margin:4px 0; font-size:13px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center}
.piece-jointe{display:inline-flex; gap:6px; align-items:center; background:var(--surface-2); border:1px solid var(--line);
  border-radius:6px; padding:2px 8px}
.lieu-apprentissage{border:1px solid var(--line); border-left:3px solid var(--ok); border-radius:8px; padding:10px 12px; margin:10px 0}
.lieu-apprentissage[hidden]{display:none}
.lieu-apprentissage h4{margin:0 0 6px; font-size:14px}

/* Formulaire de signalement : seuls les champs utiles à ce qu'on signale. */
#signalement [data-pour][hidden]{display:none !important}
.vues .vue-lecture{color:var(--warn); font-weight:600; margin:0 4px}

/* ------------------------------------------------------------- services des jeunes
   Un écran de travail sur ordinateur : toute la largeur, la réserve des jeunes à gauche, les
   services en cartes à droite, groupés par moment. */
.page.services{max-width:1500px}
.sv-semaine{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:0 0 12px}
.sv-semaine select{font:inherit; font-size:14px; padding:6px 8px; border:1px solid var(--line); border-radius:7px;
                   background:var(--surface); color:var(--ink)}
.sv-tete{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap}
.sv-tete h2{font-family:var(--f-display); font-size:18px; margin:0}
.sv-resume{margin:2px 0 10px; font-size:13.5px; color:var(--ink-2)}
.sv-statut{font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--warn-soft); color:var(--warn)}
.sv-statut.ok{background:var(--ok-soft); color:var(--ok)}
.sv-classes{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:0 0 12px; font-size:13px}
.sv-classes > span{color:var(--ink-2); margin-right:2px}
.sv-classe{display:inline-flex; align-items:center; gap:4px; padding:3px 10px 3px 6px; border-radius:20px; cursor:pointer;
           border:1px solid var(--line); background:var(--surface); color:var(--ink-2)}
.sv-classe.on{border-color:hsl(var(--h) 45% 50%); background:hsl(var(--h) 60% 50% / .12); color:var(--ink); font-weight:600}
.sv-classe small{font-weight:400; color:var(--ink-3)}
.sv-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 12px}
.sv-actions .btn{padding:9px 14px; font-size:14px}
.sv-actions .btn[disabled]{opacity:.45; cursor:default}
.sv-menu{position:relative}
.sv-menu > summary{list-style:none}
.sv-menu > summary::-webkit-details-marker{display:none}
.sv-menu > div{position:absolute; z-index:20; top:calc(100% + 4px); left:0; min-width:270px; background:var(--surface);
               border:1px solid var(--line); border-radius:9px; box-shadow:0 8px 24px rgb(0 0 0 / .14); padding:5px;
               display:flex; flex-direction:column}
.sv-menu > div a, .sv-menu > div button{font:inherit; font-size:13.5px; text-align:left; padding:7px 10px; border:0; border-radius:6px;
               background:none; color:var(--ink); text-decoration:none; cursor:pointer}
.sv-menu > div a:hover, .sv-menu > div button:hover{background:var(--accent-soft)}
.sv-alertes{list-style:none; margin:0 0 12px; padding:9px 12px; border-radius:9px; background:var(--warn-soft);
            border:1px solid color-mix(in srgb, var(--warn) 30%, transparent); font-size:13px; color:var(--ink)}
.sv-alertes li{padding:2px 0 2px 18px; position:relative}
.sv-alertes li::before{content:"•"; position:absolute; left:4px; color:var(--warn)}
.sv-alertes li.grave::before{content:"!"; font-weight:700; color:var(--crit)}
.sv-lien{font:inherit; background:none; border:0; padding:0; color:inherit; text-align:left; cursor:pointer;
         text-decoration:underline dotted}
.sv-ok{margin:0 0 12px; padding:8px 12px; border-radius:9px; background:var(--ok-soft); color:var(--ok); font-size:13.5px}
.sv-corps{display:grid; grid-template-columns:270px 1fr; gap:16px; align-items:start}
@media (max-width: 900px){ .sv-corps{grid-template-columns:1fr} }
.sv-reserve{position:sticky; top:10px; display:flex; flex-direction:column; gap:10px; max-height:calc(100vh - 20px); overflow:auto}
.sv-reserve input[type=search], .sv-reserve select, .sv-note textarea{font:inherit; font-size:14px; padding:7px 9px; width:100%;
               border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink)}
.sv-zone{background:var(--surface); border:1px dashed var(--line); border-radius:9px; padding:8px}
.sv-zone h3, .sv-moment{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); margin:0 0 6px}
.sv-zone h3 span{display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:var(--surface-2);
                 text-align:center; color:var(--ink)}
.sv-zone[data-zone=aplacer] h3 span{background:var(--warn-soft); color:var(--warn)}
.sv-note{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--ink-2)}
.sv-moment{margin:4px 0 8px}
.sv-cartes{display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:10px; margin-bottom:16px}
.sv-carte{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:92px;
          display:flex; flex-direction:column; transition:opacity .15s, box-shadow .15s}
.sv-carte-t{display:flex; justify-content:space-between; gap:6px; align-items:baseline; font-size:14px}
.sv-compte{font:600 12px var(--f-mono); padding:1px 7px; border-radius:10px; background:var(--surface-2); white-space:nowrap}
.sv-carte.manque .sv-compte{background:var(--warn-soft); color:var(--warn)}
.sv-carte.plein .sv-compte{background:var(--ok-soft); color:var(--ok)}
.sv-carte-r{font-size:11.5px; color:var(--ink-3); margin:1px 0 6px}
.sv-depot{display:flex; flex-direction:column; gap:4px; flex:1; min-height:28px}
.sv-j{font:inherit; font-size:13px; display:flex; align-items:center; gap:6px; width:100%; text-align:left; cursor:grab; user-select:none; -webkit-user-select:none;
      padding:4px 6px; border-radius:7px; border:1px solid var(--line); background:var(--ground); color:var(--ink)}
.sv-j:hover{border-color:var(--accent)}
.sv-j.alerte{border-color:var(--crit); background:var(--crit-soft)}
.sv-j.estompe{opacity:.25}
.sv-cl{flex:none; font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:5px;
       background:hsl(var(--h) 60% 50% / .16); color:hsl(var(--h) 55% 32%); max-width:76px; overflow:hidden;
       text-overflow:ellipsis; white-space:nowrap}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sv-cl{color:hsl(var(--h) 60% 75%)} }
.sv-n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sv-n b{font-weight:600; text-transform:uppercase; font-size:.92em}
.sv-r{flex:none; font:600 10px var(--f-mono); padding:1px 4px; border-radius:4px; background:var(--surface-2); color:var(--ink-2)}
.sv-r-DP{background:#FFF1D6; color:#8A5A00}
.sv-r-INT{background:#E3E9FB; color:#2F4E9A}
.sv-r-EXT{background:#EDE6F6; color:#6A4596}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sv-r-DP{background:#3A2C10; color:#F1C46B}
  :root:not([data-theme="light"]) .sv-r-INT{background:#1A2647; color:#9FB6F2}
  :root:not([data-theme="light"]) .sv-r-EXT{background:#2C2140; color:#C7A9EE} }
.sv-v, .sv-a{flex:none; font-size:11px}
.sv-a{color:var(--crit); font-weight:700}
.sv-d{flex:none; font-size:11px; color:var(--ink-3); max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#services.glisse .sv-carte:not(.possible){opacity:.35}
#services.glisse .sv-carte.possible{box-shadow:0 0 0 2px color-mix(in srgb, var(--ok) 55%, transparent)}
#services .survol{background:var(--accent-soft)}
#services.occupe{cursor:progress}
#services.occupe .sv-corps{opacity:.7}
.sv-corps.fige .sv-j{cursor:pointer}
.sv-message{position:fixed; z-index:50; left:50%; bottom:24px; transform:translateX(-50%); max-width:min(560px, 90vw);
            background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:9px; font-size:14px;
            box-shadow:0 8px 24px rgb(0 0 0 / .2)}
.sv-message.grave{background:var(--crit)}
.sv-fiche{border:0; border-radius:12px; padding:0; width:min(640px, 94vw); background:var(--surface); color:var(--ink);
          box-shadow:0 18px 50px rgb(0 0 0 / .3)}
.sv-fiche::backdrop{background:rgb(0 0 0 / .35)}
.sv-fiche-in{padding:16px 18px; display:flex; flex-direction:column; gap:12px}
.sv-fiche header{position:relative; padding-right:30px}
.sv-fiche h2{margin:0; font-size:18px; font-family:var(--f-display)}
.sv-fiche header p{margin:2px 0 0; font-size:13px; color:var(--ink-2)}
.sv-fermer{position:absolute; top:-4px; right:-4px; font-size:22px; border:0; background:none; color:var(--ink-2); cursor:pointer}
.sv-choix{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:6px}
.sv-choix button{font:inherit; text-align:left; padding:7px 10px; border-radius:8px; border:1px solid var(--line);
                 background:var(--ground); color:var(--ink); cursor:pointer; display:flex; flex-direction:column}
.sv-choix button:hover:not([disabled]){border-color:var(--accent); background:var(--accent-soft)}
.sv-choix button b{font-size:13.5px}
.sv-choix button small{font-size:11.5px; color:var(--ink-2)}
.sv-choix button.actuel{border:2px solid var(--accent)}
.sv-choix button[disabled]{opacity:.45; cursor:not-allowed}
.sv-fiche footer{display:flex; flex-wrap:wrap; gap:6px; align-items:center; border-top:1px solid var(--line); padding-top:10px}
.sv-dispense{display:inline-flex; gap:4px}
.sv-dispense input{font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:7px;
                   background:var(--ground); color:var(--ink); width:190px}
.sv-filtre{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px; font-size:13.5px}
.sv-filtre select{font:inherit; padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink)}
.sv-defile{overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:9px}
.sv-bilan th.sv-v{writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; padding:8px 4px; vertical-align:bottom}
.sv-bilan td.sv-n{text-align:center; font-family:var(--f-mono); padding:6px 4px}
.sv-bilan td.sv-n1{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.sv-bilan td.sv-n2{background:color-mix(in srgb, var(--accent) 22%, transparent)}
.sv-bilan td.sv-n3{background:color-mix(in srgb, var(--accent) 36%, transparent)}
.sv-bilan td.sv-n4{background:color-mix(in srgb, var(--accent) 50%, transparent)}
.sv-catalogue input[type=text], .sv-catalogue select, .sv-catalogue input[type=number]{font:inherit; font-size:13.5px; padding:5px 7px;
               border:1px solid var(--line); border-radius:6px; background:var(--ground); color:var(--ink); width:100%}
.sv-catalogue input.sv-court{width:56px; padding:5px 4px}
.sv-catalogue input[type=text]{min-width:150px}
.sv-catalogue th, .sv-catalogue td, .sv-bilan td{padding:6px 5px; min-width:0}
.sv-catalogue .sv-c-repas{white-space:nowrap}
.sv-catalogue .sv-regimes{white-space:nowrap}
.sv-catalogue .sv-regimes label{margin-right:8px; font-size:13px}
.sv-catalogue tr.sv-inactif td{opacity:.55}
.sv-taches{border:1px solid var(--line); border-radius:9px; padding:8px 12px; display:grid;
           grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:4px}
.sv-taches legend{font-size:12px; font-weight:600; color:var(--ink-2); padding:0 4px}
.sv-carte.sv-t-reserve{border-style:dashed}
.sv-carte.sv-t-autres{background:var(--surface-2)}
.sv-poste{border-top:1px dashed var(--line); padding-top:4px; margin-top:4px}
.sv-poste:first-of-type{border-top:0; margin-top:0}
.sv-poste-t{display:flex; justify-content:space-between; font-size:11.5px; font-weight:600; color:var(--ink-2); margin:0 0 3px}
.sv-compte.manque{background:var(--crit-soft); color:var(--crit)}
.sv-compte.bas{background:var(--warn-soft); color:var(--warn)}
.sv-compte.plein{background:var(--ok-soft); color:var(--ok)}
.sv-compte.renfort{background:var(--accent-soft); color:var(--accent)}
.sv-g{flex:none; font:600 10px var(--f-mono); padding:1px 4px; border-radius:4px}
.sv-g-F{background:#FBE3EE; color:#A0306A}
.sv-g-M{background:#DDEFF7; color:#1F6385}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sv-g-F{background:#3B1A2A; color:#F0A3C7}
  :root:not([data-theme="light"]) .sv-g-M{background:#14303D; color:#8CCBE6} }
.sv-actuel{margin:0; font-size:14px}
.sv-motif{display:flex; gap:8px; align-items:center; font-size:13px}
.sv-motif input{font:inherit; font-size:13px; padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--ground); color:var(--ink)}
.sv-choix button.conseille{border-color:var(--ok); background:var(--ok-soft)}
.sv-catalogue th span{display:block; font-weight:400; text-transform:none; font-size:10.5px}
.sv-catalogue tr[data-type=repas] :is(.sv-c-mini, .sv-c-maxi, .sv-c-genre) > input,
.sv-catalogue tr[data-type=zone] .sv-c-repas > input,
.sv-catalogue tr[data-type=classe] :is(.sv-c-genre, .sv-c-repas) > input,
.sv-catalogue tr[data-type=reserve] :is(.sv-c-repas, .sv-c-mini) > input,
.sv-catalogue tr[data-type=autres] :is(.sv-c-genre, .sv-c-mini, .sv-c-ideal, .sv-c-maxi, .sv-c-repas) > input{opacity:.2}
.sv-catalogue tr.sv-nouveau td{background:var(--accent-soft)}
.sv-catalogue select{min-width:92px}
.sv-catalogue select.sv-type{min-width:128px}

/* Où déposer le jeune en cours de déplacement : rouge la semaine passée, orange il y a deux semaines, du vert
   (jamais fait) au orange (souvent fait) ; la même échelle colore les choix de sa fiche. */
:root{--i-0:#2E9E5B; --i-1:#8BBF3F; --i-2:#E0B020; --i-3:#E07B20; --i-avant:#D9772B; --i-dernier:#C8372D; --i-neutre:#8A979B}
#services.glisse .sv-carte[class*=" i-"]{opacity:1; box-shadow:0 0 0 3px var(--ic); background:color-mix(in srgb, var(--ic) 13%, var(--surface))}
.sv-carte.i-0, .sv-choix .i-0{--ic:var(--i-0)} .sv-carte.i-1, .sv-choix .i-1{--ic:var(--i-1)}
.sv-carte.i-2, .sv-choix .i-2{--ic:var(--i-2)} .sv-carte.i-3, .sv-choix .i-3{--ic:var(--i-3)}
.sv-carte.i-avant, .sv-choix .i-avant{--ic:var(--i-avant)} .sv-carte.i-dernier, .sv-choix .i-dernier{--ic:var(--i-dernier)}
.sv-carte.i-neutre, .sv-choix .i-neutre{--ic:var(--i-neutre)}
/* En surimpression, sans rien décaler dans la carte */
.sv-carte{position:relative}
.sv-indice{position:absolute; top:-9px; right:10px; z-index:1; font-size:11px; font-weight:700; color:#fff; background:var(--ic); padding:1px 8px; border-radius:10px; white-space:nowrap; pointer-events:none; box-shadow:0 1px 3px rgb(0 0 0 / .2)}
.sv-choix button[class*="i-"]:not([disabled]){border-color:var(--ic); background:color-mix(in srgb, var(--ic) 12%, var(--ground))}
.sv-choix button[class*="i-"] small{color:color-mix(in srgb, var(--ic) 75%, var(--ink)); font-weight:600}
.sv-legende{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--ink-2); margin:0 0 10px}
.sv-legende i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px}

/* ---------------------------------------------------------------- Bilans et questionnaires */
:root{--bl-s1:#2a78d6; --bl-s2:#eb6834; --bl-s3:#1baf7a; --bl-s4:#eda100; --bl-s5:#e87ba4;
  --bl-o0:#86b6ef; --bl-o1:#5598e7; --bl-o2:#2a78d6; --bl-o3:#1c5cab; --bl-o4:#104281; --bl-o5:#0d366b;
  --bl-grille:#e1e0d9; --bl-axe:#898781; --bl-bon:#0ca30c; --bl-attention:#fab219; --bl-alerte:#d03b3b}
@media (prefers-color-scheme: dark){ :root:where(:not([data-theme="light"])){--bl-s1:#3987e5; --bl-s2:#d95926; --bl-s3:#199e70; --bl-s4:#c98500; --bl-s5:#d55181;
  --bl-o0:#b7d3f6; --bl-o1:#86b6ef; --bl-o2:#5598e7; --bl-o3:#3987e5; --bl-o4:#256abf; --bl-o5:#184f95; --bl-grille:#2c2c2a} }
:root[data-theme="dark"]{--bl-s1:#3987e5; --bl-s2:#d95926; --bl-s3:#199e70; --bl-s4:#c98500; --bl-s5:#d55181;
  --bl-o0:#b7d3f6; --bl-o1:#86b6ef; --bl-o2:#5598e7; --bl-o3:#3987e5; --bl-o4:#256abf; --bl-o5:#184f95; --bl-grille:#2c2c2a}

.bl-nouveau > summary{list-style:none; display:inline-block; margin-bottom:12px}
.bl-nouveau > summary::-webkit-details-marker{display:none}
.bl-form{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:20px; display:grid; gap:10px}
.bl-form .sect{margin-top:6px}
.bl-natures{display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:10px}
.bl-nature{display:grid; gap:4px; padding:12px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; position:relative}
.bl-nature input{position:absolute; opacity:0}
.bl-nature:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}
.bl-nature:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.bl-picto{font-size:26px; line-height:1}
.bl-public, .bl-classes{display:flex; flex-wrap:wrap; gap:6px 16px}
.bl-jeunes{max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:10px; padding:8px; display:grid; gap:8px}
.bl-jeunes fieldset{border:0; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:2px 14px}
.bl-jeunes legend{font-weight:600; width:100%}
.bl-filtre{max-width:320px}
.bl-editeur{display:grid; gap:10px}
.bl-ed-q{border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:10px; display:grid; gap:6px; background:var(--ground)}
.bl-ed-tete{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.bl-ed-tete select{width:auto}
.bl-ed-boutons{margin-left:auto; display:flex; gap:4px}
.bl-ed-boutons button{border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:6px; padding:2px 9px; cursor:pointer}
.bl-ed-boutons .danger{color:var(--crit)}
.bl-ed-grille{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.bl-ed-valeurs{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:4px}

/* Répondre : grosses cibles au doigt */
.bl-repondre h1{margin-bottom:6px}
.bl-intro{white-space:pre-line}
.bl-questionnaire{display:grid; gap:12px}
.bl-q{border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:0; background:var(--surface)}
.bl-q[hidden]{display:none}
.bl-q legend{font-weight:600; font-size:16px; padding:0 4px}
.bl-q input[type=text], .bl-q textarea{width:100%}
.bl-q .oblig{color:var(--crit)}
.bl-notes{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.bl-notes label{position:relative}
.bl-notes input{position:absolute; opacity:0}
.bl-notes span{display:flex; align-items:center; justify-content:center; min-width:48px; height:48px; border-radius:12px; border:1.5px solid var(--line);
  font-size:24px; cursor:pointer; background:var(--ground); transition:transform .12s}
.bl-echelle span{min-width:40px; font-size:17px; font-weight:600}
.bl-etoiles span{color:#c9c6bc}
.bl-notes input:checked + span{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.08)}
.bl-etoiles:has(input:checked) label:has(~ label input:checked) span, .bl-etoiles input:checked + span{color:#eda100}
.bl-notes input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.bl-choix{display:grid; gap:6px; margin-top:6px}
.bl-choix label{position:relative}
.bl-choix input{position:absolute; opacity:0}
.bl-choix span{display:block; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; background:var(--ground)}
.bl-choix input:checked + span{border-color:var(--accent); background:var(--accent-soft); font-weight:600}
.bl-choix input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.bl-oui-non, .bl-frequence{grid-template-columns:repeat(auto-fit, minmax(110px, 1fr))}
.bl-grille-ligne p{margin:8px 0 2px; font-weight:500}
.bl-grille-ligne .bl-choix{grid-template-columns:repeat(auto-fit, minmax(120px, 1fr))}
.bl-envoyer{width:100%; padding:14px; font-size:17px}
.bl-fin{white-space:pre-line; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px; margin:12px 0}

/* Écran projeté */
.bl-projection{display:grid; gap:18px; background:var(--surface); border-radius:18px; padding:20px}
.bl-projection:fullscreen{padding:4vh 4vw; align-content:center; background:#fff; color:#17262B}
.bl-proj-tete h1{font-size:clamp(24px, 3.6vw, 52px); margin:0}
.bl-proj-corps{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:4vw; align-items:center}
.bl-qr{background:#fff; padding:14px; border-radius:16px; justify-self:center; width:min(100%, 62vh)}
.bl-qr svg{width:100%; height:auto; display:block}
.bl-projection.ferme .bl-qr{opacity:.15}
.bl-proj-consigne{font-size:clamp(18px, 2.2vw, 32px); margin:0}
.bl-proj-url{font:600 clamp(20px, 2.8vw, 44px) var(--f-mono); word-break:break-all; margin:6px 0 18px; color:var(--accent)}
.bl-proj-chiffres{font-size:clamp(18px, 2vw, 30px); margin:0}
.bl-n{font:800 clamp(48px, 7vw, 110px) var(--f-display); display:inline-block}
.bl-proj-reste{font-size:clamp(16px, 1.8vw, 26px); font-weight:600}
.bl-proj-reste.ferme{color:var(--crit)}
.bl-proj-actions{display:flex; flex-wrap:wrap; gap:8px}
.bl-projection:fullscreen .bl-proj-actions{display:none}
@media (max-width:760px){ .bl-proj-corps{grid-template-columns:1fr} }

/* Résultats */
.bl-resultats{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap:14px}
.bl-carte{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px}
.bl-carte h3{margin:0 0 2px; font-size:15.5px}
.bl-carte-texte{grid-column:1 / -1}
.bl-barres, .bl-empiles{display:grid; gap:6px; margin-top:8px}
.bl-barre, .bl-empile{display:grid; grid-template-columns:minmax(90px, 38%) minmax(0, 1fr) auto; gap:8px; align-items:center; font-size:13.5px}
.bl-barre-lib{overflow-wrap:anywhere}
.bl-barre-piste{height:18px; display:block}
.bl-barre-val{display:block; height:100%; min-width:2px; background:var(--bl-s1); border-radius:0 4px 4px 0}
.bl-barre-val.niv-ok{background:var(--bl-bon)} .bl-barre-val.niv-attention{background:var(--bl-attention)} .bl-barre-val.niv-alerte{background:var(--bl-alerte)}
.bl-barre-n{font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink)}
.bl-barre-n small{color:var(--ink-2)}
.bl-empile-piste{display:flex; gap:2px; height:20px}
.bl-empile-piste span{display:block; height:100%}
.bl-empile-piste span:first-child{border-radius:4px 0 0 4px} .bl-empile-piste span:last-child{border-radius:0 4px 4px 0}
.o-neutre{background:#c3c2b7}
.o0{background:var(--bl-o0)} .o1{background:var(--bl-o1)} .o2{background:var(--bl-o2)} .o3{background:var(--bl-o3)} .o4{background:var(--bl-o4)} .o5{background:var(--bl-o5)}
.bl-legende{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-2); margin:6px 0}
.bl-legende i{display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.bl-legende i.s1{background:var(--bl-s1)} .bl-legende i.s2{background:var(--bl-s2)} .bl-legende i.s3{background:var(--bl-s3)} .bl-legende i.s4{background:var(--bl-s4)} .bl-legende i.s5{background:var(--bl-s5)}
.bl-note{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:16px; align-items:end; margin-top:8px}
.bl-moyenne{display:grid; justify-items:start}
.bl-moyenne b{font:700 34px var(--f-display); line-height:1}
.bl-moyenne span{color:var(--ink-2)}
.bl-moyenne small{color:var(--ink-2); font-size:12px}
.bl-colonnes{display:flex; gap:4px; align-items:flex-end; height:110px}
.bl-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:2px}
.bl-col-barre{width:70%; max-width:34px; background:var(--bl-s1); border-radius:4px 4px 0 0; min-height:2px}
.bl-col-n{font-size:11.5px; color:var(--ink-2)}
.bl-col-lib{font-size:13px; white-space:nowrap}
.bl-evolution{margin:14px 0 0}
.bl-evolution figcaption{font-size:12.5px; color:var(--ink-2)}
.bl-evolution svg{width:100%; height:auto; overflow:visible}
.bl-grillage{stroke:var(--bl-grille); stroke-width:1}
.bl-axe{fill:var(--bl-axe); font-size:11px}
.bl-ligne{fill:none; stroke-width:2; stroke-linejoin:round}
.bl-ligne.s1{stroke:var(--bl-s1)} .bl-ligne.s2{stroke:var(--bl-s2)} .bl-ligne.s3{stroke:var(--bl-s3)} .bl-ligne.s4{stroke:var(--bl-s4)} .bl-ligne.s5{stroke:var(--bl-s5)}
.bl-point{stroke:var(--surface); stroke-width:2}
.bl-point.s1{fill:var(--bl-s1)} .bl-point.s2{fill:var(--bl-s2)} .bl-point.s3{fill:var(--bl-s3)} .bl-point.s4{fill:var(--bl-s4)} .bl-point.s5{fill:var(--bl-s5)}
.bl-etiquette{fill:var(--ink-2); font-size:11.5px}
.bl-zone{fill:transparent}
.bl-curseur{stroke:var(--bl-axe); stroke-dasharray:3 3}
.bl-bulle{position:fixed; z-index:2000; background:var(--ink); color:var(--surface); padding:6px 9px; border-radius:8px; font-size:12.5px; pointer-events:none; max-width:280px}
.bl-bulle[hidden]{display:none}
.bl-verbatims{list-style:none; padding:0; margin:8px 0 0; display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap:8px}
.bl-verbatims li{background:var(--ground); border-radius:10px; padding:10px 12px}
.bl-verbatims li[hidden]{display:none}
.bl-verbatims p{margin:0 0 4px; white-space:pre-line}
.bl-verbatims img, .bl-manuscrit{max-width:100%; border:1px solid var(--line); border-radius:6px; background:#fff; display:block; margin-top:4px}
.bl-chercher{max-width:360px; margin-top:6px}
.bl-filtres fieldset{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:2px 12px}
.bl-filtres legend{font-size:13px; color:var(--ink-2)}

/* Copies scannées */
.bl-copie{border:1px solid var(--line); border-radius:12px; padding:8px 12px; margin:8px 0; background:var(--surface)}
.bl-copie summary{cursor:pointer}
.bl-copie-corps{display:grid; grid-template-columns:auto minmax(0, 1fr); gap:12px; margin-top:8px}
.bl-copie-vues{display:grid; gap:6px; align-content:start}
.bl-copie-vues img{width:130px; border:1px solid var(--line)}
.bl-copie tr.doute th{color:var(--crit)}
.bl-copie th{font-weight:500; text-align:left; width:40%}
@media (max-width:700px){ .bl-copie-corps{grid-template-columns:1fr} }

/* Écoute des jeunes */
.bl-resultat-h{border-radius:14px; padding:14px 16px; margin:10px 0; border:2px solid var(--line)}
.bl-resultat-h.niveau-aucun{border-color:var(--ok); background:var(--ok-soft)}
.bl-resultat-h.niveau-vigilance{border-color:var(--warn); background:var(--warn-soft)}
.bl-resultat-h.niveau-fort{border-color:var(--crit); background:var(--crit-soft)}
.bl-h-niveau{font:700 20px var(--f-display); margin:0 0 6px}
.bl-prevenir{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:8px 0}
.bl-anonyme span .mini{display:block}
.bl-parole{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--warn); border-radius:12px; padding:12px 14px; margin:10px 0}
.bl-parole.urgent{border-left-color:var(--crit)}
.bl-parole.traite{border-left-color:var(--ok); opacity:.8}
.bl-parole header{display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline}
.bl-parole dl{display:grid; grid-template-columns:max-content minmax(0, 1fr); gap:4px 12px; margin:8px 0}
.bl-parole dt{color:var(--ink-2)} .bl-parole dd{margin:0; white-space:pre-line}
.marque.crit{background:var(--crit-soft); color:var(--crit)}
.ecoute-jeune{margin-top:16px}

.bl-transcrire{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.bl-edition{margin-top:8px}
.bl-edition textarea{width:100%}
.bl-copie textarea{width:100%}

/* Fiches métiers de l'Onisep : titres, paragraphes et listes d'origine, rien d'autre. */
.fiche-metier h5 { margin: 12px 0 2px; font-size: 1rem; }
.fiche-metier p { margin: 4px 0 8px; }
.fiche-metier ul { margin: 4px 0 8px 20px; }

/* Propositions pendant la frappe dans l'orientation. */
.suggestions { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid #c9d3d0; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 320px; overflow: auto; }
.suggestions li a { display: block; padding: 8px 12px; text-decoration: none; color: inherit; }
.suggestions li a:hover, .suggestions li[aria-selected="true"] a { background: #e8f1ee; }

/* Site école : un bandeau qu'on ne peut pas confondre avec le site réel, et la fenêtre des mails « envoyés ». */
.bandeau-ecole{background:#7a2e8f;color:#fff;text-align:center;padding:6px 12px;font-size:13.5px;position:sticky;top:0;z-index:60}
.bandeau-ecole a{color:#fff;text-decoration:underline;margin-left:8px}
.fenetre-mails-ecole{position:fixed;inset:5vh 0 auto;margin:0 auto;width:min(760px,94vw);max-height:88vh;overflow:auto;z-index:80;
  border:0;border-radius:14px;box-shadow:0 18px 60px rgba(0,0,0,.35);padding:16px 18px;background:var(--surface,#fff);color:inherit}
.fenetre-mails-ecole > form{float:right}
.mail-ecole{border:1px solid var(--line,#ddd);border-radius:10px;padding:10px 12px;margin:10px 0;background:var(--bg,#fafafa)}
.mail-ecole dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0 0 8px;font-size:13.5px}
.mail-ecole dt{color:var(--ink-2,#666)}
.mail-ecole dd{margin:0;word-break:break-word}
.mail-ecole iframe{width:100%;height:340px;border:1px solid var(--line,#ddd);border-radius:8px;background:#fff}

/* Formulaire de la structure : la pause éventuelle de chaque plage, sous la ligne du jour. */
.horaires tr.pauses td{padding-top:0;border-top:0;font-size:13px}
.horaires tr.pauses details summary{cursor:pointer;color:var(--ink-2,#555)}
.horaires tr.pauses input[type=time]{max-width:7.5em}

/* Site école : la signature simulée, à la place du bloc de DocuSeal. */
.signature-ecole .document-ecole{width:100%;height:70vh;min-height:420px;border:1px solid var(--line,#ddd);border-radius:8px;background:#fff}
.signature-ecole form{margin-top:12px}
.signature-ecole .case{display:flex;gap:8px;align-items:center}