/* L'atelier — feuille autonome.
   ⚠️ Elle ne dépend PAS de la boutique : un back-office qui hérite du style de
   la vitrine change d'apparence chaque fois qu'on retouche le site public.
   Volontairement sobre, dense, lisible sur un écran d'atelier. */

:root {
  --at-noir:#14161A; --at-fond:#F3F5F7; --at-blanc:#fff;
  --at-bord:#DCE2E8; --at-gris:#616B76; --at-cyan:#00AEEF; --at-magenta:#EC008C;
  --at-vert:#1F8A4C; --at-rouge:#C42B2B; --at-ombre:0 1px 2px rgba(20,22,26,.06);
}

/* Ligne de tableau cliquable : toute la ligne mène à la commande. */
.at-ligne-lien { cursor:pointer; }
.at-ligne-lien:hover { background:#EFF7FC; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body.at {
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--at-noir); background:var(--at-fond);
  -webkit-text-size-adjust:100%;
}

/* ---------------------------------------------------------- barre du haut */
/* ⭐ BANDE PLUS HAUTE, TEXTES ET PICTOS PLUS GROS — demandé par Julien le
   18/09/2026 : la barre du haut se lit de plus loin, sur un écran d'atelier
   pas toujours face à soi. */
.at-barre { background:var(--at-noir); color:#fff; position:sticky; top:0; z-index:20; }
/* ⭐⭐ UNE SEULE LIGNE — demandé par Julien le 18/09/2026 : agrandir le logo et
   les textes avait fait passer le menu sur deux rangées à l'écran. On donne
   donc plus de largeur à la barre (elle n'est plus bridée à 1280px, une
   largeur pensée pour du texte de lecture, pas pour une barre d'outils) et on
   empêche le retour à la ligne.
   ⚠️⚠️ PAS DE `overflow-x` ICI. Un `overflow` autre que `visible` sur ce
   conteneur ROGNE les sous-menus de `.at-gr-liste`, positionnés en
   `absolute` par rapport à lui : posé une fois pour permettre un défilement
   de secours, il rendait chaque sous-menu invisible, ouvert mais caché sous
   la page. Sans lui, un contenu trop large déborde simplement du conteneur —
   ce que la page gère très bien toute seule. */
.at-barre-in {
  max-width:1680px; margin:0 auto; padding:0 1.2rem;
  display:flex; align-items:center; gap:1.5rem; min-height:84px;
  flex-wrap:nowrap;
}
.at-marque { display:flex; align-items:center; text-decoration:none; color:#fff; flex:none; }
.at-marque-logo { height:56px; width:auto; display:block; }
.at-menu { display:flex; gap:.25rem; flex:1 0 auto; flex-wrap:nowrap; }

/* Un groupe = un <details>. Le navigateur tient l'état ; le script ne fait
   que refermer les voisins et fermer au clic dehors. */
.at-gr { position:relative; }
.at-gr > summary {
  color:#C9D2DB; padding:.55rem .9rem .5rem; border-radius:7px; cursor:pointer;
  font-weight:500; white-space:nowrap; list-style:none; user-select:none;
  /* Le picto AU-DESSUS du libellé : la barre se lit d'un coup d'œil, et le mot
     reste écrit — une barre d'icônes muettes se devine, et se devine mal. */
  display:flex; flex-direction:column; align-items:center; gap:.15rem; line-height:1.15;
}
.at-gr > summary::-webkit-details-marker { display:none; }
.at-gr > summary > span { display:inline-flex; align-items:center; gap:.25rem; font-size:1rem; }
.at-gr > summary > span::after { content:"▾"; font-size:.72em; opacity:.65; }
.at-picto { flex:none; opacity:.9; }
.at-gr > summary .at-picto { width:24px; height:24px; }
.at-gr > summary:hover { background:rgba(255,255,255,.08); color:#fff; }
.at-gr > summary:focus-visible { outline:2px solid var(--at-cyan); outline-offset:1px; }
.at-gr.actif > summary { background:var(--at-cyan); color:#04222D; font-weight:600; }
.at-gr[open] > summary { background:rgba(255,255,255,.14); color:#fff; }
.at-gr.actif[open] > summary { background:var(--at-cyan); color:#04222D; }

.at-gr-liste {
  position:absolute; top:calc(100% + .3rem); left:0; z-index:40; min-width:230px;
  background:#fff; border:1px solid var(--at-bord); border-radius:8px; padding:.3rem;
  box-shadow:0 8px 24px rgba(20,22,26,.18); display:flex; flex-direction:column;
}
/* ⭐ Pictogramme + libellé sur chaque ligne (18/09/2026).
   ⚠️ Le dessin garde une largeur FIXE et ne se comprime jamais : sans `flex:none`
   sur `.at-picto`, une ligne au libellé long l'écraserait en ovale — et les
   icônes ne seraient plus alignées d'une ligne à l'autre, ce qui est tout ce
   qu'on leur demande. */
.at-gr-liste a {
  color:var(--at-noir); text-decoration:none; padding:.45rem .6rem;
  border-radius:5px; font-size:.9rem; white-space:nowrap;
  display:flex; align-items:center; gap:.55rem;
}
.at-gr-liste a .at-picto { width:17px; height:17px; opacity:.72; }
.at-gr-liste a:hover .at-picto,
.at-gr-liste a.actif .at-picto { opacity:1; }
.at-gr-liste a:hover { background:#EFF7FC; color:#046A8D; }
.at-gr-liste a.actif { background:var(--at-cyan); color:#fff; font-weight:600; }
.at-gr-liste a.actif:hover { background:#0089BD; color:#fff; }

/* Recherche globale */
.at-chercher { flex:0 0 240px; position:relative; display:flex; align-items:center; }
.at-chercher .at-picto {
  position:absolute; left:.65rem; color:#8A96A2; pointer-events:none;
  width:18px; height:18px;
}
.at-chercher input {
  width:100%; font:inherit; font-size:.95rem; padding:.55rem .8rem .55rem 2.3rem;
  border-radius:7px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08); color:#fff;
}
.at-chercher input::placeholder { color:#8A96A2; }
.at-chercher input:focus {
  outline:none; border-color:var(--at-cyan); background:rgba(255,255,255,.14);
}

/* Bandeau d'alerte — au-dessus de la barre, comme une nouvelle du jour. */
.at-alerte {
  background:#C1620F; color:#fff; font-size:.88rem;
  padding:.5rem 1rem; display:flex; gap:1rem; align-items:center;
  justify-content:space-between; flex-wrap:wrap;
}
.at-alerte a {
  color:#C1620F; background:#fff; text-decoration:none; font-weight:600;
  padding:.25rem .7rem; border-radius:5px; white-space:nowrap;
}
.at-alerte a:hover { background:#FFF3E6; }
.at-moi { display:flex; align-items:center; gap:.8rem; font-size:.94rem; color:#AEB8C2; }
.at-moi-n { color:#fff; }
.at-lien {
  background:none; border:0; color:#AEB8C2; text-decoration:underline;
  cursor:pointer; font:inherit; padding:0;
}
.at-lien:hover { color:#fff; }

/* ------------------------------------------------------------------ corps */
.at-corps { max-width:1680px; margin:0 auto; padding:1.4rem 1rem 3.5rem; }
.at-titre { margin-bottom:1.1rem; }
.at-titre h1 { font-size:1.55rem; line-height:1.2; letter-spacing:-.01em; }
.at-lead { color:var(--at-gris); margin-top:.15rem; }
.at-carte {
  background:var(--at-blanc); border:1px solid var(--at-bord); border-radius:9px;
  padding:1.1rem 1.2rem; margin-bottom:1rem; box-shadow:var(--at-ombre);
}
.at-carte h2 { font-size:1.05rem; margin-bottom:.5rem; }
.at-note { color:var(--at-gris); font-size:.88rem; }
.at-note-pied { margin-top:1rem; }
.at-aide { color:var(--at-gris); font-size:.84rem; margin-top:.5rem; }

.at-ok, .at-ko {
  border-radius:7px; padding:.7rem .9rem; margin-bottom:1rem; font-size:.92rem;
}
.at-ok { background:#EAF7EF; border-left:3px solid var(--at-vert); color:#14572F; }
.at-ko { background:#FDEDED; border-left:3px solid var(--at-rouge); color:#8C1F1F; }

/* ------------------------------------------------------------ formulaires */
.at-form { display:flex; flex-direction:column; gap:.3rem; margin-top:.7rem; }
.at-form label { font-size:.82rem; font-weight:600; color:var(--at-gris); }
.at-form input[type=text], .at-form input[type=email], .at-form input[type=password] {
  font:inherit; padding:.55rem .7rem; border:1px solid var(--at-bord);
  border-radius:6px; background:#fff; width:100%;
}
.at-form input:focus { outline:2px solid var(--at-cyan); outline-offset:1px; border-color:var(--at-cyan); }
.at-form-ligne { flex-direction:row; flex-wrap:wrap; align-items:flex-end; gap:.7rem; }
.at-form-ligne > span { display:flex; flex-direction:column; gap:.2rem; }
.at-form-ligne .at-large { flex:1; min-width:240px; }

.at-bouton {
  display:inline-block; font:inherit; font-weight:600; cursor:pointer;
  background:#fff; color:var(--at-noir); border:1px solid var(--at-bord);
  border-radius:6px; padding:.55rem 1rem; text-decoration:none; margin-top:.6rem;
}
.at-bouton:hover { border-color:var(--at-gris); }
.at-bouton-plein { background:var(--at-cyan); border-color:var(--at-cyan); color:#04222D; width:100%; }
.at-bouton-plein:hover { background:#0098CD; border-color:#0098CD; }

/* --------------------------------------------------------------- entrée
   ⭐ Sur le modèle de https://asi-connect.fr/login (demandé par Julien le
   18/09/2026) : fond sombre pleine largeur, carte blanche flottante à
   l'ombre marquée, champs gris clair, bouton plein cyan. */
.at-entree {
  display:flex; justify-content:center; align-items:center;
  min-height:100vh; padding:3rem 1rem;
  width:100vw; margin-left:calc(50% - 50vw);
  background:var(--at-noir);
}
.at-carte-etroite { max-width:400px; width:100%; }
.at-carte-connexion {
  max-width:480px; width:100%; text-align:center;
  background:#fff; border-radius:24px; box-shadow:0 34px 80px rgba(3,16,30,.5);
  padding:64px 56px 44px;
}
.at-carte-connexion .at-form,
.at-carte-connexion .at-note,
.at-carte-connexion .at-ok, .at-carte-connexion .at-ko { text-align:left; }
.at-entree-logo { display:block; height:80px; width:auto; margin:0 auto 1.6rem; }

.at-carte-connexion .at-form { gap:.5rem; }
.at-carte-connexion .at-form label {
  font-size:.85rem; font-weight:700; color:var(--at-noir); text-transform:none;
}
.at-carte-connexion .at-form input[type=text],
.at-carte-connexion .at-form input[type=password] {
  background:#F8FAFC; border:1.5px solid #E8EDF3; border-radius:12px;
  height:54px; font-size:1rem;
}

.at-mdp-champ { position:relative; }
.at-mdp-champ input { padding-right:2.8rem; }
.at-mdp-oeil {
  position:absolute; top:50%; right:.6rem; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:2.1rem; height:2.1rem; padding:0; border:0; background:none;
  color:var(--at-gris); cursor:pointer; border-radius:5px;
}
.at-mdp-oeil:hover { color:var(--at-noir); background:#F0F2F4; }
.at-mdp-oeil-ferme { display:none; }
.at-mdp-oeil[aria-pressed="true"] .at-mdp-oeil-ouvert { display:none; }
.at-mdp-oeil[aria-pressed="true"] .at-mdp-oeil-ferme { display:flex; }

.at-bouton-connexion {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; height:56px; margin-top:1.2rem; font:inherit; font-size:1.05rem;
  font-weight:800; letter-spacing:.01em; color:#04222D; cursor:pointer;
  background:var(--at-cyan); border:0; border-radius:12px;
  box-shadow:0 12px 24px rgba(0,174,239,.36);
}
.at-bouton-connexion:hover { background:#0098CD; }
.at-bouton-connexion + .at-bouton-connexion { margin-top:.7rem; }
.at-bouton-connexion-creux {
  background:#fff; color:var(--at-noir); border:1.5px solid var(--at-bord);
  box-shadow:none;
}
.at-bouton-connexion-creux:hover { background:#F6F8FA; border-color:#C7D0DB; }

.at-connexion-info {
  background:#F4F7FC; border:1px solid #DDE4EE; border-radius:11px;
  padding:.7rem .9rem; color:#31435C; font-size:.85rem; margin:0 0 1.1rem;
}
.at-code-champ {
  text-align:center; font-size:1.3rem; font-weight:800; letter-spacing:.5rem;
}

.at-carte-connexion .at-note-pied {
  text-align:center; font-size:.8rem; color:#6B7A90; margin-top:1rem;
}
.at-connexion-separateur {
  display:flex; align-items:center; gap:.9rem; color:#AEB8C6;
  font-size:.75rem; margin:1.6rem 0 1.1rem;
}
.at-connexion-separateur::before, .at-connexion-separateur::after {
  content:""; flex:1; height:1px; background:var(--at-bord);
}
.at-connexion-securite {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  color:#7C8798; font-size:.78rem; margin:0;
}

/* -------------------------------------------------------------- refus */
.at-refus { max-width:560px; }
.at-refus p + p { margin-top:.6rem; }

/* -------------------------------------------------------- utilisateurs */
.at-invitation { border-color:var(--at-magenta); }
.at-lien-invit {
  width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem;
  padding:.6rem .7rem; border:1px solid var(--at-bord); border-radius:6px;
  background:#FCF4F8; margin-top:.5rem;
}
.at-perso.suspendu { opacity:.62; }
.at-perso-tete { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.at-etiq {
  font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  background:#E7F7FD; color:#046A8D; border-radius:3px; padding:.1rem .35rem;
  vertical-align:middle; margin-left:.35rem;
}
.at-etiq-ko { background:#FDEDED; color:#8C1F1F; }
.at-attente { color:var(--at-magenta); }

.at-droits {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:.8rem; margin-top:.9rem;
}
.at-groupe { border:1px solid var(--at-bord); border-radius:7px; padding:.6rem .75rem .75rem; }
.at-groupe legend {
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  font-weight:700; color:var(--at-gris); padding:0 .3rem;
}
.at-droit { display:flex; gap:.5rem; align-items:flex-start; padding:.35rem 0; cursor:pointer; }
.at-droit + .at-droit { border-top:1px solid #F0F3F6; }
.at-droit input { margin-top:.28rem; width:16px; height:16px; flex:none; accent-color:var(--at-cyan); }
.at-droit span { display:flex; flex-direction:column; }
.at-droit strong { font-weight:600; font-size:.91rem; }
.at-droit em { font-style:normal; color:var(--at-gris); font-size:.8rem; line-height:1.4; }
.at-droit.verrou { cursor:default; }
.at-verrou { color:var(--at-magenta) !important; margin-top:.2rem; }

/* ------------------------------------------------------------ tableaux */
.at-corps table { width:100%; border-collapse:collapse; font-size:.9rem; }
.at-corps th, .at-corps td {
  padding:.55rem .5rem; border-bottom:1px solid #EDF0F3; text-align:left; vertical-align:top;
}
.at-corps thead th {
  font-size:.74rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--at-gris); border-bottom:2px solid var(--at-bord);
}
.at-corps .bq-scroll { overflow-x:auto; }

@media (max-width:640px) {
  /* ⚠️ Sous 640px la barre repasse en plusieurs lignes : sur un téléphone,
     un défilement horizontal pour atteindre « Système » serait pire qu'un
     retour à la ligne. */
  .at-barre-in { min-height:auto; padding:.6rem 1rem; flex-wrap:wrap; overflow-x:visible; }
  .at-menu { order:3; width:100%; flex:1 1 100%; flex-wrap:wrap; }
  .at-chercher { order:4; flex:1 1 100%; }
  .at-gr-liste { position:static; box-shadow:none; margin:.2rem 0 .4rem; }
  .at-corps { padding-top:1rem; }
}

/* ------------------------------------------------------------ fiche client */
.at-nom { font-weight:600; color:var(--at-noir); text-decoration:none; border-bottom:1px solid var(--at-cyan); }
.at-nom:hover { color:var(--at-cyan); }

.at-identite {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem 1.4rem;
}
.at-id-bloc { font-size:.93rem; }
.at-id-lib {
  display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; color:var(--at-gris); margin-bottom:.15rem;
}

/* Le panier en cours est la seule chose sur quoi on peut agir : il se voit. */
.at-panier-vif { border-left:3px solid var(--at-magenta); }
.at-panier-vif h2 { color:var(--at-magenta); }

.at-sous-onglets { margin-bottom:1rem; }
.at-lignes { list-style:none; margin-top:.5rem; }
.at-lignes li { padding:.3rem 0; border-top:1px solid #F0F3F6; font-size:.92rem; }
.at-fichiers { list-style:none; margin-top:.25rem; }
.at-fichiers li { padding:.25rem 0; font-size:.9rem; }
.at-adresses { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.at-adresses .at-carte { margin-bottom:0; }
.at-id-adresse { line-height:1.45; }
.at-id-plus {
  font-size:.66rem; background:var(--at-cyan); color:#04222D; border-radius:3px;
  padding:.02rem .28rem; text-decoration:none; margin-left:.25rem; letter-spacing:0;
}

/* ------------------------------------------- tous les champs d'une commande */
.cc-repli { margin-top:.9rem; border-top:1px solid #EDF0F3; padding-top:.7rem; }
.cc-repli > summary {
  cursor:pointer; font-size:.85rem; font-weight:600; color:var(--at-cyan);
  list-style:none; display:inline-flex; align-items:center; gap:.35rem;
}
.cc-repli > summary::-webkit-details-marker { display:none; }
.cc-repli > summary::before { content:"▸"; font-size:.8em; }
.cc-repli[open] > summary::before { content:"▾"; }
.cc-repli > summary:hover { text-decoration:underline; }
.cc-repli-large { background:#fff; border:1px solid var(--at-bord); border-radius:9px;
                  padding:1rem 1.2rem; box-shadow:var(--at-ombre); }

.cc { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem 1.6rem; margin-top:.9rem; }
.cc-bloc h3 {
  font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:var(--at-gris); margin-bottom:.35rem; padding-bottom:.25rem;
  border-bottom:1px solid var(--at-bord);
}
.cc-bloc dl { display:flex; flex-direction:column; }
.cc-champ { display:flex; justify-content:space-between; gap:.7rem; padding:.22rem 0;
            font-size:.87rem; border-bottom:1px solid #F4F6F8; }
.cc-champ dt { color:var(--at-gris); flex:none; }
.cc-champ dd { text-align:right; word-break:break-word; }
.cc-champ dd.cc-vide { color:#B4BDC6; }
.cc-titre-lignes { font-size:1rem; margin:1.1rem 0 .4rem; }
.cc-lignes { font-size:.85rem; }

/* ------------------------------------------------------------ supervision */
.sup-jauge, .sup-barre { background:#E8ECF0; border-radius:99px; overflow:hidden; }
.sup-jauge { height:10px; margin:.6rem 0 .4rem; }
.sup-barre { height:6px; width:100%; max-width:130px; display:inline-block; vertical-align:middle; }
.sup-jauge span, .sup-barre span { display:block; height:100%; background:var(--at-cyan); }
.sup-note-forte {
  background:#F4F6F8; border-left:3px solid var(--at-gris); border-radius:6px;
  padding:.6rem .8rem; margin:.7rem 0; font-size:.9rem;
}
.sup-table { width:100%; margin-top:.8rem; }
.sup-table th { font-weight:600; }
.sup-chiffres { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-top:.6rem; }
/* ⭐ UNE TOUCHE DE COULEUR — demandé par Julien le 18/09/2026 : un filet de
   couleur à gauche de chaque chiffre, qui les distingue au premier regard
   sans repeindre toute la page. Les quatre teintes tournent dans l'ordre où
   les chiffres apparaissent, pas selon leur sens : un panier moyen n'est ni
   bon ni mauvais en soi. */
.sup-chiffre {
  display:flex; flex-direction:column; padding:.7rem .9rem;
  background:#F8FAFC; border-radius:0 8px 8px 0; border-left:4px solid var(--at-cyan);
}
.sup-chiffre:nth-child(4n+2) { border-left-color:#D97706; }
.sup-chiffre:nth-child(4n+3) { border-left-color:var(--at-rouge); }
.sup-chiffre:nth-child(4n+4) { border-left-color:var(--at-vert); }
.sup-chiffre strong { font-size:1.5rem; font-family:'Barlow Condensed',system-ui,sans-serif; line-height:1.15; }
/* ⭐ Une seconde ligne, plus petite, sous le chiffre — le nombre de
   commandes/factures qu'il représente, ou son évolution. Demandé par Julien
   le 18/09/2026, dans le même cadre que le chiffre, jamais une case à part. */
.at-sous-chiffre { font-size:.76rem; color:var(--at-gris); margin-top:.15rem; }
/* ⭐ Le libellé AU-DESSUS du chiffre — demandé par Julien le 18/09/2026 :
   dire ce que le chiffre représente (commande, facture…) avant de le lire,
   pas après. Même style que `.at-facturation-label`, en plus large. */
.at-sous-chiffre-label {
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--at-gris); margin-bottom:.2rem;
}
.at-tendance {
  display:inline-block; font-weight:700; font-size:.74rem; padding:.05rem .4rem;
  border-radius:999px; background:#E9F7EE; color:#1F8A4C;
}
.at-tendance-baisse { background:#FDEDED; color:#8C1F1F; }

/* ------------------------------------------------------- bandeau facturation
   ⭐ Sur le modèle d'un tableau de bord montré par Julien le 18/09/2026 :
   un bandeau gris-bleu qui regroupe la facturation, quatre cadres à filet de
   couleur dedans. */
.at-bandeau {
  background:#EEF1F6; border-radius:14px; padding:1.1rem 1.2rem 1.3rem; margin-bottom:1.2rem;
}
.at-bandeau-titre {
  font-size:.74rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--at-gris); margin:0 0 .9rem;
}
.at-facturation-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; }
.at-facturation-carte {
  display:flex; flex-direction:column; gap:.2rem; background:#fff; border-radius:0 10px 10px 0;
  border-left:4px solid var(--at-cyan); padding:.9rem 1.1rem; box-shadow:var(--at-ombre);
}
.at-facturation-bleu   { border-left-color:var(--at-cyan); }
.at-facturation-orange { border-left-color:#D97706; }
.at-facturation-rouge  { border-left-color:var(--at-rouge); }
.at-facturation-vert   { border-left-color:var(--at-vert); }
.at-facturation-label {
  font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--at-gris);
}
.at-facturation-carte strong { font-size:1.5rem; font-family:'Barlow Condensed',system-ui,sans-serif; }
.at-a-relancer { color:var(--at-rouge); font-weight:700; }
.sup-code {
  background:#14161A; color:#DDE4EA; border-radius:6px; padding:.65rem .8rem;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.79rem;
  overflow-x:auto; margin:.5rem 0; white-space:pre;
}
.sup-journal { background:#F4F6F8; color:var(--at-noir); }
.sup-tache { border-top:1px solid #EDF0F3; padding:.7rem 0; }
.sup-tache.absente { border-left:3px solid var(--at-rouge); padding-left:.7rem; background:#FEF7F7; }
.sup-tache-tete { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:baseline; }
.sup-tache h3 { font-size:.96rem; }
.sup-cmd {
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.76rem;
  color:var(--at-gris); word-break:break-all; margin-top:.2rem;
}

/* -------------------------------------------------------------- paramètres */
.pa-mail { border-top:1px solid #EDF0F3; padding:.85rem 0; }
.pa-mail:first-of-type { border-top:0; }
.pa-mail.eteint { opacity:.62; }
.pa-mail-tete { display:flex; justify-content:space-between; gap:1.2rem; align-items:flex-start; flex-wrap:wrap; }
.pa-mail-tete .at-note { margin-top:.15rem; max-width:52ch; }
.pa-form { display:flex; gap:.4rem; align-items:center; }
.pa-form input[type=text] {
  font:inherit; font-size:.88rem; padding:.4rem .6rem;
  border:1px solid var(--at-bord); border-radius:6px;
}
.pa-form .at-bouton { margin-top:0; }
.pa-bascule {
  font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap;
  border:1px solid var(--at-bord); background:#fff; color:var(--at-gris);
  border-radius:99px; padding:.3rem .8rem .3rem .65rem;
  display:inline-flex; align-items:center; gap:.4rem;
}
.pa-bascule::before {
  content:""; width:9px; height:9px; border-radius:50%; background:#C3CBD3;
}
.pa-bascule.on { border-color:#9BD9AE; background:#EAF7EF; color:#14572F; }
.pa-bascule.on::before { background:var(--at-vert); }
.pa-bascule[disabled] { cursor:not-allowed; opacity:.6; }
.pa-texte { max-height:420px; overflow:auto; white-space:pre-wrap; line-height:1.5; }
.pa-sms-texte {
  width:100%; font:inherit; font-size:.9rem; padding:.6rem .7rem; margin-top:.3rem;
  border:1px solid var(--at-bord); border-radius:6px; resize:vertical;
}
.pa-sms-apercu {
  background:#EFF7FC; border:1px solid #BFE3F5; border-radius:12px 12px 12px 3px;
  padding:.7rem .9rem; font-size:.9rem; line-height:1.45; max-width:33ch; margin-top:.3rem;
}
.at-aide code { background:#F0F3F6; border-radius:3px; padding:.05rem .3rem; font-size:.82em; }
.pa-form select {
  font:inherit; font-size:.88rem; padding:.4rem .6rem;
  border:1px solid var(--at-bord); border-radius:6px; background:#fff;
}

/* ------------------------------------------------------- fiche client v2 */
/* En-tête et onglets forment un seul bloc : la barre d'onglets doit toujours
   se lire sous le nom de la personne qu'elle concerne. */
.fc-bloc {
  background:var(--at-blanc); border:1px solid var(--at-bord); border-radius:10px;
  box-shadow:var(--at-ombre); overflow:hidden; margin-bottom:1rem;
}
.fc-tete { padding:1.3rem 1.4rem 1rem; }
.fc-tete h1 { font-size:1.55rem; letter-spacing:-.01em; line-height:1.15; }
.fc-sous { color:var(--at-gris); margin-top:.15rem; font-size:.95rem; }
.fc-pastilles { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.7rem; }
.fc-pastille {
  background:#EEF2F6; color:#4A555F; border-radius:99px;
  padding:.22rem .7rem; font-size:.8rem; font-weight:500;
}
.fc-pastille-vif { background:#FCEAF3; color:#A1176A; }

.fc-onglets { display:flex; background:var(--at-noir); overflow-x:auto; }
.fc-onglet {
  color:#AEB8C2; text-decoration:none; white-space:nowrap; font-weight:600;
  padding:.85rem 1.15rem; border-bottom:3px solid transparent;
  display:inline-flex; align-items:center; gap:.45rem; font-size:.92rem;
}
.fc-onglet:hover { color:#fff; background:rgba(255,255,255,.06); }
.fc-onglet.actif { color:#fff; background:#20242A; border-bottom-color:var(--at-cyan); }
.fc-compte {
  background:rgba(255,255,255,.16); color:#DCE4EB; border-radius:99px;
  padding:.05rem .45rem; font-size:.74rem; font-weight:700;
}
.fc-onglet.actif .fc-compte { background:var(--at-cyan); color:#04222D; }

/* Le bandeau de chiffres, séparé par des filets comme sur une facture. */
.fc-chiffres {
  background:var(--at-blanc); border:1px solid var(--at-bord); border-radius:10px;
  box-shadow:var(--at-ombre); margin-bottom:1rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.fc-chiffre { padding:1rem 1.3rem; border-left:1px solid #EDF0F3; display:flex; flex-direction:column; }
.fc-chiffre:first-child { border-left:0; }
.fc-chiffre-lib {
  font-size:.7rem; text-transform:uppercase; letter-spacing:.07em;
  font-weight:700; color:var(--at-gris); margin-bottom:.25rem;
}
.fc-chiffre strong {
  font-family:'Barlow Condensed',system-ui,sans-serif; font-size:1.7rem; line-height:1.1;
}
.fc-chiffre strong small { font-size:.55em; color:var(--at-gris); font-weight:500; }
.fc-vif  { color:var(--at-magenta); }
.fc-gris { color:#B4BDC6; }

.fc-colonnes { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:1rem; align-items:start; }
.fc-tableau {
  background:var(--at-blanc); border:1px solid var(--at-bord); border-radius:10px;
  box-shadow:var(--at-ombre); overflow:hidden;
}
.fc-tableau h2 {
  font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color:#4A555F; background:#EEF2F6; padding:.7rem 1.1rem; margin:0;
  border-bottom:1px solid var(--at-bord);
}
.fc-tableau table { width:100%; border-collapse:collapse; font-size:.92rem; }
.fc-tableau th, .fc-tableau td {
  padding:.7rem 1.1rem; border-bottom:1px solid #EDF0F3; text-align:left; vertical-align:top;
}
.fc-tableau tr:last-child th, .fc-tableau tr:last-child td { border-bottom:0; }
.fc-tableau th { font-weight:500; color:var(--at-gris); width:44%; }
.fc-tableau td { font-weight:500; word-break:break-word; }
.fc-tableau td.fc-vide { color:#B4BDC6; font-weight:400; }
.fc-oui { color:var(--at-vert); font-weight:600; }
.fc-non { color:var(--at-gris); font-weight:400; }

@media (max-width:640px) {
  .fc-chiffre { border-left:0; border-top:1px solid #EDF0F3; }
  .fc-chiffre:first-child { border-top:0; }
}

/* ─────────── la fenêtre d'expédition ───────────
   ⚠️ `<dialog>` natif, sans bibliothèque : le navigateur gère l'ouverture, la
   fermeture par Échap, le fond grisé et le piège au clavier. Trois cents kilos
   de JavaScript pour ça seraient une dépendance de plus à maintenir. */
dialog.at-modale { border: 0; border-radius: 12px; padding: 0; width: min(680px, 94vw);
  margin: auto; max-height: 88vh; overflow-y: auto;
  box-shadow: 0 18px 50px rgba(0,0,0,.28); color: inherit; }
dialog.at-modale::backdrop { background: rgba(15,18,24,.55); }
.at-modale-tete { background: #14181F; color: #fff; padding: 1rem 1.3rem; }
.at-modale-tete h2 { margin: 0; font-size: 1.05rem; }
.at-modale-tete p { margin: .2rem 0 0; font-size: .82rem; color: #A9B2BF; }
.at-modale-corps { padding: 1.1rem 1.3rem; }
.at-modale-corps fieldset { border: 1px solid #E4E7EB; border-radius: 9px; padding: .7rem .9rem 1rem;
  margin: 0 0 1rem; }
.at-modale-corps legend { font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #6A737C; padding: 0 .35rem; }
.at-modale-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; }
.at-modale-grille label { display: block; font-size: .8rem; color: #4A525C; }
.at-modale-grille input, .at-modale-grille select { width: 100%; margin-top: .25rem;
  padding: .45rem .5rem; border: 1px solid #CBD2DA; border-radius: 7px; font: inherit; }
.at-modale-lu { font-size: .9rem; line-height: 1.5; margin: 0; }
.at-modale-pied { display: flex; gap: .6rem; justify-content: flex-end; align-items: center;
  padding: .9rem 1.3rem; background: #F6F7F9; border-top: 1px solid #E4E7EB; }
.at-modale-alerte { background: #FDF4E3; border: 1px solid #F0D9A8; border-radius: 8px;
  padding: .55rem .7rem; font-size: .82rem; color: #6B4E12; margin: 0 0 1rem; }

/* ⭐⭐ 21/10/2026, demandé par Julien (« refaire le modal d'expé comme la
   capture ») — la boîte « adresse d'expédition » du modal FedEx, même esprit
   que la confirmation d'expédition de l'app Pilote (TNT) : un encadré clair,
   un titre en majuscules discret, des champs empilés pleine largeur. */
.at-modale-boite { background: #F6F7F9; border: 1px solid #E4E7EB; border-radius: 10px;
  padding: .9rem 1rem 1rem; margin-bottom: 1rem; }
.at-modale-boite-titre { font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #6B7280; margin-bottom: .7rem; line-height: 1.4; }
.at-champ-plein { display: block; font-size: .8rem; color: #4A525C; margin-bottom: .6rem; }
.at-champ-plein input, .at-modale-boite .at-modale-grille input,
.at-modale-boite .at-modale-grille select { width: 100%; margin-top: .25rem;
  padding: .55rem .7rem; border: 1px solid #D6DADF; border-radius: 8px; font-size: .88rem;
  background: #fff; box-sizing: border-box; }
.at-modale-boite .at-modale-grille { margin-bottom: 0; }

/* ⭐⭐ LE RETOUR, DANS UN CADRE DE COULEUR — demandé par Julien le 18/09/2026.
   ⚠️ UNE SEULE définition de `.at-retour` dans toute la feuille : elle était
   posée deux fois, la première jamais vue puisque la seconde l'écrasait déjà
   — exactement le piège qui a mordu plusieurs fois aujourd'hui. Fusionnées ici. */
.at-retour { margin: 0 0 .7rem; }
.at-retour a { display: inline-flex; align-items: center; gap: .3rem;
  font-size: 1.05rem; font-weight: 600; color: #FFFFFF; text-decoration: none;
  background: var(--at-cyan); border-radius: 8px; padding: .45rem .9rem; }
.at-retour a:hover { background: #0089BD; }

/* La barre d'actions en haut d'une fiche : ce qu'on vient faire, avant ce
   qu'on vient lire. */
.at-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 1.2rem; }

/* ⚠️ La colonne de droite est étroite : un formulaire en ligne y déborde.
   Dans un encadré, les champs se rangent les uns sous les autres. */
.bq-bloc .bq-role-form { display: block; }
.bq-bloc .bq-role-form input[type="text"],
.bq-bloc .bq-role-form input[type="url"],
.bq-bloc .bq-role-form input[type="number"],
.bq-bloc .bq-role-form select { width: 100%; margin: .3rem 0; box-sizing: border-box; }
.bq-bloc .bq-role-form button { width: 100%; margin-top: .4rem; }

/* ─────────── une ligne de fichier d'impression ───────────
   ⚠️ Elle portait quatre contrôles empilés sans structure : le nom, un lien
   « Contrôler » stylé en bouton de rôle, et deux formulaires en vrac. Chacun
   avait été ajouté séparément, et ça se voyait. */
.bq-depot-liste { list-style: none; margin: 0; padding: 0; }
.at-fichier { border: 1px solid #E4E7EB; border-radius: 10px; padding: .8rem .9rem;
  margin: 0 0 .7rem; background: #fff; }
.at-fichier-tete { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.at-fichier-nom { font-weight: 600; word-break: break-all; min-width: 0; }
.at-fichier-etat { font-size: .74rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: .12rem .45rem; border-radius: 20px;
  background: #EEF1F4; color: #5A6472; white-space: nowrap; }
.at-fichier-etat.et-accepte { background: #E4F4E9; color: #1B6B37; }
.at-fichier-etat.et-refuse  { background: #FDECEF; color: #9B1B36; }
.at-fichier-etat.et-en_controle { background: #FDF4E3; color: #6B4E12; }
.at-fichier-meta { margin: .25rem 0 0; font-size: .8rem; color: #6A737C; }
.at-fichier-motif { margin: .4rem 0 0; font-size: .82rem; color: #9B1B36;
  background: #FDECEF; border-radius: 7px; padding: .35rem .5rem; }

/* La barre d'actions : tout sur une ligne quand ça tient, sinon ça passe
   dessous — jamais en escalier. */
.at-fichier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #E4E7EB; }
.at-fichier-actions form { display: flex; align-items: center; gap: .35rem; margin: 0; }
.at-fichier-actions select,
.at-fichier-actions input[type="text"] { padding: .32rem .45rem; border: 1px solid #CBD2DA;
  border-radius: 6px; font: inherit; font-size: .84rem; max-width: 15rem; }

/* Le verdict du contrôle automatique, à côté de l'état du studio. Deux
   pastilles côte à côte : l'une dit ce que l'atelier a décidé, l'autre ce que
   la machine a mesuré. */
.at-fichier-etat.vd-ok        { background: #E4F4E9; color: #1B6B37; }
.at-fichier-etat.vd-attention { background: #FDF4E3; color: #6B4E12; }
.at-fichier-etat.vd-probleme  { background: #FDECEF; color: #9B1B36; }

/* ⚠️ Les listes déroulantes étaient illisibles : `max-width: 15rem` les
   écrasait, et « Ajouter fond perdu et traits de coupe » n'y tenait pas. On
   les laisse prendre la largeur de leur contenu. */
.at-fichier-actions select { max-width: none; width: auto; }
.at-fichier-actions input[type="text"] { min-width: 12rem; }

/* ------------------------------------------- fiche en colonnes (lignes, fichiers)
   Le modèle demandé par Julien le 18/09/2026 : un bandeau de titre, un tableau
   aéré, chaque valeur dans son cadre, et les totaux en encart à droite. */
.at-fiche { background:var(--at-blanc); border:1px solid var(--at-bord); border-radius:10px;
  overflow:hidden; box-shadow:var(--at-ombre); margin:1.25rem 0; }
.at-fiche-tete { background:#EEF3F8; border-bottom:1px solid var(--at-bord);
  padding:.55rem .9rem; font-size:.74rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#34404D; }
.at-fiche-corps { padding:.9rem; }
.at-fiche-scroll { overflow-x:auto; }

/* ⚠️ `at-cmd-lignes` et non `at-lignes` : ce dernier désigne déjà une <ul>
   dans la fiche client. Deux éléments très différents sous le même nom, et
   une règle écrite pour l'un finit un jour par déformer l'autre. */
.at-cmd-lignes { width:100%; border-collapse:collapse; }
.at-cmd-lignes th, .at-cmd-lignes td { padding:.45rem .5rem; vertical-align:middle; text-align:left; }
.at-cmd-lignes thead th { font-size:.7rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--at-gris); border-bottom:1px solid var(--at-bord);
  padding-bottom:.55rem; white-space:nowrap; }
.at-cmd-lignes tbody tr + tr td { border-top:1px solid #EDF1F5; }
.at-cmd-lignes .n { text-align:right; }
.at-cmd-lignes .n .at-champ { margin-left:auto; }

/* Chaque valeur dans un cadre doux : on distingue la donnée de son étiquette
   sans tracer de grille, qui alourdirait un écran déjà dense. */
.at-champ { display:block; background:#F5F8FB; border:1px solid #E4EAF1; border-radius:7px;
  padding:.34rem .55rem; font-size:.88rem; margin:.15rem 0; white-space:nowrap; }
.at-champ-large { white-space:normal; }
.at-champ-court { width:3.4rem; text-align:center; }
.at-champ-doux { background:transparent; border-color:transparent; color:var(--at-gris);
  font-size:.82rem; padding-top:.1rem; padding-bottom:.1rem; }
.at-champ-alerte { background:#FDECEF; border-color:#F6C9D2; color:#9B1B36; font-weight:600; }

/* L'encart des totaux, aligné à droite sous les lignes. */
.at-totaux { margin:0 0 1.25rem auto; max-width:320px; background:#F7FAFD;
  border:1px solid #E4EAF1; border-radius:9px; padding:.55rem .8rem; }
.at-totaux div { display:flex; justify-content:space-between; gap:1rem; padding:.3rem 0;
  font-size:.9rem; color:#42505F; }
.at-totaux .at-totaux-ttc { border-top:1px solid var(--at-bord); margin-top:.35rem;
  padding-top:.5rem; font-size:1.12rem; font-weight:700; color:var(--at-noir); }
.at-totaux .at-totaux-ttc span:last-child { color:var(--at-rouge); }

@media (max-width:640px) { .at-totaux { max-width:none; } }

/* Le numéro de ligne : c'est le repère qui ouvre le nom du fichier
   d'impression (« 1-pvc-expanse-3 »). Il doit se lire d'un coup d'œil. */
.at-cmd-lignes th.at-rang, .at-cmd-lignes td.at-rang { width:2.6rem; text-align:center; padding-right:.2rem; }
.at-rang-pastille { display:inline-grid; place-items:center; width:1.7rem; height:1.7rem;
  border-radius:50%; background:var(--at-noir); color:#fff; font-size:.82rem; font-weight:700; }
.at-fichier-prod { display:inline-block; background:#14161A; color:#8FE3FF; border-radius:6px;
  padding:.16rem .45rem; font-size:.78rem; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.at-fichier-nom-prod { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem; }

/* ⚠️⚠️ LA CARTE FICHIER SE DÉPLIAIT EN RANGÉE. `.bq-depot-liste li{display:flex}`
   vient de la feuille de la BOUTIQUE, chargée avant celle-ci, et sa spécificité
   (0,1,1) passe devant `.at-fichier` (0,1,0) : nom, méta et actions se mettaient
   côte à côte, et la barre d'actions filait sous la colonne de droite, coupée.
   On reprend la main par la spécificité, pas par `!important`. */
/* ⚠️ La carte redevient une RANGÉE, mais volontairement cette fois : contenu
   à gauche, verdict à droite. À l'origine elle héritait d'un `display:flex` de
   `boutique.css` qui mettait nom, méta et boutons côte à côte — d'où le
   `display:block` posé ici. On reprend la main avec une structure voulue. */
.bq-depot-liste li.at-fichier { display: flex; align-items: flex-start; gap: 1.2rem; }
.at-fichier-corps { flex: 1; min-width: 0; }

/* ⚠️ Un enfant de grille vaut `min-width:auto` : il refuse de devenir plus
   étroit que son contenu. C'est lui qui pousse sous la colonne voisine, même
   quand la piste est déclarée `minmax(0, 1fr)`. */
.bq-atelier > div { min-width: 0; }
/* ⚠️ `.at-totaux` est EXCLU d'ici : il a déjà son `max-width:320px`, et une
   règle de même spécificité écrite plus bas l'écrasait — l'encart des
   totaux s'étalait sur toute la colonne. Défaut que j'ai introduit en
   corrigeant le débordement, vu sur le banc avant de le livrer. */
.at-fiche, .at-fichier { max-width: 100%; }
.at-fichier-actions { max-width: 100%; }
.at-fichier-actions form { flex-wrap: wrap; max-width: 100%; }
.at-fichier-actions select { max-width: 100%; }

/* ------------------------------------------------- réglages en grille
   Huit valeurs d'un mot ne justifient pas huit pleines largeurs empilées.
   `auto-fit` décide du nombre de colonnes selon la place : trois sur un grand
   écran, deux sur un portable, une sur mobile — sans point de rupture à tenir. */
.pa-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .2rem 1.4rem; align-items: stretch; margin-top: .4rem; }
/* ⚠️ `stretch` + colonne flex + `margin-top:auto` sur le bouton : les textes
   d'aide n'ont pas la même hauteur, et sans cela les « Enregistrer » d'une
   même rangée se retrouvaient à trois hauteurs différentes. Une rangée doit se
   lire comme une rangée. */
.pa-grille .pa-reglage { display: flex; flex-direction: column;
  padding: .7rem 0; border-top: 1px solid var(--at-bord); min-width: 0; }
.pa-grille .pa-reglage label { display: block; margin-bottom: .1rem; }
.pa-grille .pa-reglage .at-note { margin: 0 0 .4rem; font-size: .78rem; }
.pa-grille .pa-reglage input[type="text"] { width: 100%; max-width: none; }
/* `auto` en haut : le bouton descend au bas de la case, donc au bas de la
   rangée. ⚠️ UNE SEULE règle pour ce sélecteur — j'en avais écrit une
   seconde plus haut, que celle-ci écrasait en silence (même spécificité,
   règle postérieure). Vérifié par `getComputedStyle`, pas à l'œil. */
.pa-grille .pa-reglage p:last-child { margin: auto 0 0; }

/* ---------------------------------------------- utilisateurs : une ligne chacun
   Les droits ne s'ouvrent qu'au clic. Le résumé doit donc porter l'essentiel :
   qui, quelle adresse, où il en est, et combien de droits — sinon il faut tout
   déplier pour trouver quelqu'un. */
.at-pligne { padding: 0; }
.at-pl-det > summary { display: grid; align-items: center; gap: .3rem 1rem;
  /* ⚠️ CINQ colonnes pour quatre `span` : le chevron est un `::after`, donc un
     élément de grille comme les autres. Avec quatre pistes il repassait à la
     ligne, sous le nom. */
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto 1rem;
  padding: .7rem .9rem; cursor: pointer; list-style: none; }
.at-pl-det > summary::-webkit-details-marker { display: none; }
/* Le chevron est dessiné en CSS : une image de plus à charger pour une flèche,
   et un caractère unicode ne tourne pas à l'ouverture. */
.at-pl-det > summary::after { content: ""; width: .5rem; height: .5rem; justify-self: end;
  border-right: 2px solid var(--at-gris); border-bottom: 2px solid var(--at-gris);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.at-pl-det[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.at-pl-det > summary:hover { background: #F7F9FB; }
.at-pl-det[open] > summary { border-bottom: 1px solid var(--at-bord); background: #F7F9FB; }

/* L'identifiant : en chiffres à chasse fixe et alignés à droite, pour que la
   colonne reste droite quand on passe de #9 à #142. */
/* L'identifiant doit se lire : c'est lui qu'on cite au téléphone ou dans un
   message. En gris pâle il passait inaperçu. */
.at-pl-id { font-variant-numeric: tabular-nums; font-size: .82rem; font-weight: 600;
  color: #42505F; min-width: 2.6rem; text-align: right; }
.at-pl-nom { font-weight: 600; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.at-pl-ident { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .84rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pl-mail, .at-pl-tel, .at-pl-etat { color: var(--at-gris); font-size: .86rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-pl-droits { font-size: .78rem; font-weight: 600; white-space: nowrap;
  background: var(--at-fond); border: 1px solid var(--at-bord);
  border-radius: 999px; padding: .12rem .55rem; color: #42505F; }

.at-pl-corps { padding: .9rem; }
.at-pl-pied { margin-top: .9rem; }
.at-pl-suspendre { margin-top: .6rem; }

/* Sous 720 px le résumé passe en deux lignes plutôt que d'écraser les colonnes
   jusqu'à les rendre illisibles. */
@media (max-width: 720px) {
  .at-pl-det > summary { grid-template-columns: auto minmax(0, 1fr) 1rem; }
  .at-pl-ident, .at-pl-mail, .at-pl-tel { grid-column: 2 / -1; }
  .at-pl-etat, .at-pl-droits { grid-column: 1 / -1; justify-self: start; }
}

/* ------------------------------------- utilisateurs : rangée + actions à droite
   Le dépliant occupe la largeur, les trois actions sont posées à côté de lui et
   NON dans le `<summary>` : un bouton dans un résumé déplie la ligne quand on
   le presse, et on désactive un accès sans l'avoir voulu. */
.at-pl-rangee { display: flex; align-items: flex-start; gap: .5rem; }
.at-pl-det { flex: 1; min-width: 0; }
.at-pl-actions { display: flex; align-items: center; justify-content: flex-end;
  gap: .25rem; flex: none; width: var(--at-actions);
  padding: .55rem .7rem .55rem 0; }
.at-pl-actions form { margin: 0; }
.at-pl-act { display: inline-block; font: inherit; font-size: .8rem; line-height: 1.2;
  padding: .3rem .55rem; border: 1px solid var(--at-bord); border-radius: 6px;
  background: var(--at-blanc); color: #42505F; text-decoration: none; cursor: pointer;
  white-space: nowrap; }
.at-pl-act:hover { border-color: var(--at-cyan); color: var(--at-cyan); }
.at-pl-act.danger:hover { border-color: var(--at-rouge); color: var(--at-rouge); }
/* Une action impossible reste VISIBLE mais éteinte : la faire disparaître
   donnerait des rangées qui n'ont pas les mêmes boutons, donc illisibles. */
.at-pl-act.vide { color: #B6BEC7; border-style: dashed; cursor: not-allowed; }
.at-pl-act.vide:hover { border-color: var(--at-bord); color: #B6BEC7; }

/* L'en-tête reprend EXACTEMENT la grille du résumé, plus la place des actions. */
/* ⚠️ L'EN-TÊTE DOIT ÊTRE DÉCOUPÉ COMME LA LIGNE, sinon ses libellés ne tombent
   pas au-dessus de leurs colonnes : le sommaire d'une ligne est plus étroit que
   la carte, puisque les actions lui prennent la droite. On réserve donc la même
   largeur fixe des deux côtés — `--at-actions` — et les deux grilles coïncident. */
:root { --at-actions: 14.5rem; }
.at-pl-entete { display: flex; gap: .5rem; align-items: center;
  margin: 1.2rem 0 .35rem; padding: .3rem 0 .45rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--at-gris); }
.at-pl-entete-cols { flex: 1; min-width: 0; display: grid; align-items: center; gap: .3rem 1rem;
  grid-template-columns: auto minmax(0, 1.5fr) minmax(0, 1.4fr) minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1.1fr) auto 1rem;
  padding: 0 .9rem; }
.at-pl-entete-actions { flex: none; width: var(--at-actions); padding-right: .7rem;
  text-align: right; }
@media (max-width: 720px) { .at-pl-entete { display: none; } }

/* Le panneau de suppression : rouge, parce qu'il est définitif. */
.at-pl-danger { border: 1px solid #F6C9D2; background: #FDF6F7; border-radius: 9px;
  padding: .8rem .9rem; margin-bottom: 1rem; }
.at-pl-danger h3 { font-size: 1.02rem; margin-bottom: .35rem; color: #9B1B36; }
.at-pl-danger p { font-size: .88rem; margin-bottom: .5rem; }
.at-pl-danger-actions { display: flex; align-items: center; gap: .9rem; }
.at-bouton-danger { background: var(--at-rouge); border-color: var(--at-rouge); color: #fff; }
.at-pl-modif { margin-bottom: 1rem; }

/* Un bouton éteint garde sa place et son mot : le faire disparaître change la
   barre d'actions d'une commande à l'autre, et on ne retrouve plus rien. */
.at-btn-eteint { color: #B6BEC7; border-style: dashed; cursor: not-allowed; }

/* Le bloc « état à côté du numéro » (règles `.at-h1-*`) a été SUPPRIMÉ le
   18/09/2026 : la frise le dit mieux, et deux affichages du même état finissent
   par diverger. Seule reste la mise en ligne du titre, utile par elle-même. */
.at-titre h1 { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }

/* --------------------------------------------- le client, en haut et en grand
   C'est pour lui qu'on produit, et c'est lui qu'on appelle quand un fichier
   pose problème : il n'avait rien à faire dans un encadré latéral. */
.at-client { margin: 0 0 1.4rem; }
.at-client-nom { font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0;
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.at-client-societe { font-size: 1.05rem; font-weight: 600; color: var(--at-gris); }
.at-client-joindre { margin: .25rem 0 0; display: flex; align-items: center;
  gap: 1.1rem; flex-wrap: wrap; font-size: 1.05rem; }
.at-client-joindre a { color: var(--at-cyan); text-decoration: none; }
.at-client-joindre a:hover { text-decoration: underline; }
.at-client-api { font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; background: #FDF4E3; color: #6B4E12;
  border-radius: 999px; padding: .15rem .6rem; }
/* ⭐⭐ 03/10/2026 : « Notification client final » — un mail part tout seul à
   cette adresse au changement de statut, l'atelier doit le voir avant de
   cliquer. Même forme de badge que `.at-client-api`, couleur distincte pour
   ne pas confondre les deux avertissements. */
.at-client-notif { font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; background: #E8F4FD; color: #0A5A80;
  border-radius: 999px; padding: .15rem .6rem; }
@media (max-width: 600px) { .at-client-nom { font-size: 1.25rem; } }

/* Le mode de livraison, plus gros et coloré : c'est lui qui dit si le colis
   part ou si le client vient. Deux couleurs franches, pour que l'exception —
   le retrait — se repère sans lire. */
/* ⚠️⚠️ SPÉCIFICITÉ. `boutique.css` pose `.bq-atelier-cote .bq-bloc h2`
   (0,3,1) : ma règle `.at-mode` (0,1,0) ne pesait rien et la taille de 1,45 rem
   n'était jamais appliquée — le titre restait à 1,25 rem sans que rien ne le
   signale. On reprend la main en nommant le même chemin, pas à coups de
   `!important`. */
.bq-atelier-cote .bq-bloc h2.at-mode { font-size: 1.45rem; line-height: 1.2;
  display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
/* « colis » à droite du mode, en gros lui aussi : c'est le mot qui dit de quoi
   parle l'encadré, il ne doit pas être une note de bas de page. */
/* ⚠️⚠️ `margin: 0` EST INDISPENSABLE. `boutique.css` donne à `.bq-mention` un
   `margin-top: 1.2rem` pour son usage à elle, et ma règle ne parlait que de
   police : la marge s'appliquait donc, et « colis » retombait un cran plus bas
   que « Expédition ». Redéfinir une classe venue d'une autre feuille oblige à
   reprendre TOUT ce qu'elle pose, pas seulement ce qu'on veut changer. */
.bq-atelier-cote .bq-bloc h2.at-mode .bq-mention { margin: 0; font-size: 1.7rem;
  font-weight: 700; letter-spacing: .01em; text-transform: none;
  color: var(--at-cyan); }
/* ⚠️ L'expédition en NOIR : c'est le cas normal, il n'a pas à se signaler.
   C'est le RETRAIT qui garde sa couleur — l'exception doit se repérer sans
   lire, et deux couleurs vives se seraient neutralisées. */
.at-mode-envoi   { color: var(--at-noir); }
.at-mode-retrait { color: #1B6B37; }

/* ------------------------------------------------- la bande du haut, resserrée
   Actions à gauche, client à droite, alignés sur le même axe. Chaque élément
   prenait auparavant toute la largeur avec sa propre marge : trois lignes
   empilées repoussaient le tableau d'un tiers d'écran. */
.at-bande { display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem; flex-wrap: wrap; margin: 0 0 1rem; }
.at-bande-gauche { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
/* ⚠️ Les marges des enfants sont remises à zéro ICI : `.at-actions` porte
   `margin: 0 0 1.2rem` pour son usage ailleurs, et `.at-client` 1.4rem — dans
   une bande alignée au milieu, ces marges décalent le contenu vers le haut. */
.at-bande .at-actions,
.at-bande .at-client { margin: 0; }
.at-bande .at-actions[style] { margin-top: 0 !important; }
.at-bande .at-client { text-align: right; margin-left: auto; }
.at-bande .at-client-nom,
.at-bande .at-client-joindre { justify-content: flex-end; }

/* La zone du titre se resserre elle aussi, sur cette page comme ailleurs :
   1,1 rem sous un titre, c'est une ligne de vide pour rien. */
.at-titre { margin-bottom: .7rem; }

@media (max-width: 760px) {
  /* Sur un écran étroit la bande se replie, et le client repasse à gauche :
     un texte aligné à droite sur une colonne unique se lit mal. */
  .at-bande .at-client { text-align: left; margin-left: 0; }
  .at-bande .at-client-nom,
  .at-bande .at-client-joindre { justify-content: flex-start; }
}

/* ------------------------------------------- la date d'expédition prévue
   Un délai (« 5 jours ouvrés ») oblige à compter de tête en sautant les
   week-ends ; une date se lit. Elle est donc en haut, et grosse. */
.at-dateexp { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin: 0; }
.at-dateexp-quoi { font-size: .78rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--at-gris); }
.at-dateexp-jour { font-size: 1.45rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--at-noir); }
.at-dateexp-note { font-size: .82rem; color: var(--at-gris); }
/* Partie : la prévision n'a plus d'objet, on montre le fait. */
.at-dateexp.partie .at-dateexp-jour { color: #1B6B37; }
.at-dateexp.partie .at-dateexp-quoi { color: #1B6B37; }
/* En retard : la date est dépassée et rien n'est parti. */
.at-dateexp.retard .at-dateexp-jour,
.at-dateexp.retard .at-dateexp-quoi,
.at-dateexp.retard .at-dateexp-note { color: var(--at-rouge); }

/* Les deux boutons du haut sur une même ligne. Ils vivent dans deux
   paragraphes séparés — conditions d'affichage différentes — d'où cette
   rangée qui les réunit sans toucher à leur logique. */
.at-actions-ligne { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.at-actions-ligne .at-actions { margin: 0; }

/* L'adresse de livraison, dans l'encadré Expédition. */
.at-exp-adresse { margin: 0 0 .8rem; line-height: 1.5; }
.at-exp-adresse a { color: var(--at-cyan); text-decoration: none; }
.at-exp-adresse a:hover { text-decoration: underline; }

/* ------------------------------- le verdict du studio, sur la ligne du fichier
   La liste se pose à droite des pastilles — on lit ce que la machine a mesuré,
   puis on tranche — et le motif se met juste dessous. Aucun bouton : choisir
   enregistre, et le motif se valide à la touche Entrée. */
/* ⚠️ `margin-left: auto` pousse le bloc à DROITE des pastilles, et la largeur
   du motif est bornée pour qu'il tienne sur la même ligne : à 16 rem il forçait
   un retour et le verdict se retrouvait sous le nom du fichier. */
.at-juger { display: flex; flex-direction: column; gap: .3rem; margin: 0;
  flex: none; align-items: flex-end; }
.at-juger-etat { font: inherit; font-size: .84rem; font-weight: 600;
  padding: .26rem 1.6em .26rem .5rem; border: 1px solid #CBD2DA; border-radius: 6px;
  background: var(--at-blanc); color: var(--at-noir); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #6A737C 50%),
                    linear-gradient(135deg, #6A737C 50%, transparent 50%);
  background-position: calc(100% - .9em) 55%, calc(100% - .62em) 55%;
  background-size: .3em .3em, .3em .3em; background-repeat: no-repeat; }
.at-juger-etat:hover { border-color: var(--at-cyan); }
.at-juger-etat:focus-visible { outline: 2px solid var(--at-cyan); outline-offset: 1px; }
.at-juger-motif { font: inherit; font-size: .82rem; padding: .26rem .5rem;
  border: 1px solid #CBD2DA; border-radius: 6px; width: 13rem; max-width: 100%; }
.at-juger-motif:focus-visible { outline: 2px solid var(--at-cyan); outline-offset: 1px; }

/* ------------------------------------------------ la frise des états
   Sur le modèle des devis Planeo Dev : on voit où en est la commande et ce
   qu'il reste. Chaque étape est un bouton — le clic y conduit. */
/* ⚠️ Rembourrage ÉGAL en haut et en bas : avec `.7rem` d'un côté et une marge
   de `1.4rem` de l'autre, la frise n'était pas centrée dans sa bande — elle
   flottait vers le haut. */
.at-frise { display: flex; align-items: center; gap: 0; flex-wrap: wrap;
  margin: 0 0 .5rem; padding: .95rem 0; border-top: 1px solid var(--at-bord); }
.at-etape { display: flex; align-items: center; gap: .5rem; flex: 0 1 auto;
  background: none; border: 0; padding: .2rem .5rem .2rem 0; font: inherit;
  font-size: 1.02rem; color: var(--at-gris); cursor: pointer; text-align: left;
  min-width: 0; position: relative; }
/* Le trait qui relie les étapes, tiré depuis chacune vers la suivante — un
   filet arrondi plutôt qu'une ligne plate, vert une fois l'étape franchie. */
.at-etape::after { content: ""; flex: 1; height: 3px; border-radius: 999px;
  background: var(--at-bord); margin-left: .3rem; min-width: 1rem; transition: background .2s; }
.at-etape.faite::after, .at-etape.ici::after { background: #8FD4A8; }
.at-etape:last-of-type::after, .at-etape.annulee::after { display: none; }
.at-etape-num { display: inline-grid; place-items: center; width: 1.85rem; height: 1.85rem;
  flex: none; border-radius: 50%; border: 1px solid var(--at-bord);
  font-size: .88rem; font-weight: 700; background: var(--at-blanc); }
.at-etape-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* L'étape COURANTE se lit de loin : c'est la seule information qu'on cherche
   en ouvrant la page. Les autres ne sont là que pour situer. */
.at-etape.ici { color: var(--at-noir); font-weight: 700; font-size: 1.12rem; }
.at-etape.ici .at-etape-num { background: var(--at-noir); border-color: var(--at-noir);
  color: #fff; width: 2.05rem; height: 2.05rem; font-size: .95rem; }
.at-etape.faite { color: #1B6B37; }
.at-etape.faite .at-etape-num { background: #E4F4E9; border-color: #B7DFC5; color: #1B6B37; }
.at-etape.avenir { color: var(--at-gris); }
/* Une commande annulée : la frise entière s'éteint, elle ne raconte plus rien. */
.at-etape.abandon { color: #B6BEC7; }
.at-etape.abandon .at-etape-num { background: var(--at-fond); color: #B6BEC7; }

.at-etape:not(.ici):not(.abandon):hover .at-etape-num { border-color: var(--at-cyan); color: var(--at-cyan); }
.at-etape:not(.ici):not(.abandon):hover { color: var(--at-cyan); }
.at-etape:focus-visible { outline: 2px solid var(--at-cyan); outline-offset: 2px; border-radius: 6px; }

/* L'annulation, à l'écart et en rouge. */
.at-etape.annulee { flex: none; margin-left: auto; padding-left: 1.2rem;
  color: var(--at-rouge); font-size: .95rem; }
.at-etape.annulee:hover { color: #fff; }
.at-etape.annulee:hover .at-etape-nom { background: var(--at-rouge); color: #fff;
  border-radius: 999px; padding: .12rem .7rem; }
.at-etape.annulee.ici .at-etape-nom { background: #FDECEF; color: #9B1B36;
  border-radius: 999px; padding: .12rem .7rem; font-weight: 700; }

@media (max-width: 760px) {
  .at-frise { gap: .4rem 0; }
  .at-etape { flex: 1 1 45%; }
  .at-etape::after { display: none; }
  .at-etape.annulee { margin-left: 0; padding-left: 0; }
}

/* Le statut du règlement, dans son encadré — hors de la frise de production. */
.at-regl { display: flex; align-items: baseline; justify-content: space-between;
  gap: .8rem; flex-wrap: wrap; margin: 0 0 .2rem; }
.at-regl-etat { font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 999px; padding: .16rem .7rem; }
.at-regl-somme { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.at-regl.ok      .at-regl-etat { background: #E4F4E9; color: #1B6B37; }
/* ⚠️ Impayé en ROUGE, pas en orange : c'est une somme qui manque, pas une
   étape en cours. L'orange servait quand le libellé disait « en attente ». */
.at-regl.attente .at-regl-etat { background: #FDECEF; color: #9B1B36; }
/* Dans les listes, la pastille n'a pas de conteneur `.at-regl` pour la teinter :
   la classe posée sur la pastille elle-même doit donc suffire. */
.at-regl-etat.attente { background: #FDECEF; color: #9B1B36; }
.at-regl-etat.ok      { background: #E4F4E9; color: #1B6B37; }
.at-regl-etat.differe { background: #EAF7FD; color: #06607F; }
.at-regl.differe .at-regl-etat { background: #EAF7FD; color: #06607F; }
/* ⭐⭐ 25/09/2026 : remboursement total ou partiel — même orange que dans la
   liste, pour repérer l'encadré d'un coup d'œil parmi réglé/en attente/différé. */
.at-regl.rembourse      .at-regl-etat { background: #FFF1DE; color: #9A5B00; }
.at-regl-etat.rembourse { background: #FFF1DE; color: #9A5B00; }

/* ⚠️ `.section` vient de la feuille du SITE et porte 48 px de rembourrage en
   haut : une respiration juste sur une page de vitrine, du vide perdu sur un
   écran d'atelier où l'on veut voir la commande sans faire défiler. On la
   resserre pour l'atelier seulement — la vitrine et la boutique n'y touchent
   pas, puisque la règle est portée par `body.at`. */
body.at .section { padding-top: 1.1rem; }
body.at .at-titre { margin-bottom: .5rem; }

/* La colonne « expédition prévue » vire au rouge quand la date est passée :
   c'est la seule alerte de la liste, elle doit se voir en la balayant. */
.at-col-retard { color: var(--at-rouge); font-weight: 600; }
/* La pastille de règlement sert aussi dans les listes, pas seulement sur la
   fiche : mêmes couleurs, taille réduite. */
td .at-regl-etat { display: inline-block; font-size: .7rem; }
/* Le montant : chiffres alignés à droite et à chasse fixe, pour que la colonne
   se compare d'un regard. */
.at-col-montant { text-align: right; white-space: nowrap; font-weight: 600;
  font-variant-numeric: tabular-nums; }
/* Une date déjà passée se distingue d'une prévision : elle est en gris. */
.at-col-partie { color: var(--at-gris); }
/* Le préfixe qui distingue une date réelle d'une prévision. */
.at-date-marque { font-weight: 700; margin-right: .15rem; }
/* Le numéro d'expédition, sous la référence : à chasse fixe, on le compare et
   on le recopie sans se tromper de caractère. */
.at-tnt-numero { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--at-gris); font-size: .78rem; }

/* ------------------------------------------- la ligne de filtres d'un tableau
   Chaque champ sous la colonne qu'il filtre. Discrets au repos, ils ne doivent
   pas concurrencer les en-têtes. */
.at-filtres td { padding: .35rem .5rem .6rem; vertical-align: top; }
.at-filtres input, .at-filtres select {
  font: inherit; font-size: .8rem; padding: .22rem .4rem; width: 100%;
  border: 1px solid #D7DDE4; border-radius: 6px; background: var(--at-blanc); }
/* ⚠️ Une date a une largeur naturelle — jj/mm/aaaa et son icône — et rien de
   plus à montrer. À 100 % elle étirait sa colonne au détriment du client, dont
   le contenu est justement long (raison sociale, ville). On borne les dates et
   on laisse la place au client.
   Les colonnes 2 et 4 sont « Commandée » et « Expédition », la 3 « Client » :
   même ordre sur la page Commandes et sur Expéditions TNT, la règle sert aux
   deux. */
/* ⚠️ `display:block` : les deux dates d'une même colonne — du et au — se
   plaçaient CÔTE À CÔTE, et la colonne réclamait donc deux fois leur largeur
   (274 px). Empilées, la colonne n'en demande qu'une, et la place revient au
   client. */
.at-filtres input[type="date"] { display: block; width: 8.6rem; max-width: 100%;
  margin-bottom: .2rem; }
/* ⚠️⚠️ DES CLASSES, PAS DES POSITIONS. `nth-child` visait la 2ᵉ et la 4ᵉ
   colonne en supposant le même ordre partout — vrai le temps où les deux
   tableaux avaient sept colonnes identiques, faux dès que « Ville » s'est
   glissée en 4ᵉ position sur Commandes pendant qu'Expéditions TNT gardait
   « Expédition » à cette place. Une classe posée sur la cellule vaut pour
   n'importe quel ordre, sur n'importe quel tableau. */
.at-filtres td.at-filtre-date  { width: 9.4rem; }
.at-filtres td.at-filtre-large { min-width: 16rem; }
.at-filtres input:focus-visible, .at-filtres select:focus-visible {
  outline: 2px solid var(--at-cyan); outline-offset: 1px; }
.at-filtres .btn { margin-top: .25rem; width: 100%; }
.at-filtres-effacer { display: inline-block; margin-top: .3rem; font-size: .78rem;
  color: var(--at-gris); }
.at-filtres-case { display: block; font-size: .74rem; color: var(--at-gris);
  margin-top: .25rem; cursor: pointer; }
.at-filtres-case input { width: auto; margin-right: .25rem; }
/* Le message d'absence, DANS le tableau : l'en-tête et les filtres restent. */
.at-vide { text-align: center; color: var(--at-gris); padding: 1.6rem 1rem; }

/* ------------------------------------------------- les compteurs d'en-tête
   Deux chiffres qu'on lit avant tout le reste : combien de colis partis ne
   sont pas arrivés, et combien traînent depuis deux jours. Cliquables, ils
   mènent à la liste correspondante. */
.at-compteurs { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.2rem; }
.at-compteur { display: flex; flex-direction: column; gap: .1rem; min-width: 14rem;
  background: var(--at-blanc); border: 1px solid var(--at-bord); border-left: 4px solid var(--at-cyan);
  border-radius: 0 10px 10px 0;
  padding: .85rem 1.1rem; text-decoration: none; color: var(--at-noir);
  box-shadow: var(--at-ombre); }
.at-compteur:hover { border-color: var(--at-cyan); }
.at-compteur-nb { font-size: 2rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; }
.at-compteur-nom { font-size: .92rem; font-weight: 600; }
.at-compteur-note { font-size: .76rem; color: var(--at-gris); }
/* Zéro reste sobre : une pastille colorée sur un compteur vide crie pour rien. */
.at-compteur.vif    .at-compteur-nb { color: #9A6B12; }
.at-compteur.vif    { border-left-color: #D97706; }
.at-compteur.alerte .at-compteur-nb { color: var(--at-rouge); }
.at-compteur.alerte { border-color: #F6C9D2; border-left-color: var(--at-rouge); }
@media (max-width: 600px) { .at-compteur { min-width: 0; flex: 1 1 100%; } }

/* ------------------------------------------------- tableau de bord : états */
.at-etat-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .7rem .9rem; border: 1px solid var(--at-bord); border-radius: 9px;
  text-decoration: none; color: var(--at-noir); background: var(--at-blanc);
}
.at-etat-ligne:hover { border-color: var(--at-cyan); }
.at-etat-ligne strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.at-top-produits-cols {
  display: grid; grid-template-columns: 1fr auto auto; gap: .3rem 1.4rem;
  padding: .55rem 0; border-bottom: 1px solid #EDF0F3;
}
.at-top-produits-cols span:last-child, .at-top-produits-cols span:nth-child(2) {
  text-align: right; font-variant-numeric: tabular-nums;
}
.at-top-produits-ligne span:first-child { font-size: 1.05rem; font-weight: 600; }
.at-pl-entete .at-top-produits-cols {
  font-size: .7rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--at-gris); border-bottom: 2px solid var(--at-bord);
}
.at-top-produits-ligne:last-child { border-bottom: 0; }
.at-top-produits-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.at-top-produits-grille .at-carte { margin-bottom: 0; }

/* La ligne d'action des filtres : hors des colonnes, alignée à droite. */
.at-filtres-actions td { padding: .3rem .5rem .7rem; text-align: right;
  border-top: 1px dashed #E4E7EB; }
.at-filtres-actions .btn { width: auto; min-width: 8rem; }
.at-filtres-actions .at-filtres-effacer { margin-left: .8rem; }

/* ------------------------------------------------------------- statistiques
   ⭐ Page Statistiques (18/09/2026) : les m² vendus par matière, ce qu'ils
   rapportent et ce qu'ils coûtent.
   ⚠️ `tabular-nums` sur toute la colonne chiffrée : sans lui, les chiffres
   n'ont pas la même largeur d'une ligne à l'autre et les décimales cessent
   d'être alignées — c'est précisément ce qu'on vient lire dans ce tableau. */
.at-stats .at-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.at-stats thead .at-num { text-align: right; }
.at-th-note { display: block; font-weight: 500; font-size: .72rem; color: var(--at-gris); }
.at-stats .at-tendance { margin-left: .4rem; }
.at-stats input.at-champ { width: 6.2rem; text-align: right; padding: .3rem .45rem; }
.at-stats tfoot th, .at-stats tfoot td {
  border-top: 2px solid var(--at-bord); font-weight: 700; background: #F7F9FB;
}
/* Une ligne sans surface (petit format au lot, article monté) : présente, mais
   visiblement hors du calcul au mètre carré. */
.at-stats-hs th[scope="row"], .at-stats-hs td { color: var(--at-gris); }
.at-stats .bq-f-note { display: block; font-size: .72rem; color: var(--at-gris); font-weight: 400; }

/* ═══════════════════════════════════════════════════════════ EMAILING (22/09/2026)
   Le module a son préfixe `em-`. Il réutilise les cartes, compteurs, boutons
   et tableaux de l'atelier ; ce qui suit n'est que ce qui lui est propre :
   la barre secondaire, l'éditeur de blocs, l'aperçu, les pastilles d'état. */
.em-nav { display:flex; flex-wrap:wrap; gap:.25rem; margin:-.4rem 0 1rem; border-bottom:1px solid var(--at-bord); padding-bottom:.5rem; }
.em-nav a { padding:.35rem .7rem; border-radius:6px; font-size:.86rem; font-weight:600; color:var(--at-gris); text-decoration:none; }
.em-nav a:hover { background:#fff; color:var(--at-noir); }
.em-nav a.actif { background:var(--at-noir); color:#fff; }
.em-deux { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.em-deux-large { grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr); }
.em-deux-chat { grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); }
@media (max-width:1000px) { .em-deux, .em-deux-large, .em-deux-chat { grid-template-columns:1fr; } }
.em-carte-tete { display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.5rem; }
.em-carte-tete h2 { margin:0; }
.em-btn-court { width:auto; margin-top:0; padding:.45rem .9rem; font-size:.9rem; }
.em-inline { display:inline; }
.em-inline .at-bouton { margin-top:0; }
.at-lien-doux { background:none; border:0; padding:0; font:inherit; font-size:.86rem; color:var(--at-gris); text-decoration:underline; cursor:pointer; }
.at-lien-doux:hover { color:var(--at-noir); }
.em-badge { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.03em; padding:.14rem .5rem; border-radius:999px; vertical-align:middle; white-space:nowrap; }
.em-badge-vert { background:#E3F5EA; color:#14572F; }
.em-badge-orange { background:#FFF1DB; color:#8A4B00; }
.em-badge-rouge { background:#FDEDED; color:#8C1F1F; }
.em-badge-bleu { background:#E1F3FB; color:#065A79; }
.em-badge-gris { background:#EEF1F4; color:#4A535D; }
.em-table { font-size:.88rem; }
.em-table th, .em-table td { text-align:left; white-space:normal; vertical-align:top; }
.em-table td .at-note { font-size:.78rem; }
.em-url a { font-size:.8rem; word-break:break-all; }
.em-filtres { display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0 .8rem; }
.em-filtres a { padding:.3rem .65rem; border-radius:999px; border:1px solid var(--at-bord); background:#fff; font-size:.82rem; color:var(--at-gris); text-decoration:none; }
.em-filtres a span { font-weight:700; color:var(--at-noir); margin-left:.2rem; }
.em-filtres a.actif { background:var(--at-noir); color:#fff; border-color:var(--at-noir); }
.em-filtres a.actif span { color:#fff; }
.em-filtres-form { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.em-filtres-form input, .em-filtres-form select { font:inherit; font-size:.88rem; padding:.42rem .6rem; border:1px solid var(--at-bord); border-radius:6px; background:#fff; }
.em-filtres-form input[type=search] { min-width:240px; }
.em-court { width:7.5rem !important; }
.em-recherche { font:inherit; font-size:.88rem; padding:.4rem .6rem; border:1px solid var(--at-bord); border-radius:6px; }
.em-pagination { margin-top:.8rem; font-size:.88rem; color:var(--at-gris); }
.em-pagination a { margin-left:.6rem; }
.em-liens { margin:.3rem 0 0 1.1rem; font-size:.9rem; line-height:1.55; }
.em-liens li { margin-bottom:.3rem; }
.em-fiche { width:100%; font-size:.9rem; border-collapse:collapse; }
.em-fiche th { text-align:left; font-weight:600; color:var(--at-gris); width:38%; padding:.35rem .5rem .35rem 0; vertical-align:top; }
.em-fiche td { padding:.35rem 0; }
.em-code, .em-html { width:100%; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; padding:.6rem .7rem; border:1px solid var(--at-bord); border-radius:6px; background:#FAFBFC; }
.em-code-inline { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.78rem; word-break:break-all; background:#F3F5F7; padding:.15rem .35rem; border-radius:4px; }
.em-h3 { font-size:.95rem; margin:1rem 0 .4rem; }
.em-form-apercu { display:flex; justify-content:center; padding:1rem; background:#F3F5F7; border-radius:8px; }
.em-details { margin-top:.6rem; }
.em-details summary { cursor:pointer; font-size:.86rem; font-weight:600; color:var(--at-gris); }
.em-hr { border:0; border-top:1px solid var(--at-bord); margin:.9rem 0; }
.em-actions-cellule { white-space:nowrap; }
.em-ligne-active td { background:#F7FBFE; }
.em-journal { list-style:none; margin:0; padding:0; font-size:.84rem; }
.em-journal li { padding:.3rem 0; border-bottom:1px solid #EEF1F4; }
/* Cases et formulaires */
.em-cases { display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin:.3rem 0 .5rem; }
.em-case { display:flex; gap:.45rem; align-items:flex-start; font-size:.88rem; font-weight:500 !important; color:var(--at-noir) !important; cursor:pointer; }
.em-case input { margin-top:.2rem; }
.em-avec-bouton { display:flex; gap:.5rem; align-items:center; }
.em-avec-bouton input, .em-avec-bouton select { flex:1; min-width:0; font:inherit; padding:.5rem .65rem; border:1px solid var(--at-bord); border-radius:6px; background:#fff; }
.em-avec-bouton .at-bouton { margin-top:0; white-space:nowrap; }
.at-form textarea, .at-form select, .at-form input[type=number], .at-form input[type=tel], .at-form input[type=url], .at-form input[type=datetime-local], .at-form input[type=file] { font:inherit; padding:.55rem .7rem; border:1px solid var(--at-bord); border-radius:6px; background:#fff; width:100%; }
.at-form textarea:focus, .at-form select:focus { outline:2px solid var(--at-cyan); outline-offset:1px; }
.at-form .at-form-ligne label { display:block; }
.em-modes { display:flex; gap:.6rem; align-items:center; font-size:.86rem; }
.em-modes label { font-weight:600; color:var(--at-gris); cursor:pointer; }
/* Modèles */
.em-modeles-grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.7rem; }
.em-modeles-grille-large { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.em-modele-carte { display:flex; flex-direction:column; gap:.3rem; border:1px solid var(--at-bord); border-radius:8px; padding:.8rem; background:#fff; font-size:.88rem; }
.em-modele-carte iframe { width:100%; height:190px; border:1px solid #EEF1F4; border-radius:6px; background:#f2f4f6; pointer-events:none; }
.em-modele-carte .at-note { font-size:.78rem; flex:1; }
.em-modele-actions { display:flex; gap:.6rem; align-items:center; margin-top:.3rem; }
.em-modele-actions .at-bouton { margin-top:0; }
/* IA */
.em-ia-carte { border-left:4px solid var(--at-magenta); }
.em-ia-ligne { display:flex; gap:.5rem; }
.em-ia-ligne input { flex:1; font:inherit; padding:.5rem .65rem; border:1px solid var(--at-bord); border-radius:6px; }
.em-ia-ligne .at-bouton { margin-top:0; }
.em-objets { display:flex; flex-direction:column; gap:.3rem; margin:.4rem 0; }
.em-objets .em-palette-btn { text-align:left; }
.em-idee { border-top:1px solid #EEF1F4; padding:.7rem 0; font-size:.9rem; }
.em-idee p { margin:.25rem 0; }
.em-idee .at-bouton { margin-top:.3rem; }
.em-conseil { background:#FFF7E6; border-radius:6px; padding:.6rem .8rem; font-size:.88rem; margin-top:.6rem; }
.em-suggestions { display:flex; flex-direction:column; gap:.35rem; }
.em-suggestions .em-palette-btn { text-align:left; white-space:normal; }
/* Éditeur de blocs */
.em-blocs { display:flex; flex-direction:column; gap:.5rem; margin:.4rem 0 .8rem; }
.em-bloc { border:1px solid var(--at-bord); border-radius:8px; background:#fff; }
.em-bloc.em-drag { opacity:.5; }
.em-bloc.em-cible { outline:2px dashed var(--at-cyan); outline-offset:2px; }
.em-bloc-tete { display:flex; align-items:center; gap:.5rem; padding:.45rem .6rem; background:#F8FAFC; border-bottom:1px solid #EEF1F4; border-radius:8px 8px 0 0; font-size:.86rem; }
.em-bloc-poignee { cursor:grab; color:#9AA4AE; letter-spacing:-.1em; user-select:none; }
.em-bloc-actions { margin-left:auto; display:flex; gap:.2rem; }
.em-mini { font:inherit; font-size:.76rem; padding:.15rem .45rem; border:1px solid var(--at-bord); border-radius:5px; background:#fff; cursor:pointer; color:var(--at-gris); }
.em-mini:hover { border-color:var(--at-gris); color:var(--at-noir); }
.em-mini-danger:hover { border-color:var(--at-rouge); color:var(--at-rouge); }
.em-bloc-corps { padding:.55rem .6rem .35rem; }
.em-bloc-ligne { display:block; margin-bottom:.45rem; }
.em-bloc-ligne > span:first-child { display:block; font-size:.74rem; font-weight:600; color:var(--at-gris); margin-bottom:.15rem; }
.em-bloc-champ { width:100%; font:inherit; font-size:.9rem; padding:.42rem .55rem; border:1px solid var(--at-bord); border-radius:6px; background:#fff; }
.em-bloc-champ:focus { outline:2px solid var(--at-cyan); outline-offset:1px; }
textarea.em-bloc-champ { resize:vertical; line-height:1.45; }
.em-bloc-ia { display:flex; gap:.25rem; flex-wrap:wrap; margin-top:.3rem; }
.em-palette { display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.em-palette-btn { font:inherit; font-size:.8rem; padding:.3rem .6rem; border:1px solid var(--at-bord); border-radius:999px; background:#fff; cursor:pointer; color:var(--at-noir); }
.em-palette-btn:hover { border-color:var(--at-gris); }
.em-palette-btn.actif { background:var(--at-noir); color:#fff; border-color:var(--at-noir); }
/* Aperçu */
.em-col-cote { position:sticky; top:.8rem; }
@media (max-width:1000px) { .em-col-cote { position:static; } }
.em-apercu-cadre { background:#f2f4f6; border:1px solid var(--at-bord); border-radius:8px; padding:.6rem; display:flex; justify-content:center; overflow:auto; }
.em-apercu-cadre iframe { width:600px; max-width:100%; height:560px; border:0; background:#f2f4f6; transition:width .2s; }
.em-apercu-fixe { width:100%; height:640px; border:1px solid var(--at-bord); border-radius:8px; background:#f2f4f6; }
.em-spam-points { margin:.3rem 0 .5rem 1rem; font-size:.86rem; }
.em-spam-points li { margin-bottom:.2rem; padding-left:.2rem; }
.em-pt-rouge { color:#8C1F1F; } .em-pt-orange { color:#8A4B00; } .em-pt-gris { color:var(--at-gris); } .em-pt-vert { color:#14572F; }
.em-carte-envoi { border-left:4px solid var(--at-cyan); }
.em-barre-fixe { position:sticky; bottom:0; display:flex; gap:.8rem; align-items:center; padding:.6rem .9rem; margin-top:.6rem; background:rgba(243,245,247,.95); border-top:1px solid var(--at-bord); backdrop-filter:blur(4px); z-index:5; }
.em-barre-fixe .at-bouton { margin-top:0; }
.em-non-sauve { color:#8A4B00; font-weight:600; }
/* Segments */
.em-regle { display:flex; gap:.5rem; align-items:center; padding:.35rem 0; border-bottom:1px solid #EEF1F4; font-size:.88rem; }
.em-regle > span { flex:1; }
.em-regle input, .em-regle select { font:inherit; font-size:.86rem; padding:.35rem .5rem; border:1px solid var(--at-bord); border-radius:6px; }
.em-regle-badge { display:inline-block; background:#EEF1F4; border-radius:4px; padding:.05rem .4rem; font-size:.76rem; margin:.1rem .1rem 0 0; }
.em-compte-segment { margin:.6rem 0; font-size:.9rem; }
.em-compte-segment strong { font-size:1.2rem; }
.em-exemples { margin-top:1rem; }
/* Statistiques */
.em-heatmap table { border-collapse:separate; border-spacing:2px; font-size:.7rem; }
.em-heatmap th { font-weight:600; color:var(--at-gris); padding:0 .15rem; }
.em-heatmap td { width:1.35rem; height:1.35rem; border-radius:3px; background:rgba(0,174,239,calc(.08 + var(--i,0) * .92)); }
/* Assistant */
.em-chat { display:flex; flex-direction:column; min-height:520px; }
.em-chat-fil { flex:1; overflow-y:auto; max-height:60vh; display:flex; flex-direction:column; gap:.6rem; padding:.3rem .2rem .8rem; }
.em-msg { max-width:88%; padding:.65rem .9rem; border-radius:12px; font-size:.92rem; line-height:1.5; white-space:pre-wrap; position:relative; }
.em-msg-utilisateur { align-self:flex-end; background:var(--at-noir); color:#fff; border-bottom-right-radius:3px; }
.em-msg-assistant { align-self:flex-start; background:#F3F5F7; border-bottom-left-radius:3px; }
.em-msg-action { align-self:flex-start; background:#E3F5EA; color:#14572F; font-size:.84rem; }
.em-msg-erreur { background:#FDEDED; color:#8C1F1F; }
.em-msg-date { display:block; font-size:.68rem; opacity:.6; margin-top:.3rem; }
.em-chat-saisie { display:flex; gap:.5rem; align-items:flex-end; border-top:1px solid var(--at-bord); padding-top:.7rem; }
.em-chat-saisie textarea { flex:1; font:inherit; padding:.55rem .7rem; border:1px solid var(--at-bord); border-radius:8px; resize:none; }
.em-chat-saisie .at-bouton { margin-top:0; }
/* Catégories de contacts (23/09/2026) : la pastille prend la couleur choisie. */
.em-cat { --cat:#4A535D; background:color-mix(in srgb, var(--cat) 14%, #fff); color:var(--cat); border:1px solid color-mix(in srgb, var(--cat) 35%, #fff); }
.em-masse { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; padding:.5rem .7rem; background:#F8FAFC; border:1px solid var(--at-bord); border-radius:8px; margin-bottom:.6rem; font-size:.88rem; }
.em-masse select { font:inherit; font-size:.88rem; padding:.35rem .5rem; border:1px solid var(--at-bord); border-radius:6px; }
.em-masse .at-bouton { margin-top:0; }
.em-analyse { border-left:4px solid var(--at-cyan); }
.em-mapping select { font:inherit; font-size:.86rem; padding:.3rem .5rem; border:1px solid var(--at-bord); border-radius:6px; }
.em-mapping .at-bouton { margin-top:.5rem; margin-right:.6rem; }

/* ------------------------------------------------- audience (23/09/2026) */
/* Une seule série, une seule teinte : le cyan de la maison. Le texte reste en
   encre (noir, gris), jamais dans la couleur de la barre. */
.at-aud-direct { display:flex; align-items:flex-start; gap:1.6rem; flex-wrap:wrap; }
.at-aud-direct-bloc { min-width: 12rem; }
.at-aud-direct-nb { font-size:2.8rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.at-aud-pulse { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; background:var(--at-vert);
  box-shadow:0 0 0 0 rgba(31,138,76,.5); animation:at-aud-pulse 2s infinite; vertical-align:middle; margin-right:.45rem; }
.at-aud-pulse.eteint { background:var(--at-gris); animation:none; box-shadow:none; }
@keyframes at-aud-pulse { 0%{box-shadow:0 0 0 0 rgba(31,138,76,.5)} 70%{box-shadow:0 0 0 .6rem rgba(31,138,76,0)} 100%{box-shadow:0 0 0 0 rgba(31,138,76,0)} }
.at-aud-direct-pages { margin:0; padding:0; list-style:none; font-size:.88rem; flex:1 1 20rem; columns:2; column-gap:2rem; }
.at-aud-direct-pages li { display:flex; justify-content:space-between; gap:.6rem; padding:.2rem 0; border-bottom:1px dotted var(--at-bord); break-inside:avoid; }
.at-aud-periode { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-bottom:1rem; }
.at-aud-periode form { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; font-size:.9rem; }
.at-aud-periode input[type=date] { padding:.3rem .45rem; border:1px solid var(--at-bord); border-radius:6px; font:inherit; }
.at-aud-graph { width:100%; height:auto; display:block; }
.at-aud-graph .barre { fill:var(--at-cyan); }
.at-aud-graph g:hover .barre { fill:#0087BA; }
.at-aud-graph .grille { stroke:var(--at-bord); stroke-width:1; }
.at-aud-graph text { font-size:11px; fill:var(--at-gris); }
.at-aud-grille { display:grid; grid-template-columns:repeat(auto-fit, minmax(21rem, 1fr)); gap:1rem; margin-bottom:1rem; }
.at-aud-grille > .at-carte { margin-bottom:0; }
.at-aud-tableau { width:100%; border-collapse:collapse; font-size:.9rem; }
.at-aud-tableau th, .at-aud-tableau td { padding:.35rem .4rem; border-bottom:1px solid var(--at-bord); text-align:left; vertical-align:top; }
.at-aud-tableau thead th { font-size:.78rem; color:var(--at-gris); font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.at-aud-tableau .at-num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.at-aud-tableau tr.sous td { color:var(--at-gris); font-size:.82rem; border-bottom-style:dotted; }
.at-aud-tableau tr.sous td:first-child { padding-left:1.4rem; }
.at-aud-jauge { display:block; height:4px; background:var(--at-cyan); border-radius:2px; margin-top:.3rem; max-width:100%; }
.at-aud-chemin { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.8rem; word-break:break-all; color:var(--at-gris); }
.at-aud-parcours { list-style:none; margin:0; padding:0; }
.at-aud-parcours li { display:grid; grid-template-columns:4.6rem 1fr auto; gap:.8rem; padding:.5rem 0; border-bottom:1px solid var(--at-bord); align-items:baseline; }
.at-aud-parcours li.pause { display:block; color:var(--at-gris); font-style:italic; font-size:.84rem; padding:.25rem 0 .25rem 5.4rem; border-bottom:0; }
.at-aud-parcours .duree { color:var(--at-gris); font-size:.84rem; white-space:nowrap; }
.at-aud-heure { font-variant-numeric:tabular-nums; color:var(--at-gris); }
/* ⭐⭐⭐⭐⭐ 13/10/2026, signalé par Julien (« il n'y a plus la pastille
   verte ») : le <span class="at-aud-live"> posé dans atelier-audience.php
   n'avait jamais eu de règle CSS — invisible depuis sa création, pas une
   régression d'un changement récent. */
.at-aud-live {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71; margin-right: .4rem; vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(46, 204, 113, .25);
}
.at-aud-geste { display:inline-block; background:#FFF4E5; color:#9A6B12; border-radius:4px; padding:0 .45rem; font-size:.78rem; font-weight:600; margin-right:.3rem; }
.at-aud-geste.commande { background:#EAF7EF; color:#14572F; }
.at-aud-geste.inscription { background:#E8F4FD; color:#0B5A85; }
.at-aud-tag { display:inline-block; font-size:.76rem; color:var(--at-gris); background:var(--at-fond); border-radius:4px; padding:0 .35rem; margin-right:.2rem; white-space:nowrap; }
.at-aud-moi { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; font-size:.9rem; }
@media (max-width:700px){ .at-aud-direct-pages{columns:1} .at-aud-parcours li{grid-template-columns:4rem 1fr} .at-aud-parcours .duree{grid-column:2} }

/* ------------------------------------------- relancer un panier (23/09/2026)
   ⚠️ La remise et le bouton tiennent sur UNE ligne dans la cellule : empilés,
   la colonne doublait de hauteur sur chaque ligne du tableau. Et le bouton
   plein reprend sa largeur naturelle — `.at-bouton-plein` est à 100 % parce
   qu'il sert ailleurs de bouton de formulaire pleine largeur. */
.at-relance { display:flex; gap:.4rem; align-items:center; }
.at-relance select {
  font:inherit; font-size:.86rem; padding:.42rem .5rem; background:#fff;
  border:1px solid var(--at-bord); border-radius:6px;
}
.at-relance .at-bouton { margin-top:0; white-space:nowrap; padding:.45rem .8rem; font-size:.86rem; }
.at-relance .at-bouton-plein { width:auto; }

/* ⭐⭐ 25/09/2026 : le contenu du panier dans le parcours d'un visiteur —
   voir 052-audience-panier-detail.sql. */
.at-aud-panier-detail { display:block; font-size:.82rem; color:var(--at-gris); margin-top:.15rem; }

/* ═══════════════════ Écrire au client (mail libre / SMS), 25/09/2026 ═══════ */
.at-msg-onglets { display:flex; gap:.4rem; margin-bottom:.9rem; }
.at-msg-onglet {
  padding:.45rem 1rem; font:inherit; font-size:.88rem; font-weight:600; cursor:pointer;
  background:var(--at-fond); border:1px solid var(--at-bord); border-radius:6px; color:var(--at-gris);
}
.at-msg-onglet.actif { background:#1A1A1A; color:#fff; border-color:#1A1A1A; }
.at-msg-barre { display:flex; gap:.3rem; margin-bottom:.4rem; }
.at-msg-barre button {
  width:2rem; height:2rem; font:inherit; font-size:.85rem; cursor:pointer;
  background:#fff; border:1px solid var(--at-bord); border-radius:4px;
}
.at-msg-barre button:hover { background:var(--at-fond); }
.at-msg-editeur {
  min-height:9rem; padding:.7rem .8rem; border:1px solid var(--at-bord); border-radius:6px;
  font-size:.92rem; line-height:1.5; background:#fff; margin-bottom:.5rem;
}
.at-msg-editeur:focus { outline:2px solid var(--at-cyan); outline-offset:-1px; }
.at-msg-editeur p { margin:0 0 .6rem; }
.at-msg-archive { padding:.9rem 0; border-top:1px solid var(--at-bord); }
.at-msg-archive:first-of-type { border-top:0; padding-top:0; }
.at-msg-archive-corps { font-size:.9rem; line-height:1.5; }
.at-msg-archive-corps p { margin:0 0 .5rem; }

/* ═══════════════ Écrire au client — modale + aperçu, 25/09/2026 ═══════════ */
dialog.at-modale-msg { width: min(920px, 96vw); }
.at-msg-cote { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: .8rem; }
.at-msg-colonne { flex: 1 1 320px; min-width: 0; }
.at-msg-souslegende { font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--at-gris); margin: 0 0 .5rem; }
.at-msg-apercu-cadre { background: #F0F0F0; border-radius: 10px; padding: 1rem; }
.at-msg-apercu { background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.at-msg-apercu-barre { height: 5px;
  background: linear-gradient(90deg, #00AEEF 0 34%, #EC008C 34% 67%, #F5C300 67% 100%); }
.at-msg-apercu-corps { padding: 1.2rem 1.3rem; font-size: .88rem; line-height: 1.5; color: #1A1A1A; }
.at-msg-apercu-corps img { display: block; margin-bottom: .8rem; }
.at-msg-apercu-texte p { margin: 0 0 .6rem; }
.at-msg-apercu-bouton { display: inline-block; background: #1A1A1A; color: #fff;
  padding: .55rem 1rem; border-radius: 6px; font-weight: 600; font-size: .85rem; margin: .4rem 0; }
.at-msg-apercu-signature { color: #666; font-size: .82rem; margin: .8rem 0 0; }
.at-msg-apercu-pied { background: #1A1A1A; color: #B0B0B0; font-size: .72rem;
  text-align: center; padding: .7rem 1rem; }
@media (max-width: 700px) { .at-msg-cote { flex-direction: column; } }

/* ═══════════════ SAV (25/09/2026) : statut de la demande et fil de messages ═══════════════ */
.sav-statut { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:.16rem .7rem; display:inline-block; }
.sav-statut.nouveau  { background:#FDECEF; color:#9B1B36; }
.sav-statut.en_cours { background:#EAF7FD; color:#06607F; }
.sav-statut.resolu   { background:#E4F4E9; color:#1B6B37; }
.sav-statut.ferme    { background:#F0F0F0; color:#5A5A5A; }

/* ═══════════════ Messagerie unifiée (08/11/2026) : badge canal WhatsApp/Tchat ═══════════════ */
.gr-badge-canal { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:.16rem .7rem; display:inline-block; }
.gr-canal-whatsapp { background:#E4F4E9; color:#1B6B37; }
.gr-canal-tchat     { background:#EAF7FD; color:#06607F; }
.sav-fil { display:flex; flex-direction:column; gap:.8rem; margin:1rem 0; }
.sav-msg { max-width:80%; padding:.7rem .9rem; border-radius:10px; font-size:.9rem; line-height:1.5; }
.sav-msg.client  { align-self:flex-start; background:#F0F0F0; }
.sav-msg.atelier { align-self:flex-end; background:#EAF7FD; }
.sav-msg-meta { font-size:.72rem; color:var(--at-gris); margin-bottom:.3rem; }
.sav-msg div p { margin:0 0 .5rem; }
@media (max-width: 640px) { .sav-msg { max-width:100%; } }

/* ═══════════════ Planning expédition (12/10/2026) : agenda mensuel ═══════════════ */
.at-plan-entete { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 1.2rem; }
.at-plan-mois { font-size:1.15rem; min-width:10rem; text-align:center; }
.at-plan-grille { display:grid; grid-template-columns:repeat(7,1fr); gap:1px;
  background:var(--at-bord); border:1px solid var(--at-bord); border-radius:8px; overflow:hidden; }
.at-plan-entete-jour { background:var(--at-fond); color:var(--at-gris); font-size:.76rem;
  font-weight:700; text-transform:uppercase; letter-spacing:.04em; text-align:center; padding:.5rem 0; }
.at-plan-jour { background:var(--at-blanc); min-height:6rem; padding:.4rem; display:flex;
  flex-direction:column; gap:.3rem; }
.at-plan-jour.hors-mois { background:var(--at-fond); }
.at-plan-jour.hors-mois .at-plan-jour-num { color:#B7BFC7; }
.at-plan-jour.aujourdhui { box-shadow:inset 0 0 0 2px var(--at-cyan); }
.at-plan-jour.retard .at-plan-jour-num { color:var(--at-rouge); font-weight:700; }
.at-plan-jour-num { font-size:.82rem; font-weight:600; }
/* ⭐⭐ 12/10/2026, demandé par Julien — indicateur de charge par jour : un
   fond teinté sur toute la case (repérable même en survol rapide de la
   grille, pas seulement en lisant le chiffre) + un badge numérique à côté
   du quantième. Les trois niveaux restent lisibles même sur un jour
   « retard » ou « hors mois », jamais écrasés par ces autres états. */
.at-plan-jour-tete { display:flex; align-items:center; justify-content:space-between; }
.at-plan-jour-badge { font-size:.68rem; font-weight:700; background:var(--at-fond);
  color:var(--at-gris); border-radius:999px; padding:.05rem .4rem; }
.at-plan-jour.charge { background:#FFF7E6; }
.at-plan-jour.charge .at-plan-jour-badge { background:#F5C300; color:#5A4200; }
.at-plan-jour.surcharge { background:#FDECEC; }
.at-plan-jour.surcharge .at-plan-jour-badge { background:var(--at-rouge); color:#fff; }
.at-plan-badge-demo { display:inline-flex; align-items:center; justify-content:center;
  min-width:1.6rem; height:1.1rem; padding:0 .35rem; border-radius:999px; font-size:.68rem;
  font-weight:700; margin-left:.6rem; }
.at-plan-legende-sep { width:1px; height:1rem; background:var(--at-bord); margin:0 .2rem; }
.at-plan-badge-demo.charge { background:#F5C300; color:#5A4200; }
.at-plan-badge-demo.surcharge { background:var(--at-rouge); color:#fff; }
.at-plan-jour-liste { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.2rem; }
.at-plan-jour-liste li a { display:block; font-size:.74rem; font-weight:600; padding:.15rem .4rem;
  border-radius:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ⭐ 12/10/2026, demandé par Julien — deux couleurs selon `commandes.livraison`
   (champ déjà existant, voir atelier-commande.php) : le cyan de l'expédition
   reste celui du reste de l'atelier (TNT, compteurs), le retrait au dépôt
   prend le magenta de la marque — jamais la même couleur pour deux gestes
   différents. Un jour EN RETARD garde sa couleur de mode (on sait toujours
   si c'est à expédier ou à faire récupérer) mais gagne un liseré rouge,
   pour ne jamais perdre l'info "en retard" même sur un retrait. */
.at-plan-jour-liste li a.expedition { background:#EAF7FD; color:#06607F; }
.at-plan-jour-liste li a.expedition:hover { background:var(--at-cyan); color:#fff; }
.at-plan-jour-liste li a.retrait { background:#FCE9F4; color:#9B0E63; }
.at-plan-jour-liste li a.retrait:hover { background:var(--at-magenta); color:#fff; }
.at-plan-jour.retard .at-plan-jour-liste li a { box-shadow:inset 0 0 0 1.5px var(--at-rouge); }
.at-plan-legende { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.8rem; color:var(--at-gris); margin:0 0 1rem; }
.at-plan-puce { display:inline-block; width:.7rem; height:.7rem; border-radius:3px; margin-left:.6rem; }
.at-plan-puce:first-child { margin-left:0; }
.at-plan-puce.expedition { background:#EAF7FD; box-shadow:inset 0 0 0 1.5px #06607F; }
.at-plan-puce.retrait { background:#FCE9F4; box-shadow:inset 0 0 0 1.5px #9B0E63; }
@media (max-width: 700px) {
  .at-plan-grille { grid-template-columns:repeat(7,minmax(2.4rem,1fr)); font-size:.7rem; }
  .at-plan-jour { min-height:3.6rem; padding:.2rem; }
  .at-plan-jour-liste li a { font-size:.62rem; padding:.1rem .25rem; }
}

/* ═══════════════ Carrés par statut, au-dessus des onglets (12/10/2026) ═══════════════ */
.at-statuts-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));
  gap:.6rem; margin:0 0 1.2rem; }
.at-statut-carre { display:flex; flex-direction:column; gap:.3rem; padding:.85rem 1rem;
  background:var(--at-blanc); border:1px solid var(--at-bord); border-left:4px solid var(--at-bord);
  border-radius:8px; text-decoration:none; box-shadow:var(--at-ombre); transition:transform .1s, box-shadow .1s; }
.at-statut-carre:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(20,22,26,.1); }
.at-statut-nb { font-size:1.6rem; font-weight:700; line-height:1; color:var(--at-noir); }
.at-statut-nom { font-size:.78rem; color:var(--at-gris); font-weight:600; }
.at-statut-carre.actif { background:var(--at-noir); border-left-color:var(--at-cyan); }
.at-statut-carre.actif .at-statut-nb,
.at-statut-carre.actif .at-statut-nom { color:#fff; }
/* Une couleur par statut, cohérente avec `.bq-etat-*` (badges de la liste). */
.at-statut-a_payer        { border-left-color:#D97706; }
.at-statut-a_payer        .at-statut-nb { color:#8A6100; }
.at-statut-a_controler    { border-left-color:#0B5C8A; }
.at-statut-a_controler    .at-statut-nb { color:#0B5C8A; }
.at-statut-controle       { border-left-color:#06607F; }
.at-statut-controle       .at-statut-nb { color:#06607F; }
.at-statut-en_fabrication { border-left-color:var(--at-vert); }
.at-statut-en_fabrication .at-statut-nb { color:var(--at-vert); }
.at-statut-attente_expedition { border-left-color:#B38600; }
.at-statut-attente_expedition .at-statut-nb { color:#9A6B12; }
.at-statut-expediee       { border-left-color:#4A3FA8; }
.at-statut-expediee       .at-statut-nb { color:#4A3FA8; }
.at-statut-annulee        { border-left-color:var(--at-rouge); }
.at-statut-annulee        .at-statut-nb { color:var(--at-rouge); }
@media (max-width:700px) {
  .at-statuts-grille { grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr)); gap:.4rem; }
  .at-statut-carre { padding:.6rem .7rem; }
  .at-statut-nb { font-size:1.3rem; }
  .at-statut-nom { font-size:.7rem; }
}

/* ═══════════════ Vrai en-tête de tableau, page Commandes (12/10/2026) ═══════════════ */
/* ⭐ Demandé par Julien — l'en-tête se limitait à un filet sous du texte gris :
   difficile à distinguer de la première ligne de données en un coup d'œil.
   Scopé à `.bq-tableau-atelier` (atelier uniquement) : ne touche jamais les
   tableaux `.bq-tableau` du reste de la boutique ou de l'espace client. */
.bq-tableau-atelier thead th {
  background:var(--at-noir); color:#fff; border-bottom:none;
  padding:.7rem .6rem; font-size:.78rem; letter-spacing:.04em;
}
.bq-tableau-atelier thead { position:sticky; top:0; z-index:5; }
/* ⚠️⚠️ PAS DE SECONDE RÈGLE POUR `.at-filtres input/select` ICI — une
   complète existe déjà plus haut dans ce fichier (chaque champ en
   `width:100%`, EMPILÉ verticalement dans sa cellule avec le bouton
   « Filtrer » juste en dessous grâce à `margin-top`). Une redéfinir ici
   a cassé cet empilement et fait chevaucher le select Règlement, le
   champ max et le bouton — signalé par Julien avec capture d'écran,
   12/10/2026. Seul vrai besoin : un fond distinct sous les champs. */
.bq-tableau-atelier .at-filtres td {
  background:var(--at-fond); border-bottom:2px solid var(--at-bord);
}

/* ⭐⭐⭐⭐⭐ 13/10/2026, demandé par Julien : « refaire plus jolie l'en-tête de
   la page Catalogue » — même traitement visuel que `.bq-tableau-atelier`
   (en-tête sombre, fond distinct sous les filtres), mais SANS reprendre ses
   largeurs `nth-child` en pourcentage : elles sont calées sur les 6-8
   colonnes de Commandes, pas sur les 4 colonnes du Catalogue. Classe à part,
   posée en plus de `.bq-tableau` (jamais à la place). */
.bq-tableau-catalogue thead th {
  background:var(--at-noir); color:#fff; border-bottom:none;
  padding:.7rem .6rem; font-size:.78rem; letter-spacing:.04em;
}
/* ⚠️⚠️ PAS de `position:sticky` ici (contrairement à `.bq-tableau-atelier`) :
   combiné à `overflow:hidden` sur la carte qui l'entoure, il faisait
   ressortir le coin arrondi — un petit rectangle blanc visible au-dessus
   du bandeau noir dès que la page défilait (signalé par Julien, capture à
   l'appui, 13/10/2026). La liste Catalogue n'a pas besoin d'un en-tête
   figé : on arrondit directement les coins du tableau à la place. */
.bq-tableau-catalogue thead tr:first-child th:first-child { border-top-left-radius:9px; }
.bq-tableau-catalogue thead tr:first-child th:last-child  { border-top-right-radius:9px; }
.bq-tableau-catalogue .at-filtres td {
  background:var(--at-fond); border-bottom:2px solid var(--at-bord);
}

/* Colonne Produits (12/10/2026, remplace Ville) : plusieurs articles possibles
   par commande — jamais sur une seule ligne sans fin, on autorise le retour
   à la ligne et on borne la largeur. */
.at-col-produits { white-space:normal !important; font-size:.85rem; }
/* ⭐ 12/10/2026, demandé par Julien — la colonne Produits respire, les autres
   se resserrent. `table-layout:fixed` pour que les largeurs ci-dessous
   tiennent vraiment (sans ça, le navigateur les ignore dès qu'une cellule
   déborde). Largeurs en %, sur les 6 colonnes de la page Commandes (avec
   Montant/Règlement) ET les 5 des pages de production (sans elles) : les
   deux tableaux partagent `.bq-tableau-atelier`, donc les mêmes règles. */
.bq-tableau-atelier { table-layout:fixed; }
.bq-tableau-atelier th:nth-child(1), .bq-tableau-atelier td:nth-child(1) { width:8%; }
.bq-tableau-atelier th:nth-child(2), .bq-tableau-atelier td:nth-child(2) { width:7%; }
.bq-tableau-atelier th:nth-child(3), .bq-tableau-atelier td:nth-child(3) { width:14%; }
.bq-tableau-atelier th:nth-child(4), .bq-tableau-atelier td:nth-child(4) { width:34%; }
.bq-tableau-atelier th:nth-child(5), .bq-tableau-atelier td:nth-child(5) { width:9%; }
.bq-tableau-atelier th:nth-child(6), .bq-tableau-atelier td:nth-child(6) { width:10%; }
.bq-tableau-atelier th:nth-child(7), .bq-tableau-atelier td:nth-child(7) { width:9%; }
.bq-tableau-atelier th:nth-child(8), .bq-tableau-atelier td:nth-child(8) { width:9%; }
.bq-tableau-atelier td:nth-child(1), .bq-tableau-atelier td:nth-child(2),
.bq-tableau-atelier td:nth-child(5), .bq-tableau-atelier td:nth-child(6),
.bq-tableau-atelier td:nth-child(7), .bq-tableau-atelier td:nth-child(8) {
  overflow:hidden; text-overflow:ellipsis;
}

/* ⭐⭐⭐⭐⭐ 21/10/2026, demandé par Julien (« refaire les colonnes à
   l'équilibre, là c'est n'importe quoi ») — les pages d'expédition
   (/tnt/, /fedex/) réutilisaient `.bq-tableau-atelier`, dont les largeurs
   ci-dessus sont taillées pour les 8 colonnes de la page Commandes
   (notamment la 4e à 34%, pensée pour la colonne « Produits », bien plus
   longue que la colonne « Expédition » — une simple date — de ces pages-ci).
   Avec seulement 6 colonnes, ces règles retombaient sur les 4 premières
   nth-child, déséquilibrant tout le tableau. Classe dédiée, SES propres
   largeurs, sur les 6 colonnes réelles : Référence, Commandée, Client,
   Expédition, Statut, Statut transporteur. */
.bq-tableau-expeditions { table-layout:fixed; }
.bq-tableau-expeditions th:nth-child(1), .bq-tableau-expeditions td:nth-child(1) { width:13%; }
.bq-tableau-expeditions th:nth-child(2), .bq-tableau-expeditions td:nth-child(2) { width:9%; }
.bq-tableau-expeditions th:nth-child(3), .bq-tableau-expeditions td:nth-child(3) { width:19%; }
.bq-tableau-expeditions th:nth-child(4), .bq-tableau-expeditions td:nth-child(4) { width:9%; }
.bq-tableau-expeditions th:nth-child(5), .bq-tableau-expeditions td:nth-child(5) { width:13%; }
.bq-tableau-expeditions th:nth-child(6), .bq-tableau-expeditions td:nth-child(6) { width:37%; }
.bq-tableau-expeditions td:nth-child(1), .bq-tableau-expeditions td:nth-child(2),
.bq-tableau-expeditions td:nth-child(4), .bq-tableau-expeditions td:nth-child(5) {
  overflow:hidden; text-overflow:ellipsis;
}

/* ⭐⭐⭐⭐⭐ 13/10/2026, demandé par Julien : liste de suggestions produit,
   sous le champ de recherche de /commandes/nouvelle/. */
.at-suggestions {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  background: #fff; border: 1px solid var(--at-gris-clair, #ddd); border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); margin: .2rem 0 0; padding: .2rem 0;
  list-style: none; max-height: 240px; overflow-y: auto;
}
.at-suggestions li { padding: .45rem .7rem; cursor: pointer; font-size: .9rem; }
.at-suggestions li:hover { background: #F3F4F6; }

/* ------------------------------------------------ cartes ERP partagées
   (création commande/devis, fiche devis) — voir le commentaire du
   14/10/2026 ci-dessus. */
.nc-entete { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; margin-bottom: 1rem; }
.nc-entete-client, .nc-entete-infos, .nc-entete-totaux {
  margin-bottom: 0; border-left-width: 4px; border-left-style: solid; border-radius: 9px;
}
.nc-entete-client { flex: 2 1 420px; border-left-color: #00AEEF; }
.nc-entete-infos { flex: 1 1 280px; border-left-color: #EC008C; }
.nc-entete-totaux { flex: 1 1 260px; border-left-color: #F2994A; }
.nc-totaux-table { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.nc-totaux-table > div { display: flex; justify-content: space-between; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px solid var(--at-bord); }
.nc-totaux-table .nc-totaux-ttc { border-bottom: 0; padding-top: .5rem; border-top: 2px solid var(--at-noir); }
.nc-totaux-table .nc-totaux-ttc strong { font-size: 1.2rem; }
.nc-lignes-table { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.nc-lignes-table thead tr { background: var(--at-cyan); }
.nc-lignes-table th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  color: #fff !important; font-weight: 700; padding: .55rem .6rem; border-bottom: 2px solid var(--at-cyan); }
.nc-lignes-table th.n, .nc-lignes-table td.n { text-align: right; }
.nc-lignes-table td { padding: .6rem; border-bottom: 1px solid var(--at-bord); vertical-align: top; }
@media (max-width: 760px) { .nc-entete { flex-direction: column; } }

.dv-pastille-statut { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .85rem; padding: .3rem .8rem; border-radius: 999px; }
.dv-pastille-point { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.dv-pastille-statut-grande { font-size: 1.1rem; padding: .5rem 1.1rem; }
.dv-pastille-statut-grande .dv-pastille-point { width: .7rem; height: .7rem; }

.dv-bouton-action { background: #fff; border: 1px solid var(--at-bord) !important; color: var(--at-noir); }
.dv-bouton-action:hover { background: #F7FAFD; }