/* ═══════════════════════════════════════════════════════
   KAMGAENERGY — Atelier tableau (onglet du simulateur)

   ⚠ ISOLATION : toutes les règles sont préfixées `.at-` ET portées par
   `#atStudio`. Aucune balise nue (header, main, aside, button…) n'est ciblée :
   la page hôte contient déjà une navigation, un <main> et des boutons, qu'une
   feuille non cloisonnée aurait réécrits.

   Le module reprend la palette du site (vert #05a705, texte #1d1d1f, surfaces
   blanches) plutôt que le thème sombre d'origine. Seul le coffret dessiné garde
   ses teintes réalistes : c'est l'objet représenté, pas l'habillage.
   ═══════════════════════════════════════════════════════ */

#atStudio{
  position:relative;
  --at-surface:#ffffff;
  --at-surface-2:#f6f7f8;
  --at-line:rgba(0,0,0,.10);
  --at-line-strong:rgba(0,0,0,.18);
  --at-ink:#1d1d1f;
  --at-muted:#86868b;
  --at-accent:#05a705;
  --at-accent-soft:rgba(5,167,5,.08);
  --at-live:#c0392b;
  --at-neutral:#2e86de;
  --at-earth:#2fa84f;
  --at-dc:#0e828f;
  --at-mono:ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;

  display:grid;
  grid-template-columns:250px minmax(0,1fr) 290px;
  gap:0;
  border:1px solid var(--at-line);
  border-radius:16px;
  overflow:hidden;
  background:var(--at-surface);
  box-shadow:0 8px 30px rgba(0,0,0,.06);
  color:var(--at-ink);
  font-size:14px;
}

/* ── Barre d'outils ── */
#atStudio .at-bar{
  grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;background:var(--at-surface-2);border-bottom:1px solid var(--at-line);
}
#atStudio .at-spacer{flex:1;min-width:0;display:flex;align-items:center}
/* ── Le nom du coffret ──
   Discret tant qu'on ne s'y intéresse pas : ni cadre ni fond, juste le titre.
   Il se révèle au survol et devient un vrai champ à la saisie — la convention
   des éditeurs de documents, qui évite d'ajouter une boîte de plus dans une
   barre qui en compte déjà quinze. */
#atStudio .at-titre{
  width:100%;max-width:420px;min-width:0;border:1px solid transparent;background:none;
  font:800 .95rem/1.2 inherit;color:var(--at-ink,#1d1d1f);
  padding:7px 10px;border-radius:9px;text-overflow:ellipsis;
  transition:background .15s,border-color .15s}
#atStudio .at-titre:hover{background:var(--at-surface-2,rgba(0,0,0,.04))}
#atStudio .at-titre:focus{outline:none;background:#fff;border-color:var(--at-accent,#05a705);
  box-shadow:0 0 0 3px rgba(5,167,5,.14)}
#atStudio .at-titre::placeholder{color:var(--at-muted,#9aa2ab);font-weight:600}
#atStudio .at-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
/* Séparateur de groupe : les raccourcis se lisent par familles — construire,
   câbler, éprouver, archiver — et non comme une file de quatorze icônes. */
#atStudio .at-sep{width:1px;height:22px;background:var(--at-line,rgba(0,0,0,.14));margin:0 2px;flex:none}
/* Commandes conservées dans le document mais retirées de la vue : leurs
   gestionnaires servent encore, appelés par le menu d'export. Les supprimer
   aurait obligé à recopier leur traitement ailleurs. */
#atStudio .at-cache{display:none!important}
/* ── Menu d'export ── */
#atStudio .at-menu{position:relative;flex:none}
#atStudio .at-menu .at-caret{margin-left:-2px;opacity:.8}
#atStudio .at-menu-panel{
  position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:274px;
  background:var(--at-surface,#fff);border:1px solid var(--at-line,rgba(0,0,0,.12));
  border-radius:12px;padding:6px;box-shadow:0 12px 34px rgba(0,0,0,.18)}
#atStudio .at-menu-panel[hidden]{display:none}
#atStudio .at-menu-panel button{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  gap:1px 10px;width:100%;text-align:left;border:0;background:none;cursor:pointer;
  padding:8px 10px;border-radius:9px;font-family:inherit;color:var(--at-ink,#1d1d1f)}
#atStudio .at-menu-panel button svg{grid-row:1 / span 2;align-self:center;opacity:.75}
#atStudio .at-menu-panel button b{font-size:.82rem;font-weight:700}
/* La ligne d'explication dit à quoi sert le format : « .json » ne parle à
   personne, « pour le rouvrir et le modifier » se comprend sans formation. */
#atStudio .at-menu-panel button small{font-size:.7rem;color:var(--at-muted,#6b7a70);line-height:1.35}
#atStudio .at-menu-panel button:hover{background:var(--at-surface-2,rgba(0,0,0,.05))}
#atStudio .at-menu-panel button:hover svg{opacity:1}
#atStudio .at-menu-panel button:focus-visible{outline:2px solid var(--at-accent,#05a705);outline-offset:-2px}
#atStudio .at-menu-sep{height:1px;background:var(--at-line,rgba(0,0,0,.1));margin:5px 8px}
@media(max-width:1080px){
  /* Ancré au bord droit de l'écran plutôt qu'au bouton : dans un ruban qui
     défile, un menu suspendu à son bouton sort du cadre avec lui. */
  #atStudio .at-menu-panel{position:fixed;right:12px;left:auto;top:auto;min-width:0;width:calc(100vw - 24px);max-width:320px}
}
/* Un raccourci qui commande un état l'affiche : sous tension, simulation en
   cours, fils visibles, mode câblage. Sans ce retour, on clique deux fois pour
   savoir où l'on en est. */
#atStudio .at-btn.at-ico[aria-pressed="true"]{background:var(--at-accent);border-color:var(--at-accent);color:#fff}
#atStudio .at-btn.at-ico[aria-pressed="true"] svg{stroke:#fff}

#atStudio .at-btn{
  background:var(--at-surface);border:1px solid var(--at-line-strong);border-radius:9px;
  padding:8px 12px;font-family:inherit;font-size:.78rem;font-weight:600;color:var(--at-ink);
  cursor:pointer;white-space:nowrap;transition:all .16s;
}
#atStudio .at-btn:hover{border-color:var(--at-accent);color:#047857;background:var(--at-accent-soft)}
#atStudio .at-btn:focus-visible{outline:2px solid var(--at-accent);outline-offset:2px}
#atStudio .at-btn.at-primary{background:var(--at-accent);border-color:var(--at-accent);color:#fff}
#atStudio .at-btn.at-primary:hover{filter:brightness(1.07);color:#fff}
#atStudio .at-btn.at-danger:hover{border-color:#fca5a5;color:#b91c1c;background:#fef2f2}
#atStudio .at-btn[disabled]{opacity:.4;cursor:not-allowed}
/* Boutons réduits à leur icône : carrés, l'intitulé passe dans `title`. */
#atStudio .at-btn.at-ico{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;flex:none}
#atStudio .at-btn.at-ico svg{display:block}
/* Bouton composite : icône suivie de son intitulé. Sur mobile l'intitulé
   disparaît et il rejoint le format carré de ses voisins. */
