/* ═══════════════════════════════════════════════════════════════
   EL8, Outils. Feuille commune.
   Pensée pour le terrain : cibles tactiles larges, fort contraste,
   lisible dans le noir d'une salle, utilisable d'une main.
   ═══════════════════════════════════════════════════════════════ */

/* color-scheme : les contrôles natifs (calendrier d'un champ date, case à
   cocher, barre de défilement) suivent le thème au lieu de rester blancs
   sur fond noir. */
:root {
  color-scheme: dark;
  --bg:      #080808;
  --panel:   #111;
  --panel-2: #171717;
  --fg:      #e8e8e8;
  --fg-2:    rgba(232,232,232,.66);
  --mid:     #9a9a9a;
  --faint:   #7a7a7a;
  --dim:     #262626;
  --bar:     rgba(8,8,8,.94);    /* la barre du haut, translucide */
  --line:    rgba(255,255,255,.09);
  --red:     #c0392b;            /* filets, bordures, aplats */
  --red-txt: #e05141;            /* texte rouge : 5,2:1 sur le fond */
  --red-dim: rgba(192,57,43,.5);
  --grille:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg stroke='rgba(255,255,255,0.075)' stroke-width='1' stroke-dasharray='2 10'%3E%3Cline x1='0' y1='0.5' x2='92' y2='0.5'/%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='92'/%3E%3C/g%3E%3C/svg%3E");
  --green:   #2e9e5b;
  --amber:   #d68910;

  --mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --cond: 'Barlow Condensed', system-ui, sans-serif;
  --body: 'Barlow', system-ui, sans-serif;

  --tap: 48px;              /* cible tactile minimale */
  --gut: clamp(1rem, 4vw, 2rem);
  --t: .15s ease;
}

/* ── Thème clair ─────────────────────────────────────────────────
   Un outil sert autant au noir d'une salle qu'en plein soleil sur un
   parking de déchargement, où un écran sombre ne se lit plus. Trois
   états : le système décide par défaut, et la bascule tranche dans les
   deux sens, sombre au FOH pendant le show, clair dehors à 14 h.

   Les valeurs sont posées une fois ici ; les deux blocs qui suivent ne
   font que les affecter, l'un au réglage du système, l'autre au choix
   explicite. Le rouge de la charte ne bouge pas : seuls sa version
   texte et les couleurs d'état s'assombrissent, faute de quoi ils ne
   passeraient plus le contraste sur du clair. */
:root {
  --c-bg:      #f2f2f0;
  --c-panel:   #ffffff;
  --c-panel-2: #f8f8f7;
  --c-fg:      #141414;
  --c-fg-2:    rgba(20,20,20,.74);
  --c-mid:     #575757;
  --c-faint:   #6e6e6e;
  --c-dim:     #cfcfcd;
  --c-line:    rgba(0,0,0,.12);
  --c-red-txt: #a32b1e;
  --c-red-dim: rgba(192,57,43,.42);
  --c-green:   #1c7a41;
  --c-amber:   #91620a;
  --c-bar:     rgba(242,242,240,.94);
  --c-ombre:   rgba(0,0,0,.14);
  --c-grille:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cg stroke='rgba(0,0,0,0.10)' stroke-width='1' stroke-dasharray='2 10'%3E%3Cline x1='0' y1='0.5' x2='92' y2='0.5'/%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='92'/%3E%3C/g%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) {
    color-scheme: light;
    --bg: var(--c-bg); --panel: var(--c-panel); --panel-2: var(--c-panel-2);
    --fg: var(--c-fg); --fg-2: var(--c-fg-2); --mid: var(--c-mid); --faint: var(--c-faint);
    --dim: var(--c-dim); --line: var(--c-line);
    --red-txt: var(--c-red-txt); --red-dim: var(--c-red-dim);
    --green: var(--c-green); --amber: var(--c-amber);
    --bar: var(--c-bar); --ombre: var(--c-ombre); --grille: var(--c-grille);
  }
}

