/* /css/theme/jetons.css */






















:root {
  



  --or:        #C8A95A; 
  --or-fonce:  #A8863E; 
  --bleu-nuit: #1C2340; 
  --bleu-2:    #2A3358; 
  --blanc:     #FFFFFF; 

  
  --texte:      #111111; 
  --texte-doux: #555555; 
  


  --or-texte:      #7A5F22;
  --attente-texte: #6E5106; 
  --ok-texte:      #1E5E23; 

  
  --ok:           #2E7D32; 
  --alerte:       #C62828; 
  --attente:      #8A6508; 
  --danger:       #7E1B1B; 
  --danger-fonce: #641414; 
  --fond-ok:      #E6F1E7; 
  --fond-erreur:  #F9E7E7; 
  --etat-autre:   #7E5BA6; 

  
  --fond:           #F6F5F2; 
  --surface:        #FFFFFF; 
  --surface-basse:  #FAF9F6; 
  --surface-survol: #ECE7DA; 
  --bord:           #E4E1D9; 
  --bord-fort:      #CFCABC; 
  



  --bord-champ:     #827D6D;

  

  --gris-clair: #F3F3F3; 
  --gris-bord:  #DDDDDD; 
  --we-fond:    #ECECEC; 
  --we-texte:   #696969; 
  --we-ouvre:   #1F5E3C; 
  --cellule-edition: #FFF7E0; 
  --voile-a:    #E9E9E9; 
  --voile-b:    #F5F5F5;
  --bulle-moi:      #F3E7C8; 
  --bulle-moi-bord: #E4D3A6;

  



  --matiere-1: #2A5DA8; 
  --matiere-2: #106B73; 
  --matiere-3: #126B4F; 
  --matiere-4: #836515; 
  --matiere-5: #A05720; 
  --matiere-6: #8E2434; 
  --matiere-7: #6E2A5B; 
  --matiere-8: #4A3A8C; 
  --matiere-9: #4A5560; 
  



  --role-direction:  #2A5DA8; 
  --role-formateur:  #C8A95A; 
  --role-entreprise: #2F8A5A; 
  --role-eleve:      #7E5BA6; 
  --role-automatisations: #A05720; 

  


  --calque-1: var(--matiere-1); 
  --calque-2: var(--matiere-6); 
  --calque-3: var(--matiere-3); 
  --calque-4: var(--matiere-5); 
  --calque-5: var(--matiere-7); 
  --calque-6: var(--matiere-9); 

  

  --sur-nuit-texte:     rgba(255, 255, 255, 0.88); 
  --sur-nuit-bord:      rgba(255, 255, 255, 0.24); 
  --sur-nuit-bord-fort: rgba(255, 255, 255, 0.55); 
  --sur-nuit-fond:      rgba(255, 255, 255, 0.07); 
  --sur-nuit-survol:    rgba(255, 255, 255, 0.14);
  --voile:              rgba(28, 35, 64, 0.72);    
  --halo-focus:         rgba(200, 169, 90, 0.45);  
  --lisere-nuit:        rgba(28, 35, 64, 0.28);    
  --trame:              rgba(255, 255, 255, 0.5);  
  --trame-forte:        rgba(255, 255, 255, 0.85);
  --reflet-clair:       rgba(255, 255, 255, 0.1);  
  --reflet-sombre:      rgba(28, 35, 64, 0.12);    
  --poignee:            rgba(255, 255, 255, 0.35); 
  --poignee-survol:     rgba(255, 255, 255, 0.5);
  --selection-fond:     rgba(200, 169, 90, 0.35);  
  --examen-fond:        rgba(138, 101, 8, 0.08);   
  --confirme-fond:      rgba(46, 125, 50, 0.15);   
  --refus-fond:         rgba(198, 40, 40, 0.12);   

  
  --police-titres: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --police-texte:  'Calibri', 'Carlito', 'Segoe UI', system-ui, sans-serif;
  --police-code:   Consolas, 'Courier New', monospace;
  
  --demi-gras: 600;
  --gras:      700;
  
  --t-xs:   0.75rem;    
  --t-sm:   0.84375rem; 
  --t-base: 0.96875rem; 
  --t-md:   1.0625rem;  
  --t-lg:   1.125rem;   
  --t-xl:   1.75rem;    
  --t-2xl:  2rem;       
  --interligne:        1.5;
  --interligne-titres: 1.2;
  --capitales:         0.08em; 
  

  --casse-titres: none;

  
  --e-0: 2px;  
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 48px;

  
  --cible:        44px;   
  --cible-terrain: 56px;  
  --contenu-max:  1384px; 
  --gouttiere:    28px;   
  

  --marge-page:   max(var(--gouttiere), calc((100% - var(--contenu-max)) / 2 + var(--gouttiere)));
  --morsure:      var(--e-7); 
  --filet:        3px;    
  --barre-accent: 4px;    
  --logo-hauteur: 30px;   
  --pastille:     34px;   
  --champ-min:    180px;  
  --colonne-min:  240px;  
  --colonne-laterale: 340px; 
  --tuile-min:    180px;  
  --tiroir:       320px;  
  --etroit:       440px;  
  --moyen:        600px;  
  --lecture-max:  68ch;   
  


  --creneau:      22px;
  

  --colonne-nom:  180px;

  
  --r-xs: 4px;    
  --r-sm: 6px;    
  --r-md: 10px;   
  --r-lg: 14px;   
  --r-pill: 999px;

  
  --niv-1: 0 1px 2px rgba(28, 35, 64, 0.06);
  --niv-2: 0 4px 14px rgba(28, 35, 64, 0.08);
  --niv-3: 0 10px 28px rgba(28, 35, 64, 0.12);  
  --niv-4: 0 16px 48px rgba(28, 35, 64, 0.18);  
  --niv-5: 0 8px 28px rgba(28, 35, 64, 0.32);   

  
  --z-grille:    1;   
  --z-glisse:    10;  
  --z-bulle:     15;  
  --z-panneau:   20;  
  --z-collant:   50;  
  --z-menu:      60;  
  --z-voile:     65;  
  --z-tiroir:    70;  
  --z-messages:  80;  
  --z-evitement: 100; 
  


  --transition: 140ms ease;

  




  --picto-valide: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 12.2l2.4 2.4 4.6-5'/%3E%3C/svg%3E");
  --picto-alerte: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5l8.5 15h-17L12 4.5z'/%3E%3Cpath d='M12 10v4.5M12 17v.2'/%3E%3C/svg%3E");
  --picto-horloge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --picto-bas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}


@media (max-width: 768px) {
  :root {
    --gouttiere: var(--e-4);
    --morsure: var(--e-5);
  }
}

/* /css/base.css */






*, *::before, *::after { box-sizing: border-box; }






[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  

  scroll-padding-top: calc(var(--cible) + var(--e-7));
  



  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--police-texte);
  font-size: var(--t-base);
  line-height: var(--interligne);
  color: var(--texte);
  background: var(--fond);
  


  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


h1, h2, h3, h4 {
  margin: 0 0 var(--e-3);
  font-family: var(--police-titres);
  font-weight: var(--gras);
  line-height: var(--interligne-titres);
  color: var(--bleu-nuit);
  text-wrap: balance;
}




h1 {
  font-size: var(--t-xl);
  color: var(--or-texte);
  text-transform: var(--casse-titres);
}







h2 { font-size: var(--t-lg); }
h2::after,
.carte > h3:first-child::after,
.carte-publique h1::after {
  content: '';
  display: block;
  width: var(--e-7);
  height: var(--filet);
  margin-top: var(--e-2);
  border-radius: var(--r-pill);
  background: var(--or);
}


.texte-centre > h2::after,
.texte-centre > h3:first-child::after { margin-inline: auto; }

h3 { font-size: var(--t-md); }
h4 { font-size: var(--t-base); }

p { margin: 0 0 var(--e-3); }




sup, sub { font-size: var(--t-xs); line-height: 0; }


a { color: var(--or-texte); text-decoration: none; }
a:hover { text-decoration: underline; }







:focus-visible {
  outline: 2px solid var(--bleu-nuit);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--halo-focus);
  border-radius: var(--r-sm);
}




.lien-evitement {
  position: absolute;
  left: -9999px; 
  top: 0;
  z-index: var(--z-evitement);
  padding: var(--e-3) var(--e-5);
  border-radius: 0 0 var(--r-md) 0;
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
}
.lien-evitement:focus { left: 0; text-decoration: none; outline-color: var(--or); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}






code {
  padding: var(--e-0) var(--e-1);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  background: var(--surface-basse);
  color: var(--texte);
  font-family: var(--police-code);
  font-size: var(--t-sm);
  word-break: break-all;
}

kbd {
  display: inline-block;
  padding: var(--e-0) var(--e-2);
  border: 1px solid var(--bord-fort);
  border-bottom-width: 2px; 
  border-radius: var(--r-sm);
  background: var(--surface-basse);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-sm);
  white-space: nowrap;
}






:where(
  input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="color"],
            [type="hidden"], [type="image"], [type="submit"], [type="button"], [type="reset"]),
  select,
  textarea
) {
  min-height: var(--cible);
  max-width: 100%;
  margin: 0;
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--bord-champ);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  transition: border-color var(--transition);
}
:where(textarea) { line-height: var(--interligne); resize: vertical; }
:where(input, select, textarea):focus { border-color: var(--bleu-nuit); }
:where(input, select, textarea):disabled {
  background: var(--surface-basse);
  color: var(--texte-doux);
  cursor: not-allowed;
}
:where(input, select, textarea)[aria-invalid="true"] { border-color: var(--alerte); }


:where(input[type="checkbox"], input[type="radio"]) {
  width: calc(var(--e-4) + var(--e-0));
  height: calc(var(--e-4) + var(--e-0));
  margin: 0 var(--e-2) 0 0;
  vertical-align: middle;
  accent-color: var(--bleu-nuit);
}

:where(input[type="file"]) {
  max-width: 100%;
  font-family: var(--police-texte);
  font-size: var(--t-sm);
}
::file-selector-button {
  min-height: var(--cible);
  margin-right: var(--e-3);
  padding: 0 var(--e-4);
  border: 1px solid var(--bord-champ);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--bleu-nuit);
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-sm);
  cursor: pointer;
}
::file-selector-button:hover { border-color: var(--bleu-nuit); background: var(--surface-basse); }


:where(button) { font: inherit; cursor: pointer; }

fieldset {
  


  min-width: 0;
  margin: 0 0 var(--e-5);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
}

legend {
  padding: 0 var(--e-2);
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-sm);
  color: var(--bleu-nuit);
}





summary { cursor: pointer; }
:where(.contenu summary:not(.lien-discret)) { padding-block: calc((var(--cible) - 1.5em) / 2); }




.icone {
  display: block;
  flex: none;
  width: 1.25em;
  height: 1.25em;
}


.visuellement-cache {
  position: absolute;
  width: 1px; 
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.texte-doux { color: var(--texte-doux); font-size: var(--t-sm); }
.texte-centre { text-align: center; }
.texte-droite { text-align: right; }
.pleine-largeur { width: 100%; }
.marge-haut { margin-top: var(--e-4); }
.sans-marge { margin: 0; }
.sans-puces { list-style: none; padding-left: 0; }
.sans-puces > li { margin-bottom: var(--e-1); }



.form-inline { display: inline; }
.form-inline + .form-inline { margin-left: var(--e-2); }




label.form-inline:has(> input[type="checkbox"], > input[type="radio"]) {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
}

/* /css/coquille.css */









.barre-haute {
  position: sticky;
  top: 0;
  z-index: var(--z-collant);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--marge-page);
  background: var(--bleu-nuit);
  color: var(--blanc);
}



.barre-haute :focus-visible,
.sous-navigation :focus-visible { outline-color: var(--or); }
.rubrique-ecrans :focus-visible,
.compte-panneau :focus-visible,
.cloche-panneau :focus-visible { outline-color: var(--bleu-nuit); }



.logo-plaque {
  display: flex;
  align-items: center;
  flex: none;
  height: var(--cible);
  margin: var(--e-3) var(--e-2) var(--e-3) 0;
  padding: 0 var(--e-3);
  border-radius: var(--r-md);
  background: var(--blanc);
}
.logo-plaque .logo {
  display: block;
  width: auto;
  height: var(--logo-hauteur);
}











.navigation {
  display: flex;
  flex-wrap: wrap;
  align-self: flex-end;
  flex: 0 1 auto;
  min-width: 0;
}






.navigation::after { content: ''; flex: none; width: 2px; }

.rubrique, .compte, .cloche-menu { position: relative; }

.rubrique { flex: none; }

.rubrique > summary, .compte > summary {
  min-height: var(--cible);
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-sm);
  color: var(--sur-nuit-texte);
  white-space: nowrap;
}
.rubrique > summary::-webkit-details-marker,
.compte > summary::-webkit-details-marker { display: none; }

.rubrique > summary {
  display: block;
  
  line-height: var(--cible);
  


  padding: 0 clamp(var(--e-0), 2vw - 19px, var(--e-4));
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.rubrique > summary .icone { display: none; }
.rubrique > summary:hover, .rubrique[open] > summary { background: var(--sur-nuit-survol); color: var(--blanc); }
.rubrique.courante > summary { background: var(--bleu-2); color: var(--or); font-weight: var(--gras); }

.rubrique-ecrans, .compte-panneau {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-menu);
  min-width: var(--colonne-min);
  padding: var(--e-2);
  border: 1px solid var(--bord);
  border-radius: 0 var(--r-md) var(--r-md) var(--r-md);
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--niv-4);
}


.rubrique.panneau-a-droite > .rubrique-ecrans {
  left: auto;
  right: 0;
  border-radius: var(--r-md) 0 var(--r-md) var(--r-md);
}
.rubrique-ecrans a, .compte-panneau a {
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border-radius: var(--r-sm);
  color: var(--bleu-nuit);
  white-space: nowrap;
}
.rubrique-ecrans a:hover, .compte-panneau a:hover { background: var(--surface-survol); text-decoration: none; }



.rubrique-ecrans a.actif, .compte-panneau a.actif {
  font-weight: var(--gras);
  box-shadow: inset var(--filet) 0 0 var(--or-texte);
}








.barre-outils { display: contents; }
.palette-ouvrir, .barre-outils > .cloche, .cloche-menu, .guide-acces, .compte { margin-block: var(--e-3); }

.palette-ouvrir, .palette-ouvrir[hidden] + .cloche, .palette-ouvrir[hidden] + .cloche-menu { margin-left: auto; }

