/*
 | Feuille de style de l'application.
 |
 | Extraite de views/layout.php : elle y etait reenvoyee a chaque page, alors
 | qu'un fichier se met en cache une fois. Elle est aussi editable sans naviguer
 | dans du PHP, ce qui change tout des qu'on travaille le visuel.
 |
 | QUATRE REGLES, et tout le reste en decoule. Elles remplacent des valeurs
 | choisies a l'oeil au fil des besoins : l'ancienne feuille comptait treize
 | tailles de texte entre 10 et 23 px — dont six demi-pixels — et vingt-deux
 | valeurs d'espacement. Ni l'une ni l'autre ne formait un systeme, et c'est
 | precisement ce qui donnait a l'interface son air inachevee.
 |
 |   1. TYPOGRAPHIE — six crans, et aucune valeur en dur ailleurs. Pour accentuer,
 |      on augmente le POIDS avant la taille : un nom en 15/600 ressort mieux
 |      qu'en 15.5/400, et ne casse pas le rythme vertical.
 |
 |   2. ESPACEMENT — un rythme de 4 px, nomme par son multiplicateur. Un ecart de
 |      9 ou 13 px ne se distingue pas de 8 ou 12 : il ne cree pas de groupe, il
 |      cree du flou.
 |
 |   3. ELEVATION — trois niveaux d'ombre, teintees a l'encre et non au noir. Une
 |      ombre noire sur un fond colore parait sale. C'est le changement le plus
 |      visible : vingt-sept filets d'un pixel sur fond quasi blanc, c'etait le
 |      langage d'un formulaire non style.
 |
 |   4. MOUVEMENT — deux durees. Une interface qui ne repond pas au geste parait
 |      cassee, meme quand elle fonctionne. Tout est neutralise sous
 |      prefers-reduced-motion, en bas de fichier.
 |
 | Ce qui n'a PAS change, volontairement : la palette, desaturee et deja
 | coherente, et la signature du registre — l'onglet vertical colore qui encode
 | l'etat, les lignes revoquees hachurees plutot que grisees.
 */

:root{
  /* --- Palette, inchangee --- */
  --fond:#eef1f0; --surface:#fff; --surface-creuse:#f7f9f8;
  --encre:#16262b; --encre-douce:#5a6e74; --encre-tenue:#8d9ea3;
  --accent:#2f5d62; --accent-fonce:#20444a; --accent-voile:#e2edec;
  --alerte:#8a3a32; --alerte-voile:#f7ebe9;
  --attente:#7d6216; --attente-voile:#fbf3df;
  --bord:#d5dddb; --bord-net:#b9c6c4;

  /* --- 1. Echelle typographique : six crans, et un seul hors-piste ---
     Toute taille de texte du fichier vient de cette liste. La verification est
     mecanique : « grep font-size:[0-9] app.css » ne doit renvoyer que la ligne
     du .sejour, dont le libelle disparait en vue trimestre (font-size:0). */
  --t-micro:11px;    /* capitales mono : etiquettes, meta, labels de champ */
  --t-petit:13px;    /* aide, texte secondaire, menu, onglets */
  --t-controle:14px; /* boutons, cases, champs de recherche, liens de liste */
  --t-base:15px;     /* corps, champs de saisie, noms */
  --t-moyen:17px;    /* titres de section */
  --t-titre:26px;    /* titre de page, une fois par ecran */

  /* Le monospace parait plus gros que le sans a taille nominale egale : ses
     caracteres ont tous la largeur du plus large. Un cran en dessous n'est donc
     pas une entorse a l'echelle, c'est ce qui les fait paraitre de meme taille. */
  --t-mono:12.5px;

  /* --- 2. Rythme d'espacement, base 4 px. Le nom est le multiplicateur. --- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px; --e12:48px;

  /* --- 3. Elevation. L'ombre est teintee a l'encre, jamais au noir. --- */
  --ombre1:0 1px 2px rgba(22,38,43,.05), 0 1px 1px rgba(22,38,43,.04);
  --ombre2:0 2px 4px rgba(22,38,43,.06), 0 6px 16px rgba(22,38,43,.06);
  --ombre3:0 4px 8px rgba(22,38,43,.08), 0 12px 32px rgba(22,38,43,.10);
  --anneau:0 0 0 3px rgba(47,93,98,.16);

  /* --- 4. Mouvement --- */
  --vite:120ms cubic-bezier(.4,0,.2,1);
  --doux:200ms cubic-bezier(.4,0,.2,1);

  /* Rayons legerement adoucis : 4 px au lieu de 3 sur les elements de saisie,
     6 px sur les cartes. Assez pour ne plus paraitre brut, pas assez pour perdre
     le caractere administratif que l'application assume. */
  --rayon:4px; --rayon-carte:6px; --rayon-puce:3px;

  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}

body{
  margin:0; background:var(--fond); color:var(--encre);
  font:var(--t-base)/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--accent-fonce)}

/* Anneau de focus a la place du contour : il epouse le rayon de l'element et se
   superpose sans decaler la mise en page. */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:none}

/* --- Icones ---
   Dimensionnees en em pour suivre le texte qui les accompagne, et colorees par
   currentColor : un meme symbole sert sur un bouton clair, dans le bandeau
   sombre et dans un message d'erreur, sans variante. */
.i{
  width:1.05em; height:1.05em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.75;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.15em;
}
.i-grande{width:26px; height:26px; stroke-width:1.5}

