/* ==========================================================
   Espace TLF · styles
   Sur le modèle du pilotage Made by Recette, à la charte TLF :
   barre latérale violet nuit, contenu sur fond clair, cartes blanches,
   actions en violet, repères en rouge (couleurs de la charte).
   ========================================================== */

@font-face { font-family: "Inter"; src: url("/fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "AllianceNo2"; src: url("/fonts/AllianceNo2-SemiBold.woff2") format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }

:root {
  --violet: #6b58a1;
  --violet-fonce: #3b2a70;
  --violet-pale: #efedf8;
  --rouge: #dd3d3c;
  --rouge-fonce: #b32b2a;
  --rouge-pale: #fdeceb;
  --vert-fonce: #1c6b45;
  --vert-pale: #e1f1e7;
  --encre: #1c1633;
  --encre-2: #2a2249;
  --encre-3: #40366a;
  --encre-douce: #565070;
  --fond: #f6f4fb;
  --fond-2: #ece8f5;
  --fond-3: #faf9fd;
  --blanc: #fff;
  --nav-texte: #cbc6dc;
  --nav-rubrique: #9b94b8;
  --ligne: #e3dff0;
  --ligne-forte: #8f89a8;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titre: "AllianceNo2", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-h1: clamp(1.6rem, 2.4vw, 2.1rem);
  --fs-h2: 1.125rem;
  --fs-body: .9375rem;
  --fs-small: .8125rem;
  --fs-mini: .75rem;
  --fs-chiffre: 2rem;

  --rayon: 14px;
  --rayon-moyen: 10px;
  --rayon-btn: 8px;
  --ombre: 0 1px 2px rgba(28, 22, 51, .06);
  --barre-l: 248px;
  --gouttiere: clamp(16px, 3vw, 40px);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; font-family: var(--font); font-size: var(--fs-body); line-height: 1.5; color: var(--encre); background: var(--fond); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--violet-fonce); text-underline-offset: 2px; }
a:hover { color: var(--encre); }
h1, h2, h3 { margin: 0; line-height: 1.15; font-family: var(--font-titre); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); font-weight: 600; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dd, fieldset { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code { padding: 1px 5px; font-family: var(--mono); font-size: .875em; background: var(--fond-2); border-radius: 4px; }
.date, .compteur__valeur, .colonne__compte { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: none; }
.barre :focus-visible { outline-color: var(--violet-pale); }

.visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.evitement { position: absolute; top: 8px; left: 8px; z-index: 40; padding: 8px 14px; color: var(--encre); background: var(--blanc); border-radius: var(--rayon-btn); transform: translateY(-200%); }
.evitement:focus { transform: none; }

/* ---------- Coquille : barre latérale + contenu ---------- */

.coquille { display: grid; grid-template-columns: var(--barre-l) minmax(0, 1fr); min-height: 100dvh; }

.barre { position: sticky; top: 0; display: flex; flex-direction: column; gap: 24px; height: 100dvh; padding: 24px 16px 20px; overflow-y: auto; color: var(--blanc); background: var(--encre); overscroll-behavior: contain; }
.barre__tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barre__marque { display: flex; flex-direction: column; gap: 10px; padding: 4px 8px; color: var(--blanc); text-decoration: none; border-radius: 8px; }
.barre__logo { width: 96px; height: auto; }
.barre__app { font-size: var(--fs-small); color: var(--nav-texte); }
.barre__menu { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; color: var(--blanc); background: transparent; border: 1px solid var(--encre-3); border-radius: var(--rayon-btn); }
.barre__menu:hover { border-color: var(--nav-texte); }
.barre__menu .barre__icone { width: 18px; height: 18px; }
.barre__nav { display: flex; flex-direction: column; gap: 18px; }
.barre__groupe { display: grid; gap: 4px; }
.barre__rubrique { padding: 0 12px 2px; font-size: var(--fs-mini); color: var(--nav-rubrique); }
.barre__liste { display: grid; gap: 2px; }
.barre__lien { position: relative; display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; color: var(--nav-texte); text-decoration: none; border-radius: 8px; transition: background-color .15s ease, color .15s ease; }
.barre__lien:hover { color: var(--blanc); background: var(--encre-2); }
.barre__lien[aria-current="page"] { color: var(--blanc); background: var(--encre-2); }
.barre__lien[aria-current="page"]::before { content: ""; position: absolute; top: 8px; bottom: 8px; left: -16px; width: 4px; background: var(--rouge); border-radius: 0 4px 4px 0; }
.barre__icone { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.barre__lien[aria-current="page"] .barre__icone { color: var(--blanc); }
.barre__badge { min-width: 22px; margin-left: auto; padding: 0 7px; font-size: var(--fs-mini); line-height: 20px; font-weight: 700; text-align: center; color: var(--blanc); background: var(--rouge); border-radius: 999px; }
.barre__pied { display: grid; gap: 12px; margin-top: auto; padding: 16px 8px 0; border-top: 1px solid var(--encre-2); }
.barre__moi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barre__avatar { display: grid; flex: none; place-items: center; width: 36px; height: 36px; font-weight: 700; color: var(--violet-fonce); background: var(--violet-pale); border-radius: 50%; }
.barre__identite { display: grid; min-width: 0; }
.barre__nom { overflow: hidden; font-weight: 500; color: var(--blanc); text-overflow: ellipsis; white-space: nowrap; }
.barre__role { font-size: var(--fs-mini); color: var(--nav-texte); }
.barre__sortie { width: 100%; min-height: 36px; padding: 6px 12px; text-align: left; color: var(--nav-texte); background: transparent; border: 1px solid var(--encre-3); border-radius: var(--rayon-btn); transition: color .15s ease, border-color .15s ease; }
.barre__sortie:hover { color: var(--blanc); border-color: var(--nav-texte); }

.contenu { min-width: 0; padding: 32px var(--gouttiere) 72px; }

/* ---------- Mise en page des vues ---------- */

.vue { display: grid; gap: 20px; max-width: 1480px; margin: 0 auto; }
.vue--etroite { max-width: 880px; margin-left: 0; }
.pile { display: grid; gap: 16px; min-width: 0; }
.entete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.entete__titre { min-width: 0; }
.entete__sous-titre { margin-top: 6px; color: var(--encre-douce); }
.entete__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.meta { font-size: var(--fs-small); color: var(--encre-douce); }
.fil { font-size: var(--fs-small); }
.fil a { text-decoration: none; }
.fil a:hover { text-decoration: underline; }
.fil--chemin { margin-bottom: 8px; color: var(--encre-douce); }
.texte-long { white-space: pre-wrap; overflow-wrap: anywhere; }
.lien-fort { font-weight: 600; color: var(--encre); text-decoration: none; }
a.lien-fort:hover { color: var(--violet-fonce); text-decoration: underline; }

/* ---------- Boutons ---------- */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; font-weight: 500; line-height: 1.2; color: var(--blanc); text-decoration: none; white-space: nowrap; background: var(--violet); border: 2px solid var(--violet); border-radius: var(--rayon-btn); transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.btn:hover { color: var(--blanc); background: var(--violet-fonce); border-color: var(--violet-fonce); }
.btn--secondaire { color: var(--encre); background: var(--blanc); border-color: var(--ligne-forte); }
.btn--secondaire:hover { color: var(--encre); background: var(--fond-3); border-color: var(--encre-douce); }
.btn--danger { color: var(--blanc); background: var(--rouge); border-color: var(--rouge); }
.btn--danger:hover { background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.btn--discret { color: var(--violet-fonce); background: transparent; border-color: transparent; }
.btn--discret:hover { color: var(--encre); background: var(--violet-pale); border-color: var(--violet-pale); }
.btn--petit { min-height: 32px; padding: 4px 10px; font-size: var(--fs-small); }
.btn--large { width: 100%; min-height: 46px; }
.icone { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lien-bouton { padding: 0; font: inherit; color: var(--violet-fonce); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; }
.lien-bouton:hover { color: var(--encre); }

.segmente { display: inline-flex; padding: 3px; background: var(--blanc); border: 1px solid var(--ligne-forte); border-radius: 10px; }
.segmente a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; color: var(--encre-douce); text-decoration: none; border-radius: 7px; }
.segmente a:hover { color: var(--encre); }
.segmente a[aria-current="true"] { color: var(--blanc); background: var(--encre); }

/* ---------- Cartes ---------- */

.carte { min-width: 0; padding: 20px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte__tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 14px; }
.carte__lien { font-size: var(--fs-small); white-space: nowrap; }
.carte__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.carte--tableau { padding: 0; overflow: hidden; }
.carte--intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; }
.carte--intro h2 { margin-bottom: 4px; }

/* ---------- Compteurs de l'accueil ---------- */

.compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.compteur { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 104px; padding: 16px 16px 14px 18px; overflow: hidden; color: var(--encre); text-decoration: none; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); transition: border-color .15s ease; }
.compteur:hover { color: var(--encre); border-color: var(--violet); }
.compteur::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: transparent; }
.compteur__valeur { font-family: var(--font-titre); font-size: var(--fs-chiffre); font-weight: 700; line-height: 1; }
.compteur__libelle { font-size: var(--fs-small); line-height: 1.3; color: var(--encre-douce); }
.compteur--alerte::before { background: var(--rouge); }
.compteur--alerte .compteur__valeur { color: var(--rouge); }
.compteur--repere::before { background: var(--violet); }

/* ---------- Grille de l'accueil ---------- */

.grille-accueil { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.grille-accueil > .carte--7 { grid-column: span 7; }
.grille-accueil > .carte--5 { grid-column: span 5; }
.grille-accueil > .carte--12 { grid-column: 1 / -1; }

.elements { display: grid; }
.element { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--ligne); }
.element:first-child { padding-top: 0; border-top: 0; }
.element:last-child { padding-bottom: 0; }
.element__ligne { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.element__titre { font-weight: 600; color: var(--encre); text-decoration: none; overflow-wrap: anywhere; }
a.element__titre:hover { color: var(--violet-fonce); text-decoration: underline; }
.element__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: var(--fs-small); color: var(--encre-douce); }
.element--image { grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 12px; }
.element--image img, .element__sans-image { width: 72px; height: 48px; object-fit: cover; background: var(--fond-2); border-radius: 8px; }

/* ---------- Pastilles ---------- */

.pastille { display: inline-flex; align-items: center; padding: 1px 9px; font-size: var(--fs-mini); line-height: 1.7; white-space: nowrap; color: var(--encre-douce); background: var(--fond-2); border-radius: 999px; }
.pastille--violet { color: var(--violet-fonce); background: var(--violet-pale); }
.pastille--rouge { font-weight: 600; color: var(--blanc); background: var(--rouge); }
.pastille--vert { color: var(--vert-fonce); background: var(--vert-pale); }

/* ---------- Filtres et champs ---------- */

.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 14px 16px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); }
.filtre { display: grid; flex: 1 1 150px; gap: 4px; min-width: 0; max-width: 220px; }
.filtre--recherche { flex: 2 1 220px; max-width: 380px; }
.filtre label { font-size: var(--fs-small); color: var(--encre-douce); }

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { width: 100%; min-height: 40px; padding: 8px 10px; font-size: 1rem; line-height: 1.35; color: var(--encre); background: var(--blanc); border: 1px solid var(--ligne-forte); border-radius: var(--rayon-btn); }
textarea { min-height: 88px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--violet); outline: 3px solid var(--violet); outline-offset: 0; }
input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--violet); }
input[type="file"] { max-width: 100%; font-size: var(--fs-small); }
input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 14px; font: inherit; color: var(--encre); background: var(--blanc); border: 2px solid var(--ligne-forte); border-radius: var(--rayon-btn); cursor: pointer; }
input[readonly] { background: var(--fond-3); }
::placeholder { color: #77718f; opacity: 1; }

.formulaire { display: grid; gap: 16px; }
.formulaire__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.formulaire__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.formulaire__actions--espace { margin-top: 16px; }
.champ { display: grid; align-content: start; gap: 6px; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label, .champ legend { font-size: var(--fs-small); font-weight: 600; }
.champ__aide { font-size: var(--fs-mini); color: var(--encre-douce); }
.groupe-choix legend { margin-bottom: 8px; padding: 0; }
.choix-ligne { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.choix { display: inline-flex; align-items: center; gap: 10px; font-weight: 400 !important; font-size: var(--fs-body) !important; }

/* ---------- Bandeaux et états ---------- */

.bandeau { padding: 12px 14px; color: var(--violet-fonce); background: var(--violet-pale); border-left: 4px solid var(--violet); border-radius: 0 var(--rayon-moyen) var(--rayon-moyen) 0; }
.bandeau--erreur { color: var(--rouge-fonce); background: var(--rouge-pale); border-left-color: var(--rouge); }
.bandeau--succes { color: var(--vert-fonce); background: var(--vert-pale); border-left-color: var(--vert-fonce); }
.bandeau--haut { max-width: 1480px; margin: 0 auto 20px; }
.copie { margin-top: 8px; font-family: var(--mono); font-size: var(--fs-small) !important; }

.vide { display: grid; justify-items: center; gap: 10px; padding: 32px 16px; text-align: center; }
.vide__titre { font-weight: 600; }
.vide__texte { max-width: 52ch; color: var(--encre-douce); }
.vide--compact { justify-items: start; padding: 4px 0; text-align: left; }

/* ---------- Tableaux ---------- */

.defilement { overflow-x: auto; }
.tableau { width: 100%; min-width: 720px; font-size: var(--fs-small); border-collapse: collapse; }
.tableau--compact { min-width: 560px; }
.tableau th { padding: 12px 16px; font-weight: 600; text-align: left; color: var(--encre-douce); background: var(--fond-3); border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.tableau td { padding: 12px 16px; vertical-align: middle; border-bottom: 1px solid var(--ligne); }
.tableau tbody tr:last-child td { border-bottom: 0; }
.tableau tbody tr:hover { background: var(--fond-3); }
.cellule-note { max-width: 320px; color: var(--encre-douce); overflow-wrap: anywhere; }
.cellule-case { width: 44px; padding-right: 0 !important; }
.barre-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.btn[disabled] { cursor: not-allowed; opacity: .5; }
.actions-ligne { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; }

/* ---------- Demandes en colonnes ---------- */

.kanban { display: grid; grid-auto-columns: minmax(232px, 1fr); grid-auto-flow: column; gap: 14px; padding-bottom: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.colonne { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px; background: var(--fond-2); border-radius: var(--rayon); scroll-snap-align: start; }
.colonne__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.colonne__titre { font-family: var(--font); font-size: var(--fs-body); font-weight: 700; }
.colonne__compte { min-width: 26px; padding: 0 8px; font-size: var(--fs-mini); line-height: 20px; text-align: center; color: var(--encre-douce); background: var(--blanc); border-radius: 999px; }
.colonne--nouveau .colonne__compte { font-weight: 700; color: var(--blanc); background: var(--rouge); }
.colonne__liste { display: grid; align-content: start; gap: 10px; min-height: 96px; }
.colonne__vide { padding: 20px 8px; font-size: var(--fs-small); text-align: center; color: var(--encre-douce); }
.fiche { display: grid; gap: 6px; min-width: 0; padding: 12px; color: var(--encre); text-decoration: none; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon-moyen); box-shadow: var(--ombre); transition: border-color .15s ease; }
.fiche:hover { color: var(--encre); border-color: var(--violet); }
.fiche__titre { font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.fiche__sous-titre { font-size: var(--fs-small); color: var(--violet-fonce); }
.fiche__action { padding: 4px 8px; font-size: var(--fs-small); overflow-wrap: anywhere; background: var(--fond-3); border-radius: 6px; }
.fiche__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-mini); color: var(--encre-douce); }

/* ---------- Fiche d'une demande ---------- */

.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.details__large { grid-column: 1 / -1; }
.details dt { margin-bottom: 4px; font-size: var(--fs-small); color: var(--encre-douce); }
.details dd { font-weight: 500; overflow-wrap: anywhere; }
.details .texte-long { font-weight: 400; padding: 12px 14px; background: var(--fond-3); border-radius: var(--rayon-moyen); }

/* ---------- Réalisations ---------- */

.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tuile { display: flex; flex-direction: column; overflow: hidden; color: var(--encre); text-decoration: none; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); transition: border-color .15s ease; }
.tuile:hover { color: var(--encre); border-color: var(--violet); }
.tuile__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--fond-2); }
.tuile__image--vide { display: grid; place-items: center; font-size: var(--fs-small); color: var(--encre-douce); }
.tuile__corps { display: grid; gap: 8px; padding: 14px 16px 16px; }
.tuile__titre { font-weight: 600; line-height: 1.3; }
.tuile__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.apercu { width: 260px; max-width: 100%; border-radius: var(--rayon-moyen); }
.photos { display: flex; flex-wrap: wrap; gap: 12px; }
.photo { display: grid; gap: 6px; width: 140px; font-size: var(--fs-small); }
.photo img { width: 140px; height: 94px; object-fit: cover; border-radius: 8px; }