:root[data-theme="clair"] {
  color-scheme: light;
  --bg: var(--c-bg); --panel: var(--c-panel); --panel-2: var(--c-panel-2);
  --fg: var(--c-fg); --fg-2: var(--c-fg-2); --mid: var(--c-mid); --faint: var(--c-faint);
  --dim: var(--c-dim); --line: var(--c-line);
  --red-txt: var(--c-red-txt); --red-dim: var(--c-red-dim);
  --green: var(--c-green); --amber: var(--c-amber);
    --bar: var(--c-bar); --ombre: var(--c-ombre); --grille: var(--c-grille);
}

/* La bascule, posée par theme.js dans la barre du haut. */
/* Le lien de signalement, dans la barre de chaque outil : c'est là qu'on est
   quand quelque chose cloche. Il reste visible sur téléphone, mesuré à
   360 px, la barre a 93 px de marge, l'effacer n'était justifié par rien. */
.signaler {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); text-decoration: none;
  margin-left: auto; padding: .3rem .1rem; white-space: nowrap;
  transition: color var(--t);
}
.signaler:hover { color: var(--red-txt); }
.signaler + .theme { margin-left: .7rem; }
@media print { .signaler { display: none !important; } }

.theme {
  background: none; border: 1px solid var(--dim); border-radius: 3px;
  color: var(--mid); cursor: pointer;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .3rem .55rem;
  margin-left: auto;   /* .bar__mark reprend la main juste après */
  min-height: 32px; line-height: 1;
  transition: color var(--t), border-color var(--t);
  -webkit-tap-highlight-color: transparent;
}
.theme:hover { color: var(--fg); border-color: var(--mid); }
@media print { .theme { display: none !important; } }


*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--fg-2);
  font-family: var(--body); font-weight: 300;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
/* Grille technique en pointillés, le motif des deux sites (DA §6). Elle
   était restée à la porte des outils ; elle donne l'échelle et rattache la
   page au reste. Statique, en fond, atténuée vers le bas. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grille);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 55%, transparent 92%);
}
.wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
svg { display: block; max-width: 100%; }

/* ── En-tête ───────────────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: .8rem;
  min-height: 54px; padding: 0 var(--gut);
  padding-top: env(safe-area-inset-top);
  background: var(--bar); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar__back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: -10px; flex-shrink: 0;
  font-family: var(--mono); font-size: 1.1rem; color: var(--mid);
  text-decoration: none; border-radius: 3px; transition: color var(--t);
}
.bar__back:hover, .bar__back:active { color: var(--red-txt); }
.bar__title {
  /* C'est un h1 : sans cette marge à zéro, la barre grandit. */
  margin: 0;
  font-family: var(--cond); font-weight: 400;
  font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar__mark {
  margin-left: 0; font-family: var(--mono); font-size: 0.76rem;
  letter-spacing: .15em; color: var(--faint); text-decoration: none; flex-shrink: 0;
}

/* ── Le menu du site, sur téléphone (assets/menu.js) ────────────
   Le burger d'el8.fr (.nav__burger dans assets/css/el8.css), au même
   endroit, à droite : mêmes trois traits, même croix à l'ouverture, même
   panneau sous la barre. Recopié plutôt que chargé : el8.css porte les
   styles de tout le site. Si la barre du site change, celle-ci suit.
   « Signaler » et le thème passent dans le panneau. */
.bar__burger, .bar__menu { display: none; }
@media (max-width: 800px) {
  .bar .signaler, .bar .theme { display: none; }
  /* Ils poussaient la marque à droite : elle s'y met seule, le burger la suit. */
  .bar__mark { margin-left: auto; }
  .bar__burger {
    display: block; position: relative; flex-shrink: 0;
    width: 44px; height: 44px; margin-right: -9px; padding: 0;
    background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .bar__burger span, .bar__burger::before, .bar__burger::after {
    content: ''; position: absolute; left: 9px; right: 9px; height: 1px;
    background: var(--fg); transition: transform var(--t), opacity var(--t);
  }
  .bar__burger::before { top: 15.5px; }
  .bar__burger span    { top: 22px; }
  .bar__burger::after  { top: 28.5px; }
  .bar__burger[aria-expanded="true"]::before { transform: translateY(6.5px) rotate(45deg); }
  .bar__burger[aria-expanded="true"] span    { opacity: 0; }
  .bar__burger[aria-expanded="true"]::after  { transform: translateY(-6.5px) rotate(-45deg); }
  .bar__menu {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; padding: .5rem 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
  }
  .bar__menu.ouvert { display: flex; }
  .bar__menu a, .bar__menu button {
    position: relative; display: block; width: 100%; text-align: left;
    padding: .85rem var(--gut); background: none; border: 0; cursor: pointer;
    font-family: var(--cond); font-weight: 300; font-size: 1rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--mid); text-decoration: none;
  }
  .bar__menu a:hover, .bar__menu button:hover, .bar__menu a[aria-current="page"] { color: var(--fg); }
  .bar__menu a[aria-current="page"]::after {
    content: ''; position: absolute; left: var(--gut); width: 18px; bottom: .55rem;
    height: 1px; background: var(--red);
  }
  .bar__menu hr { border: 0; border-top: 1px solid var(--line); margin: .4rem var(--gut); }
}
@media print { .bar__burger, .bar__menu { display: none !important; } }