#atStudio .at-btn.at-ico-m{display:inline-flex;align-items:center;justify-content:center;
  gap:7px;flex:none}
#atStudio .at-btn.at-ico-m svg{display:block}
#atStudio .at-btn.at-primary svg{stroke:#fff}
#atStudio .at-btn.at-ico.at-primary svg{stroke:#fff}
#atStudio .at-seg{display:flex;background:var(--at-surface);border:1px solid var(--at-line-strong);
  border-radius:9px;overflow:hidden}
#atStudio .at-seg button{background:transparent;border:0;padding:8px 13px;font-family:inherit;
  font-size:.78rem;font-weight:600;cursor:pointer;color:var(--at-muted)}
#atStudio .at-seg button[aria-pressed="true"]{background:var(--at-accent);color:#fff}

/* ── Colonnes latérales ── */
#atStudio .at-side{background:var(--at-surface);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  max-height:640px}
#atStudio .at-side.at-left{border-right:1px solid var(--at-line)}
#atStudio .at-side.at-right{border-left:1px solid var(--at-line)}
#atStudio .at-sec-title{
  font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--at-muted);
  padding:14px 14px 7px;position:sticky;top:0;background:var(--at-surface);z-index:2;
}
#atStudio .at-cat{padding:0 10px 10px}
/* `[hidden]` de l'agent utilisateur perd contre les règles d'affichage
   ci-dessous, plus spécifiques : sans ces deux lignes, la recherche comptait
   juste ses résultats mais n'en masquait aucun à l'écran. */
#atStudio .at-cat[hidden],#atStudio .at-item[hidden]{display:none !important}
/* Titres de rubrique en gris : la couleur du site est réservée au plan et aux
   actions. Une navigation n'a pas à réclamer l'attention. */
#atStudio .at-cat h4{
  font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--at-muted);
  margin:12px 4px 7px;display:flex;align-items:center;gap:8px;
}
#atStudio .at-cat h4:after{content:"";flex:1;height:1px;background:var(--at-line)}
#atStudio .at-item{
  position:relative;
  display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:grab;
  border:1px solid transparent;user-select:none;
  /* `pan-y` laisse le doigt faire défiler la liste ; le double appui, lui,
     est détecté en JavaScript. `none` bloquait tout défilement. */
  touch-action:pan-y;
}
/* Appui en cours : l'appareil se surligne, on sait que le geste est pris. */
#atStudio .at-item.at-arming{
  background:var(--at-accent-soft);border-color:var(--at-accent);
  transform:scale(.985);transition:transform .18s ease
}
/* Le premier appui ne pose rien : il faut le dire sur l'article lui-même. Le
   bandeau du bas est facile à manquer au doigt, il tombe sous la main. */
#atStudio .at-item.at-arming:after{
  content:"appuyez encore";position:absolute;right:7px;top:50%;transform:translateY(-50%);
  background:var(--at-accent);color:#fff;font-size:.56rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 7px;border-radius:999px;
  pointer-events:none;white-space:nowrap;z-index:2
}
#atStudio .at-item:hover{background:var(--at-surface-2);border-color:var(--at-line)}
#atStudio .at-item:active{cursor:grabbing}
#atStudio .at-item svg{flex:none;display:block}
#atStudio .at-item .at-nm{font-size:.78rem;line-height:1.25;font-weight:600}
#atStudio .at-item .at-sub{font-size:.65rem;color:var(--at-muted);font-family:var(--at-mono)}
#atStudio .at-item .at-grow{flex:1;min-width:0}
#atStudio .at-net{display:inline-block;font-family:var(--at-mono);font-size:.55rem;font-weight:800;
  letter-spacing:.06em;padding:1px 6px;border-radius:4px;margin-left:6px;vertical-align:middle}
#atStudio .at-net.at-ac{background:rgba(46,134,222,.12);color:#1d4e89;border:1px solid rgba(46,134,222,.35)}
#atStudio .at-net.at-dc{background:rgba(14,130,143,.12);color:#0b6570;border:1px solid rgba(14,130,143,.4)}
#atStudio .at-info-btn{
  flex:none;width:19px;height:19px;border-radius:50%;border:1px solid var(--at-line-strong);
  background:var(--at-surface);color:var(--at-muted);font-size:.65rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
}
#atStudio .at-info-btn:hover{background:var(--at-accent);color:#fff;border-color:var(--at-accent)}
#atStudio .at-note{
  margin:0 4px 10px;padding:9px 10px;border-radius:8px;background:rgba(14,130,143,.06);
  border:1px solid rgba(14,130,143,.22);font-size:.68rem;line-height:1.55;color:var(--at-muted)
}
#atStudio .at-note b{color:var(--at-dc)}

/* ── Plan de travail ── */
#atStudio .at-stage{
  position:relative;overflow:auto;background:
    radial-gradient(circle at 25% 12%,#fbfcfc 0,var(--at-surface-2) 70%);
  padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px;
  /* Le plan porte la hauteur du module. Depuis que les panneaux latéraux se
     replient, ils ne la portent plus : sans ce minimum, un coffret vide
     réduisait tout l'atelier à quelques centaines de pixels. */
  min-height:520px;
  max-height:640px;
}
/* Filigrane : le même grillage que la page d'accueil — deux dégradés d'un
   pixel croisés au pas de 64 px. Porté par un pseudo-élément plutôt que par
   `background` : l'opacité ne doit frapper que la trame, jamais le coffret ni
   les panneaux posés dessus. */
#atStudio .at-stage:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.3;
  background-image:
    linear-gradient(rgba(5,167,5,.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(5,167,5,.11) 1px, transparent 1px);
  background-size:64px 64px;
}
/* Le contenu repasse au-dessus du filigrane. */
#atStudio .at-board,#atStudio .at-hint,#atStudio .at-case{position:relative;z-index:1}

/* ── Fiche explicative d'un cas d'école ── */
#atStudio .at-case{
  width:min(100%,720px);background:var(--at-surface);border:1px solid var(--at-line);
  border-left:3px solid var(--at-accent);border-radius:12px;padding:16px 20px;
  box-shadow:0 2px 10px rgba(0,0,0,.05)
}
#atStudio .at-case[hidden]{display:none}
#atStudio .at-case h4{margin:0 0 12px;font-size:.95rem;font-weight:800;color:var(--at-ink)}
#atStudio .at-case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
#atStudio .at-case-grid span{display:block;font-size:.6rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--at-accent);margin-bottom:4px}
#atStudio .at-case-grid p{margin:0;font-size:.74rem;line-height:1.6;color:var(--at-muted)}
#atStudio .at-case-note{margin:14px 0 0;padding-top:11px;border-top:1px solid var(--at-line);
  font-size:.68rem;color:var(--at-muted);font-style:italic}