/* --- Bandeau --- */
.bandeau{
  background:var(--accent-fonce); color:#dce8e7;
  display:flex; align-items:baseline; gap:var(--e4); flex-wrap:wrap;
  padding:var(--e3) var(--e6);
  box-shadow:var(--ombre2);
  position:relative; z-index:10;
}
.bandeau .marque{
  font-family:var(--mono); font-size:var(--t-micro); letter-spacing:.18em;
  text-transform:uppercase; color:#fff;
}
.bandeau .marque span{color:#7fa9a5}
.bandeau .menu{display:flex; gap:var(--e1); font-size:var(--t-petit); flex-wrap:wrap}
.bandeau .menu a{
  color:#bfd6d4; text-decoration:none;
  display:inline-flex; align-items:center; gap:var(--e2);
  padding:var(--e2) var(--e3); border-radius:var(--rayon);
  transition:background var(--vite), color var(--vite);
}
.bandeau .menu a:hover{color:#fff; background:rgba(255,255,255,.09)}
.bandeau .qui{
  margin-left:auto; font-size:var(--t-petit); color:#a8c4c2;
  display:inline-flex; align-items:center; gap:var(--e2); flex-wrap:wrap;
}
.bandeau .qui strong{color:#fff; font-weight:600}
.bandeau form{display:inline; margin-left:var(--e2)}
.bandeau button{
  background:none; border:0; padding:var(--e1) 0; cursor:pointer;
  color:#dce8e7; font-size:var(--t-petit); font-family:inherit;
  display:inline-flex; align-items:center; gap:var(--e1);
  border-bottom:1px solid rgba(220,232,231,.35);
  transition:color var(--vite), border-color var(--vite);
}
.bandeau button:hover{color:#fff; border-color:#fff}

/* --- Structure --- */
.page{max-width:1060px; margin:0 auto; padding:var(--e8) var(--e6) var(--e12)}
.entete{
  display:flex; align-items:flex-end; gap:var(--e4); flex-wrap:wrap;
  margin-bottom:var(--e6);
}
.entete h1{
  margin:0; font-size:var(--t-titre); font-weight:600; letter-spacing:-.015em;
  line-height:1.15;
}
.entete .compte{
  font-family:var(--mono); font-size:var(--t-micro); color:var(--encre-douce);
  padding-bottom:var(--e1); display:inline-flex; align-items:center; gap:var(--e1);
  text-transform:uppercase; letter-spacing:.06em;
}
.entete .actions{margin-left:auto; display:flex; gap:var(--e2); flex-wrap:wrap}

/* --- Boutons ---
   L'ombre et le leger enfoncement a l'appui sont ce qui rend un bouton tactile
   plutot que dessine. */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--e2);
  font:500 var(--t-controle)/1 inherit; font-family:inherit;
  padding:10px var(--e4); border-radius:var(--rayon); border:1px solid transparent;
  cursor:pointer; text-decoration:none; text-align:center; white-space:nowrap;
  transition:background var(--vite), border-color var(--vite),
             box-shadow var(--vite), transform var(--vite);
}
.btn:active{transform:translateY(1px)}
.btn-primaire{background:var(--accent); color:#fff; box-shadow:var(--ombre1)}
.btn-primaire:hover{background:var(--accent-fonce); box-shadow:var(--ombre2)}
.btn-neutre{
  background:var(--surface); color:var(--encre); border-color:var(--bord-net);
  box-shadow:var(--ombre1);
}
.btn-neutre:hover{background:var(--surface-creuse); border-color:var(--encre-tenue)}
.btn-lien{
  display:inline-flex; align-items:center; gap:var(--e1);
  background:none; border:0; padding:var(--e1) 0; cursor:pointer;
  font:inherit; font-size:var(--t-petit); color:var(--accent-fonce);
  text-decoration:none; border-bottom:1px solid transparent;
  transition:color var(--vite), border-color var(--vite);
}
.btn-lien:hover{border-bottom-color:currentColor}
.btn-lien.danger{color:var(--alerte)}

/* --- Messages --- */
.flash{
  border-left:3px solid; border-radius:0 var(--rayon) var(--rayon) 0;
  padding:var(--e3) var(--e4); margin-bottom:var(--e3);
  background:var(--surface); font-size:var(--t-controle);
  display:flex; gap:var(--e3); align-items:flex-start;
  box-shadow:var(--ombre1);
}
.flash .i{margin-top:2px}
.flash-corps{flex:1; min-width:0}
.flash.succes{border-color:var(--accent); background:var(--accent-voile)}
.flash.erreur{border-color:var(--alerte); background:var(--alerte-voile)}
.flash.lien{border-color:var(--attente); background:var(--attente-voile)}
.flash-lien-boite{
  display:flex; gap:var(--e2); margin-top:var(--e3); align-items:stretch; flex-wrap:wrap;
}
.flash-lien-boite input{
  flex:1 1 280px; font-family:var(--mono); font-size:var(--t-mono);
  padding:var(--e2) 10px; border:1px solid var(--bord-net); border-radius:var(--rayon);
  background:var(--surface); color:var(--encre);
}

/* --- Registre : signature de l'interface ---
   Chaque ligne porte un onglet vertical dont la couleur encode l'etat du compte,
   comme un porte-cles derriere un comptoir. Les acces revoques sont hachures, pas
   seulement grises : l'etat se lit sans lire le libelle.

   Le registre garde ses filets internes — c'est une liste dense, la separation
   ligne a ligne y est de l'information. Ce sont les CARTES qui passent de la
   bordure a l'ombre. */
.registre{
  background:var(--surface); border-radius:var(--rayon-carte);
  box-shadow:var(--ombre1); overflow:hidden;
}
.ligne{
  display:grid; grid-template-columns:5px 1fr auto; align-items:center;
  border-bottom:1px solid var(--bord);
  transition:background var(--vite);
}
.ligne:last-child{border-bottom:0}
.ligne:hover{background:var(--surface-creuse)}
.ligne .onglet{align-self:stretch; background:var(--accent)}
.ligne.attente .onglet{background:var(--attente)}
.ligne.revoque .onglet{background:var(--bord-net)}
.ligne.verrouille .onglet{background:var(--alerte)}
.ligne.verrouille{background:var(--alerte-voile)}
.ligne.revoque{
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 7px, rgba(90,110,116,.07) 7px 14px);
}
.ligne.revoque .identite .nom{color:var(--encre-douce)}
.identite{padding:var(--e4) var(--e4); min-width:0}
.identite .nom{
  margin:0 0 2px; font-size:var(--t-base); font-weight:600;
  display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap;
}
.identite .email{
  font-family:var(--mono); font-size:var(--t-mono); color:var(--encre-douce);
  overflow-wrap:anywhere;
}
.identite .meta{
  margin-top:var(--e1); font-family:var(--mono); font-size:var(--t-micro);
  color:var(--encre-tenue); text-transform:uppercase; letter-spacing:.06em;
}
.commandes{
  padding:var(--e4); display:flex; gap:var(--e4); align-items:center;
  flex-wrap:wrap; justify-content:flex-end;
}

/* --- Etiquettes --- */
.etiquette{
  display:inline-flex; align-items:center; font-family:var(--mono);
  font-size:var(--t-micro); letter-spacing:.09em; text-transform:uppercase; font-weight:600;
  padding:3px 7px; border-radius:var(--rayon-puce); white-space:nowrap;
}
.etiquette.actif{background:var(--accent-voile); color:var(--accent-fonce)}
.etiquette.attente{background:var(--attente-voile); color:var(--attente)}
.etiquette.revoque{background:#e7ebea; color:var(--encre-douce)}
.etiquette.verrouille{background:var(--alerte); color:#fff}
.etiquette.verrouille .i{width:11px; height:11px; margin-right:var(--e1); stroke-width:2.25}
/* Le role est une etiquette au trait, l'etat une etiquette pleine : deux
   informations de nature differente ne doivent pas se ressembler. */
.etiquette.role{background:none; color:var(--encre-douce); border:1px solid var(--bord-net)}
.etiquette.role .i{width:12px; height:12px; margin-right:var(--e1); stroke-width:2}

/* Ligne visible mais hors du perimetre d'action : on occupe la place des
   commandes pour que l'absence de bouton se lise comme une regle, pas un bogue. */
.hors-portee{
  display:inline-flex; align-items:center; gap:var(--e1);
  font-family:var(--mono); font-size:var(--t-micro); color:var(--encre-tenue);
  text-transform:uppercase; letter-spacing:.06em;
}

/* --- Rattachement --- */
.rattachement{
  margin-top:var(--e1); display:flex; align-items:center; gap:var(--e2);
  font-size:var(--t-petit); color:var(--accent-fonce);
}
.rattachement .orphelin{
  font-family:var(--mono); font-size:var(--t-micro); color:var(--attente);
  text-transform:uppercase; letter-spacing:.05em;
}

/* --- Cartes ---
   Ici le changement le plus visible : la bordure d'un pixel disparait au profit
   d'une ombre. Une carte doit sembler posee sur le fond, pas decoupee dedans. */
.carte{
  background:var(--surface); border-radius:var(--rayon-carte);
  box-shadow:var(--ombre1); padding:var(--e6); max-width:540px;
}
/* 540 px conviennent a une connexion — deux champs, on ne veut pas les etaler.
   Des qu'un formulaire passe en grille, il lui faut de la place : 820 px tiennent
   deux colonnes confortables sans que l'oeil ait a traverser tout l'ecran. */
.carte-formulaire{max-width:820px}
.carte-large{max-width:820px; margin-top:var(--e6)}
.sous-titre{
  display:flex; align-items:center; gap:var(--e3);
  margin:0 0 var(--e6); font-size:var(--t-moyen); font-weight:600;
  padding-bottom:var(--e4); border-bottom:1px solid var(--bord);
  letter-spacing:-.01em;
}
.sous-titre .compteur{
  margin-left:auto; font-family:var(--mono); font-size:var(--t-mono); font-weight:500;
  color:var(--encre-douce); background:var(--surface-creuse);
  border-radius:var(--rayon-puce); padding:3px var(--e2);
}
.registre-imbrique{box-shadow:none; border:1px solid var(--bord)}
.registre-imbrique .identite{padding:var(--e3) var(--e3)}
.registre-imbrique .commandes{padding:var(--e3)}

/* --- Formulaires ---
   Concus pour un ecran d'ordinateur : les champs se rangent sur deux ou trois
   colonnes plutot qu'en une seule pile. Un formulaire de compte tenait sur cinq
   rangees et 1100 px de haut ; il en occupe trois et tient dans une fenetre.
   Sous 760 px, la grille retombe a une colonne d'elle-meme.

   La regle de repartition : on regroupe par LONGUEUR de saisie, pas par theme.
   Un code postal et une ville tiennent cote a cote parce qu'on les tape d'un
   geste ; une adresse electronique prend toute la largeur parce qu'elle est
   longue et qu'un champ tronque se relit mal. */
.champs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--e6)}
.champs-trois{grid-template-columns:repeat(3, minmax(0,1fr))}
.champ-large{grid-column:1 / -1}

/* Espacement vertical resserre : la grille prend en charge l'horizontal, et 20 px
   suffisent a separer deux rangees dont les libelles sont deja en capitales. */
.champ{margin-bottom:var(--e5)}
.champ label{
  display:block; margin-bottom:var(--e2); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--encre-douce);
}
.champ input, .champ select, .champ textarea{
  width:100%; padding:10px var(--e3); font:inherit; font-size:var(--t-base);
  border:1px solid var(--bord-net); border-radius:var(--rayon);
  background:var(--surface); color:var(--encre);
  transition:border-color var(--vite), box-shadow var(--vite);
}
.champ textarea{font-size:var(--t-base); resize:vertical; line-height:1.55}
.champ input:hover, .champ select:hover, .champ textarea:hover{border-color:var(--encre-tenue)}
.champ input:focus, .champ select:focus, .champ textarea:focus{
  border-color:var(--accent); box-shadow:var(--anneau);
}
.champ input:disabled{background:var(--surface-creuse); color:var(--encre-douce)}
.champ .aide{margin-top:var(--e2); font-size:var(--t-petit); color:var(--encre-douce); line-height:1.5}
.champ .aide code{font-family:var(--mono); font-size:var(--t-mono)}
.aide.encadre{
  background:var(--surface-creuse); padding:var(--e3) var(--e4);
  border-left:3px solid var(--bord-net); border-radius:0 var(--rayon) var(--rayon) 0;
  font-size:var(--t-petit); color:var(--encre-douce); line-height:1.55;
}
/* Regroupement visuel : des champs facultatifs au milieu de champs obligatoires
   ont besoin d'une frontiere explicite. */
.bloc{
  border:1px solid var(--bord); border-radius:var(--rayon-carte);
  padding:var(--e4) var(--e4) 2px; margin:0 0 var(--e6);
  background:var(--surface-creuse);
}
.bloc legend{
  padding:0 var(--e2); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--encre-douce);
  display:flex; align-items:center; gap:var(--e2);
}
.pied-formulaire{
  display:flex; gap:var(--e3); align-items:center; flex-wrap:wrap;
  margin-top:var(--e6); padding-top:var(--e4); border-top:1px solid var(--bord);
}
/* Conserve : .grille-deux est l'ancien nom de .champs, encore employe par la fiche
   d'un bien. Les deux pointent vers le meme comportement. */
