/* La pile livree porte la meme signature que tsintegration.ca. AGPLv3.
 *
 * Pourquoi ce fichier existe. La page d'accueil et la console avaient chacune leur
 * feuille de style en ligne, toutes deux en sombre, degradees et arrondies -- une
 * langue visuelle qui n'est celle d'aucune autre surface de l'entreprise. Le client
 * passe du site au produit en un clic ; si les deux ne se ressemblent pas, le produit
 * a l'air d'etre de quelqu'un d'autre.
 *
 * Les valeurs viennent de products/laravel/resources/css/app.css, « v3.1 Institutional
 * Redesign » : blanc, marine #26374a, vert de circuit #0AA98B. Depuis la refonte du
 * 2026-09-23 le site a quitte les angles vifs et les barres laterales de 4 px pour des
 * cartes a 14 px, une bordure pale et des boutons en pilule verte; le portail suit, sinon
 * le client change de maison en passant de la page d'abonnement a son propre service.
 * Les variantes de contraste (--accent-text, --muted-text) sont reprises telles quelles
 * avec leurs mesures : #0AA98B donne 2,97:1 sur blanc, sous le seuil AA de 4,5:1, et
 * c'est le genre d'erreur qui ne se voit pas tant qu'on ne la mesure pas.
 *
 * Polices auto-hebergees, pour le motif qui a fait les retirer du site : une feuille de
 * style Google envoie l'adresse IP de chaque visiteur a Google avant qu'il ait lu une
 * ligne, sur un produit dont l'argument est la souverainete des donnees. Lato et Noto
 * Sans sont sous licence SIL OFL 1.1, donc l'auto-hebergement est expressement permis.
 */

/* ── Polices ─────────────────────────────────────────────────────────────────
   Noto Sans n'embarque que le sous-ensemble « latin » : latin-ext pese 168 Ko par
   graisse contre 36 Ko, et tous les accents francais tiennent dans latin (U+0000-00FF
   plus U+0152-0153 pour l'oe lie). Lato garde les deux, ils font 5 Ko.
   Les plages unicode restent declarees : sans elles le navigateur telecharge la police
   avant de savoir s'il en a besoin. */
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/polices/lato-700-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/polices/lato-700-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap;
  src:url(/polices/lato-900-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }
