[hidden] { display: none !important; }

table.menufichiers td{
  border-color: var(--carte);
  border: none;
  border-bottom: none !important;
  font-size: 1rem;
}
table.menufichiers{
  margin-top: -20px;
  width:100%;
}

.alerte {
  display: flex; align-items: center; gap: .5rem;
  margin: 1rem 1rem 0;
  padding: .6rem .8rem;
  border-radius: var(--rayon);
  font-size: .9rem;
}
.alerte-erreur {
  background: var(--fond-erreur-doux);
  border: 1px solid var(--erreur);
  color: var(--erreur-fort);
}

.connexion {
  max-width: 24rem;
  margin: 2rem auto;
}
.connexion .actions { justify-content: flex-end; }





/* ─── bandeau supérieur ──────────────────────────────────── */
.bandeau-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* garde tes propriétés existantes : fond, padding… */
}

.bandeau-outils {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ─── boutons d'outils sur fond sombre ───────────────────── */
.btn-outil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--bordure-fort);
  border-radius: var(--rayon);
  background: var(--entete-actif);
  color: var(--carte);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.btn-outil:hover {
  background: var(--entete-survol);
  border-color: var(--bordure);
}

.btn-outil:focus-visible {
  outline: 2px solid var(--carte);
  outline-offset: 2px;
}


.btn-outil .icone {
  font-size: 1rem;
  flex: 0 0 auto;
}

/* ─── repli sur écran étroit : icônes seules ─────────────── */
@media (max-width: 900px) {
  .btn-outil .libelle { display: none; }
  .btn-outil { padding: 7px 10px; }
}



.petit{
  font-size: .8rem;
}

.gras{
  font-weight: bold;
}

body:has(dialog.modal[open]) {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

a{
  cursor: pointer!important;
}

a:link {
  color: var(--lien);
}
a:visited {
  color: var(--lien);
}
a:hover {
  color: var(--champs);
}
a:active {
  color: var(--champs);
}

.lien {
  background: none;
  border: none;
  padding: 0;
  color: var(--lien);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.lien:hover{
  color: var(--champs);
}

.clockbox h2{
  font-size: 1em;
  padding:5px ;
  margin: 0px;
  background-color: var(--accent);
}

h3{
  font-family: marianne, sans-serif;
  color: var(--fond-succes-fort);
  font-size: 1.3em;
  margin-bottom: .5em;
}

form {
    margin: 0;
    padding: 0;
}

fieldset {
    margin: 0;
    min-width: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--hairline-color);
}

hr {
    clear: both;
    color: var(--hairline-color);
    background-color: var(--hairline-color);
    height: 1px;
    border: none;
    margin: 0;
    padding: 0;
    line-height: 1px;
}

.principal{
    padding : 10px;
    margin-top: 0px;
}


/* titre */

.tete-header {
  display: flex;
  align-items: center;
  justify-content: space-between;   
  flex-wrap: wrap;                  
  gap: 1rem;
  padding: 1.25rem 1.5rem 1rem;     
}

.tete-titre {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .6rem;
}

.badge {
  background: var(--fond-focus);
  color: var(--champs);
  font-size: .95rem;
  font-weight: 500;
  padding: .2em .75em;
  border-radius: 1em;
}

.btn-retour .icone,.btn-aller .icone  { transition: transform .15s ease; }
.btn-retour:hover .icone  { transform: translateX(-3px); }
.btn-aller:hover .icone  { transform: translateX(3px); }

.btn-export { display: inline-flex; align-items: center; gap: .4em; }
.btn-export .icone { transition: transform .18s ease; }
.btn-export:hover .icone { transform: translateY(2px); }


.tete-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.chargement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 2rem 1rem;
  color: var(--texte-doux);
  font-size: .9rem;
  font-style: italic;
}

/* petit disque qui tourne */
.chargement::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--bordure);
  border-top-color: var(--champs);
  border-radius: 50%;
  animation: rotation .7s linear infinite;
}

@keyframes rotation {
  to { transform: rotate(360deg); }
}

.flottant-corps:has(.chargement) {
  display: flex;
  align-items: center;
  justify-content: center;
}

#chargement-htmx {
  display: inline-flex;
  visibility: hidden;
  padding: 0;
  font-size: .9rem;
  white-space: nowrap;
}