.grille-deux{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 var(--e6)}

/* Cases a cocher : la surface cliquable couvre le libelle entier, et la case
   coloree signale l'etat sans avoir a lire. */
.cases{display:flex; flex-wrap:wrap; gap:var(--e2) var(--e4)}
.case{
  display:inline-flex; align-items:flex-start; gap:var(--e2); cursor:pointer;
  font-size:var(--t-controle); padding:var(--e2) 10px; border-radius:var(--rayon);
  border:1px solid transparent; transition:background var(--vite), border-color var(--vite);
}
.case:hover{background:var(--surface-creuse); border-color:var(--bord)}
.case input{margin-top:2px; flex:none; accent-color:var(--accent)}
.case span{display:flex; flex-direction:column; line-height:1.35}
.case em{font-style:normal; font-size:var(--t-micro); color:var(--encre-tenue); font-family:var(--mono)}
.bloc-chambre[hidden]{display:none}

.titre-ajout{
  display:flex; align-items:center; gap:var(--e2); margin:0;
  padding-top:var(--e4); border-top:1px solid var(--bord);
  font-size:var(--t-controle); font-weight:600; color:var(--encre-douce);
}
.titre-ajout + .ajout-piece{border-top:0; padding-top:var(--e3)}
.ajout-piece{border-top:1px solid var(--bord); padding-top:var(--e4)}