@media(max-width:820px){#atStudio .at-case-grid{grid-template-columns:1fr}}
/* Origine en haut à gauche : la boîte est redimensionnée en JavaScript à la
   taille effectivement affichée, le dessin doit donc y démarrer au coin. Le
   centrage horizontal reste l'affaire du plan de travail (`align-items`). */
#atStudio .at-board{transform-origin:top left;filter:drop-shadow(0 18px 34px rgba(0,0,0,.16))}
#atStudio .at-board svg{display:block;max-width:none}
/* Poignée d'extrémité d'un conducteur : saisissable pour le reporter ailleurs. */
#atStudio .at-wend{cursor:grab;transition:r .12s}
#atStudio .at-wend:hover{r:10}
#atStudio .at-wend:active{cursor:grabbing}
#atStudio .at-hint{
  color:var(--at-muted);font-size:.72rem;text-align:center;max-width:560px;line-height:1.65;padding-bottom:10px
}
#atStudio .at-hint kbd{
  font-family:var(--at-mono);font-size:.6rem;background:var(--at-surface);border:1px solid var(--at-line-strong);
  border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:var(--at-ink)
}

/* ── Inspecteur ── */
#atStudio .at-field{padding:0 14px 12px}
#atStudio .at-field label{display:block;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--at-muted);margin-bottom:5px;font-weight:700}
#atStudio .at-field input[type=text],
#atStudio .at-field input[type=number]{
  width:100%;background:var(--at-surface);border:1px solid var(--at-line-strong);border-radius:8px;
  color:var(--at-ink);padding:8px 9px;font-size:.8rem;font-family:inherit
}
#atStudio .at-field input:focus,#atStudio .at-field select:focus{
  outline:none;border-color:var(--at-accent);box-shadow:0 0 0 3px var(--at-accent-soft)}
#atStudio .at-row2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
/* Zoom et annulation : deux boutons carrés et un bouton large. */
#atStudio .at-row3{display:grid;grid-template-columns:44px 44px 1fr;gap:9px}
/* Quatre commandes de déplacement, à parts égales. */
#atStudio .at-move{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
#atStudio .at-move .at-btn.at-ico{width:100%;height:40px}
/* Le sélecteur de vue occupe toute la largeur du panneau. */
#atStudio .at-seg.at-seg-wide{width:100%}
#atStudio .at-seg.at-seg-wide button{flex:1}
#atStudio .at-chips{display:flex;flex-wrap:wrap;gap:6px}
#atStudio .at-chip{
  background:var(--at-surface);border:1px solid var(--at-line-strong);border-radius:20px;padding:5px 11px;
  font-size:.72rem;cursor:pointer;font-family:var(--at-mono);color:var(--at-ink)
}
#atStudio .at-chip[aria-pressed="true"]{background:var(--at-accent);border-color:var(--at-accent);
  color:#fff;font-weight:700}
#atStudio .at-chip i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;
  vertical-align:baseline;border:1px solid rgba(0,0,0,.2)}
#atStudio .at-hint-sm{font-size:.68rem;color:var(--at-muted);line-height:1.55;margin-top:7px}
#atStudio .at-empty{padding:16px 14px;color:var(--at-muted);font-size:.75rem;line-height:1.6}
#atStudio .at-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--at-line);
  border-top:1px solid var(--at-line);border-bottom:1px solid var(--at-line);margin-top:6px}
/* Nombre impair d'indicateurs : le dernier occupe toute la largeur au lieu de
   laisser une case vide. */
#atStudio .at-stat:last-child:nth-child(odd){grid-column:1/-1}
#atStudio .at-stat{background:var(--at-surface);padding:11px 14px}
#atStudio .at-stat b{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.02em}
#atStudio .at-stat span{font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;color:var(--at-muted)}
#atStudio .at-rowlist{padding:0 10px 14px}
#atStudio .at-rowitem{
  display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;font-size:.75rem;
  border:1px solid var(--at-line);margin-bottom:6px;background:var(--at-surface-2)
}
#atStudio .at-rowitem .at-rn{font-family:var(--at-mono);font-size:.65rem;color:var(--at-muted);width:22px;flex:none}
#atStudio .at-rowitem .at-grow{flex:1;min-width:0}
#atStudio .at-mini{
  background:var(--at-surface);border:1px solid var(--at-line-strong);border-radius:6px;width:26px;height:26px;
  cursor:pointer;font-size:.78rem;line-height:1;flex:none;color:var(--at-ink);font-family:inherit
}
#atStudio .at-mini:hover{background:var(--at-accent-soft);border-color:var(--at-accent)}
#atStudio .at-mini[aria-pressed="true"]{background:#c77b3e;border-color:#c77b3e;color:#fff}
#atStudio .at-mini.at-danger:hover{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
#atStudio .at-netbtn{width:34px;font-family:var(--at-mono);font-size:.55rem;font-weight:800}
/* Section masquée : la ligne s'estompe, sans disparaître de la liste. */
#atStudio .at-rowitem.at-off{opacity:.5}
#atStudio .at-rowitem.at-off .at-rn{text-decoration:line-through}
#atStudio .at-eye[aria-pressed="true"]{background:var(--at-surface-2);border-color:var(--at-line-strong);
  color:var(--at-muted)}
#atStudio .at-netbtn[data-net="ac"]{color:var(--at-neutral);border-color:var(--at-neutral)}
#atStudio .at-netbtn[data-net="dc"]{color:var(--at-dc);border-color:var(--at-dc)}
/* Rangée mixte : elle porte les deux réseaux, sa pastille ne peut emprunter
   ni la couleur alternatif ni la couleur continu. */
#atStudio .at-netbtn[data-net="mix"]{color:#5A45C7;border-color:#8E7BEF;font-size:.48rem}
#atStudio .at-learn{margin:0 14px 14px;border:1px solid var(--at-line);border-radius:10px;
  background:var(--at-surface-2);overflow:hidden}
#atStudio .at-learn summary{cursor:pointer;padding:9px 12px;font-size:.72rem;font-weight:700;
  color:var(--at-accent);list-style:none;display:flex;align-items:center;gap:7px}
#atStudio .at-learn summary::-webkit-details-marker{display:none}
#atStudio .at-learn .at-body{padding:2px 12px 12px;font-size:.7rem;line-height:1.6;color:var(--at-muted)}
#atStudio .at-learn .at-body b{color:var(--at-ink);display:block;font-size:.58rem;text-transform:uppercase;
  letter-spacing:.08em;margin:8px 0 2px}
#atStudio .at-learn .at-body b:first-child{margin-top:0}
#atStudio .at-learn .at-body .at-safe{color:#b91c1c}
#atStudio .at-learn .at-body{max-height:none}

