/* Portail Team-Berliet — charte : voir team-berliet-brief.md */
:root {
  --nuit: #0F1648;
  --ciel: #A2CDEB;
  --jaune: #F2CF1D;
  --papier: #F6F2E8;
  --encre: #14173A;
  --encre-2: #555a7a;
  --trait: #d9d3c3;
  --blanc: #ffffff;
  --rouge: #BE0024;
  --vert: #309861;
  --f-titre: "Archivo", system-ui, sans-serif;
  --f-texte: "Source Serif 4", Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --rayon: 10px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--papier);
  color: var(--encre);
  font-family: var(--f-texte);
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--nuit); }
h1, h2, h3 { font-family: var(--f-titre); color: var(--nuit); line-height: 1.15; margin: 0 0 .5em; }
h1 { font-weight: 900; }
h2 { font-weight: 800; }
.mono { font-family: var(--f-mono); font-weight: 500; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: var(--encre-2); }
.hidden { display: none !important; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- boutons & champs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font-family: var(--f-titre); font-weight: 700; font-size: .95rem;
  padding: .7em 1.3em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.1;
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.05); }
.btn-jaune { background: var(--jaune); color: var(--nuit); }
.btn-nuit { background: var(--nuit); color: var(--blanc); }
.btn-contour { background: transparent; color: inherit; border-color: currentColor; }
.btn-petit { padding: .45em .9em; font-size: .82rem; }
.btn-danger { background: transparent; color: var(--rouge); border-color: var(--rouge); }
.btn[disabled] { opacity: .5; cursor: default; }

label.champ { display: block; margin-bottom: 1rem; }
label.champ > span { display: block; font-family: var(--f-mono); font-weight: 500; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: .35rem; }
input[type=email], input[type=password], input[type=text], input[type=date], input[type=number], select {
  width: 100%; font: inherit; font-size: 1rem; padding: .7em .85em;
  border: 1.5px solid var(--trait); border-radius: 8px; background: var(--blanc); color: var(--encre);
}
input:focus, select:focus { outline: 3px solid var(--ciel); border-color: var(--nuit); }
.case { display: flex; align-items: center; gap: .5em; font-size: .95rem; margin-bottom: 1.2rem; }
.erreur { color: var(--rouge); min-height: 1.4em; font-size: .95rem; margin: .5rem 0 0; }
.succes { color: var(--vert); font-size: .95rem; }

/* ---------- en-tête ---------- */
.entete { background: var(--nuit); color: var(--blanc); position: sticky; top: 0; z-index: 10; }
.entete .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 64px; }
.marque { display: flex; align-items: center; gap: .6rem; color: var(--blanc); text-decoration: none; }
.marque img { height: 34px; filter: brightness(0) invert(1); }
.marque span { font-family: var(--f-titre); font-weight: 900; letter-spacing: .06em; font-size: 1.05rem; }
.entete nav { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; justify-content: flex-end; }
.entete nav a:not(.btn) { color: var(--blanc); text-decoration: none; font-family: var(--f-titre); font-weight: 600; font-size: .92rem; opacity: .9; }
.entete nav a:not(.btn):hover { opacity: 1; text-decoration: underline; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ciel); color: var(--nuit);
  display: inline-grid; place-items: center; font-family: var(--f-titre); font-weight: 800; font-size: .85rem; }
.qui { display: flex; align-items: center; gap: .5rem; font-family: var(--f-titre); font-size: .9rem; }

/* ---------- accueil ---------- */
.hero { background: var(--nuit); color: var(--blanc); padding: 64px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.hero .script { width: min(420px, 100%); display: block; margin-bottom: 1.2rem; }
.hero p { font-size: 1.2rem; opacity: .92; max-width: 34ch; }
.hero .actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.6rem; }
.hero .rond { width: min(340px, 80%); justify-self: center; filter: drop-shadow(0 12px 30px rgba(0,0,0,.35)); }
.bandeau { padding: 56px 0; }
.bandeau .wrap { display: flex; gap: 2rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.badge { display: inline-block; background: var(--jaune); color: var(--nuit); border-radius: 999px; padding: .3em .8em; }

/* ---------- connexion ---------- */
.connexion { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 64px); }
.connexion .gauche { background: var(--ciel); display: grid; place-items: center; padding: 40px 16px; }
.connexion .gauche img { width: min(360px, 70%); }
.connexion .droite { display: grid; place-items: center; padding: 40px 16px; }
.carte-form { width: 100%; max-width: 400px; }
.carte-form h1 { font-size: 2rem; }
.carte-form .btn { width: 100%; }
.note { font-size: .9rem; color: var(--encre-2); margin-top: 1.4rem; }

