/* ============================================================
   Thème commun des outils DMX Tools (proposition C, sombre).
   Une page l'adopte en chargeant /theme.css AVANT sa propre
   feuille, en mettant la classe "ec-theme" sur <body> et un
   <header id="ecEntete"></header> que pageSelector.js remplit
   (logo + menu des outils). La feuille propre à la page ne
   garde que sa mise en page, en utilisant les variables.

   Toutes les couleurs sont dans le bloc :root ci-dessous.
   ============================================================ */
:root {
    --ec-fond:          #111316;
    --ec-surface:       #1a1d21;
    --ec-surface2:      #22262b;
    --ec-bordure:       #2c3137;
    --ec-texte:         #e6e8eb;
    --ec-attenue:       #8d959e;
    --ec-accent:        #2bd46b;   /* vert Electroconcept, éclairci pour le fond sombre */
    --ec-accent-encre:  #062b14;   /* texte posé sur l'accent */
    --ec-accent-doux:   rgba(43, 212, 107, 0.12);
    --ec-alerte:        #f0a63a;
    --ec-entete-fond:   #0a0b0d;
    --ec-entete-texte:  #f1f3f5;
    --ec-logo:          #ffffff;
    --ec-logo-trait:    #2bd46b;

    --ec-nav-actif:     #2bd46b;   /* onglet actif du menu, sur l'en-tete toujours sombre */

    --ec-rayon:         12px;
    --ec-police:        "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --ec-mono:          Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;
    color-scheme: dark;
}

/* Mode clair : choisi avec le bouton soleil / lune de l'en-tete (pageSelector.js,
   memorise sur le poste). L'en-tete reste sombre. */
:root[data-theme="light"] {
    --ec-fond:          #f3f4f6;
    --ec-surface:       #ffffff;
    --ec-surface2:      #f1f3f5;
    --ec-bordure:       #dde1e6;
    --ec-texte:         #1c1f23;
    --ec-attenue:       #5f6873;
    --ec-accent:        #007f00;   /* vert Electroconcept assombri : lisible sur blanc */
    --ec-accent-encre:  #ffffff;
    --ec-accent-doux:   rgba(0, 127, 0, 0.09);
    --ec-alerte:        #b86e00;
    color-scheme: light;
}

/* ---------- base ---------- */
body.ec-theme {
    margin: 0;
    padding: 0;
    max-width: none;
    background: var(--ec-fond);
    color: var(--ec-texte);
    font-family: var(--ec-police);
    font-size: 15px;
    line-height: 1.45;
}
.ec-theme *, .ec-theme *::before, .ec-theme *::after { box-sizing: border-box; }
.ec-theme h1, .ec-theme h2, .ec-theme h3, .ec-theme h4 { color: var(--ec-texte); }
.ec-theme a { color: var(--ec-accent); }
.ec-theme ::selection { background: var(--ec-accent); color: var(--ec-accent-encre); }

/* Zone de contenu sous l'en-tête */
.ec-contenu { max-width: 1400px; margin: 0 auto; padding: 0 1.6rem 2.5rem; }

/* Bandeau de titre de la page */
.ec-titre {
    margin: 0 -1.6rem 1.4rem;
    padding: 1.4rem 1.6rem;
    background: var(--ec-surface);
    border-bottom: 1px solid var(--ec-bordure);
}
.ec-titre h1 { margin: 0; font-size: 1.55rem; font-weight: 650; letter-spacing: -0.01em; }
.ec-titre p { margin: 0.4rem 0 0; color: var(--ec-attenue); max-width: 80ch; }