/* ── Fantôme de glisser, fiche, guide, message : hors du conteneur ── */
/* Corbeille de glisser — mobile.
   Au doigt, il n'existe ni touche « Suppr » ni clic droit : retirer un module
   demandait de le sélectionner puis d'aller chercher une commande dans un
   panneau, alors que la main est déjà sur l'appareil. La cible est posée au
   même endroit à chaque fois, en bas au centre, à portée de pouce.
   `pointer-events:none` : c'est le glisser qui teste la zone, pas le survol —
   un pointeur capturé ne déclencherait de toute façon aucun événement ici. */
#atStudio .at-trash,.at-trash{position:fixed;left:50%;transform:translateX(-50%);
  /* Au-dessus de tout : la cible ne vit que le temps d'un glisser, elle ne peut
     donc masquer durablement aucun élément de la page — mais un bandeau fixe
     (cookies, barre d'action) la recouvrirait au pire moment.
     `env(safe-area-inset-bottom)` la tient au-dessus de la barre d'accueil. */
  bottom:calc(26px + env(safe-area-inset-bottom, 0px));
  z-index:99990;pointer-events:none;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;width:96px;height:96px;border-radius:50%;
  background:rgba(255,255,255,.94);color:#c0392b;border:2px dashed #d98880;
  box-shadow:0 10px 30px rgba(0,0,0,.18);backdrop-filter:blur(6px);
  font:700 10.5px/1.2 Outfit,-apple-system,sans-serif;letter-spacing:.02em;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.at-trash[hidden]{display:none}
/* Armée : le lâcher supprimera. L'état doit être lisible sans quitter des yeux
   le module que l'on tient. */
.at-trash.armed{background:#c0392b;color:#fff;border-color:#c0392b;border-style:solid;
  transform:translateX(-50%) scale(1.14)}
.at-trash svg{display:block}

#atGhost{position:fixed;z-index:6000;pointer-events:none;opacity:.92;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.35));display:none}

#atInfoPop{
  position:fixed;z-index:6100;width:290px;max-width:88vw;background:#fff;border:1px solid rgba(0,0,0,.12);
  border-radius:12px;padding:14px 16px;box-shadow:0 20px 44px rgba(0,0,0,.22);display:none;
  font-size:.78rem;line-height:1.55;color:#1d1d1f;font-family:inherit
}
#atInfoPop.at-on{display:block}
/* Les fiches sont denses : elles défilent plutôt que de sortir de l'écran. */
#atInfoPop{overflow-y:auto;overscroll-behavior:contain}
#atInfoPop .at-rep{color:#0b6570}
#atInfoPop .at-rep b{color:#0b6570}
#atInfoPop .at-close{position:absolute;top:8px;right:9px;background:transparent;border:0;
  color:#86868b;cursor:pointer;font-size:.95rem;padding:2px 5px}
#atInfoPop h4{margin:0 16px 8px 0;font-size:.95rem;font-weight:800;color:#1d1d1f}
#atInfoPop p{margin:0 0 9px}
#atInfoPop p b{color:#05a705;display:block;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.09em;margin-bottom:2px;font-weight:800}
#atInfoPop .at-safe{color:#b91c1c}
#atInfoPop .at-safe b{color:#b91c1c}

#atGuideOverlay{position:fixed;inset:0;background:rgba(10,12,14,.55);z-index:6200;display:none;
  align-items:flex-start;justify-content:center;padding:5vh 20px;overflow-y:auto}
#atGuideOverlay.at-on{display:flex}
#atGuideModal{background:#fff;border-radius:18px;max-width:800px;width:100%;padding:28px 30px 32px;
  position:relative;margin-bottom:5vh;color:#1d1d1f;box-shadow:0 24px 70px rgba(0,0,0,.3)}
#atGuideModal .at-closeBtn{position:absolute;top:16px;right:16px}
#atGuideModal h3{font-size:1.4rem;font-weight:800;margin:0 6px 4px 0;letter-spacing:-.02em}
#atGuideModal h3 span{color:#05a705}
#atGuideModal .at-lead{color:#86868b;font-size:.8rem;margin:0 0 18px;max-width:560px;line-height:1.6}
#atGuideModal h4{font-size:.9rem;font-weight:800;color:#05a705;margin:24px 0 10px;
  border-bottom:1px solid rgba(0,0,0,.08);padding-bottom:7px}
#atGuideModal p,#atGuideModal li{font-size:.82rem;line-height:1.7}
#atGuideModal ul{margin:0 0 8px;padding-left:20px}
#atGuideModal .at-cmp{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 4px}
#atGuideModal .at-cmp>div{background:#f6f7f8;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:13px 15px}
#atGuideModal .at-cmp h5{margin:0 0 8px;font-size:.82rem;font-weight:800;text-transform:uppercase}
#atGuideModal .at-cmp .at-c-ac h5{color:#2e86de}
#atGuideModal .at-cmp .at-c-dc h5{color:#0e828f}
#atGuideModal .at-sw{display:flex;align-items:center;gap:7px;font-size:.72rem;font-family:var(--at-mono)}
#atGuideModal .at-swatches{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 2px}
#atGuideModal .at-sw i{width:16px;height:16px;border-radius:4px;display:inline-block;border:1px solid rgba(0,0,0,.2)}
#atGuideModal .at-formula{font-family:var(--at-mono);background:#f6f7f8;border:1px solid rgba(0,0,0,.08);
  border-radius:8px;padding:9px 14px;display:inline-block;margin:4px 10px 6px 0;font-size:.85rem}
#atGuideModal .at-warn{background:#fef2f2;border:1px solid #fca5a5;border-radius:10px;padding:11px 14px;
  font-size:.78rem;line-height:1.6;margin-top:6px}
#atGuideModal .at-warn b{color:#b91c1c}

#atToast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:#1d1d1f;color:#fff;padding:10px 16px;border-radius:9px;
  font-size:.8rem;opacity:0;transition:.22s;z-index:6300;pointer-events:none;max-width:min(90vw,420px);
  font-family:inherit
}
#atToast.at-on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Panneaux coulissants (mobile) ── */
#atStudio .at-sheet-head{display:none}