.palette-ouvrir, .nav-bascule {
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--sur-nuit-bord);
  border-radius: var(--r-md);
  background: var(--sur-nuit-fond);
  color: var(--sur-nuit-texte);
  font-family: var(--police-texte);
  font-size: var(--t-base);
  cursor: pointer;
}
.palette-ouvrir:hover, .nav-bascule:hover { background: var(--sur-nuit-survol); color: var(--blanc); }


.nav-bascule { display: none; }








.palette-ouvrir {
  display: flex;
  flex: 0 9999 auto;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  height: var(--cible);
  min-width: var(--cible);
  overflow: hidden;
}


.palette-ouvrir .icone { height: calc(var(--cible) - 2px); }
.palette-ouvrir kbd {
  border: none;
  background: var(--sur-nuit-survol);
  color: inherit;
  font-family: var(--police-titres);
  font-size: var(--t-xs);
  font-weight: var(--demi-gras);
}


@media (hover: none) {
  .palette-ouvrir kbd { display: none; }
}



.cloche, .guide-acces {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--cible);
  height: var(--cible);
  border: 1px solid var(--sur-nuit-bord);
  border-radius: var(--r-md);
  background: var(--sur-nuit-fond);
  color: var(--blanc);
}
.cloche:hover, .guide-acces:hover { background: var(--sur-nuit-survol); text-decoration: none; }
.cloche-badge {
  position: absolute;
  top: calc(var(--e-1) * -1);
  right: calc(var(--e-1) * -1);
  min-width: var(--e-5);
  height: var(--e-5);
  padding: 0 var(--e-1);
  border-radius: var(--r-pill);
  background: var(--or);
  color: var(--bleu-nuit);
  font-family: var(--police-titres);
  font-size: var(--t-xs);
  font-weight: var(--gras);
  line-height: var(--e-5);
  text-align: center;
}


.cloche-menu { flex: none; }
.cloche-menu > .cloche { list-style: none; cursor: pointer; }
.cloche-menu > .cloche::-webkit-details-marker { display: none; }
.cloche-menu[open] > .cloche { background: var(--sur-nuit-survol); }
.cloche-panneau {
  position: absolute;
  top: calc(100% + var(--e-2));
  right: 0;
  z-index: var(--z-menu);
  width: min(var(--etroit), calc(100vw - 2 * var(--gouttiere)));
  

  max-height: 70vh;
  overflow-y: auto;
  padding: var(--e-2);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--niv-4);
}
.cloche-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 var(--e-3);
  padding: var(--e-1) var(--e-3) var(--e-2);
  border-bottom: 1px solid var(--bord);
}
.cloche-tete p { margin: 0; }
.cloche-titre { font-family: var(--police-titres); font-weight: var(--gras); color: var(--bleu-nuit); }
.cloche-compte, .cloche-date { font-size: var(--t-sm); color: var(--texte-doux); }
.cloche-familles, .cloche-liste { list-style: none; margin: 0; padding: 0; }
.cloche-familles { padding: var(--e-1) 0; border-bottom: 1px solid var(--bord); }
.cloche-familles a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border-radius: var(--r-sm);
  color: var(--bleu-nuit);
}
.cloche-familles a:hover { background: var(--surface-survol); text-decoration: none; }
.cloche-nombre { font-weight: var(--gras); }
.cloche-notif { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--bord); }
.cloche-notif p { margin: 0; }
.cloche-date { margin-top: var(--e-1); }
.cloche-actions, .cloche-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
}
.cloche-actions { margin-top: var(--e-1); }
.cloche-actions form, .cloche-pied form { margin: 0; }
.cloche-pied { justify-content: space-between; padding: var(--e-1) var(--e-3) 0; }
.cloche-pied > a, .cloche-vide a { display: inline-flex; align-items: center; min-height: var(--cible); }
.cloche-vide, .cloche-reste { margin: 0; padding: var(--e-3); color: var(--texte-doux); }

.compte { flex: none; }
.compte > summary {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0 var(--e-2) 0 var(--e-1);
  border: 1px solid var(--sur-nuit-bord);
  border-radius: var(--r-pill);
  background: var(--sur-nuit-fond);
}
.compte > summary:hover, .compte[open] > summary { background: var(--sur-nuit-survol); color: var(--blanc); }
.compte > summary .icone { width: 1em; height: 1em; }
.compte-pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pastille);
  height: var(--pastille);
  border-radius: 50%; 
  background: var(--or);
  color: var(--bleu-nuit);
  font-weight: var(--gras);
}
.compte-panneau {
  top: calc(100% + var(--e-2));
  left: auto;
  right: 0;
  border-radius: var(--r-md);
}
.compte-panneau p { margin: 0; padding: 0 var(--e-3); white-space: nowrap; }
.compte-nom { padding-top: var(--e-1); font-weight: var(--gras); color: var(--bleu-nuit); }
.compte-panneau .compte-role { margin-bottom: var(--e-2); font-size: var(--t-sm); color: var(--texte-doux); }
.compte-panneau form { margin: var(--e-2) 0 0; padding: var(--e-2) var(--e-1) 0; border-top: 1px solid var(--bord); }
.compte-panneau .bouton-secondaire { width: 100%; }


.sous-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-0);
  padding: 0 var(--marge-page);
  background: var(--bleu-2);
}
.sous-navigation a {
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 var(--e-4);
  color: var(--sur-nuit-texte);
  white-space: nowrap;
}
.sous-navigation a:hover { background: var(--sur-nuit-fond); color: var(--blanc); text-decoration: none; }

.sous-navigation a.actif {
  color: var(--blanc);
  font-weight: var(--gras);
  box-shadow: inset 0 calc(var(--filet) * -1) 0 var(--or);
}




.palette {
  width: min(var(--moyen), calc(100vw - 2 * var(--e-4)));
  margin-top: 12vh; 
  padding: 0;
  border: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--niv-4);
}
.palette::backdrop { background: var(--voile); }
.palette-cadre { display: flex; flex-direction: column; max-height: 70vh; }
.palette-saisie {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bord);
  color: var(--texte-doux);
}
.palette-saisie input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--t-md);
}
.palette-resultats { list-style: none; margin: 0; padding: var(--e-2); overflow-y: auto; }
.palette-resultats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border-radius: var(--r-sm);
  color: var(--bleu-nuit);
}
.palette-resultats a:hover { text-decoration: none; }
.palette-rubrique { font-size: var(--t-sm); color: var(--texte-doux); }
.palette-resultats [aria-selected="true"] a { background: var(--bleu-nuit); color: var(--blanc); }
.palette-resultats [aria-selected="true"] .palette-rubrique { color: var(--or); }
.palette-vide { margin: 0; padding: var(--e-5) var(--e-4); color: var(--texte-doux); }


.palette-groupe { list-style: none; }
.palette-groupe + .palette-groupe { margin-top: var(--e-2); }
.palette-groupe-titre, .palette-plus { display: block; padding: var(--e-2) var(--e-3) var(--e-1); }
.palette-groupe-titre {
  font-family: var(--police-titres);
  font-size: var(--t-xs);
  font-weight: var(--demi-gras);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  color: var(--texte-doux);
}
.palette-plus { font-size: var(--t-xs); color: var(--texte-doux); }
.palette-groupe-lignes { list-style: none; margin: 0; padding: 0; }
.palette-groupe-lignes a { padding-block: var(--e-1); }

.palette-objet { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--e-2); min-width: 0; }
.palette-nom { font-weight: var(--gras); }
.palette-detail { font-size: var(--t-sm); color: var(--texte-doux); }
.palette-resultats [aria-selected="true"] .palette-detail { color: var(--or); }
.palette-etiquette { flex: none; }
.palette-message { margin: 0; padding: var(--e-3) var(--e-4); border-top: 1px solid var(--bord); color: var(--texte-doux); }


.contenu {
  width: 100%;
  max-width: var(--contenu-max);
  margin: 0 auto;
  padding: var(--e-6) var(--gouttiere) var(--e-8);
}


.page-secours { max-width: calc(var(--moyen) + 2 * var(--gouttiere)); }




.entete-page {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-4);
}
.entete-page > h1, .entete-page > h2, .entete-page > h3 { margin: 0; }
.entete-page .actions { margin-top: 0; }



.entete-page .actions > .champ { margin-bottom: 0; }


.entete-page .actions:has(> details[open]) { align-items: flex-start; }











.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) {
  margin: calc(var(--e-6) * -1) 0 var(--e-5);
  padding: var(--e-5) 0;
  background: var(--bleu-nuit);
  border-image: conic-gradient(var(--bleu-nuit) 0 0) fill 0 / 0 / 0 100vmax 1px;
  color: var(--blanc);
}

.contenu > .flash:first-child + .entete-page { margin-top: 0; }

.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) > h1 {
  flex: 1 1 var(--colonne-min);
  min-width: 0;
  font-size: var(--t-2xl);
  color: var(--or);
}

.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) > p {
  order: 1;
  flex: 1 1 100%;
  max-width: var(--lecture-max);
  margin: 0;
  color: var(--blanc);
  font-size: var(--t-md);
}



.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) a:not([class]),
.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) .lien-mention { color: var(--or); }
.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) :focus-visible { outline-color: var(--or); }

.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) .bouton-secondaire {
  border-color: var(--sur-nuit-bord-fort);
  background: transparent;
  color: var(--blanc);
}
.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) .bouton-secondaire:hover {
  border-color: var(--blanc);
  background: var(--sur-nuit-survol);
}
.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) .bouton-discret { color: var(--or); }



.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) + p {
  margin: calc((var(--e-5) + var(--e-3)) * -1) 0 var(--e-5);
  padding-bottom: var(--e-5);
  background: var(--bleu-nuit);
  border-image: conic-gradient(var(--bleu-nuit) 0 0) fill 0 / 0 / 0 100vmax 1px;
  color: var(--blanc);
  font-size: var(--t-md);
}

.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) + p a { color: var(--or); }



.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page):has(+ :is(.carte, .encadre, .grille-cartes, .conteneur-tableau)) {
  margin-bottom: calc(var(--morsure) * -1);
  padding-bottom: calc(var(--e-5) + var(--morsure));
}
.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) + :is(.carte, .encadre, .grille-cartes, .conteneur-tableau) {
  margin-top: 0;
}



.contenu > .flash:first-child {
  margin: calc(var(--e-6) * -1) 0 0;
  border: 0;
  border-radius: 0;
  border-image: conic-gradient(var(--flash-fond) 0 0) fill 0 / 0 / 0 100vmax;
}






.affichage-formations {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
}
.affichage-rappel { margin: 0; color: var(--texte-doux); font-size: var(--t-sm); }
.affichage-filtre .affichage-rappel { color: var(--attente-texte); }
.affichage-formations .bouton-secondaire[aria-pressed="true"] { border-color: var(--bleu-nuit); background: var(--bleu-nuit); color: var(--blanc); }


.bandeau-impersonation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) var(--marge-page);
  background: var(--attente);
  color: var(--blanc);
  font-size: var(--t-sm);
}
.bandeau-impersonation form { margin-left: auto; }

.bandeau-impersonation :focus-visible { outline-color: var(--blanc); }






.bandeau-demo {
  position: sticky;
  top: 0;
  z-index: var(--z-collant);
  padding: var(--e-1) var(--e-4);
  background: var(--or);
  color: var(--bleu-nuit);
  text-align: center;
  font-family: var(--police-titres);
  font-size: var(--t-sm);
  font-weight: var(--gras);
  line-height: 1.4;
}



.tete-demo { position: sticky; top: 0; z-index: var(--z-collant); }




.instance-demo { display: flex; flex-direction: column; }
.instance-demo > .page-publique,
.instance-demo > .contenu { flex: 1 0 auto; min-height: 0; }








.carte-anniversaire {
  width: min(var(--etroit), calc(100vw - 2 * var(--e-5)));
  padding: var(--e-7) var(--e-6);
  border: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--texte);
  text-align: center;
  box-shadow: var(--niv-4);
}
.carte-anniversaire::backdrop { background: var(--voile); }
.carte-anniversaire h2 { margin: var(--e-2) 0 var(--e-3); }
.carte-anniversaire h2::after { margin-inline: auto; }
.carte-anniversaire p { margin: 0 0 var(--e-5); color: var(--texte-doux); }
.anniversaire-dessin { display: flex; justify-content: center; font-size: var(--t-2xl); color: var(--or-texte); }
.anniversaire-dessin .icone { width: 1.5em; height: 1.5em; }





.pied-legal {
  margin-top: var(--e-8);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bord);
  color: var(--texte-doux);
  font-size: var(--t-xs);
  line-height: 1.7;
}
.pied-legal p { margin: 0; }
.pied-legal .pied-raison {
  margin-bottom: var(--e-1);
  font-family: var(--police-titres);
  font-weight: var(--gras);
  color: var(--bleu-nuit);
  letter-spacing: 0.04em;
}





.page-publique {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-6);
  min-height: 100vh;
  padding: var(--e-7) var(--e-4);
  
  background: linear-gradient(to bottom, var(--bleu-nuit) 0, var(--bleu-nuit) 44%, var(--fond) 44%);
}
.carte-publique {
  width: 100%;
  max-width: var(--etroit);
  padding: var(--e-7);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--niv-4);
}







.page-publique-large { justify-content: flex-start; }
.page-publique-large > .carte-publique { max-width: var(--contenu-max); }
.carte-publique h1 { font-size: var(--t-lg); color: var(--bleu-nuit); }



.entete-connexion {
  margin-bottom: var(--e-6);
  padding-bottom: var(--e-5);
  border-bottom: 1px solid var(--bord);
  text-align: center;
}

.entete-connexion .logo {
  display: block;
  width: 100%;
  max-width: var(--colonne-min);
  height: auto;
  margin: 0 auto;
}


.accroche-publique {
  margin: var(--e-3) 0 0;
  font-size: var(--t-xs);
  color: var(--texte-doux);
}
.page-publique .pied-legal {
  max-width: var(--moyen);
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  text-align: center;
}

.qr-2fa {
  display: block;
  margin: var(--e-4) auto;
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
}









