/* ══════════════════════════════════════════════════════════════════════════
   OUTILS-ATELIER.CSS — coquille de la page publique /outils.

   Parti pris (demande Lou, 2026-09-03) : /outils n'est PAS une page de site avec
   un outil dedans, c'est un ÉCRAN D'APPLICATION plein écran. Le décor étoilé de
   la vitrine n'y est donc pas : on reprend le fond, la barre et les cartes du
   dashboard, pour qu'un visiteur non connecté voie exactement ce qu'il verrait
   avec un compte. Exception depuis le 2026-09-17 : le hub mobile passe sous le
   ciel étoilé (§ 8) ; l'outil ouvert, lui, reste sur le fond clair.

   Ce fichier ne redéfinit AUCUN composant de calcul : tools-calc.generated.css
   (généré depuis dashboard.html) reste seul maître du rendu des calculateurs.
   Il apporte quatre choses :
     1. la coquille app (fond, barre du haut, en-tête, pied) ;
     2. la visibilité de la section hors dashboard ;
     3. le peu de mise en page propre à /outils (le responsive de l'atelier, lui,
        est remonté dans dashboard.html — voir § 3) ;
     4. le patron mobile de l'app mobile : grille de cartes → outil plein écran.

   Chargé APRÈS tools-calc.generated.css : c'est l'ordre qui rend 2 et 4 possibles
   sans toucher au fichier généré.
   ══════════════════════════════════════════════════════════════════════════ */

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

:root {
  --at-encre:   #0f172a;
  --at-texte:   #334155;
  --at-doux:    #586880;   /* slate-500 assombri : 4,6:1 sur le fond de page (AA), 5,7:1 sur blanc */
  --at-accent:  #30c39e;
  --at-bord:    #e2e8f0;
  --at-barre-h: 56px;
}

/* ── 1. Coquille app ──────────────────────────────────────────────────────── */