/* ── Responsive ── */
#atStudio .at-mobtabs{display:none}
@media(max-width:1080px){
  #atStudio{grid-template-columns:1fr}

  /* Barre d'outils : une seule ligne qui défile, plutôt que quatre lignes
     empilées qui repoussaient le plan hors de l'écran. */
  #atStudio .at-bar{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:7px;padding:10px 12px;
    /* `pan-x` dit au navigateur que ce ruban défile horizontalement : il cesse
       d'hésiter entre défilement et appui, et le geste devient fluide. */
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain
  }
  #atStudio .at-bar::-webkit-scrollbar{display:none}
  /* Le vide n'avait rien à faire dans un ruban qui défile ; le titre, si. Il
     garde une largeur mesurée pour ne pas repousser les outils hors de vue. */
  #atStudio .at-spacer{flex:0 0 auto}
  #atStudio .at-titre{width:44vw;max-width:250px;font-size:.86rem;padding:7px 8px}
  #atStudio .at-tools{flex-wrap:nowrap}
  #atStudio .at-btn{padding:8px 11px;font-size:.74rem}
  #atStudio .at-btn.at-ico{width:36px;height:36px;padding:0}
  /* Les raccourcis restent sur mobile. La barre y est un ruban qui défile : ils
     s'y rangent à la file, atteignables d'un glissement, plutôt que d'obliger à
     ouvrir un panneau pour chaque commande. Le nom `at-web` ne désigne donc plus
     qu'un groupe, non une restriction d'affichage. */
  /* Cibles tactiles : 44 px de haut, seuil au-dessous duquel la frappe rate. */
  #atStudio .at-search{min-height:44px}
  /* Un intitulé au milieu d'icônes déséquilibre le ruban : sur certains Android
     le texte débordait de son bouton comprimé et recouvrait les suivants.
     L'export garde donc sa seule icône, son intitulé restant dans `title`. */
  #atStudio .at-btn.at-ico-m{width:36px;height:36px;padding:0;gap:0}
  #atStudio .at-btn.at-ico-m span{display:none}
  /* Cause du recouvrement : les boutons à intitulé se laissaient comprimer,
     et leur texte en `nowrap` débordait du cadre rétréci. Plus aucun ne cède. */
  #atStudio .at-bar .at-btn,#atStudio .at-tools .at-btn{flex:none}

  #atStudio .at-side{
    position:fixed;left:0;right:0;bottom:0;top:auto;height:min(64vh,580px);z-index:5900;max-height:none;
    border-top:1px solid var(--at-line);border-radius:16px 16px 0 0;transform:translateY(102%);
    transition:transform .24s ease;box-shadow:0 -20px 40px rgba(0,0,0,.22);
    padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px))
  }
  #atStudio .at-side.at-open{transform:translateY(0)}
  /* En-tête du panneau : titre, poignée et fermeture explicite. */
  #atStudio .at-sheet-head{
    display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:4;
    padding:16px 14px 10px;background:var(--at-surface);border-bottom:1px solid var(--at-line);
    /* La tête est une poignée : le glissé vertical lui revient, sinon le
       défilement du panneau s'en emparerait avant elle. */
    touch-action:none;cursor:grab;user-select:none
  }
  #atStudio .at-sheet-head:active{cursor:grabbing}
  /* Zone de saisie élargie autour de la barre, sans la grossir visuellement. */
  #atStudio .at-sheet-head:after{
    content:"";position:absolute;top:0;left:0;right:0;height:26px
  }
  #atStudio .at-sheet-head span{font-size:.78rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.08em;color:var(--at-muted)}
  #atStudio .at-sheet-close{
    margin-left:auto;width:32px;height:32px;border:1px solid var(--at-line-strong);background:var(--at-surface);
    border-radius:9px;font-size:1.2rem;line-height:1;color:var(--at-ink);cursor:pointer;font-family:inherit
  }
  #atStudio .at-sheet-head:before{
    content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
    width:42px;height:5px;border-radius:3px;background:var(--at-line-strong);
    transition:background .15s
  }
  #atStudio .at-sec-title{top:53px}            /* sous l'en-tête collant */

  #atStudio .at-stage{max-height:none;min-height:340px;padding:12px 8px 16px}
  /* Accès aux panneaux : deux icônes ancrées en haut à droite du module,
     hors du flux de la barre — elles restent visibles même quand celle-ci
     défile horizontalement. */
  #atStudio .at-mobtabs{
    display:flex;position:absolute;top:10px;right:10px;z-index:20;gap:6px
  }
  #atStudio .at-bar{padding-right:96px}
  #atStudio .at-mobtabs .at-btn[aria-pressed="true"]{background:var(--at-accent);
    border-color:var(--at-accent);color:#fff}
  #atStudio .at-mobtabs .at-btn[aria-pressed="true"] svg{stroke:#fff}

  /* L'aide détaillée n'a pas sa place sur un petit écran : l'essentiel suffit. */
  #atStudio .at-hint{font-size:.68rem;line-height:1.55}
  #atStudio .at-hint .at-hint-more{display:none}
}
@media(max-width:700px){#atGuideModal .at-cmp{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  #atStudio *,#atToast{transition:none!important;animation:none!important}
}
@media print{
  #atStudio .at-bar,#atStudio .at-side,#atStudio .at-mobtabs,#atStudio .at-hint,#atToast{display:none!important}
  #atStudio{display:block;border:none;box-shadow:none}
  #atStudio .at-stage{background:#fff;overflow:visible;max-height:none;padding:0}
  /* À l'impression le plan reprend sa taille réelle : la boîte doit se libérer
     des dimensions calculées pour le zoom, sinon le coffret serait rogné. */
  #atStudio .at-board{filter:none;transform:none!important;
    width:auto!important;height:auto!important}
}

/* ── Câbles hors coffret ──
   Une ligne par câble : pastille de couleur, nom modifiable, déplacement le
   long de la paroi, retrait. */
#atStudio .at-extrow{
  display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:8px;
  border:1px solid var(--at-line);margin-bottom:6px;background:var(--at-surface);cursor:pointer
}
#atStudio .at-extrow.at-on{border-color:var(--at-accent);background:var(--at-accent-soft)}
#atStudio .at-extrow input{flex:1;min-width:0;font-size:.72rem;padding:5px 7px}
#atStudio .at-extrow .at-btn.at-ico{width:26px;height:26px;padding:0;font-size:.9rem;line-height:1;flex:none}
#atStudio .at-extdot{
  flex:none;width:12px;height:12px;border-radius:3px;border:1px solid var(--at-line-strong)
}

/* ── Coffrets enregistrés en base ── */
#atStudio .at-dbrow{
  display:flex;align-items:stretch;gap:6px;margin:0 14px 6px;
}
#atStudio .at-dbrow.at-on .at-dbopen{border-color:var(--at-accent);background:var(--at-accent-soft)}
#atStudio .at-dbopen{
  flex:1;min-width:0;text-align:left;background:var(--at-surface);
  border:1px solid var(--at-line);border-radius:9px;padding:8px 10px;
  font-family:inherit;cursor:pointer;color:var(--at-ink)
}
#atStudio .at-dbopen:hover{border-color:var(--at-accent);background:var(--at-accent-soft)}
#atStudio .at-dbopen b{display:block;font-size:.76rem;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#atStudio .at-dbopen span{display:block;font-size:.63rem;color:var(--at-muted);
  font-family:var(--at-mono);margin-top:2px}
#atStudio .at-dbrow .at-btn.at-ico{width:32px;height:auto;padding:0;font-size:.9rem;flex:none}