@font-face { font-family:'Lato'; font-style:normal; font-weight:900; font-display:swap;
  src:url(/polices/lato-900-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+1E00-1E9F,U+1EF2-1EFF,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
/* UN seul fichier pour les trois graisses: Noto Sans est une police VARIABLE (axe
   wght 100-900, table fvar verifiee dans le woff2), et Google en sert le meme octet
   pour 400, 600 et 700. Les trois copies etaient identiques au md5 pres. Declarees
   en trois @font-face a graisse FIXE, le navigateur n'aurait pas su instancier l'axe:
   il aurait pris l'instance par defaut (400) et grassoye a la main le reste. */
@font-face { font-family:'Noto Sans'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(/polices/noto-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD; }

/* ── Jetons ──────────────────────────────────────────────────────────────────── */
:root {
  --bg:#ffffff; --bg2:#f1f4f7; --bg3:#e6eaef; --card:#ffffff;
  --border:#d1d5db; --border-hi:#9ca3af;
  --text:#222222; --text2:#4a4a4a;

  --navy:#26374a; --navy-dark:#1c2a38;
  --navy-dim:rgba(38,55,74,.08); --navy-bdr:rgba(38,55,74,.22);
  --blue:#284162; --blue-dim:rgba(40,65,98,.08); --blue-bdr:rgba(40,65,98,.22);
  --red:#b10e1e; --red-dim:rgba(177,14,30,.08); --green:#278400;
  /* Ambre : le TROISIEME etat d'un message. Un depassement de sieges n'est ni une
     erreur ni une reussite, et le peindre en rouge dirait au client que ses
     invitations ont echoue alors qu'elles viennent d'etre creees. 5,93:1 sur blanc,
     donc au-dessus du 4,5:1 exige du texte courant. */
  --ambre:#8a5a00; --ambre-dim:rgba(138,90,0,.09); --ambre-bdr:rgba(138,90,0,.30);

  /* Couleur de marque a 2,97:1 sur blanc : reservee au decoratif et aux grands titres
     (seuil 3:1). Tout texte courant prend --accent-text (4,88:1) ou --accent-on-dark
     (6,17:1 sur marine). */
  --accent:#0AA98B; --accent-text:#088069; --accent-on-dark:#2ECFAE;
  --accent-dim:rgba(10,169,139,.10); --accent-bdr:rgba(10,169,139,.28);
  --muted-text:#6b7280;

  --nav-h:56px; --container:1140px;
  --radius:8px; --radius-lg:14px; --border-doux:#e3e9ee;
  --shadow-card:0 1px 4px rgba(0,0,0,.10);
  --shadow-md:0 2px 8px rgba(0,0,0,.10);
  --transition:.15s ease;

  --font:'Noto Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Lato','Noto Sans',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'SF Mono','Segoe UI Mono','Roboto Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; }
body { font-family:var(--font); font-size:1rem; line-height:1.6;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; }
/* Le pied de page colle au bas de la fenetre quand la page est courte: sans cela un
   grand ecran montrait une bande vide sous le pied, a la couleur du fond. */
body { min-height:100vh; display:flex; flex-direction:column; }
body > main { flex:1 0 auto; }
img,svg { display:block; max-width:100%; }
ul,ol { list-style:none; }
a { color:var(--accent-text); }
code { font-family:var(--font-mono); font-size:.9em;
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:.1rem .35rem; }

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 1.5rem; }
@media (min-width:768px) { .container { padding:0 2.5rem; } }

/* ── Barre de marque ─────────────────────────────────────────────────────────
   Le verrou « > TSI / TREMBLAY » du site, et non le PNG : le logo large n'existe
   qu'en blanc sur fond sombre, et il se deforme des que la barre se retrecit. */
.site-nav { background:var(--navy); border-bottom:3px solid var(--accent); }
.nav-inner { height:var(--nav-h); display:flex; align-items:center;
  justify-content:space-between; gap:1.5rem; }
.brand-lockup { display:flex; align-items:center; gap:0; text-decoration:none;
  font-family:var(--font-heading); --brand-size:.95rem; }
.brand-mark { display:flex; align-items:center; gap:.14em; line-height:1;
  font-size:calc(var(--brand-size) * 1.45); font-weight:900; white-space:nowrap; }
.brand-chevron { color:var(--accent-on-dark); }
.brand-tsi { color:#fff; letter-spacing:.01em; }
.brand-slash { color:var(--accent-on-dark); font-weight:400; font-size:1.35em;
  line-height:1; margin-left:.08em; transform:translateY(-.04em); }
.brand-name { display:flex; flex-direction:column; align-items:flex-start;
  margin-left:.5rem; }
.brand-name .logo-text { color:#fff; font-size:var(--brand-size); font-weight:700;
  letter-spacing:.06em; line-height:1.05; }
.brand-name .logo-sub { color:rgba(255,255,255,.72); font-size:calc(var(--brand-size) * .5);
  font-weight:700; letter-spacing:.11em; line-height:1.2; }
.nav-domaine { color:rgba(255,255,255,.82); font-family:var(--font-mono);
  font-size:.78rem; letter-spacing:.01em; overflow-wrap:anywhere; text-align:right; }
@media (max-width:560px) { .brand-name .logo-sub { display:none; } .nav-domaine { display:none; } }

/* ── En-tete de page ─────────────────────────────────────────────────────────── */
.hero { background:linear-gradient(180deg,rgba(243,250,248,1) 0%,#fff 100%);
  border-bottom:1px solid var(--border-doux); padding:3rem 0 2.5rem; }
.hero h1 { font-family:var(--font-heading); font-weight:700; color:var(--navy);
  font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.2; letter-spacing:-.01em; }
.hero .chapeau { color:var(--text2); max-width:44rem; margin-top:1rem; }
.eyebrow { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em;
  color:var(--accent-text); background:var(--accent-dim); text-transform:uppercase;
  border-radius:999px; padding:.3rem .8rem; margin-bottom:.9rem; }

/* ── Sections ────────────────────────────────────────────────────────────────── */
.section { padding:1.75rem 0; }
.hero + .section { padding-top:2.5rem; }
.section:last-of-type { padding-bottom:3rem; }
.section > .container > h2 { font-family:var(--font-heading); font-weight:700;
  font-size:1.35rem; color:var(--navy); letter-spacing:-.01em; margin-bottom:1.5rem; }

/* ── Tuiles de service ───────────────────────────────────────────────────────── */
/* auto-fit et non auto-fill: deux tuiles prennent toute la largeur au lieu de
   laisser une troisieme colonne vide a droite, qui se lisait comme un service
   manquant. */
.grille { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr)); }
.tuile { display:flex; gap:1rem; align-items:flex-start;
  background:var(--card); border:1px solid var(--border-doux);
  border-radius:var(--radius-lg); padding:1.25rem 1.35rem;
  text-decoration:none; color:inherit;
  transition:box-shadow var(--transition), border-color var(--transition), transform var(--transition); }
.tuile:hover,.tuile:focus-visible { box-shadow:var(--shadow-md);
  border-color:var(--accent-bdr); transform:translateY(-2px); outline:none; }
.tuile .ico { width:40px; height:40px; flex:none; border-radius:10px;
  background:var(--accent-dim); padding:6px; }
.tuile .txt { min-width:0; }
.tuile .nom { display:block; font-size:1.05rem; font-weight:700; color:var(--navy);
  letter-spacing:-.01em; }
.tuile .desc { display:block; font-size:.88rem; color:var(--text2); line-height:1.6;
  margin:.3rem 0 .55rem; }
.tuile .adr { display:block; font-family:var(--font-mono); font-size:.76rem;
  color:var(--accent-text); overflow-wrap:anywhere; }

/* ── Appel a l'action ────────────────────────────────────────────────────────── */
.appel { display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  flex-wrap:wrap; background:rgba(243,250,248,1); border:1px solid var(--accent-bdr);
  border-radius:var(--radius-lg); padding:1.4rem 1.5rem; }
.appel h2 { font-family:var(--font-heading); font-size:1.15rem; font-weight:700;
  color:var(--navy); margin-bottom:.3rem; }
.appel p { color:var(--text2); font-size:.92rem; max-width:36rem; }

/* ── Boutons ─────────────────────────────────────────────────────────────────── */
.btn-primary,.btn-outline { display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.5rem; font-family:var(--font); font-weight:700; font-size:.9rem;
  text-decoration:none; border-radius:999px; border:2px solid var(--navy);
  cursor:pointer; white-space:nowrap;
  transition:background var(--transition), border-color var(--transition), color var(--transition); }
.btn-primary { background:var(--accent-text); border-color:var(--accent-text); color:#fff; }
.btn-primary:hover:not(:disabled) { background:#06604f; border-color:#06604f; }
.btn-outline { background:transparent; color:var(--navy); }
.btn-outline:hover:not(:disabled) { background:var(--navy-dim); }
.btn-primary:disabled,.btn-outline:disabled { opacity:.45; cursor:default; }
.btn-lien { background:none; border:none; padding:0; font:inherit; cursor:pointer;
  color:var(--accent-text); text-decoration:underline; }

/* ── Premiers pas ────────────────────────────────────────────────────────────── */
.etapes { counter-reset:etape; display:grid; gap:.75rem; }
.etapes li { counter-increment:etape; position:relative;
  background:var(--card); border:1px solid var(--border-doux);
  border-radius:var(--radius-lg);
  padding:1rem 1.25rem 1rem 3.6rem; font-size:.94rem; color:var(--text2); }
.etapes li::before { content:counter(etape); position:absolute; left:1.1rem; top:1rem;
  width:1.6rem; height:1.6rem; border-radius:50%;
  background:var(--navy); color:#fff; font-size:.82rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; }

/* ── Encadres ────────────────────────────────────────────────────────────────── */
.encadre { background:var(--accent-dim); border:1px solid var(--accent-bdr);
  border-radius:var(--radius-lg);
  padding:1rem 1.25rem; font-size:.92rem; color:var(--text2); }
.encadre--alerte { background:var(--red-dim); border-color:rgba(177,14,30,.25); }

details { margin-top:1.5rem; }
summary { cursor:pointer; color:var(--muted-text); font-size:.9rem; padding:.4rem 0; }
summary:hover { color:var(--text); }
.note { color:var(--muted-text); font-size:.88rem; }
.note li { margin:.3rem 0; }

footer { background:var(--navy); color:rgba(255,255,255,.8); font-size:.85rem;
  padding:1.75rem 0; margin-top:0; }
footer a { color:var(--accent-on-dark); }
footer p + p { margin-top:.45rem; }

@media (prefers-reduced-motion:reduce) {
  .tuile,.btn-primary,.btn-outline { transition:none; }
  .tuile:hover,.tuile:focus-visible { transform:none; }
}

/* ── Console de mise en route ────────────────────────────────────────────────
   Les trois cartes numerotees du parcours, et la GRILLE de saisie du personnel.
   Une zone de texte libre ou l'on tape « Prenom, Nom, courriel » par ligne
   demandait au client d'apprendre une convention avant de pouvoir travailler,
   et ne montrait l'identifiant propose qu'apres coup. Un tableau montre les
   colonnes, se colle depuis un tableur, et affiche l'identifiant en meme temps
   qu'on tape le nom. */
.carte { background:var(--card); border:1px solid var(--border-doux);
  border-radius:var(--radius-lg); padding:1.5rem; }
.carte + .carte { margin-top:1.25rem; }
.carte[data-etat="fait"] { border-color:var(--accent-bdr); }
.carte[data-etat="inactive"] { opacity:.55; }
.carte-titre { display:flex; align-items:center; gap:.75rem; margin-bottom:.35rem; }
.carte-num { flex:none; width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--navy); color:#fff; font-weight:700; font-size:.85rem;
  display:flex; align-items:center; justify-content:center; }
.carte[data-etat="fait"] .carte-num { background:var(--accent-text); }
.carte-titre h2 { font-family:var(--font-heading); font-size:1.1rem; font-weight:700;
  color:var(--navy); }
.carte-chapeau { color:var(--text2); font-size:.9rem; margin-bottom:1.15rem; }

/* La grille de saisie. `table-layout:fixed` pour que les colonnes ne dansent pas
   a mesure qu'on tape, et un conteneur qui defile plutot qu'une page qui deborde. */
.grille-saisie { overflow-x:auto; border:1px solid var(--border);
  border-radius:var(--radius); }
table.personnel { width:100%; min-width:38rem; border-collapse:collapse;
  table-layout:fixed; font-size:.9rem; background:var(--card); }
table.personnel th { background:var(--bg2); color:var(--navy); font-weight:700;
  font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  text-align:left; padding:.6rem .75rem; border-bottom:1px solid var(--border);
  white-space:nowrap; }
table.personnel td { border-bottom:1px solid var(--border); padding:0; vertical-align:middle; }
table.personnel tr:last-child td { border-bottom:none; }
table.personnel input { width:100%; border:none; outline:none; background:transparent;
  padding:.6rem .75rem; font:inherit; color:var(--text); }
table.personnel input:focus { background:var(--accent-dim);
  box-shadow:inset 0 0 0 2px var(--accent-bdr); }
table.personnel input::placeholder { color:var(--border-hi); }
td.propose { padding:.6rem .75rem; font-family:var(--font-mono); font-size:.82rem;
  color:var(--accent-text); overflow-wrap:anywhere; }
td.propose:empty::before { content:'—'; color:var(--border-hi); }
td.retirer { width:2.75rem; text-align:center; }
td.retirer button { background:none; border:none; cursor:pointer; line-height:1;
  color:var(--border-hi); font-size:1.2rem; padding:.35rem .5rem; border-radius:var(--radius); }
td.retirer button:hover { color:var(--red); background:var(--red-dim); }
col.c-nom { width:22%; } col.c-courriel { width:30%; } col.c-id { width:18%; }

.barre-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  margin-top:1rem; }
.barre-actions .compte { color:var(--muted-text); font-size:.85rem; margin-left:auto; }

/* Le formulaire de connexion. Deux champs, pas de fioriture. */
.champ { display:block; margin-bottom:.9rem; max-width:22rem; }
.champ span { display:block; font-size:.8rem; font-weight:700; color:var(--navy);
  letter-spacing:.04em; margin-bottom:.3rem; }
.champ input { width:100%; padding:.6rem .75rem; font:inherit;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--bg); }
.champ input:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-dim); }

.message { margin-top:1rem; padding:.85rem 1.1rem; border-radius:var(--radius);
  font-size:.9rem; border-left:4px solid; }
.message--ok { background:var(--accent-dim); border-color:var(--accent);
  color:var(--text2); }
.message--erreur { background:var(--red-dim); border-color:var(--red); color:var(--red); }
.message--note { background:var(--ambre-dim); border-color:var(--ambre-bdr); color:var(--ambre); }

/* Les liens produits. Chaque ligne porte un lien qui vaut un mot de passe: il ne
   s'affiche pas en clair, il se copie. */
table.liens { width:100%; border-collapse:collapse; font-size:.88rem; margin-top:1rem; }
table.liens th { background:var(--bg2); color:var(--navy); font-size:.74rem;
  letter-spacing:.08em; text-transform:uppercase; text-align:left;
  padding:.55rem .75rem; border-bottom:1px solid var(--border); }
table.liens td { padding:.55rem .75rem; border-bottom:1px solid var(--border);
  vertical-align:middle; }
table.liens .id { font-family:var(--font-mono); font-size:.82rem; color:var(--accent-text); }
.etat-vide { color:var(--muted-text); font-size:.9rem; padding:.5rem 0; }

/* ── Console : mise en page (2026-09-24) ─────────────────────────────────── */
/* Le fil des etapes a gauche, les cartes a droite. Le fil reste visible pendant qu'on
   descend dans une carte longue (le tableau du personnel), pour qu'on sache toujours
   ou l'on en est sans remonter. Sous 900 px il passe au-dessus, en deux colonnes. */
.console-grille { display:grid; grid-template-columns:15rem minmax(0,1fr); gap:2rem;
  align-items:start; }
.console-suivi { position:sticky; top:1.5rem; background:var(--card);
  border:1px solid var(--border-doux); border-radius:var(--radius-lg); padding:1.1rem 1rem; }
.console-suivi-titre { font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted-text); }
.console-suivi-compte { font-family:var(--font-heading); font-weight:700; color:var(--navy);
  margin:.2rem 0 .85rem; }