.wrap { max-width: 760px; margin-inline: auto; padding: var(--gut); }
.wrap--wide { max-width: 1080px; }

/* ── Typographie ───────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--cond); font-weight: 400; line-height: 1.15; color: var(--fg); }
.h-tool { font-size: clamp(1.5rem, 5vw, 2rem); letter-spacing: .04em; text-transform: uppercase; }
.h-sec {
  font-size: 1.05rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg); margin-bottom: .9rem;
}
.label {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--mid);
}
.note { font-size: .88rem; color: var(--fg-2); }
.hint { font-size: .8rem; color: var(--mid); }

/* ── Panneaux ──────────────────────────────────────────────── */
.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 4px; padding: clamp(.9rem, 3vw, 1.3rem);
}
.panel + .panel { margin-top: 1rem; }
.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }

/* ── Contrôles ─────────────────────────────────────────────── */
.field { display: block; margin-bottom: 1rem; }
.field > .label { display: block; margin-bottom: .4rem; }

/* Date, heure, courriel, recherche : laissés au navigateur, ils sortaient
   en case blanche au milieu d'un panneau sombre. Heures et Frais s'en
   étaient chacun protégés chez eux. */
input[type=number], input[type=text], input[type=date], input[type=time],
input[type=email], input[type=search], select, textarea {
  width: 100%; min-height: var(--tap);
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--dim); border-radius: 3px;
  padding: .5rem .75rem;
  font-family: var(--mono); font-size: 1.05rem;
  -moz-appearance: textfield;
}
/* Sans cela, une zone de texte garde sa largeur par défaut, vingt
   caractères, au milieu d'un panneau qui en fait cent. Deux outils
   avaient déjà rustiné le cas chez eux ; c'est sa place ici. */
textarea {
  box-sizing: border-box; resize: vertical;
  font-size: .95rem; line-height: 1.5;
}
input:focus, select:focus, textarea:focus { border-color: var(--red-dim); outline: none; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--mid) 50%),
                    linear-gradient(135deg, var(--mid) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: 2.2rem;
}

input[type=range] {
  width: 100%; height: var(--tap); background: transparent;
  -webkit-appearance: none; appearance: none; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: var(--dim); border-radius: 2px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11.5px;
  background: var(--fg); border: 2px solid var(--bg); border-radius: 50%;
}
input[type=range]::-moz-range-track { height: 3px; background: var(--dim); border-radius: 2px; }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; background: var(--fg); border: 2px solid var(--bg); border-radius: 50%; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--tap); padding: .6rem 1.1rem;
  background: var(--panel-2); color: var(--fg-2);
  border: 1px solid var(--dim); border-radius: 3px;
  font-family: var(--cond); font-size: .95rem;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: color var(--t), border-color var(--t), background var(--t);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--fg); border-color: var(--mid); }

/* Une ligne de contact, posée par assets/contacts.js. */
.ctrow {
  display: grid; grid-template-columns: 1fr 1fr 9rem 1fr 2.6rem;
  gap: .4rem; margin-bottom: .4rem; align-items: center;
}
.ctrow input, .ctrow select { min-height: 44px; font-size: .9rem; padding: .3rem .5rem; }
.ctrow .rm { min-height: 44px; padding: 0; font-size: 1.1rem; }
/* Le rôle est enrobé pour sa liste : l'enrobage tient la case, et une case
   de grille refuse de se réduire sous son contenu sans ce min-width. */