/* ── Assistant : diagnostic et dimensionnement ── */
#atStudio .at-coach-score{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px;
  font-size:.68rem;color:var(--at-muted)
}
#atStudio .at-coach-pill{
  display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
  padding:0 6px;border-radius:999px;font-size:.72rem;font-weight:800;color:#fff
}
#atStudio .at-coach-pill.at-bloquant{background:#b91c1c}
#atStudio .at-coach-pill.at-avis{background:#d97706}
#atStudio .at-coach-pill.at-conseil{background:#0e828f}
#atStudio .at-coach-score small{margin-right:8px}
#atStudio .at-coach-list{display:grid;gap:7px;max-height:340px;overflow-y:auto}
/* Sans liseré : la gravité se lit au fond du bloc et à la couleur du titre.
   Le contour reste uniforme sur les quatre côtés. */
#atStudio .at-coach-item{
  border:1px solid var(--at-line);border-radius:9px;
  padding:8px 10px;background:var(--at-surface)
}
#atStudio .at-coach-item b{display:block;font-size:.75rem;font-weight:700;margin-bottom:3px}
#atStudio .at-coach-item span{display:block;font-size:.68rem;line-height:1.55;color:var(--at-muted)}
#atStudio .at-coach-item.at-bloquant{background:#fef2f2}
#atStudio .at-coach-item.at-bloquant b{color:#b91c1c}
#atStudio .at-coach-item.at-avis{background:#fffbeb}
#atStudio .at-coach-item.at-avis b{color:#b45309}
#atStudio .at-coach-item.at-conseil{background:rgba(14,130,143,.05)}
#atStudio .at-coach-item.at-conseil b{color:#0b6570}
#atStudio .at-coach-item.at-ok{background:var(--at-accent-soft)}
#atStudio .at-coach-item.at-ok b{color:#046c04}
#atStudio .at-coach-form{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#atStudio .at-coach-form label{
  display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--at-muted);margin-bottom:3px
}
#atStudio .at-coach-form input{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:.76rem;padding:6px 8px;
  border:1px solid var(--at-line-strong);border-radius:7px;background:var(--at-surface);color:var(--at-ink)
}
#atStudio .at-coach-res{
  display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:10px
}
#atStudio .at-coach-res div{
  background:var(--at-surface-2);border:1px solid var(--at-line);border-radius:9px;padding:8px 10px
}
#atStudio .at-coach-res b{display:block;font-size:.95rem;font-weight:800;color:var(--at-accent)}
#atStudio .at-coach-res span{display:block;font-size:.6rem;color:var(--at-muted);margin-top:2px}

/* ── Caractéristiques d'un conducteur ── */
#atStudio .at-cablefields{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
#atStudio .at-cablefields .at-cf-full{grid-column:1/-1}
#atStudio .at-cablefields label{
  display:block;font-size:.6rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--at-muted);margin-bottom:3px
}
#atStudio .at-cablefields input{
  width:100%;box-sizing:border-box;font-family:inherit;font-size:.76rem;padding:6px 8px;
  border:1px solid var(--at-line-strong);border-radius:7px;background:var(--at-surface);color:var(--at-ink)
}
#atStudio .at-cablefields input:focus{outline:none;border-color:var(--at-accent)}

/* ── Accordéon du panneau de droite ──
   Le titre devient un bouton ; son contenu se replie. On masque par `display`
   plutôt que par une hauteur animée : les rubriques contiennent des champs et
   des listes de hauteur imprévisible, qu'une transition rendrait saccadée. */
#atStudio .at-side.at-right .at-sec-title.at-acc-head{
  display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  border-top:1px solid var(--at-line);margin-top:0;
  transition:background .15s
}
#atStudio .at-side.at-right .at-sec-title.at-acc-head:first-child{border-top:0}
#atStudio .at-side.at-right .at-sec-title.at-acc-head:hover{background:var(--at-surface-2);color:var(--at-accent)}
#atStudio .at-side.at-right .at-sec-title.at-acc-head:focus-visible{
  outline:2px solid var(--at-accent);outline-offset:-2px
}
#atStudio .at-acc-chev{
  margin-left:auto;flex:none;transition:transform .2s ease;color:var(--at-muted)
}
#atStudio .at-sec-title.at-open .at-acc-chev{transform:rotate(180deg);color:var(--at-accent)}
#atStudio .at-sec-title.at-open{color:var(--at-accent)}
#atStudio .at-acc-body{display:none;padding-bottom:6px}
#atStudio .at-sec-title.at-open + .at-acc-body{display:block}
@media(prefers-reduced-motion:reduce){ #atStudio .at-acc-chev{transition:none} }

/* ── Accordéon du catalogue (panneau de gauche) ──
   Chaque rubrique est déjà un conteneur : on replie par le style, sans
   réorganiser le balisage — contrairement au panneau de droite, dont les
   titres et les contenus sont des frères. */
/* Un filet sépare les rubriques, comme dans le panneau de droite. Il vit sur
   la rubrique et non sur son titre : replié ou déplié, le trait reste au même
   endroit. */
#atStudio #atCatalog .at-cat{border-top:1px solid var(--at-line);margin:0}
#atStudio #atCatalog .at-cat:first-child{border-top:0}
#atStudio #atCatalog .at-cat h4{
  cursor:pointer;user-select:none;padding:11px 4px;margin:0;border-radius:8px;
  transition:background .15s,color .15s
}
/* Le trait de remplissage du titre ferait doublon avec le filet. */
#atStudio #atCatalog .at-cat h4:after{display:none}
#atStudio #atCatalog .at-cat h4:hover{background:var(--at-surface-2);color:var(--at-ink)}
#atStudio #atCatalog .at-cat h4:focus-visible{outline:2px solid var(--at-line-strong);outline-offset:-2px}
/* Le trait de séparation ne se justifie que sur une rubrique dépliée. */
#atStudio #atCatalog .at-cat:not(.at-open) > *:not(h4){display:none}
#atStudio .at-cat-n{
  flex:none;font-size:.6rem;font-weight:800;color:var(--at-muted);
  background:var(--at-surface-2);border:1px solid var(--at-line);
  border-radius:999px;padding:1px 7px;margin-left:auto
}
/* Le catalogue reste neutre : le vert est réservé au plan et aux actions, pas
   à la simple navigation entre rubriques. */
#atStudio .at-cat.at-open h4{color:var(--at-ink)}
#atStudio .at-cat.at-open .at-cat-n{
  background:var(--at-line);border-color:var(--at-line-strong);color:var(--at-ink)
}
#atStudio #atCatalog .at-cat h4 .at-acc-chev{margin-left:6px;flex:none;transition:transform .2s ease}
#atStudio #atCatalog .at-cat.at-open h4 .at-acc-chev{transform:rotate(180deg)}

/* ── Barres de défilement propres au module ──
   La feuille commune les habille en vert sur piste noire, ce qui convient aux
   sections sombres du site mais tranche dans un module clair : deux traits
   verts apparaissaient de part et d'autre du plan. On les rend discrètes. */
#atStudio ::-webkit-scrollbar{width:7px;height:7px}
#atStudio ::-webkit-scrollbar-track{background:transparent}
#atStudio ::-webkit-scrollbar-thumb{background:var(--at-line-strong);border-radius:5px}
#atStudio ::-webkit-scrollbar-thumb:hover{background:var(--at-muted)}
/* ── Barre de recherche du catalogue ──
   Elle reste au sommet du panneau pendant le défilement : sans cela, relancer
   une recherche imposait de remonter la liste des 62 appareils. */
