/*
 * L'ESPACE CLIENT ET L'ADMINISTRATION — l'ossature d'une application (colonne de navigation à
 * gauche, contenu à droite), habillée de la charte de la vitrine : pilules, titres fins. DEUX
 * CLARTÉS, comme la vitrine : le choix (Automatique, Clair, Sombre) est au pied de la colonne et en
 * haut des pages publiques ; le script de tête de index.html pose « data-clarte » avant le premier
 * pixel. Les jetons viennent de /charte.css (extraits de site/styles.css, bloc sombre compris) : ce
 * fichier n'en déclare aucun, hormis les fonds propres à l'espace, posés ici EN DEUX VERSIONS. Une
 * teinte d'éclaircissement s'écrit « color-mix(… var(--blanc) …) », une teinte d'ombre
 * « color-mix(… var(--text) …) » : jamais un blanc ni un noir en dur, qui resteraient clairs en
 * sombre.
 *
 * LE DÉGRADÉ COUVRE TOUTE LA PAGE (calque fixe derrière tout), JAMAIS UN BLOC. Les blocs posés
 * dessus ont un fond blanc légèrement transparent.
 *
 * AUCUNE OMBRE, NULLE PART, ET AUCUN TRAIT : ni sur les champs, ni sur les boutons, ni sur la
 * colonne, ni dans les tableaux. Ce qui doit se détacher se détache par son FOND (un champ, un choix
 * non coché et un bouton clair portent le gris chaud --panneau ; ce qui est coché ou ouvert, le
 * blanc et un contour net). Un tableau se détache du bloc qui le porte par son propre ENCADRÉ, un
 * fond légèrement teinté aux coins arrondis, jamais par un cadre tracé ; ses lignes se séparent par
 * une rangée sur deux éclaircie, pas par un filet. Le focus clavier reste un contour (outline), jamais une ombre.
 */

:root {
  --fond-bloc: rgba(255, 255, 255, 0.58);
  --fond-bloc-fort: rgba(255, 255, 255, 0.78);
  --fond-colonne: #ffffff;
  --fond-entete: #e9e4de;
  /* La bulle d'un message reçu (demandes) : nettement plus foncée que le fond de la conversation. */
  --bulle-recue: #ded6cc;
  /* L'encadré d'un tableau : une teinte chaude à peine marquée, distincte du blanc du bloc. */
  --fond-tableau: rgba(70, 50, 30, 0.04);
  --fond-champ: var(--panneau);
  --fond-champ-survol: var(--panneau-2);
  --fond-flottant: #ffffff;
  --bord-flottant: rgba(0, 0, 0, 0.09);
  --ecart-colonne: 16px;
  --vert: #23a35a;
  --orange: #e08a1e;
  --rouge: #c0392b;
  /* Les textes d'erreur et de réussite, et le fond d'une alerte. */
  --rouge-texte: #9b1c1c;
  --vert-texte: #1d6b3a;
  --fond-alerte: rgba(251, 233, 231, .9);
}

/* LE SOMBRE : les mêmes fonds, sur l'anthracite de la charte. */
html[data-clarte='sombre'] {
  --fond-bloc: rgba(32, 32, 35, 0.62);
  --fond-bloc-fort: rgba(38, 38, 42, 0.84);
  --fond-colonne: #151517;
  --fond-entete: #2a2a2e;
  --bulle-recue: #2e2c29;
  --fond-tableau: rgba(255, 255, 255, 0.03);
  --fond-champ: #2c2c30;
  --fond-champ-survol: #35353a;
  --fond-flottant: #222225;
  --bord-flottant: rgba(255, 255, 255, 0.1);
  --vert: #3ccf7c;
  --orange: #f0a24a;
  --rouge: #e5605a;
  --rouge-texte: #f08a7e;
  --vert-texte: #6fd19a;
  --fond-alerte: rgba(120, 32, 26, .5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  isolation: isolate;
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* Le dégradé de la page : un calque fixe, derrière tout, qui ne défile pas avec le contenu. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Le grain de la charte (« --grain », lu dans /charte.css) se fond dans le dégradé, comme sur la vitrine. */
  background:
    var(--grain),
    radial-gradient(55% 60% at 0% 0%, var(--peche) 0, transparent 70%),
    radial-gradient(50% 55% at 100% 0%, var(--ciel) 0, transparent 72%),
    radial-gradient(60% 60% at 100% 100%, var(--lilas) 0, transparent 70%),
    radial-gradient(55% 55% at 0% 100%, var(--menthe) 0, transparent 72%),
    var(--bg);
  background-blend-mode: var(--grain-fusion), normal, normal, normal, normal;
}

/*
 * LA BARRE DE DÉFILEMENT, FINE ET DOUCE (même dessin que l'application Beluga) : six pixels, piste
 * transparente, poignée arrondie d'un gris discret, plus marquée au survol. Firefox, qui n'a pas les
 * pseudo-éléments, reçoit sa barre fine d'office (Chrome ignorerait les règles ci-dessus si on lui
 * posait scrollbar-width).
 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(140, 137, 133, 0.28); }
::-webkit-scrollbar-thumb:hover { background: rgba(140, 137, 133, 0.6); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: rgba(140, 137, 133, 0.35) transparent; }
}

a { color: inherit; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--titre); font-weight: 300; letter-spacing: -0.02em; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muet { color: var(--muted); }
.discret { color: var(--faint); font-size: 13px; }
.mono { font-family: var(--mono); font-size: 13px; }
[hidden] { display: none !important; }

/* ---------- Boutons en pilule : un fond, jamais une ombre ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fond-champ); color: var(--text); text-decoration: none; white-space: nowrap;
  font-weight: 500; transition: background-color .15s, transform .1s;
}
.bouton:hover { background: var(--fond-champ-survol); }
.bouton.plein.danger:hover { background: #7f1616; }
.bouton:active { transform: scale(.98); }
.bouton.plein { background: var(--encre); color: var(--encre-fg); }
.bouton.plein:hover { background: var(--encre-survol); }
.bouton.petit { height: 36px; padding: 0 14px; font-size: 14px; }
.bouton.danger { color: var(--rouge-texte); }
.bouton.danger.plein { background: #9b1c1c; color: #fff; }
.bouton[disabled], .bouton[aria-busy='true'] { opacity: .55; cursor: default; pointer-events: none; }
.bouton[aria-busy='true']::after {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: tourne .7s linear infinite;
}
.bouton svg { width: 17px; height: 17px; }
@keyframes tourne { to { transform: rotate(360deg); } }
.lien { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: var(--muted); }

/* ---------- Champs : un fond gris chaud, un contour net au focus ---------- */
.champ { display: grid; gap: 6px; margin-bottom: 14px; }
/* Le module anti-robot de l'inscription (Turnstile) : sa hauteur est réservée, la page ne saute pas. */
.anti-robot { margin-bottom: 14px; min-height: 65px; }
.champ > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.champ input, .champ textarea {
  height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--fond-champ); width: 100%;
  transition: background-color .15s;
}
.champ input:hover, .champ textarea:hover { background: var(--fond-champ-survol); }
.champ textarea { height: auto; min-height: 110px; padding: 12px 16px; resize: vertical; }
.champ input:focus, .champ textarea:focus { background: var(--blanc); outline: 1.5px solid var(--text); outline-offset: -1.5px; }
.champ small { color: var(--faint); font-size: 12.5px; }
.champ small.erreur, .erreur { color: var(--rouge-texte); }
.champ small.bon { color: var(--vert-texte); }
.suffixe { display: flex; align-items: center; border-radius: 14px; background: var(--fond-champ); }
.suffixe:focus-within { background: var(--blanc); outline: 1.5px solid var(--text); outline-offset: -1.5px; }
.champ .suffixe input, .champ .suffixe input:focus { background: transparent; outline: none; }
.suffixe em { font-style: normal; color: var(--faint); padding-right: 16px; white-space: nowrap; }