#chargement-htmx.htmx-request { visibility: visible; }


#chargement-htmx::before { animation-play-state: paused; }
#chargement-htmx.htmx-request::before { animation-play-state: running; }



.btn {
  justify-content: center;
  font: inherit;
  cursor : pointer; 
  min-width: 85px;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 0rem .4rem;
  height: 32px;
  color: var(--lien);
  text-decoration: none;
  background: var(--carte);
  border: 1px solid var(--lien);
  border-radius: var(--rayon);
  transition: background .15s, border-color .15s;
  box-sizing: border-box;
}

.btn--danger {
  background: var(--erreur);
  border-color: var(--erreur);
  color: var(--carte);
  font-weight: 500;
}

.btn--danger:hover { background: var(--erreur-fort); border-color: var(--erreur-fort); }

.btn--primaire {
  background: var(--champs);
  border-color: var(--champs);
  color: var(--carte);
  font-weight: 500;
}
.btn--primaire:hover { background: var(--champs-fort); border-color: var(--champs-fort); }


.btn--petit {
  min-width: 25px;
  font-size: .7rem;
  max-height: 20px;
} 

.btn--moyen {
  min-width: 25px;
  font-size: .85rem;
  max-height: 26px;
} 

.btn:disabled {
  cursor: initial;
  background: var(--fond);
  border-color: var(--fond);
  color: var(--texte-doux)
}

a.btn:hover {
  background: var(--fond);
  border-color: var(--champs);
  color: var(--champs);
}

button.btn:hover:enabled {
  background: var(--fond);
  border-color: var(--champs);
  color:  var(--champs);
}


span.btn:hover{
  border-color : var(--secondary); background-color : var(--primary); outline : none;
  text-align: center;
  box-sizing: border-box;
}

span.btn{
  text-align: center;
  box-sizing: border-box;
}



input, textarea {
    font-family: var(--font-family-monospace);
}

.milieu{
  vertical-align: middle!important;
}


select {
  font: inherit;
  height: 32px;
  box-sizing: border-box;
  padding: 0rem .45rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: var(--carte);
}

select[multiple] {
    height: auto;
    min-height: 150px;
}

.sansBR br{
  display: none;
}


ul.listeItem {
  margin: 0;
  padding-left: 1.2rem;
}

ul.listeItem  li {
  position: relative;
  list-style-type: none;
  padding-left: 10px;
  margin-bottom: 10px;
}

ul.listeItem  li::before {
content: "\003E";
  color: darkblue;
  font-size: 1rem;
  margin-right: 5px;
}

ul.subItem {
  margin: 0;
  padding-left: 1.2rem;
}

ul.subItem  li::before {
  content: "\226B";
  color: darkblue;
  font-size: 1rem;
  margin-right: 5px;
}

ul.subItem  li {
  position: relative;
  list-style-type: none;
  padding-left: 10px;
  margin-bottom: 5px;
}

.cadre {
  /*display: inline-block;padding-block: 5px;*/
  border: solid 1px var(--succes);
  margin-top: 5px;
  margin-bottom: 5px;
  border-radius: var(--rayon);
  padding: 5px;
  background-color: var(--accent);
}

.enregistre {
  margin-top: 10px;
  margin-bottom: 10px;
  display: block;
}

.erreur{
  background-color: var(--lien)!important;
}

span.maj{
  color:var(--menu-actif);
}


.errorlist{
  background-color: var(--lien);
  padding: 5px;
  color: var(--carte);
  font-size: 1.5em;
  list-style-type: none;
  border-radius: var(--rayon);
}

.flash.enregistre-erreur > ul > li{
  font-size: 1.3rem;
}

.infos{
  color: var(--champs-fort)!important;
  font-style: italic;
  font-family: initial!important;
  letter-spacing: initial!important;
}

.nolink{
  text-decoration-line: none;
  color: var(--lien);
}

.nolink:hover{
  color: var(--lien);
}

#embedded_pdf{
  height: calc(100vh - 240px);
  display: block;
}

.modif{
  color:purple;
  font-weight: bold;
}

.desistement td{
  color:var(--erreur)!important;
}

.barreConcours{
  background: lightgreen!important;
}

summary{
  cursor: pointer;
}

summary, section header {
    color: var(--succes-fort);
}

