/* Feuille de style de l'ERP BARA.
   Structure, composants et échelle typographique : Human Interface Guidelines d'Apple (ADR-003).
   Couleurs et polices : charte.md du 6 mai 2026 (docs/07), le brun bois tenant le rôle de couleur d'accent. */

@import url("fonts.af31607f79b8.css");

:root {
  /* Palette de la charte (docs/07), noms d'origine conservés. */
  --couleur-pilier: #916F45;
  --couleur-secondaire-1: #5A5A5C;
  --couleur-secondaire-2: #8894AB;
  --couleur-secondaire-3: #4F7A4D;
  --couleur-secondaire-4: #F2EBE0;
  --couleur-secondaire-5: #C97B3F;
  --couleur-alerte: #B5391C;
  --couleur-succes: #4F7A4D;
  --couleur-fond: #FBF8F2;
  --couleur-fond-alt: #FFFFFF;
  --couleur-texte: #2E2A26;
  --couleur-texte-alt: #000000;
  --couleur-texte-muted: #8894AB;

  /* Couleurs sémantiques à la manière des HIG, dérivées de la charte. */
  --tint: var(--couleur-pilier);
  --tint-presse: #7A5D39;
  --tint-leger: rgba(145, 111, 69, 0.12);
  --label: var(--couleur-texte);
  --label-secondaire: var(--couleur-secondaire-1);
  --label-tertiaire: var(--couleur-texte-muted);
  --fond-groupe: var(--couleur-fond);
  --fond-element: var(--couleur-fond-alt);
  --fond-remplissage: var(--couleur-secondaire-4);
  --separateur: rgba(46, 42, 38, 0.14);
  --materiau: rgba(251, 248, 242, 0.82);
  /* Verre liquide (HIG, iOS et macOS 26) : réservé à la couche de navigation, jamais au contenu. */
  --verre: rgba(255, 253, 249, 0.66);
  --verre-bord: rgba(255, 255, 255, 0.8);
  --verre-reflet: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -0.5px 0 rgba(46, 42, 38, 0.08);
  --verre-ombre: 0 10px 30px rgba(46, 42, 38, 0.12), 0 1px 3px rgba(46, 42, 38, 0.08);
  --verre-flou: saturate(190%) blur(24px);
  --rayon-verre: 22px;
  --fond-ligne-paire: #FDFBF7;          /* ligne paire de tableau, entre fond blanc et crème */
  --tint-presse-leger: rgba(145, 111, 69, 0.2);

  /* États : fonds légers et teintes « pressé » dérivés de la charte (jamais la couleur seule, docs/07). */
  --succes-leger: rgba(79, 122, 77, 0.14);
  --succes-presse: #3F633D;
  --attention-leger: rgba(201, 123, 63, 0.16);
  --attention-tres-leger: rgba(201, 123, 63, 0.10);
  --attention-texte: #9A5A28;           /* orange usinage assombri : contraste AA sur fond clair */
  --alerte-leger: rgba(181, 57, 28, 0.12);
  --alerte-tres-leger: rgba(181, 57, 28, 0.08);
  --alerte-presse: #962F17;

  --police-titres: "Source Serif 4", Georgia, "Times New Roman", serif;
  --police-corps: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --police-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;

  /* Échelle typographique des HIG (taille par défaut). */
  --t-large-title: 2.125rem;  /* 34 */
  --t-title1: 1.75rem;        /* 28 */
  --t-title2: 1.375rem;       /* 22 */
  --t-title3: 1.25rem;        /* 20 */
  --t-headline: 1.0625rem;    /* 17 semi-gras */
  --t-body: 1.0625rem;        /* 17 */
  --t-callout: 1rem;          /* 16 */
  --t-subheadline: 0.9375rem; /* 15 */
  --t-footnote: 0.8125rem;    /* 13 */
  --t-caption: 0.75rem;       /* 12 */

  --rayon-petit: 8px;
  --rayon: 10px;
  --rayon-grand: 14px;
  --cible: 44px;              /* cible tactile minimale des HIG */
  --cible-atelier: 56px;      /* atelier : au-delà des 48 px de docs/07 */
  --largeur-barre-laterale: 15rem;
  --largeur-contenu: 64rem;
  --ombre: 0 1px 2px rgba(46, 42, 38, 0.06), 0 4px 16px rgba(46, 42, 38, 0.05);
  --transition: 180ms cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Thème clair seulement : la charte fixe le fond #FBF8F2 et le logo sur fond clair (docs/07).
     « only » empêche aussi l'assombrissement automatique de certains navigateurs. */
  color-scheme: only light;
}

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

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