/* ---------- en-tête commun (rempli par pageSelector.js) ---------- */
.ec-entete {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center; gap: 1.2rem;
    padding: 0.6rem 1.6rem;
    background: var(--ec-entete-fond);
    color: var(--ec-entete-texte);
    border-bottom: 1px solid var(--ec-bordure);
    font-family: var(--ec-police);
}
.ec-logo { display: block; height: 26px; width: auto; flex: none; }
.ec-logo text { fill: var(--ec-logo); }
.ec-logo path { stroke: var(--ec-logo-trait); }
.ec-nav { display: flex; flex-wrap: wrap; gap: 0.15rem; }
.ec-nav a {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.55rem 0.6rem;
    color: inherit; opacity: 0.75;
    text-decoration: none; font-size: 0.86rem; white-space: nowrap;
    border-radius: 6px;
}
.ec-nav a:hover { opacity: 1; background: rgba(255, 255, 255, 0.06); }
.ec-nav a[aria-current="page"] {
    opacity: 1; color: var(--ec-nav-actif); font-weight: 600;
    border-radius: 0; box-shadow: inset 0 -2px 0 var(--ec-nav-actif);
}
.ec-nav svg { width: 17px; height: 17px; flex: none; }
.ec-outils { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.ec-outils:empty { display: none; }
.ec-outils select { padding: 0.35rem 0.5rem; font-size: 0.85rem; background: transparent; color: var(--ec-entete-texte); }
.ec-menu {
    display: none; padding: 0.3rem;
    background: none; border: 0; color: inherit; cursor: pointer;
}
.ec-menu svg { width: 26px; height: 26px; display: block; }
.ec-theme .ec-menu { color: var(--ec-entete-texte); background: none; border: 0; padding: 0.3rem; }
/* Bouton mode clair / sombre */
.ec-theme .ec-bascule {
    display: flex; padding: 0.35rem;
    color: var(--ec-entete-texte); background: none;
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px;
}
.ec-theme .ec-bascule:hover { border-color: var(--ec-nav-actif); filter: none; }
.ec-bascule svg { width: 18px; height: 18px; display: block; }
.ec-outils select { border-color: rgba(255, 255, 255, 0.18); }
.ec-outils option { color: var(--ec-texte); background: var(--ec-surface); }

/* ---------- composants ---------- */
.ec-theme button {
    font: inherit; font-size: 0.9rem; font-weight: 600;
    padding: 0.55rem 1rem;
    color: var(--ec-accent-encre);
    background: var(--ec-accent);
    border: 1px solid var(--ec-accent);
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.15s, background 0.15s, border-color 0.15s;
}
.ec-theme button:hover { filter: brightness(1.1); }
.ec-theme button:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
/* bouton secondaire (pastilles, onglets, copier...) */
.ec-theme button.ec-secondaire {
    color: var(--ec-texte); background: var(--ec-surface2); border-color: var(--ec-bordure);
}
.ec-theme button.ec-secondaire:hover { border-color: var(--ec-accent); filter: none; }
.ec-theme button.ec-secondaire.active,
.ec-theme button.ec-secondaire[aria-pressed="true"] {
    color: var(--ec-accent); background: var(--ec-accent-doux); border-color: var(--ec-accent);
}

.ec-carte {
    background: var(--ec-surface);
    border: 1px solid var(--ec-bordure);
    border-radius: var(--ec-rayon);
    padding: 1.1rem 1.2rem 1.3rem;
}
.ec-carte > h2:first-child, .ec-carte h2 {
    margin: -1.1rem -1.2rem 1rem; padding: 0.9rem 1.2rem;
    font-size: 1rem; font-weight: 650;
    border-bottom: 1px solid var(--ec-bordure);
}

.ec-theme label { font-size: 0.82rem; color: var(--ec-attenue); font-weight: 600; }
.ec-theme input, .ec-theme select, .ec-theme textarea {
    font: inherit; font-size: 0.92rem;
    padding: 0.5rem 0.65rem;
    color: var(--ec-texte);
    background: var(--ec-surface2);
    border: 1px solid var(--ec-bordure);
    border-radius: 6px;
}
.ec-theme textarea { font-family: var(--ec-mono); font-size: 0.85rem; }
.ec-theme input:focus, .ec-theme select:focus, .ec-theme textarea:focus {
    outline: 2px solid var(--ec-accent); outline-offset: -1px;
}

.ec-theme table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ec-theme th {
    text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--ec-attenue); background: var(--ec-surface2);
    padding: 0.6rem 0.9rem; border: 0;
}
.ec-theme td { padding: 0.6rem 0.9rem; border: 0; border-top: 1px solid var(--ec-bordure); vertical-align: top; }
.ec-theme tbody tr:hover { background: color-mix(in srgb, var(--ec-texte) 4%, transparent); }
.ec-theme code, .ec-code { font-family: var(--ec-mono); font-size: 0.84rem; color: var(--ec-accent); }