/* Un paragraphe qui suit un bouton ou un formulaire respire : jamais collé à la pilule. */
.actions + p, form + p, .actions + .discret, form + .discret, .bouton + p { margin-top: 22px; }

/* ---------- Pages publiques : un bloc centré, posé sur le dégradé de la page ---------- */
.public { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.public-barre { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px clamp(16px, 4vw, 40px); }
.public-barre-droite { display: flex; align-items: center; gap: 10px; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.marque img { width: 28px; height: 28px; }
.public-corps { display: grid; place-items: start center; padding: 12px 16px 48px; }
.bloc-public {
  width: min(560px, 100%); padding: clamp(24px, 5vw, 44px); border-radius: 32px;
  background: var(--fond-bloc); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.bloc-public.large { width: min(920px, 100%); }
.bloc-public h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.08; margin-bottom: 10px; }
.bloc-public > p { color: var(--muted); margin: 0 0 22px; }
.bloc-public .sous-titre { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 22px 0 10px; }
.bloc-public .total { color: var(--text); font-weight: 500; margin: 4px 0 6px; }
.bloc-public form + p.discret { margin-top: 24px; }

/* Les trois temps de la souscription : formule et atelier, paiement, installation. */
.parcours { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.parcours li { display: inline-flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13.5px; font-weight: 500; }
.parcours-rang { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--fond-champ); }
.parcours-rang svg { width: 14px; height: 14px; }
.parcours li.actuel { color: var(--text); }
.parcours li.actuel .parcours-rang { background: var(--encre); color: var(--encre-fg); }
.parcours li.fait { color: var(--muted); }
.parcours li.fait .parcours-rang { background: var(--text); color: var(--encre-fg); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.public-pied { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 18px; color: var(--faint); font-size: 13px; }
.public-pied p { margin: 0; }
.public-pied a { color: var(--muted); }

/* Choix de formule, à l'inscription et dans l'espace : non coché, un fond ; coché, du blanc et un contour. */
.choix-formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.choix-formules.stockage { grid-template-columns: repeat(4, 1fr); }
.choix {
  position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 18px; cursor: pointer;
  background: var(--fond-champ); text-align: left; border: 0; transition: background-color .15s;
}
.choix:hover { background: var(--fond-champ-survol); }
.choix input { position: absolute; opacity: 0; pointer-events: none; }
.choix b { font-weight: 600; }
.choix .prix { font-family: var(--titre); font-size: 22px; font-weight: 300; }
.choix small { color: var(--muted); font-size: 12.5px; }
.choix:has(input:checked), .choix[aria-pressed='true'] { background: var(--blanc); outline: 2px solid var(--text); outline-offset: -2px; }
.choix:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Une carte d'offre ou de stockage qu'on peut choisir : toute la carte se clique, comme le bouton. */
.choix:not(.cliquable):not(:has(input)) { cursor: default; }
.choix:not(.cliquable):not(:has(input)):not([aria-pressed='true']):hover { background: var(--fond-champ); }
.choix.cliquable:hover { background: color-mix(in srgb, var(--blanc) 90%, transparent); }
.choix.cliquable:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choix.actuel::after { content: attr(data-actuelle); position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--muted); }
.choix.programmee { outline: 2px dashed var(--muted); outline-offset: -2px; }
.choix.programmee::after { content: attr(data-programmee); position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--muted); }
.choix .programmee-le { margin-top: 10px; color: var(--text); font-weight: 500; }

/* ---------- La liste déroulante maison (remplace TOUT <select>) ---------- */
.liste-declencheur {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  height: 46px; padding: 0 14px 0 16px; border: 0; border-radius: 14px; background: var(--fond-champ);
  cursor: pointer; text-align: left; transition: background-color .15s;
}
.liste-declencheur:hover { background: var(--fond-champ-survol); }
.liste-declencheur[aria-expanded='true'] { background: var(--blanc); outline: 1.5px solid var(--text); outline-offset: -1.5px; }
.liste-declencheur .liste-texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-declencheur .liste-texte.vide { color: var(--faint); }
.liste-declencheur svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); transition: transform .15s; }
.liste-declencheur[aria-expanded='true'] svg { transform: rotate(180deg); }
.liste-declencheur.petite { height: 34px; width: auto; padding: 0 10px 0 12px; border-radius: 999px; font-size: 14px; }
.liste-declencheur.pilule { height: 36px; width: auto; border-radius: 999px; padding: 0 10px 0 12px; font-size: 14px; font-weight: 500; }
.liste-panneau {
  position: fixed; z-index: 140; display: grid; grid-template-rows: auto minmax(0, 1fr); max-height: min(360px, 70dvh);
  padding: 6px; border-radius: 16px; background: var(--fond-flottant); border: 1px solid var(--bord-flottant);
}
.liste-recherche { height: 40px; margin: 2px 2px 6px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--fond-champ); font-size: 16px; }
.liste-recherche:focus { outline: 1.5px solid var(--text); outline-offset: -1.5px; background: var(--blanc); }
.liste-options { overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 1px; align-content: start; }
.liste-option { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 10px; border-radius: 10px; cursor: pointer; font-size: 14.5px; }
.liste-option[aria-selected='true'] { font-weight: 600; }
.liste-option.active { background: var(--fond-champ); }
.liste-option .case { width: 18px; height: 18px; border-radius: 6px; flex-shrink: 0; display: grid; place-items: center; background: var(--fond-champ-survol); }
.liste-option[aria-selected='true'] .case { background: var(--encre); color: var(--encre-fg); }
.liste-option .case svg { width: 13px; height: 13px; }
.liste-option .coche { margin-left: auto; width: 16px; height: 16px; opacity: 0; }
.liste-option[aria-selected='true'] .coche { opacity: 1; }
.liste-option small { display: block; color: var(--faint); font-size: 12.5px; font-weight: 400; }
.liste-option > span { min-width: 0; }
.liste-vide { padding: 10px; color: var(--faint); font-size: 14px; }