body {
  margin: 0;
  background: var(--fond-groupe);
  color: var(--label);
  font-family: var(--police-corps);
  font-size: var(--t-body);
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Titres : jamais en majuscules, ni soulignés, ni en italique (docs/07). */
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
.titre-large, h1 {
  font-family: var(--police-titres); font-size: var(--t-large-title); line-height: 1.2;
  color: var(--tint); letter-spacing: -0.01em;
}
h2 { font-family: var(--police-titres); font-size: var(--t-title2); line-height: 1.27; color: var(--tint); }
h3 { font-family: var(--police-titres); font-size: var(--t-title3); font-weight: 500; line-height: 1.25; }
h4 { font-size: var(--t-headline); line-height: 1.3; }

p { margin: 0 0 0.75rem; }
a { color: var(--tint); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--tint); outline-offset: 2px; border-radius: 4px; }

.secondaire { color: var(--label-secondaire); }
.note, small { font-size: var(--t-footnote); color: var(--label-tertiaire); }
.legende { font-size: var(--t-caption); color: var(--label-tertiaire); }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
code, .code-technique { font-family: var(--police-mono); font-size: 0.9em; }
.code-technique { overflow-wrap: anywhere; }

.lien-evitement {
  position: absolute; left: -999px; top: 0.5rem; z-index: 50;
  background: var(--fond-element); padding: 0.5rem 1rem; border-radius: var(--rayon);
}
.lien-evitement:focus { left: 0.5rem; }

/* ---------- Disposition : barre latérale + zone de contenu (style iPadOS et macOS) ---------- */
.app { display: grid; grid-template-columns: var(--largeur-barre-laterale) 1fr; min-height: 100vh; }
.app--sans-barre { grid-template-columns: 1fr; }
/* Sans min-width: 0, un tableau large élargit la colonne de grille et fait défiler toute la page. */
.zone-contenu { min-width: 0; }

.barre-laterale {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--fond-remplissage);
  border-right: 0.5px solid var(--separateur);
  padding: 1rem 0.75rem;
  display: flex; flex-direction: column; gap: 1rem;
}
/* Le logo reste sur fond clair (docs/07) : pastille blanche. */
.barre-laterale__logo {
  display: block; background: var(--fond-element); border-radius: var(--rayon);
  padding: 0.5rem; box-shadow: var(--ombre);
}
.barre-laterale__logo img { display: block; width: 100%; max-width: 160px; height: auto; margin: 0 auto; }
.barre-laterale__section { font-size: var(--t-footnote); font-weight: 600; color: var(--label-secondaire); padding: 0 0.75rem; margin: 0.5rem 0 0.25rem; }
.barre-laterale ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.barre-laterale a {
  display: flex; align-items: center; gap: 0.625rem; min-height: 36px; padding: 0.375rem 0.75rem;
  border-radius: var(--rayon-petit); color: var(--label); font-size: var(--t-subheadline); font-weight: 500;
}
.barre-laterale a:hover { background: var(--tint-leger); text-decoration: none; }
.barre-laterale a[aria-current="page"] { background: var(--tint); color: var(--fond-element); }
.barre-laterale a[aria-current="page"] .icone { color: var(--fond-element); }
.barre-laterale__pied { margin-top: auto; font-size: var(--t-footnote); color: var(--label-secondaire); padding: 0 0.75rem; }

.icone { width: 1.125rem; height: 1.125rem; flex: none; color: var(--tint); }

