/* Atmosphäre : jetons et composants du visuel 2026 (maquettes Plateforme, Conversations, Charte des couleurs).
   Feuille autonome, sans cadriciel : à lier APRÈS Roboto 300/400/700 et Phosphor Light.
   Classes préfixées « a- » pour ne rien écraser chez l'hôte. Rayon 0 partout, aucune ombre, aucun dégradé. */

:root {
  /* Base */
  --encre: #1E1E1E;
  --jaune: #FEDF00;
  --blanc: #FFFFFF;
  --fond: #F4F4F3;
  --pastille: #EFEFEE;
  --colonne: #ECECEB;
  --filet: #E4E4E3;
  --filet-fort: #EFEFEE;
  --bordure-champ: #B3B2B1;
  --texte-2: #3D4F5C;      /* 8,5:1 sur blanc, 7,4:1 sur --pastille */
  --survol: #FBFBFA;
  --selection: #FFFBD6;
  --depot: #FFF6B3;

  /* Familles de statut : plein = repère, -t = fond du texte (7:1 et plus avec l'encre) */
  --entree: #5D7E95;   --entree-t: #9BAFBD;
  --action: #F5A800;   --action-t: #F5A800;
  --prio: #FEDF00;     --prio-t: #FEDF00;
  --cours: #00A7CE;    --cours-t: #33B9D8;
  --attente: #8547AD;  --attente-t: #C09FD4;
  --probleme: #FF4338; --probleme-t: #FF8A84;
  --reussi: #77B82A;   --reussi-t: #7FBC37;
  --clos: #B3B2B1;     --clos-t: #B3B2B1;
  --conformite: #E72176; /* Loi 25 seulement */

  /* Familles de produits : petit carré seulement, jamais de texte */
  --fam-jeux: #00A7CE;
  --fam-mobilier: #77B82A;
  --fam-sieges: #FF4338;
  --fam-sanitaires: #8547AD;
  --fam-signature: #1E1E1E;

  --police: 'Roboto', Arial, sans-serif;
  --biseau-s: 8px;
  --biseau-m: 10px;
  --entete-h: 56px;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
body { margin: 0; font: 400 14px/1.45 var(--police); color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
input, select, textarea, button { font-family: inherit; color: var(--encre); }
::placeholder { color: var(--texte-2); font-weight: 300; }
a { color: var(--encre); }
a:hover { background: var(--jaune); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 2px; }
.a-meta { font-size: 13px; color: var(--texte-2); }
.a-a-renseigner { font-weight: 300; font-style: italic; color: var(--texte-2); }
.a-montant { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.a-lettrage { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.a-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1023px) { [data-hide-sm] { display: none !important; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print { [data-confidentiel] { display: none !important; } }

/* ---------------------------------------------------------------- coquille : haut fixe, seul le cadre défile */
.a-app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.a-app > .a-corps { flex: 1; min-height: 0; overflow: auto; }
.a-entete {
  height: var(--entete-h); flex: none; background: var(--encre); color: var(--blanc);
  display: flex; align-items: center; gap: 12px;
  padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
}
.a-logo { color: var(--jaune); font-weight: 700; font-size: 22px; letter-spacing: .02em; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.a-logo:hover { background: none; }
.a-entete-titre { font-size: 15px; font-weight: 400; color: var(--blanc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.a-entete-droite { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.a-entete .a-lien-clair { color: var(--blanc); background: none; border: 0; min-height: 44px; padding: 0 8px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.a-entete .a-lien-clair:hover { color: var(--jaune); background: none; }
.a-entete :focus-visible { outline-color: var(--jaune); }

/* ---------------------------------------------------------------- onglets (4.3) */
.a-onglets { display: flex; gap: 0; background: var(--blanc); border-bottom: 1px solid var(--filet); overflow-x: auto; scrollbar-width: none; flex: none; padding: 0 clamp(8px, 2vw, 24px); }
.a-onglets::-webkit-scrollbar { display: none; }
.a-onglet { min-height: 48px; padding: 0 16px; border: 0; background: none; font-size: 14px; font-weight: 400; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; box-shadow: inset 0 -4px 0 transparent; }
.a-onglet:hover { background: var(--survol); }
.a-onglet[aria-selected="true"], .a-onglet[aria-pressed="true"] { font-weight: 700; box-shadow: inset 0 -4px 0 var(--jaune); }
.a-onglet:focus-visible { outline-offset: -4px; }

/* ---------------------------------------------------------------- boutons (4.1) */
.a-btn { min-height: 40px; padding: 0 16px; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none; border: 1px solid var(--encre); background: var(--blanc); color: var(--encre); }
.a-btn i { font-size: 18px; }
.a-btn:hover { background: var(--encre); color: var(--blanc); }
.a-btn:focus-visible { outline: 2px solid var(--encre); outline-offset: -4px; }
.a-btn:hover:focus-visible { outline-color: var(--jaune); }
.a-btn-principal { min-height: 42px; padding: 0 20px; border: 0; background: var(--encre); color: var(--blanc); font-weight: 700;
  clip-path: polygon(var(--biseau-m) 0, 100% 0, 100% calc(100% - var(--biseau-m)), calc(100% - var(--biseau-m)) 100%, 0 100%, 0 var(--biseau-m)); }
.a-btn-principal:hover { background: #000; }
.a-btn-principal:focus-visible { outline: 2px solid var(--jaune); outline-offset: -7px; }
.a-btn-discret { border: 0; background: none; padding: 0 4px; min-height: 36px; text-decoration: underline; font-size: 13px; }
.a-btn-discret:hover { background: var(--jaune); color: var(--encre); }
.a-btn-icone { width: 40px; min-height: 40px; padding: 0; }
.a-btn:disabled, .a-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; }
.a-btn:disabled:hover { background: var(--blanc); color: var(--encre); }
.a-btn-principal:disabled:hover { background: var(--encre); color: var(--blanc); }

/* ---------------------------------------------------------------- contrôle segmenté (4.2) */
.a-segmente { display: inline-flex; border: 1px solid var(--encre); flex: none; }
.a-segmente > button { min-height: 38px; padding: 0 14px; border: 0; background: var(--blanc); font-size: 14px; font-weight: 400; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.a-segmente > button + button { border-left: 1px solid var(--encre); }
.a-segmente > button[aria-pressed="true"], .a-segmente > button[aria-selected="true"] { background: var(--encre); color: var(--blanc); font-weight: 700; }
.a-segmente > button:focus-visible { outline-offset: -4px; }

/* ---------------------------------------------------------------- champs (4.6) */
.a-champ { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; font-weight: 700; }
.a-champ > .a-aide { font-weight: 400; }
.a-input, .a-champ input:not([type=checkbox]):not([type=radio]):not([type=file]), .a-champ select, .a-champ textarea {
  min-height: 42px; width: 100%; padding: 0 12px; border: 1px solid var(--bordure-champ); background: var(--blanc);
  font-size: 16px; font-weight: 300; color: var(--encre);
}
.a-champ textarea { padding: 10px 12px; min-height: 84px; resize: vertical; line-height: 1.4; }
.a-input:focus, .a-champ input:focus, .a-champ select:focus, .a-champ textarea:focus { border-color: var(--encre); box-shadow: inset 0 0 0 1px var(--encre); outline: none; }
.a-recherche { position: relative; flex: 1 1 260px; max-width: 520px; min-width: 0; }
.a-recherche > i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; pointer-events: none; }
.a-champ.a-recherche > input:not([type=checkbox]):not([type=radio]):not([type=file]), .a-recherche > .a-input { padding-left: 40px; }
.a-case { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 400; cursor: pointer; white-space: nowrap; }
.a-case input { width: 20px; height: 20px; margin: 0; accent-color: var(--encre); }
.a-aide { font-size: 13px; color: var(--texte-2); margin: 4px 0; font-weight: 400; }

/* ---------------------------------------------------------------- barre de filtres (4.7) */
.a-barre-filtres { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.a-btn-filtres[aria-expanded="true"] { background: var(--jaune); color: var(--encre); }
.a-btn-filtres .a-compte { background: var(--encre); color: var(--jaune); padding: 0 6px; font-size: 12px; font-weight: 700; }
.a-panneau-filtres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px 16px; align-items: end; background: var(--blanc); border: 1px solid var(--filet); padding: 14px 16px; margin-top: 10px; }
.a-puce-filtre { min-height: 32px; padding: 0 10px; border: 1px solid var(--bordure-champ); background: var(--blanc); font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.a-puce-filtre:hover { border-color: var(--encre); }

/* ---------------------------------------------------------------- page de liste (6.2) */
.a-page-tete { padding: 20px clamp(16px, 3vw, 32px) 14px; border-bottom: 1px solid var(--filet); background: var(--fond); }
.a-page-tete-ligne { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 12px; }
.a-page-tete h1 { margin: 0 auto 0 0; font-size: clamp(24px, 2.6vw, 30px); font-weight: 400; }
.a-page-corps { padding: 16px clamp(16px, 3vw, 32px) 32px; }
.a-page-lecture { max-width: 1180px; margin: 0 auto; padding: clamp(16px, 2vw, 20px) clamp(16px, 4vw, 48px) 40px; }

/* ---------------------------------------------------------------- cartes et sections (4.8) */
.a-carte { background: var(--blanc); border: 1px solid var(--filet); }
.a-carte-tete { padding: 16px 20px; border-bottom: 1px solid var(--filet); display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.a-carte-tete h2, .a-carte-tete h3 { margin: 0; font-size: 16px; font-weight: 700; }
.a-carte-corps { padding: 16px 20px; }
.a-repere { box-shadow: inset 5px 0 0 var(--plein, var(--filet)); }
details.a-section { background: var(--blanc); border: 1px solid var(--filet); }
details.a-section > summary { list-style: none; cursor: pointer; min-height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
details.a-section > summary::-webkit-details-marker { display: none; }
details.a-section > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--encre); border-bottom: 2px solid var(--encre); transform: rotate(-45deg); flex: none; margin-right: 2px; }
details.a-section[open] > summary::before { transform: rotate(45deg); }
details.a-section > summary:hover { background: var(--survol); }

/* ---------------------------------------------------------------- tableaux (4.9) */
.a-cadre-tableau { overflow: auto; background: var(--blanc); border: 1px solid var(--filet); }
.a-tableau { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 14px; }
.a-tableau th { position: sticky; top: 0; z-index: 2; background: var(--blanc); border-bottom: 2px solid var(--encre); padding: 10px 12px; font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; }
.a-tableau td { padding: 10px 12px; border-bottom: 1px solid var(--filet-fort); vertical-align: top; }
.a-tableau tr:hover td { background: var(--survol); }
.a-tableau td.a-nombre, .a-tableau th.a-nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.a-tableau tr[aria-selected="true"] td { background: var(--selection); }

/* ---------------------------------------------------------------- pastilles (4.4) */
.a-pastille { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 8px; background: var(--pastille); color: var(--encre); white-space: nowrap; }
.a-pastille-statut { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 8px; white-space: nowrap; color: var(--encre);
  background: var(--teinte, var(--pastille)); border-left: 4px solid var(--plein, var(--clos)); }
.a-pastille i, .a-pastille-statut i { font-size: 13px; }
.a-entree   { --plein: var(--entree);   --teinte: var(--entree-t); }
.a-action   { --plein: var(--action);   --teinte: var(--action-t); }
.a-prio     { --plein: var(--prio);     --teinte: var(--prio-t); }
.a-cours    { --plein: var(--cours);    --teinte: var(--cours-t); }
.a-attente  { --plein: var(--attente);  --teinte: var(--attente-t); }
.a-probleme { --plein: var(--probleme); --teinte: var(--probleme-t); }
.a-reussi   { --plein: var(--reussi);   --teinte: var(--reussi-t); }
.a-clos     { --plein: var(--clos);     --teinte: var(--clos-t); }
.a-carre-famille { display: inline-block; width: 11px; height: 11px; background: var(--famille, var(--encre)); flex: none; }
.a-compteur { display: inline-block; min-width: 20px; padding: 0 6px; background: var(--encre); color: var(--jaune); font-size: 12px; font-weight: 700; text-align: center; }

/* ---------------------------------------------------------------- avatars, progression, messages */
.a-avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--t, 30px); height: var(--t, 30px); background: var(--jaune); color: var(--encre); font-weight: 700; font-size: calc(var(--t, 30px) * .42); flex: none; }
.a-avatar-encre { background: var(--encre); color: var(--jaune); }
.a-progression { height: 8px; background: var(--pastille); }
.a-progression > span { display: block; height: 100%; background: var(--reussi); }
.a-message { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
  background: var(--encre); color: var(--blanc); padding: 12px 18px; font-size: 14px; border-bottom: 3px solid var(--jaune); max-width: calc(100vw - 32px); }
.a-message.a-erreur { border-bottom-color: var(--probleme); }

/* ---------------------------------------------------------------- dialogue */
.a-dialogue { position: fixed; inset: 0; z-index: 50; background: rgba(30, 30, 30, .5); display: flex; justify-content: center; align-items: stretch; padding: 2vh 2vw; }
.a-dialogue > .a-boite { background: var(--fond); width: 100%; max-width: 1180px; display: flex; flex-direction: column; min-height: 0; }
.a-dialogue .a-boite-tete { min-height: 56px; flex: none; background: var(--encre); color: var(--blanc); display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; }
.a-dialogue .a-boite-tete h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-dialogue .a-boite-corps { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 24px; }
@media (max-width: 639px) { .a-dialogue { padding: 0; } }