/* Le choix de la langue : une liste maison en pilule discrète. */
.choix-langue { display: inline-flex; align-items: center; }
.choix-langue .liste-declencheur { background: var(--fond-bloc-fort); }
.colonne-pied .choix-langue .liste-declencheur { background: var(--panneau); }

/* ---------- L'ossature connectée ---------- */
.coque { display: flex; min-height: 100dvh; }
/* La colonne FLOTTE : marge en haut, à gauche et en bas, coins arrondis, fond opaque, sans ombre. */
.colonne {
  position: sticky; top: var(--ecart-colonne); align-self: flex-start;
  height: calc(100dvh - 2 * var(--ecart-colonne)); margin: var(--ecart-colonne) 0 var(--ecart-colonne) var(--ecart-colonne);
  width: 256px; flex-shrink: 0; overflow: hidden; border-radius: 26px;
  background: var(--fond-colonne);
  display: flex; flex-direction: column; gap: 18px; padding: 20px 12px 14px;
}
.colonne-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.poignee { display: none; }
.colonne-liens { flex: 1; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 18px; margin: 0 -4px; padding: 0 4px; }
.colonne .marque { padding: 0 10px; }
.groupe-titre { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 0 12px; margin: 0 0 6px; font-weight: 600; }
.nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 999px;
  text-decoration: none; color: var(--muted); font-weight: 500; font-size: 14.5px;
}
.nav a:hover { background: var(--panneau); color: var(--text); }
.nav a[aria-current='page'] { background: var(--panneau-2); color: var(--text); }
.nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav .pastille-nombre { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--encre); color: var(--encre-fg); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.colonne-pied { display: grid; gap: 8px; padding: 12px 6px 0; border-radius: 18px; }
.colonne-pied .choix-langue { justify-self: start; }
/* La langue et la clarté côte à côte, au pied de la colonne (et dans la feuille du bas sur téléphone). */
/*
 * Le menu de la clarté s'y accroche à la RANGÉE, pas au bouton : il s'ouvre vers le haut depuis son
 * bord gauche, toujours entier dans la colonne (qui coupe ce qui dépasse), même quand la pilule de
 * la langue pousse le bouton vers la droite.
 */