/* Barre d'outils translucide en tête du contenu. */
.barre-outils {
  position: sticky; top: 0; z-index: 20;
  background: var(--materiau);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--separateur);
}
.barre-outils__interieur {
  max-width: var(--largeur-contenu); margin: 0 auto; min-height: 52px; padding: 0.5rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.barre-outils__titre { font-size: var(--t-headline); font-weight: 600; }
.barre-outils__actions { display: flex; align-items: center; gap: 0.75rem; font-size: var(--t-subheadline); }
.barre-outils__logo { display: none; }
/* 80 px de large au minimum à l'écran (docs/07). */
.barre-outils__logo img { width: 80px; height: auto; display: block; }

.bandeau-environnement {
  background: var(--couleur-secondaire-5); color: var(--fond-element);
  text-align: center; font-size: var(--t-footnote); font-weight: 600; padding: 0.25rem 1rem;
}

main { width: 100%; max-width: var(--largeur-contenu); margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.entete-page { margin: 0.5rem 0 1.5rem; }
.entete-page .secondaire { margin-top: 0.25rem; }

/* Barre d'onglets en bas d'écran sur téléphone (style iOS). */
.barre-onglets { display: none; }

/* ---------- Listes groupées en encart (« inset grouped ») ---------- */
.groupe { margin: 0 0 2rem; }
.groupe__titre {
  font-size: var(--t-footnote); color: var(--label-secondaire); font-weight: 400;
  margin: 0 1rem 0.375rem; font-family: var(--police-corps);
}
.groupe__pied { font-size: var(--t-footnote); color: var(--label-tertiaire); margin: 0.375rem 1rem 0; }
.liste {
  list-style: none; margin: 0; padding: 0;
  background: var(--fond-element); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre);
}
.liste > li { position: relative; }
.liste > li + li::before {
  content: ""; position: absolute; top: 0; left: 1rem; right: 0; border-top: 0.5px solid var(--separateur);
}
.ligne {
  display: flex; align-items: center; gap: 0.75rem; min-height: var(--cible); padding: 0.625rem 1rem;
  color: var(--label);
}
a.ligne:hover { background: var(--tint-leger); text-decoration: none; }
a.ligne::after {
  content: ""; width: 0.5rem; height: 0.5rem; margin-left: auto; flex: none;
  border-right: 2px solid var(--label-tertiaire); border-top: 2px solid var(--label-tertiaire);
  transform: rotate(45deg);
}
.ligne__texte { flex: 1; min-width: 0; }
.ligne__titre { display: block; }
.ligne__detail { display: block; font-size: var(--t-subheadline); color: var(--label-secondaire); }
.ligne__valeur { color: var(--label-secondaire); text-align: right; font-variant-numeric: tabular-nums; }

/* Cartes (tableau de bord) */
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-bottom: 2rem; }
.carte {
  background: var(--fond-element); border-radius: var(--rayon-grand); padding: 1.25rem; box-shadow: var(--ombre);
}
.carte__titre { display: block; font-size: var(--t-subheadline); font-weight: 600; color: var(--label-secondaire); margin-bottom: 0.5rem; font-family: var(--police-corps); }
.carte__valeur { display: block; font-family: var(--police-titres); font-size: var(--t-title1); font-weight: 600; color: var(--tint); line-height: 1.15; }
.carte--lien { display: block; color: var(--label); }
.carte--lien:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--tint-leger), var(--ombre); }

/* Fiche (liste de définitions) : libellé à gauche, valeur à droite, valeurs longues renvoyées à la ligne. */
.fiche { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: 0.375rem 1rem; margin: 0; }
.fiche dt { color: var(--label-secondaire); font-size: var(--t-subheadline); }
.fiche dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.encadre { background: var(--fond-remplissage); border-radius: var(--rayon); padding: 1rem 1.25rem; margin: 1rem 0; }
.encadre--pefc { border-left: 4px solid var(--couleur-secondaire-3); }
.encadre--succes { border-left: 4px solid var(--couleur-succes); }
.encadre--attention { border-left: 4px solid var(--couleur-secondaire-5); }
.encadre--alerte { border-left: 4px solid var(--couleur-alerte); }