@media (max-width: 1100px) {
  

  .barre-haute {
    flex-wrap: wrap;
    gap: 0 var(--e-2);
  }
  .nav-bascule { display: inline-flex; }
  .nav-bascule[aria-expanded="true"] { border-color: var(--or); background: var(--or); color: var(--bleu-nuit); }
  
  .palette-ouvrir { flex: none; width: var(--cible); padding: 0; justify-content: center; }

  .navigation {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-tiroir);
    

    align-self: stretch;
    width: min(var(--tiroir), 86vw);
    flex-direction: column;
    

    flex-wrap: nowrap;
    gap: var(--e-1);
    padding: var(--e-4) var(--e-3);
    overflow-y: auto;
    background: var(--bleu-nuit);
    box-shadow: var(--niv-4);
  }
  .navigation.nav-ouverte { display: flex; }
  .navigation::after { display: none; }
  .nav-voile {
    position: fixed;
    inset: 0;
    z-index: var(--z-voile);
    background: var(--voile);
  }

  

  .rubrique > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e-2);
    padding: 0 var(--e-3);
    border-radius: var(--r-md);
    line-height: var(--interligne-titres);
  }
  .rubrique > summary .icone { display: block; width: 1em; height: 1em; transition: transform var(--transition); }
  .rubrique[open] > summary .icone { transform: rotate(180deg); }
  .rubrique-ecrans,
  .rubrique.panneau-a-droite > .rubrique-ecrans {
    position: static;
    min-width: 0;
    padding: var(--e-1) 0 var(--e-2) var(--e-3);
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .rubrique-ecrans a { color: var(--sur-nuit-texte); white-space: normal; }
  .rubrique-ecrans a:hover { background: var(--sur-nuit-survol); }
  .rubrique-ecrans a.actif { color: var(--or); box-shadow: inset var(--filet) 0 0 var(--or); }
  .rubrique-ecrans :focus-visible { outline-color: var(--or); }

  


  .sous-navigation {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .sous-navigation::-webkit-scrollbar { display: none; }
}


@media (max-width: 768px) {
  .contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) > h1 { font-size: var(--t-xl); }
  .carte-publique { padding: var(--e-6) var(--e-5); }
  


  .nav-bascule { padding: 0; width: var(--cible); justify-content: center; }
  .nav-bascule span {
    position: absolute;
    width: 1px; 
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .logo-plaque { padding: 0 var(--e-2); }
  






  .barre-haute:has(.guide-acces) { column-gap: var(--e-1); }
  .barre-haute:has(.guide-acces) .logo-plaque { margin-right: var(--e-1); padding: 0 var(--e-1); }
  .barre-haute:has(.guide-acces) .logo { height: min(var(--logo-hauteur), 6.4vw); }
  .compte > summary { padding: 0 var(--e-1); }
  .compte > summary .icone { display: none; }
  


  .cloche-panneau {
    position: fixed;
    top: auto;
    left: var(--gouttiere);
    right: var(--gouttiere);
    width: auto;
    margin-top: var(--e-2);
  }
  


  .palette {
    width: calc(100vw - 2 * var(--gouttiere));
    margin-top: var(--gouttiere);
  }
  .palette-cadre {
    max-height: calc(100vh - 2 * var(--gouttiere));
    max-height: calc(100dvh - 2 * var(--gouttiere));
  }
  
  .palette-objet { flex-direction: column; align-items: flex-start; }
}



@media (scripting: none) {
  .nav-bascule, .palette-ouvrir { display: none; }
  .barre-outils > .cloche, .cloche-menu { margin-left: auto; }
}
@media (scripting: none) and (max-width: 1100px) {
  


  .barre-haute { position: static; }
  


  .tete-demo { display: contents; }
  .navigation {
    display: flex;
    position: static;
    flex-basis: 100%;
    width: auto;
    padding: 0 0 var(--e-2);
    overflow-y: visible;
    box-shadow: none;
  }
}

/* /css/composants.css */








.carte {
  --carte-marge: var(--e-5);
  margin-bottom: var(--e-5);
  padding: var(--carte-marge);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--niv-3);
}


.carte > :first-child { margin-top: 0; }
.carte > :last-child,
.carte > form:last-child > :last-child { margin-bottom: 0; }




.carte > :not([type="hidden"]) + h2,
.carte > form > :not([type="hidden"]) + h2 { margin-top: var(--e-5); }

.carte .carte { border: 1px solid var(--bord); box-shadow: none; }


a.carte { display: block; color: var(--texte); transition: box-shadow var(--transition); }
a.carte:hover { text-decoration: none; box-shadow: var(--niv-4); }


details.carte > summary {
  

  margin-block: calc(var(--e-3) * -1);
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  color: var(--bleu-nuit);
}
details.carte[open] > summary { margin-bottom: 0; }





.encadre {
  margin: var(--e-4) 0;
  padding: var(--e-3) var(--e-4);
  border-left: var(--barre-accent) solid var(--or);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
  box-shadow: var(--niv-2);
}
.encadre > :last-child { margin-bottom: 0; }

.carte .encadre { background: var(--surface-basse); box-shadow: none; }
.encadre-accent { border-left: var(--barre-accent) solid var(--or); }


.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--tuile-min), 1fr));
  gap: var(--e-4);
  align-items: stretch;
  margin-bottom: var(--e-5);
}
.grille-cartes > .carte { margin-bottom: 0; }



.grille-cartes > * { min-width: 0; }







.grille-accueil {
  --tuile-min: 280px;
  grid-template-columns: repeat(auto-fit, minmax(max(var(--tuile-min), 30%), 1fr));
}
.grille-accueil > .carte { display: flex; flex-direction: column; }
.grille-accueil > .carte > :last-child { margin-top: auto; align-self: flex-start; }





.ligne { display: flex; align-items: flex-start; gap: var(--e-5); }
.ligne-corps { flex: 1 1 auto; min-width: 0; }
.ligne-fin { flex: 0 0 auto; }




.carte-indicateur {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-5);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--niv-3);
}

.carte .carte-indicateur { border: 1px solid var(--bord); box-shadow: none; }



a.carte-indicateur { display: flex; }


.carte-indicateur .libelle {
  order: -1;
  color: var(--texte-doux);
  font-family: var(--police-titres);
  font-size: var(--t-xs);
  font-weight: var(--demi-gras);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
}

.carte-indicateur .valeur, .accueil-nombre {
  font-family: var(--police-titres);
  font-size: var(--t-xl);
  font-weight: var(--gras);
  line-height: 1.1;
  color: var(--bleu-nuit);
  font-variant-numeric: tabular-nums;
  

  white-space: nowrap;
}


.carte-indicateur .valeur, .carte-indicateur .libelle { overflow-wrap: normal; }


.carte-indicateur .badge { align-self: flex-start; max-width: 100%; white-space: normal; }



.carte-indicateur.est-ok::before,
.carte-indicateur.est-alerte::before,
.carte-indicateur.est-attente::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--barre-accent);
}
.carte-indicateur.est-ok::before { background: var(--ok); }
.carte-indicateur.est-alerte::before { background: var(--alerte); }
.carte-indicateur.est-attente::before { background: var(--attente); }
.carte-indicateur.est-ok .valeur { color: var(--ok); }
.carte-indicateur.est-alerte .valeur { color: var(--alerte); }
.carte-indicateur.est-attente .valeur { color: var(--attente-texte); }

.carte-indicateur.est-doux .valeur { color: var(--texte-doux); font-weight: var(--demi-gras); }




.conteneur-tableau {
  margin-bottom: var(--e-5);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--niv-3);
}

.carte .conteneur-tableau {
  margin-bottom: var(--e-4);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  box-shadow: none;
}





.carte > .conteneur-tableau:only-child {
  margin: calc(var(--carte-marge) * -1);
  border: 0;
  border-radius: var(--r-lg);
}





.conteneur-tableau:has(.evt-details[open]) { overflow: visible; }

.tableau-premium {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--t-base);
}
.tableau-premium th {
  padding: var(--e-3) var(--e-4);
  background: var(--bleu-nuit);
  color: var(--or);
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-xs);
  letter-spacing: var(--capitales);
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}



.tableau-premium th .texte-doux,
.tableau-premium tr.ligne-total .texte-doux { color: var(--sur-nuit-texte); }


.tableau-premium th .texte-doux { font-size: inherit; }



.tableau-premium tbody th { white-space: normal; }

.tableau-premium th.texte-droite { text-align: right; }
.tableau-premium th.texte-centre { text-align: center; }



.tableau-premium tfoot th.texte-droite { text-transform: none; letter-spacing: normal; }
.tableau-premium td {
  padding: var(--e-3) var(--e-4);
  vertical-align: middle;
}



.tableau-premium td > textarea {
  width: 100%;
  min-width: 16rem;
  min-height: calc(var(--cible) * 2);
}



.tableau-premium td.texte-droite { font-variant-numeric: tabular-nums; white-space: nowrap; }


.tableau-premium td.geste { white-space: nowrap; }






.tableau-dense th,
.tableau-dense td { padding-left: var(--e-2); padding-right: var(--e-2); }
.tableau-dense td .badge { white-space: normal; }
.tableau-dense thead th { letter-spacing: 0.04em; }
.tableau-premium tbody tr:nth-child(even) { background: var(--surface-basse); }
.tableau-premium tbody tr:hover { background: var(--surface-survol); }

.tableau-premium tfoot tr.ligne-total td { background: var(--bleu-2); color: var(--blanc); font-weight: var(--gras); }




.tableau-premium .liste-tri {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cible);
  margin-block: calc(var(--e-3) * -1); 
  color: inherit;
  text-decoration: none;
}
.tableau-premium .liste-tri:hover { color: var(--blanc); text-decoration: underline; }
.tableau-premium .liste-tri .icone { width: 1.1em; height: 1.1em; }



.liste-outils {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--e-3) var(--e-5);
  margin-bottom: var(--e-3);
}
.liste-recherche { display: flex; flex: 1 1 18rem; gap: var(--e-2); max-width: var(--moyen); }
.liste-recherche input { flex: 1 1 auto; min-width: 0; }
.liste-recherche .bouton-secondaire { padding: 0 var(--e-3); }
.liste-filtres { flex: 1 1 100%; }
.liste-filtres > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding-block: 0;
  list-style: none;
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-sm);
  color: var(--bleu-nuit);
}


.liste-filtres > summary::-webkit-details-marker { display: none; }
.liste-filtres > summary .icone { width: 1.1em; height: 1.1em; margin-left: var(--e-1); }
.liste-filtres[open] > summary .icone { transform: rotate(180deg); }
.liste-filtres[open] > summary { margin-bottom: var(--e-2); }





.liste-choix-tri, .liste-tri-seul { display: none; }


.liste-actifs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-3);
  padding: 0;
  list-style: none;
}
.liste-actif {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--bord-champ);
  border-radius: var(--r-md);
  background: var(--surface-basse);
  color: var(--bleu-nuit);
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  text-decoration: none;
}
.liste-actif:hover { border-color: var(--bleu-nuit); text-decoration: none; }
.liste-resume { margin: 0 0 var(--e-2); }


.liste-bilan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-4);
  margin: 0 0 var(--e-2);
}
.liste-bilan .liste-resume { margin: 0; }
.liste-imprimer { display: inline-flex; align-items: center; min-height: var(--cible); }





.entete-impression, .resume-impression, .pied-impression { display: none; }


.liste-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e-4);
  margin-top: var(--e-3);
  font-size: var(--t-sm);
}
.liste-pied a { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--cible); font-weight: var(--demi-gras); }




.bouton, .bouton-secondaire, .bouton-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible);
  padding: 0 var(--e-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-sm);
  line-height: var(--interligne-titres);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.bouton { padding: 0 var(--e-5); background: var(--or); color: var(--bleu-nuit); font-weight: var(--gras); }

.bouton:hover { background: var(--or-fonce); color: var(--bleu-nuit); text-decoration: none; }

.bouton-secondaire { border-color: var(--bord-champ); background: var(--surface); color: var(--bleu-nuit); }
.bouton-secondaire:hover { border-color: var(--bleu-nuit); background: var(--surface-basse); text-decoration: none; }

.bouton-danger { background: var(--danger); color: var(--blanc); }
.bouton-danger:hover { background: var(--danger-fonce); text-decoration: none; }






.bouton-discret {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  margin-block: calc(var(--e-2) * -1);
  padding: 0 var(--e-1);
  border: none;
  background: none;
  color: var(--or-texte);
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  text-decoration: underline;
  vertical-align: middle;
  cursor: pointer;
}
.bouton-discret:hover { color: var(--bleu-nuit); }


.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-4);
}


.tableau-premium td > .actions { margin-top: 0; }



.actions > .form-inline + .form-inline { margin-left: 0; }




.champ { margin-bottom: var(--e-4); }

.champ label, .intitule-champ, .fiche-terme {
  display: block;
  margin-bottom: var(--e-1);
  font-weight: var(--demi-gras);
  font-size: var(--t-sm);
  color: var(--bleu-nuit);
}



.champ label:has(> input, > select, > textarea) { margin-bottom: 0; }

.champ input, .champ select, .champ textarea { width: 100%; }

.champ input[type="checkbox"], .champ input[type="radio"] { width: calc(var(--e-4) + var(--e-0)); }



.champ input[type="color"] {
  min-height: var(--cible);
  padding: var(--e-1);
  border: 1px solid var(--bord-champ);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}

.champ .aide { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--texte-doux); }




.champ .erreur-champ {
  margin: var(--e-1) 0 0;
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  color: var(--alerte);
}

.grille-champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--colonne-min), 1fr));
  gap: 0 var(--e-5);
}




.grille-champs > .champ:has(> button:only-child) { align-self: end; }



.champ-mini { width: 4.5rem; }



.champ-taux, .champ-note { width: 6rem; }
.champ-court { width: 8.5rem; }



.champ-large { width: 100%; min-width: 14rem; }



.tableau-premium td > form:has(> .champ-large) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
}
.tableau-premium td > form > .champ-large { flex: 1 1 14rem; width: auto; }





.fiche-donnees { margin: 0; }
.fiche-valeur { margin: 0 0 var(--e-4); }


.barre-filtres {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-3);
}



.barre-filtres .champ { min-width: 0; max-width: 100%; margin-bottom: 0; }
.barre-filtres select, .barre-filtres input { width: auto; min-width: min(var(--champ-min), 100%); max-width: 100%; }



.pad-signature {
  display: block;
  width: 100%;
  max-width: var(--moyen);
  height: 180px; 
  border: 1px solid var(--bord-champ);
  border-radius: var(--r-md);
  background: var(--blanc);
  touch-action: none;
}




.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: calc(var(--e-6) + var(--e-1));
  padding: 0 var(--e-2);
  border-radius: var(--r-sm);
  color: var(--blanc);
  font-family: var(--police-titres);
  font-size: var(--t-xs);
  font-weight: var(--demi-gras);
  white-space: nowrap;
  vertical-align: middle;
}
.badge-ok { background: var(--ok); }
.badge-alerte { background: var(--alerte); }
.badge-attente { background: var(--attente); }
.badge-neutre { background: var(--bleu-2); }


.badge-role { background: var(--bleu-nuit); color: var(--or); }












a.badge,
.lien-mention,
.tableau-premium td > a:not([class]),
.tableau-premium td > .actions > a:not([class]),
.carte-publique .texte-centre > a { position: relative; }
a.badge::after,
.lien-mention::after,
.tableau-premium td > a:not([class])::after,
.tableau-premium td > .actions > a:not([class])::after,
.carte-publique .texte-centre > a::after {
  content: '';
  position: absolute;
  inset: min(0px, calc((100% - var(--cible)) / 2)) 0;
}