html { background: #e4e8f2; -webkit-text-size-adjust: 100%; }
body.at-body {
  /* Exactement le fond du dashboard : le visiteur reconnaît l'app. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: linear-gradient(135deg, #eef0f4 0%, #d8dce4 100%);
  background-attachment: fixed;
  color: var(--at-texte);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.at-topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  height: var(--at-barre-h); padding: 0 22px;
  background: linear-gradient(180deg, #1e293b 0%, #16233a 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 14px rgba(15,23,42,0.18);
}
.at-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.at-brand img { display: block; width: 34px; height: 34px; }
.at-brand-nom { color: #fff; font-size: 1.05em; font-weight: 800; letter-spacing: -0.2px; }
.at-topbar-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.14); }
.at-topbar-titre { color: #cbd5e1; font-size: 0.9em; font-weight: 600; }
.at-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Même bouton que « Se connecter » de la landing (.btn-ghost) : contour discret,
   pas de plein — la page est un outil, pas une page de vente. */
.at-btn-ghost {
  display: inline-flex; align-items: center; border-radius: 999px;
  padding: 8px 18px; font-size: 0.82em; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  color: #cbd5e1; border: 1px solid rgba(255,255,255,0.16);
  transition: color .2s ease, border-color .2s ease;
}
.at-btn-ghost:hover { color: #fff; border-color: rgba(48,195,158,0.55); }
.at-main {
  flex: 1;
  width: 100%; max-width: 1280px;
  margin: 0 auto; padding: 12px 26px 40px;
}

/* Le titre de page ne s'affiche pas (demande Lou 2026-09-03 : l'écran s'ouvre sur les
   outils, pas sur un bandeau de texte). Il reste dans le document pour les lecteurs
   d'écran et l'indexation — masqué à la façon d'un « sr-only », sans display:none qui
   le retirerait aussi de l'arbre d'accessibilité. */
.at-titre-lecteur {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Pied de page : MÊME organisation que celui de la landing (liens · réseaux ·
   copyright sur une ligne, en space-between), transposée sur fond clair. Les noms
   de classes .footer-links / .footer-social / .footer-copy sont ceux de la landing,
   volontairement : le balisage est copié tel quel, seules les couleurs changent. */
.at-foot {
  border-top: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.55);
  padding: 16px 26px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.at-foot-note {
  flex-basis: 100%; order: -1;
  color: var(--at-doux); font-size: 0.78em; line-height: 1.55;
  padding-bottom: 12px; border-bottom: 1px solid rgba(15,23,42,0.06);
}
.at-foot .footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.at-foot .footer-links a { color: var(--at-doux); text-decoration: none; font-size: 0.83em; transition: color .2s; }
.at-foot .footer-links a:hover { color: var(--at-accent); }
.at-foot .footer-social { display: flex; align-items: center; gap: 10px; }
.at-foot .footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid rgba(15,23,42,0.10);
  color: var(--at-doux); text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.at-foot .footer-social a:hover { color: var(--at-accent); border-color: var(--at-accent); background: rgba(48,195,158,0.07); }
.at-foot .footer-copy { color: #94a3b8; font-size: 0.8em; }

/* ── 2. La section, hors de son dashboard ─────────────────────────────────── */

/* Dans l'app, .content-section est display:none et c'est showSection() qui pose
   .active. Ici il n'y a qu'une section et personne pour l'activer. */
.at-main .content-section { display: block; }
[data-section="tools"] a { color: #1d4ed8; }

/* ── 3. Mise en page propre à la page ─────────────────────────────────────── */
/* La couche responsive de l'atelier vivait ICI dans la première version de la page :
   dans dashboard.html, les six règles mobiles des grilles étaient écrites SANS le
   préfixe [data-section="tools"] et perdaient toutes en spécificité contre leur règle
   de base — la section n'a jamais été responsive. Depuis le 2026-09-03 le correctif
   est REMONTÉ DANS dashboard.html (donc dans tools-calc.generated.css) : le dashboard
   en profite aussi, et il n'y a plus qu'un seul endroit à maintenir. Idem pour la
   gouttière de .result-detail-row. Ne pas les redupliquer ici.

   Ne reste que ce qui est vrai pour /outils SEULEMENT : le rembourrage vient de
   .at-main et du panneau plein écran, pas de .calc-main-content. */
@media (max-width: 768px) {
  [data-section="tools"] .calc-main-content { padding: 0; }
}

/* ── 4. Patron mobile : hub de cartes → outil plein écran ─────────────────── */
/* Reprise fidèle du parcours de l'app mobile (public/mobile/index.html) : une
   grille de cartes, et l'outil choisi s'ouvre plein écran avec une barre de retour.
   Les panneaux sont les MÊMES que sur desktop — c'est leur présentation qui change,
   pas leur contenu ni leur code. */

/* Le hub n'existe QUE sous 768px : au-dessus, ce sont les pills d'onglets de l'app
   qui font la navigation, comme dans le dashboard. */
/* Cartes du hub — VERRE DÉPOLI SOMBRE sur le ciel étoilé (§ 8), retours Lou du 2026-09-17 :
   les cartes claires de l'app (habillage du 2026-09-04) contrastaient trop avec le ciel.
   Plus petites et plus espacées, elles se lisent comme des boutons : titre EN HAUT,
   centré, sur une ligne ; icône centrée dessous, dans la teinte de l'outil (plus de
   filigrane rogné). Teinte en triplet RGB par --section-rgb (outils-public.js). */
.at-hub { display: none; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; margin: 4px 14px 8px; }   /* rangées égales : sous 340 px certains titres passent sur deux lignes */
.at-hub[hidden] { display: none; }
@media (max-width: 768px) { .at-hub:not([hidden]) { display: grid; } }
.at-hub-carte {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 10px 12px; min-height: 80px;
  /* Voile de la teinte de l'outil sur une base marine translucide : le ciel reste
     deviné à travers, flouté. */
  background:
    linear-gradient(160deg, rgba(var(--section-rgb, 100, 116, 139), 0.26) 0%, rgba(var(--section-rgb, 100, 116, 139), 0.06) 100%),
    rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid rgba(var(--section-rgb, 100, 116, 139), 0.38);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 18px rgba(0, 0, 0, 0.28);
  text-align: center; cursor: pointer; font: inherit; color: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease;
}
.at-hub-carte:active { transform: scale(0.97); }
.at-hub-carte:focus-visible { outline: 2px solid var(--at-accent); outline-offset: 2px; }
/* (Classe historique « watermark » : l'icône n'est plus un filigrane, le JS garde le nom.)
   Teinte de l'outil éclaircie de 30 % de blanc : les tons indigo et bleu restent lisibles
   sur le verre sombre. */
.at-hub-watermark {
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  color: rgb(var(--section-rgb, 100, 116, 139));
  color: color-mix(in srgb, rgb(var(--section-rgb, 100, 116, 139)) 70%, #fff);
}
.at-hub-watermark .oi { font-size: 26px; }
.at-hub-watermark .oi svg { stroke-width: 1.8; }
.at-pback { font-size: 18px; }
/* Le libellé porte des retours à la ligne (vignette) : white-space:normal les replie. */
.at-hub-nom { order: -1; font-size: 14px; font-weight: 700; color: #e8edf5; line-height: 1.2; letter-spacing: -0.1px; white-space: normal; }
.at-hub-desc { display: none; }

/* Barre de l'outil ouvert (mobile) : titre + retour, comme les overlays de l'app mobile.
   Même bleu nuit que la barre du menu principal (.at-topbar) : on garde la thématique
   d'un outil à l'autre (demande Lou 2026-09-17 ; elle était blanche). */
.at-pbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  display: flex; align-items: center; gap: 12px;
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 14px 0;
  background: linear-gradient(180deg, #1e293b 0%, #16233a 100%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 2px 14px rgba(15,23,42,0.18);
}
.at-pbar[hidden] { display: none; }
.at-pback {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06);
  color: #e2e8f0; font-size: 15px; cursor: pointer;
}
.at-pback:active { background: rgba(255,255,255,0.14); }
.at-pbar-titre { font-size: 16px; font-weight: 800; color: #fff; }

@media (max-width: 768px) {
  .at-main { padding: 16px 14px 28px; }

  /* Les pills d'onglets laissent la place au hub de cartes. */
  [data-section="tools"] .calc-tabs { display: none !important; }

  /* Au repos, aucun panneau n'est affiché : on est sur le hub. */
  [data-section="tools"] .tab-panel,
  [data-section="tools"] .tab-panel.active { display: none; }

  /* Outil ouvert : le panneau actif prend tout l'écran, sous la barre de retour. */
  body.at-outil-ouvert { overflow: hidden; }
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active {
    display: block;
    position: fixed; inset: 0; z-index: 1100;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: linear-gradient(135deg, #eef0f4 0%, #d8dce4 100%);
    /* 52 px de barre + 24 px d'air avant la première carte (demande Lou 2026-09-17). */
    padding: calc(76px + env(safe-area-inset-top, 0px)) 14px calc(24px + env(safe-area-inset-bottom, 0px));
    animation: none;
  }

  /* Le titre de la carte répétait celui de la barre de retour (« Section câble »
     deux fois de suite). On garde celui de la barre — le patron de l'app mobile —
     et on récupère la hauteur. Le bandeau « Résultats », lui, reste : il sépare la
     saisie du résultat. */
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .calc-container > .calc-card:first-child > .calc-card-header { display: none; }

  /* Chrome rend focalisable toute zone défilante et peint son anneau par défaut :
     l'outil ouvert (position:fixed + overflow-y:auto) affichait un filet orange de
     1px sur tout son bord gauche. On le retire au :focus simple et on le conserve
     au :focus-visible, pour ne rien enlever à la navigation clavier. */
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active:focus { outline: none; }
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active:focus-visible {
    outline: 2px solid var(--at-accent); outline-offset: -2px;
  }

  /* Confort tactile — mêmes cibles que l'app mobile. */
  [data-section="tools"] .calc-card { border-radius: 16px; }
  [data-section="tools"] .calc-card-body { padding: 18px 15px; }
  /* 12 tuiles sur 3 colonnes (4 rangées) plutôt que 2 (6 rangées) : moins de
     défilement, cibles encore ≥ 56 px de haut. */
  [data-section="tools"] .circuit-type-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  [data-section="tools"] .circuit-type-btn { padding: 10px 4px; min-height: 58px; }
  [data-section="tools"] .circuit-type-btn i { font-size: 18px; margin-bottom: 4px; }
  [data-section="tools"] .circuit-type-btn span { font-size: 10.5px; line-height: 1.2; display: block; }
  [data-section="tools"] .calc-btn { padding: 15px 20px; font-size: 15px; }
  /* iOS zoome à la mise au point sur tout champ sous 16px. Les champs de l'app sont
     à 14px (dashboard = PWA installée) ; ici la page s'ouvre dans Safari mobile, où
     ce zoom déforme la mise en page à chaque saisie. */
  [data-section="tools"] .form-group input,
  [data-section="tools"] .form-group select,
  [data-section="tools"] .input-with-unit input { font-size: 16px !important; }

  /* Barre du haut : le titre de section cède la place, le bouton « Accueil » reste
     (c'est le seul chemin de retour depuis l'écran d'outils). */
  .at-topbar { padding: 0 14px; gap: 10px; }
  .at-topbar-sep, .at-topbar-titre { display: none; }
  .at-brand-nom { font-size: 0.98em; }

  /* Pied de page : même repli que la landing — icônes sans cadre, copyright centré
     sur sa propre ligne. */
  .at-foot { padding: 16px 14px; gap: 10px; }
  .at-foot .footer-links { gap: 10px 14px; justify-content: center; flex: 1 1 100%; }
  .at-foot .footer-links a { font-size: 0.78em; }
  .at-foot .footer-social { gap: 14px; margin: 0 auto; }
  .at-foot .footer-social a { width: auto; height: auto; border: none; }
  .at-foot .footer-copy { width: 100%; text-align: center; order: 3; }
}

@media (max-width: 400px) {
  .at-topbar-libre { display: none; }
  .at-hub-carte { padding: 12px 8px 11px; }
  [data-section="tools"] .circuit-type-btn span { font-size: 10px; }
}

/* Écrans intermédiaires : le hub reste caché (les pills suffisent), mais on
   redonne de l'air une fois la grille passée en une colonne. */
@media (min-width: 769px) and (max-width: 1100px) {
  .at-main { padding: 20px 18px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="tools"] .tab-panel { animation: none !important; }
  .at-btn:hover { transform: none; }
}

/* ── 5. Mobile : bouton flottant, pastille « Résultat », feuille de résultat ── */
/* Audit #10 (validé Lou 2026-09-03). Sur téléphone, le résultat arrivait SOUS le
   formulaire, hors écran, et le bouton « Calculer » en bas d'un long formulaire.
   Désormais, outil ouvert :
     – le bouton « Calculer » de l'outil FLOTTE en bas de l'écran (c'est le vrai
       bouton du panneau, en position fixe : rien n'est dupliqué, le moteur et le
       calcul en direct continuent de le voir) ;
     – une pastille « Résultat » (valeur de tête + état) apparaît à sa droite dès
       qu'un résultat existe, et rouvre la feuille ;
     – le panneau « Résultats » devient une FEUILLE qui monte du bas de l'écran
       (voile derrière — un ::after du panneau —, poignée, bouton fermer, glisser
       vers le bas, Échap).
   Tout est sous la media query + body.at-outil-ouvert : le desktop ne voit rien.
   Les classes d'état (at-resultat, at-feuille) sont posées par outils-public.js. */
@media (max-width: 768px) {
  /* Retour : cible tactile 44 px (recommandation Apple/WCAG), barre inchangée. */
  .at-pback { width: 44px; height: 44px; }

  /* Place pour le bouton flottant sous le dernier champ. */
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .calc-btn {
    position: fixed; z-index: 1150;
    left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto !important; margin: 0 !important; min-height: 50px;
    box-shadow: 0 10px 28px rgba(15,23,42,0.24) !important;
  }
  /* Un résultat existe : le bouton se resserre, la pastille prend la droite. */
  body.at-outil-ouvert.at-resultat [data-section="tools"] .tab-panel.active .calc-btn { right: 148px; }

  /* Bande derrière le bouton et la pastille (retours Lou 2026-09-17) : d'abord dépolie
     claire, puis au bleu nuit de la barre du haut — l'outil est encadré en haut et en
     bas par la même couleur. Presque opaque, avec le flou, pour garder la matière.
     ::before du panneau, pour la même raison que le voile (couche fermée) : au-dessus
     du formulaire, sous le bouton (1150) et sous le voile de la feuille (1250). Les
     touchers la traversent. Tableaux et Formules n'ont pas de bouton : pas de bande. */
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active:has(.calc-btn)::before {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1140;
    height: calc(78px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94) 0%, rgba(22, 35, 58, 0.97) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 -2px 14px rgba(15, 23, 42, 0.18);
    pointer-events: none;
  }

  .at-chip {
    display: none; position: fixed; z-index: 1150;
    right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 124px; min-height: 50px; padding: 0 12px 0 12px;
    align-items: center; gap: 9px; text-align: left;
    border: 0; border-radius: 12px; background: #0f172a; color: #fff;
    font: inherit; cursor: pointer;
    box-shadow: 0 10px 28px rgba(15,23,42,0.24);
    outline: 1px solid rgba(255,255,255,0.14); outline-offset: -1px;   /* se détache de la bande bleu nuit */
  }
  body.at-outil-ouvert.at-resultat .at-chip { display: inline-flex; }
  .at-chip:active { background: #1e293b; }
  .at-chip-dot {
    flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%;
    background: #94a3b8; box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
  }
  .at-chip[data-etat="success"] .at-chip-dot { background: #34d399; }
  .at-chip[data-etat="warning"] .at-chip-dot { background: #fbbf24; }
  .at-chip[data-etat="error"]   .at-chip-dot { background: #f87171; }
  .at-chip-col { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .at-chip-cap { font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #94a3b8; }
  .at-chip-txt { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Voile sous la feuille : un pseudo-élément DU PANNEAU, pas un élément à part.
     Le panneau ouvert (position:fixed + z-index) est une couche qui enferme sa
     feuille : un voile posé ailleurs dans la page passait AU-DESSUS d'elle — au
     test, les touchers arrivaient sur le voile, jamais sur la feuille. Feuille
     ouverte, le panneau monte aussi au-dessus de la barre de retour et de la
     pastille, que le voile assombrit donc avec le reste ; son défilement est gelé. */
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active::after {
    content: ""; position: fixed; inset: 0; z-index: 1250;
    background: rgba(15,23,42,0.45);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }
  body.at-outil-ouvert.at-feuille [data-section="tools"] .tab-panel.active::after {
    opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease;
  }
  body.at-outil-ouvert.at-feuille [data-section="tools"] .tab-panel.active { z-index: 1400; overflow: hidden; }

  /* La feuille = le panneau « Résultats » de l'outil actif, sorti du flux. */
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .results-panel {
    position: fixed; z-index: 1300; left: 0; right: 0; bottom: 0;
    max-height: 86vh; max-height: 86dvh;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 30px rgba(15,23,42,0.18);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(105%); visibility: hidden;
    transition: transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
  }
  body.at-outil-ouvert.at-feuille [data-section="tools"] .tab-panel.active .results-panel {
    transform: none; visibility: visible;
    transition: transform .32s cubic-bezier(.2,.7,.2,1);
  }
  /* Bandeau collant en tête de feuille, avec sa poignée. Fond OPAQUE (retour Lou
     2026-09-17) : le voile dégradé du canon est translucide, les cases défilaient à
     travers. La couleur passe sous le dégradé, qui reste. */
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .results-header {
    position: sticky; top: 0; z-index: 2;
    background-color: var(--tool-card, #fff) !important;
    padding: 22px 16px 14px;
    gap: 8px; flex-wrap: wrap;
  }
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .results-header::before {
    content: ""; position: absolute; top: 8px; left: 50%;
    width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #cbd5e1;
  }
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .results-header h3 { margin-right: auto; }
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .results-body { padding: 16px 16px 20px; }

  /* Bouton fermer (injecté par outils-public.js dans chaque bandeau). */
  .at-feuille-fermer { display: none; }
  body.at-outil-ouvert [data-section="tools"] .tab-panel.active .at-feuille-fermer {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    border: 1px solid var(--at-bord); background: #fff; color: #334155; cursor: pointer;
    font-size: 16px;
  }
  .at-feuille-fermer:active { background: #f1f5f9; }
}
/* Hors mobile, ni pastille ni voile ni bouton fermer — quoi qu'en disent les classes. */
@media (min-width: 769px) {
  .at-chip, .at-feuille-fermer { display: none !important; }
  [data-section="tools"] .tab-panel::after,
  [data-section="tools"] .tab-panel::before { content: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [data-section="tools"] .tab-panel::after, [data-section="tools"] .results-panel { transition: none !important; }
}

/* ── 6. Thème sombre de la coquille — DÉSACTIVÉ le 2026-09-04 (demande Lou) ──────
   La page ne pose plus data-theme : ces règles sont donc inertes. Elles restent en
   place, prêtes à resservir si le thème revient (le canon --tool-* de dashboard.html
   garde lui aussi sa palette nuit, également inerte). */
/* Les calculateurs eux-mêmes prennent leur palette nuit dans tools-calc.generated.css
   (variables --tool-*, définies dans dashboard.html). Ici : le décor de la page, le hub,
   la barre d'outil, la pastille et la feuille. Même logique de teintes. */
:root[data-theme="dark"] {
  --at-encre: #eef2f8;
  --at-texte: #c3cbdb;
  --at-doux:  #94a1b8;
  --at-bord:  #2c3b5c;
}
:root[data-theme="dark"] html, :root[data-theme="dark"] { background: #0b1220; }
:root[data-theme="dark"] body.at-body { background: linear-gradient(135deg, #111a2e 0%, #0b1220 100%); }
:root[data-theme="dark"] .at-topbar { background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-bottom-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] [data-section="tools"] a { color: #8ab4ff; }
:root[data-theme="dark"] .at-hub-carte {
  background: linear-gradient(135deg, #172238 0%, rgba(var(--section-rgb, 100, 116, 139), 0.23) 100%);
  border-color: rgba(var(--section-rgb, 100, 116, 139), 0.32);
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
:root[data-theme="dark"] .at-hub-watermark { opacity: 0.22; }
:root[data-theme="dark"] .at-hub-nom { color: #dfe6f2; }
:root[data-theme="dark"] .at-pbar { background: #172238; border-bottom-color: #2c3b5c; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
:root[data-theme="dark"] .at-pback { background: #223150; color: #dde4ef; }
:root[data-theme="dark"] .at-pback:active { background: #2c3b5c; }
:root[data-theme="dark"] .at-chip { background: #e8edf5; color: #0f172a; box-shadow: 0 10px 28px rgba(0,0,0,0.45); }
:root[data-theme="dark"] .at-chip:active { background: #d5dce8; }
:root[data-theme="dark"] .at-chip-cap { color: #64748b; }
:root[data-theme="dark"] .at-chip-dot { box-shadow: 0 0 0 3px rgba(15,23,42,0.08); }
/* (spécificité ≥ celle de la règle mobile qui pose le fond blanc) */
:root[data-theme="dark"] body.at-outil-ouvert [data-section="tools"] .tab-panel.active .at-feuille-fermer { background: #1d2a44; border-color: #2c3b5c; color: #dde4ef; }
:root[data-theme="dark"] body.at-outil-ouvert [data-section="tools"] .tab-panel.active .at-feuille-fermer:active { background: #223150; }
:root[data-theme="dark"] .at-foot { background: rgba(15,23,42,0.55); border-top-color: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .at-foot-note { border-bottom-color: rgba(255,255,255,0.06); }
:root[data-theme="dark"] .at-foot .footer-links a { color: #94a1b8; }
:root[data-theme="dark"] .at-foot .footer-social a { color: #94a1b8; border-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .at-foot .footer-copy { color: #64748b; }
@media (max-width: 768px) {
  :root[data-theme="dark"] body.at-outil-ouvert [data-section="tools"] .tab-panel.active { background: linear-gradient(135deg, #111a2e 0%, #0b1220 100%); }
  :root[data-theme="dark"] body.at-outil-ouvert [data-section="tools"] .tab-panel.active .results-panel { box-shadow: 0 -8px 30px rgba(0,0,0,0.45); }
  :root[data-theme="dark"] body.at-outil-ouvert [data-section="tools"] .tab-panel.active .results-header::before { background: #3b4b6a; }
  :root[data-theme="dark"] body.at-outil-ouvert [data-section="tools"] .tab-panel.active::after { background: rgba(2,6,23,0.6); }
}

/* ── 7. Invitation « écran d'accueil » (mobile) ──────────────────────────── */
.at-install { display: none; }
@media (max-width: 768px) {
  .at-install:not([hidden]) {
    display: flex; align-items: center; gap: 12px;
    margin: 14px 14px 4px; padding: 12px 12px 12px 14px;   /* 14 px : alignée sur le retrait du hub */
    background: #fff; border: 1px solid var(--at-bord); border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,0.05);
  }
  body.at-outil-ouvert .at-install { display: none; }
  .at-install-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .at-install-txt b { font-size: 13.5px; color: var(--at-encre); }
  .at-install-txt span { font-size: 12px; color: var(--at-doux); line-height: 1.35; }
  .at-install-btn { padding: 9px 14px; border-radius: 10px; border: 0; background: #0f172a; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
  .at-install-btn[hidden] { display: none; }
  .at-install-x { width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--at-doux); font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; }
  :root[data-theme="dark"] .at-install:not([hidden]) { background: #172238; border-color: #2c3b5c; }
  :root[data-theme="dark"] .at-install-btn { background: #e8edf5; color: #0f172a; }
}

/* ── 8. Ciel étoilé derrière le hub (mobile) ─────────────────────────────── */
/* Proposition Lou du 2026-09-17 : le fond étoilé de la vitrine derrière les cartes.
   Revient EN PARTIE sur le parti pris du 2026-09-03 (en-tête de ce fichier) : seul le
   hub mobile passe sous le ciel. L'outil ouvert garde le fond clair de l'app (son
   panneau plein écran le recouvre, l'animation est en pause) ; le desktop ne change pas.
   Canvas #lightningCanvas = public/js/shared/stars-bg.js, chargé par outils-public.js
   § 9 en mobile seulement. Le script le pose en z-index 0 ; on le descend à -1 plutôt
   que de donner un z-index à .at-main : ce dernier enfermerait le panneau plein écran
   (z 1100) sous la barre du haut (z 60). À -1, le fond doit être porté par <html> :
   celui de <body>, bloc du flux, se peindrait par-dessus le canvas. */
#lightningCanvas { display: none; }
@media (max-width: 768px) {
  /* html.at-sans-ciel : lien profond vers un outil, posée dès le <head> (outils/index.html)
     et retirée par outils-public.js § 9 — évite un éclair sombre avant l'outil clair. */
  html:not(.at-sans-ciel) { background: #0a0f1e; }   /* le fond de la landing */
  body.at-body { background: transparent; }
  #lightningCanvas { display: block; z-index: -1 !important; }
  /* Invitation « écran d'accueil » : même verre sombre que les cartes (une carte blanche
     au milieu du ciel reprenait le contraste retiré aux cartes). */
  .at-install:not([hidden]) {
    background: rgba(15, 23, 42, 0.60); border-color: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  .at-install-txt b { color: #e8edf5; }
  .at-install-txt span, .at-install-x { color: #a3b1c6; }
  /* « Ajouter » dans l'ambiance de la carte (demande Lou : le bouton blanc tranchait) :
     verre teinté de l'accent, pas d'aplat. */
  .at-install-btn {
    background: rgba(48, 195, 158, 0.16); color: #d5f5ec;
    border: 1px solid rgba(48, 195, 158, 0.45);
  }
  .at-install-btn:active { background: rgba(48, 195, 158, 0.26); }
  /* Pied de page sur le ciel : couleurs de la landing. */
  .at-foot { background: rgba(10, 15, 30, 0.60); border-top-color: rgba(255, 255, 255, 0.08); }
  .at-foot-note { color: #94a3b8; border-bottom-color: rgba(255, 255, 255, 0.08); }
  .at-foot .footer-links a, .at-foot .footer-social a { color: #a3b1c6; }
  .at-foot .footer-links a:hover, .at-foot .footer-social a:hover { color: var(--at-accent); }
  .at-foot .footer-copy { color: #8391a7; }
}

/* ── 9. Desktop : panneau latéral des outils ─────────────────────────────── */
/* Demande Lou du 2026-09-17 : aligner le desktop sur l'application (menu à gauche, même
   bleu nuit, icônes au trait) et sur le mobile (mêmes outils, mêmes teintes), et profiter
   de toute la largeur pour aérer les cartes. Les onglets de l'atelier restent dans le DOM
   (tests, mesure) mais ne se voient plus ; la barre du haut cède la place au logo du panneau.
   Liste construite par outils-public.js § 2 bis. Sous 768 px : rien ne change. */
.at-side { display: none; }
@media (min-width: 769px) {
  .at-topbar { display: none; }
  [data-section="tools"] .calc-tabs { display: none !important; }

  .at-side {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: 260px;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);   /* = .sidebar de l'app */
    color: #fff; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.10);
  }
  /* Tête : logo puis « Accueil », avant les outils (retour Lou 2026-09-17). */
  .at-side-tete {
    display: flex; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 26px 22px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .at-side-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
  .at-side-logo img { display: block; width: 48px; height: 48px; margin-bottom: 4px; }
  .at-side-nom { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; color: #fff; }
  .at-side-nom span { color: #34c8a2; }
  .at-side-sous { font-size: 11px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: #94a3b8; }
  .at-side-retour {
    display: flex; align-items: center; justify-content: center; padding: 9px 14px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16);
    color: #cbd5e1; font-size: 13px; font-weight: 700; text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
  }
  .at-side-retour:hover { color: #fff; border-color: rgba(48, 195, 158, 0.55); }

  /* Outils plus grands et plus espacés : la liste occupe la hauteur de la colonne
     (retour Lou 2026-09-17), avec de l'air sous la tête. */
  /* Marges proportionnelles à la hauteur de la fenêtre : la liste tient sans défiler de
     ~720 px à 1 080 px de haut (retour Lou 2026-09-17 : barre de défilement vue à ~950 px). */
  .at-side-menu { flex: 1; overflow-y: auto; padding: clamp(12px, 2.6vh, 28px) 0 12px; }
  .at-side-menu::-webkit-scrollbar { width: 4px; }
  .at-side-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }
  .at-side-filet { height: 1px; margin: clamp(6px, 1.2vh, 14px) 24px; background: rgba(255, 255, 255, 0.08); }
  .at-side-item {
    position: relative; display: flex; align-items: center; gap: 16px; width: 100%;
    padding: clamp(8px, 1.4vh, 15px) 28px; border: 0; background: transparent;
    font: inherit; font-size: 16px; color: #cbd5e1; text-align: left; white-space: nowrap;
    cursor: pointer; transition: background .2s ease, color .2s ease;
  }
  .at-side-item .oi { font-size: 22px; color: #94a3b8; transition: color .2s ease; }
  .at-side-item .oi svg { stroke-width: 1.7; }
  .at-side-item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  .at-side-item:focus-visible { outline: 2px solid var(--at-accent); outline-offset: -2px; }
  /* Outil affiché : fond léger comme l'app, liseré et icône dans la teinte de l'outil. */
  .at-side-item.is-actif { background: rgba(255, 255, 255, 0.08); color: #fff; font-weight: 600; }
  .at-side-item.is-actif::before {
    content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0;
    background: rgb(var(--section-rgb, 52, 200, 162));
  }
  .at-side-item.is-actif .oi,
  .at-side-item:hover .oi {
    color: rgb(var(--section-rgb, 148, 163, 184));
    color: color-mix(in srgb, rgb(var(--section-rgb, 148, 163, 184)) 70%, #fff);
  }

  /* Toute la largeur à droite du panneau, et de l'air dans les cartes (l'ergonomie du
     2026-09-03 les avait resserrées pour tenir sans défiler sous les deux rangées d'onglets,
     qui ne prennent plus de hauteur). */
  /* margin-right 0 : le « margin: 0 auto » de base empêchait la zone de s'étirer dans la colonne flex du body. */
  .at-main { margin: 0 0 0 260px; width: auto; max-width: none; padding: 32px 44px; }
  /* Les cartes de l'outil au centre du fond gris (retour Lou 2026-09-17) : centrées en
     hauteur quand l'outil est plus court que l'écran ; un outil plus long part du haut. */
  .at-main { display: flex; flex-direction: column; justify-content: center; }

  /* Pied allégé (retour Lou 2026-09-17) — puis retiré en desktop le même jour (§ 13, décision
     Lou : « on a déjà toutes ces infos sur la page principale »). Règles conservées pour le cas
     où on le remettrait ; mentions légales, confidentialité et CGU restent à un clic via
     « Accueil ». Le mobile garde son pied complet. */
  .at-foot { margin-left: 260px; flex-wrap: nowrap; gap: 20px; padding: 16px 44px; }
  .at-foot-note { flex: 0 1 auto; order: 0; padding-bottom: 0; border-bottom: 0; }
  .at-foot .footer-social { order: 1; margin-right: auto; gap: 8px; }
  .at-foot .footer-social a { width: 30px; height: 30px; }
  .at-foot .at-foot-raccourci { display: none; }
  .at-foot .footer-links { order: 2; gap: 14px; flex-wrap: nowrap; }
  .at-foot .footer-links a { font-size: 0.76em; white-space: nowrap; }
  .at-foot .footer-copy { order: 3; white-space: nowrap; }
  [data-section="tools"] .calc-card-header { padding: 16px 30px !important; }
  [data-section="tools"] .calc-card-body { padding: 22px 30px 26px; }
  [data-section="tools"] .form-section { margin-bottom: 20px; }
  [data-section="tools"] .form-grid { gap: 18px 24px; }
  [data-section="tools"] .results-body { padding: 24px 26px; }
}
/* Écrans peu hauts (portable 800 px) : la liste resserre ses marges pour tenir sans défiler. */
@media (min-width: 769px) and (max-height: 900px) {
  .at-side-tete { padding: 16px 20px 14px; gap: 10px; }
  .at-side-logo img { width: 40px; height: 40px; margin-bottom: 2px; }
  .at-side-item { font-size: 15px; }
  .at-side-item .oi { font-size: 20px; }
}
/* Formulaire | résultats côte à côte au-delà de 1 200 px seulement (en dessous, l'atelier
   empile déjà les deux cartes : deux colonnes de 350 px à côté du panneau étaient trop serrées). */
@media (min-width: 1201px) {
  [data-section="tools"] .calc-container { grid-template-columns: minmax(0, 1fr) clamp(360px, 32%, 480px); gap: 28px; }
}
/* Fenêtres étroites : panneau plus mince, marges réduites. */
@media (min-width: 769px) and (max-width: 1100px) {
  .at-side { width: 224px; }
  .at-side-item { padding-left: 20px; padding-right: 20px; gap: 12px; font-size: 15px; }
  .at-main { margin-left: 224px; padding: 24px; }
  .at-foot { margin-left: 224px; flex-wrap: wrap; padding: 14px 24px; }
  .at-foot-note { flex-basis: 100%; }
  [data-section="tools"] .calc-card-header { padding: 14px 22px !important; }
  [data-section="tools"] .calc-card-body { padding: 18px 22px 22px; }
}

/* ── 10. Desktop : ciel étoilé derrière les cartes (ESSAI, demande Lou 2026-09-17) ── */
/* Le fond gris de l'app cède la place au ciel animé de la vitrine (stars-bg.js, chargé par
   outils-public.js § 9), sur un bleu nuit INTERMÉDIAIRE : plus clair que la landing (#0a0f1e)
   pour que les cartes blanches ne tranchent pas trop, plus bleu que le panneau (#1e293b →
   #0f172a) pour qu'il s'en détache. Même montage qu'en mobile : canvas à z-index -1, fond
   porté par <html>, body transparent. La classe at-sans-ciel (lien profond) ne concerne que
   le mobile : en desktop, rien ne recouvre le ciel. */
@media (min-width: 769px) {
  html, html.at-sans-ciel {
    background-color: #22324f;
    background-image: radial-gradient(120% 90% at 65% 0%, #30456f 0%, #25365a 45%, #1c2a45 100%);
    background-attachment: fixed;
  }
  body.at-body { background: transparent; }
  #lightningCanvas { display: block; z-index: -1 !important; }
  .at-side { box-shadow: 2px 0 18px rgba(0, 0, 0, 0.28); }
  /* Cartes : une ombre un peu plus franche pour se poser sur le ciel. */
  [data-section="tools"] .calc-card,
  [data-section="tools"] .results-panel { box-shadow: 0 10px 30px rgba(6, 12, 28, 0.28); }
  /* Pied sur le ciel. */
  .at-foot { background: rgba(10, 18, 36, 0.35); border-top-color: rgba(255, 255, 255, 0.08); }
  .at-foot-note { color: #a3b1c6; }
  .at-foot .footer-links a { color: #a3b1c6; }
  .at-foot .footer-links a:hover, .at-foot .footer-social a:hover { color: var(--at-accent); }
  .at-foot .footer-social a { color: #cbd5e1; border-color: rgba(255, 255, 255, 0.14); }
  .at-foot .footer-copy { color: #8391a7; }
}

/* ── 11. Desktop : tuiles centrées, « Utile ? » en pied de carte (retours Lou 2026-09-17) ── */
@media (min-width: 769px) {
  /* Tuiles « Type de circuit » (Section câble, Disjoncteur & diff.) : icône et libellé
     centrés, plus grands, qui occupent la tuile. L'icône partait à gauche : le canon la
     pose en display:block !important sur toute la largeur, et son SVG (display:block,
     margin 0) se calait au bord gauche. */
  [data-section="tools"] .circuit-type-btn {
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 8px 12px !important; min-height: 90px; text-align: center;
  }
  [data-section="tools"] .circuit-type-btn i {
    display: flex !important; align-items: center; justify-content: center;
    font-size: 26px !important; margin: 0 !important;
  }
  [data-section="tools"] .circuit-type-btn span { font-size: 13.5px !important; line-height: 1.2; }

  /* Carte Résultats : le pied « Ce résultat vous a-t-il été utile ? » se pose en bas de la
     carte, le corps prend la hauteur disponible au-dessus (la carte s'étire à la hauteur du
     formulaire). Côte à côte seulement ; empilées sous 1 200 px, rien ne change. */
  [data-section="tools"] .results-panel { display: flex; flex-direction: column; }
  [data-section="tools"] .results-panel > .results-body { flex: 1 1 auto; }
  [data-section="tools"] .results-panel > .results-avis { margin-top: auto; }
}

/* ── 12. Chute de tension : cartes « limites » retirées de /outils ────────── */
/* Demande Lou du 2026-09-17 (« enlève ça ») : les trois cartes Éclairage 3 % / Autres usages
   5 % / Poste privé 6 / 8 % sous l'outil. Masquées sur la page publique seulement (mobile et
   desktop) ; le tableau de bord de l'app les garde. La grille porte display:grid en style
   inline → seul !important passe. */
[data-section="tools"] #voltage-drop .limites-grid { display: none !important; }

/* ── 13. Desktop : pas de pied de page ───────────────────────────────────── */
/* Décision Lou du 2026-09-17 : « pas utile, on a déjà toutes ces infos sur la page
   principale » (le panneau porte « Accueil »). Le mobile garde son pied. */
@media (min-width: 769px) {
  .at-foot { display: none; }
}

/* ── 14. Desktop : les calculateurs en VERRE sur le ciel (demande Lou 2026-09-19) ──
   « Aligne le design des autres outils à ce qu'on a validé » : les fiches « Les bases »
   et la page d'attente posent un matériau — verre translucide sur le ciel, liseré clair,
   ombre douce, encre claire, accent vert — et les calculateurs restaient la dernière
   surface claire de /outils.

   COMMENT : explicitement, surface par surface, en desktop seulement. L'encre doit être
   claire sur du verre : on reprend les VALEURS de la palette nuit du canon (contrastes
   déjà pensés) mais comme de simples variables — PAS de data-theme, PAS de color-scheme
   sur la page. Leçon du 2026-09-19 : color-scheme:dark sur /outils faisait peindre au
   navigateur un fond blanc opaque derrière le cadre des fiches (schémas de couleurs
   différents entre la page et le cadre) — toutes les fiches passaient en blanc. Seuls
   les champs et menus natifs reçoivent color-scheme, sur eux-mêmes. Mobile et app :
   inchangés. */
@media (min-width: 769px) {
  :root, [data-section="tools"] {
    --tool-ink:#eef2f8; --tool-ink-soft:#dde4ef;
    --tool-ink-3:#cdd5e2; --tool-ink-4:#f1f4f9; --tool-ink-5:#d3dbe8; --tool-ink-6:#c2cbdb;
    --tool-line:#2c3b5c; --tool-line-g:#2c3b5c; --tool-line-2:#263450; --tool-line-3:#3b4b6a; --tool-line-4:#263450; --tool-line-5:#2c3b5c;
    --tool-muted:#94a1b8; --tool-muted-g:#94a1b8; --tool-muted-2:#7d8aa1; --tool-muted-2g:#7d8aa1; --tool-muted-3:#7d8aa1;
    --tool-card:#172238;
    --tool-soft:#1d2a44; --tool-soft-2:#1d2a44; --tool-soft-3:#223150; --tool-soft-4:#223150; --tool-soft-teal:#113031;
    --tool-soft-5:#192540; --tool-line-6:#3b4b6a;
    --tool-grad-tuile:linear-gradient(#1e335c,#173d48);
    --tool-tuile-hover-bg:#1b2d4f; --tool-tuile-hover-line:#3b5580;
    --tool-btn-bg:linear-gradient(135deg,#25406b 0%, #1b4854 100%); --tool-btn-ink:#dbe7f7; --tool-btn-line:#37547f;
    --tool-inverse:#e8edf5; --tool-inverse-ink:#0f172a;
    --tool-ok:#4ade80; --tool-ok-2:#34d399; --tool-ok-ink:#86efac; --tool-ok-bg:rgba(34,197,94,.14);
    --tool-warn:#fbbf24; --tool-warn-ink:#fcd34d; --tool-warn-bg:rgba(245,158,11,.14);
    --tool-danger:#f87171; --tool-danger-2:#f87171; --tool-danger-ink:#fca5a5; --tool-danger-bg:rgba(239,68,68,.14);
    --tool-blue-2:#60a5fa; --tool-blue-ink:#93c5fd; --tool-blue-ink-2:#8ab4ff; --tool-blue-bg:rgba(59,130,246,.16);
    --tool-indigo-ink:#a5b4fc; --tool-protect-ink:#5eead4;
    --tool-grad-active:linear-gradient(135deg,#1e335c 0%, #173d48 100%);
    --tool-grad-ok:linear-gradient(135deg, rgba(34,197,94,.18) 0%, rgba(34,197,94,.08) 100%);
    --tool-grad-warn:linear-gradient(135deg, rgba(245,158,11,.20) 0%, rgba(245,158,11,.08) 100%);
    --tool-grad-blue:linear-gradient(135deg, rgba(59,130,246,.22) 0%, rgba(59,130,246,.08) 100%);
    --tool-grad-danger:linear-gradient(135deg, rgba(239,68,68,.20) 0%, rgba(239,68,68,.08) 100%);
    --tool-section:#6e9be0; --tool-power:#6d9eff; --tool-vdrop:#38bdf8; --tool-protect:#2dd4bf;
    --tool-heat:#2fc4b2; --tool-tables:#94a3b8; --tool-formulas:#a3aec2;
  }
  /* Par-dessus : les surfaces. Champs et menus presque opaques (un menu translucide
     laisse lire la page à travers) ; blocs internes = encarts de verre, comme dans une
     fiche ; filets clairs. */
  :root, [data-section="tools"] {
    --tool-card: rgba(19, 29, 49, 0.9);
    --tool-soft: rgba(255, 255, 255, 0.075); --tool-soft-2: rgba(255, 255, 255, 0.075);
    --tool-soft-3: rgba(255, 255, 255, 0.09); --tool-soft-4: rgba(255, 255, 255, 0.06);
    --tool-soft-5: rgba(255, 255, 255, 0.05); --tool-soft-teal: rgba(52, 200, 162, 0.12);
    --tool-line: rgba(255, 255, 255, 0.14); --tool-line-g: rgba(255, 255, 255, 0.14);
    --tool-line-2: rgba(255, 255, 255, 0.1); --tool-line-3: rgba(255, 255, 255, 0.18);
    --tool-line-4: rgba(255, 255, 255, 0.1); --tool-line-5: rgba(255, 255, 255, 0.14);
    --tool-line-6: rgba(255, 255, 255, 0.22);
  }
  /* Les cartes : le verre des fiches (outils-bases.css § 0), même ombre en trois voiles. */
  [data-section="tools"] .calc-card,
  [data-section="tools"] .info-card,
  [data-section="tools"] .ref-table-card,
  [data-section="tools"] .formulas-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow:
      0 1px 2px rgba(2, 6, 20, 0.18),
      0 10px 24px rgba(2, 6, 20, 0.16),
      0 26px 60px rgba(2, 6, 20, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }
  /* Les blocs qui héritaient de --tool-card (presque opaque, gardé pour les MENUS) et
   restaient des pavés sombres dans le verre (retour Lou 2026-09-19 : « certains boutons
   sont trop foncés, le haut des cartes aussi ») — chacun repris par sa classe. */
  /* Le bandeau de titre fait partie du verre : plus d'aplat, un simple filet dessous. */
  [data-section="tools"] .calc-card-header {
    background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  }
  [data-section="tools"] .calc-card-header,
  [data-section="tools"] .calc-card-header h2,
  [data-section="tools"] .calc-card-header h3 { color: #fff !important; }
  /* Tuiles « type de circuit » : encarts de verre, comme les encarts de norme d'une fiche ;
     la tuile choisie prend l'accent vert (teinte + liseré), pas un dégradé sombre. */
  [data-section="tools"] .circuit-type-btn {
    /* Plus SOMBRES que la carte, pas plus claires (retours Lou 2026-09-19, deux fois) :
       une teinte nuit à 20 % au lieu d'un voile blanc — la tuile se lit comme un creux dans le
       verre, et douze côte à côte ne font plus un damier. */
    background: rgba(2, 6, 20, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
  }
  [data-section="tools"] .circuit-type-btn:hover {
    background: rgba(2, 6, 20, 0.12) !important; border-color: rgba(52, 200, 162, 0.4) !important;
  }
  [data-section="tools"] .circuit-type-btn.active {
    background: rgba(52, 200, 162, 0.16) !important; border: 1px solid rgba(52, 200, 162, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(52, 200, 162, 0.12) !important; color: #fff !important;
  }
  /* Bascule « Par puissance / Par calibre » : le segment choisi = la pastille verte. */
  [data-section="tools"] .mode-seg-btn {
    background: transparent !important; color: rgba(255, 255, 255, 0.6) !important;
  }
  [data-section="tools"] .mode-seg-btn.is-active {
    background: rgba(52, 200, 162, 0.16) !important; color: #fff !important;
    border: 1px solid rgba(52, 200, 162, 0.5) !important;
  }
  /* Le panneau « Résultats » : la même carte de verre que l'outil. */
  [data-section="tools"] .results-panel {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 20, 0.18), 0 10px 24px rgba(2, 6, 20, 0.16), 0 26px 60px rgba(2, 6, 20, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }

  /* Textes rendus par le moteur APRÈS calcul, en ardoise ou brun-orange en dur — invisibles
     sur le verre (retour Lou 2026-09-19 : « la police pas très lisible ») : tableau des
     puissances par distance, avertissements, bilan de puissance. */
  [data-section="tools"] .results-panel th,
  [data-section="tools"] .results-panel td { color: var(--tool-ink-3) !important; }
  [data-section="tools"] .results-panel th { color: #fff !important; }
  [data-section="tools"] .warning-item span { color: var(--tool-warn-ink) !important; }
  /* L'encart d'avertissement lui-même était crème opaque en dur (#fff7ed) : encre jaune sur
     crème, illisible (retour Lou 2026-09-19). Verre teinté ambre, filet ambre, encre claire. */
  [data-section="tools"] .warning-item {
    background: rgba(245, 158, 11, 0.12) !important;
    border: 1px solid rgba(245, 158, 11, 0.35) !important;
    border-left: 3px solid var(--tool-warn) !important;
    color: var(--tool-warn-ink) !important;
  }
  [data-section="tools"] .warning-item strong { color: #fff !important; }
  [data-section="tools"] .results-panel [style*="#334155"],
  [data-section="tools"] .results-panel [style*="334155"] { color: var(--tool-ink-3) !important; }
  /* Bilan de puissance : le détail par poste (« 2 400 W → 2 400 W ») en ardoise par une
     règle du canon ; seuls les spans SANS classe sont repris, les états colorés (ok, alerte)
     portent une classe et gardent leur couleur. */
  [data-section="tools"] .result-details span:not([class]),
  [data-section="tools"] .result-details strong { color: var(--tool-ink-3) !important; }

  /* Pastilles d'aide « ? » : elles héritaient du fond presque opaque des menus — des ronds
     noirs (retour Lou 2026-09-19). Sobres : pas de fond, un cercle fin, l'accent au survol. */
  [data-section="tools"] .aide {
    background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: rgba(255, 255, 255, 0.62) !important; box-shadow: none !important;
  }
  [data-section="tools"] .aide:hover,
  [data-section="tools"] .aide:focus-visible {
    border-color: rgba(52, 200, 162, 0.7) !important; color: #fff !important;
    background: rgba(52, 200, 162, 0.12) !important;
  }

  /* Cases à cocher (et boutons radio) : la case native rendue en sombre faisait un carré
     noir (retour Lou 2026-09-19 : « idem pour les cases à cocher »). Même langage que les
     pastilles « ? » : cercle/carré fin, sans fond, vert quand c'est coché. */
  [data-section="tools"] input[type="checkbox"],
  [data-section="tools"] input[type="radio"] {
    -webkit-appearance: none !important; appearance: none !important;
    width: 18px !important; height: 18px !important; margin: 0 8px 0 0;
    border: 1px solid rgba(255, 255, 255, 0.32) !important; background: transparent !important;
    display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer;
    flex: 0 0 auto; transition: border-color .15s ease, background .15s ease;
  }
  [data-section="tools"] input[type="checkbox"] { border-radius: 5px !important; }
  [data-section="tools"] input[type="radio"] { border-radius: 50% !important; }
  [data-section="tools"] input[type="checkbox"]::before,
  [data-section="tools"] input[type="radio"]::before {
    content: ""; width: 10px; height: 10px; background: #04241c;
    transform: scale(0); transition: transform .12s ease;
  }
  [data-section="tools"] input[type="checkbox"]::before {
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  }
  [data-section="tools"] input[type="radio"]::before { width: 8px; height: 8px; border-radius: 50%; }
  [data-section="tools"] input[type="checkbox"]:hover,
  [data-section="tools"] input[type="radio"]:hover { border-color: rgba(52, 200, 162, 0.6) !important; }
  [data-section="tools"] input[type="checkbox"]:checked,
  [data-section="tools"] input[type="radio"]:checked {
    background: #34c8a2 !important; border-color: #34c8a2 !important;
  }
  [data-section="tools"] input[type="checkbox"]:checked::before,
  [data-section="tools"] input[type="radio"]:checked::before { transform: scale(1); }
  [data-section="tools"] input[type="checkbox"]:focus-visible,
  [data-section="tools"] input[type="radio"]:focus-visible { outline: 2px solid rgba(52, 200, 162, 0.6); outline-offset: 2px; }

  /* Menus déroulants et champs natifs : rendu sombre SUR EUX SEULEMENT. */
  [data-section="tools"] select,
  [data-section="tools"] input,
  [data-section="tools"] textarea { color-scheme: dark; }
}
/* ── 15. Pas de liseré de couleur sur les cartes (demande Lou 2026-09-17) ──────── */
/* Le canon pose un liseré de 4 px à la teinte de l'outil à gauche de chaque en-tête de carte
   (.calc-card-header::before). Retiré sur /outils, mobile comme desktop ; l'app le garde. */
[data-section="tools"] .calc-card-header::before { content: none !important; }

/* ── 16. Tableaux NF C : carte « Résistivité des matériaux » retirée (demande Lou 2026-09-17) ── */
[data-section="tools"] #tables .info-card:has(.form-grid.three-cols) { display: none !important; }

/* ── 17. (retiré le 2026-09-19 : les recommandations restent dans la carte Résultats) ── */

/* ── 19. Téléphone : tuiles du hub au verre du desktop (demande Lou 2026-09-19) ───
   Les teintes par outil du § 8 (voile coloré, liseré coloré, flou) cèdent la place au
   matériau validé sur grand écran : verre neutre, icône verte, titre blanc. Le § 8 reste
   pour la structure (grille, tailles) ; seules les couleurs changent ici. */
@media (max-width: 768px) {
  .at-hub-carte {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 1px 2px rgba(2, 6, 20, 0.18), 0 8px 20px rgba(2, 6, 20, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }
  .at-hub-carte .at-hub-watermark .oi { color: #34c8a2 !important; }
  .at-hub-carte .at-hub-nom { color: #fff !important; }
  /* « Les bases » : pleine largeur, en fin de hub — ce n'est pas un calculateur. */
  .at-hub-bases { grid-column: 1 / -1; min-height: 72px; }
}

/* ── 18. Impression ───────────────────────────────────────────────────────── */
/* Imprimer ou enregistrer un résultat en PDF : ni panneau latéral fixe (répété sur chaque
   page), ni ciel, ni hub ; l'outil sur toute la largeur, sur fond blanc. */
@media print {
  .at-side, #lightningCanvas, .at-hub, .at-install, .at-topbar, .at-pbar, .at-chip, .at-foot { display: none !important; }
  html, body.at-body { background: #fff !important; }
  .at-main { margin: 0 !important; padding: 0 !important; display: block !important; max-width: none !important; }
}