/* ---------- Tableaux ---------- */
.tableau-conteneur { position: relative; overflow-x: auto; background: var(--fond-element); border-radius: var(--rayon); box-shadow: var(--ombre); }
table { width: 100%; border-collapse: collapse; font-size: var(--t-subheadline); }
th {
  background: var(--fond-remplissage); color: var(--label-secondaire); text-align: left; font-weight: 600;
  font-size: var(--t-footnote); padding: 0.625rem 1rem; border-bottom: 0.5px solid var(--separateur);
}
td { padding: 0.625rem 1rem; border-bottom: 0.5px solid var(--separateur); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: var(--fond-ligne-paire); }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* Tableau dense : sur la table ou sur son conteneur. */
.tableau-dense th, .tableau-dense td { padding: 0.5rem 0.625rem; }
.tableau-dense td.nombre { white-space: nowrap; }
.tableau-dense tfoot td { font-weight: 600; background: var(--fond-remplissage); }

/* ---------- Boutons (rempli, teinté, contour, simple) ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--cible); padding: 0.5rem 1.25rem; border: none; border-radius: var(--rayon);
  background: var(--tint); color: var(--fond-element);
  font: inherit; font-size: var(--t-body); font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; text-decoration: none; transition: background var(--transition), transform var(--transition);
}
.bouton:hover { background: var(--tint-presse); text-decoration: none; color: var(--fond-element); }
.bouton:active { transform: scale(0.98); }
.bouton--teinte { background: var(--tint-leger); color: var(--tint); }
.bouton--teinte:hover { background: var(--tint-presse-leger); color: var(--tint); }
.bouton--contour { background: transparent; color: var(--tint); box-shadow: inset 0 0 0 1.5px var(--tint); }
.bouton--contour:hover { background: var(--tint-leger); color: var(--tint); }
.bouton--simple { background: none; color: var(--tint); padding: 0.25rem 0.5rem; min-height: 0; font-weight: 500; }
.bouton--simple:hover { background: var(--tint-leger); color: var(--tint); }
.bouton--destructif { background: var(--couleur-alerte); }
.bouton--destructif:hover { background: var(--alerte-presse); }
/* Action destructrice discrète (supprimer une ligne, révoquer) : texte rouge d'alerte, sans aplat (HIG). */
.bouton--simple.bouton--destructif { background: none; color: var(--couleur-alerte); }
.bouton--simple.bouton--destructif:hover { background: var(--alerte-tres-leger); color: var(--couleur-alerte); }
.bouton--plein { width: 100%; }
.bouton--petit { min-height: 36px; padding: 0.25rem 0.75rem; font-size: var(--t-subheadline); }
.bouton--grand { min-height: 50px; font-size: var(--t-headline); border-radius: var(--rayon-grand); }

/* ---------- Champs ---------- */
.champ { margin-bottom: 1rem; }
.champ label { display: block; font-size: var(--t-footnote); color: var(--label-secondaire); margin: 0 0 0.375rem 0.25rem; }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: var(--cible); padding: 0.625rem 0.875rem; font: inherit; color: var(--label);
  background: var(--fond-element); border: 0.5px solid var(--separateur); border-radius: var(--rayon);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--tint); box-shadow: 0 0 0 4px var(--tint-leger);
}
.champ .erreur { color: var(--couleur-alerte); font-size: var(--t-footnote); margin: 0.375rem 0 0 0.25rem; }
.champ .aide { font-size: var(--t-footnote); color: var(--label-tertiaire); margin: 0.375rem 0 0 0.25rem; }

/* Champs regroupés dans une liste (formulaire façon Réglages). */
.liste .champ { margin: 0; }
.liste .champ input { border: none; border-radius: 0; box-shadow: none; }

/* ---------- Messages : la couleur ne porte jamais seule le sens (docs/07) ---------- */
.messages { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.5rem; }
.message {
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem;
  background: var(--fond-element); border-radius: var(--rayon); box-shadow: var(--ombre); font-size: var(--t-subheadline);
}
.message::before {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.375rem; height: 1.375rem; border-radius: 50%; color: var(--fond-element);
  font-size: var(--t-footnote); font-weight: 700; background: var(--couleur-secondaire-2); content: "i";
}
.message--success::before { content: "\2713"; background: var(--couleur-succes); }
.message--warning::before { content: "!"; background: var(--couleur-secondaire-5); }
.message--error::before { content: "\00D7"; background: var(--couleur-alerte); }
.message strong { display: block; }