summary:hover{
  color: var(--champs);
}





table.tableauHorizontal {
  width: 100%;
  table-layout: fixed;
}

table.tableauHorizontal {
  margin-top: 10px;
  margin-bottom: 10px;
}

table.tableauHorizontal input[type=text],
table.tableauHorizontal input[type=email],
table.tableauHorizontal textarea{
  width: calc(100% - 15px);
}

table.tableauHorizontal:not(.petit) input[type=text],
table.tableauHorizontal:not(.petit) input[type=email],
table.tableauHorizontal:not(.petit) textarea
{
  font-size: 1.1em;
}



.data, table.tableauVertical td{
  font-family: var(--font-family-monospace);
  letter-spacing: -0.5px;
  color:var(--secondary)
}

.contenant-table {
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}


.tableauVertical {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8125rem;
  table-layout: fixed;      
}

.tableauVertical thead th, .tableauVertical tbody th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--fond);
  padding: 0;
  text-align: left;
  font-weight: 500;
  white-space: nowrap;
  font-weight: bold;
}

.tableauVertical thead th{
  border-bottom: 1px solid var(--bordure);
}

.tableauVertical tbody th{
  border-right: 1px solid var(--bordure);
  padding: .6rem .35rem;
}

.matrice thead th:first-child{
  border-bottom:none!important;
}

table caption {
  caption-side: top;
  text-align: left;
  background: var(--fond);
  color: black;
  font-weight: bold;
  font-size: .9rem;
  text-transform: uppercase;
  padding: 9px 14px;
  border-bottom: 1px solid var(--bordure);
}

.matrice .angle {
  position: relative;      /* référent pour le SVG et les spans absolus */
  padding: 0;
  width: 120px;
  height: 44px;
  background: var(--carte);
  vertical-align: middle;
  overflow: hidden;
}

.matrice .angle svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.matrice .angle line {
  stroke: var(--bordure);
  stroke-width: 1;
}

.matrice .angle .hi {
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--secondary)
}

.matrice .angle .lo {
  position: absolute;
  bottom: 5px;
  left: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--secondary)
}



.tableauVertical thead th:not(:has(button)) {
  padding: .6rem .35rem;
}