.colonne-reglages { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.colonne-pied .choix-clarte { position: static; }

/*
 * LA CLARTÉ : UN bouton-icône rond (« .bouton.petit »), l'icône du choix en cours ; un clic bascule
 * clair ↔ sombre. Le menu des trois choix s'ouvre VERS LE HAUT (pied de colonne, pied de page) au
 * survol, au clavier ou après un toucher (« .ouvert ») ; une marge basse transparente laisse la
 * souris passer du bouton au menu. Le choix en cours prend l'encre.
 */
.choix-clarte { position: relative; display: inline-flex; }
.clarte-bouton { width: 36px; padding: 0; }
.colonne-pied .clarte-bouton { background: var(--panneau); }
.clarte-bouton > span { display: none; }
.clarte-bouton svg, .clarte-choix svg { width: 16px; height: 16px; display: block; flex: none; }
html:not([data-clarte-choix='clair']):not([data-clarte-choix='sombre']) .clarte-bouton .clarte-icone-auto,
html[data-clarte-choix='clair'] .clarte-bouton .clarte-icone-clair,
html[data-clarte-choix='sombre'] .clarte-bouton .clarte-icone-sombre { display: block; }
.clarte-menu {
  position: absolute; bottom: 100%; left: 50%; z-index: 80; padding-bottom: 8px;
  visibility: hidden; opacity: 0; transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.colonne-pied .clarte-menu { left: 0; right: auto; transform: translateY(4px); }
@media (hover: hover) {
  .choix-clarte:hover .clarte-menu { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .15s ease, transform .15s ease; }
  .colonne-pied .choix-clarte:hover .clarte-menu { transform: none; }
}
.choix-clarte:has(:focus-visible) .clarte-menu, .choix-clarte.ouvert .clarte-menu { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition: opacity .15s ease, transform .15s ease; }
.colonne-pied .choix-clarte:has(:focus-visible) .clarte-menu, .colonne-pied .choix-clarte.ouvert .clarte-menu { transform: none; }
.clarte-liste { display: grid; gap: 2px; min-width: 168px; padding: 5px; border-radius: 18px; background: var(--fond-flottant); border: 1px solid var(--bord-flottant); }
.clarte-choix {
  display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 14px 0 11px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 14px; font-weight: 500; text-align: left; white-space: nowrap; cursor: pointer;
}
.clarte-choix:hover { color: var(--text); background: var(--fond-champ); }
.clarte-choix[aria-pressed='true'] { background: var(--encre); color: var(--encre-fg); }
.qui { display: flex; gap: 10px; align-items: center; padding: 4px 6px; min-width: 0; }
.qui .initiale { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lilas); font-weight: 600; flex-shrink: 0; }
.qui div { min-width: 0; }
.qui b, .qui small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qui small { color: var(--faint); }

.contenu { flex: 1; min-width: 0; }
.barre-mobile { display: none; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 12px) 16px 4px; }
.bouton-rond { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--fond-champ); color: var(--text); flex-shrink: 0; }
.bouton-rond:hover { background: var(--fond-champ-survol); }
.bouton-rond svg { width: 18px; height: 18px; }
.bouton-rond.petit { width: 32px; height: 32px; }
.bouton-rond[disabled] { opacity: .4; cursor: default; }
main.ecran { width: 100%; max-width: 1200px; margin: 0 auto; padding: var(--ecart-colonne) clamp(16px, 4vw, 40px) 64px; }

/*
 * LE TITRE D'ÉCRAN COLLÉ : un bloc arrondi, décalé du haut de la MÊME marge que la colonne, qui ne
 * change JAMAIS de taille en se collant (seul son fond apparaît). Auparavant le titre rétrécissait
 * et cachait son sous-titre une fois collé : la page remontait d'autant, le repère revenait en vue,
 * le titre regrandissait — le défilement sautait. Le sous-titre vit donc HORS du bloc collé.
 */
.repere-titre { height: 1px; margin-bottom: -1px; }
.titre-ecran {
  position: sticky; top: var(--ecart-colonne); z-index: 20; margin: 0 0 6px;
  min-height: 60px; padding: 10px 12px 10px 18px; border-radius: 22px; background: transparent;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  transition: background-color .2s;
}
.titre-ecran h1 { font-size: 30px; line-height: 1.15; }
.titre-ecran[data-compact='oui'] { background: var(--fond-bloc-fort); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.titre-ecran .actions { margin: 0; }
/* Plusieurs commandes en tête d'écran (filtre payants / open source, période) : côte à côte. */
.actions-groupe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.titre-gauche { display: flex; align-items: center; gap: 10px; min-width: 0; }
.titre-gauche .bouton-rond { display: none; }
.sous-titre-ecran { margin: 0 18px 22px; color: var(--muted); max-width: 680px; }

/* Panneaux, cartes de chiffres, grilles */
.panneau { border-radius: 24px; background: var(--fond-bloc); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); margin-bottom: 18px; overflow: hidden; }
.panneau-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; flex-wrap: wrap; }
.panneau-tete h2 { font-family: var(--sans); font-weight: 600; font-size: 15.5px; letter-spacing: 0; }
.panneau-corps { padding: 20px 22px; }
.panneau-corps > p:first-child { margin-top: 0; }
/* Le bloc « mon atelier » : le même fond, un peu plus couvrant — jamais un dégradé à lui. */
.panneau.vedette { background: var(--fond-bloc-fort); }
.vedette-ligne { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.chiffre { border-radius: 20px; background: var(--fond-bloc); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); padding: 16px 18px; }
.chiffre span { display: block; font-size: 13px; color: var(--muted); }
.chiffre b { display: block; font-family: var(--titre); font-weight: 300; font-size: 30px; letter-spacing: -0.02em; margin-top: 4px; }
.chiffre small { color: var(--faint); }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lignes { display: grid; gap: 0; }
/* Des lignes d'information sans filet : l'écart suffit, une sur deux à peine teintée. */
.ligne-info { display: flex; justify-content: space-between; gap: 16px; padding: 9px 10px; margin: 0 -10px; border-radius: 10px; }
.ligne-info:nth-child(even) { background: color-mix(in srgb, var(--blanc) 38%, transparent); }
.ligne-info > span:first-child { color: var(--muted); }
.ligne-info > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }

/* Pastilles d'état */
.etat { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--blanc); white-space: nowrap; }
.etat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.etat.ok::before { background: var(--vert); }
.etat.cours::before { background: var(--orange); }
.etat.alerte::before { background: var(--rouge); }
.etat.attente { background: color-mix(in srgb, var(--citron) 80%, var(--blanc)); }
.etat.attente::before { background: var(--orange); }
/* Un ticket écrit depuis une copie de Beluga installée (sans compte) : une étiquette, pas un état. */
.etat.etiquette-open-source { background: color-mix(in srgb, var(--text) 8%, transparent); font-weight: 500; }
.etat.etiquette-open-source::before { display: none; }

