/* GÉNÉRÉ — NE PAS ÉDITER À LA MAIN. Styles de la section « Outils de calcul », partagés avec la page publique /outils. Source : public/app/dashboard.html (section data-section="tools"). Régénérer : node scripts/ops/build-outils-page.js */ /* ============================================================ REFONTE 2026-06-03 — Design system sobre « pro/moderne » Palette unique famille bleu nuit → teal (marque Ohmbase), accent vert #30c39e. Remplace le violet + l'arc-en-ciel. Ces règles overrident les styles inline historiques (gradients vifs) sans avoir à toucher chaque bloc un par un. ============================================================ */ /* Jeu de variables (2026-09-03, audit #11 « thème sombre ») : TOUTES les couleurs de surface, de trait et de texte de la section passent par ces variables — les valeurs claires sont celles qui étaient codées en dur (rendu clair inchangé au pixel près, vérifié). Posées aussi sur :root : les menus déroulants maison et les bulles d'aide vivent dans , hors de la section. */ :root, [data-section="tools"]{ --tool-ink:#0f172a; /* encre / navy */ --tool-ink-soft:#1e293b; --tool-ink-3:#374151; --tool-ink-4:#111827; --tool-ink-5:#334155; --tool-ink-6:#475569; --tool-accent:#30c39e; /* vert Ohmbase */ --tool-line:#e2e8f0; --tool-line-g:#e5e7eb; --tool-line-2:#f1f5f9; --tool-line-3:#d1d5db; --tool-line-4:#f3f4f6; --tool-line-5:#e0e0e0; --tool-muted:#64748b; --tool-muted-g:#6b7280; --tool-muted-2:#94a3b8; --tool-muted-2g:#9ca3af; --tool-muted-3:#999; --tool-card:#fff; /* surfaces : cartes, champs, menus */ --tool-soft:#f8fafc; --tool-soft-2:#f9fafb; --tool-soft-3:#f3f4f6; --tool-soft-4:#f1f5f9; --tool-soft-teal:#f0fdfa; --tool-soft-5:#fbfcfd; --tool-line-6:#cbd5e1; --tool-grad-tuile:linear-gradient(#f3fbff,#f0fdfa); /* tuile de circuit active */ --tool-tuile-hover-bg:#f8fbff; --tool-tuile-hover-line:#bfd3f7; /* tuile survolée */ --tool-btn-bg:linear-gradient(135deg,#e2ecf9 0%, #dcf2ec 100%); --tool-btn-ink:#1e3a5f; --tool-btn-line:#c9d9ec; /* bouton Calculer pastel */ --tool-inverse:#0f172a; --tool-inverse-ink:#f1f5f9; /* bulle d'aide */ --tool-ok:#22c55e; --tool-ok-2:#10b981; --tool-ok-ink:#166534; --tool-ok-bg:#dcfce7; --tool-warn:#f59e0b; --tool-warn-ink:#92400e; --tool-warn-bg:#fef3c7; --tool-danger:#ef4444; --tool-danger-2:#dc2626; --tool-danger-ink:#991b1b; --tool-danger-bg:#fee2e2; --tool-blue-2:#3b82f6; --tool-blue-ink:#1e40af; --tool-blue-ink-2:#1d4ed8; --tool-blue-bg:#dbeafe; --tool-indigo-ink:#3730a3; --tool-protect-ink:#0f766e; --tool-grad-active:linear-gradient(135deg,#eef4ff 0%, #e6f7f3 100%); --tool-grad-ok:linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); --tool-grad-warn:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); --tool-grad-blue:linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); --tool-grad-danger:linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); /* Teintes par outil — même famille bleu→teal, nuance distincte */ --tool-section:#1e3a5f; /* bleu nuit */ --tool-power:#1d4ed8; /* bleu */ --tool-vdrop:#0e7490; /* cyan profond */ --tool-protect:#0f766e; /* teal foncé */ --tool-heat:#155e63; /* teal-pétrole */ --tool-tables:#334155; /* ardoise */ --tool-formulas:#475569; /* ardoise clair */ } /* Palette SOMBRE : même jeu de variables, valeurs nuit. Activée par data-theme="dark" sur (bascule soleil/lune de /outils ; le dashboard ne la pose pas encore). Les teintes par outil s'éclaircissent pour rester lisibles en texte sur fond nuit ; le bouton « Calculer » et l'accent ne changent pas. color-scheme: dark rend natifs sombres champs et menus. */ :root[data-theme="dark"], [data-theme="dark"] [data-section="tools"]{ color-scheme:dark; --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; } /* --- PILLS : actif encre + pastille accent, inactif sobre --- */ /* 2026-09-04 : douze onglets tiennent sur deux rangées — pills resserrées pour que le bouton « Calculer » reste visible sans défiler en 1440×900. */ [data-section="tools"] .calc-tab{ padding:8px 14px !important; font-size:12.5px !important; border:2px solid var(--tool-line) !important; background:var(--tool-card) !important; color:var(--tool-ink-6) !important; font-weight:600;border-radius:9px !important;transition:.15s; } [data-section="tools"] .calc-tab:hover{ border-color:var(--tool-line-6) !important; background:var(--tool-soft) !important; } [data-section="tools"] .calc-tab i{ color:var(--tool-muted-2); transition:.15s; } /* Pill active : contour dégradé marque (bleu→vert) sur fond blanc — cohérent avec le bouton Calculer */ [data-section="tools"] .calc-tab.calc-tab-active, [data-section="tools"] .calc-tab-active{ color:var(--tool-ink) !important; font-weight:700 !important; border:2px solid transparent !important; background-image:linear-gradient(var(--tool-card),var(--tool-card)), linear-gradient(135deg,#1d4ed8 0%,#30c39e 100%) !important; background-origin:border-box !important; background-clip:padding-box, border-box !important; } [data-section="tools"] .calc-tab.calc-tab-active i, [data-section="tools"] .calc-tab-active i{ color:var(--tool-protect) !important; } /* --- HEADERS DE CARTE : neutre clair, titre encre, accent par pastille --- */ [data-section="tools"] .calc-card-header{ background:var(--tool-card) !important; color:var(--tool-ink) !important; border-bottom:1px solid var(--tool-line); padding:18px 22px !important; position:relative; } [data-section="tools"] .calc-card-header h2{ color:var(--tool-ink) !important; font-size:16px; } [data-section="tools"] .calc-card-header p{ color:var(--tool-muted) !important; opacity:1 !important; } /* liseré teinté à gauche du header = identité de l'outil */ [data-section="tools"] .calc-card-header::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tool-section); } /* teinte par onglet via data-tool sur le tab-panel parent */ [data-section="tools"] #power-calc .calc-card-header::before{ background:var(--tool-power); } [data-section="tools"] #voltage-drop .calc-card-header::before{ background:var(--tool-vdrop); } [data-section="tools"] #protection .calc-card-header::before{ background:var(--tool-protect); } [data-section="tools"] #heating .calc-card-header::before{ background:var(--tool-heat); } [data-section="tools"] #power-calc .calc-card-header h2 i{ color:var(--tool-power); } [data-section="tools"] #voltage-drop .calc-card-header h2 i{ color:var(--tool-vdrop); } [data-section="tools"] #protection .calc-card-header h2 i{ color:var(--tool-protect); } [data-section="tools"] #heating .calc-card-header h2 i{ color:var(--tool-heat); } [data-section="tools"] #section-calc .calc-card-header h2 i{ color:var(--tool-section); } /* --- BOUTONS CALCULER : contour dégradé marque (bleu→vert Ohmbase), fond blanc --- */ [data-section="tools"] .calc-btn{ background:var(--tool-card) !important; color:var(--tool-ink) !important; border:2px solid transparent !important; border-radius:12px !important; /* double background : fond blanc + dégradé marque sur le contour */ background-image:linear-gradient(var(--tool-card),var(--tool-card)), linear-gradient(135deg,#1d4ed8 0%,#30c39e 100%) !important; background-origin:border-box !important; background-clip:padding-box, border-box !important; box-shadow:none !important; transition:.18s !important; } /* Hover : on NE remplit PAS — contour dégradé conservé, juste ombre douce + 1px */ [data-section="tools"] .calc-btn:hover{ box-shadow:0 6px 16px rgba(15,23,42,.10) !important; transform:translateY(-1px); } [data-section="tools"] .calc-btn i{ color:var(--tool-protect); } /* --- ENCADRÉS « OBJECTIF » / INFO : sobres, gris clair --- */ [data-section="tools"] .tool-objective{ font-size:12.5px;color:var(--tool-muted); background:var(--tool-soft);border:1px solid var(--tool-line);border-radius:10px; padding:10px 12px;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start; } [data-section="tools"] .tool-objective i{ color:var(--tool-accent);margin-top:1px;flex-shrink:0; } /* --- KPI / info-card headers : neutraliser les fonds vifs --- */ [data-section="tools"] .info-card-header{ background:var(--tool-soft) !important;color:var(--tool-ink) !important; border-bottom:1px solid var(--tool-line);font-size:13px; } [data-section="tools"] .info-card-header i{ color:var(--tool-accent); } [data-section="tools"] .result-kpi.highlight{ background:var(--tool-soft-teal) !important;border-color:#99f6e4 !important; } [data-section="tools"] .result-kpi.highlight .result-kpi-value{ color:var(--tool-protect) !important; } /* En-têtes de tableaux : gris très clair + texte encre (plus de noir) */ [data-section="tools"] .ref-table-header{ background:var(--tool-soft) !important; color:var(--tool-ink) !important; border-bottom:1px solid var(--tool-line) !important; } [data-section="tools"] .ref-table-header i{ color:var(--tool-protect) !important; } [data-section="tools"] .formula-item{ background:var(--tool-soft) !important;border:1px solid var(--tool-line); } [data-section="tools"] .formula-expression{ color:var(--tool-ink) !important; } [data-section="tools"] .recommendations{ background:var(--tool-soft) !important;border-left-color:var(--tool-accent) !important; } [data-section="tools"] .recommendations-title{ color:var(--tool-ink) !important; } [data-section="tools"] .recommendation-item{ color:var(--tool-ink-5) !important; } [data-section="tools"] .recommendation-item i{ color:var(--tool-accent); } /* --- Repli « options avancées » & « plus de circuits » --- */ [data-section="tools"] .tool-advanced{ display:none !important; } [data-section="tools"] .tool-advanced.open{ display:grid !important; margin-top:10px; } [data-section="tools"] .tool-advanced.open.tool-block{ display:block !important; } [data-section="tools"] .tool-toggle{ font-size:12.5px;font-weight:600;color:var(--tool-protect); cursor:pointer;display:inline-flex;align-items:center;gap:6px;margin:4px 0 14px; background:none;border:0;padding:0; } [data-section="tools"] .tool-toggle:hover{ color:var(--tool-ink); } /* --- Boutons type de circuit : sélection sobre (encre, plus de violet) --- */ /* Type de circuit sélectionné : contour dégradé marque + fond teinté pâle (cohérent onglets) */ [data-section="tools"] .circuit-type-btn.active{ border:2px solid transparent !important; background-image:linear-gradient(#f0fdfa,#f0fdfa), linear-gradient(135deg,#1d4ed8 0%,#30c39e 100%) !important; background-origin:border-box !important; background-clip:padding-box, border-box !important; } [data-section="tools"] .circuit-type-btn.active i, [data-section="tools"] .circuit-type-btn.active span{ color:var(--tool-ink) !important; } [data-section="tools"] .circuit-type-btn:hover{ border-color:var(--tool-line-6) !important; } /* --- Statut résultat / focus champs : accent vert au lieu du violet --- */ [data-section="tools"] .form-group input:focus, [data-section="tools"] .form-group select:focus, [data-section="tools"] .input-with-unit input:focus{ border-color:var(--tool-accent) !important; box-shadow:0 0 0 3px rgba(48,195,158,.15) !important; } [data-section="tools"] .input-unit, [data-section="tools"] .form-group label i{ color:var(--tool-muted) !important; } /* --- Icônes placeholder de résultats : accent neutre (plus orange/rouge/vert vif décoratif) --- */ [data-section="tools"] .results-placeholder i{ color:#cbd5e1 !important; } /* --- Petites pastilles de résistivité (Cu/Al/cosφ) : encre sobre --- */ [data-section="tools"] .formula-item .formula-expression{ color:var(--tool-ink) !important; } /* On garde les couleurs SÉMANTIQUES (conformité) : results-status success/warning/error, barres de chute de tension ok/warning/danger, cartes limites 3/5/8% — ce sont des informations métier, pas de la décoration. */ /* === Layout Principal === */ /* === Sidebar === */ /* === Quick Access === */ /* === Main Content === */ [data-section="tools"] .calc-main-content { padding: 30px; overflow-y: auto; } [data-section="tools"] .content-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 25px; } [data-section="tools"] .content-header h1 { font-size: 2em; color: var(--tool-ink-soft); display: flex; align-items: center; gap: 12px; } .content-header h1 i { color: #667eea; } [data-section="tools"] .content-header p { color: var(--tool-muted); font-size: 14px; margin-top: 5px; } [data-section="tools"] .header-actions { display: flex; gap: 10px; } [data-section="tools"] .action-btn { padding: 10px 18px; border: none; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 8px; } [data-section="tools"] .action-btn.primary { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } [data-section="tools"] .action-btn.secondary { background: var(--tool-card); color: var(--tool-muted); border: 2px solid var(--tool-line); } [data-section="tools"] .action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* === Tab Panels === */ [data-section="tools"] .tab-panel { display: none; animation: fadeIn 0.3s ease; } .tab-panel.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* === Calculator Card === */ [data-section="tools"] .calc-container { display: grid; grid-template-columns: 1fr 400px; gap: 25px; } /* ⚠️ Préfixe [data-section="tools"] RÉTABLI le 2026-09-03. Sans lui, ce sélecteur (0,1,0) perdait contre celui de la règle de base (0,2,0) déclarée juste au-dessus : la grille restait en « 1fr 400px » sur téléphone, donc la carte de saisie s'écrasait à ~44 px de large. Découvert en portant la section sur la page publique /outils (cf. docs/site-vitrine/atelier-outils-public.md). */ @media (max-width: 1200px) { [data-section="tools"] .calc-container { grid-template-columns: 1fr; } } [data-section="tools"] .calc-card { background: var(--tool-card); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } [data-section="tools"] .calc-card-body { padding: 22px 30px 24px; } [data-section="tools"] .calc-main-content { padding: 0; } [data-section="tools"] .calc-card-header { padding: 20px 25px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; } [data-section="tools"] .calc-card-header h2 { font-size: 18px; display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } [data-section="tools"] .calc-card-header p { font-size: 13px; opacity: 0.9; } /* === Form Styles === */ [data-section="tools"] .form-section { margin-bottom: 25px; } [data-section="tools"] .form-section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--tool-muted); margin-bottom: 15px; padding-bottom: 8px; border-bottom: 2px solid var(--tool-line-2); } [data-section="tools"] .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } [data-section="tools"] .form-grid.three-cols { grid-template-columns: repeat(3, 1fr); } [data-section="tools"] .form-group { display: flex; flex-direction: column; gap: 6px; } [data-section="tools"] .form-group.full-width { grid-column: span 2; } [data-section="tools"] .form-group label { font-size: 13px; font-weight: 600; color: var(--tool-ink-5); display: flex; align-items: center; gap: 6px; } [data-section="tools"] .form-group label i { color: #667eea; font-size: 12px; } .form-group input, [data-section="tools"] .form-group select { padding: 12px 15px; border: 2px solid var(--tool-line); border-radius: 10px; font-size: 14px; transition: all 0.2s; background: var(--tool-soft); } .form-group input:focus, [data-section="tools"] .form-group select:focus { outline: none; border-color: #667eea; background: var(--tool-card); box-shadow: 0 0 0 4px rgba(102,126,234,0.1); } [data-section="tools"] .form-group input::placeholder { color: var(--tool-muted-2); } [data-section="tools"] .input-with-unit { position: relative; } [data-section="tools"] .input-with-unit input { padding-right: 50px; } [data-section="tools"] .input-unit { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--tool-muted); font-weight: 600; } /* === Circuit Type Selector === */ [data-section="tools"] .circuit-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; } [data-section="tools"] .circuit-type-btn { padding: 15px 10px; border: 2px solid var(--tool-line); border-radius: 12px; background: var(--tool-card); cursor: pointer; transition: all 0.2s; text-align: center; } [data-section="tools"] .circuit-type-btn:hover { border-color: #667eea; background: var(--tool-soft); } [data-section="tools"] .circuit-type-btn.active { border-color: #667eea; background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); } [data-section="tools"] .circuit-type-btn i { font-size: 22px; margin-bottom: 6px; display: block; } .circuit-type-btn.active i { color: #667eea; } [data-section="tools"] .circuit-type-btn span { font-size: 11px; font-weight: 600; color: var(--tool-muted); } .circuit-type-btn.active span { color: #667eea; } /* === Calculate Button === */ [data-section="tools"] .calc-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; } [data-section="tools"] .calc-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(102,126,234,0.4); } [data-section="tools"] .calc-btn:active { transform: translateY(0); } [data-section="tools"] .calc-btn i { font-size: 18px; } /* === Results Panel === */ [data-section="tools"] .results-panel { background: var(--tool-card); border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.06); } [data-section="tools"] .results-header { padding: 18px 20px; background: var(--tool-soft); border-bottom: 2px solid var(--tool-line); display: flex; align-items: center; justify-content: space-between; } [data-section="tools"] .results-header h3 { font-size: 15px; color: var(--tool-ink-5); display: flex; align-items: center; gap: 8px; } [data-section="tools"] .results-header h3 i { color: #667eea; } [data-section="tools"] .results-body { padding: 20px; } [data-section="tools"] .results-status { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; } [data-section="tools"] .results-status.success { background: var(--tool-ok-bg); color: var(--tool-ok-ink); } [data-section="tools"] .results-status.warning { background: var(--tool-warn-bg); color: var(--tool-warn-ink); } [data-section="tools"] .results-status.error { background: var(--tool-danger-bg); color: var(--tool-danger-ink); } [data-section="tools"] .results-placeholder { text-align: center; padding: 40px 20px; color: var(--tool-muted-2); } [data-section="tools"] .results-placeholder i { font-size: 48px; margin-bottom: 15px; opacity: 0.5; } [data-section="tools"] .results-placeholder p { font-size: 14px; } /* === Result Cards === */ [data-section="tools"] .result-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; } [data-section="tools"] .result-kpi { padding: 15px; border-radius: 12px; background: var(--tool-soft); border: 1px solid var(--tool-line); text-align: center; } [data-section="tools"] .result-kpi.highlight { background: var(--tool-grad-blue); border-color: #3b82f6; } [data-section="tools"] .result-kpi.success { background: var(--tool-grad-ok); border-color: var(--tool-ok); } [data-section="tools"] .result-kpi.warning { background: var(--tool-grad-warn); border-color: var(--tool-warn); } [data-section="tools"] .result-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tool-muted); margin-bottom: 5px; } [data-section="tools"] .result-kpi-value { font-size: 24px; font-weight: 800; color: var(--tool-ink-soft); } .result-kpi.highlight .result-kpi-value { color: var(--tool-blue-ink-2); } .result-kpi.success .result-kpi-value { color: var(--tool-ok-ink); } .result-kpi.warning .result-kpi-value { color: var(--tool-warn-ink); } [data-section="tools"] .result-kpi-unit { font-size: 14px; font-weight: 600; } /* === Result Details === */ [data-section="tools"] .result-details { background: var(--tool-soft); border-radius: 12px; padding: 15px; margin-bottom: 15px; } [data-section="tools"] .result-details-title { font-size: 12px; font-weight: 700; color: var(--tool-ink-5); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .result-details-title i { color: #667eea; } [data-section="tools"] .result-detail-row { display: flex; justify-content: space-between; /* gap + baseline (2026-09-03) : sans gouttière, dès que la valeur passait à la ligne elle venait coller l'étiquette (« Limitation8 points max/circuit » dans l'onglet Protection). Se voyait dans la colonne Résultats étroite, systématiquement sur téléphone. */ gap: 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--tool-line); font-size: 13px; } .result-detail-row:last-child { border-bottom: none; } .result-detail-label { color: var(--tool-muted); flex-shrink: 0; } .result-detail-value { font-weight: 600; color: var(--tool-ink-soft); text-align: right; } /* === Voltage Drop Bar === */ [data-section="tools"] .voltage-drop-visual { margin-bottom: 15px; } [data-section="tools"] .voltage-drop-bar { height: 24px; background: var(--tool-line); border-radius: 12px; overflow: hidden; position: relative; margin-bottom: 8px; } [data-section="tools"] .voltage-drop-fill { height: 100%; border-radius: 12px; transition: width 0.5s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 11px; font-weight: 700; color: white; } .voltage-drop-fill.ok { background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); } .voltage-drop-fill.warning { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); } .voltage-drop-fill.danger { background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); } [data-section="tools"] .voltage-drop-limits { display: flex; justify-content: space-between; font-size: 10px; color: var(--tool-muted); } /* === Recommendations === */ [data-section="tools"] .recommendations { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-radius: 12px; padding: 15px; border-left: 4px solid #3b82f6; } [data-section="tools"] .recommendations-title { font-size: 12px; font-weight: 700; color: var(--tool-blue-ink); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } [data-section="tools"] .recommendation-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--tool-blue-ink); padding: 5px 0; } .recommendation-item i { margin-top: 2px; } /* === Warnings === */ [data-section="tools"] .warnings-list { margin-top: 15px; } [data-section="tools"] .warning-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #fff7ed; border-radius: 10px; border-left: 3px solid var(--tool-warn); margin-bottom: 10px; } [data-section="tools"] .warning-item i { color: var(--tool-warn); margin-top: 2px; } [data-section="tools"] .warning-item span { font-size: 13px; color: #9a3412; } /* === Reference Tables === */ [data-section="tools"] .ref-tables-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } [data-section="tools"] .ref-table-card { background: var(--tool-card); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); } [data-section="tools"] .ref-table-header { padding: 15px 20px; background: var(--tool-soft); color: var(--tool-ink); border-bottom: 1px solid var(--tool-line); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 10px; } [data-section="tools"] .ref-table { width: 100%; border-collapse: collapse; } [data-section="tools"] .ref-table th { padding: 12px 15px; text-align: left; background: var(--tool-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tool-muted); font-weight: 600; } [data-section="tools"] .ref-table td { padding: 12px 15px; border-bottom: 1px solid var(--tool-line-2); font-size: 13px; color: var(--tool-ink-5); } .ref-table tr:hover { background: var(--tool-soft); } /* Plus de fond bleu surligné (demande Lou) : valeur sobre, juste en gras pour garder l'emphase utile sans l'effet « badge ». */ [data-section="tools"] .ref-table .highlight-cell { background: none; font-weight: 700; color: var(--tool-ink); border-radius: 0; padding: 0; } /* === Formulas Card === */ [data-section="tools"] .formulas-card { background: var(--tool-card); border-radius: 16px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 25px; } [data-section="tools"] .formulas-card h3 { font-size: 16px; color: var(--tool-ink-soft); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; } .formulas-card h3 i { color: #667eea; } [data-section="tools"] .formula-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } [data-section="tools"] .formula-item { padding: 18px 16px; background: var(--tool-soft); border: 2px solid #94a3b8; /* ligne plus épaisse + sombre = contraste */ border-radius: 12px; text-align: center; transition: border-color .18s ease, box-shadow .18s ease; } [data-section="tools"] .formula-item:hover { border-color: var(--tool-accent); box-shadow: 0 4px 12px rgba(15,23,42,.07); } /* Titre de catégorie de formules : libellé + trait dégradé court */ [data-section="tools"] .formula-cat-title { position: relative; font-size: 12px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; color: var(--tool-ink); margin: 22px 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--tool-line); } [data-section="tools"] .formula-cat-title:first-of-type { margin-top: 6px; } [data-section="tools"] .formula-cat-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; border-radius: 2px; background: linear-gradient(90deg,#1d4ed8 0%, var(--tool-accent) 100%); } /* --- Cartes formules cliquables : clic = expansion + légende symboles --- */ [data-section="tools"] .formula-item.is-clickable { cursor: pointer; } [data-section="tools"] .formula-legend { display: none; } /* carte ouverte : pleine largeur (toutes colonnes), surlignée marque */ [data-section="tools"] .formula-item.expanded { grid-column: 1 / -1; border-color: transparent; background: var(--tool-grad-tuile) padding-box, linear-gradient(135deg,#1d4ed8 0%, #1a8fc1 55%, var(--tool-accent) 100%) border-box; border: 2.5px solid transparent; /* contour marqué en mode agrandi */ box-shadow: 0 10px 26px rgba(26,143,193,.20); } [data-section="tools"] .formula-item.expanded .formula-expression { font-size: 20px; } [data-section="tools"] .formula-item.expanded .formula-name { font-size: 13px; margin-bottom: 14px; } [data-section="tools"] .formula-item.expanded .formula-legend { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--tool-line-6); text-align: left; } [data-section="tools"] .formula-legend-row { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; } [data-section="tools"] .formula-legend-row .fl-sym { flex-shrink: 0; min-width: 56px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 14px; color: var(--tool-blue-ink-2); } [data-section="tools"] .formula-legend-row .fl-def { font-size: 13px; color: var(--tool-ink-soft); } /* --- Légende symboles : colonnes propres (symbole aligné | définition) --- */ [data-section="tools"] .legend-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 28px; } @media (max-width: 700px) { [data-section="tools"] .legend-grid { grid-template-columns: 1fr; } } [data-section="tools"] .legend-row { display: grid; grid-template-columns: 56px 1fr; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--tool-line-2); } [data-section="tools"] .legend-row .lg-sym { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 800; font-size: 14px; color: var(--tool-blue-ink-2); text-align: right; } [data-section="tools"] .legend-row .lg-def { font-size: 13px; color: var(--tool-ink-soft); line-height: 1.35; } [data-section="tools"] .formula-name { font-size: 12px; color: var(--tool-muted); margin-bottom: 10px; } [data-section="tools"] .formula-expression { font-size: 15px; font-weight: 700; color: var(--tool-ink); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* === Info Cards === */ [data-section="tools"] .info-card { background: var(--tool-card); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-bottom: 20px; } [data-section="tools"] .info-card-header { padding: 15px 20px; font-weight: 700; display: flex; align-items: center; gap: 10px; } .info-card-header.blue { background: var(--tool-grad-blue); color: var(--tool-blue-ink); } .info-card-header.orange { background: var(--tool-grad-warn); color: var(--tool-warn-ink); } .info-card-header.green { background: var(--tool-grad-ok); color: var(--tool-ok-ink); } [data-section="tools"] .info-card-content { padding: 20px; } [data-section="tools"] .info-list { list-style: none; } [data-section="tools"] .info-list li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--tool-line-2); font-size: 13px; color: var(--tool-ink-6); } .info-list li:last-child { border-bottom: none; } .info-list li i { color: var(--tool-ok); margin-top: 2px; } /* === Responsive === */ /* ⚠️ Même correction que pour .calc-container ci-dessus (2026-09-03) : ces règles étaient écrites SANS le préfixe de section et perdaient toutes en spécificité contre leurs règles de base. Aucune n'avait jamais pris effet — la section « Outils de calcul » n'était pas responsive du tout. Invisible en prod parce que sur téléphone les utilisateurs passent par /mobile, mis en évidence par la page publique /outils. `.calc-main-content { padding: 15px }` n'est PAS repris : une règle plus tardive de ce même bloc ([data-section="tools"] .calc-main-content, padding 0 4px 24px) la domine de toute façon par ordre de déclaration. */ @media (max-width: 1200px) { [data-section="tools"] .formula-grid { grid-template-columns: 1fr; } [data-section="tools"] .ref-tables-grid { grid-template-columns: 1fr; } /* .info-cards-grid porte sa grille en style INLINE dans le markup (style="grid-template-columns: repeat(2, 1fr)") → seul !important passe. */ [data-section="tools"] .info-cards-grid { grid-template-columns: 1fr !important; } } @media (max-width: 768px) { [data-section="tools"] .form-grid, [data-section="tools"] .form-grid.three-cols { grid-template-columns: 1fr; } [data-section="tools"] .circuit-type-grid { grid-template-columns: repeat(2, 1fr); } /* (Cases résultat : deux par rangée depuis le 2026-09-17 — règle en fin de bloc.) */ /* Les 3 cartes « limites » (3 % / 5 % / poste privé) s'empilent : à trois de front sur 390 px, le « 48px » de chaque carte débordait (audit #10). La grille porte ses colonnes en style INLINE → seul !important passe. */ [data-section="tools"] .limites-grid { grid-template-columns: 1fr !important; } } /* Mobile Menu */ @media (max-width: 1200px) { } /* (ancienne règle .calc-tab-active violette retirée — l'état actif est géré plus haut en contour dégradé marque, lignes ~5756) */ [data-section="tools"] .calc-main-content { padding: 0 4px 24px 4px; overflow-y: visible; } /* =========================================================== OUTILS DE CALCUL — Modernisation « accentué dégradé marque » (2026-06-24). Bloc final : écrase le legacy violet (#667eea/#764ba2) + fond lavande. Scopé tools, 100% CSS, structure/classes/id inchangés. Couleurs SÉMANTIQUES des résultats (success/warning/error) NON touchées. Palette : bleu #1d4ed8 → cyan #1a8fc1 → teal accent #30c39e. NB : le bouton .calc-btn reste en CONTOUR dégradé sur fond blanc (choix Lou — cohérent onglets/cartes), donc PAS re-stylé ici. =========================================================== */ /* --- TYPE DE CIRCUIT : cartes nettes, icône teal, barre dégradée --- */ [data-section="tools"] .circuit-type-grid{ gap:12px !important; } [data-section="tools"] .circuit-type-btn{ position:relative; padding:16px 10px 14px !important; border:2px solid var(--tool-line-6) !important; /* tour plus contrasté (slate-300) */ border-radius:14px !important; background:var(--tool-card) !important; background-image:none !important; /* purge le fond lavande legacy */ box-shadow:0 1px 3px rgba(15,23,42,.07); overflow:hidden; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease !important; } /* fine barre supérieure dégradée, révélée au hover/active */ [data-section="tools"] .circuit-type-btn::before{ content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,#1d4ed8 0%, #1a8fc1 50%, var(--tool-accent) 100%); opacity:0;transition:opacity .18s ease; } [data-section="tools"] .circuit-type-btn:hover{ border-color:var(--tool-tuile-hover-line) !important; background:var(--tool-tuile-hover-bg) !important; box-shadow:0 4px 12px rgba(29,78,216,.10); transform:translateY(-1px); } [data-section="tools"] .circuit-type-btn:hover::before{ opacity:.55; } /* ÉTAT ACTIF : contour dégradé marque + fond teinté pâle + barre pleine */ [data-section="tools"] .circuit-type-btn.active{ border:2px solid transparent !important; background-image: var(--tool-grad-tuile), linear-gradient(135deg,#1d4ed8 0%, #1a8fc1 55%, var(--tool-accent) 100%) !important; background-origin:border-box !important; background-clip:padding-box, border-box !important; box-shadow:0 6px 16px rgba(26,143,193,.14) !important; transform:none; } [data-section="tools"] .circuit-type-btn.active::before{ opacity:1; } /* icône : accent teal au repos, encre franche quand actif (neutralise legacy violet) */ [data-section="tools"] .circuit-type-btn i{ display:block !important;font-size:22px !important;margin-bottom:8px !important; color:var(--tool-accent) !important;transition:color .18s ease; } [data-section="tools"] .circuit-type-btn:hover i{ color:#1a8fc1 !important; } [data-section="tools"] .circuit-type-btn.active i{ color:var(--tool-blue-ink-2) !important; } /* label (neutralise legacy violet) */ [data-section="tools"] .circuit-type-btn span{ font-size:11px !important;font-weight:700 !important;letter-spacing:.2px; color:var(--tool-muted) !important; } [data-section="tools"] .circuit-type-btn.active span{ color:var(--tool-ink) !important; } /* --- TITRE DE SECTION : trait dégradé court sous le border-bottom --- */ [data-section="tools"] .form-section-title{ position:relative; font-size:12px !important;font-weight:800 !important;letter-spacing:1.1px !important; color:var(--tool-ink) !important; padding-bottom:10px !important; border-bottom:1px solid var(--tool-line) !important; margin-bottom:16px !important; } [data-section="tools"] .form-section-title::after{ content:"";position:absolute;left:0;bottom:-1px; width:44px;height:3px;border-radius:2px; background:linear-gradient(90deg,#1d4ed8 0%, var(--tool-accent) 100%); } [data-section="tools"] .form-section-title i{ color:var(--tool-accent) !important;margin-right:6px;font-size:12px !important; } /* --- LABELS + CHAMPS : sobres, focus cerclé teal (neutralise focus violet) --- */ [data-section="tools"] .form-group label{ font-size:13px !important;font-weight:600 !important;color:var(--tool-ink-soft) !important; } /* Épuration Lou : pas d'icônes décoratives devant les labels, les titres de section, ni dans les boutons « Calculer » (uniforme & propre). Les pictos des boutons type-circuit (.circuit-type-btn i) NE sont PAS concernés — ils restent. */ [data-section="tools"] .form-group label i, [data-section="tools"] .form-section-title > i, [data-section="tools"] .form-section-title i.fas, [data-section="tools"] .calc-btn i, [data-section="tools"] .ref-table-header i, [data-section="tools"] .info-card-header i, [data-section="tools"] .formulas-card h3 i{ display:none !important; } /* Panneau Résultats vide : on masque le placeholder (icône calculatrice + « Remplissez le formulaire… ») — le panneau reste sobrement vide. */ [data-section="tools"] .results-placeholder{ display:none !important; } [data-section="tools"] .form-group input, [data-section="tools"] .form-group select, [data-section="tools"] .input-with-unit input{ box-sizing:border-box !important; width:100% !important; /* l'input remplit son conteneur → unité collée au bord du champ */ height:46px !important; /* hauteur uniforme input = select partout */ padding:0 14px !important; /* vertical géré par height (alignement parfait) */ border:1.5px solid var(--tool-line) !important; border-radius:11px !important; font-size:14px !important; line-height:normal !important; background:var(--tool-soft) !important; color:var(--tool-ink) !important; box-shadow:inset 0 1px 2px rgba(15,23,42,.025); transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important; } /* le select natif garde son chevron ; on assure juste la même boîte */ [data-section="tools"] .form-group select{ -webkit-appearance:auto; appearance:auto; padding-right:10px !important; } [data-section="tools"] .form-group input:hover, [data-section="tools"] .form-group select:hover, [data-section="tools"] .input-with-unit input:hover{ border-color:var(--tool-line-6) !important;background:var(--tool-card) !important; } [data-section="tools"] .form-group input:focus, [data-section="tools"] .form-group select:focus, [data-section="tools"] .input-with-unit input:focus{ outline:none !important; border-color:var(--tool-accent) !important; background:var(--tool-card) !important; box-shadow:0 0 0 3px rgba(48,195,158,.16) !important; } [data-section="tools"] .form-group input::placeholder{ color:var(--tool-muted-2) !important; } /* --- UNITÉ (W / m / A …) : pastille collée près du texte --- */ /* On masque les flèches spinner natives (input number) : elles poussaient le contenu et détachaient l'unité du champ. */ [data-section="tools"] .input-with-unit input[type=number]{ -moz-appearance:textfield; /* Firefox : pas de spinner */ } [data-section="tools"] .input-with-unit input[type=number]::-webkit-outer-spin-button, [data-section="tools"] .input-with-unit input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; /* Chrome/Safari : pas de spinner */ } [data-section="tools"] .input-with-unit input{ padding-right:44px !important; } [data-section="tools"] .input-unit{ right:10px !important; display:inline-flex;align-items:center;height:24px;padding:0 9px; font-size:12px !important;font-weight:700 !important; color:var(--tool-protect) !important; background:var(--tool-soft-teal);border-radius:7px;pointer-events:none; } /* --- EN-TÊTE RÉSULTATS : voile dégradé léger marque --- */ [data-section="tools"] .results-header{ padding:16px 20px !important; background:linear-gradient(135deg, rgba(29,78,216,.06) 0%, rgba(48,195,158,.10) 100%) !important; border-bottom:1px solid var(--tool-line) !important; } [data-section="tools"] .results-header h3{ font-size:15px !important;font-weight:700 !important;color:var(--tool-ink) !important; } [data-section="tools"] .results-header h3 i{ color:var(--tool-protect) !important; } /* --- KPI : carte neutre, principal en bleu marque. success / warning / error NON touchés (conformité métier). --- */ [data-section="tools"] .result-kpi{ padding:15px !important;border-radius:12px !important; background:var(--tool-soft) !important;border:1px solid var(--tool-line) !important; text-align:center;transition:box-shadow .18s ease, transform .18s ease; } [data-section="tools"] .result-kpi:hover{ box-shadow:0 4px 12px rgba(15,23,42,.06); } [data-section="tools"] .result-kpi.highlight{ background:var(--tool-grad-active) !important; background-image:var(--tool-grad-active) !important; border-color:#1a8fc1 !important; } [data-section="tools"] .result-kpi.highlight .result-kpi-value{ color:var(--tool-blue-ink-2) !important; } [data-section="tools"] .result-kpi-label{ font-size:10px !important;letter-spacing:.6px;color:var(--tool-muted) !important; } [data-section="tools"] .result-kpi-value{ font-size:24px !important;font-weight:800 !important;color:var(--tool-ink) !important; } /* .result-kpi.success / .warning / .error : laissés intacts (vert/orange/rouge). */ /* =========================================================== FONDATIONS VISUELLES 2026-09-03 (audit validé par Lou, lot A) =========================================================== */ /* --- Icônes Lucide : l'enveloppe