/* ==========================================================================
   outils-bases.css — « Les bases » : les schémas de câblage en accès libre
   --------------------------------------------------------------------------
   Deux rôles dans un seul fichier :
     § 1-2  la SECTION « Les bases » dans /outils (grille de vignettes) ;
     § 3-4  l'habillage des 40 pages /outils/bases/*.html (barre haute + cadre) ;
     § 5    la page d'attente servie à la place d'une fiche non validée.

   Demande Lou du 2026-09-18 : une section à PART ENTIÈRE — sa propre entrée dans
   le panneau de gauche sous « Formules », sa vue à elle, jamais mêlée aux
   calculateurs. Desktop seulement pour l'instant : sous 769 px, l'entrée du menu
   et la section sont masquées (§ 2), le mobile viendra plus tard.

   Palette reprise de outils-atelier.css § 9/10/14 : panneau bleu nuit
   (#1e293b → #0f172a), ciel #22324f, cartes adoucies (#e6ebf2) sur liseré #c9d2de.
   ========================================================================== */

/* ── 0. Le verre ──────────────────────────────────────────────────────────────
   Un seul matériau pour tout ce qui entoure le dessin : la carte « En cours de
   développement » validée par Lou le 2026-09-19, reprise en variables pour la grille
   et pour les fiches. Le ciel se devine à travers ; l'ombre en deux couches (une
   serrée qui décolle, une large qui pose) évite le halo sale d'une ombre unique. */
:root {
  --verre-fond: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%);
  --verre-fond-2: rgba(255, 255, 255, 0.075);      /* encarts DANS une carte de verre */
  --verre-line: rgba(255, 255, 255, 0.2);
  --verre-line-2: rgba(255, 255, 255, 0.14);
  --verre-filet: inset 0 1px 0 rgba(255, 255, 255, 0.22);
  --verre-ombre: 0 2px 6px rgba(2, 6, 20, 0.3), 0 22px 56px rgba(2, 6, 20, 0.42);
  --verre-ombre-2: 0 2px 6px rgba(2, 6, 20, 0.26), 0 14px 34px rgba(2, 6, 20, 0.32);
  --verre-encre: #d5dde8;                          /* texte courant sur le verre */
  --verre-encre-2: #aab8ca;                        /* texte secondaire */
  --verre-vert: #34c8a2;                           /* l'accent du logo */
}

/* ── 1. La section dans /outils ────────────────────────────────────────────── */
/* Masquée par défaut : une section ne s'affiche QUE dans sa vue (body.at-vue-<id>,
   doublée de at-vue-fiches pour ce qui est commun), et l'atelier de calcul s'efface
   alors complètement — les deux ne cohabitent jamais sur la même page. Deux sections
   depuis le 2026-09-22 : #bases et #fondamentaux, mêmes classes. */
.bases-section { display: none; }

body.at-vue-fiches .at-main > [data-section="tools"] { display: none !important; }
/* La zone principale centre l'outil en hauteur (atelier) ; la section, elle, est
   longue : elle part du haut. */
body.at-vue-fiches .at-main { justify-content: flex-start; }