/* ---------- bandeau « travail en cours retrouvé » (brouillon.js) ---------- */
.ec-brouillon {
    position: fixed; left: 50%; bottom: 1.2rem; z-index: 500;
    transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 2rem);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem;
    padding: 0.8rem 1rem 0.8rem 1.2rem;
    color: var(--ec-texte);
    background: var(--ec-surface);
    border: 1px solid var(--ec-accent);
    border-radius: var(--ec-rayon);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    font-family: var(--ec-police);
    font-size: 0.9rem;
}
.ec-brouillon p { margin: 0; }
.ec-brouillon strong { color: var(--ec-accent); }
.ec-brouillon div { display: flex; gap: 0.5rem; }

/* ---------- écran de présentation (intro.js) ---------- */
html.ec-intro-active { overflow: hidden; }
html.ec-intro-active .ec-entete .ec-logo { visibility: hidden; }
.ec-intro {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2.2rem; padding: 1.5rem;
    cursor: pointer;
    transition: opacity 0.4s ease;
}
/* fond dans un calque a part : un degrade ne s'anime pas, son opacite si */
.ec-intro::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(ellipse at center, #16191d 0%, #0a0b0d 70%);
    transition: opacity 0.8s ease;
}
.ec-intro-logo {
    width: min(78vw, 680px); height: auto; overflow: visible;
    transition: transform 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}
.ec-intro-logo path {
    stroke: var(--ec-logo-trait);
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: ec-intro-trait 0.9s 0.15s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
.ec-intro-logo text {
    fill: #ffffff; opacity: 0;
    animation: ec-intro-apparait 0.6s 0.55s ease-out forwards;
}
.ec-intro-texte { text-align: center; font-family: var(--ec-police); transition: opacity 0.5s ease, transform 0.5s ease; }
.ec-intro-titre {
    margin: 0; color: #ffffff;
    font-size: clamp(1.6rem, 5vw, 2.8rem); font-weight: 700; letter-spacing: 0.32em;
    padding-left: 0.32em;   /* compense l'espacement après la dernière lettre */
    opacity: 0; animation: ec-intro-monte 0.6s 1s ease-out forwards;
}
.ec-intro-accroche {
    margin: 0.6rem 0 0; color: #9aa3ad;
    font-size: clamp(0.95rem, 2.4vw, 1.15rem);
    opacity: 0; animation: ec-intro-monte 0.6s 1.25s ease-out forwards;
}
/* départ : le fond s'efface, le texte disparaît, le logo vole vers l'en-tête */
.ec-intro.ec-intro-depart::before { opacity: 0; }
.ec-intro.ec-intro-depart .ec-intro-texte { opacity: 0; transform: translateY(8px); }
.ec-intro.ec-intro-depart .ec-intro-titre, .ec-intro.ec-intro-depart .ec-intro-accroche { animation: none; opacity: 0; }
.ec-intro.ec-intro-depart .ec-intro-logo path { animation: none; stroke-dashoffset: 0; }
.ec-intro.ec-intro-depart .ec-intro-logo text { animation: none; opacity: 1; }
.ec-intro.ec-intro-fin { opacity: 0; pointer-events: none; }
@keyframes ec-intro-trait { to { stroke-dashoffset: 0; } }
@keyframes ec-intro-apparait { to { opacity: 1; } }
@keyframes ec-intro-monte { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- téléphone et petites fenêtres ---------- */
@media (max-width: 1100px) {
    .ec-entete { flex-wrap: wrap; padding: 0.6rem 1rem; }
    .ec-menu { display: block; }
    .ec-outils:empty + .ec-menu { margin-left: auto; }
    .ec-nav { display: none; order: 10; width: 100%; flex-direction: column; padding-bottom: 0.4rem; }
    .ec-entete.ouvert .ec-nav { display: flex; }
    .ec-nav a { font-size: 0.95rem; padding: 0.7rem 0.6rem; }
    .ec-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--ec-nav-actif); background: rgba(43, 212, 107, 0.12); }
    .ec-contenu { padding: 0 1rem 2rem; }
    .ec-titre { margin: 0 -1rem 1rem; padding: 1.1rem 1rem; }
    .ec-titre h1 { font-size: 1.25rem; }
}
/* telephone etroit : logo, mode, langue et menu sur une seule ligne */
@media (max-width: 420px) {
    .ec-entete { gap: 0.6rem; padding: 0.55rem 0.8rem; }
    .ec-logo { height: 21px; }
    .ec-outils { gap: 0.35rem; }
    .ec-outils select { max-width: 6.2rem; padding: 0.3rem 0.35rem; }
}