#atStudio .at-searchbar{position:sticky;top:0;z-index:3;background:var(--at-surface);
  padding:4px 0 10px;margin:0 0 2px}
/* Champ en pastille : la forme annonce la recherche avant même l'icône, et le
   distingue au premier regard des listes déroulantes du panneau, rectangulaires.
   Au repos il est posé, creusé dans le fond ; au focus il remonte en blanc. */
#atStudio .at-search{display:flex;align-items:center;gap:9px;min-height:38px;
  padding:0 6px 0 13px;width:80%;margin:0 auto;
  border:1px solid transparent;border-radius:999px;background:var(--at-surface-2);
  color:var(--at-muted);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
#atStudio .at-search:hover{background:#edeff1}
#atStudio .at-search:focus-within{background:var(--at-surface);border-color:var(--at-accent);
  box-shadow:0 0 0 3px var(--at-accent-soft),0 1px 3px rgba(0,0,0,.05)}
#atStudio .at-search > svg{flex:none;transition:color .18s ease}
#atStudio .at-search:focus-within > svg{color:var(--at-accent)}
#atStudio .at-search input{flex:1;min-width:0;border:none;background:none;outline:none;
  font:600 .78rem inherit;color:var(--at-ink);padding:9px 0}
#atStudio .at-search input::placeholder{color:var(--at-muted);font-weight:500}
/* Compteur logé dans le champ : une ligne séparée décalait toute la liste à
   chaque frappe. En vert il se lit comme un résultat, en rouge comme une
   impasse. */
#atStudio .at-search-n{flex:none;font:700 .66rem var(--at-mono);line-height:1.25;
  color:var(--at-accent);background:var(--at-accent-soft);border-radius:999px;
  padding:3px 8px;min-width:22px;text-align:center}
#atStudio .at-search-n:empty{display:none}
#atStudio .at-search-n.at-vide{color:#c0392b;background:rgba(192,57,43,.10)}
#atStudio .at-search-clear{flex:none;display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:none;border-radius:50%;background:none;
  font-size:1.05rem;line-height:1;color:var(--at-muted);cursor:pointer;
  transition:background .15s ease,color .15s ease}
#atStudio .at-search-clear:hover{background:rgba(0,0,0,.07);color:var(--at-ink)}

/* Pastilles de réseau : le filtre par réseau devient atteignable directement,
   et se désarme d'un geste — il n'était accessible que par double-clic sur un
   rail, et rien ne disait comment revenir au catalogue entier. */
/* Invite du champ quand le catalogue est restreint à un réseau : le seul
   repère visible de ce filtre, les pastilles ayant été retirées. */
#atStudio .at-search input.at-filtre::placeholder{color:var(--at-dc);opacity:1;font-weight:700}

/* Portion trouvée : sur plusieurs résultats, elle dit d'un coup d'œil pourquoi
   chacun est là. */
#atStudio .at-nm-t mark{background:#FFF1A8;color:inherit;border-radius:2px;padding:0 1px}

/* Recherche infructueuse : un message qui explique et propose une issue, plutôt
   qu'une liste vide qu'on prend pour une panne. */
#atStudio .at-search-empty{font-size:.72rem;line-height:1.5;color:var(--at-muted);
  background:var(--at-surface-2);border:1px solid var(--at-line);border-radius:8px;
  padding:10px 12px;margin:0 0 8px}
#atStudio .at-search-empty b{color:var(--at-ink)}
#atStudio .at-search-empty button{margin-top:6px;display:block;border:1px solid var(--at-line-strong);
  background:var(--at-surface);border-radius:7px;padding:4px 9px;font:600 .7rem inherit;
  color:var(--at-ink);cursor:pointer}
#atStudio .at-search-empty button:hover{border-color:var(--at-accent);color:#047857}

/* Bandeau du filtre réseau du catalogue. Il doit se voir : un catalogue
   restreint sans mention visible ferait croire à des appareils disparus. */
#atStudio .at-catfilter{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 8px;padding:7px 10px;border-radius:8px;background:var(--at-surface-2);
  border:1px solid var(--at-line);font-size:.72rem;color:var(--at-muted)}
#atStudio .at-catfilter b{color:var(--at-ink)}
#atStudio .at-catfilter button{border:1px solid var(--at-line-strong);background:var(--at-surface);
  border-radius:7px;padding:4px 9px;font:600 .7rem inherit;color:var(--at-ink);cursor:pointer}
#atStudio .at-catfilter button:hover{border-color:var(--at-accent);color:#047857}

#atStudio{scrollbar-width:thin;scrollbar-color:var(--at-line-strong) transparent}

/* ── Listes déroulantes ──
   Le rendu natif varie d'un système à l'autre : flèche minuscule sur macOS,
   bloc gris sur Windows, hauteur insuffisante au doigt. On neutralise
   l'habillage et l'on dessine le chevron, pour un contrôle identique partout
   et une cible confortable. */
#atStudio select{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  width:100%;box-sizing:border-box;
  background-color:var(--at-surface);
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 9px center;
  background-size:15px 15px;
  padding:9px 32px 9px 11px;          /* place réservée au chevron */
  border:1px solid var(--at-line-strong);border-radius:8px;
  color:var(--at-ink);font-family:inherit;font-size:.8rem;line-height:1.3;
  min-height:38px;cursor:pointer;transition:border-color .15s,box-shadow .15s;
  text-overflow:ellipsis;
}
#atStudio select:hover{border-color:var(--at-muted)}
#atStudio select:focus{
  outline:none;border-color:var(--at-accent);box-shadow:0 0 0 3px var(--at-accent-soft)
}
#atStudio select:disabled{
  opacity:.5;cursor:not-allowed;background-color:var(--at-surface-2)
}
/* Sur les listes étroites — calibre, courbe, réseau — le chevron se rapproche
   pour ne pas rogner le texte. */
#atStudio .at-row2 select,#atStudio .at-coach-form select{
  padding:8px 26px 8px 9px;background-position:right 6px center;background-size:13px 13px;
  font-size:.76rem;min-height:34px
}
/* Les options héritent du thème clair : sur certains systèmes, la liste
   ouverte reprenait un fond sombre illisible. */
#atStudio select option{background:var(--at-surface);color:var(--at-ink)}
@media(max-width:1080px){
  /* Au doigt, une cible de 44 px est le minimum confortable. */
  #atStudio select{min-height:44px;font-size:.84rem;padding:11px 34px 11px 12px}
  #atStudio .at-row2 select,#atStudio .at-coach-form select{min-height:40px;font-size:.8rem}
}