.ctrow .ac { min-width: 0; }
@media (max-width: 720px) {
  .ctrow { grid-template-columns: 1fr 1fr; }
  .ctrow .rm { grid-column: 2; }
}
/* Une colonne propre à l'outil, avant le « × » : la portée d'un contact
   dans le patch son. Mêmes pas que ceux que le patch son avait chez lui. */
.ctrow--plus { grid-template-columns: 1fr 1fr 8.4rem 1fr 10.6rem 2.6rem; }
@media (max-width: 900px) {
  .ctrow--plus { grid-template-columns: 1fr 1fr 8.4rem 1fr 2.6rem; }
  .ctrow--plus select { grid-column: 1 / 6; }
}
@media (max-width: 720px) {
  .ctrow--plus { grid-template-columns: 1fr 1fr 2.6rem; }
  .ctrow--plus input:nth-child(3) { grid-column: 1; }
  .ctrow--plus input:nth-child(4) { grid-column: 2 / 4; }
  .ctrow--plus select { grid-column: 1 / 4; }
}

/* Le logo sur les feuilles, posé par assets/signature.js. L'aperçu montre le
   logo sur fond blanc : c'est sur du blanc qu'il s'imprimera, et un logo
   blanc invisible sur le thème sombre serait une mauvaise surprise à la
   sortie de l'imprimante. */