.lien-mention { text-decoration: underline; }



a.badge { text-decoration: underline; }



@supports (mask-image: none) or (-webkit-mask-image: none) {
  .badge-ok::before, .badge-alerte::before, .badge-attente::before,
  .flash-succes::before, .flash-erreur::before {
    content: '';
    flex: none;
    width: 1.25em;
    height: 1.25em;
    background: currentColor;
    -webkit-mask: var(--picto) center / contain no-repeat;
    mask: var(--picto) center / contain no-repeat;
  }
  .badge-ok, .flash-succes { --picto: var(--picto-valide); }
  .badge-alerte, .flash-erreur { --picto: var(--picto-alerte); }
  .badge-attente { --picto: var(--picto-horloge); }
}




.flash {
  --flash-fond: var(--surface-basse);
  position: relative;
  margin-bottom: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-left: var(--barre-accent) solid var(--or);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--flash-fond);
  color: var(--texte);
}
.flash-succes { --flash-fond: var(--fond-ok); border-color: var(--ok); color: var(--ok-texte); }
.flash-erreur { --flash-fond: var(--fond-erreur); border-color: var(--alerte); color: var(--alerte); }
.flash-info { border-color: var(--or); }
@supports (mask-image: none) or (-webkit-mask-image: none) {
  

  .flash-succes, .flash-erreur { padding-left: calc(var(--e-4) + 1.25em + var(--e-2)); }
  .flash-succes::before, .flash-erreur::before {
    position: absolute;
    left: var(--e-4);
    top: calc(var(--e-3) + 0.125em);
  }
}


.onglets {
  display: flex;
  gap: var(--e-1);
  margin-bottom: var(--e-5);
  border-bottom: 1px solid var(--bord);
}
.onglet {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  margin-bottom: -1px; 
  padding: 0 var(--e-5);
  border-bottom: var(--filet) solid transparent;
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-sm);
  color: var(--texte-doux);
  transition: color var(--transition), border-color var(--transition);
}
.onglet:hover { color: var(--bleu-nuit); text-decoration: none; }


.onglet-actif { color: var(--bleu-nuit); border-bottom-color: var(--or-texte); }
.onglet-compte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--e-6);
  height: var(--e-6);
  padding: 0 var(--e-2);
  border-radius: var(--r-pill);
  background: var(--or);
  color: var(--bleu-nuit);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.onglet:not(.onglet-actif) .onglet-compte { background: var(--bord); color: var(--texte-doux); }







.onglets-fiche {
  flex-wrap: nowrap;
  



  margin: calc(var(--e-3) * -1) 0 var(--e-4);
  overflow-x: auto;
  scrollbar-width: none;
}
.onglets-fiche::-webkit-scrollbar { display: none; }
.onglets-fiche .onglet { flex: none; white-space: nowrap; }



.onglets-fiche .onglet:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 5px var(--halo-focus); }




.contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) > .fiche-sous-titre { max-width: none; }


.onglet-court { display: none; }





.fiche-suite {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  margin-bottom: var(--e-5);
}
.fiche-suite > p { margin: 0; }
.fiche-etats, .voir-aussi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-6) var(--e-4);
}
.fiche-etats { column-gap: var(--e-2); }


.lien-discret { color: var(--or-texte); font-size: var(--t-sm); text-decoration: underline; }


.lien-bascule {
  display: inline-block;
  margin-top: var(--e-1);
  color: var(--texte-doux);
  font-size: var(--t-sm);
  text-decoration: underline dotted;
}
.lien-bascule:hover, .lien-bascule:focus-visible { color: var(--or-texte); text-decoration: underline; }


.photo-profil {
  width: 84px; 
  height: 84px;
  border: 2px solid var(--or);
  border-radius: 50%; 
  background: var(--surface-basse);
  object-fit: cover;
}

.photo-profil.initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--police-titres);
  font-weight: var(--gras);
  font-size: var(--t-xl);
  color: var(--bleu-nuit);
}


.liste-fichiers { list-style: none; margin: var(--e-2) 0 0; padding: 0; }
.liste-fichiers li { padding: var(--e-1) 0; border-bottom: 1px dashed var(--bord-fort); font-size: var(--t-sm); }










.confirmation {
  width: min(var(--etroit), calc(100vw - 2 * var(--e-4)));
  padding: var(--e-6);
  border: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--niv-4);
}
.confirmation::backdrop { background: var(--voile); }
.confirmation > h2 { margin-bottom: var(--e-4); }

.confirmation > p { margin-bottom: var(--e-5); white-space: pre-line; }
.confirmation > .actions { justify-content: flex-end; margin-top: 0; }




form[data-envoi-en-cours] [type="submit"][aria-disabled="true"] { opacity: 0.6; cursor: progress; }



.messages {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: var(--z-messages);
  width: min(var(--etroit), calc(100vw - 2 * var(--e-4)));
  max-height: calc(100vh - 2 * var(--e-4));
  overflow-y: auto;
  pointer-events: none;
}
.messages-alertes, .messages-statut { display: flex; flex-direction: column; }
.message {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  margin-top: var(--e-2);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border-left: var(--barre-accent) solid var(--or);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--niv-4);
  pointer-events: auto;
}
.message-succes { border-color: var(--ok); }
.message-erreur { border-color: var(--alerte); }
.message-texte { flex: 1; min-width: 0; margin: 0; }
.message-fermer { flex: none; }

@supports (mask-image: none) or (-webkit-mask-image: none) {
  .message-succes::before, .message-erreur::before {
    content: '';
    flex: none;
    width: 1.25em;
    height: 1.25em;
    margin-top: 0.125em;
    background: currentColor;
    -webkit-mask: var(--picto) center / contain no-repeat;
    mask: var(--picto) center / contain no-repeat;
  }
  .message-succes::before { --picto: var(--picto-valide); color: var(--ok-texte); }
  .message-erreur::before { --picto: var(--picto-alerte); color: var(--alerte); }
}



.champ.depot {
  padding: var(--e-3);
  border: 1px dashed var(--bord-champ);
  border-radius: var(--r-md);
  background: var(--surface-basse);
}


.champ.depot.depot-survol {
  border-style: solid;
  border-color: var(--bleu-nuit);
  background: var(--surface-survol);
}
.depot-choisi {
  margin: var(--e-1) 0 0;
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  color: var(--bleu-nuit);
}
.depot-choisi:empty, .depot .erreur-champ:empty { display: none; }

@media (max-width: 768px) {
  
  .confirmation { padding: var(--e-5); }
  .confirmation > .actions { flex-direction: column-reverse; align-items: stretch; }
  
  .messages { right: 0; bottom: 0; left: 0; width: auto; padding: 0 var(--e-2) var(--e-2); }
}







.champ.sans-marge, .encadre.sans-marge, .flash.sans-marge { margin: 0; }


@media (max-width: 768px) {
  .carte { --carte-marge: var(--e-4); }
  .carte-indicateur { padding: var(--e-4); }

  






  .grille-cartes:has(> .carte-indicateur) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-3);
  }
  .grille-cartes:has(> .carte-indicateur) > * { flex: 1 1 9rem; }
  .grille-cartes > .carte-indicateur { min-width: min-content; }

  

  .carte > .conteneur-tableau {
    margin-inline: calc(var(--carte-marge) * -1);
    border-inline: 0;
    border-radius: 0;
  }
  


  fieldset > .conteneur-tableau {
    margin-inline: calc(var(--e-5) * -1);
    border-inline: 0;
    border-radius: 0;
  }
  


  .tableau-premium td.geste { white-space: normal; }
}
















@media screen { @media not all and (min-width: 768px) {
  .tableau-cartes,
  .tableau-cartes tbody,
  .tableau-cartes tr,
  .tableau-cartes td { display: block; width: auto; }
  .tableau-cartes { background: transparent; }

  .tableau-cartes thead {
    position: absolute;
    width: 1px; 
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tableau-cartes tr,
  .tableau-cartes tbody tr:nth-child(even) {
    margin-bottom: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--bord-fort);
    border-radius: var(--r-md);
    background: var(--surface);
  }

  .tableau-cartes td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr); 
    gap: var(--e-3);
    align-items: start;
    padding: var(--e-2) 0;
    

    text-align: left;
  }
  

  .tableau-cartes td[data-libelle] > * { grid-column: 2; }
  

  .tableau-cartes td > textarea, .tableau-cartes .champ-large,
  .tableau-cartes td > .saisie-cellule[type="text"] { min-width: 0; }
  .tableau-cartes td + td { border-top: 1px solid var(--bord); }

  .tableau-cartes td::before {
    content: attr(data-libelle);
    font-size: var(--t-sm);
    font-weight: var(--demi-gras);
    color: var(--bleu-nuit);
  }
  

  .tableau-cartes td > .badge { justify-self: start; }
  


  .tableau-cartes td .badge { max-width: 100%; white-space: normal; }
  
  .tableau-cartes td:not([data-libelle]) { display: block; }
  


  .tableau-cartes td:not([data-libelle]):empty { display: none; }

  

  .tableau-cartes td.cellule-large { display: block; }
  .tableau-cartes td.cellule-large::before { display: block; margin-bottom: var(--e-2); }

  


  .tableau-cartes tfoot { display: block; }
  .tableau-cartes tfoot tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-1) var(--e-4);
    border-color: var(--bleu-nuit);
    background: var(--bleu-nuit);
  }
  .tableau-cartes tfoot th {
    display: block;
    padding: 0;
    background: none;
    white-space: normal;
  }
  .tableau-cartes tfoot th:first-child { flex: 1 1 100%; }
  .tableau-cartes tfoot th:empty { display: none; }
  .tableau-cartes tfoot th[data-libelle]::before { content: attr(data-libelle) ' : '; color: var(--sur-nuit-texte); }

  



  .onglets-fiche .onglet { padding: 0 var(--e-4); }
  .onglet-long { display: none; }
  .onglet-court { display: inline; }
  




  .contenu > :is(.entete-page:first-child, .flash:first-child + .entete-page) > .fiche-sous-titre { order: 0; }

  



  .fiches-serrees tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-4); }
  .fiches-serrees td { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-1) 0; }
  .fiches-serrees td + td { border-top: 0; }
  .fiches-serrees td:not(.avec-intitule)::before { content: none; }
  .fiches-serrees td.pleine-ligne { flex: 1 1 100%; }

  

  .conteneur-tableau:has(> .tableau-cartes),
  .carte > .conteneur-tableau:has(> .tableau-cartes) {
    margin: 0;
    overflow-x: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  



  .liste-choix-tri, .liste-tri-seul { display: block; }
  .tableau-cartes thead .liste-tri { visibility: hidden; }
} }







.etapes-frise { margin-bottom: var(--e-5); }
.etapes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapes li {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: var(--texte-doux);
}
.etapes a { color: var(--bleu-nuit); }
.etape-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: calc(var(--e-6) + var(--e-1));
  height: calc(var(--e-6) + var(--e-1));
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-pill);
  font-weight: var(--demi-gras);
}
.etapes .etape-faite .etape-numero { border-color: var(--bord-champ); background: var(--surface-basse); color: var(--bleu-nuit); }
.etapes li[aria-current="step"] { color: var(--bleu-nuit); font-weight: var(--demi-gras); }
.etapes li[aria-current="step"] .etape-numero { border-color: var(--bleu-nuit); background: var(--bleu-nuit); color: var(--blanc); }

.etapes-position, .etapes-repli { display: none; }

.etapes-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
.etapes-brouillon { margin-top: var(--e-5); padding-top: var(--e-4); border-top: 1px solid var(--bord); }


.etapes-lignes input { width: 100%; min-width: 8rem; }
.etapes-lignes .erreur-champ {
  margin: var(--e-1) 0 0;
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  color: var(--alerte);
}
.etapes-lignes tr.ligne-en-erreur td { background: var(--fond-erreur); }
.etapes-ecarter {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-1);
  font-size: var(--t-sm);
}
.etapes-lignes .etapes-ecarter input { width: auto; min-width: 0; }




@media screen { @media not all and (min-width: 768px) {
  .etapes { display: none; }
  .etapes-position { display: block; margin: 0 0 var(--e-2); font-weight: var(--demi-gras); color: var(--bleu-nuit); }
  .etapes-repli { display: block; }
  .etapes-repli ol { margin: var(--e-2) 0 0; }
  .etapes-boutons > .bouton,
  .etapes-boutons > .bouton-secondaire,
  .etapes-boutons > form,
  .etapes-boutons > form > .bouton-secondaire { width: 100%; }
} }