/* ── Guide : sommaire, tableaux et renvois vers le blog ── */
#atGuideOverlay .at-g-toc{
  /* `position:static` explicite : la feuille du site cible largement les
     éléments de navigation, et un héritage suffirait à ressortir ce bloc de
     la modale. */
  position:static;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px;padding:12px;
  background:#f6f7f8;border:1px solid rgba(0,0,0,.08);border-radius:10px}
#atGuideOverlay .at-g-toc a{font-size:.7rem;font-weight:600;color:#1d1d1f;text-decoration:none;
  padding:4px 9px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.10);
  transition:all .15s}
#atGuideOverlay .at-g-toc a:hover{border-color:#05a705;color:#047857}
#atGuideOverlay .at-g-sec{scroll-margin-top:12px}
#atGuideOverlay .at-g-tab{width:100%;border-collapse:collapse;font-size:.76rem;margin:10px 0 4px}
#atGuideOverlay .at-g-tab th{background:#f0f2f3;border:1px solid rgba(0,0,0,.10);
  padding:6px 8px;text-align:left;font-weight:700}
#atGuideOverlay .at-g-tab td{border:1px solid rgba(0,0,0,.08);padding:6px 8px;vertical-align:top}
#atGuideOverlay .at-g-tab tbody tr:nth-child(odd){background:#fafbfb}
/* Renvoi vers un article : discret sous le chapitre, il prolonge sans couper la lecture. */
#atGuideOverlay .at-g-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:12px 0 2px;padding:10px 12px;background:rgba(5,167,5,.05);
  border-left:3px solid #05a705;border-radius:0 8px 8px 0}
#atGuideOverlay .at-g-lab{font-size:.62rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#047857}
#atGuideOverlay .at-g-art{display:inline-flex;flex-direction:column;gap:1px;text-decoration:none;
  padding:5px 11px;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:8px;
  transition:all .15s}
#atGuideOverlay .at-g-art:hover{border-color:#05a705;transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.07)}
#atGuideOverlay .at-g-art-t{font-size:.74rem;font-weight:700;color:#1d1d1f;line-height:1.3}
#atGuideOverlay .at-g-art-m{font-size:.62rem;color:#86868b;text-transform:uppercase;letter-spacing:.04em}
#atGuideOverlay .at-g-arts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
#atGuideOverlay .at-g-blog[hidden]{display:none}

/* ══ Simulation ══
   Le courant ne se voit pas : il faut donc l'écrire. Des tirets blancs
   défilent le long du conducteur dans le sens où il circule — de la source
   vers le récepteur. Un chemin en défaut se signale d'abord par sa couleur,
   ensuite par son rythme : le rouge du court-circuit bat plus vite que le
   reste, parce que c'est ce qu'on doit voir en premier. */
@keyframes at-flux-run { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
@keyframes at-defaut-bat { 0%,100% { opacity:.18; } 50% { opacity:.62; } }
.at-flux { stroke-dasharray: 7 13; animation: at-flux-run .95s linear infinite; }
.at-flux-rev { animation-direction: reverse; }
.at-flux-vif { animation-duration: .38s; }
.at-defaut { animation: at-defaut-bat 1.1s ease-in-out infinite; }
.at-defaut-chaud { animation-duration: 1.7s; }
/* Mouvement réduit : la couleur et le liseré disent déjà tout, seul le
   défilement disparaît. */
@media (prefers-reduced-motion: reduce) {
  .at-flux, .at-defaut { animation: none; }
  .at-defaut { opacity: .5; }
}

/* Le compte rendu, sous le bouton : une ligne par constat, un filet coloré
   à gauche pour le classer sans avoir à le lire. */
.at-simu { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.at-simu-l { border-left: 3px solid rgba(0,0,0,.14); padding: 6px 0 6px 9px;
  background: rgba(0,0,0,.03); border-radius: 0 6px 6px 0; }
.at-simu-l b { display: block; font-size: .74rem; font-weight: 700; line-height: 1.25; }
.at-simu-l span { display: block; margin-top: 2px; font-size: .69rem; line-height: 1.35; opacity: .72; }
.at-simu-ko { border-left-color: #E11D48; }
.at-simu-ko b { color: #E11D48; }
.at-simu-hot { border-left-color: #F97316; }
.at-simu-hot b { color: #C2560B; }
.at-simu-hv { border-left-color: #A855F7; }
.at-simu-hv b { color: #8B32DC; }
.at-simu-ok { border-left-color: #05a705; }
.at-simu-ok b { color: #05a705; }

/* Chaque constat se lit en trois temps — ce qu'on voit, ce que cela produit,
   comment le corriger. L'intitulé de chaque temps passe en petites capitales
   sur sa propre ligne : l'œil retrouve le même rythme d'un défaut à l'autre,
   et peut sauter directement au remède. */
.at-simu-l span i { display: block; margin-bottom: 1px; font-style: normal;
  font-size: .58rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .55; }
.at-simu-l span + span { margin-top: 5px; }

/* ══ Conception assistée ══
   Un éditeur de prompt reste un champ de texte : ce qui compte est qu'on voie
   d'un coup d'œil ce qui est demandé et ce que l'expert a répondu. Les étapes
   sont numérotées dans une pastille, comme une notice de montage. */
.at-ia-txt { width: 100%; box-sizing: border-box; resize: vertical; font-family: inherit;
  font-size: .76rem; line-height: 1.45; padding: 8px 9px; border-radius: 8px;
  border: 1px solid rgba(0,0,0,.14); background: #fff; color: inherit; }
.at-ia-txt:focus { outline: 2px solid #05a705; outline-offset: 1px; border-color: #05a705; }
.at-ia-role { margin-top: 8px; }
.at-ia-role > summary { cursor: pointer; font-size: .7rem; font-weight: 700;
  letter-spacing: .02em; opacity: .7; padding: 4px 0; }
.at-ia-role > summary:hover { opacity: 1; color: #05a705; }
.at-ia-role .at-ia-txt { margin-top: 6px; font-size: .71rem; }
.at-btn.at-mini { width: 100%; margin-top: 6px; font-size: .7rem; padding: 6px 8px; }

.at-ia-res { margin-top: 10px; border-top: 1px solid rgba(0,0,0,.10); padding-top: 9px; }
.at-ia-resume { margin: 0 0 4px; font-size: .78rem; line-height: 1.45; font-weight: 600; }
.at-ia-meta { font-size: .66rem; opacity: .55; margin-bottom: 8px; }
.at-ia-etape { display: block; padding: 7px 0 7px 0; border-top: 1px solid rgba(0,0,0,.07); }
.at-ia-etape:first-of-type { border-top: none; }
.at-ia-etape > b { display: flex; align-items: baseline; gap: 7px;
  font-size: .75rem; font-weight: 700; line-height: 1.3; }
.at-ia-etape > b > span { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; background: #05a705; color: #fff;
  font-size: .62rem; font-weight: 800; }
.at-ia-etape > span { display: block; margin-top: 4px; padding-left: 25px;
  font-size: .72rem; line-height: 1.5; opacity: .78; white-space: pre-wrap; }