/* ---------- Charte ---------- */

.nuancier { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.nuance { display: grid; gap: 4px; justify-items: start; font-size: var(--fs-small); }
.nuance__cmjn { color: var(--encre-douce); }
.nuance__couleur { width: 100%; height: 72px; margin-bottom: 4px; border: 1px solid var(--ligne); border-radius: var(--rayon-moyen); }
.nuance__couleur--1c1633 { background: #1c1633; }
.nuance__couleur--3b2a70 { background: #3b2a70; }
.nuance__couleur--6b58a1 { background: #6b58a1; }
.nuance__couleur--efedf8 { background: #efedf8; }
.nuance__couleur--dd3d3c { background: #dd3d3c; }
.nuance__nom { font-weight: 600; }
.fichiers { display: grid; }
.fichier { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--ligne); }
.fichier__nom { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; overflow-wrap: anywhere; }
.fichier--dossier .fichier__nom { align-items: center; gap: 10px; font-weight: 600; color: var(--encre); text-decoration: none; }
.fichier--dossier .fichier__nom:hover { color: var(--violet-fonce); }
.fichier--dossier .icone { color: var(--violet); }
.fichier__apercu { flex: none; width: 64px; height: 44px; object-fit: contain; background: repeating-conic-gradient(#e6e2f0 0 25%, #fff 0 50%) 0 0 / 12px 12px; border-radius: 6px; }
.fichier__apercu--type { display: grid; place-items: center; font-size: var(--fs-mini); font-weight: 700; color: var(--violet-fonce); background: var(--violet-pale); }

.charte-doc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; border-left: 4px solid var(--violet); }
.charte-doc__icone { display: grid; place-items: center; width: 56px; height: 68px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em; color: var(--blanc); background: var(--violet-fonce); border-radius: 8px; }
.charte-doc__texte h2 { margin-bottom: 4px; }
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.logo { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ligne); border-radius: var(--rayon-moyen); }
.logo__apercu { display: grid; place-items: center; height: 150px; padding: 24px; background: var(--fond-3); }
.logo__apercu--sombre { background: var(--encre); }
.logo__apercu img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo__corps { display: grid; gap: 6px; padding: 14px 16px 16px; }
.logo__nom { font-weight: 600; }
.logo__formats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.logo__tailles { font-size: var(--fs-mini); color: var(--encre-douce); }
.typos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.typo { display: grid; justify-items: start; gap: 6px; padding: 18px; background: var(--fond-3); border-radius: var(--rayon-moyen); }
.typo__exemple { font-family: var(--font); font-size: 2rem; font-weight: 500; line-height: 1.1; }
.typo__exemple--titre { font-family: var(--font-titre); font-weight: 600; }
.typo .btn { margin-top: 8px; }

/* ---------- Tickets ---------- */

.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; color: var(--encre); text-decoration: none; background: var(--blanc); border: 1px solid var(--ligne-forte); border-radius: var(--rayon-btn); }
.puce:hover { color: var(--encre); border-color: var(--encre-douce); }
.puce[aria-current="true"] { color: var(--blanc); background: var(--encre); border-color: var(--encre); }
.puce__compte { min-width: 22px; padding: 0 6px; font-size: var(--fs-mini); line-height: 20px; text-align: center; color: var(--encre); background: var(--fond-2); border-radius: 999px; }
.tickets { display: grid; gap: 10px; }
.ticket { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; color: var(--encre); text-decoration: none; background: var(--blanc); border: 1px solid var(--ligne); border-radius: var(--rayon); box-shadow: var(--ombre); transition: border-color .15s ease; }
.ticket:hover { color: var(--encre); border-color: var(--violet); }
.ticket__ref { font-size: var(--fs-small); font-weight: 600; color: var(--encre-douce); font-variant-numeric: tabular-nums; }
.ticket__corps { display: grid; gap: 4px; min-width: 0; }
.ticket__titre { font-weight: 600; overflow-wrap: anywhere; }
.ticket__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-small); color: var(--encre-douce); }
.pieces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.piece img { width: 150px; height: 100px; object-fit: cover; border: 1px solid var(--ligne); border-radius: 8px; }
.devis { border-left: 4px solid var(--violet); }
.etapes { display: grid; gap: 18px; }
.etape { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.etape > div { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.etape__num { display: grid; place-items: center; width: 30px; height: 30px; font-size: var(--fs-small); font-weight: 700; color: var(--blanc); background: var(--violet); border-radius: 50%; }
.etape__titre { font-weight: 600; line-height: 30px; }
.depot { width: 100%; padding: 14px 16px; background: var(--fond-3); border: 1px dashed var(--ligne-forte); border-radius: var(--rayon-moyen); }
.fil-messages { display: grid; gap: 10px; margin-bottom: 16px; }
.message { max-width: 88%; padding: 12px 14px; background: var(--fond-3); border: 1px solid var(--ligne); border-radius: var(--rayon-moyen); }
.message--moi { justify-self: end; background: var(--violet-pale); border-color: var(--violet-pale); }
.message__tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; }
.formulaire--ligne { grid-template-columns: minmax(0, 1fr) auto; align-items: end; margin-bottom: 8px; }
.formulaire--reponse { padding-top: 16px; border-top: 1px solid var(--ligne); }
.zone-danger { display: flex; justify-content: flex-end; margin: 0; }

/* ---------- Connexion ---------- */

body.connexion { background: linear-gradient(160deg, var(--violet) 0%, var(--violet-fonce) 55%, var(--encre) 100%); }
.connexion__cadre { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; min-height: 100svh; padding: 32px 16px; }
.connexion__logo { width: 130px; height: auto; }
.connexion__carte { display: grid; gap: 14px; width: 100%; max-width: 420px; padding: 32px 28px; background: var(--blanc); border-radius: 18px; box-shadow: 0 24px 60px rgba(12, 8, 30, .35); }
.connexion__surtitre { font-size: var(--fs-small); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.connexion__titre { font-size: 1.6rem; }
.connexion__intro { color: var(--encre-douce); }
.connexion__formulaire { display: grid; gap: 8px; margin-top: 4px; }
.connexion__formulaire label { font-size: var(--fs-small); font-weight: 600; }
.connexion__formulaire .btn { margin-top: 8px; }
.connexion__carte input:not([type="hidden"]) { min-height: 46px; }
.champ-code { font-size: 1.5rem !important; font-weight: 700; letter-spacing: 8px; text-align: center; }
.connexion__pied { font-size: var(--fs-small); color: rgba(255, 255, 255, .75); }

/* ---------- Écrans moyens et petits ---------- */

@media (max-width: 1199px) {
  .grille-accueil > .carte--7, .grille-accueil > .carte--5 { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .coquille { display: block; }
  .barre { position: sticky; top: 0; z-index: 10; height: auto; max-height: 100dvh; gap: 0; padding: 10px 16px; }
  .barre__marque { flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .barre__logo { width: 64px; }
  .barre__menu { display: inline-flex; }
  .barre__nav, .barre__pied { display: none; }
  .barre--ouverte .barre__nav { display: flex; padding: 16px 0 8px; }
  .barre--ouverte .barre__pied { display: grid; margin-top: 8px; }
  .barre__lien[aria-current="page"]::before { left: -16px; }
  .contenu { padding: 24px 16px 56px; }
}

@media (max-width: 599px) {
  .formulaire__grille, .details { grid-template-columns: minmax(0, 1fr); }
  .carte--intro, .charte-doc { grid-template-columns: minmax(0, 1fr); }
  .kanban { grid-auto-columns: minmax(84vw, 1fr); }
  .ticket { grid-template-columns: minmax(0, 1fr) auto; }
  .ticket__ref { display: none; }
  .message { max-width: 100%; }
  .entete__actions { width: 100%; }
}

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