.assistant {
  width: min(var(--moyen), calc(100vw - 2 * var(--e-4)));
  margin-top: 8vh;
  padding: 0;
  border: none;
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--texte);
  box-shadow: var(--niv-4);
}
.assistant::backdrop { background: var(--voile); }
.assistant-cadre { display: flex; flex-direction: column; max-height: 84vh; }
.assistant-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bord);
}
.assistant-tete h2 { margin: 0; }
.assistant-defile { flex: 1; min-height: 0; overflow-y: auto; padding: var(--e-3) var(--e-4); }
.assistant-mention, .assistant-reste, .assistant-avertissement { margin: 0 0 var(--e-2); font-size: var(--t-sm); color: var(--texte-doux); }
.assistant-reste { font-weight: var(--demi-gras); }
.assistant-information { margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.assistant-information summary { cursor: pointer; font-weight: var(--demi-gras); }
.assistant-information p { margin: var(--e-2) 0 0; }
.assistant-fil { display: flex; flex-direction: column; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.assistant-fil p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.assistant-question, .assistant-reponse { max-width: 90%; padding: var(--e-2) var(--e-3); border-radius: var(--r-md); }
.assistant-question { align-self: flex-end; border: 1px solid var(--bulle-moi-bord); background: var(--bulle-moi); }
.assistant-reponse { align-self: flex-start; border: 1px solid var(--bord); background: var(--surface-basse); }
.assistant-liens { margin: var(--e-2) 0 0; padding-left: var(--e-4); }


.assistant-detail { font-size: var(--t-sm); color: var(--texte-doux); }
.assistant-carte { margin: var(--e-2) 0 0; }
.assistant-etat { margin: 0; padding: var(--e-2) var(--e-4); border-top: 1px solid var(--bord); font-size: var(--t-sm); color: var(--texte-doux); }
.assistant-saisie { padding: var(--e-3) var(--e-4); border-top: 1px solid var(--bord); }
.assistant-saisie label { display: block; margin-bottom: var(--e-1); font-weight: var(--demi-gras); }
.assistant-saisie textarea { width: 100%; resize: vertical; }
.assistant-boutons { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }




@media screen { @media not all and (min-width: 768px) {
  .assistant { width: calc(100vw - 2 * var(--gouttiere)); margin-top: var(--gouttiere); }
  .assistant-cadre {
    max-height: calc(100vh - var(--gouttiere) - var(--cible) - 2 * var(--e-4));
    max-height: calc(100dvh - var(--gouttiere) - var(--cible) - 2 * var(--e-4));
  }
  .assistant-boutons > .bouton, .assistant-boutons > .bouton-secondaire { flex: 1 1 auto; }
} }

@media (scripting: none) {
  .assistant-ouvrir { display: none; }
}


.assistant-bulle {
  position: fixed;
  right: var(--e-4);
  bottom: var(--e-4);
  z-index: var(--z-bulle);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 1px solid var(--or);
  border-radius: 50%;
  background: var(--bleu-nuit);
  color: var(--or);
  box-shadow: var(--niv-3);
  cursor: pointer;
}
.assistant-bulle:hover { background: var(--bleu-2); }

.assistant-bulle:focus-visible { box-shadow: 0 0 0 5px var(--halo-focus); }


body:has(.assistant-bulle:not([hidden])) .contenu { padding-bottom: calc(var(--cible) + 2 * var(--e-4)); }

body:has(.assistant-bulle:not([hidden])) .messages {
  bottom: calc(var(--cible) + 2 * var(--e-4));
  max-height: calc(100vh - var(--cible) - 3 * var(--e-4));
}


body:has(.assistant-bulle:not([hidden])) .pointage-pied { padding-right: calc(var(--cible) + var(--e-2)); }

/* /css/ecrans.css */














.saisie-cellule {
  width: 100%;
  padding: var(--e-1) var(--e-2);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  font: inherit;
  color: inherit;
}
.saisie-cellule:hover { border-color: var(--bord-champ); }


.saisie-cellule:focus { border-color: var(--bleu-nuit); background: var(--surface); }
.saisie-cellule.enregistre { border-color: var(--ok); background: var(--confirme-fond); } 
.saisie-cellule.erreur { border-color: var(--alerte); background: var(--refus-fond); }

.tableau-premium td:has(> .saisie-cellule) { padding-block: var(--e-1); }


.saisie-cellule[type="text"] { min-width: 12rem; }

.col-volume { width: 190px; }
.col-coef { width: 120px; }
.col-couleur { width: 250px; }
.col-actions { width: 90px; }


.cellule-couleurs { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.cellule-couleurs .pastille {
  width: var(--creneau);
  height: var(--creneau);
  padding: 0;
  border: 0;
  border-radius: 50%; 
  
  background-image: linear-gradient(var(--reflet-clair), var(--reflet-sombre));
  box-shadow: inset 0 0 0 1px var(--lisere-nuit);
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cellule-couleurs .pastille:hover { transform: scale(1.15); box-shadow: inset 0 0 0 1px var(--lisere-nuit), 0 0 0 2px var(--bord-fort); }

.cellule-couleurs .pastille-active,
.cellule-couleurs .pastille-active:hover { box-shadow: inset 0 0 0 1px var(--lisere-nuit), 0 0 0 2px var(--blanc), 0 0 0 4px var(--or); }
.pastille-c0 { background-color: var(--bleu-nuit); }
.pastille-c1 { background-color: var(--matiere-1); }
.pastille-c2 { background-color: var(--matiere-2); }
.pastille-c3 { background-color: var(--matiere-3); }
.pastille-c4 { background-color: var(--matiere-4); }
.pastille-c5 { background-color: var(--matiere-5); }
.pastille-c6 { background-color: var(--matiere-6); }
.pastille-c7 { background-color: var(--matiere-7); }
.pastille-c8 { background-color: var(--matiere-8); }
.pastille-c9 { background-color: var(--matiere-9); }



.cases-competences { list-style: none; margin: 0 0 var(--e-2); padding: 0; }
.cases-competences li { padding: var(--e-1) 0; }




.repartition-en-bref { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-6); }


.repartition-tableau td { vertical-align: top; padding-block: var(--e-1); }


.repartition-tableau .cellule-rang,
.repartition-tableau .cellule-semaines,
.repartition-tableau td.texte-droite { width: 1%; }
.repartition-tableau .cellule-semaines { white-space: nowrap; }
.repartition-tableau .cellule-etapes { width: 40%; }
.repartition-tableau thead th,
.repartition-tableau tfoot th { padding-block: var(--e-2); }

.repartition-tableau .cellule-semaines .badge { display: block; width: fit-content; margin-top: var(--e-1); }


.repartition-tableau summary { padding-block: var(--e-0); }
.repartition-tableau .insecable { white-space: nowrap; }
.repartition-tableau .cellule-etapes ol { margin: var(--e-1) 0 0; padding-left: var(--e-5); font-size: var(--t-sm); }
.repartition-tableau .cellule-sequence details > p { font-size: var(--t-sm); }
.repartition-tableau .rang-telephone { display: none; }
@media screen { @media not all and (min-width: 768px) {
  .repartition-tableau summary { padding-block: calc((var(--cible) - 1.5em) / 2); }
  
  .repartition-tableau .cellule-rang,
  .repartition-tableau .cellule-semaines,
  .repartition-tableau .cellule-etapes,
  .repartition-tableau td.texte-droite { width: auto; }
  .repartition-tableau .cellule-semaines { white-space: normal; }
  .repartition-tableau tfoot th { padding-block: 0; }
  
  .repartition-tableau .cellule-rang { display: none; }
  .repartition-tableau .rang-telephone { display: inline; }
  


  .repartition-tableau .cellule-sequence,
  .repartition-tableau .cellule-etapes { display: block; }
  .repartition-tableau .cellule-sequence { border-top: 0; }
  .repartition-tableau .cellule-sequence::before,
  .repartition-tableau .cellule-etapes::before { content: none; }
} }






.tableau-groupe .case-competence { text-align: center; }
@media screen { @media not all and (min-width: 768px) {
  .tableau-groupe .case-competence,
  .tableau-groupe tfoot { display: none; }
} }







.repartition-saisie > tbody > tr:nth-child(n),
.repartition-saisie > tbody > tr:hover { background: transparent; }
.repartition-saisie > tbody:nth-of-type(even) { background: var(--surface-basse); }
.repartition-saisie .cellule-ordre,
.repartition-saisie .cellule-heures,
.repartition-saisie .cellule-retirer { width: 1%; }
.repartition-saisie .cellule-heures { white-space: nowrap; text-align: right; }

.repartition-saisie .erreur-champ { white-space: normal; text-align: left; }


.repartition-semaines { display: inline-flex; align-items: center; gap: var(--e-3); }
.repartition-semaine { display: inline-flex; align-items: center; gap: var(--e-1); }
.repartition-saisie .repartition-replis > td { padding-top: 0; }
.repartition-replis-contenu { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--e-6); }

.repartition-replis-contenu > details[open] { flex: 1 1 100%; }
.repartition-saisie .cases-competences { column-width: 22rem; column-gap: var(--e-6); }
.repartition-saisie .cases-competences li { break-inside: avoid; }


.repartition-etapes { margin-top: var(--e-2); }


.repartition-etapes td:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6)) { width: 1%; }
.repartition-etapes td:nth-child(6) { white-space: nowrap; }
.repartition-etapes td > textarea { min-width: 12rem; min-height: var(--cible); max-height: 12rem; field-sizing: content; }




@media screen { @media not all and (min-width: 768px) {
  .repartition-saisie > tbody {
    margin-bottom: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border: 1px solid var(--bord-fort);
    border-radius: var(--r-md);
  }
  .repartition-saisie > tbody,
  .repartition-saisie > tbody:nth-of-type(even) { background: var(--surface); }
  .repartition-saisie > tbody > tr:nth-child(n) { margin: 0; padding: 0; border: 0; border-radius: 0; }
  .repartition-saisie .cellule-ordre,
  .repartition-saisie .cellule-heures,
  .repartition-saisie .cellule-retirer { width: auto; }
  .repartition-saisie .cellule-heures { text-align: left; }
  

  .repartition-semaines { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); }
  .repartition-semaine { flex-direction: column; align-items: stretch; }
  .repartition-semaine > input { width: 100%; }
  .repartition-etapes td:is(:nth-child(1), :nth-child(3), :nth-child(4), :nth-child(6)) { width: auto; white-space: normal; }
  .repartition-saisie .cellule-titre,
  .repartition-saisie .cellule-semaines,
  .repartition-etapes td[data-libelle] { display: block; padding: var(--e-1) 0; }
  .repartition-saisie .cellule-titre::before,
  .repartition-saisie .cellule-semaines::before,
  .repartition-etapes td[data-libelle]::before { display: block; margin-bottom: var(--e-1); }
  .repartition-saisie .repartition-sous-ligne > td,
  .repartition-saisie .repartition-replis > td { padding-top: var(--e-2); border-top: 1px solid var(--bord); }
  .repartition-etapes tr { padding: var(--e-2) var(--e-3); }
} }


.ligne-ajout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px dashed var(--bord-fort);
}



.aide-clavier { font-size: var(--t-sm); }
.aide-clavier > summary { font-family: var(--police-titres); font-weight: var(--demi-gras); color: var(--bleu-nuit); }
.aide-clavier ul { margin: var(--e-2) 0 0; padding: 0; }



.etat-centre { background: var(--bleu-nuit); }
.etat-entreprise { background: var(--blanc); }
.etat-autre { background: var(--etat-autre); }
.etat-ferie { background: var(--alerte); }
.etat-examen { background: var(--attente); }

.legende { display: flex; flex-wrap: wrap; gap: var(--e-3); margin: var(--e-2) 0 var(--e-3); }
.legende.marge-haut { margin-top: var(--e-4); }
.legende .item { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); }
.legende .pastille { width: var(--e-4); height: var(--e-4); border: 1px solid var(--gris-bord); border-radius: var(--r-xs); }




.cal-ancres { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin: var(--e-3) 0 var(--e-1); }
.cal-ancres a {
  
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--gris-bord);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--bleu-nuit);
  font-size: var(--t-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
}
.cal-ancres a:hover, .cal-ancres a:focus-visible { border-color: var(--bleu-nuit); }

.cal-mois-titre {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin: var(--e-4) 0 var(--e-1);
  padding-bottom: var(--e-1);
  border-bottom: 2px solid var(--or);
  font-family: var(--police-titres);
  font-weight: var(--gras);
  color: var(--bleu-nuit);
}
.cal-obs-mois {
  flex: 0 1 320px; 
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: var(--t-sm);
}


.cal-mural { border-collapse: collapse; font-size: var(--t-xs); white-space: nowrap; }
[data-calendrier] .cal-mural { user-select: none; }
.cal-mural td, .cal-mural th { padding: 0; border: 1px solid var(--gris-bord); text-align: center; }




.cal-mural .cal-etiq {
  position: sticky;
  left: 0;
  z-index: var(--z-grille);
  padding: var(--e-0) var(--e-2);
  background: var(--bleu-nuit);
  color: var(--or);
  font-size: var(--t-xs);
  font-weight: var(--demi-gras);
  text-align: right;
  white-space: nowrap;
}
.cal-sem-num { background: var(--gris-clair); color: var(--texte-doux); font-size: var(--t-xs); font-weight: var(--gras); }
.cal-jl, .cal-jn { min-width: 30px; color: var(--texte-doux); font-size: var(--t-xs); }
.cal-jn { color: var(--texte); font-weight: var(--gras); }
.cal-we { background: var(--we-fond); color: var(--we-texte); }

.cal-we-jour { background: var(--we-ouvre); color: var(--blanc); font-weight: var(--gras); }

.cal-jn.cal-ferie-date { background: var(--alerte); color: var(--blanc); }
.cal-cell {
  width: 16px;
  min-width: 16px;
  height: var(--creneau);
  background: var(--blanc);
  color: var(--bleu-nuit);
  font-weight: var(--gras);
  cursor: pointer;
}

.cal-cell.etat-vide, .cal-cell.etat-entreprise { background: var(--blanc); color: var(--bleu-nuit); }
.cal-cell.etat-centre { background: var(--bleu-nuit); color: var(--blanc); }
.cal-cell.etat-ferie { background: var(--alerte); color: var(--blanc); }
.cal-cell.etat-examen { background: var(--attente); color: var(--blanc); }
.cal-cell.etat-autre { background: var(--etat-autre); color: var(--blanc); }







.cal-cell.etat-ferie, .pastille.etat-ferie {
  background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--trame) 3px 5px);
}
.cal-cell.etat-autre, .pastille.etat-autre {
  background-image: repeating-linear-gradient(-45deg, transparent 0 3px, var(--trame) 3px 5px);
}
.cal-cell:hover { outline: 2px solid var(--or-fonce); outline-offset: -2px; }





.cal-cell[data-demi]:focus-visible {
  outline: 3px solid var(--or);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 5px var(--trame-forte);
}


.cal-cell.etat-vide[data-demi]:focus-visible,
.cal-cell.etat-entreprise[data-demi]:focus-visible { outline-color: var(--bleu-nuit); }

.cal-edit {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--cellule-edition);
  color: var(--bleu-nuit);
  font-size: var(--t-xs);
  font-weight: var(--gras);
  text-align: center;
}
.cal-edit:focus { outline: 2px solid var(--or); outline-offset: -2px; }

[data-calendrier] .cal-cell[data-demi] { touch-action: none; }


.palette-couleurs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.palette-etat {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--bord-champ);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--texte);
  font-size: var(--t-sm);
}
.palette-etat .pastille { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--gris-bord); border-radius: var(--r-xs); }
.palette-etat:hover { border-color: var(--bleu-nuit); }
.palette-etat.actif { border-color: var(--bleu-nuit); box-shadow: inset 0 0 0 2px var(--bleu-nuit); font-weight: var(--demi-gras); }
.palette-heures { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-left: auto; font-size: var(--t-sm); }
.palette-heures-libelle { font-weight: var(--demi-gras); color: var(--bleu-nuit); }
.palette-heures input { width: 4.5rem; }




.evt-details { position: relative; display: inline-block; margin-right: var(--e-1); }



.evt-details > summary { display: inline-flex; list-style: none; }
.evt-details > summary::-webkit-details-marker { display: none; }
.evt-panneau {
  position: absolute;
  top: calc(100% + var(--e-1));
  right: 0;
  z-index: var(--z-panneau);
  

  min-width: min(var(--colonne-min), calc(100vw - 2 * var(--gouttiere)));
  max-width: calc(100vw - 2 * var(--gouttiere));
  padding: var(--e-3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: left;
  box-shadow: var(--niv-4);
}


.carte > .evt-details > .evt-panneau { right: auto; left: 0; }
.evt-panneau label { display: block; margin-bottom: var(--e-2); font-size: var(--t-sm); font-weight: var(--demi-gras); }
.evt-panneau input, .evt-panneau textarea { width: 100%; margin-top: var(--e-1); font-weight: 400; }
.evt-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); margin-top: var(--e-1); }