/* Bandeaux */
.bandeau { border-radius: 18px; padding: 14px 18px; margin-bottom: 18px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.bandeau.alerte { background: var(--fond-alerte); }
.bandeau.info { background: color-mix(in srgb, var(--citron) 85%, transparent); }
.bandeau.calme { background: var(--fond-bloc-fort); }

/* Grand bloc « mon atelier » */
.atelier-adresse { font-family: var(--titre); font-weight: 300; font-size: clamp(24px, 3.4vw, 34px); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.etapes li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; padding: 8px 6px; align-items: start; border-radius: 10px; }
.etapes li:nth-child(even) { background: color-mix(in srgb, var(--blanc) 38%, transparent); }
.etapes .puce { width: 10px; height: 10px; border-radius: 50%; margin: 7px 0 0 6px; background: var(--faint); }
.etapes .erreur .puce { background: var(--rouge); }
.etapes .alerte .puce { background: var(--orange); }
.etapes li:first-child .puce { background: var(--text); }
.etapes time { color: var(--faint); font-size: 12.5px; white-space: nowrap; }
.etapes p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.progression { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; margin: 14px 0 6px; }
.progression > div { height: 100%; background: var(--text); border-radius: inherit; transition: width .6s; }

/*
 * Tableaux (compétence tableau-de-donnees-triable-et-pagine) : CHAQUE TABLEAU EST UN ENCADRÉ — un
 * fond teinté (--fond-tableau) aux coins arrondis, qui regroupe les filtres actifs, l'entête, les
 * lignes et le pied qui pagine, et le sépare du texte autour sans le moindre trait. L'ENTÊTE est une bande pleine,
 * nettement distincte des lignes, SANS filet ; les lignes n'ont AUCUN trait : une sur deux est à
 * peine teintée, la ligne survolée plus nettement, aux bouts arrondis. Une ligne cliquable OUVRE
 * UNE PAGE (jamais un dépliant dans la ligne). Sur téléphone, le tableau défile de côté DANS son cadre.
 */
.tableau-donnees { min-width: 0; padding: 6px; border-radius: 18px; background: var(--fond-tableau); }
.tableau-defile { overflow-x: auto; overscroll-behavior-x: contain; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
thead th {
  position: relative; text-align: left; font-size: 12.5px; font-weight: 600; color: var(--text); letter-spacing: .01em;
  padding: 0; white-space: nowrap; background: var(--fond-entete); vertical-align: middle;
}
thead th:first-child { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
thead th:last-child { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
.th-tri, .th-texte { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 42px; padding: 0 14px; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
th.filtrable .th-tri, th.filtrable .th-texte { padding-right: 32px; }
.th-tri { cursor: pointer; }
.th-tri svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .32; }
.th-tri:hover svg { opacity: .7; }
.th-tri.actif svg { opacity: 1; color: var(--accent); }
th.nombre .th-tri, th.nombre .th-texte { justify-content: flex-end; }
.th-filtre {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 0; border-radius: 8px;
  display: grid; place-items: center; background: none; color: var(--faint); cursor: pointer;
}
.th-filtre svg { width: 13px; height: 13px; }
.th-filtre:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.th-filtre.actif { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.th-filtre.actif svg { fill: currentColor; }
td { padding: 12px 14px; vertical-align: top; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--blanc) 55%, transparent); }
tbody td:first-child { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
tbody td:last-child { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td, tr.cliquable:focus-visible td { background: color-mix(in srgb, var(--blanc) 90%, transparent); }
tr.cliquable:focus-visible { outline: none; }
tr.non-lu td:first-child { font-weight: 600; }
/* Posé dans un bloc, l'encadré s'en écarte d'un rien : le fond du bloc l'entoure de tous côtés. */
.panneau > .tableau-donnees { margin: 10px; }
.panneau-tete + .tableau-donnees { margin-top: 0; }
.vide { padding: 28px 22px; color: var(--muted); text-align: center; margin: 0; }
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 6px 12px; }
.pastille-filtre { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, var(--blanc)); color: var(--text); font-size: 13px; cursor: pointer; max-width: 100%; }
.pastille-filtre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille-filtre svg { width: 13px; height: 13px; flex-shrink: 0; }
.tableau-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 8px 4px; }
.taille-page { display: inline-flex; align-items: center; gap: 8px; }
.pagination { display: inline-flex; align-items: center; gap: 8px; }
.bulle-filtre {
  position: fixed; z-index: 120; padding: 12px; border-radius: 16px; background: var(--fond-flottant);
  border: 1px solid var(--bord-flottant); display: grid; gap: 10px;
}
.bulle-filtre input[type='search'] { height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--panneau); width: 100%; }
.bulle-filtre input[type='search']:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.bulle-choix { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; }
.bulle-choix label { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.bulle-choix label:hover { background: var(--panneau); }
.bulle-pied { display: flex; justify-content: flex-end; }

/* ---------- Graphiques (SVG faits main) et sélecteur de période ---------- */
/* Le dessin du service Statistiques de Beluga : courbes lissées, voile dégradé, repères en pointillés
   à peine visibles, bulle claire au survol (fond flottant, contour fin, jamais d'ombre). */
.graphique { position: relative; }
/* Sous le titre de son bloc, la légende remonte : titre et valeurs se lisent ensemble. */
.panneau-corps > .graphique:first-child { margin-top: -10px; }
.graphique-legende { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.graphique-legende > span { display: inline-flex; align-items: center; gap: 6px; }
.graphique-legende i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.graphique-legende b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; margin-left: 2px; }
.graphique-legende .graphique-quand { margin-left: auto; font-size: 12px; color: var(--faint); }
.graphique-corps { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 8px; }
.graphique-axe-y { display: flex; flex-direction: column; justify-content: space-between; margin: -6px 0; text-align: right; font-size: 11px; line-height: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.graphique-zone { position: relative; min-width: 0; touch-action: pan-y; }
.graphique-zone svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.graphique .grille { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.graphique .socle { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.graphique .trait { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.graphique .barre { opacity: .7; transition: opacity .12s; }
.graphique .barre.visee { opacity: 1; }
.graphique-curseur { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: color-mix(in srgb, var(--text) 20%, transparent); pointer-events: none; }
.graphique-point { position: absolute; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--blanc); transform: translate(-50%, -50%); pointer-events: none; }
.graphique-vide { position: absolute; inset: 0 0 18px; display: grid; place-items: center; margin: 0; font-size: 13px; color: var(--faint); pointer-events: none; }
.graphique-axe-x { grid-column: 2; position: relative; height: 14px; font-size: 11px; line-height: 14px; color: var(--faint); }
.graphique-axe-x span { position: absolute; top: 0; white-space: nowrap; }
.bulle-graphique {
  position: absolute; top: 4px; z-index: 5; pointer-events: none; min-width: 140px; padding: 8px 11px; border-radius: 12px;
  background: var(--fond-flottant); border: 1px solid var(--bord-flottant); color: var(--text); font-size: 12.5px; line-height: 1.5; white-space: nowrap;
}
.bulle-graphique b { display: block; font-weight: 500; color: var(--faint); margin-bottom: 2px; }
.bulle-graphique > span { display: flex; align-items: center; gap: 14px; justify-content: space-between; }
.bulle-graphique > span > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.bulle-graphique i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bulle-graphique strong { font-weight: 600; font-variant-numeric: tabular-nums; }
/* Les chiffres en tête d'une page de l'administration, au-dessus de leur graphique. */
.stats-page { margin-bottom: 4px; }
.stats-page .chiffre small { display: block; margin-top: 2px; }

.periode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.segment { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--fond-bloc-fort); gap: 2px; }
.segment button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 500; font-size: 13.5px; color: var(--muted); }
.segment button[aria-pressed='true'] { background: var(--encre); color: var(--encre-fg); }
.bouton-plage { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--fond-bloc-fort); cursor: pointer; font-weight: 500; font-size: 13.5px; }
.bouton-plage svg { width: 16px; height: 16px; }
.bouton-plage[data-actif='oui'] { background: var(--encre); color: var(--encre-fg); }
.calendrier {
  position: fixed; z-index: 130; padding: 16px; border-radius: 22px; background: var(--fond-flottant);
  border: 1px solid var(--bord-flottant); display: grid; gap: 12px; width: max-content; max-width: calc(100vw - 16px);
}
.calendrier-mois { display: flex; gap: 24px; }
.calendrier-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calendrier-tete b { font-weight: 600; text-transform: capitalize; }
.mois table { border-spacing: 0 2px; font-size: 13.5px; width: auto; }
.mois th { font-weight: 500; color: var(--faint); font-size: 12px; padding: 4px 0; text-align: center; background: none; width: 36px; }
.mois td { padding: 0; background: none !important; border-radius: 0 !important; }
.jour { width: 36px; height: 34px; border: 0; background: none; cursor: pointer; border-radius: 999px; font-variant-numeric: tabular-nums; }
.jour:hover:not([disabled]) { background: var(--fond-champ); }
.jour[disabled] { color: color-mix(in srgb, var(--text) 22%, transparent); cursor: default; }
.jour.aujourdhui { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.dans-plage .jour { background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 0; }
.jour.borne, .dans-plage .jour.borne { background: var(--encre); color: var(--encre-fg); border-radius: 999px; }
.calendrier-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Fil des demandes d'assistance ---------- */
.message-images { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.message-images a { display: block; width: 140px; height: 100px; border-radius: 12px; overflow: hidden; background: var(--panneau); }
.message-images img { width: 100%; height: 100%; object-fit: cover; display: block; }
.joindre { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 12px; }
.apercus { display: flex; flex-wrap: wrap; gap: 8px; }
.apercu { position: relative; width: 72px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--panneau); }
.apercu img { width: 100%; height: 100%; object-fit: cover; }
.apercu button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .65); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.apercu button svg { width: 11px; height: 11px; }

/* ---------- Le journal des changements d'une version ---------- */
.changements { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; }
.changements li { padding-left: 4px; }
.changements li::marker { color: var(--faint); }
.repartition { display: grid; gap: 8px; }
.barre-repartition { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--text) 6%, transparent); }
.barre-repartition span { display: block; height: 100%; }