/* ---------- bibliothèque ---------- */
.titre-page { padding: 40px 0 8px; }
.grille-livres { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 28px; padding: 16px 0 56px; }
.livre { text-decoration: none; color: inherit; display: block; }
.couverture { aspect-ratio: 3 / 4; border-radius: 4px 12px 12px 4px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: 18px 16px;
  color: var(--blanc); box-shadow: inset 8px 0 0 rgba(0,0,0,.18), 0 10px 24px rgba(15,22,72,.18);
  transition: transform .15s ease, box-shadow .15s ease; }
.livre:hover .couverture { transform: translateY(-4px); box-shadow: inset 8px 0 0 rgba(0,0,0,.18), 0 16px 30px rgba(15,22,72,.25); }
.couverture img { width: 34px; filter: brightness(0) invert(1); opacity: .9; }
.couverture .t { font-family: var(--f-titre); font-weight: 900; font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; }
/* Couverture propre à un livre (templates/couvertures/<slug>.html) */
.couverture.perso { display: grid; padding: 6px; gap: 4px; background: #f5f5f4; color: var(--encre);
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); }
.couverture.perso img { width: 100%; filter: none; opacity: 1; }
/* Livre « Gazelle » : photo + bandeau vert armée des années 1960, symbole Berliet 1959 */
.cv-gazelle { padding: 0; background: #4b5320; justify-content: flex-start; }
.cv-gazelle .haut { position: relative; flex: 1; min-height: 0; border-bottom: 3px solid #c9b458; }
.cv-gazelle .photo { width: 100%; height: 100%; object-fit: cover; object-position: 45% 60%; filter: none; opacity: 1; display: block; }
.cv-gazelle .sceau { position: absolute; right: 10px; bottom: -19px; width: 38px; height: 38px; border-radius: 50%;
  background: #4b5320; border: 2px solid #c9b458; display: grid; place-items: center; }
.cv-gazelle .sceau img { width: 15px; filter: brightness(0) invert(1); opacity: 1; }
.cv-gazelle .bandeau { padding: 10px 56px 12px 16px; }
.cv-gazelle .mono { font-size: .56rem; margin-bottom: .2rem; color: #e8e2c4; }
.cv-gazelle .t { font-size: 1rem; color: #fff; }
.cv-gazelle .sous { font-size: .7rem; color: #e8e2c4; margin-top: .2rem; }
.cv-pompiers .cell { min-height: 0; overflow: hidden; }
.cv-pompiers .cell img { height: 100%; object-fit: cover; display: block; border: 1px solid #e2e4e7; }
.cv-pompiers .centre { grid-column: 2 / 4; grid-row: 2 / 5; background: #fff; border: 1px solid #e2e4e7;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 6px; }
.cv-pompiers .h1 { font-family: "Spectral", Georgia, serif; font-weight: 700; color: #c8102e; font-size: 1.05rem; line-height: 1.05; letter-spacing: .02em; }
.cv-pompiers .accolade { display: flex; align-items: center; gap: 4px; font-family: "Spectral", Georgia, serif; font-size: .5rem; line-height: 1.45; text-align: left; }
.cv-pompiers .brace { color: #c8102e; font-size: 1.5rem; line-height: 1; font-weight: 300; }
/* Couverture d'un livre du moteur de restauration (templates/couvertures/_moteur.html + front/couverture.js).
   Tailles en cqw (% de la largeur de la couverture) : même rendu en miniature, en tête du livre et dans l'éditeur. */
.cv-moteur { container-type: inline-size; padding: 0; display: block; background: var(--fond, #0F1648); }
.cv-moteur .cv-photo { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: #333 center / cover no-repeat; }
.cv-photo-haut .cv-photo { border-bottom: .9cqw solid rgba(255,255,255,.55); }
.cv-photo-pleine .cv-photo { height: 100%; }
.cv-photo-pleine::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 38%, rgba(0,0,0,0) 62%); }
.cv-moteur .cv-textes { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 8cqw 8cqw; }
.cv-photo-haut .cv-textes { top: 62%; display: flex; flex-direction: column; justify-content: center; padding-top: 3cqw; padding-bottom: 4cqw; }
.cv-clair { color: #fff; }
.cv-fonce { color: var(--nuit); }
.cv-mention { font-family: var(--f-mono); font-size: 3.5cqw; letter-spacing: .06em; text-transform: uppercase; opacity: .85; margin-bottom: 1.5cqw; }
.cv-titre { font-family: var(--f-titre); font-weight: 900; font-size: 9cqw; line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere; }
.cv-sous { font-family: var(--f-texte); font-size: 4.6cqw; line-height: 1.25; margin-top: 1.5cqw; opacity: .92; }
.cv-auteur { font-family: var(--f-mono); font-size: 3.4cqw; margin-top: 2.5cqw; opacity: .8; }
.cv-photo-haut .cv-titre { font-size: 7.5cqw; }
.cv-logo-boite { position: absolute; z-index: 3; display: grid; place-items: center; }
.cv-logo-boite.taille-petit { --h: 11cqw; }
.cv-logo-boite.taille-moyen { --h: 17cqw; }
.cv-logo-boite.taille-grand { --h: 25cqw; }
.cv-logo { display: block; height: var(--h); aspect-ratio: var(--ratio, 1); max-width: 70cqw; background: var(--logo) center / contain no-repeat; }
.cv-logo.teinte { background: var(--logo-couleur, #fff); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.cv-logo-boite.place-haut-gauche { top: 7cqw; left: 7cqw; }
.cv-logo-boite.place-haut-droite { top: 7cqw; right: 7cqw; }
/* Sceau : logo dans un rond (à cheval sur la photo et le bandeau, ou en bas à droite) */
.cv-logo-boite.place-sceau { right: 6cqw; bottom: 6cqw; width: calc(var(--h) * 1.25); height: calc(var(--h) * 1.25); border-radius: 50%;
  background: var(--fond, #0F1648); border: .9cqw solid #c9b458; }
.cv-logo-boite.place-sceau .cv-logo { height: calc(var(--h) * .72); }
.cv-photo-haut .cv-logo-boite.place-sceau { bottom: auto; top: calc(62% - var(--h) * .62); }
.cv-photo-pleine .cv-logo-boite.place-sceau { top: 6cqw; bottom: auto; }
/* Carte « Nouveau livre » (auteurs, super admin) */
.nouveau-livre { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; color: inherit;
  display: block; width: 100%; align-self: start; }
.couverture.vide { background: transparent; color: var(--nuit); border: 2px dashed var(--trait); box-shadow: none;
  align-items: center; justify-content: center; gap: .4rem; }
.nouveau-livre:hover .couverture.vide { border-color: var(--nuit); box-shadow: none; }
.couverture.vide .plus { font-size: 2.6rem; line-height: 1; font-family: var(--f-titre); }
/* Boîte de création d'un livre */
.dlg-livre { border: 0; border-radius: var(--rayon); padding: 20px 22px; width: min(540px, calc(100vw - 32px));
  background: var(--blanc); color: var(--encre); box-shadow: 0 20px 50px rgba(15,22,72,.35); }
.dlg-livre::backdrop { background: rgba(15,22,72,.55); }
.dlg-livre h2 { margin-top: 0; }
.dlg-livre input { width: 100%; box-sizing: border-box; }
/* 13/10/2026 : choix de la sorte de livre (cahier de restauration / livre d'inventaire) */
.dlg-livre [hidden] { display: none !important; }
.genre-livre { border: 0; padding: 0; margin: 0 0 .8rem; display: flex; flex-wrap: wrap; gap: 8px; }
.genre-livre label { flex: 1 1 200px; border: 2px solid #d8d2c2; border-radius: 10px; padding: 8px 10px; cursor: pointer; }
.genre-livre label:has(input:checked) { border-color: #0F1648; background: #f1f3fb; }
.genre-livre input { width: auto; margin-right: 4px; }
.palette { border: 0; padding: 0; margin: 0 0 .5rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.palette legend { font-family: var(--f-mono); font-weight: 500; font-size: .75rem; margin-bottom: .4rem; padding: 0; }
.palette label { cursor: pointer; }
.palette input { position: absolute; opacity: 0; width: 1px; }
.palette label span { display: block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); }
.palette input:checked + span { outline: 3px solid var(--nuit); outline-offset: 2px; }
.palette input:focus-visible + span { outline: 3px dashed var(--nuit); outline-offset: 2px; }
.boite-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: .6rem; }
.livre .meta { margin-top: .7rem; }
.livre .meta strong { font-family: var(--f-titre); display: block; color: var(--nuit); }
.vide { padding: 40px 0; }

/* ---------- gestion ---------- */
.onglets { display: flex; gap: .4rem; border-bottom: 2px solid var(--trait); margin: 1rem 0 1.5rem; flex-wrap: wrap; }
.onglets button { font-family: var(--f-titre); font-weight: 700; font-size: .95rem; background: none; border: 0;
  padding: .7em 1em; cursor: pointer; color: var(--encre-2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.onglets button.actif { color: var(--nuit); border-bottom-color: var(--jaune); }
.panneau { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 20px; margin-bottom: 24px; }
.panneau h2 { font-size: 1.2rem; }
.form-ligne { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; }
.form-ligne label.champ { margin-bottom: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th { font-family: var(--f-mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-2); text-align: left; padding: .6em .5em; border-bottom: 2px solid var(--trait); white-space: nowrap; }
td { padding: .6em .5em; border-bottom: 1px solid var(--trait); vertical-align: middle; }
td .actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.etiquette { display: inline-block; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .2em .6em; border-radius: 999px; background: var(--papier); border: 1px solid var(--trait); white-space: nowrap; }
.etiquette.ok { background: #e3f3ea; border-color: #b9dfc9; color: #1d6b43; }
.etiquette.attente { background: #fff6cf; border-color: #efd97a; color: #6b5600; }
.etiquette.off { background: #f7e1e4; border-color: #e7b3bb; color: #8a1024; }
.etiquette.prive { background: #ece4f7; border-color: #d3c2ea; color: #5b2a86; }
.lien-copie { display: flex; gap: .5rem; margin-top: .8rem; }
.lien-copie input { font-family: var(--f-mono); font-size: .8rem; }
.boite { position: fixed; inset: 0; background: rgba(15,22,72,.55); display: grid; place-items: center; padding: 16px; z-index: 50; }
.boite .panneau { width: 100%; max-width: 520px; margin: 0; }
.livres-choix { display: flex; flex-direction: column; gap: .3rem; margin: .5rem 0 1rem; }

/* ---------- pied ---------- */
.pied { background: var(--nuit); color: rgba(255,255,255,.75); font-size: .85rem; padding: 22px 0; }
.pied .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .hero .wrap, .connexion { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 48px; }
  .hero .rond { width: 200px; order: -1; }
  .connexion .gauche { padding: 28px 16px; }
  .connexion .gauche img { width: 160px; }
  .entete nav a.cache-mobile { display: none; }
  .grille-livres { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
}

/* Gestion : « Qui a accès à quoi » et « Consultations » (13/10/2026) */
.table-droits th.col-livre { min-width: 110px; max-width: 150px; white-space: normal; vertical-align: bottom; font-size: .78rem; line-height: 1.25; }
.table-droits td { vertical-align: top; }
.table-droits .cel-droit { text-align: center; white-space: nowrap; }
.table-droits tr.inactif { opacity: .55; }
.table-droits tr.groupe-droits td { background: #ece7da; font-family: var(--f-titre); font-weight: 800; }
.droit { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .78rem; font-weight: 600; border: 1px solid transparent; }
.droit.modifie { background: #fff6cf; border-color: #efd97a; color: #6b5600; }
.droit.contribue { background: #ece4f7; border-color: #d3c2ea; color: #5b2a86; }
.droit.lit { background: #e3f3ea; border-color: #b9dfc9; color: #1d6b43; }
.droit.rien { color: #b9b3a2; }
.legende-droits { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .9rem; }
.cs-barres { display: flex; align-items: flex-end; gap: 4px; overflow-x: auto; padding: .4rem 0 .2rem; min-height: 40px; }
.cs-barre { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; min-width: 34px; }
.cs-trait { display: block; width: 22px; background: var(--nuit); border-radius: 3px 3px 0 0; }
.cs-nb { font-family: var(--f-mono); font-size: .68rem; }
.cs-jour { font-size: .6rem; color: var(--encre-2); writing-mode: vertical-rl; transform: rotate(180deg); height: 62px; white-space: nowrap; }

/* Sélecteur de langue FR / EN (traducteur.js, 14/10/2026) */
.tb-langues { display: inline-flex; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; overflow: hidden; margin-right: .8rem; vertical-align: middle; }
.tb-langues button { background: none; border: 0; color: inherit; font: 700 .78rem var(--f-titre, sans-serif); padding: .25rem .7rem; cursor: pointer; opacity: .75; }
.tb-langues button[aria-pressed="true"] { background: #fff; color: #0F1648; opacity: 1; }