.code-seance {
  margin: 0;
  font-family: var(--police-titres);
  font-size: var(--t-2xl);
  font-weight: var(--gras);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
  color: var(--bleu-nuit);
}



.bloc-fiche { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-6); }

.actions-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3);
}
.actions-grille > a,
.actions-grille form,
.actions-grille .bouton,
.actions-grille .bouton-secondaire,
.actions-grille .bouton-danger { width: 100%; }

.actions-grille .note-action { margin: var(--e-2) 0 0; }

.zone-archivage { padding-top: var(--e-4); border-top: 1px solid var(--bord); }
.zone-archivage .champ input { max-width: var(--moyen); }




.apercu-logo,
.apercu-signature {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 120px;
  margin-bottom: var(--e-4);
}




.grille-cours { display: flex; gap: var(--e-1); overflow-x: auto; user-select: none; }
.gc-heures { flex: none; width: 46px; }
.gc-entete-vide, .gc-entete { height: 46px; }
.gc-entete { text-align: center; }
.gc-h {
  height: var(--creneau);
  padding-right: var(--e-1);
  border-top: 1px solid transparent;
  color: var(--texte-doux);
  font-size: var(--t-xs);
  text-align: right;
}
.gc-jour { flex: 1; min-width: 128px; }
.gc-jour-nom { font-family: var(--police-titres); font-weight: var(--demi-gras); font-size: var(--t-xs); color: var(--bleu-nuit); }




.gc-attendu { white-space: nowrap; }
.gc-attendu .badge { min-height: 0; padding: var(--e-0) var(--e-1); }
.gc-attendu .badge::before { display: none; }
.gc-corps {
  position: relative;
  border: 1px solid var(--gris-bord);
  background:
    repeating-linear-gradient(to bottom,
      var(--blanc) 0, var(--blanc) calc(var(--creneau) - 1px),
      var(--gris-bord) calc(var(--creneau) - 1px), var(--gris-bord) var(--creneau));
  cursor: crosshair;
  
  touch-action: none;
}
body.mode-collage .gc-corps { cursor: copy; }

body.mode-echange .bloc-cours { cursor: pointer; }
.bloc-cours.bloc-echange { outline: 2px dashed var(--or); outline-offset: -2px; }


.gc-pied {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--creneau);
  border-top: 1px solid var(--gris-bord);
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  font-size: var(--t-xs);
}
.gc-ecart-ok { color: var(--ok); }
.gc-ecart-plus { color: var(--alerte); }
.gc-ecart-moins { color: var(--attente); }

.gc-voile {
  position: absolute;
  left: 0;
  right: 0;
  background: repeating-linear-gradient(135deg, var(--voile-a) 0, var(--voile-a) 6px, var(--voile-b) 6px, var(--voile-b) 12px);
  pointer-events: none;
}





.gc-examen {
  position: absolute;
  left: 0;
  right: 0;
  border-left: 3px solid var(--attente);
  background: var(--examen-fond);
  pointer-events: none; 
}
.gc-examen-etiquette {
  position: absolute;
  top: var(--e-0);
  left: var(--e-2);
  color: var(--attente-texte);
  font-size: var(--t-xs);
  font-weight: var(--gras);
  letter-spacing: 0.04em;
}
.gc-selection {
  position: absolute;
  left: var(--e-0);
  right: var(--e-0);
  border: 1.5px dashed var(--or-fonce);
  border-radius: var(--r-xs);
  background: var(--selection-fond);
  pointer-events: none;
}

.bloc-cours {
  position: absolute;
  left: var(--e-0);
  right: var(--e-0);
  padding: var(--e-0) var(--e-1);
  overflow: hidden;
  border-radius: var(--r-xs);
  background-color: var(--bleu-nuit);
  

  background-image: linear-gradient(var(--reflet-clair), var(--reflet-sombre));
  color: var(--blanc);
  font-size: var(--t-xs);
  line-height: 1.25;
  cursor: grab; 
}
.bloc-cours.bloc-deplace {
  z-index: var(--z-glisse);
  outline: 2px dashed var(--or);
  opacity: 0.85;
  cursor: grabbing;
}



.bloc-cours.a-affecter { background-color: var(--attente); box-shadow: inset 0 0 0 2px var(--attente); }
.bloc-cours.bc-c1 { background-color: var(--matiere-1); }
.bloc-cours.bc-c2 { background-color: var(--matiere-2); }
.bloc-cours.bc-c3 { background-color: var(--matiere-3); }
.bloc-cours.bc-c4 { background-color: var(--matiere-4); }
.bloc-cours.bc-c5 { background-color: var(--matiere-5); }
.bloc-cours.bc-c6 { background-color: var(--matiere-6); }
.bloc-cours.bc-c7 { background-color: var(--matiere-7); }
.bloc-cours.bc-c8 { background-color: var(--matiere-8); }
.bloc-cours.bc-c9 { background-color: var(--matiere-9); }




.bloc-cours.a-affecter, .bloc-cours[class*="bc-c"] { background-image: none; }


.bloc-cours :focus-visible { outline-color: var(--blanc); }
.bc-titre { padding-right: 30px; font-weight: var(--gras); } 
.bloc-cours:has([data-echanger]) .bc-titre { padding-right: 58px; } 
.bc-sous { opacity: 0.9; }


.bc-precision {
  position: absolute;
  top: var(--e-0);
  right: var(--e-1);
  

  color: var(--blanc);
  font-size: var(--t-xs);
  line-height: 1;
  cursor: help;
}


.bc-actions { position: absolute; top: 1px; right: 1px; display: flex; gap: 1px; }
.bc-btn {
  padding: var(--e-0) var(--e-1);
  border: 0;
  border-radius: var(--r-xs);
  background: var(--sur-nuit-bord);
  color: var(--blanc);
  font-size: var(--t-xs);
  line-height: 1;
}
.bc-btn:hover { background: var(--poignee-survol); }
.bc-btn .icone { width: 1em; height: 1em; } 
.bc-poignee {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px; 
  border-radius: 0 0 var(--r-xs) var(--r-xs);
  background: var(--poignee);
  cursor: ns-resize;
}
.bc-poignee-haut { top: 0; bottom: auto; border-radius: var(--r-xs) var(--r-xs) 0 0; }

.panneau-creation { border: 1px solid var(--bord-fort); }



.panneau-creation:not([hidden]) {
  position: fixed;
  left: 50%;
  bottom: var(--e-4);
  z-index: var(--z-panneau);
  width: min(60rem, calc(100% - 2 * var(--e-4)));
  background: var(--surface);
  box-shadow: var(--niv-5);
  transform: translateX(-50%);
}

.panneau-creation [aria-disabled="true"] { opacity: 0.6; cursor: progress; }

.panneau-commun {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
}
.panneau-commun input[type="text"] { flex: 1 1 16rem; min-width: 0; }


.affect-rapide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-3);
  padding-top: var(--e-3);
  border-top: 1px solid var(--bord);
}
.affect-rapide select { width: auto; min-width: var(--champ-min); }
.affect-rapide-commun { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-sm); }



.bloc-affecter { border-bottom: 1px solid var(--bord); }
.bloc-affecter:last-child { border-bottom: none; }
.bloc-affecter > summary, .mut-dossier > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  list-style: none;
  font-family: var(--police-titres);
  color: var(--bleu-nuit);
}
.bloc-affecter > summary { min-height: var(--cible); padding: var(--e-2) var(--e-1); }
.bloc-affecter > summary::-webkit-details-marker,
.mut-dossier > summary::-webkit-details-marker { display: none; }
.bloc-affecter > summary::after, .mut-dossier > summary::after { content: '▾'; margin-left: auto; opacity: 0.55; }
.bloc-affecter[open] > summary::after, .mut-dossier[open] > summary::after { content: '▴'; }
.bloc-affecter > summary:hover { background: var(--surface-survol); }
.bloc-affecter-corps { padding: var(--e-1) var(--e-1) var(--e-4); }
.bloc-affecter-corps .tableau-premium select { width: 100%; }
.bloc-affecter-corps > form + form { margin-top: var(--e-4); }
.bloc-affecter-commun { margin: var(--e-3) 0; padding: var(--e-3) var(--e-4); border: 1px dashed var(--bord-fort); border-radius: var(--r-md); }
.bloc-affecter-commun > summary { color: var(--or-texte); font-size: var(--t-sm); }
.bloc-affecter-commun input[type="text"] { width: 100%; margin-top: var(--e-2); }
.bloc-affecter-masse { padding-top: var(--e-4); border-top: 1px dashed var(--bord-fort); }



.valeur-gain { color: var(--ok-texte); font-weight: var(--demi-gras); }



.tableau-mensuel :is(th, td):first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-grille);
  background: var(--surface);
}
.tableau-mensuel tbody tr:nth-child(even) td:first-child { background: var(--surface-basse); }
.tableau-mensuel :is(thead, tfoot) th:first-child { background: var(--bleu-nuit); }

.tableau-mensuel .montant-detail { display: block; }



@media screen { @media not all and (min-width: 768px) {
  .tableau-mensuel tbody tr td:first-child,
  .tableau-mensuel tbody tr:nth-child(even) td:first-child { position: static; background: transparent; }
  .tableau-mensuel .montant-detail { display: inline; margin-left: var(--e-2); }
  

  .tableau-mensuel td[data-libelle] { padding-block: var(--e-1); white-space: normal; }
} }





.mut-titre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.mut-titre::after { content: none; }
.mut-quand { text-transform: capitalize; font-variant-numeric: tabular-nums; }
.mut-corps { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--bord); }


.mut-tranches { display: flex; flex-direction: column; gap: var(--e-2); padding: 0; list-style: none; }
.mut-tranches li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
  background: var(--surface-basse);
}
.mut-plage { font-family: var(--police-titres); font-weight: var(--demi-gras); font-variant-numeric: tabular-nums; }
.mut-classes { font-weight: var(--demi-gras); color: var(--bleu-nuit); }
.mut-decision { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px dashed var(--bord-fort); }
.mut-choix { display: flex; flex-direction: column; gap: var(--e-1); margin-bottom: var(--e-3); padding: 0; list-style: none; }
.mut-choix label { display: flex; align-items: center; gap: var(--e-2); }



.mut-groupee-liste { font-size: var(--t-sm); }
.mut-groupee-liste label { align-items: flex-start; }
.mut-groupee-liste input[type="checkbox"] { flex: none; margin-top: var(--e-0); }


.carte-chat { padding: 0; overflow: hidden; }
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  max-height: 58vh; 
  padding: var(--e-4);
  overflow-y: auto;
  background: var(--surface-basse);
}
.bulle {
  max-width: 74%; 
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-md);
  box-shadow: var(--niv-1);
  overflow-wrap: anywhere;
}
.bulle-autre {
  align-self: flex-start;
  border: 1px solid var(--bord);
  border-bottom-left-radius: var(--r-xs);
  background: var(--surface);
}
.bulle-moi {
  align-self: flex-end;
  border: 1px solid var(--bulle-moi-bord);
  border-bottom-right-radius: var(--r-xs);
  background: var(--bulle-moi);
}

.bulle-auteur { margin-bottom: var(--e-0); color: var(--or-texte); font-size: var(--t-xs); font-weight: var(--gras); }
.bulle-texte { color: var(--texte); white-space: pre-wrap; }
.bulle-piece { margin-top: var(--e-1); font-size: var(--t-sm); }

.bulle-piece a { display: inline-flex; align-items: center; gap: var(--e-1); }
.bulle-meta { margin-top: var(--e-1); color: var(--texte-doux); font-size: var(--t-xs); text-align: right; }

.bulle-lecteurs {
  margin-top: var(--e-1);
  padding-top: var(--e-1);
  border-top: 1px dashed var(--lisere-nuit);
  color: var(--texte-doux);
  font-size: var(--t-xs);
}

.bulle-edition { width: 100%; min-height: calc(var(--cible) + var(--e-3)); font-size: var(--t-sm); }
.bulle-edition-actions { margin-top: var(--e-1); justify-content: flex-end; }


.menu-contextuel {
  position: fixed;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  min-width: 11rem;
  padding: var(--e-1);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--niv-4);
}
.menu-item {
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--texte);
  font-size: var(--t-sm);
  text-align: left;
}
.menu-item:hover { background: var(--surface-survol); }


.compose {
  display: flex;
  align-items: flex-end;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--bord);
}


.compose.depot-survol {
  background: var(--surface-survol);
  outline: 2px dashed var(--bleu-nuit);
  outline-offset: -2px;
}
.compose + p { margin: 0; padding: 0 var(--e-4) var(--e-2); }
.compose + p:empty { display: none; }
.carte-chat > p.texte-doux { padding: var(--e-3) var(--e-4); }
.compose-piece {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--cible);
  height: var(--cible);
  border: 1px solid var(--bord-champ);
  border-radius: 50%; 
  background: var(--surface-basse);
  font-size: var(--t-lg);
  line-height: 1;
  cursor: pointer;
}
.compose-piece:hover { border-color: var(--bleu-nuit); }


.compose-fichier {
  position: absolute;
  width: 1px; 
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}


.compose:has(.compose-fichier:focus-visible) .compose-piece { outline: 2px solid var(--bleu-nuit); outline-offset: 2px; }


.compose ~ .erreur-champ {
  margin: 0;
  padding: 0 var(--e-4) var(--e-2);
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  color: var(--alerte);
}
.compose ~ .erreur-champ:empty { display: none; }
.compose-champ {
  flex: 1;
  min-width: 0;
  border-radius: var(--r-lg);
  resize: none;
}






.notif-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-2);
  text-align: center;
}
.notif-actions form { margin: 0; }
.notif-actions .bouton-secondaire { white-space: nowrap; }
.notif-non-lue { border-left: var(--barre-accent) solid var(--or); }




.accueil-lignes > .ligne {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-4);
  margin: 0;
  padding: var(--e-3) 0;
}
.accueil-lignes > .ligne + .ligne { border-top: 1px solid var(--bord); }
.accueil-lignes .ligne-corps { flex-basis: 12rem; }
.accueil-lignes .ligne-corps > strong, .accueil-lignes .ligne-corps > .texte-doux { display: block; }


.accueil-lignes .ligne-corps > strong::first-letter { text-transform: uppercase; }


.accueil-lignes .ligne-corps > strong > a:not([class]) { position: relative; }
.accueil-lignes .ligne-corps > strong > a:not([class])::after {
  content: '';
  position: absolute;
  inset: min(0px, calc((100% - var(--cible)) / 2)) 0;
}
.accueil-lignes form { margin: 0; }