.tableauVertical td {
  padding: .5rem .35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tableauVertical td input[type=number]{
  font-size: .9rem;
  padding: 6px 8px;
  border: 1px solid var(--bordure); ;
  border-radius: var(--rayon);
}

.tableauVertical tbody tr:nth-child(even of :not([hidden])) { background: var(--fond) }
.tableauVertical tbody tr:nth-child(odd  of :not([hidden])) { background: white }

.tableauVertical tbody tr:hover { background: var(--fond-focus); }

.pastille {
  display: inline-block;
  padding: 1px 4px;
  border-radius: var(--rayon);
  font-size: .8rem;
  background: var(--fond);
  color: var(--texte-doux);
  white-space: nowrap;   
}
.pastille-oui { background: var(--succes); color:  var(--texte-inverse); }
.pastille-attention { background: var(--fond-alerte-fort); color: var(--texte-doux); }
/* Un décompte de secours n'est pas une alerte : il partageait l'ambre de
   .pastille-attention avec « planning modifié », affiché deux lignes plus bas. */
.pastille-secours { background: var(--fond-secours); color: var(--secours-texte); }
.pastille-erreur { 
  background: var(--fond-erreur); 
  color: var(--texte-inverse); }
.pastille-info {
  background: var(--fond-focus-fort);
  color: var(--champs-fort);
}




.table-donnees th,
.table-donnees td {
  padding: .75rem 1rem!important;
  text-align: left;
}


.carte {
    background: var(--carte); border: 1px solid var(--bordure-succes); border-radius: var(--rayon);
    overflow: hidden; margin-bottom: 1.5rem;
    box-shadow:var(--ombre-posee);
  }

details.carte:not(:has(> summary)) { display: none; }

.actions-colonne .carte{
  margin-bottom: 0;
}

 .carte .label { display: flex; align-items: center; gap: .5rem; }

 .carte .details{
  font-size: .8em;
  margin-right: 5px;
  color: var(--texte-doux);
 }

details.carte > summary,
.carte > .carte-tete {
  height: 25px;
  max-height: 25px;
  margin: 0; padding: .65rem 1rem;
  font-size: 1rem; font-weight: 500;
  background: var(--fond-succes);
  border-left: 3px solid var(--bordure-succes);
  border-bottom: 1px solid var(--bordure-succes);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

/* Un en-tête qui contient un <select> : la règle ci-dessus fixe 25 px, prévus
   pour une ligne de texte, et le menu déroulant s'y ferait rogner par
   l'overflow:hidden de .carte. Doit rester APRÈS elle — même spécificité, c'est
   l'ordre qui tranche. Employée par documents (jour) et accueil (jour). */
.carte > .entete-jour {
  height: auto;
  max-height: none;
  padding-top: .4rem;
  padding-bottom: .4rem;
}
details.carte-erreur{
  border: 1px solid var(--erreur);
}

details.carte-erreur > summary{
  background: var(--fond-erreur-doux)!important;
  color: var(--erreur-fort)!important;
  border-bottom: 1px solid var(--erreur); 
  border-left: 3px solid var(--erreur);
}

details.carte-erreur > summary:hover{
  background: var(--fond-erreur)!important;
}

details.carte > summary { list-style: none; cursor: pointer; }
details.carte > summary::-webkit-details-marker { display: none; }
details.carte > summary:hover { background: var(--survol-succes); }
details.carte:not([open]) > summary { border-bottom: none; }



details .contenu, section .contenu{
  padding: 10px;
}

.centre{
  display: grid; place-items: center;
}


.carte-infos {
  border-top: 1px solid var(--bordure);
}

/* ---------- Consignes : les règles du jeu, au-dessus d'un formulaire ----------
   Registre ambre, celui de .pastille-attention : ce n'est pas une erreur mais une
   mise en garde, à lire avant de saisir. Le filet à gauche fait la marge visuelle
   sans encadrer lourdement. */
.consignes {
  padding: .7rem .9rem .7rem .8rem;
  border: 1px solid var(--fond-alerte-fort);
  border-left: 3px solid var(--alerte);
  border-radius: var(--rayon);
  background: var(--fond-alerte);
  font-size: .9rem;
  line-height: 1.5;
}

.consignes-titre {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-weight: 600;
  color: var(--alerte-texte);
}

.consignes-titre .icone { flex: none; }

.consignes ul {
  margin: .45rem 0 0;
  padding-left: 1.6rem;
  color: var(--texte);
}

.consignes li { margin: .2rem 0; }

.consignes li::marker { color: var(--alerte); }

/* Variante informative du même bloc : bleu du registre « champs », pour distinguer
   d'un coup d'œil un état transitoire (composition proposée, non enregistrée) d'une
   mise en garde permanente. */
.consignes-info {
  border-color: var(--fond-focus-fort);
  border-left-color: var(--champs);
  background: var(--fond-focus);
}

.consignes-info .consignes-titre { color: var(--champs-fort); }
.consignes-info li::marker       { color: var(--champs); }

.carte-vide {
  padding: 20px;
}

.actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: .7rem 1rem;
  border-top: 1px solid var(--bordure);
  background: var(--fond);
}

.actions.haut:first-child{
  border-bottom: 1px solid var(--bordure);
  border-top: none;
  margin-top: 0px;
}

.actions .droite { 
  margin-left: auto; 
}

.bordure-bas{
  border-bottom: 1px solid var(--bordure);
}

.actions:first-child{
  margin-top: .7rem;
}

.actions:last-child{
  border-radius: 0 0 var(--rayon) var(--rayon);
}

.actions form{
  display: flex;
  flex-wrap: wrap;        /* passe à la ligne si la place manque */
  align-items: center;    /* aligne verticalement select/input/button */
  gap: 0.75rem;           
}

.actions-colonne{
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.actions-ligne{
  display: flex;
  align-items: baseline; 
  gap: .75rem;
  margin-bottom: 5px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--bordure) ;
}




.actions-ligne:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.actions-ligne > .actions-titre {
  flex: 0 0 80px;
  margin: 0;
}

.large .actions-titre{
  flex: 0 0 160px;
  font-weight: bold;
}

.tres-large .actions-titre{
  flex: 0 0 200px;
  font-weight: bold;
}

.actions-ligne > .actions-contenu {
  display: flex;
  column-gap: 1rem;
align-items: baseline; 
  flex: 1;          /* occupe tout le reste */
  min-width: 0;     /* évite les débordements si le contenu est long */
}


.tiersTemps {
  background: var(--fond-alerte);
  border: 1px solid var(--alerte-texte);
  border-left: 3px solid var(--alerte);
  border-radius: var(--rayon);
  margin-bottom: 1rem;
}
.tiersTemps > summary {
  list-style: none; cursor: pointer;
  padding: .6rem .8rem;
  display: flex; align-items: center; gap: .5rem;
  color: var(--alerte-texte);
}
.tiersTemps > summary::-webkit-details-marker { display: none; }
.tiersTemps > summary:hover { background: var(--fond-alerte-fort); border-radius: var(--rayon);}
.tiersTemps .titre { font-weight: bold; }
.tiersTemps .apercu { margin-left: auto; padding-right: .25rem; }
.tiersTemps .contenu { padding: 0 .8rem .7rem 2rem; }

/* ---------- Paires clé / valeur : remplace les » imbriqués ---------- */
dl.champs { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; font-size: .9rem; align-items: baseline; }
dl.champs dt { color: var(--texte-doux); }
dl.champs dd { margin: 0; }
dl.champs .vide { color: var(--texte-tres-doux); font-style: italic; }

.oral { border: 1px solid var(--bordure); border-radius: var(--rayon); margin-bottom: .5rem; }
.oral > summary {
  list-style: none; cursor: pointer;
  padding: .6rem .8rem;
  display: flex; align-items: center; gap: .75rem;
  border-radius: var(--rayon);
  background-color: var(--fond);
}
.oral > summary::-webkit-details-marker { display: none; }
.oral > summary:hover { background: var(--fond); }
.oral[open] > summary { border-bottom: 1px solid var(--bordure); border-radius: var(--rayon) var(--rayon) 0 0; }
.oral > summary:focus-visible { outline: 2px solid var(--champs); outline-offset: 2px; }

.oral .nom { color: black; }
.oral .matiere { color: var(--texte-doux); }

/* Les 3 infos qu'on cherche vraiment : visibles sans ouvrir */
.oral .resume {
  margin-left: auto;
  display: flex; align-items: center; gap: 1rem;
  font-size: .875rem; color: var(--texte-doux);
  white-space: nowrap;
}
.oral .resume .item { display: inline-flex; align-items: center; gap: .3rem; }
.note {
  background: var(--fond-focus);
  font-weight: 500; font-size: .875rem;
  padding: .1rem .55rem; border-radius: 1em;
}
.note.attente { background: var(--bordure-doux); color: var(--texte-doux); font-weight: 400; font-style: italic; }

.oral .corps { padding: .75rem .8rem .8rem 1.6rem; }

.oral-detail { list-style: none; margin:0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.oral-detail li {
  background: var(--fond); border: 1px solid var(--bordure-doux);
  border-radius: 1em; padding: 5px 10px;
}
.oral-detail .oral-detail-detail { color: var(--texte-doux); }

.oral-detail-detail {
  padding-left: 5px;
  margin-left: 5px;
  border-left: 1px solid var(--bordure);
}

.flash {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  font-size: 1.5rem;
  /* apparence */
  padding: 0.75rem 1rem;
  border: 1px solid var(--menu-fond);
  border-radius: var(--rayon);
  color: var(--texte-inverse);
  opacity: 0;
  visibility: hidden;
}
@keyframes flash-cycle {
  0%   { opacity: 0; visibility: visible; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

.flash.actif {
  animation: flash-cycle 3s ease-in-out forwards;
}

.flash.actif.enregistre-erreur{
  background: var(--erreur);
  animation: flash-cycle 9s ease-in-out forwards;
}

.flash.enregistre-succes{
  background: var(--succes);
}

.flash.actif.enregistre-attention{
  background: var(--fond-alerte-fort);
  animation: flash-cycle 9s ease-in-out forwards;
  color:black;
}

.accueil-pre{
  display: flex;
    justify-content: center;
    align-items: center;
}

.accueil-pre .emoji{
  font-size: 15vw;
}

.saisie-invalide {
  border-color: var(--erreur)!important;
  background: var(--fond-erreur-doux)!important;
}