@media (min-width: 769px) {
  body.at-vue-bases #bases,
  body.at-vue-fondamentaux #fondamentaux { display: block; }

  /* width:100% est nécessaire : dans la colonne flex de .at-main, une marge auto en axe
     transversal annule l'étirement — la section se serait réduite à son contenu (720 px). */
  .bases-section { width: 100%; max-width: 1180px; margin: 0 auto; padding-bottom: 20px; }

  /* En-tête de section, posé sur le ciel : mêmes tons que le pied de page. */
  .bases-entete { margin-bottom: 30px; }
  .bases-entete h2 {
    margin: 0 0 8px; font-size: 27px; font-weight: 800; letter-spacing: -0.4px; color: #fff;
  }
  .bases-entete p { margin: 0; font-size: 15px; line-height: 1.55; color: #a8b6cd; max-width: 720px; }

  /* Un groupe = un titre discret + sa grille. */
  .bases-groupe { margin-bottom: 30px; }
  .bases-groupe-titre {
    display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
    font-size: 13px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: #cbd5e1;
  }
  .bases-groupe-titre .oi { display: inline-flex; font-size: 18px; color: #34c8a2; }
  .bases-groupe-titre .oi svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .bases-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }

}

/* Vignette : le symbole du montage puis son titre, centrés — rien d'autre
   (retour Lou 2026-09-18). Même esprit que les tuiles « type de circuit » des
   calculateurs : carte adoucie, icône dans la teinte du site. */
.bases-carte {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 104px; padding: 16px 12px; border-radius: 14px; text-align: center;
  position: relative; overflow: hidden;
  background: var(--verre-fond); border: 1px solid var(--verre-line);
  box-shadow: var(--verre-ombre-2), var(--verre-filet);
  text-decoration: none; color: #fff;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.bases-carte:hover {
  transform: translateY(-2px);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 100%);
  border-color: rgba(52, 200, 162, 0.5);
}
.bases-carte:focus-visible { outline: 2px solid #34c8a2; outline-offset: 2px; }
.bases-carte-ico { display: block; line-height: 0; color: var(--verre-vert); }
.bases-carte-ico svg {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.bases-carte:hover .bases-carte-ico { color: #5fe0c0; }
.bases-carte-nom { font-size: 14px; font-weight: 700; line-height: 1.3; }

/* Fiches à retoucher (décision Lou 2026-09-18) : grisées pour se distinguer d'un coup
   d'œil de celles qui sont validées. Elles restent ouvrables — c'est un repère de
   relecture, pas un verrou. */
.bases-carte.est-a-revoir {
  background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.45); box-shadow: 0 2px 6px rgba(2, 6, 20, 0.2);
}
.bases-carte.est-a-revoir .bases-carte-ico { color: rgba(255, 255, 255, 0.35); }
.bases-carte.est-a-revoir:hover {
  transform: none;                                  /* elle n'ouvre pas un schéma : ne pas l'inviter */
  background: rgba(255, 255, 255, 0.07); border-color: rgba(52, 200, 162, 0.3);
}
.bases-carte.est-a-revoir:hover .bases-carte-ico { color: rgba(255, 255, 255, 0.5); }
/* Ruban « Bientôt » en biais dans le coin (demande Lou 2026-09-19) : la carte le coupe
   à ses bords arrondis (overflow:hidden). Le titre garde sa place — la vignette a
   assez de marge haute pour que le ruban ne morde pas dessus. */
.bases-carte.est-a-revoir::after {
  content: "Bientôt";
  position: absolute; top: 13px; right: -32px; width: 118px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #34c8a2 0%, #22a183 100%);
  color: #04241c; font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px;
  text-align: center; padding: 3px 0; line-height: 1.4;
  box-shadow: 0 2px 7px rgba(2, 6, 20, 0.4);
}

/* ── Visionneuse : le schéma DANS la page, panneau de gauche conservé ─────── */
body.at-vue-schema .bases-entete,
body.at-vue-schema .bases-liste { display: none; }

.bases-visionneuse { display: flex; flex-direction: column; }
/* SANS cette ligne, le display:flex ci-dessus l'emporte sur l'attribut `hidden` (qui ne
   vaut qu'un display:none de feuille par défaut) : la visionneuse restait affichée, vide,
   sous la grille — l'« aperçu » signalé par Lou le 2026-09-18. */
.bases-visionneuse[hidden] { display: none; }
/* Trois zones (1fr | auto | 1fr) : le titre est centré sur la PAGE, pas entre les deux
   boutons, quelle que soit leur largeur (retour Lou 2026-09-18). */
.bases-vue-barre { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-bottom: 16px; }
/* Une seule pastille pour les trois éléments : retour, titre, pleine page. */
.bases-vue-retour, .bases-vue-titre, .bases-vue-plein {
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1; font: inherit; font-weight: 700; text-decoration: none;
}
.bases-vue-retour, .bases-vue-plein {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; font-size: 13.5px; cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.bases-vue-retour { justify-self: start; padding-left: 13px; }
.bases-vue-retour::before { content: "←"; font-size: 15px; line-height: 1; }
.bases-vue-plein { justify-self: end; }
.bases-vue-retour:hover, .bases-vue-plein:hover {
  color: #fff; border-color: rgba(48, 195, 158, 0.55); background: rgba(255, 255, 255, 0.1);
}
.bases-vue-titre {
  justify-self: center; padding: 9px 26px; font-size: 19px; font-weight: 800;
  letter-spacing: -0.2px; color: #fff; text-align: center;
}
/* La hauteur est posée par outils-public.js sur le contenu réel : un seul ascenseur,
   celui de la page — jamais un cadre qui défile dans la page qui défile. */
/* Transparent : les cartes de la fiche sont elles-mêmes en verre et se posent
   directement sur le ciel — un fond de cadre ferait une plaque grise derrière
   (passe de cohérence du 2026-09-19). */
.bases-cadre {
  width: 100%; border: 0; display: block; background: transparent; box-shadow: none;
}

/* ── 2. Téléphone : la liste des schémas (demande Lou 2026-09-19) ─────────────
   Une carte « Les bases » dans le hub ouvre cette section à la place du hub ; une barre
   ramène aux outils. Les vignettes gardent le verre du desktop (règles partagées
   ci-dessus), sur deux colonnes. Une fiche s'ouvre en PLEINE PAGE (le lien de la
   vignette n'est pas intercepté sur téléphone) : sur 390 px, un cadre dans la page
   serait illisible. */
.bases-mobile-barre { display: none; }
@media (max-width: 768px) {
  .at-side-bases { display: none !important; }
  body.at-vue-bases #bases,
  body.at-vue-fondamentaux #fondamentaux { display: block; }
  body.at-vue-fiches .at-hub,
  body.at-vue-fiches .at-install { display: none !important; }
  .bases-section { padding: 8px 14px 28px; }
  .bases-mobile-barre { display: flex; align-items: center; margin: 4px 0 14px; }
  .bases-mobile-retour {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px;
    border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  }
  .bases-mobile-retour::before { content: "←"; font-size: 15px; line-height: 1; }
  .bases-entete { margin-bottom: 18px; }
  .bases-entete h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; color: #fff; }
  .bases-groupe { margin-bottom: 22px; }
  .bases-groupe-titre {
    display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #cbd5e1;
  }
  .bases-groupe-titre .oi { display: inline-flex; font-size: 16px; color: #34c8a2; }
  .bases-groupe-titre .oi svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .bases-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .bases-carte { min-height: 90px; padding: 13px 8px; gap: 7px; }
  .bases-carte-ico svg { width: 24px; height: 24px; }
  .bases-carte-nom { font-size: 13px; }
  .bases-carte.est-a-revoir::after { top: 10px; right: -30px; width: 104px; font-size: 9.5px; padding: 2px 0; }
}

/* ── 3. Les pages de schéma : barre haute ──────────────────────────────────── */
/* Chaque page garde SA feuille de style d'origine (chargée après celle-ci dans un
   <style> propre à la page) : on ne touche qu'au cadre — barre, marges, pied.
   `body.bases-body` l'emporte sur le `body { … !important }` de la page grâce à sa
   spécificité, sans quoi le padding d'origine décollerait la barre des bords. */
/* Le ciel remplace le dégradé clair d'origine (déclaré !important dans le style embarqué
   de chaque fiche) : les cartes en verre ont besoin de la nuit derrière elles. */
body.bases-body { padding: 0 !important; margin: 0; background: transparent !important; }

.bases-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px; height: 60px;
  background: linear-gradient(180deg, #1e293b 0%, #16233a 100%);
  box-shadow: 0 2px 14px rgba(6, 12, 28, 0.28);
  color: #fff;
}
.bases-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.2px; }
.bases-brand img { display: block; width: 30px; height: 30px; }
.bases-topbar-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.16); }
.bases-topbar-titre { margin: 0; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -0.1px; }
.bases-topbar-groupe { font-size: 13px; color: #94a3b8; }
.bases-retour {
  margin-left: auto; display: inline-flex; align-items: center; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18);
  color: #cbd5e1; font-size: 13px; font-weight: 700; text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
  /* « ‹ Schémas » (demande Lou 2026-09-19) : le chevron est un caractère, pas une icône. */
  gap: 6px;
}
.bases-retour span { font-size: 1.25em; line-height: 1; position: relative; top: -1px; }
.bases-retour:hover { color: #fff; border-color: rgba(48, 195, 158, 0.55); }

/* ── 4. Les pages de schéma : cadre du contenu ─────────────────────────────── */
.bases-main { padding: 40px 64px 92px; }

/* Embarquée dans /outils (classe posée par outils-public.js à l'ouverture du cadre) :
   la barre haute ferait doublon avec celle de la visionneuse, et le fond doit rejoindre
   celui du cadre. La page reste inchangée quand on l'ouvre seule. */
/* ── Rangées de boutons sous les schémas : masquées (retour Lou 2026-09-18) ────────
   Elles doublent le clic direct sur le dessin. Elles n'ont ni classe ni structure communes
   (souvent un <div style="display:flex"> anonyme) : on les vise donc par leur FORME —
   un bloc qui contient directement des boutons. Deux exceptions :
     - .tab-bar, qui n'est pas une rangée d'action mais la navigation entre deux câblages
       (fiche « Prises en Dérivation ») : la masquer rendrait la moitié de la page inatteignable ;
     - on MASQUE, on ne supprime pas : les scripts d'origine y accrochent leurs écouteurs et
       y écrivent l'état ; hors du DOM, leur initialisation plante et le schéma devient inerte. */
.bases-body .schema-container div:has(> button):not(.tab-bar) { display: none !important; }
/* Bandeaux d'état posés sous le dessin (« ÉTEINT » qui égrène le décompte de la minuterie,
   « AUCUNE DÉTECTION » du détecteur de mouvement) : même raison que les rangées de boutons —
   le dessin dit déjà l'état, la pastille faisait doublon (retour Lou 2026-09-18). */
.bases-body .timer-display,
.bases-body .detection-zone { display: none !important; }

/* Repli pour un navigateur sans :has() — les rangées qui, elles, portent une classe. */
.bases-body .controls,
.bases-body .mode-bar,
.bases-body .mode-display,
.bases-body .ctrl-bar,
.bases-body .action-bar { display: none !important; }

/* ── Plus de violet dans l'habillage (retour Lou 2026-09-18) ───────────────────────
   Les fiches d'origine étaient en indigo/violet (#667eea, #764ba2) : titres de carte,
   pastilles d'icône, curseur du variateur. On les repasse dans la palette du site —
   ardoise et bleu des outils. Le violet du DESSIN reste : sur un va-et-vient, c'est la
   couleur des navettes, une information, pas une décoration. */
.bases-body .card-title { color: #16233a !important; border-bottom-color: #c9d2de !important; }
.bases-body .card-title i,
.bases-body .meta-badge i,
.bases-body .material-icon { color: #2f6fb5 !important; }
.bases-body #dimmerValue { color: #2f6fb5 !important; }
.bases-body #dimmerSlider {
  background: linear-gradient(to right, #2f6fb5 0%, #2f6fb5 var(--val, 100%), #dbe2ec var(--val, 100%), #dbe2ec 100%) !important;
}
.bases-body #dimmerSlider::-webkit-slider-thumb {
  background: #2f6fb5 !important; box-shadow: 0 2px 8px rgba(47, 111, 181, 0.35) !important;
}

/* ── Onglets : sobres, dans la palette du site (retour Lou : « pas de violet ») ────── */
.bases-body .tab-bar { gap: 10px; }
.bases-body .tab-btn {
  background: var(--verre-fond-2) !important; color: var(--verre-encre) !important;
  border: 1px solid var(--verre-line-2) !important; box-shadow: none !important;
  font-weight: 700 !important;
}
.bases-body .tab-btn:hover { background: rgba(255, 255, 255, 0.13) !important; border-color: rgba(52, 200, 162, 0.4) !important; }
.bases-body .tab-btn.active {
  background: linear-gradient(135deg, #34c8a2 0%, #22a183 100%) !important;
  color: #04241c !important; border-color: rgba(52, 200, 162, 0.7) !important;
}
.bases-body .tab-btn i { color: inherit !important; }

/* ── 4 bis. Les blocs de la fiche, en verre (passe de cohérence 2026-09-19) ─────────
   Les fiches d'avril 2026 posaient des cartes BLANCHES et des encarts de norme JAUNES
   (palette chaude de l'ancienne offre). Sur le ciel, les deux tranchaient. On reprend le
   matériau de la page d'attente : le contenant est en verre, seul le DESSIN reste un
   panneau clair — c'est un écran posé dans la carte, et les 40 SVG sont tracés pour un
   fond clair (y toucher casserait leur lisibilité). */
.bases-body .card {
  background: var(--verre-fond) !important;
  border: 1px solid var(--verre-line) !important;
  border-radius: 20px !important;
  /* Ombre DOUCE : sur la nuit, une ombre franche dessine une flaque aux bords nets au lieu
     de se fondre (retour Lou 2026-09-19). Trois voiles peu opaques et largement étalés,
     et les marges du conteneur (ci-dessous) leur laissent la place de s'éteindre. */
  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),
    var(--verre-filet) !important;
}
/* Le canon d'origine soulevait toute carte au survol, texte compris : sur une carte de
   lecture, le mouvement n'annonce rien. */
.bases-body .card:hover { transform: none !important; }
.bases-body .card-title { color: #fff !important; border-bottom-color: var(--verre-line-2) !important; }
.bases-body .card-title i { color: var(--verre-vert) !important; }

/* Le dessin : le seul panneau clair de la page — les 40 SVG sont tracés pour un fond clair.
   Mais « moins blanc et légèrement transparent » (demande Lou 2026-09-19) : un gris bleuté
   à 86 % d'opacité, qui laisse deviner la nuit sans jamais affaiblir les traits du schéma.
   Liseré adouci au passage : le 2 px d'origine dessinait un cadre dur dans le verre. */
.bases-body .schema-visual {
  background: linear-gradient(135deg, rgba(233, 239, 247, 0.9) 0%, rgba(220, 228, 240, 0.88) 100%) !important;   /* « légèrement plus clair », Lou 2026-09-19 */
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 10px rgba(2, 6, 20, 0.2) !important;
}

/* Encarts de norme et d'information : du verre plus clair DANS la carte de verre, et le
   filet d'accent passe de l'orange au vert du logo. */
.bases-body .norm-box,
.bases-body .info-box {
  background: var(--verre-fond-2) !important;
  border: 1px solid var(--verre-line-2) !important;
  border-left: 3px solid var(--verre-vert) !important;
  border-radius: 14px !important;
}
.bases-body .norm-box:hover,
.bases-body .info-box:hover { transform: none !important; }
.bases-body .norm-title,
.bases-body .info-box-title { color: var(--verre-vert) !important; }
.bases-body .norm-title i,
.bases-body .info-box-title i { color: var(--verre-vert) !important; }
.bases-body .norm-content,
.bases-body .info-box-content { color: var(--verre-encre) !important; }
.bases-body .norm-content strong,
.bases-body .info-box-content strong { color: #fff !important; }

/* De l'air entre les cartes : collées, le dessin et les normes se lisaient comme un seul
   bloc (retour Lou 2026-09-19). Les ombres, désormais larges, ont aussi besoin de place.
   ATTENTION : la carte des normes n'est PAS dans la colonne du dessin — elle est enfant
   direct de .schema-container, qui est en display:block. Un espacement posé sur la colonne
   ne pouvait donc pas l'atteindre (mesuré : 0 px entre les deux sur « Simple Allumage »).
   On espace au niveau du conteneur, entre blocs de premier niveau ; les blocs masqués
   (rangées de boutons) n'en tirent rien, et la marge ne se cumule pas avec l'espacement
   interne de la colonne. */
.bases-body .content-layout,
.bases-body .schemas-column { gap: 46px !important; }
.bases-body .schema-container > * + * { margin-top: 46px !important; }
/* Fiche « Prises en Dérivation » : ses cartes vivent dans le panneau d'un onglet, qui est
   en flex avec son propre espacement (35 px) — on l'aligne sur les autres fiches. Pas de
   marge ici : elle s'ajouterait à l'espacement et doublerait le blanc (mesuré 92 px). */
.bases-body .tab-panel { gap: 46px !important; }

/* Bloc du curseur (fiche « Variateur ») : il était le dernier îlot blanc de la page. */
.bases-body .slider-container {
  background: var(--verre-fond-2) !important;
  border: 1px solid var(--verre-line-2) !important;
}
.bases-body .slider-container label,
.bases-body .slider-container span { color: var(--verre-encre) !important; }

/* Alertes (LED non dimmable, charge mini, variateur sans neutre) : le rouge reste — c'est
   l'information — mais porté par du verre teinté, et l'encre s'éclaircit pour rester
   lisible sur la nuit. */
.bases-body .error-box {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-left: 3px solid #ef4444 !important;
  border-radius: 14px !important;
}
.bases-body .error-box:hover { transform: none !important; }
.bases-body .error-title { color: #ff9e9e !important; }
.bases-body .error-title i { color: #ff9e9e !important; }
.bases-body .error-content { color: #f2cfcf !important; }
.bases-body .error-content strong { color: #fff !important; }

/* Pastilles d'en-tête et d'état : verre, encre claire. */
.bases-body .meta-badge,
.bases-body .status-badge {
  background: var(--verre-fond-2) !important;
  border: 1px solid var(--verre-line-2) !important;
  color: var(--verre-encre) !important;
}

/* Textes libres posés hors carte (intertitres, légendes) : lisibles sur la nuit. */
.bases-body .schema-container > h2,
.bases-body .schema-container > h3,
.bases-body .schema-container > p { color: var(--verre-encre) !important; }

/* Rangée « Commuter Int. 1 / Lampe allumée / Commuter Int. 2 » (3 fiches) : elle ne fait
   que doubler le clic direct sur l'interrupteur du dessin (retour Lou 2026-09-18). Masquée
   et NON supprimée : les scripts d'origine y accrochent leurs écouteurs et y écrivent
   l'état — sortie du DOM, l'initialisation plantait et le schéma devenait inerte. */
.bases-body .controls { display: none !important; }

/* ── 4 ter. « Votre avis » (2026-09-22) ───────────────────────────────────────────
   Le pied « utile ? » des calculateurs (outils-avis.js — styles en ligne pilotés par les
   variables --tool-*) posé dans une carte de verre, sous les cartes de la fiche. On ne
   redéfinit que les variables : le pied garde sa mécanique et prend nos couleurs. La
   carte est vide tant que le script n'a pas monté le pied : elle ne s'affiche pas. */
.bases-body .bases-avis {
  background: var(--verre-fond);
  border: 1px solid var(--verre-line);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(2, 6, 20, 0.18), 0 10px 24px rgba(2, 6, 20, 0.16), var(--verre-filet);
  padding: 4px 6px;
  --tool-line: transparent;                 /* pas de filet au-dessus : la carte suffit */
  --tool-soft: transparent;
  --tool-ink: #fff;
  --tool-muted: var(--verre-encre-2);
  --tool-card: var(--verre-fond-2);
  --tool-line-6: var(--verre-line);
  --tool-ink-6: var(--verre-encre);
  --tool-ok-2: rgba(52, 200, 162, 0.7);
  --tool-ok-bg: rgba(52, 200, 162, 0.2);
  --tool-ok-ink: #b8f1e1;
  --tool-danger: rgba(239, 68, 68, 0.55);
  --tool-danger-bg: rgba(239, 68, 68, 0.16);
  --tool-danger-ink: #ffb4b4;
  --tool-btn-line: rgba(52, 200, 162, 0.7);
  --tool-btn-bg: linear-gradient(135deg, #34c8a2 0%, #22a183 100%);
  --tool-btn-ink: #04241c;
}
.bases-body .bases-avis:empty { display: none; }
.bases-body .bases-avis .avis-btn:hover { border-color: rgba(52, 200, 162, 0.5) !important; }
.bases-body .bases-avis .avis-commentaire::placeholder { color: var(--verre-encre-2); }

body.bases-embarque .bases-topbar { display: none; }
/* min-height:100vh dans un cadre = la hauteur DU CADRE : la page grandissait à chaque
   mesure, qui regrandissait le cadre. On la laisse valoir sa hauteur de contenu. */
body.bases-embarque { min-height: 0 !important; }
/* Les marges CONTIENNENT les ombres : le cadre est taillé sur la hauteur du corps et le
   corps sur la largeur du cadre — tout ce qui déborde est coupé net, d'où les lignes
   droites autour des cartes (retour Lou 2026-09-19). L'ombre la plus large descend à
   26 + 60 = 86 px, s'étale de 60 px sur les côtés et remonte de 60 − 26 = 34 px. */
body.bases-embarque .bases-main { padding: 40px 64px 92px; }
body.bases-embarque { background: transparent !important; }

/* Sur un petit écran la barre reste lisible (une page partagée par un lien direct
   doit rester présentable), même si les schémas eux-mêmes visent le grand écran. */
@media (max-width: 640px) {
  .bases-topbar { padding: 0 14px; gap: 10px; height: 54px; }
  .bases-topbar-sep, .bases-topbar-groupe { display: none; }
  .bases-topbar-titre { font-size: 14px; }
  /* Fiche proportionnée au téléphone (demande Lou 2026-09-19) : le dessin prend toute la
     largeur (le panneau d'origine lui laissait 200 px entre 80 px de marges et 600 px de
     haut), cartes et encarts resserrés, titres à la taille de l'écran. */
  .bases-main { padding: 14px 10px 36px; }
  .bases-body .card { padding: 16px 12px !important; border-radius: 16px !important; }
  .bases-body .card-title { font-size: 19px !important; margin-bottom: 14px !important; }
  /* Le dessin TIENT dans l'écran, sans défilement (demande Lou 2026-09-19) ; le script de
     la page grossit ses textes pour qu'ils restent lisibles à cette échelle. Marges
     réduites au minimum pour lui laisser toute la largeur. */
  .bases-body .card { padding: 10px 6px !important; }
  /* 14 px de marge intérieure et overflow visible : une étiquette de bord grossie
     (« Tableau électrique », centrée sur le tableau) a la place de s'écrire. */
  .bases-body .schema-visual { padding: 8px 14px !important; min-height: 0 !important; border-radius: 12px !important; overflow: visible !important; }
  /* overflow visible : une étiquette grossie au bord du dessin (« Tableau électrique »,
     centrée sur le tableau) peut déborder de la zone du SVG sans être coupée. */
  .bases-body .schema-visual svg { width: 100% !important; height: auto !important; max-width: none !important; overflow: visible !important; }
  .bases-body .norm-box, .bases-body .info-box { padding: 14px 14px !important; margin-bottom: 12px !important; }
  .bases-body .norm-title, .bases-body .info-box-title { font-size: 15px !important; }
  .bases-body .norm-content, .bases-body .info-box-content { font-size: 14.5px !important; line-height: 1.6 !important; }
  .bases-body .schema-container > * + * { margin-top: 22px !important; }
  .bases-body .content-layout, .bases-body .schemas-column, .bases-body .tab-panel { gap: 22px !important; }
  .bases-encours { padding: 28px 12px 60px; min-height: 60vh; }
  .bases-encours-carte { padding: 34px 22px 30px; border-radius: 20px; }
  .bases-encours-titre { font-size: 20px; }
}

/* ── 4 ter. Lisibilité du dessin (décisions Lou 2026-09-21, revue du 19/09) ──────────
   11. Les étiquettes de conducteurs n'apparaissent qu'au survol du fil (classe posée par le
       script de la page) : un dessin plus clair, l'information à portée de souris.
   16. Ce qui est cliquable se signale au survol — discrètement : un léger halo bleu.
   17. Une ampoule ÉTEINTE est grise ; elle ne devient jaune qu'avec l'état circuit-on (posé
       sur le SVG par le script de la fiche). */
.bases-body .fil-etiquette { opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.bases-body .fil-etiquette.visible { opacity: 1; }
.bases-body .schema-visual svg [onclick]:hover,
.bases-body .schema-visual svg [style*="cursor:pointer"]:hover,
.bases-body .schema-visual svg [style*="cursor: pointer"]:hover { filter: drop-shadow(0 0 3px rgba(47, 111, 181, 0.55)); }
.bases-body svg:not(.circuit-on) .lamp-bulb { fill: #e5e7eb; stroke: #9ca3af; filter: none; }
.bases-body svg:not(.circuit-on) .lamp-filament { stroke: #9ca3af; }
/* Mineurs 21/09 : la grille des encarts laissait une colonne vide à droite en pleine page
   (auto-fill) — auto-fit étire les encarts présents. */
.bases-body .card > div[style*="auto-fill"] { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important; }
.bases-body .schema-visual svg g[tabindex]:focus-visible { outline: none; filter: drop-shadow(0 0 4px rgba(52, 200, 162, 0.8)); }

/* ── 5. Page d'attente : fiche non validée (demande Lou 2026-09-19) ────────────────
   À l'adresse d'une fiche grisée, le générateur sert cette page À LA PLACE du schéma :
   le contenu non relu n'est jamais en ligne. Retour Lou du 2026-09-19 sur la première
   version (carte blanche sur fond gris) : « laisse juste le ciel étoilé avec la vignette
   au milieu, une carte un peu transparente qu'on voie les étoiles filantes derrière,
   « base » dans la couleur du logo ». Donc : UNE carte en verre sur le ciel, rien autour.

   Le verre est une teinte, pas un flou : un cadre (iframe) ne peut pas flouter ce qui
   est derrière lui dans la page mère, et un flou ferait des étoiles filantes des
   traînées — c'est justement ce qu'on veut voir passer. */

/* Pleine page : le ciel de l'atelier (outils-atelier.css § 10), stars-bg.js par-dessus
   (chargé par la page seulement hors cadre — dans la visionneuse, le ciel est celui de
   /outils). Le canvas se pose en z-index 0 : la barre et la carte passent devant. */
html.bases-nuit {
  background-color: #22324f;
  background-image: radial-gradient(120% 90% at 65% 0%, #30456f 0%, #25365a 45%, #1c2a45 100%);
  background-attachment: fixed;
}
body.bases-attente {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: transparent !important; min-height: 100vh; margin: 0;
}
body.bases-attente .bases-topbar,
body.bases-attente .bases-main { position: relative; z-index: 1; }
/* Dans le cadre, rien ne doit peindre par-dessus le ciel de /outils — ni le corps, ni le
   <html> qui porte le ciel de la pleine page (l'hôte pose la classe sur les deux). */
html.bases-nuit.bases-embarque { background: transparent; }   /* dans le cadre, le ciel est celui de /outils */
body.bases-embarque.bases-attente { background: transparent !important; }

.bases-encours { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 48px 22px; }
/* Dans le cadre, la hauteur suit le contenu (pas de 70 % d'un cadre qui se règle sur elle).
   Les marges CONTIENNENT l'ombre de la carte : le cadre est taillé sur le corps, tout ce
   qui déborde est coupé net — d'où la ligne horizontale sous la carte (retour Lou du
   2026-09-19). Ombre la plus basse : 22 + 56 = 78 px → 96 px en bas ; en haut 56 − 22 = 34 → 44 px. */
body.bases-embarque .bases-encours { min-height: 0; padding: 44px 24px 96px; }

/* La carte : verre clair sur la nuit — teinte blanche, liseré, filet de lumière en haut,
   ombre profonde et colorée pour se poser sur le ciel. */
.bases-encours-carte {
  width: min(520px, 100%); text-align: center; padding: 50px 44px 42px; border-radius: 24px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Deux couches : une ombre serrée qui décolle la carte, une large et douce qui la pose. */
  box-shadow:
    0 2px 6px rgba(2, 6, 20, 0.3),
    0 22px 56px rgba(2, 6, 20, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.bases-encours-logo { width: 68px; height: 68px; display: block; margin: 0 auto 16px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35)); }
/* Le mot-marque, tel qu'il est écrit dans le panneau de l'atelier (.at-side-nom). */
.bases-encours-marque { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; color: #fff; margin: 0; }
.bases-encours-marque b { color: #34c8a2; font-weight: 800; }
.bases-encours-etat {
  display: inline-flex; align-items: center; gap: 9px; margin: 22px 0 18px; padding: 8px 16px 8px 13px;
  border-radius: 999px; font-size: 13.5px; font-weight: 600; color: #bfeadb;
  background: rgba(52, 200, 162, 0.12); border: 1px solid rgba(52, 200, 162, 0.35);
}
.bases-encours-etat::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34c8a2;
  box-shadow: 0 0 0 3px rgba(52, 200, 162, 0.22), 0 0 14px rgba(52, 200, 162, 0.6);
}
.bases-encours-titre { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; color: #fff; margin: 0 0 10px; }
.bases-encours-texte { font-size: 15.5px; line-height: 1.6; color: #b3bfd1; margin: 0 auto; max-width: 40ch; }
.bases-encours-lien {
  display: inline-block; margin-top: 28px; font-size: 14px; font-weight: 600; color: #34c8a2;
  text-decoration: none; border-bottom: 1px solid rgba(52, 200, 162, 0.4); padding-bottom: 2px;
  transition: border-color .2s ease, color .2s ease;
}
.bases-encours-lien:hover { color: #fff; border-bottom-color: #fff; }
.bases-encours-lien:focus-visible { outline: 2px solid #34c8a2; outline-offset: 4px; border-radius: 4px; }

/* ── 6. Plein écran du dessin (demande Lou 2026-09-19) ─────────────────────────────
   Double tap (ou double clic) sur le dessin ; le dessin est déplacé dans un voile plein
   écran (script de la page), même geste pour refermer. En portrait, la scène est tournée
   d'un quart de tour et dimensionnée à l'écran inversé — repli d'iPhone, qui ne verrouille
   pas l'orientation. touch-action:manipulation : sans lui, le double tap zoome la page. */
.bases-body .schema-visual { touch-action: manipulation; }
.bases-plein-ecran {
  position: fixed; inset: 0; z-index: 100000; background: #0f172a; touch-action: manipulation;
  display: flex; align-items: center; justify-content: center;
}
/* Zones sûres (retour Lou 2026-09-22, « ça sort légèrement de l'écran ») : la page est en
   viewport-fit=cover, le voile passe donc SOUS l'encoche et la barre d'accueil de l'iPhone —
   la marge de la scène les compte. Tournée d'un quart de tour, la scène a son bord GAUCHE en
   haut de l'écran et son bord DROIT en bas : les marges tournent avec elle. */
.bases-plein-scene {
  width: 100%; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
}
.bases-body .bases-plein-scene svg {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  background: #eef2f7; border-radius: 12px; overflow: visible;
}
.bases-plein-ecran.est-tourne .bases-plein-scene {
  position: absolute; top: 0; left: 100vw; width: 100vh; height: 100vw;
  transform-origin: 0 0; transform: rotate(90deg);
  padding: max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-top, 0px));
}
/* Safari mesure 100vh SANS ses barres (le plus grand écran possible) : la scène tournée
   débordait de leur hauteur. Le viewport dynamique est celui qu'on voit réellement. */
@supports (height: 100dvh) {
  .bases-plein-ecran.est-tourne .bases-plein-scene { left: 100dvw; width: 100dvh; height: 100dvw; }
}
body.bases-plein-actif { overflow: hidden; }