.accueil-vignette {
  flex: 0 0 auto;
  width: calc(var(--e-8) + var(--e-6));
  height: calc(var(--e-8) + var(--e-6));
  border-radius: var(--r-md);
  object-fit: cover;
}


.depot-copie {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--e-2) var(--e-4);
}
.depot-copie > div { flex: 1 1 14rem; min-width: 0; }
.depot-copie input[type="file"] { width: 100%; }

.depot-copie > .erreur-champ {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  color: var(--alerte);
}
.depot-copie > .erreur-champ:empty { display: none; }


.accueil-heure {
  flex: none;
  min-width: 9.5rem;
  white-space: nowrap;
  font-family: var(--police-titres);
  font-weight: var(--demi-gras);
  color: var(--bleu-nuit);
  font-variant-numeric: tabular-nums;
}

.accueil-nombre { flex: none; min-width: 2.5rem; text-align: right; }


.accueil-etats { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); }



.tdb-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--e-6);
  align-items: start;
  margin-top: var(--e-6);
}
.tdb-colonne { display: grid; gap: var(--e-4); min-width: 0; }
.tdb-colonne-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-4); }
.tdb-colonne-tete > h2 { margin: 0; }
.tdb-colonne > .carte { margin-bottom: 0; }

.tdb-colonne .accueil-nombre { min-width: 3.5rem; }

.tdb-synthese { margin-top: var(--e-6); }

@media (max-width: 1100px) {
  .tdb-colonnes { grid-template-columns: minmax(0, 1fr); }
  .tdb-a-traiter { order: -1; }
}


.bloc-repliable { padding: 0; overflow: hidden; }
.bloc-repliable > summary {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: var(--e-4) var(--e-5);
  list-style: none;
  cursor: pointer;
}
.bloc-repliable > summary::-webkit-details-marker { display: none; }
.bloc-repliable > summary::after {
  content: '';
  flex: none;
  width: var(--e-2);
  height: var(--e-2);
  margin-left: var(--e-1);
  border-right: 2px solid var(--or-texte);
  border-bottom: 2px solid var(--or-texte);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}
.bloc-repliable[open] > summary::after { transform: rotate(45deg); }
.bloc-repliable > summary:hover { background: var(--surface-survol); }
.bloc-repliable[open] > summary { border-bottom: 1px solid var(--bord); }
.bloc-titre {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  font-family: var(--police-titres);
  font-size: var(--t-lg);
  font-weight: var(--demi-gras);
  color: var(--bleu-nuit);
}
.bloc-corps { padding: var(--e-3) var(--e-5) var(--e-5); }
.bloc-corps > :last-child { margin-bottom: 0; }


.tdb-reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--e-3); }
.tdb-repere {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-md);
  background: var(--surface-basse);
  color: var(--texte);
  text-decoration: none;
}
.tdb-repere:hover { background: var(--surface-survol); text-decoration: none; }
.tdb-repere .valeur {
  font-family: var(--police-titres);
  font-size: var(--t-xl);
  font-weight: var(--gras);
  color: var(--bleu-nuit);
  font-variant-numeric: tabular-nums;
}
.tdb-repere .libelle { font-weight: var(--demi-gras); }



.accueil-details { display: grid; gap: var(--e-2); margin: var(--e-2) 0 0; padding: 0; list-style: none; }
.accueil-details a {
  display: block;
  padding: var(--e-2) var(--e-3);
  border-left: var(--barre-accent) solid var(--or);
  border-radius: var(--r-sm);
  background: var(--surface-basse);
  color: var(--texte);
  font-size: var(--t-sm);
  line-height: var(--interligne);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.accueil-details a:hover { background: var(--surface-survol); color: var(--bleu-nuit); }
.accueil-detail-quoi { display: block; font-weight: var(--demi-gras); }
.accueil-detail-etat { display: block; color: var(--texte-doux); }
.accueil-details-suite { margin-top: var(--e-2); }
.accueil-details-suite > summary { cursor: pointer; font-size: var(--t-sm); font-weight: var(--demi-gras); color: var(--or-texte); }

.accueil-lignes > .ligne-detaillee { align-items: flex-start; }





@media screen { @media not all and (min-width: 768px) {
  .accueil-jour .bouton { width: 100%; min-height: var(--cible-terrain); }
  .accueil-jour .ligne-fin { flex: 1 1 100%; }
  .accueil-jour .ligne-fin .bouton-secondaire { width: 100%; }
} }


@media (max-width: 768px) {
  .actions-grille { grid-template-columns: 1fr; }
  .bulle { max-width: 88%; }
}






@media screen { @media not all and (min-width: 768px) {
  .tableau-cartes .evt-details { display: block; }
  .tableau-cartes .evt-panneau {
    position: static;
    min-width: 0;
    max-width: none;
    margin-top: var(--e-2);
    box-shadow: none;
  }
} }









.pointage-cours { margin: 0 0 var(--e-4); padding: 0; list-style: none; }
.pointage-cours li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1) var(--e-3);
  padding: var(--e-2) 0;
  border-bottom: 1px solid var(--bord);
}
.pointage-cours li:last-child { border-bottom: 0; }

.tableau-pointage td { vertical-align: top; }
.pointage-eleve { font-weight: var(--demi-gras); }

.pointage-formateur-titre { font-weight: var(--demi-gras); color: var(--bleu-nuit); }
.pointage-formateur tr { border-top: 2px solid var(--bord); }

.choix-presences {
  position: relative; 
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-1);
  margin: 0;
  padding: 0;
  border: 0;
}
.choix-presence {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  min-height: var(--cible);
  padding: 0 var(--e-3);
  border: 1px solid var(--bord-champ);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--bleu-nuit);
  font-size: var(--t-sm);
  font-weight: var(--demi-gras);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.choix-presence:hover { border-color: var(--bleu-nuit); }
.choix-presences input:checked + .choix-presence { color: var(--blanc); }
.choix-presences input:checked + .choix-present { border-color: var(--ok); background: var(--ok); }
.choix-presences input:checked + .choix-absent { border-color: var(--alerte); background: var(--alerte); }
.choix-presences input:checked + .choix-retard { border-color: var(--attente); background: var(--attente); }

.choix-presences input:focus-visible + .choix-presence {
  outline: 2px solid var(--bleu-nuit);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--halo-focus);
}
@supports (mask-image: none) or (-webkit-mask-image: none) {
  .choix-presences input:checked + .choix-presence::before {
    content: '';
    flex: none;
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: var(--picto) center / contain no-repeat;
    mask: var(--picto) center / contain no-repeat;
  }
  .choix-present { --picto: var(--picto-valide); }
  .choix-absent { --picto: var(--picto-alerte); }
  .choix-retard { --picto: var(--picto-horloge); }
}
.minutes-retard { display: inline-flex; align-items: center; gap: var(--e-1); font-size: var(--t-sm); }


.mention-case { display: block; margin-top: var(--e-1); font-size: var(--t-sm); color: var(--texte-doux); }
.erreur-case { display: block; margin: var(--e-1) 0 0; font-size: var(--t-sm); font-weight: var(--demi-gras); color: var(--alerte); }



a.mention-case {
  position: relative;
  margin-top: var(--e-3);
  color: var(--or-texte);
  font-weight: var(--demi-gras);
}
a.mention-case::after {
  content: '';
  position: absolute;
  inset: min(0px, calc((100% - var(--cible)) / 2)) 0;
}


.fiche-presence { margin-bottom: var(--e-4); }
.form-effacer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin: 0; }

.pointage-autres { margin-top: var(--e-4); }
.pointage-autres > summary { font-family: var(--police-titres); font-weight: var(--demi-gras); color: var(--bleu-nuit); }





.pointage-pied,
.repartition-pied {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: var(--e-4);
  padding: var(--e-3) 0;
  border-top: 1px solid var(--bord-fort);
  background: var(--surface);
}
.pointage-motif { max-width: var(--lecture-max); margin: var(--e-4) 0 0; }


@media screen { @media not all and (min-width: 768px) {
  .pointage-pied .actions { flex-wrap: nowrap; }
  .pointage-pied .actions > * { flex: 1 1 0; min-width: 0; white-space: normal; text-align: center; }
} }





.planning-jour .badge { max-width: 100%; white-space: normal; }







.sp-pastilles { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); margin: 0 0 var(--e-2); padding: 0; list-style: none; }
.sp-pastille { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.sp-pastille a,
.sp-propositions a,
.sp-propositions span { display: inline-flex; align-items: center; min-height: var(--cible); }
.sp-carre {
  display: inline-block;
  flex: none;
  width: var(--e-3);
  height: var(--e-3);
  border-radius: var(--r-xs);
  vertical-align: middle;
}
.sp-ajouts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--colonne-min)), 1fr));
  gap: var(--e-2) var(--e-6);
}
.sp-groupe { margin: var(--e-2) 0 0; color: var(--texte-doux); font-size: var(--t-sm); }
.sp-propositions { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); margin: 0; padding: 0; list-style: none; }
.sp-propositions a,
.sp-propositions span { padding: 0 var(--e-3); border: 1px solid var(--bord-champ); border-radius: var(--r-pill); }
.sp-propositions span { border-color: var(--bord-fort); color: var(--texte-doux); }
.sp-navigation .bouton-secondaire[aria-current="page"] { border-color: var(--bleu-nuit); background: var(--bleu-nuit); color: var(--blanc); }

.sp-tete-jour { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); margin-bottom: var(--e-3); }


.sp-jour .badge { max-width: 100%; white-space: normal; }
.sp-ligne {
  display: grid;
  grid-template-columns: var(--colonne-nom) minmax(0, 1fr);
  column-gap: var(--e-3);
  padding: var(--e-1) 0;
  border-top: 1px solid var(--bord);
}
.sp-axe { border-top: 0; overflow: hidden; }
.sp-nom { min-width: 0; margin: 0; font-weight: var(--demi-gras); overflow-wrap: anywhere; }
.sp-nom .texte-doux { font-weight: normal; }
.sp-souslignes { min-width: 0; }

.sp-sousligne {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  min-height: calc(var(--creneau) * 2);
  background-image: linear-gradient(to right, var(--bord) 1px, transparent 1px);
  background-size: calc(100% / 12) 100%;
}
.sp-sousligne + .sp-sousligne { margin-top: var(--e-0); }
.sp-axe .sp-sousligne { min-height: 0; background-image: none; }
.sp-repere,
.sp-bloc,
.sp-voile,
.sp-libre,
.sp-vide { grid-row: 1; }
.sp-bloc,
.sp-voile,
.sp-libre,
.sp-vide {
  min-width: 0;
  margin: var(--e-0) 1px;
  padding: var(--e-0) var(--e-1);
  border-radius: var(--r-xs);
  font-size: var(--t-xs);
  line-height: 1.35;
  overflow-wrap: anywhere;
}


.sp-bloc { position: relative; z-index: var(--z-grille); color: var(--blanc); }


.sp-bloc a { color: inherit; }

.sp-a-affecter { outline: 2px dashed var(--blanc); outline-offset: -3px; }
.sp-voile {
  background: repeating-linear-gradient(135deg, var(--voile-a) 0, var(--voile-a) 6px, var(--voile-b) 6px, var(--voile-b) 12px);
  color: var(--texte);
}
.sp-libre { background-color: var(--fond-ok); color: var(--ok-texte); font-weight: var(--demi-gras); }
.sp-vide { grid-column: 1 / -1; color: var(--texte-doux); }
.sp-repere {
  padding-left: var(--e-0);
  border-left: 1px solid var(--bord-fort);
  color: var(--texte-doux);
  font-size: var(--t-xs);
  white-space: nowrap;
}
.sp-maintenant {
  grid-row: 2;
  padding-left: var(--e-0);
  border-left: var(--filet) solid var(--or-fonce);
  color: var(--or-texte);
  font-size: var(--t-xs);
  font-weight: var(--demi-gras);
  white-space: nowrap;
}
.sp-annules { margin: var(--e-1) 0 0; font-size: var(--t-sm); }
.sp-a-regarder { margin: 0; padding-left: var(--e-5); }
.sp-a-regarder li { margin-bottom: var(--e-2); }
.sp-a-regarder a { margin-right: var(--e-2); }

.sp-calque-1 .sp-bloc, .sp-calque-1 .sp-carre { background-color: var(--calque-1); }
.sp-calque-2 .sp-bloc, .sp-calque-2 .sp-carre { background-color: var(--calque-2); }
.sp-calque-3 .sp-bloc, .sp-calque-3 .sp-carre { background-color: var(--calque-3); }
.sp-calque-4 .sp-bloc, .sp-calque-4 .sp-carre { background-color: var(--calque-4); }
.sp-calque-5 .sp-bloc, .sp-calque-5 .sp-carre { background-color: var(--calque-5); }
.sp-calque-6 .sp-bloc, .sp-calque-6 .sp-carre { background-color: var(--calque-6); }

.sp-de-0 { grid-column-start: 1; }   .sp-de-1 { grid-column-start: 2; }   .sp-de-2 { grid-column-start: 3; }   .sp-de-3 { grid-column-start: 4; }
.sp-de-4 { grid-column-start: 5; }   .sp-de-5 { grid-column-start: 6; }   .sp-de-6 { grid-column-start: 7; }   .sp-de-7 { grid-column-start: 8; }
.sp-de-8 { grid-column-start: 9; }   .sp-de-9 { grid-column-start: 10; }  .sp-de-10 { grid-column-start: 11; } .sp-de-11 { grid-column-start: 12; }
.sp-de-12 { grid-column-start: 13; } .sp-de-13 { grid-column-start: 14; } .sp-de-14 { grid-column-start: 15; } .sp-de-15 { grid-column-start: 16; }
.sp-de-16 { grid-column-start: 17; } .sp-de-17 { grid-column-start: 18; } .sp-de-18 { grid-column-start: 19; } .sp-de-19 { grid-column-start: 20; }
.sp-de-20 { grid-column-start: 21; } .sp-de-21 { grid-column-start: 22; } .sp-de-22 { grid-column-start: 23; } .sp-de-23 { grid-column-start: 24; }
.sp-fi-1 { grid-column-end: 2; }     .sp-fi-2 { grid-column-end: 3; }     .sp-fi-3 { grid-column-end: 4; }     .sp-fi-4 { grid-column-end: 5; }
.sp-fi-5 { grid-column-end: 6; }     .sp-fi-6 { grid-column-end: 7; }     .sp-fi-7 { grid-column-end: 8; }     .sp-fi-8 { grid-column-end: 9; }
.sp-fi-9 { grid-column-end: 10; }    .sp-fi-10 { grid-column-end: 11; }   .sp-fi-11 { grid-column-end: 12; }   .sp-fi-12 { grid-column-end: 13; }
.sp-fi-13 { grid-column-end: 14; }   .sp-fi-14 { grid-column-end: 15; }   .sp-fi-15 { grid-column-end: 16; }   .sp-fi-16 { grid-column-end: 17; }
.sp-fi-17 { grid-column-end: 18; }   .sp-fi-18 { grid-column-end: 19; }   .sp-fi-19 { grid-column-end: 20; }   .sp-fi-20 { grid-column-end: 21; }
.sp-fi-21 { grid-column-end: 22; }   .sp-fi-22 { grid-column-end: 23; }   .sp-fi-23 { grid-column-end: 24; }   .sp-fi-24 { grid-column-end: 25; }