/* Pastilles */
.badge {
  display: inline-flex; align-items: center; min-height: 1.375rem; padding: 0 0.625rem; border-radius: 999px;
  font-size: var(--t-footnote); font-weight: 600; background: var(--fond-remplissage); color: var(--label-secondaire);
}
.badge--pefc, .badge--succes { background: var(--succes-leger); color: var(--couleur-secondaire-3); }
.badge--attention { background: var(--attention-leger); color: var(--attention-texte); }
.badge--alerte { background: var(--alerte-leger); color: var(--couleur-alerte); }

/* Contrôle segmenté : sous-navigation (aria-current="page") ou filtre (aria-current="true", aria-pressed). */
.segments {
  display: inline-flex; flex-wrap: wrap; max-width: 100%;
  background: var(--fond-remplissage); border-radius: var(--rayon-petit); padding: 2px; gap: 2px;
}
.segments a, .segments button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
  border: none; background: none; font: inherit; font-size: var(--t-subheadline); font-weight: 500;
  padding: 0.3rem 0.875rem; border-radius: 6px; color: var(--label); cursor: pointer; text-decoration: none;
}
.segments a:hover { text-decoration: none; background: var(--tint-leger); }
.segments [aria-current="page"], .segments [aria-current="true"], .segments [aria-pressed="true"] {
  background: var(--fond-element); box-shadow: var(--ombre);
}
.segments .compte { color: var(--label-tertiaire); font-variant-numeric: tabular-nums; margin-left: 0.25rem; }

/* Pastille de compte (barre latérale, écran « Plus ») : un nombre, toujours doublé d'un texte caché. */
.barre-laterale__libelle { flex: 1; min-width: 0; }
.pastille-compte {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.375rem; height: 1.375rem;
  padding: 0 0.375rem; border-radius: 999px; background: var(--tint-leger); color: var(--tint);
  font-size: var(--t-caption); font-weight: 600; font-variant-numeric: tabular-nums;
}
.barre-laterale a[aria-current="page"] .pastille-compte { background: var(--fond-element); }
.ligne .pastille-compte { margin-left: auto; }