/* Edition en ligne : le champ ne se signale qu'au survol, pour que la liste
   reste une liste et non un formulaire. */
/* --- Tableau de saisie (tarifs d'un bien) ---
   table-layout:fixed avec des largeurs declarees en <colgroup> : c'est LA regle qui
   fait tenir l'alignement. Sans elle, le contenu de chaque cellule negocie sa largeur,
   une etiquette « non tarifee » elargit la premiere colonne et tous les champs de la
   ligne se decalent par rapport a ceux du dessus.
   Les champs prennent 100 % de leur colonne : ils ont donc exactement la meme largeur
   d'une ligne a l'autre, sans dimension ecrite a la main. */
.tableau-defilant{overflow-x:auto}
.tableau-tarifs{width:100%; border-collapse:collapse; table-layout:fixed; min-width:720px}
.tableau-tarifs th, .tableau-tarifs td{
  padding:var(--e3) var(--e4); text-align:left; vertical-align:middle;
  border-bottom:1px solid var(--bord);
}
.tableau-tarifs thead th{
  position:sticky; top:0; z-index:1;
  background:var(--surface-creuse); color:var(--encre-tenue);
  font-family:var(--mono); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  border-bottom:1px solid var(--bord-net);
}
.tableau-tarifs tbody tr:last-child th, .tableau-tarifs tbody tr:last-child td{border-bottom:0}
.tableau-tarifs tbody tr:hover{background:var(--surface-creuse)}
.tableau-tarifs .centre{text-align:center}

/* La premiere cellule empile le libelle et son etiquette : c'est ce qui permet a
   l'etiquette de faire grandir la LIGNE sans deplacer un champ. */
.tableau-tarifs tbody th[scope=row]{font-weight:400}
.tarif-nom{display:block; font-weight:600; color:var(--encre)}
.tableau-tarifs .etiquette, .tarif-rappel{margin-top:3px}
.tarif-rappel{display:inline-block; font-size:var(--t-petit); color:var(--encre-tenue)}

.tableau-tarifs input[type=text], .tableau-tarifs input[type=number], .tableau-tarifs select{
  width:100%; padding:var(--e2) 10px; font:inherit; font-size:var(--t-base);
  border:1px solid var(--bord-net); border-radius:var(--rayon);
  background:var(--surface); color:var(--encre);
  transition:border-color var(--vite), box-shadow var(--vite);
}
.tableau-tarifs input:hover, .tableau-tarifs select:hover{border-color:var(--encre-tenue)}
.tableau-tarifs input:focus, .tableau-tarifs select:focus{
  border-color:var(--accent); box-shadow:var(--anneau); outline:none;
}
.tableau-tarifs input[type=checkbox]{width:auto; accent-color:var(--accent); cursor:pointer}

/* Une ligne sans prix reste lisible mais visiblement en attente ; une ligne retiree de
   l'offre s'efface, sans disparaitre — son prix est encore la. */
.tableau-tarifs .ligne-vide .tarif-nom{color:var(--encre-douce)}
.tableau-tarifs .ligne-retiree{background:var(--surface-creuse)}
.tableau-tarifs .ligne-retiree .tarif-nom{color:var(--encre-douce); text-decoration:line-through}

/* Ligne d'un type retire du catalogue : elle se lit, elle ne se saisit pas. */
.tarif-inerte{font-size:var(--t-petit); color:var(--encre-douce); line-height:1.5}