.sig__a { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.sig__ap {
  flex: 0 0 auto; width: 9rem; height: 4.2rem; display: flex;
  align-items: center; justify-content: center; padding: .4rem;
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
}
.sig__ap img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sig__ap--vide {
  background: var(--panel-2); color: var(--faint);
  font-family: var(--cond); font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase;
}
.sig__b { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Le sélecteur de projet, posé par assets/projets.js. Le même dans les
   quatre outils, donc décrit une fois : le choix et sa date sur une
   ligne, les boutons en petit dessous, « Supprimer » tenu à l'écart au
   bout de la rangée. */
.pjx {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: .8rem; align-items: end;
}
.pjx--date { grid-template-columns: minmax(0, 1fr) 11rem; }
@media (max-width: 640px) {
  .pjx--date { grid-template-columns: minmax(0, 1fr); }
}
.pjx__b { margin-top: .7rem; gap: .4rem; }
.pjx__b .btn { min-height: 40px; padding: .35rem .85rem; }
.pjx__b .btn--danger { margin-left: auto; }
.pjx__confid { margin: .8rem 0 0; }
.pjx__confid a { color: var(--mid); text-decoration: underline; text-underline-offset: 2px; }
.pjx__confid a:hover { color: var(--fg); }
/* Un bouton désactivé avait exactement l'apparence d'un bouton actif :
   on cliquait, rien ne se passait, et on cherchait la panne ailleurs. */
.btn:disabled, .btn[disabled] {
  opacity: .4; cursor: default; pointer-events: none;
}
.btn[aria-pressed="true"], .btn.is-on {
  color: var(--red-txt); border-color: var(--red-txt); background: rgba(192,57,43,.1);
}
.btn--big { min-height: 60px; font-size: 1.05rem; width: 100%; }
/* Un bouton qui efface n'est pas rouge au repos. Le rouge doit vouloir
   dire « ça ne passe pas », pas « il y a un bouton ici » : le bilan
   ouvrait sur cinq boutons rouges, le patch lumière sur six, et
   « Supprimer » était la première chose qu'on voyait en arrivant. Quand
   tout est rouge, plus rien n'alerte. Il le devient dès que la main ou le
   clavier s'en approche, et chacun demande confirmation avant d'effacer
   ce qui ne se retrouve pas. */
.btn--danger:hover, .btn--danger:focus-visible {
  color: var(--red-txt); border-color: var(--red-dim);
}
/* Le « × » au bout d'une ligne, un par ligne : plus discret encore. */
.btn--danger.rm { color: var(--faint); border-color: var(--line); }

/* Le geste qu'on répète dans un panneau : ajouter une voie, poser des
   appareils. Un seul par panneau, sinon il ne désigne plus rien. Pas en
   rouge, pour la même raison que ci-dessus. Et pas plein : en blanc sur
   une page noire, « Ajouter au patch » éblouissait en arrivant, et un
   bouton sur toute la largeur devenait la seule chose visible. Un cran
   plus clair que les autres, cerné, le texte en pleine couleur : on le
   trouve, il ne crie pas. */
.btn--principal {
  background: var(--panel-2);
  background: color-mix(in srgb, var(--fg) 9%, var(--panel-2));
  color: var(--fg); border-color: var(--mid);
}
.btn--principal:hover, .btn--principal:focus-visible {
  background: color-mix(in srgb, var(--fg) 15%, var(--panel-2));
  border-color: var(--fg); color: var(--fg);
}

/* Sous-titre de l'index : dire en une ligne de quoi il s'agit, à qui
   arrive là sans connaître EL8. */
.accroche {
  font-family: var(--cond); font-weight: 400;
  font-size: clamp(1rem, 3.2vw, 1.2rem); letter-spacing: .08em;
  text-transform: uppercase; color: var(--mid);
  margin: 0 0 1.1rem;
}

/* Panneau repliable : les sections secondaires d'un outil long ne
   doivent pas occuper l'écran tant qu'on ne s'en sert pas. */
.panel--pli > summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; cursor: pointer; list-style: none;
  min-height: var(--tap);
}
.panel--pli > summary::-webkit-details-marker { display: none; }
.panel--pli > summary::after {
  content: '+'; font-family: var(--mono); font-size: 1.1rem; color: var(--faint);
  margin-left: auto; padding-left: .6rem;
}
.panel--pli[open] > summary::after { content: '–'; }
.panel--pli > summary:hover::after { color: var(--red-txt); }
.panel--pli > summary .h-sec { margin: 0; }

.btn--min { font-size: .78rem; letter-spacing: .1em; color: var(--mid); }
.btns { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Le mot d'etat.js : un enregistrement qui échoue doit se voir, sinon on
   continue de saisir dans le vide. Il tient le bas de l'écran jusqu'à ce
   qu'on le ferme. */
.etat-mot {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 200; max-width: min(46rem, calc(100vw - 2rem));
  display: flex; align-items: flex-start; gap: .8rem;
  padding: .7rem .9rem; border-radius: 4px;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--fg); font-size: .88rem; line-height: 1.4;
  box-shadow: 0 6px 24px var(--ombre, rgba(0,0,0,.45));
}
.etat-mot--erreur { border-color: var(--red); color: var(--fg); }
.etat-mot--ok { border-color: var(--green); }
.etat-mot__x {
  background: none; border: 0; color: var(--faint); cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 .2rem; margin-left: auto;
}
.etat-mot__x:hover { color: var(--fg); }
@media print { .etat-mot { display: none !important; } }
.btns--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .5rem; }

/* ── Sorties ───────────────────────────────────────────────── */
.out {
  font-family: var(--mono); color: var(--fg);
  font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.1;
}
.out small { font-size: .42em; color: var(--mid); letter-spacing: .14em; margin-left: .35em; }
.out--red { color: var(--red-txt); }
.out--green { color: var(--green); }
.out--amber { color: var(--amber); }