.console-suivi ol { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:.15rem; }
.console-suivi a { display:flex; align-items:center; gap:.6rem; padding:.45rem .5rem;
  border-radius:var(--radius); color:var(--text2); text-decoration:none; font-size:.88rem; }
.console-suivi a:hover { background:var(--bg2); }
.console-suivi-extra { margin-top:.6rem; padding-top:.6rem; border-top:1px solid var(--border-doux); }
.suivi-pastille { flex:none; width:1.45rem; height:1.45rem; border-radius:50%;
  border:1.5px solid var(--border-hi); background:var(--card); color:var(--muted-text);
  display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; }
.console-suivi [aria-current="step"] > a { background:var(--accent-dim); color:var(--navy); font-weight:700; }
.console-suivi [data-etat="actif"] .suivi-pastille { border-color:var(--accent); color:var(--accent-text); }
.console-suivi [data-etat="fait"] .suivi-pastille { background:var(--accent-text);
  border-color:var(--accent-text); color:#fff; font-size:0; }
.console-suivi [data-etat="fait"] .suivi-pastille::before { content:'✓'; font-size:.8rem; }
.console-suivi [data-etat="inactive"] > a { color:var(--muted-text); }
.console-cartes .carte { scroll-margin-top:1.5rem; padding:1.6rem 1.75rem; }
.carte[data-etat="actif"] { border-color:var(--accent-bdr);
  box-shadow:0 0 0 3px var(--accent-dim), 0 8px 22px rgba(38,55,74,.06); }
.carte[data-etat="fait"] .carte-titre::after { content:'Terminé'; margin-left:auto;
  font-size:.72rem; font-weight:700; padding:.15rem .65rem; border-radius:999px;
  background:var(--accent-dim); color:var(--accent-text); }
/* Le formulaire de connexion: les deux champs obligatoires cote a cote, puis les deux
   acces facultatifs dans leur propre cadre, chacun avec sa consequence dessous. */
.champs-duo { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:0 1rem; }
.champs-duo .champ { max-width:none; }
.champs-facultatifs { border:1px dashed var(--border); border-radius:var(--radius);
  padding:.9rem 1.1rem .2rem; margin:.3rem 0 1.25rem; background:var(--bg2); }
.champs-facultatifs legend { font-size:.78rem; font-weight:700; color:var(--navy);
  padding:0 .4rem; letter-spacing:.04em; }
.champ-aide { color:var(--text2); font-size:.82rem; margin:-.45rem 0 .9rem; }
@media (max-width:900px) {
  .console-grille { grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .console-suivi { position:static; }
  .console-suivi ol { display:grid; grid-template-columns:1fr 1fr; }
  .console-cartes .carte { padding:1.25rem 1.1rem; }
}

/* ── Console : les boites aux lettres (billet #2) ─────────────────────────── */
/* La carte des boites de la console. Une pastille par etat, et le rouge reserve au seul geste qui ne
   se rattrape pas: la suppression. */
.defile { overflow-x:auto; }
.pastille { display:inline-block; font-size:.72rem; font-weight:700; padding:.1rem .5rem;
  border-radius:4px; background:var(--accent-dim); color:var(--accent-text); white-space:nowrap; }
.pastille--suspendue { background:var(--bg3); color:var(--text2); }
.pastille--systeme { background:var(--navy-dim); color:var(--navy); }
.gestes { display:flex; gap:.4rem; flex-wrap:wrap; }
.gestes button { padding:.3rem .75rem; font-size:.78rem; }
.btn-danger { background:var(--red); color:#fff; border:1px solid var(--red); border-radius:4px;
  font-weight:700; cursor:pointer; }
.btn-danger:disabled { opacity:.45; cursor:not-allowed; }
.btn-outline.danger { color:var(--red); border-color:var(--red); }
tr.confirmer td { background:var(--red-dim); }
#tableau-boites td:nth-child(3) { white-space:nowrap; }
.secret { font-family:ui-monospace,monospace; font-size:1rem; user-select:all; }

/* ── Portail et guides : mise en page (2026-09-24, retour de Julien a 1080 px) ──
   Mesure a 1080 px : le chapeau et le texte des guides plafonnaient a 44rem dans un
   conteneur de 1140 px, donc la moitie droite restait vide et la page se lisait comme
   decentree. Deux reponses : le portail centre son accueil, les guides centrent une
   colonne de lecture unique (en-tete et texte alignes sur le meme axe). */
.hero--centre { text-align:center; }
.hero--centre .chapeau { margin-left:auto; margin-right:auto; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.75rem; }
.hero--centre .actions { justify-content:center; }

/* Les guides du portail : des cartes comme les tuiles, pas une liste de liens. */
.guides { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.guides a { display:flex; flex-direction:column; gap:.35rem; height:100%;
  background:var(--card); border:1px solid var(--border-doux); border-radius:var(--radius-lg);
  padding:1.15rem 1.3rem; text-decoration:none; color:inherit;
  transition:box-shadow var(--transition), border-color var(--transition); }
.guides a:hover,.guides a:focus-visible { box-shadow:var(--shadow-md);
  border-color:var(--accent-bdr); outline:none; }
.guides .titre { font-weight:700; color:var(--navy); }
.guides .note { flex:1; }
.guides .lire { font-size:.85rem; font-weight:700; color:var(--accent-text); }

/* La partie administration : un cadre, pour qu'elle ne flotte pas sous les guides. */
details.admin { margin-top:0; background:var(--bg2); border:1px solid var(--border-doux);
  border-radius:var(--radius-lg); padding:.35rem 1.35rem; }
details.admin[open] { padding-bottom:1.5rem; }
details.admin > summary { font-weight:700; color:var(--navy); font-size:.95rem; padding:.8rem 0; }
details.admin h3 { font-family:var(--font-heading); color:var(--navy); font-size:1.05rem;
  margin:1.75rem 0 .85rem; }
details.admin .appel { margin-top:.75rem; background:var(--card); }
details.admin .appel + .note { margin-top:.6rem; }
details.admin .grille .tuile { background:var(--card); }

/* Les guides : une colonne de lecture centree. */
.lecture { max-width:52rem; }
.guide h2 { font-family:var(--font-heading); color:var(--navy); font-size:1.25rem;
  margin:2.5rem 0 .9rem; }
.guide > .container > h2:first-of-type { margin-top:1.25rem; }
.guide p + p { margin-top:.75rem; }
.guide .etapes + p, .guide .etapes + .encadre, .guide dl + .encadre,
.guide figure + p, .guide p + .etapes, .guide p + dl { margin-top:1.1rem; }
.guide .encadre { margin-top:1.5rem; }
.guide .encadre p + p { margin-top:.6rem; }
.guide dl { display:grid; grid-template-columns:max-content 1fr; gap:.45rem 1.25rem;
  background:var(--bg2); border-radius:var(--radius); padding:1rem 1.25rem; }
.guide dt { font-weight:700; color:var(--navy); }
.retour { display:inline-block; font-size:.9rem; text-decoration:none; font-weight:700; }
.retour:hover { text-decoration:underline; }
/* Guide suivant, en bas de chaque guide. install.sh retire les guides que la pile ne sert
   pas; le premier qui reste est le seul affiche. */
.suite { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.suite .suivant { display:inline-block; background:var(--navy); color:#fff; font-weight:700;
  text-decoration:none; padding:.7rem 1.2rem; border-radius:var(--radius); }
.suite .suivant:hover, .suite .suivant:focus-visible { box-shadow:var(--shadow-md); text-decoration:underline; }
.suite .suivant ~ .suivant { display:none; }
/* Adresse a copier d'un clic (pages.js). */
code.copiable { cursor:pointer; position:relative; display:inline-block; max-width:100%; overflow-wrap:anywhere; }
code.copiable::after { content:"\29C9"; margin-left:.35rem; font-size:.85em; opacity:.55; }
code.copiable:hover, code.copiable:focus-visible { border-color:var(--accent-text); }
code.copiable[data-copie]::before { content:attr(data-copie); position:absolute; left:0; bottom:calc(100% + .35rem);
  background:var(--navy); color:#fff; font-family:var(--font); font-size:.8rem; white-space:nowrap;
  padding:.2rem .5rem; border-radius:var(--radius); }
/* Une capture d'ecran : cadre, ombre legere, legende. La capture montre l'ecran tel que
   l'employe le verra ; la legende dit ou regarder. */
.guide figure { margin:1.25rem 0 1.5rem; }
.guide figure img { width:100%; height:auto; border:1px solid var(--border-doux);
  border-radius:var(--radius-lg); box-shadow:0 6px 20px rgba(38,55,74,.10); background:#fff; }
.guide figure.etroite img { max-width:26rem; margin:0 auto; }
.guide figcaption { color:var(--muted-text); font-size:.85rem; margin-top:.6rem; text-align:center; }
.etapes li figure { margin:.9rem 0 .25rem; }
@media (max-width:560px) {
  .guide dl { grid-template-columns:1fr; gap:.1rem; }
  .guide dd + dt { margin-top:.5rem; }
  .etapes li { padding-left:3.1rem; }
}

/* La demande d'aide au bas des guides (pages.js). */
.guide section.aide { margin-top:2.5rem; padding:1.5rem; background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius); }
.guide section.aide h2 { margin-top:0; }
form.aide { display:grid; gap:.9rem; margin-top:1rem; }
form.aide label { display:grid; gap:.3rem; font-weight:700; color:var(--navy); font-size:.95rem; }
form.aide small { font-weight:400; color:var(--muted-text); }
form.aide input, form.aide select, form.aide textarea { font:inherit; font-weight:400; color:var(--text);
  background:#fff; border:1px solid var(--border-hi); border-radius:var(--radius); padding:.55rem .7rem;
  width:100%; max-width:100%; }
form.aide textarea { resize:vertical; }
form.aide button { justify-self:start; font:inherit; font-weight:700; background:var(--navy); color:#fff;
  border:0; border-radius:var(--radius); padding:.7rem 1.2rem; cursor:pointer; }
form.aide button:disabled { opacity:.6; cursor:default; }
form.aide .piege { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
form.aide .etat:empty { display:none; }
form.aide .etat.ok { color:var(--accent-text); font-weight:700; }
form.aide .etat.erreur { color:#b42318; font-weight:700; }
.etapes a.bloque { font-size:.8rem; font-weight:400; color:var(--muted-text); white-space:nowrap; }
.etapes a.bloque:hover, .etapes a.bloque:focus { color:var(--navy); }