.tableau-tarifs .ligne-section th{
  background:var(--surface-creuse); color:var(--encre-douce);
  font-size:var(--t-petit); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--bord-net);
}

/* La barre d'enregistrement colle au bas de la fenetre : sur un long tableau, une
   correction faite en haut ne doit pas obliger a defiler jusqu'en bas. */
.barre-enregistrer{
  position:sticky; bottom:0; z-index:2;
  display:flex; align-items:center; gap:var(--e4); flex-wrap:wrap;
  margin-top:var(--e4); padding:var(--e3) var(--e4);
  background:var(--surface); border:1px solid var(--bord); border-radius:var(--rayon);
  box-shadow:var(--ombre2);
}

/* --- Fleches d'ordonnancement ---
   Une colonne de plus dans la grille de .ligne, declaree par la classe .ordonnee sur la
   ligne elle-meme. Pas de :has() : la regle doit etre lisible dans le gabarit, et c'est
   le gabarit qui sait s'il a pose des fleches.
   La place vide compte autant que la fleche : sans .rangeur-vide, la premiere ligne
   n'aurait qu'une fleche et son libelle se decalerait vers le haut. */
.ligne.ordonnee{grid-template-columns:5px auto 1fr auto}
.rangeur{display:flex; flex-direction:column; gap:1px; padding:0 var(--e2) 0 var(--e3)}
.rangeur-fleche, .rangeur-vide{
  display:block; width:22px; height:15px; line-height:13px; text-align:center;
  font-size:9px; border-radius:3px; border:1px solid transparent;
}
.rangeur-fleche{
  padding:0; background:var(--surface-creuse); color:var(--encre-douce);
  border-color:var(--bord); cursor:pointer;
  transition:background var(--vite), color var(--vite), border-color var(--vite);
}
.rangeur-fleche:hover{background:var(--accent); color:#fff; border-color:var(--accent)}
.rangeur-fleche:focus-visible{box-shadow:var(--anneau); outline:none}

.ligne-editable{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap}
.ligne-editable input[type=text], .ligne-editable input[type=number]{
  padding:var(--e2) 10px; font:inherit; font-size:var(--t-base);
  border:1px solid var(--bord-net); border-radius:var(--rayon);
  background:var(--surface); transition:border-color var(--vite), box-shadow var(--vite);
}
.ligne-editable input[type=text]{flex:1 1 200px}
.ligne-editable input[type=number]{width:82px}
.ligne-editable input:focus{border-color:var(--accent); box-shadow:var(--anneau); outline:none}

.renommer-source{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap; margin-bottom:var(--e1)}
.renommer-source input[type=text]{
  flex:0 1 220px; padding:var(--e1) var(--e2); font:inherit; font-size:var(--t-base); font-weight:600;
  border:1px solid transparent; border-radius:var(--rayon); background:transparent;
  color:var(--encre); transition:border-color var(--vite), background var(--vite), box-shadow var(--vite);
}
.renommer-source input[type=text]:hover{border-color:var(--bord); background:var(--surface)}
.renommer-source input[type=text]:focus{
  border-color:var(--accent); background:var(--surface); font-weight:400;
  box-shadow:var(--anneau); outline:none;
}

/* --- Choices.js, habille a la palette du projet ---
   Sa feuille par defaut est en bleu-gris Bootstrap, avec ses propres rayons et
   ses propres tailles. Laissee telle quelle, elle aurait l'air rapportee : un
   composant venu d'ailleurs pose au milieu du formulaire. Ce bloc la ramene aux
   quatre regles du fichier — meme echelle, meme rythme, meme elevation, meme
   mouvement — et surtout a la meme couleur d'accent.

   Chargee APRES choices.min.css dans le gabarit, donc ces regles l'emportent
   sans avoir besoin de !important. */

.choices{margin-bottom:0; font-size:var(--t-base)}
.choices:focus{outline:none}

/* La boite : identique a un .champ input, pour qu'un selecteur enrichi et un champ
   ordinaire ne se distinguent pas dans une meme colonne. */
.choices__inner{
  background:var(--surface); border:1px solid var(--bord-net);
  border-radius:var(--rayon); padding:var(--e1) var(--e2) 0;
  min-height:44px; font-size:var(--t-base);
  transition:border-color var(--vite), box-shadow var(--vite);
}
.choices:hover .choices__inner{border-color:var(--encre-tenue)}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner{
  border-color:var(--accent); box-shadow:var(--anneau); border-radius:var(--rayon);
}
.choices[data-type*=select-one] .choices__inner{padding-bottom:var(--e1)}
.is-disabled .choices__inner{background:var(--surface-creuse)}

/* Les etiquettes : a l'accent, comme les etiquettes d'etat du registre. */
.choices__list--multiple .choices__item{
  background:var(--accent); border:0; border-radius:var(--rayon-puce);
  padding:4px var(--e2); margin:0 var(--e1) var(--e1) 0;
  font-size:var(--t-petit); font-weight:500; line-height:1.4;
}
.choices__list--multiple .choices__item.is-highlighted{background:var(--accent-fonce)}
.choices[data-type*=select-multiple] .choices__button{
  border-left:1px solid rgba(255,255,255,.35); margin:0 -2px 0 var(--e2);
  padding-left:var(--e2); opacity:.7; transition:opacity var(--vite);
}
.choices[data-type*=select-multiple] .choices__button:hover{opacity:1}

/* La liste deroulante : meme elevation que les cartes, meme rayon. */
.choices__list--dropdown, .choices__list[aria-expanded]{
  background:var(--surface); border:1px solid var(--bord-net);
  border-radius:var(--rayon); box-shadow:var(--ombre2);
  margin-top:var(--e1); z-index:20;
}
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item{
  padding:var(--e2) var(--e3); font-size:var(--t-controle);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{
  background:var(--accent-voile); color:var(--accent-fonce);
}
/* Choices reserve une gouttiere a droite pour son texte « Press to select », que
   nous avons vide : sans cette remise a zero, chaque ligne parait mal alignee. */
.choices__list--dropdown .choices__item--selectable::after,
.choices__list[aria-expanded] .choices__item--selectable::after{display:none}
.choices__list--dropdown .choices__item--selectable,
.choices__list[aria-expanded] .choices__item--selectable{padding-right:var(--e3)}

/* Le champ de recherche interne, et le texte de substitution. */
.choices__input{
  background:transparent; font-size:var(--t-base); padding:var(--e1) 0;
  margin-bottom:var(--e1); color:var(--encre);
}
.choices__list--dropdown .choices__input{
  background:var(--surface-creuse); border-bottom:1px solid var(--bord);
  padding:var(--e2) var(--e3); margin:0;
}
.choices__placeholder{color:var(--encre-tenue); opacity:1}
.choices__list--dropdown .choices__item--no-results,
.choices__list--dropdown .choices__item--no-choices{
  color:var(--encre-tenue); font-size:var(--t-petit);
}

/* La fleche du selecteur simple, ramenee a la couleur du texte secondaire. */
.choices[data-type*=select-one]::after{border-color:var(--encre-douce) transparent transparent}
.choices[data-type*=select-one].is-open::after{border-color:transparent transparent var(--encre-douce)}

/* Dans un fieldset .bloc, la boite est sur fond creux : on la garde blanche pour
   qu'elle se lise comme une zone de saisie et non comme une partie du bloc. */
.bloc .choices__inner{background:var(--surface)}

/* --- Barre de filtres --- */
.filtres{display:flex; gap:var(--e3); align-items:center; flex-wrap:wrap; margin-bottom:var(--e4)}
.filtres input[type=search]{
  padding:9px var(--e3); border:1px solid var(--bord-net); border-radius:var(--rayon);
  font:inherit; font-size:var(--t-controle); min-width:200px; background:var(--surface);
  transition:border-color var(--vite), box-shadow var(--vite);
}
.filtres input[type=search]:focus{border-color:var(--accent); box-shadow:var(--anneau); outline:none}

/* Champ de recherche avec la loupe posee dedans. */
.chercher{position:relative; display:inline-flex; align-items:center}
.chercher .i{position:absolute; left:11px; color:var(--encre-tenue); pointer-events:none}
.chercher input[type=search]{padding-left:33px}

/* Bouton de filtre reduit a son icone.
   La loupe est deja DANS les champs pour dire « ceci se cherche » ; le bouton
   porte donc un entonnoir, qui dit « applique le filtre ». Deux loupes cote a cote
   n'auraient rien distingue. Le libelle reste dans aria-label : une icone seule est
   muette pour un lecteur d'ecran. */
.btn-icone{padding:10px; width:40px}
.btn-icone .i{width:17px; height:17px}

/* Autocompletion : la puce indique qu'une liste de suggestions existe, ce que
   <datalist> ne signale pas de lui-meme sur tous les navigateurs. */
.chercher-suggere::after{
  content:''; position:absolute; right:11px; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--encre-tenue); pointer-events:none;
}
.chercher-suggere input[type=search]{padding-right:26px}

.onglets{
  display:inline-flex; background:var(--surface); border-radius:var(--rayon);
  box-shadow:var(--ombre1); overflow:hidden;
}
.onglets a{
  padding:9px var(--e4); font-size:var(--t-petit); text-decoration:none; color:var(--encre-douce);
  display:inline-flex; align-items:center; gap:var(--e2);
  border-right:1px solid var(--bord);
  transition:background var(--vite), color var(--vite);
}
.onglets a:last-child{border-right:0}
.onglets a:hover{background:var(--surface-creuse); color:var(--encre)}
.onglets a[aria-current=page]{background:var(--accent); color:#fff; font-weight:500}
.onglets a[aria-current=page]:hover{background:var(--accent-fonce); color:#fff}
.onglets-roles{margin-bottom:var(--e4); flex-wrap:wrap}

/* --- Etats vides ---
   Une bordure pointillee dit « il manque quelque chose ». On la garde, mais
   discrete : c'est une invitation, pas une alarme. */
.vide{
  background:var(--surface); border:1px dashed var(--bord-net);
  border-radius:var(--rayon-carte); padding:var(--e12) var(--e6); text-align:center;
}
.vide p{margin:0 0 var(--e4); color:var(--encre-douce); max-width:46ch; display:inline-block; line-height:1.6}
.vide .i-grande{color:var(--encre-tenue); margin:0 auto var(--e3); display:block}

/* --- Sommaire de section (Administration) --- */
.sommaire{display:grid; gap:var(--e3); max-width:800px}
.sommaire-entree{
  display:flex; gap:var(--e4); align-items:flex-start; padding:var(--e6);
  background:var(--surface); border-radius:var(--rayon-carte);
  box-shadow:var(--ombre1); text-decoration:none; color:var(--encre);
  border-left:3px solid var(--accent);
  transition:box-shadow var(--doux), transform var(--doux);
}
.sommaire-entree:hover{box-shadow:var(--ombre2); transform:translateY(-1px)}
.sommaire-entree .i-grande{color:var(--accent); margin-top:2px; flex:none}
.sommaire-entree span{
  display:flex; flex-direction:column; gap:var(--e1);
  font-size:var(--t-petit); color:var(--encre-douce); line-height:1.55;
}
.sommaire-entree strong{font-size:var(--t-moyen); color:var(--encre); font-weight:600}

/* --- Ecran des migrations --- */
.journal{
  margin:0; padding:var(--e4); background:var(--encre); color:#d6e2e1;
  border-radius:var(--rayon); font-family:var(--mono); font-size:var(--t-mono);
  line-height:1.65; white-space:pre-wrap; overflow-x:auto;
}
.fiche-technique{
  display:grid; grid-template-columns:minmax(170px, auto) 1fr;
  gap:var(--e3) var(--e6); margin:0; font-size:var(--t-petit);
}
.fiche-technique dt{font-weight:600; color:var(--encre-douce)}
.fiche-technique dd{margin:0; overflow-wrap:anywhere}
.fiche-technique code, .identite code{font-family:var(--mono); font-size:var(--t-mono)}
.fiche-technique .orphelin{
  font-family:var(--mono); font-size:var(--t-micro); color:var(--alerte);
  text-transform:uppercase; letter-spacing:.05em;
}

/* --- Planning : liste a gauche, calendrier au centre --- */
.planning{display:grid; grid-template-columns:280px 1fr; gap:var(--e6); align-items:start}
.planning-cote{
  background:var(--surface); border-radius:var(--rayon-carte);
  box-shadow:var(--ombre1); padding:var(--e4); position:sticky; top:var(--e4);
}
.planning-filtres{display:flex; flex-direction:column; gap:var(--e3); margin-bottom:var(--e4)}
.planning-filtres .chercher{display:flex}
.planning-filtres-pied{display:flex; align-items:center; gap:var(--e3); margin-top:var(--e1)}
/* Les selecteurs de la colonne laterale sont etroits : la liste deroulante doit
   pouvoir depasser leur largeur, sinon un nom de bien long devient illisible. */
.planning-cote .choices__list--dropdown{min-width:240px}
.planning-filtres input[type=search]{
  width:100%; padding:9px var(--e3) 9px 33px; font:inherit; font-size:var(--t-controle);
  border:1px solid var(--bord-net); border-radius:var(--rayon); background:var(--surface);
  transition:border-color var(--vite), box-shadow var(--vite);
}
.planning-filtres input[type=search]:focus{border-color:var(--accent); box-shadow:var(--anneau); outline:none}
.planning-groupe{margin-bottom:var(--e4)}
.planning-groupe h2{
  display:flex; align-items:center; gap:var(--e2); margin:0 0 var(--e1);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--encre-tenue);
}
.planning-groupe ul{list-style:none; margin:0; padding:0}
.planning-groupe a{
  display:flex; align-items:center; gap:var(--e2); padding:var(--e2) 10px;
  text-decoration:none; color:var(--encre); border-radius:var(--rayon);
  border-left:3px solid transparent; font-size:var(--t-controle);
  transition:background var(--vite), border-color var(--vite);
}
.planning-groupe a:hover{background:var(--surface-creuse)}
.planning-groupe a[aria-current]{
  background:var(--accent-voile); border-left-color:var(--accent); font-weight:600;
}
.planning-groupe a span{display:flex; flex-direction:column; min-width:0; flex:1}
.planning-groupe a em{
  font-style:normal; font-size:var(--t-micro); color:var(--encre-tenue); font-family:var(--mono);
}
.planning-barre{display:flex; align-items:center; gap:var(--e4); flex-wrap:wrap; margin-bottom:var(--e4)}
.planning-navigation{display:flex; gap:var(--e1); margin-left:auto}
.planning-navigation .btn{padding:var(--e2) var(--e3)}

/* --- Grilles de calendrier ---
   Une table, parce que c'en est une : sept colonnes de jours, une ligne par
   semaine. Les lecteurs d'ecran l'annoncent correctement, ce qu'une grille de div
   n'obtient qu'a coups d'attributs ARIA. */
.calendriers{display:grid; gap:var(--e6)}
.calendriers-trois{grid-template-columns:repeat(3, 1fr)}
.calendrier{
  background:var(--surface); border-radius:var(--rayon-carte);
  box-shadow:var(--ombre1); padding:var(--e4); overflow:hidden;
}
.calendrier h3{
  margin:0 0 var(--e3); font-size:var(--t-petit); font-weight:600;
  color:var(--encre-douce); text-transform:uppercase; letter-spacing:.06em;
}
.calendrier table{width:100%; border-collapse:collapse; table-layout:fixed}
.calendrier th{
  padding:var(--e1) 2px var(--e2); font-family:var(--mono); font-size:var(--t-micro); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--encre-tenue);
  border-bottom:1px solid var(--bord);
}
.calendrier td{
  height:62px; vertical-align:top; padding:3px 3px 0;
  border:1px solid var(--bord); background:var(--surface); position:relative;
}
.calendriers-trois .calendrier td{height:40px}
.calendrier td.hors-mois{background:var(--surface-creuse)}
.calendrier td.hors-mois .jour{color:var(--encre-tenue)}
.calendrier td.aujourdhui{box-shadow:inset 0 0 0 2px var(--accent)}
.calendrier .jour{font-family:var(--mono); font-size:var(--t-micro); color:var(--encre-douce); display:block}

/* --- Barres d'occupation ---
   Positionnees en absolu, et non empilees en blocs, pour une raison precise : le
   jour de rotation porte un depart ET une arrivee, qui doivent occuper les deux
   MOITIES d'une meme ligne. Des blocs les auraient mis l'un sous l'autre, donnant
   a lire un conflit inexistant.
     depart   du bord gauche au milieu — les cles sont rendues le matin ;
     arrivee  du milieu au bord droit — le locataire entre l'apres-midi ;
     complet  de bord a bord.
   Les valeurs negatives franchissent la bordure et les 3 px de retrait de la case,
   pour que deux journees consecutives se rejoignent sans couture.
   --rang empile les sejours qui se recouvrent vraiment : une double reservation
   entre deux plateformes doit se voir, pas se cacher. */
.sejour{
  position:absolute; height:16px;
  top:calc(21px + var(--rang, 0) * 18px);
  background:hsl(var(--teinte, 205) 46% 54%);
  color:#fff; font-size:var(--t-micro); line-height:16px;
  overflow:hidden; white-space:nowrap; font-weight:500;
}
.sejour.complet{left:-4px; right:-4px; padding:0 var(--e1)}
.sejour.arrivee{left:50%; right:-4px; border-radius:9px 0 0 9px; padding:0 var(--e1) 0 7px}
.sejour.depart{left:-4px; right:50%; border-radius:0 9px 9px 0}
/* Reservation sans source : saisie a la main. Couleur de l'accent, pour qu'elle ne
   se confonde avec aucune plateforme. */
.sejour-manuel{background:var(--accent)}

.calendriers-trois .sejour{height:9px; font-size:0; padding:0; top:calc(17px + var(--rang, 0) * 11px)}
.calendriers-trois .sejour.arrivee{border-radius:5px 0 0 5px}
.calendriers-trois .sejour.depart{border-radius:0 5px 5px 0}

/* --- Prestations dans la case ---
   Une pastille dans le flux, pas une barre : une intervention est un rendez-vous
   dans une journee, elle n'occupe pas le logement d'un apres-midi a un matin comme
   un sejour. Lui donner la meme forme brouillerait les deux lectures.
   Les barres etant en absolu, elles ne poussent rien : --sejours, pose par le
   gabarit, compte leurs rangs et rend la marge qu'elles auraient prise. La hauteur
   de case (62 px) est un minimum pour un td : une journee chargee fait grandir la
   ligne au lieu de rogner. */
.prestations{
  display:flex; flex-direction:column; gap:2px; position:relative;
  /* 4 px : le flux commence 3 px plus haut que les barres (top:21px), il faut donc
     un peu plus que leur seule hauteur pour ne pas mordre sur la derniere. */
  margin:calc(4px + var(--sejours, 0) * 18px) -1px 3px;
}
.interv{
  display:block; height:15px; line-height:15px; border-radius:3px;
  padding:0 4px; font-size:var(--t-micro); font-weight:500;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  background:hsl(var(--teinte, 184) 42% 40%); color:#fff; text-decoration:none;
}
a.interv:hover{background:hsl(var(--teinte, 184) 46% 32%); text-decoration:none}
/* Non validee : hachuree et sans teinte. L'absence de couleur pleine est le message
   — rien n'est encore engage. La hachure double le signal pour qui distingue mal
   les couleurs. */
.interv-attente{
  background:repeating-linear-gradient(
    135deg, var(--surface-creuse) 0 4px, var(--bord) 4px 8px
  );
  color:var(--encre-douce); box-shadow:inset 0 0 0 1px var(--bord);
}
a.interv-attente:hover{color:var(--encre); box-shadow:inset 0 0 0 1px var(--encre-tenue)}
/* Le point qui signale un changement demande, en attente d'arbitrage. */
.interv-alerte{color:var(--attente); font-weight:700}

/* En trimestre, les libelles disparaissent comme ceux des sejours : il ne reste que
   la couleur et l'infobulle, seules lisibles a cette echelle. */
.calendriers-trois .prestations{margin-top:calc(2px + var(--sejours, 0) * 11px)}
.calendriers-trois .interv{height:8px; font-size:0; padding:0; border-radius:2px}

/* --- Legende ---
   Indissociable des couleurs : une teinte sans legende n'est qu'une decoration. */
.legende{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4);
  margin-top:var(--e4); padding-top:var(--e3); border-top:1px solid var(--bord);
  font-size:var(--t-petit); color:var(--encre-douce);
}
.legende-entree{display:inline-flex; align-items:center; gap:var(--e2)}
.legende-puce{
  width:22px; height:11px; border-radius:6px; flex:none;
  background:hsl(var(--teinte, 205) 46% 54%);
}
.legende-puce-manuel{background:var(--accent)}
/* La pastille de legende est la vraie pastille, hachure comprise : une imitation
   finirait par deriver de ce qu'elle est censee expliquer. */