.rows { display: grid; gap: .1rem; }
.row {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem;
  align-items: baseline; padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row__k { font-size: .92rem; color: var(--fg-2); }
.row__v { font-family: var(--mono); font-size: 1rem; color: var(--fg); text-align: right; }

table.t { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.t th {
  text-align: left; font-family: var(--mono); font-weight: normal;
  font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mid); padding: .4rem .5rem; border-bottom: 1px solid var(--line);
}
table.t td { padding: .5rem; border-bottom: 1px solid var(--line); color: var(--fg-2); }
table.t td.mono { font-family: var(--mono); color: var(--fg); }

.warn {
  border-left: 2px solid var(--amber); padding: .6rem 0 .6rem .9rem;
  font-size: .86rem; color: var(--fg-2);
}
.warn--red { border-color: var(--red-txt); }

/* ── Index des outils ──────────────────────────────────────── */
.grid {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}
.tool {
  display: flex; flex-direction: column; gap: .35rem;
  min-height: 116px; padding: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  text-decoration: none; position: relative; overflow: hidden;
  transition: border-color var(--t), background var(--t);
  -webkit-tap-highlight-color: transparent;
}
.tool:hover, .tool:active { border-color: var(--red-dim); background: var(--panel-2); }
.tool::after {
  content: ''; position: absolute; top: 0; left: 0; width: 0; height: 2px;
  background: var(--red); transition: width .25s ease;
}
.tool:hover::after { width: 46px; }
/* « Les plus utilisés » : mêmes cartes, marquées dans le vocabulaire qui
   existe déjà, le filet rouge que les autres montrent au survol y est
   posé d'emblée, et un lavis rouge très léger les détache du fond. Pas
   d'autre couleur : on doit pouvoir comparer les tuiles d'un coup d'œil.
   Le lavis se comporte pareil sur fond sombre et sur fond clair, là où
   un gris se serait inversé d'un thème à l'autre. */
#recents .tool { background: rgba(192,57,43,.07); }
#recents .tool::after { width: 46px; }
#recents .tool:hover::after { width: 72px; }
#recents .tool:hover, #recents .tool:active { background: rgba(192,57,43,.12); }

.tool__n { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .18em; color: var(--red-txt); }
.tool__t {
  font-family: var(--cond); font-weight: 500; font-size: 1.12rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg);
}
.tool__d { font-size: .82rem; color: var(--mid); line-height: 1.4; }
.tool--ext .tool__t::after { content: ' ↗'; font-family: var(--mono); font-size: .7em; color: var(--mid); }

/* Intertitres en Barlow Condensed : la mono reste pour les données
   techniques, pas pour les titres, où elle se lit mal en petit corps. */
.sec-label {
  font-family: var(--cond); font-weight: 500; font-size: 1.02rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg);
  display: flex; align-items: center; gap: .8rem;
  margin: 2rem 0 .9rem;
}
.sec-label::before { content: ''; width: 16px; height: 2px; background: var(--red); flex-shrink: 0; }
.sec-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.sec-label:first-of-type { margin-top: .5rem; }

/* ── Utilitaires ───────────────────────────────────────────── */
.cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
[hidden] { display: none !important; }

/* ── Suggestions classées ─────────────────────────────────────
   Employées par assets/autocomplete.js : le champ doit être dans
   un parent .ac pour que la liste se place sous lui. */
.ac { position: relative; display: block; }
/* L'enrobage porte la place, le champ la remplit. Sans cela un champ
   enrobé se rétrécit à sa largeur par défaut au milieu de sa case. */
.ac > input { width: 100%; }
.ac__l {
  position: absolute; z-index: 60; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 230px; overflow-y: auto; margin: 0; padding: 0; list-style: none;
  background: var(--panel-2); border: 1px solid var(--red-dim); border-radius: 3px;
  box-shadow: 0 8px 24px var(--ombre, rgba(0,0,0,.6));
}
.ac__l li {
  padding: .5rem .7rem; cursor: pointer; font-size: .88rem; color: var(--fg-2);
  display: flex; justify-content: space-between; gap: .8rem; align-items: baseline;
}
.ac__l li b { color: var(--fg); font-weight: 400; }
.ac__l li em { font-style: normal; color: var(--red-txt); }
.ac__l li small { font-family: var(--mono); font-size: .7rem; color: var(--faint); }
.ac__l li.on, .ac__l li:hover { background: rgba(192,57,43,.16); }

/* ── Pont vers le site ───────────────────────────────────────────
   Posée par pont.js sur l'accueil des outils quand on arrive depuis
   el8.fr. C'est la barre du site, telle qu'on vient de la quitter : les
   valeurs sont celles de .nav, .theme et .signal dans assets/css/el8.css,
   couleurs comprises. Elle prenait les couleurs des outils, et depuis la
   peau atelier ça se voyait : fond plus clair, bouton de thème d'une
   autre allure. Si la barre du site change, celle-ci doit suivre. */