/* ---------- Accueil « Aujourd'hui » ---------- */
.accueil-entete .secondaire { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.5rem; }
.accueil-entete__date { margin-right: 0.25rem; }
.accueil-titre { font-size: var(--t-title3); margin: 0 0 0.75rem; }
.a-faire__contenu { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.a-faire__contenu > .a-faire__vide, .a-faire__contenu > div[hx-get] { grid-column: 1 / -1; }
.a-faire__titre { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.a-faire__note { color: var(--label-tertiaire); }
.a-faire__tout { color: var(--tint); font-size: var(--t-subheadline); }
.a-faire__attente { margin: 0 1rem; }
.ligne--alerte { box-shadow: inset 3px 0 0 var(--couleur-alerte); }
.raccourcis {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.raccourcis form { margin: 0; height: 100%; }
.raccourci {
  display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; height: 100%; min-height: var(--cible);
  padding: 0.875rem 1rem; border: none; font: inherit; text-align: left; cursor: pointer; color: var(--label);
}
.raccourci .icone { width: 1.375rem; height: 1.375rem; margin-top: 0.0625rem; }
.raccourci__texte { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.raccourci__titre { font-weight: 600; }
.raccourci__detail { font-size: var(--t-footnote); color: var(--label-secondaire); }
/* Téléphone : raccourcis en deux colonnes, sans le détail, pour laisser « À faire » à portée de pouce. */
@media (max-width: 52rem) {
  .raccourcis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .raccourci { padding: 0.75rem; gap: 0.5rem; align-items: center; }
  .raccourci__detail { display: none; }
  .raccourci__titre { font-size: var(--t-subheadline); }
}
.grille--compacte { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-bottom: 0; }
.carte--compacte { padding: 0.875rem 1rem; border-radius: var(--rayon); }
.carte--compacte .carte__titre { font-size: var(--t-footnote); margin-bottom: 0.25rem; }
.carte--compacte .carte__valeur { font-size: var(--t-title3); }
.carte--compacte .note { margin: 0.25rem 0 0; }

/* Sous-navigation d'un module chargé : rangée principale (contrôle segmenté), puis une rangée discrète
   « Paramétrage » et « Voir aussi » pour les écrans rares (ADR-003, note du 10/10/2026). */
.navigation-module { margin: 0 0 1.25rem; display: grid; gap: 0.5rem; justify-items: start; }
.navigation-module .sous-navigation { margin: 0; }
.navigation-module__secondaire {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0 0.25rem;
  font-size: var(--t-footnote); color: var(--label-secondaire);
}
.navigation-module__secondaire ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.125rem 0.25rem; margin: 0; padding: 0; }
.navigation-module__secondaire a { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; border-radius: 6px; }
.navigation-module__secondaire a[aria-current="page"] { background: var(--tint-leger); font-weight: 600; text-decoration: none; }
.navigation-module__intitule { font-weight: 600; }

/* ---------- Écran de connexion (feuille centrée) ---------- */
.ecran-centre { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.feuille { width: 100%; max-width: 26rem; }
.feuille__logo { display: block; width: 180px; margin: 0 auto 1.5rem; background: var(--fond-element); padding: 0.75rem; border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
.feuille__logo img { width: 100%; height: auto; display: block; }
.feuille h1 { text-align: center; margin-bottom: 0.5rem; }
.feuille .sous-titre { text-align: center; color: var(--label-secondaire); margin-bottom: 1.75rem; }
.separateur { display: flex; align-items: center; gap: 0.75rem; color: var(--label-tertiaire); margin: 1.25rem 0; font-size: var(--t-footnote); }
.separateur::before, .separateur::after { content: ""; flex: 1; border-top: 0.5px solid var(--separateur); }

/* Mention de l'auteur de l'ERP : discrète, dans l'interface seulement (jamais sur les documents clients). */
.credit { font-size: var(--t-caption); color: var(--label-secondaire); text-align: center; margin: 1rem 0 0; }
.credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credit--barre { text-align: left; margin-top: 0.5rem; }
.ecran-centre { grid-template-rows: 1fr auto; }
.ecran-centre .feuille { align-self: center; }

/* ---------- Écrans atelier : grandes cibles, contraste fort, une action par écran (docs/07) ---------- */
.atelier .champ input { font-size: 1.75rem; min-height: var(--cible-atelier); text-align: center; letter-spacing: 0.15em; }
.atelier .bouton { min-height: var(--cible-atelier); font-size: 1.25rem; }
.atelier .champ label { font-size: var(--t-headline); color: var(--label); font-weight: 600; }
/* Liens texte de l'atelier (changer de badge, revenir) : cible de 56 px aussi. */
.atelier .groupe__pied a { display: inline-flex; align-items: center; min-height: var(--cible-atelier); }

.sprite { display: none; }
.centre { text-align: center; }
.espace-haut { margin-top: 1rem; }

.liste-simple { padding-left: 1.25rem; margin: 0; }

/* Recherche : champ et bouton sur une ligne, le champ se rétrécit sur téléphone. */
.recherche { display: flex; gap: 0.5rem; margin-bottom: 1rem; max-width: 32rem; }
.recherche input[type="search"] {
  flex: 1; min-width: 0; min-height: var(--cible); padding: 0 0.875rem; font: inherit; color: var(--label);
  background: var(--fond-element); border: 0.5px solid var(--separateur); border-radius: var(--rayon);
}

/* ---------- Téléphone : barre latérale remplacée par une barre d'onglets ---------- */
/* Textes longs : retour à la ligne plutôt que défilement de toute la page. */
main { overflow-wrap: break-word; }   /* noms de fichier, références, adresses longues */
main .note, main .ligne__detail, main td { overflow-wrap: anywhere; }

@media (max-width: 52rem) {
  .barre-outils__interieur { flex-wrap: wrap; row-gap: 0.25rem; }
  .barre-outils__actions { flex-wrap: wrap; justify-content: flex-end; }
  .app { grid-template-columns: 1fr; }
  .barre-laterale { display: none; }
  .barre-outils__logo { display: block; }
  main { padding: 1rem 1rem 6rem; }
  .barre-onglets {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
    background: var(--materiau);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--separateur); padding: 0.25rem 0 calc(0.25rem + env(safe-area-inset-bottom));
  }
  .barre-onglets a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: var(--cible);
    justify-content: center; font-size: 0.625rem; font-weight: 500; color: var(--label-tertiaire);
  }
  .barre-onglets a .icone { width: 1.5rem; height: 1.5rem; color: currentColor; }
  .barre-onglets a[aria-current="page"] { color: var(--tint); }
  .barre-onglets a:hover { text-decoration: none; }
}

/* Écran tactile ou téléphone : toutes les cibles à 44 px au moins (HIG, ADR-003). */
@media (pointer: coarse), (max-width: 52rem) {
  .bouton--simple, .bouton--petit, .segments a, .segments button { min-height: var(--cible); }
  .barre-laterale a { min-height: var(--cible); }
  .groupe__pied a, .ligne__valeur a { display: inline-flex; align-items: center; min-height: var(--cible); }
  .navigation-module__secondaire a { min-height: var(--cible); }
}

/* ---------- Verre liquide : barre latérale flottante, barre d'outils, barre d'onglets en capsule ----------
   Effet en CSS seul (backdrop-filter) : aucun script, compatible avec la politique de sécurité stricte,
   sans capture de page ni WebGL. Le contenu (listes, tableaux, fiches) reste opaque pour la lisibilité. */
.barre-laterale {
  top: 0.5rem; height: calc(100vh - 1rem); margin: 0.5rem 0 0.5rem 0.5rem;
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border: 0.5px solid var(--verre-bord); border-radius: var(--rayon-verre);
  box-shadow: var(--verre-reflet), var(--verre-ombre);
}
/* Barre plus haute que l'écran : elle défile, ses éléments ne se tassent pas (logo écrasé sinon). */
.barre-laterale > * { flex-shrink: 0; }
.barre-outils {
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  box-shadow: var(--verre-reflet);
}
@media (max-width: 52rem) {
  main { padding-bottom: 7rem; }
  .barre-onglets {
    left: 0.75rem; right: 0.75rem; bottom: calc(0.5rem + env(safe-area-inset-bottom));
    padding: 0.25rem; border-radius: 999px;
    background: var(--verre);
    -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
    border: 0.5px solid var(--verre-bord);
    box-shadow: var(--verre-reflet), var(--verre-ombre);
  }
  .barre-onglets a { border-radius: 999px; }
  .barre-onglets a[aria-current="page"] { background: var(--tint-leger); }
}

/* Écrans centrés (connexion, atelier, consentement, erreurs) : fond dégradé aux couleurs de la charte,
   statique (pas d'animation : téléphones de l'atelier), feuille en verre par-dessus. */
.ecran-centre {
  background:
    radial-gradient(60rem 40rem at 10% 0%, rgba(145, 111, 69, 0.22), transparent 60%),
    radial-gradient(50rem 36rem at 100% 30%, rgba(79, 122, 77, 0.14), transparent 60%),
    radial-gradient(48rem 40rem at 30% 100%, rgba(201, 123, 63, 0.14), transparent 60%),
    var(--couleur-fond);
}
.ecran-centre .feuille {
  padding: 2rem 1.5rem; border-radius: 28px;
  background: var(--verre);
  -webkit-backdrop-filter: var(--verre-flou); backdrop-filter: var(--verre-flou);
  border: 0.5px solid var(--verre-bord);
  box-shadow: var(--verre-reflet), var(--verre-ombre);
}

/* Repli opaque : navigateur sans flou d'arrière-plan, transparence réduite ou contraste élevé demandés. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .barre-laterale, .barre-outils, .barre-onglets, .ecran-centre .feuille { background: var(--fond-element); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .barre-laterale, .barre-outils, .barre-onglets, .ecran-centre .feuille {
    background: var(--fond-element); -webkit-backdrop-filter: none; backdrop-filter: none;
    border: 1px solid var(--separateur);
  }
}

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

@media print {
  .barre-laterale, .barre-outils, .barre-onglets, .bandeau-environnement { display: none; }
  .app { display: block; }
  body { background: var(--fond-element); }
}