.legende-interv{width:auto; height:auto; line-height:15px; padding:0 var(--e2)}
.legende-note{flex:1 1 100%; line-height:1.55; color:var(--encre-tenue)}

/* --- Adaptation aux petits ecrans --- */
@media (max-width:900px){
  .planning{grid-template-columns:1fr}
  .planning-cote{position:static}
  .calendriers-trois{grid-template-columns:1fr}
  .calendriers-trois .calendrier td{height:58px}
  /* Le trimestre passe sur une colonne : les cases retrouvent la place d'afficher les
     libelles, donc la taille normale. Le pas d'empilement suit la hauteur, sinon deux
     barres se recouvriraient — et la marge des prestations suit le pas. */
  .calendriers-trois .sejour{
    height:17px; font-size:var(--t-micro); padding:0 var(--e1);
    top:calc(21px + var(--rang, 0) * 18px);
  }
  .calendriers-trois .prestations{margin-top:calc(4px + var(--sejours, 0) * 18px)}
  .calendriers-trois .interv{height:15px; font-size:var(--t-micro); padding:0 4px; border-radius:3px}
}
@media (max-width:620px){
  .page{padding:var(--e6) var(--e4) var(--e12)}
  .bandeau{padding:var(--e3) var(--e4)}
  .grille-deux{grid-template-columns:1fr}
  .ligne{grid-template-columns:5px 1fr}
  .ligne .commandes{grid-column:2; padding-top:0; justify-content:flex-start}
  /* .ligne.ordonnee compte deux classes, donc l'emporte sur la regle ci-dessus : sans
     cette reprise, la ligne garderait quatre colonnes et deborderait. Les fleches
     restent, elles occupent 22 px. */
  .ligne.ordonnee{grid-template-columns:5px auto 1fr}
  .ligne.ordonnee .commandes{grid-column:3}
  .entete .actions{margin-left:0; width:100%}
  .entete .actions .btn{width:100%}
  .fiche-technique{grid-template-columns:1fr; gap:2px 0}
  .fiche-technique dd{margin-bottom:var(--e3)}
}

/* Toutes les animations sont neutralisees pour qui l'a demande au systeme. La
   regle 4 est un confort, jamais une condition de fonctionnement. */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
  .sommaire-entree:hover, .btn:active{transform:none}
}