.pont {
  /* Les jetons du site, pas ceux des outils. */
  --s-barre: rgba(8,8,8,.92); --s-bg: #080808; --s-fg: #e8e8e8;
  --s-fg3: rgba(232,232,232,.38); --s-mid: #9a9a9a; --s-dim: #222;
  --s-line: rgba(255,255,255,.08); --s-red-txt: #e05141;
  /* La gouttière du site, pas celle des outils : le EL8 doit tomber
     exactement où il était sur la page qu'on vient de quitter. */
  --gut-site: clamp(1.25rem, 4vw, 3rem);
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  height: 54px; padding: 0 var(--gut-site);
  background: var(--s-barre); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--s-line);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) .pont {
    --s-barre: rgba(242,242,240,.92); --s-bg: #f2f2f0; --s-fg: #141414;
    --s-fg3: rgba(20,20,20,.5); --s-mid: #575757; --s-dim: #cfcfcd;
    --s-line: rgba(0,0,0,.12); --s-red-txt: #a32b1e;
  }
}
:root[data-theme="clair"] .pont {
  --s-barre: rgba(242,242,240,.92); --s-bg: #f2f2f0; --s-fg: #141414;
  --s-fg3: rgba(20,20,20,.5); --s-mid: #575757; --s-dim: #cfcfcd;
  --s-line: rgba(0,0,0,.12); --s-red-txt: #a32b1e;
}
/* Le filet rouge du haut de page (.signal sur el8.fr). */
.pont::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(192,57,43,.55) 22%, var(--red) 50%, rgba(192,57,43,.55) 78%, transparent);
  opacity: .5; pointer-events: none;
}
.pont__mark {
  font-family: var(--mono); font-size: .8rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--s-fg); text-decoration: none; margin-right: auto;
  transition: color var(--t);
}
.pont__mark:hover { color: var(--s-red-txt); }
.pont__links { display: flex; align-items: center; gap: .25rem; }
.pont__links a {
  font-family: var(--cond); font-weight: 300;
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--s-fg3); text-decoration: none;
  padding: .45rem .7rem; white-space: nowrap; position: relative;
  transition: color var(--t);
}
.pont__links a:hover { color: var(--s-fg); }
.pont__links a[aria-current="page"] { color: var(--s-fg); }
.pont__links a[aria-current="page"]::after {
  content: ''; position: absolute; left: .7rem; right: .7rem; bottom: .1rem;
  height: 1px; background: var(--red);
}
/* Le bouton de thème rejoint la barre du site, avec l'allure qu'il y a. */
.pont .theme, .atelier .pont .theme {
  margin-left: 1rem; min-height: 32px; padding: .3rem .55rem; line-height: 1;
  background: none; border: 1px solid var(--s-dim); border-radius: 3px;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--s-mid);
}
.pont .theme:hover, .atelier .pont .theme:hover { color: var(--s-fg); border-color: var(--s-mid); }

/* Sur l'index, la barre d'outil ne porte plus que « Outils » et la marque,
   que la barre du site dit déjà : elle s'efface, et il ne reste qu'une
   seule barre. Le lien de signalement descend dans le pied de page. */
body.a-pont .bar { display: none; }
body.a-pont .tfoot__sig { display: inline; }
.tfoot__sig { display: none; margin-left: auto; }

/* Au téléphone, comme sur el8.fr : la marque, le burger, le thème, et
   les six liens dans le panneau qu'il ouvre. Les six serrés sur une
   ligne ne ressemblaient plus au site. */
@media (max-width: 800px) {
  .pont .bar__burger { margin-right: 0; }
  .pont .bar__burger span, .pont .bar__burger::before, .pont .bar__burger::after { background: var(--s-fg); }
  .pont__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 0;
    background: var(--s-bg); border-bottom: 1px solid var(--s-line);
  }
  .pont__links.ouvert { display: flex; }
  .pont__links a { padding: .85rem var(--gut-site); font-size: 1rem; }
  .pont__links a[aria-current="page"]::after { left: var(--gut-site); right: auto; width: 18px; bottom: .55rem; }
}
@media print { .pont { display: none !important; } }

/* Une hypothèse posée à côté de ce qu'elle produit : une marge, un rendement.
   Elle appartient à l'intitulé, pas au résultat, et se lit en second. */
.row__k small {
  display: block; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .06em; color: var(--faint); margin-top: .1rem;
}