/* ---------- La proposition de notifications ---------- */
.proposition-notifs {
  position: fixed; z-index: 90; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 16px); width: min(380px, calc(100vw - 32px));
  padding: 16px 18px; border-radius: 22px; background: var(--encre); color: var(--encre-fg); display: grid; gap: 10px;
  animation: monte .25s ease-out;
}
.proposition-notifs p { margin: 0; color: color-mix(in srgb, var(--encre-fg) 78%, transparent); font-size: 14px; }
.proposition-notifs b { font-weight: 600; }
.proposition-notifs .bouton { background: var(--encre-fg); color: var(--encre); }
.proposition-notifs .lien { color: color-mix(in srgb, var(--encre-fg) 70%, transparent); }

/* Silhouette de chargement */
.chargement { padding: 40px; }
.squelette { height: 120px; border-radius: 24px; background: linear-gradient(90deg, var(--fond-bloc) 0, var(--fond-bloc-fort) 50%, var(--fond-bloc) 100%); background-size: 200% 100%; animation: luit 1.4s ease-in-out infinite; }
@keyframes luit { to { background-position: -200% 0; } }

/* Annonces (succès / erreur) */
#annonces { position: fixed; z-index: 150; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 20px); transform: translateX(-50%); display: grid; gap: 8px; width: min(520px, calc(100vw - 32px)); }
.annonce { padding: 12px 18px; border-radius: 16px; background: var(--encre); color: var(--encre-fg); animation: monte .2s ease-out; }
.annonce.erreur { background: #9b1c1c; }
@keyframes monte { from { transform: translateY(8px); opacity: 0; } }

/* Fenêtre de confirmation */
dialog { border: 0; border-radius: 28px; padding: 0; width: min(520px, calc(100vw - 32px)); background: var(--blanc); color: var(--text); }
dialog::backdrop { background: rgba(20, 15, 10, .32); }
dialog .dialogue { padding: 26px; }
dialog h2 { font-size: 26px; margin-bottom: 10px; }
dialog p { color: var(--muted); }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 1023px) {
  /*
   * LE MENU EST UNE FEUILLE QUI MONTE DU BAS : détachée des bords (même marge que partout), au plus
   * 95 % de la hauteur de l'écran, fermée par le voile ou en la tirant vers le bas depuis sa bande
   * haute (poignée ET marque, boutons compris : compétence tiroir-maison-tire-au-doigt-boutons-compris).
   * Le déplacement au doigt s'écrit dans « translate », l'ouverture dans « transform ».
   */
  .colonne {
    position: fixed; z-index: 60; top: auto; left: 10px; right: 10px; bottom: calc(env(safe-area-inset-bottom) + 10px);
    margin: 0; width: auto; height: auto; max-height: 95dvh; padding-top: 6px;
    transform: translateY(calc(100% + 24px)); transition: transform .26s cubic-bezier(.2, .8, .2, 1);
    visibility: hidden;
  }
  .coque[data-menu='ouvert'] .colonne { transform: none; visibility: visible; }
  .colonne.tiree { transition: none; }
  .colonne-tete { touch-action: none; flex-direction: column; align-items: stretch; gap: 6px; padding-bottom: 4px; cursor: grab; }
  .poignee { display: block; width: 44px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 16%, transparent); margin: 6px auto 4px; }
  .colonne-tete .marque { padding: 6px 10px; }
  .voile { position: fixed; inset: 0; z-index: 50; background: rgba(20, 15, 10, .28); transition: opacity .26s; }
  .barre-mobile { display: flex; }
  .titre-gauche .bouton-rond { display: grid; }
  .grille-2, .grille-3 { grid-template-columns: minmax(0, 1fr); }
  .titre-ecran { top: calc(env(safe-area-inset-top) + 10px); }
}
@media (max-width: 620px) {
  .choix-formules, .choix-formules.stockage { grid-template-columns: minmax(0, 1fr); }
  .titre-ecran h1 { font-size: 24px; }
  .titre-ecran { padding-left: 10px; }
  .sous-titre-ecran { margin-left: 10px; margin-right: 10px; }
  .panneau-corps { padding: 16px; }
  .panneau-tete { padding: 14px 16px; }
  .chiffre b { font-size: 24px; }
  td, th { padding: 10px; }
  .calendrier-mois .mois + .mois { display: none; }
  /* Sur téléphone, la liste déroulante monte du bas, sous le pouce. */
  .liste-panneau.tiroir { left: 10px !important; right: 10px; width: auto !important; top: auto !important; bottom: calc(env(safe-area-inset-bottom) + 10px); max-height: 70dvh; border-radius: 22px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .colonne, .voile { transition: none; }
}

/* LES JAUGES DE L'INSTANT du serveur (« Mon espace de travail ») : une piste par mesure, sans
   courbe ni historique. Orange à 75 %, rouge à 90 % ; les projets passent à l'orange à la limite. */
.jauges { display: grid; gap: 12px; margin-top: 12px; }
.jauge-tete { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
.jauge-tete > span:first-child { color: var(--muted); }
.jauge-piste { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.jauge-piste > div { height: 100%; border-radius: inherit; background: var(--text); transition: width .6s; }
.jauge.cours .jauge-piste > div { background: var(--orange); }
.jauge.alerte .jauge-piste > div { background: var(--rouge); }

/* Le choix d'une formule : « Hors prix de vos LLM » sous le prix, puis ses projets actifs. */
.choix small.note-llm { color: var(--muted); font-size: 12px; }
.choix small.projets { font-weight: 600; color: var(--text); }
.choix small.refus { color: var(--rouge); margin-top: 10px; }

/* LA MISE EN PLACE d'un espace de travail, au centre de l'écran : une liste qui se coche à mesure
   que le serveur avance, puis un compte à rebours. Aucune ombre ni filet ; l'anneau qui tourne dit
   l'étape en cours, la coche se dessine quand elle est faite. */
.page-mise-en-place { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.mise-en-place { width: min(520px, 100%); }
.mise-en-place .marque { margin-bottom: 26px; }
.mise-en-place h1 { margin-bottom: 4px; }
.mise-en-place .atelier-adresse { margin: 0; color: var(--muted); font-size: 15px; }
.mise-en-place-liste { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 4px; }
.mise-en-place-liste li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 14px; color: var(--faint); transition: color .3s, background-color .3s; }
.mise-en-place-liste li[data-etat='faite'] { color: var(--text); }
.mise-en-place-liste li[data-etat='en-cours'] { color: var(--text); font-weight: 500; background: color-mix(in srgb, var(--blanc) 60%, transparent); }
.mise-en-place-liste li[data-etat='erreur'] { color: var(--rouge); background: var(--fond-alerte); }
.mise-en-place-liste .coche { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--text) 7%, transparent); }
.mise-en-place-liste .coche svg { width: 13px; height: 13px; }
.mise-en-place-liste li[data-etat='faite'] .coche { background: var(--text); color: var(--blanc); animation: coche-apparait .35s ease-out; }
.mise-en-place-liste li[data-etat='faite'] .coche path { stroke-dasharray: 24; animation: coche-trace .4s ease-out .05s backwards; }
.mise-en-place-liste li[data-etat='erreur'] .coche { background: var(--rouge); color: var(--blanc); }
.mise-en-place-liste li[data-etat='en-cours'] .coche { background: transparent; border: 2.5px solid color-mix(in srgb, var(--text) 10%, transparent); border-top-color: var(--text); animation: anneau-tourne .9s linear infinite; }
.mise-en-place-pied { margin-top: 22px; }
.mise-en-place-pied p { margin: 0; }
.mise-en-place-pied .actions { margin-top: 14px; }
.mise-en-place[data-mise-en-place='termine'] [data-compte-a-rebours] { font-weight: 500; font-variant-numeric: tabular-nums; }
@keyframes coche-apparait { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes coche-trace { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes anneau-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mise-en-place-liste li, .mise-en-place-liste .coche, .mise-en-place-liste .coche path { animation: none !important; transition: none; }
}

/* LE SUIVI D'UN CHANGEMENT DE FORMULE : la carte de la mise en place, plus l'état du serveur et les
   deux sorties qui restent ouvertes (assistance, déconnexion). */
.migration .migration-serveur { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--blanc) 55%, transparent); font-size: 14px; }
.migration .migration-serveur .point { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.migration .migration-serveur[data-etat-serveur='repond'] .point { background: #2f9e6b; }
.migration .migration-serveur[data-etat-serveur='coupe'] .point { background: #d59a2c; animation: point-pulse 1.4s ease-in-out infinite; }
/* Les sorties du suivi : une colonne SANS FOND collée à gauche de l'écran, du haut (« Revenir à mon
   espace ») au bas (assistance, déconnexion). Sur téléphone, deux bandes, en haut et en bas. */
.migration-colonne { position: fixed; top: var(--ecart-colonne, 16px); bottom: var(--ecart-colonne, 16px); left: var(--ecart-colonne, 16px); z-index: 2; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.migration-colonne > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: auto; }
.migration-colonne .bouton { gap: 8px; }
.migration-colonne .bouton svg { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .page-migration { padding: 72px 16px; }
  .migration-colonne { right: var(--ecart-colonne, 16px); }
  .migration-colonne-bas { flex-direction: row !important; }
}
@keyframes point-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .migration .migration-serveur .point { animation: none !important; } }

/* Le bandeau de succès, en haut de « Mon espace de travail » après la mise en place. */
.bandeau.succes { background: color-mix(in srgb, var(--menthe) 90%, transparent); }

/* LA MESSAGERIE DES DEMANDES (client et administration) : le fil occupe l'écran, mes messages à
   droite en noir, ceux de l'autre à gauche dans une bulle beige foncé bien distincte du fond, avec
   son initiale ; un séparateur par jour ; le composeur reste COLLÉ en bas de l'écran. */
main.ecran.messagerie { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: var(--ecart-colonne); }
.conversation { flex: 1; display: flex; flex-direction: column; border-radius: 24px; background: var(--fond-bloc); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.fil { flex: 1; display: flex; flex-direction: column; padding: 18px 20px 12px; }
.fil-jour { align-self: center; margin: 14px 0 6px; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); font-size: 12px; }
.fil-jour:first-child { margin-top: 0; }
.message { display: flex; align-items: flex-end; gap: 10px; max-width: min(640px, 86%); margin-top: 12px; }
.message.suite { margin-top: 3px; }
.message.moi { align-self: flex-end; flex-direction: row-reverse; }
.message .avatar { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--encre-fg); font-size: 12px; font-weight: 600; margin-bottom: 20px; }
.message.suite .avatar { visibility: hidden; }
.bulle-groupe { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.message.moi .bulle-groupe { align-items: flex-end; }
.bulle { padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--bulle-recue); color: var(--text); }
.message.moi .bulle { border-radius: 20px 20px 6px 20px; background: var(--encre); color: var(--encre-fg); }
.bulle p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.message-meta { margin: 4px 8px 0; color: var(--muted); font-size: 12px; }
.message.suite:has(+ .message.suite) .message-meta, .message:has(+ .message.suite) .message-meta { display: none; }
.message:has(+ .message.suite) .avatar { margin-bottom: 0; }
.message:has(+ .message.suite) { margin-bottom: 0; }

.composeur { position: sticky; bottom: var(--ecart-colonne); z-index: 2; margin: 0 10px 10px; padding: 8px; border-radius: 28px; background: var(--fond-bloc-fort); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.composeur .apercus:not(:empty) { padding: 4px 6px 8px; }
.composeur-ligne { display: flex; align-items: flex-end; gap: 6px; padding: 4px; border-radius: 24px; background: var(--fond-champ); }
.composeur-ligne:focus-within { background: var(--blanc); outline: 2px solid var(--text); outline-offset: -2px; }
.composeur textarea { flex: 1; min-width: 0; border: 0; background: transparent; resize: none; font: inherit; color: var(--text); padding: 9px 6px; min-height: 40px; max-height: 160px; line-height: 1.4; outline: none; }
.composeur .bouton-rond { background: transparent; }
.composeur .bouton-rond:hover { background: var(--fond-champ-survol); }
.composeur .bouton-rond svg { width: 19px; height: 19px; }
.composeur .bouton-rond.envoi { background: var(--encre); color: var(--encre-fg); }
.composeur .bouton-rond.envoi:hover { background: var(--encre-survol); }
.composeur .bouton-rond.envoi:disabled { opacity: .35; cursor: default; }
.composeur .bouton-rond.envoi[aria-busy='true'] { opacity: .6; }
@media (max-width: 620px) {
  .fil { padding: 14px 12px 10px; }
  .message { max-width: 92%; gap: 8px; }
  .message .avatar { width: 26px; height: 26px; font-size: 11px; }
  .composeur { margin: 0 6px 6px; bottom: calc(env(safe-area-inset-bottom) + 8px); }
}