@media screen { @media not all and (min-width: 768px) {
  .sp-ligne,
  .sp-souslignes,
  .sp-sousligne { display: block; }
  
  .sp-ligne.sp-axe { display: none; }
  .sp-sousligne { min-height: 0; background-image: none; }
  .sp-nom { margin-bottom: var(--e-1); }
  .sp-bloc,
  .sp-voile,
  .sp-libre,
  .sp-vide { margin: 0 0 var(--e-1); padding: var(--e-1) var(--e-2); }
} }






.courriel-corps,
.document-apercu { white-space: pre-wrap; overflow-wrap: anywhere; }






.apercu-balise { white-space: pre-line; overflow-wrap: anywhere; }
.apercu-balise p { margin: 0 0 var(--e-2); }
.apercu-vide { min-height: 1em; }
.apercu-titre { font-weight: 700; }
.apercu-titre-1 { font-size: var(--t-lg); }
.apercu-titre-3 { font-size: var(--t-md); }
.apercu-centre { text-align: center; }
.apercu-gras { font-weight: 700; }
.apercu-italique { font-style: italic; }
.apercu-souligne { text-decoration: underline; }
.apercu-liste { margin: 0 0 var(--e-2); padding-left: var(--e-6); }




.actualite-texte { white-space: pre-line; overflow-wrap: anywhere; }




.bloc-actualites { margin-bottom: var(--e-7); }
.bloc-actualites > h2 { margin-top: 0; }
.annonces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--colonne-min) * 1.4)), 1fr));
  gap: var(--e-5);
  align-items: stretch;
}
.annonces > * { min-width: 0; }
.annonce { display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: 0; overflow: hidden; }
.annonce-corps { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--e-2); min-width: 0; }
.annonce-corps > p { margin: 0; }
.annonce-corps > .actions { margin-top: auto; padding-top: var(--e-2); }
.annonce > .annonce-image {
  margin: calc(var(--carte-marge) * -1) calc(var(--carte-marge) * -1) 0;
  aspect-ratio: 16 / 9;
  background: var(--surface-basse);
}
.annonce-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.annonce-une {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--colonne-min) * 2)), 1fr));
  gap: var(--e-5);
  padding: 0;
}
.annonce-une > .annonce-image { margin: 0; min-height: var(--colonne-min); }
.annonce-une > .annonce-corps { padding: var(--e-5); justify-content: center; }
.annonce-une:not(:has(> .annonce-image)) > .annonce-corps { max-width: var(--lecture-max); }
.annonce-une h3 { font-size: var(--t-lg); }

.annonce-apercu { display: block; max-width: var(--colonne-min); max-height: var(--colonne-min); border-radius: var(--r-md); }


.frise {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--colonne-min)), 1fr));
  gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.frise > * { min-width: 0; }
.evenement { display: flex; align-items: flex-start; gap: var(--e-4); margin: 0; }
.evenement-date {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  min-width: calc(var(--e-8) + var(--e-6));
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-md);
  background: var(--bleu-nuit);
  color: var(--blanc);
  font-family: var(--police-titres);
  line-height: var(--interligne-titres);
}
.evenement-jour { color: var(--or); font-size: var(--t-xl); font-weight: var(--gras); }
.evenement-mois { font-size: var(--t-xs); font-weight: var(--demi-gras); }
.evenement-corps { display: flex; flex-direction: column; gap: var(--e-1); min-width: 0; overflow-wrap: anywhere; }
.evenement-titre { margin: 0; }


.veille-mois { margin-bottom: var(--e-4); }
.veille-mois > .actualite-texte { margin-top: var(--e-3); }
.veille-rubrique { margin: var(--e-5) 0 var(--e-2); }
.veille-articles { margin: 0; padding-left: var(--e-5); }
.veille-articles > li { margin-bottom: var(--e-3); overflow-wrap: anywhere; }
.veille-resume { margin: var(--e-1) 0 0; }




.reponse-libre { white-space: pre-line; overflow-wrap: anywhere; }
.aide-question { white-space: pre-line; overflow-wrap: anywhere; }





.tableau-premium.tableau-assiduite thead th,
.tableau-premium.tableau-facturation thead th { white-space: normal; }





.matrice-rattachements tbody th,
.matrice-rattachements thead tr:first-child th:first-child { position: sticky; left: 0; z-index: 1; }

.matrice-rattachements td { text-align: center; }




.cahier-cours { margin-top: var(--e-4); }
.cahier-cours + .cahier-cours { border-top: 1px solid var(--bord); padding-top: var(--e-4); }


.filtres-cahier { margin-bottom: var(--e-5); }
.filtres-cahier p { margin: 0 0 var(--e-2); overflow-x: auto; white-space: nowrap; }




.page-cours { display: grid; gap: var(--e-6); margin-bottom: var(--e-5); }
.page-cours.avec-repartition { grid-template-columns: minmax(0, 1fr) var(--colonne-laterale); align-items: start; }

.page-cours-principal, .page-cours-cote, .page-cours-envoi { display: grid; gap: var(--e-6); min-width: 0; }
.page-cours-principal > .carte, .page-cours-cote > .carte, .page-cours-envoi > .carte { margin: 0; }
.page-cours-envoi > .actions { margin: 0; }


.liens-bloc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-6) var(--e-4); }
@media (max-width: 1100px) {
  .page-cours.avec-repartition { grid-template-columns: minmax(0, 1fr); }
}






.choix-qcm { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); }
.choix-qcm > label { margin: 0; flex: none; }
.choix-qcm > input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }






.reglages-generaux .grille-champs { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--colonne-min)), 1fr)); }
.reglages-generaux .champ input[type="number"],
.reglages-generaux .champ input[type="time"] { width: 8rem; max-width: 100%; }

.reglages-generaux .champ input[type="date"] { width: 11rem; max-width: 100%; }

.pauses-programmees { margin-top: var(--e-5); }
.pauses-programmees li + li { margin-top: var(--e-3); }
.pauses-programmees form { margin-top: var(--e-2); }

.relances-reglage .champ input[type="number"] { width: 8rem; max-width: 100%; }

.relances-reglage .grille-champs { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--colonne-min)), 1fr)); }


.relances-liste { table-layout: fixed; }
.relances-liste .col-relance { width: 18%; }
.relances-liste .col-pour-qui { width: 24%; }
.relances-liste .col-quand { width: 19%; }
.relances-liste .col-canaux { width: 18%; }
.relances-liste .col-etat { width: 9%; }
.relances-liste .col-dernier { width: 12%; }





.guide-liste { margin: 0; padding: 0; list-style: none; }
.guide-liste > li { padding: var(--e-2) 0; border-top: 1px solid var(--bord); }
.guide-liste > li:first-child { border-top: 0; padding-top: 0; }
.guide-groupe { margin: var(--e-5) 0 var(--e-2); }


.guide-etapes, .guide-puces { margin: var(--e-3) 0; padding-left: var(--e-6); }
.guide-etapes > li, .guide-puces > li { margin-bottom: var(--e-2); padding-left: var(--e-1); }

.guide-bouton { color: var(--bleu-nuit); }



.guide-encadre {
  margin: var(--e-3) 0;
  padding: var(--e-3) var(--e-4);
  background: var(--surface-basse);
  border-left: var(--barre-accent) solid var(--bord-fort);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.guide-encadre-attention { border-left-color: var(--or); }
.guide-encadre-mot { color: var(--bleu-nuit); }

.guide-capture { display: block; max-width: 100%; height: auto; margin: var(--e-3) 0; border: 1px solid var(--bord); border-radius: var(--r-md); }


.guide-question { border-top: 1px solid var(--bord); padding: var(--e-2) 0; }
.guide-question > summary { cursor: pointer; }
.guide-question-titre { display: inline; margin: 0; font-size: var(--t-base); }
.guide-reponse { padding: var(--e-2) 0 0 var(--e-4); }
.guide-reponse > :last-child { margin-bottom: 0; }


.guide-voisines { display: flex; flex-wrap: wrap; gap: 0 var(--e-6); margin-top: var(--e-5); }
.guide-voisines a { display: inline-flex; align-items: center; min-height: var(--cible); }




.guide-chemin { margin: 0 0 var(--e-4); padding: var(--e-3); background: var(--surface-basse); border: 1px solid var(--bord); border-radius: var(--r-md); }
.guide-chemin-rangee { display: flex; flex-wrap: wrap; gap: var(--e-1); }
.guide-chemin-rangee + .guide-chemin-rangee { margin-top: var(--e-2); padding-top: var(--e-2); border-top: 1px solid var(--bord); }
.guide-chemin-element { padding: var(--e-1) var(--e-3); border: 1px solid var(--bord-fort); border-radius: var(--r-pill); background: var(--surface); color: var(--texte-doux); font-size: var(--t-sm); }
.guide-chemin-marque { border-color: var(--bleu-nuit); background: var(--bleu-nuit); color: var(--or); font-weight: var(--gras); }



.guide-sommaire, .guide-sommaire ol { margin: 0; padding-left: var(--e-6); }
.guide-sommaire > li { margin-top: var(--e-3); font-weight: var(--demi-gras); }
.guide-sommaire ol { margin-top: var(--e-1); font-weight: normal; }
.guide-chapitre-titre { margin: var(--e-6) 0 var(--e-3); }
.guide-fiche { margin-bottom: var(--e-4); }
.guide-mots { margin: var(--e-3) 0; }
.guide-mots dt { font-weight: var(--gras); color: var(--bleu-nuit); }
.guide-mots dd { margin: 0 0 var(--e-2); }






.parametres-cartes { columns: 22rem; column-gap: var(--e-4); }
.parametres-cartes > .carte { break-inside: avoid; margin-bottom: var(--e-4); }
@media (max-width: 768px) {
  .parametres-cartes { columns: auto; }
}






.trames-chemin { order: 1; flex: 1 1 100%; font-size: var(--t-md); }
.trames-chemin ol { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin: 0; padding: 0; list-style: none; }
.trames-dossiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--e-2);
  margin: 0 0 var(--e-4);
  padding: 0;
  list-style: none;
}
.trames-dossiers > li {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
}
.trames-dossiers > li > span { min-width: 0; overflow-wrap: anywhere; }



.trames-panneau { min-width: min(20rem, calc(100vw - 2 * var(--gouttiere))); }
.trames-panneau > form + form { margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid var(--bord); }
.trames-panneau select { width: 100%; margin: var(--e-1) 0 0; }
.trames-panneau button { margin-top: var(--e-2); }
.trames-extension { display: flex; align-items: center; gap: var(--e-1); }
.trames-extension > input { flex: 1 1 auto; min-width: 0; margin-top: 0; }

.trames-gestes-dossier {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--colonne-min)), 1fr));
  gap: var(--e-2) var(--e-5);
  margin-bottom: var(--e-4);
}


@media screen { @media not all and (min-width: 768px) {
  .tableau-cartes .actions > .evt-details[open] { flex-basis: 100%; }
} }



.tableau-eleves-session td > select,
.tableau-eleves-session td > input:not([type="hidden"]) {
  display: block;
  width: 100%;
  min-width: min(var(--champ-min), 100%);
  max-width: 16rem;
  margin: 0 0 var(--e-1);
}
.tableau-eleves-session td.geste > form { display: block; margin-bottom: var(--e-1); }


.tableau-eleves-session td.geste > details { margin-bottom: var(--e-1); white-space: normal; }
.tableau-eleves-session td.geste > details > form { display: block; margin-top: var(--e-1); }
.tableau-eleves-session .interruption-session input:not([type="hidden"]) { display: block; width: 100%; max-width: 16rem; }






.creation-formateurs ul, .creation-eleves ul { column-width: 18rem; column-gap: var(--e-6); }
.creation-formateurs li, .creation-eleves li { break-inside: avoid; }
.creation-formateurs label, .creation-eleves label { display: flex; align-items: center; min-height: var(--cible); }
.creation-formateurs-ajout { margin-left: var(--e-5); font-size: var(--t-sm); color: var(--texte-doux); }




.tableau-scenario td > select { width: 14rem; max-width: 100%; }


.tableau-scenario .pieces-jointes ul { column-width: 20rem; column-gap: var(--e-6); }
.tableau-scenario .pieces-jointes li { break-inside: avoid; }




.mois-repartition { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4); }
.mois-repartition > .conteneur-tableau { flex: 1 1 32rem; min-width: 0; }
.mois-camembert { position: relative; flex: none; width: 10rem; margin: 0 auto; }
.mois-camembert svg { display: block; width: 100%; height: auto; }
.camembert-part { fill: none; stroke-width: 6; }
.camembert-direction { stroke: var(--role-direction); }
.camembert-formateur { stroke: var(--role-formateur); }
.camembert-partenaire { stroke: var(--role-entreprise); }
.camembert-eleve { stroke: var(--role-eleve); }
.camembert-automatisations { stroke: var(--role-automatisations); }
.camembert-reste { stroke: var(--bord); }
.camembert-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-align: center;
}
.camembert-centre strong { font-family: var(--police-titres); font-size: var(--t-lg); }
.camembert-centre span { font-size: var(--t-sm); color: var(--texte-doux); }

.pastille-role { display: inline-block; width: 0.75em; height: 0.75em; margin-right: var(--e-2); border-radius: 50%; vertical-align: baseline; }
.pastille-direction { background: var(--role-direction); }
.pastille-formateur { background: var(--role-formateur); }
.pastille-partenaire { background: var(--role-entreprise); }
.pastille-eleve { background: var(--role-eleve); }
.pastille-automatisations { background: var(--role-automatisations); }




.depot-piece { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
@media screen { @media not all and (min-width: 768px) {
  .depot-piece { grid-template-columns: minmax(0, 1fr); }
} }
.depot-piece-image {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  border: 1px solid var(--bord);
  border-radius: var(--r-xs);
  background: var(--surface-basse);
  object-fit: contain;
}




.champ-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.message-demande { white-space: pre-wrap; overflow-wrap: anywhere; }