/* ============================================================
   N2M ELECTRONICS 2026 — socle de design
   Jetons de couleur, typographie, grille. Aucune valeur en dur
   hors de ce bloc : tout passe par des variables.
   ============================================================ */

:root {
    /* Couleurs de marque : noir et or N2M Electronics */
    --n2melec-noir:        #0c0c0d;
    --n2melec-noir-doux:   #16171a;
    --n2melec-or:          #f2b705;
    --n2melec-or-sombre:   #c99503;
    --n2melec-blanc:       #ffffff;
    --n2melec-gris-05:     #f6f7f8;
    --n2melec-gris-20:     #dfe2e6;
    --n2melec-gris-50:     #8b9199;
    --n2melec-gris-80:     #3b4046;
    --n2melec-rouge:       #c62828;   /* incendie, alertes */

    --n2melec-texte:       var(--n2melec-noir);
    --n2melec-texte-doux:  var(--n2melec-gris-80);
    --n2melec-fond:        var(--n2melec-blanc);

    /* Rythme : échelle de 8 px */
    --n2melec-esp-1: .5rem;
    --n2melec-esp-2: 1rem;
    --n2melec-esp-3: 1.5rem;
    --n2melec-esp-4: 2rem;
    --n2melec-esp-6: 3rem;
    --n2melec-esp-8: 4rem;

    --n2melec-largeur: 1180px;
    --n2melec-rayon:   10px;
    --n2melec-ombre:   0 2px 10px rgb(12 12 13 / .08);

    --n2melec-police: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--n2melec-fond);
    color: var(--n2melec-texte);
    font-family: var(--n2melec-police);
    font-size: 1.0625rem;
    line-height: 1.65;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.2; font-weight: 700; }

.n2melec-wrap {
    width: 100%;
    max-width: var(--n2melec-largeur);
    margin-inline: auto;
    padding-inline: var(--n2melec-esp-2);
}

/* Accessibilité : lien d'évitement visible au clavier uniquement */
.n2melec-skip {
    position: absolute;
    left: -9999px;
    background: var(--n2melec-noir);
    color: var(--n2melec-blanc);
    padding: var(--n2melec-esp-1) var(--n2melec-esp-2);
    z-index: 100;
}
.n2melec-skip:focus { left: var(--n2melec-esp-2); top: var(--n2melec-esp-2); }

/* ---------- En-tête ---------- */
.n2melec-header {
    background: var(--n2melec-noir);
    color: var(--n2melec-blanc);
    position: sticky;
    top: 0;
    z-index: 50;
}
.n2melec-header__inner {
    display: flex;
    align-items: center;
    gap: var(--n2melec-esp-2);
    min-height: 72px;
}
.n2melec-logo { text-decoration: none; font-size: 1.125rem; letter-spacing: .02em; }
.n2melec-logo__text strong { color: var(--n2melec-or); }

/* ============================================================
   NAVIGATION
   Six entrées de premier niveau, sur UNE ligne. Les prestations
   passent en panneau déroulant, avec leur icône : un déroulant de
   quinze lignes se balaie du regard, il ne se lit pas.
   ============================================================ */

.n2melec-nav { margin-inline-start: auto; }

.n2melec-nav__liste {
    display: flex;
    align-items: center;
    gap: var(--n2melec-esp-3);
    list-style: none;
    margin: 0;
    padding: 0;
    /* Pas de retour à la ligne : un menu sur deux lignes écrase le bandeau. */
    flex-wrap: nowrap;
}
.n2melec-nav__entree { position: relative; }

.n2melec-nav__liste > li > a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    font-size: .9375rem;
    white-space: nowrap;
    padding-block: 1.4rem;
    border-bottom: 2px solid transparent;
}
.n2melec-nav__liste > li > a:hover,
.n2melec-nav__liste > li > a:focus-visible,
.n2melec-nav__liste > li.current-menu-item > a,
.n2melec-nav__liste > li.current-menu-ancestor > a { border-bottom-color: var(--n2melec-or); }

.n2melec-nav__chevron { opacity: .6; transition: transform .18s ease; }
.n2melec-nav__entree:hover > a .n2melec-nav__chevron,
.n2melec-nav__entree:focus-within > a .n2melec-nav__chevron { transform: rotate(180deg); opacity: 1; }

/* Le bouton de dépliage ne sert qu'au doigt : au clavier et à la souris, le survol suffit. */
.n2melec-nav__deplier { display: none; }

/* ---- Le panneau ---- */

.n2melec-panneau {
    position: absolute;
    top: 100%;
    inset-inline-start: calc(var(--n2melec-esp-2) * -1);
    background: var(--n2melec-noir-doux);
    border-top: 3px solid var(--n2melec-or);
    border-radius: 0 0 var(--n2melec-rayon) var(--n2melec-rayon);
    box-shadow: 0 18px 40px rgb(0 0 0 / .45);
    padding: var(--n2melec-esp-2);
    z-index: 60;
    /* On masque sans retirer du flux : la transition reste possible et le clavier
       atteint les liens dès que le parent reçoit le focus. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.n2melec-nav__entree:hover > .n2melec-panneau,
.n2melec-nav__entree:focus-within > .n2melec-panneau {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.n2melec-panneau__liste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
    min-width: 250px;
}
/* Au-delà de huit prestations, deux colonnes : sinon le panneau descend sous le pli. */
.n2melec-panneau:has(li:nth-child(9)) .n2melec-panneau__liste {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    gap: 2px var(--n2melec-esp-2);
}

.n2melec-panneau a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: 7px;
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.3;
    color: #e9ecef;
}
.n2melec-panneau a:hover,
.n2melec-panneau a:focus-visible { background: rgb(255 255 255 / .09); color: var(--n2melec-blanc); }

/* L'icône porte la couleur du pôle : or pour l'électronique, rouge pour l'incendie.
   C'est le seul repère de couleur du menu — un arc-en-ciel ne se mémorise pas. */
.n2melec-panneau__icone { flex: none; color: var(--n2melec-gris-50); transition: color .15s ease; }
.est-electronique > a .n2melec-panneau__icone { color: var(--n2melec-or); }
.est-incendie > a .n2melec-panneau__icone { color: #ef5350; }
.n2melec-panneau a:hover .n2melec-panneau__icone { color: currentColor; }

/* ---- Appel à l'action et téléphone, à droite ---- */

.n2melec-header__cta { margin-inline-start: var(--n2melec-esp-2); white-space: nowrap; }
.n2melec-nav__pied { display: none; }

.n2melec-burger {
    display: none;
    margin-inline-start: auto;
    background: none;
    border: 0;
    color: inherit;
    padding: var(--n2melec-esp-1);
    cursor: pointer;
}

/* ---------- Boutons ---------- */
.n2melec-btn {
    display: inline-block;
    padding: .7rem 1.25rem;
    border-radius: var(--n2melec-rayon);
    text-decoration: none;
    font-weight: 600;
    font-size: .9375rem;
    transition: background-color .15s ease, transform .15s ease;
}
.n2melec-btn--or { background: var(--n2melec-or); color: var(--n2melec-noir); }
.n2melec-btn--or:hover { background: var(--n2melec-or-sombre); }

/* ---------- Contenu ---------- */
.n2melec-main { min-height: 50vh; }
.n2melec-page, .n2melec-single, .n2melec-archive, .n2melec-404 {
    padding-block: var(--n2melec-esp-6);
}
.n2melec-page__title { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); margin-block: 0 var(--n2melec-esp-3); }
.n2melec-page__media { margin: 0 0 var(--n2melec-esp-4); border-radius: var(--n2melec-rayon); overflow: hidden; }
.n2melec-prose { max-width: 72ch; }
.n2melec-prose h2 { margin-top: var(--n2melec-esp-6); font-size: 1.5rem; }
.n2melec-prose h3 { margin-top: var(--n2melec-esp-4); font-size: 1.2rem; }

.n2melec-breadcrumb { font-size: .875rem; color: var(--n2melec-texte-doux); margin-bottom: var(--n2melec-esp-2); }
.n2melec-breadcrumb a { text-decoration: none; }
.n2melec-breadcrumb span { margin-inline: .35rem; }

.n2melec-cta { margin-top: var(--n2melec-esp-4); }

/* ---------- Cartes ---------- */
.n2melec-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--n2melec-esp-3);
}
.n2melec-card {
    border: 1px solid var(--n2melec-gris-20);
    border-radius: var(--n2melec-rayon);
    overflow: hidden;
    background: var(--n2melec-blanc);
}
.n2melec-card__title { font-size: 1.125rem; margin: var(--n2melec-esp-2); }
.n2melec-card__title a { text-decoration: none; }
.n2melec-card__excerpt { margin: 0 var(--n2melec-esp-2) var(--n2melec-esp-2); color: var(--n2melec-texte-doux); font-size: .9375rem; }

/* ---------- Pied de page ---------- */
.n2melec-footer {
    background: var(--n2melec-noir);
    color: var(--n2melec-blanc);
    margin-top: var(--n2melec-esp-8);
    padding-block: var(--n2melec-esp-6) var(--n2melec-esp-3);
}
.n2melec-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--n2melec-esp-4);
}
.n2melec-footer__title { color: var(--n2melec-or); font-weight: 700; margin: 0 0 var(--n2melec-esp-1); }
.n2melec-footer__list { list-style: none; margin: 0; padding: 0; }
.n2melec-footer__list li { margin-bottom: .35rem; }
.n2melec-footer__list a { text-decoration: none; }
.n2melec-footer__list a:hover { text-decoration: underline; }
.n2melec-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--n2melec-esp-2);
    border-top: 1px solid rgb(255 255 255 / .15);
    margin-top: var(--n2melec-esp-4);
    padding-top: var(--n2melec-esp-2);
    font-size: .8125rem;
    color: var(--n2melec-gris-50);
}
.n2melec-footer__bottom a { color: inherit; }

/* ---------- Mobile ----------
   Le seuil tient compte du nombre d'entrées : la navigation passe en panneau
   dès 1100 px, car un menu à 7 entrées chevauche le bouton d'appel en dessous. */
/* ---- Au téléphone et sur tablette : panneau plein écran, dépliage au doigt ---- */
@media (max-width: 1100px) {
    .n2melec-burger { display: inline-flex; }
    .n2melec-header__cta { display: none; }
    .n2melec-header__inner { position: relative; }

    .n2melec-nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        max-height: calc(100vh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--n2melec-noir-doux);
        padding: var(--n2melec-esp-2);
        border-top: 3px solid var(--n2melec-or);
    }
    .n2melec-nav.est-ouvert { display: block; }

    .n2melec-nav__liste { flex-direction: column; align-items: stretch; gap: 0; }

    .n2melec-nav__entree { border-bottom: 1px solid rgb(255 255 255 / .08); }
    .n2melec-nav__liste > li > a {
        padding-block: .9rem;
        border-bottom: 0;
        font-size: 1rem;
        flex: 1;
    }
    .n2melec-nav__liste > li > a:hover,
    .n2melec-nav__liste > li.current-menu-item > a { border-bottom-color: transparent; color: var(--n2melec-or); }

    /* Le chevron du lien disparaît : c'est le bouton qui déplie, pour ne pas voler le clic
       au lien du pôle. Un visiteur qui touche « Sécurité incendie » veut la page du pôle. */
    .n2melec-nav__chevron { display: none; }

    .n2melec-nav__entree:has(.n2melec-panneau) > a { display: inline-flex; width: calc(100% - 48px); }

    .n2melec-nav__deplier {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset-inline-end: 0;
        top: 0;
        width: 44px;            /* cible tactile : 44 px, pas moins */
        height: 48px;
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
    }
    .n2melec-nav__deplier svg { transition: transform .18s ease; }
    .n2melec-nav__deplier[aria-expanded="true"] svg { transform: rotate(180deg); }

    /* Au doigt, le panneau se déplie dans le flux : pas de survol sur un écran tactile. */
    .n2melec-panneau {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 var(--n2melec-esp-2) var(--n2melec-esp-2);
    }
    .n2melec-nav__entree:hover > .n2melec-panneau,
    .n2melec-nav__entree:focus-within > .n2melec-panneau { display: none; }
    .n2melec-panneau.est-ouvert,
    .n2melec-nav__entree:hover > .n2melec-panneau.est-ouvert { display: block; }

    .n2melec-panneau__liste,
    .n2melec-panneau:has(li:nth-child(9)) .n2melec-panneau__liste {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .n2melec-nav__pied {
        display: flex;
        flex-direction: column;
        gap: var(--n2melec-esp-2);
        padding-top: var(--n2melec-esp-3);
        margin-top: var(--n2melec-esp-2);
        border-top: 1px solid rgb(255 255 255 / .12);
    }
    .n2melec-nav__pied .n2melec-btn { text-align: center; }
    .n2melec-nav__tel {
        text-align: center;
        font-weight: 600;
        font-size: 1.0625rem;
        color: var(--n2melec-or);
        text-decoration: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   PAGE PÔLE — héros, sections, points, questions, devis
   ============================================================ */

.n2melec-btn--fantome {
    border: 1px solid currentColor;
    color: inherit;
}

.n2melec-hero {
    background: var(--n2melec-noir);
    color: var(--n2melec-blanc);
    padding-block: var(--n2melec-esp-6);
}
.n2melec-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: var(--n2melec-esp-6);
    align-items: center;
}
.n2melec-hero .n2melec-breadcrumb { color: var(--n2melec-gris-50); }
.n2melec-hero__titre {
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem);
    margin: var(--n2melec-esp-1) 0 var(--n2melec-esp-2);
}
.n2melec-hero__chapeau {
    font-size: 1.125rem;
    color: #d8dbdf;
    max-width: 58ch;
    margin-bottom: var(--n2melec-esp-4);
}
.n2melec-hero__actions { display: flex; flex-wrap: wrap; gap: var(--n2melec-esp-2); margin: 0; }
.n2melec-hero__image { border-radius: var(--n2melec-rayon); width: 100%; }

.n2melec-section { padding-block: var(--n2melec-esp-6); }
.n2melec-section--grise { background: var(--n2melec-gris-05); }
.n2melec-section__titre {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    margin-block: 0 var(--n2melec-esp-4);
}

.n2melec-card--service { padding: var(--n2melec-esp-1) 0; }
.n2melec-card--service .n2melec-card__title a { text-decoration: none; }
.n2melec-card--service .n2melec-card__title a:hover { text-decoration: underline; }

.n2melec-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--n2melec-esp-2); }
.n2melec-points li { display: flex; gap: var(--n2melec-esp-1); align-items: flex-start; }
.n2melec-points svg { color: var(--n2melec-or-sombre); flex: none; margin-top: .2rem; }
.n2melec-points strong { display: block; }
.n2melec-points span { color: var(--n2melec-texte-doux); }

.n2melec-faq__item {
    border-bottom: 1px solid var(--n2melec-gris-20);
    padding-block: var(--n2melec-esp-2);
}
.n2melec-faq__item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}
.n2melec-faq__item summary::-webkit-details-marker { display: none; }
.n2melec-faq__item summary::after { content: " +"; color: var(--n2melec-or-sombre); }
.n2melec-faq__item[open] summary::after { content: " –"; }
.n2melec-faq__item p { margin: var(--n2melec-esp-1) 0 0; color: var(--n2melec-texte-doux); }

/* ---------- Formulaire ---------- */
.n2melec-devis { background: var(--n2melec-gris-05); padding-block: var(--n2melec-esp-6); }
.n2melec-devis__titre { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem); margin-block: 0 var(--n2melec-esp-1); }
.n2melec-devis__intro { max-width: 70ch; color: var(--n2melec-texte-doux); margin-bottom: var(--n2melec-esp-4); }

.n2melec-form__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--n2melec-esp-2);
}
.n2melec-champ { margin: 0 0 var(--n2melec-esp-2); }
.n2melec-champ label, .n2melec-champ legend { display: block; font-weight: 600; margin-bottom: .25rem; font-size: .9375rem; }
.n2melec-champ input, .n2melec-champ select, .n2melec-champ textarea {
    width: 100%;
    padding: .65rem .75rem;
    border: 1px solid var(--n2melec-gris-20);
    border-radius: var(--n2melec-rayon);
    font: inherit;
    background: var(--n2melec-blanc);
    color: inherit;
}
.n2melec-champ input:focus-visible,
.n2melec-champ select:focus-visible,
.n2melec-champ textarea:focus-visible {
    outline: 2px solid var(--n2melec-or-sombre);
    outline-offset: 1px;
}
.n2melec-champ--large { grid-column: 1 / -1; border: 0; padding: 0; }

.n2melec-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .5rem; }
.n2melec-case { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.n2melec-case input { width: auto; margin-top: .25rem; }

.n2melec-pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.n2melec-form__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: var(--n2melec-esp-2); margin-top: var(--n2melec-esp-2); }
.n2melec-lien-whatsapp { display: inline-flex; align-items: center; gap: .4rem; font-size: .9375rem; }

.n2melec-message {
    padding: var(--n2melec-esp-2);
    border-radius: var(--n2melec-rayon);
    margin-bottom: var(--n2melec-esp-3);
    border-inline-start: 4px solid;
}
.n2melec-message--ok { background: #eef7ee; border-color: #2e7d32; }
.n2melec-message--erreur { background: #fdecec; border-color: var(--n2melec-rouge); }

@media (max-width: 860px) {
    .n2melec-hero__inner { grid-template-columns: 1fr; gap: var(--n2melec-esp-3); }
    .n2melec-hero__media { order: -1; }
}

/* ============================================================
   ACCUEIL — pôles, points en colonnes, liens fléchés
   ============================================================ */

.n2melec-poles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--n2melec-esp-3);
}
.n2melec-pole {
    border: 1px solid var(--n2melec-gris-20);
    border-top: 3px solid var(--n2melec-or);
    border-radius: var(--n2melec-rayon);
    padding: var(--n2melec-esp-3);
}
.n2melec-pole__titre { margin-top: 0; font-size: 1.3rem; }
.n2melec-pole__titre a { text-decoration: none; }
.n2melec-pole__titre a:hover { text-decoration: underline; }
.n2melec-pole__texte { color: var(--n2melec-texte-doux); }

.n2melec-lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 2px solid var(--n2melec-or);
    padding-bottom: 2px;
}
.n2melec-lien-fleche:hover { color: var(--n2melec-or-sombre); }

.n2melec-section--noire { background: var(--n2melec-noir); color: var(--n2melec-blanc); }
.n2melec-section--noire .n2melec-points span { color: #c9ced4; }
.n2melec-section--noire .n2melec-points svg { color: var(--n2melec-or); }

.n2melec-points--colonnes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--n2melec-esp-3); }

/* ============================================================
   LES PREUVES — logos, certification, moyens
   ============================================================ */

.n2melec-section__intro { max-width: 70ch; color: var(--n2melec-texte-doux); margin-top: calc(var(--n2melec-esp-3) * -1); margin-bottom: var(--n2melec-esp-4); }

.n2melec-logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--n2melec-esp-2);
}
.n2melec-logos__item {
    background: var(--n2melec-blanc);
    border: 1px solid var(--n2melec-gris-20);
    border-radius: var(--n2melec-rayon);
    min-height: 104px;
    padding: var(--n2melec-esp-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    text-align: center;
}
/* Les logos viennent de sources différentes : on les contraint sans jamais les étirer. */
.n2melec-logos__image { max-height: 52px; width: auto; max-width: 100%; object-fit: contain; }
.n2melec-logos__nom { font-weight: 600; font-size: .9375rem; }
.n2melec-logos__legende { font-size: .8125rem; color: var(--n2melec-texte-doux); }

/* Deux grilles de partenaires côte à côte : électronique à gauche, incendie à droite.
   `auto-fit` plutôt qu'un 1fr 1fr figé — si un seul pôle a des partenaires, sa grille
   occupe toute la largeur au lieu de laisser une colonne vide. */
.n2melec-colonnes-preuves {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--n2melec-esp-4);
}
.n2melec-colonne-preuve__titre {
    font-size: 1.0625rem;
    margin: 0 0 var(--n2melec-esp-2);
    padding-bottom: var(--n2melec-esp-1);
    border-bottom: 2px solid var(--n2melec-or);
}
/* Dans une colonne, la place est deux fois plus étroite : des cases plus petites. */
.n2melec-logos--serrees { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
.n2melec-logos--serrees .n2melec-logos__item { min-height: 92px; }
.n2melec-logos--serrees .n2melec-logos__image { max-height: 46px; }
/* Sans légende, les cases n'ont plus de texte à porter : quatre par ligne au lieu de trois,
   et les quatre partenaires d'un pôle tiennent sur un seul rang. */
.n2melec-logos--mur { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.n2melec-logos--mur .n2melec-logos__item { min-height: 80px; }

.n2melec-secteurs {
    list-style: none;
    margin: var(--n2melec-esp-2) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.n2melec-secteurs li {
    border: 1px solid var(--n2melec-gris-20);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .875rem;
}

.n2melec-certif {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
    gap: var(--n2melec-esp-6);
    align-items: center;
}
.n2melec-certif p { color: #d8dbdf; max-width: 62ch; }
.n2melec-certif__detail { font-size: .9375rem; color: var(--n2melec-gris-50) !important; }
.n2melec-certif__logos { display: flex; flex-wrap: wrap; gap: var(--n2melec-esp-2); align-items: center; justify-content: center; }
.n2melec-certif__logos img {
    background: var(--n2melec-blanc);
    border-radius: var(--n2melec-rayon);
    padding: .6rem;
    max-height: 110px;
    width: auto;
    object-fit: contain;
}

.n2melec-moyens {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--n2melec-esp-3);
}
.n2melec-moyen__media {
    border-radius: var(--n2melec-rayon);
    overflow: hidden;
    background: var(--n2melec-gris-05);
    aspect-ratio: 3 / 2;
    margin-bottom: var(--n2melec-esp-2);
}
.n2melec-moyen__media img { width: 100%; height: 100%; object-fit: cover; }
.n2melec-moyen__titre { margin: 0 0 .4rem; font-size: 1.125rem; }
.n2melec-moyen__texte { margin: 0; color: var(--n2melec-texte-doux); }

/* L'image de tête vient parfois d'un visuel de petite taille : on la pose sur une carte
   claire et on ne l'agrandit jamais au-delà de sa définition réelle. */
.n2melec-hero__media {
    background: var(--n2melec-blanc);
    border-radius: var(--n2melec-rayon);
    padding: var(--n2melec-esp-3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}
.n2melec-hero__image { max-height: 300px; width: auto; max-width: 100%; object-fit: contain; }

@media (max-width: 860px) {
    .n2melec-certif { grid-template-columns: 1fr; gap: var(--n2melec-esp-3); }
    .n2melec-hero__media { min-height: 180px; padding: var(--n2melec-esp-2); }
    .n2melec-hero__image { max-height: 200px; }
}

/* ============================================================
   CATALOGUE — familles, filtres, fiches produit
   ============================================================ */

.n2melec-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: var(--n2melec-esp-4);
}
.n2melec-filtre {
    border: 1px solid var(--n2melec-gris-20);
    background: var(--n2melec-blanc);
    border-radius: 999px;
    padding: .4rem .9rem;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
}
.n2melec-filtre:hover { border-color: var(--n2melec-or-sombre); }
.n2melec-filtre.est-actif {
    background: var(--n2melec-noir);
    border-color: var(--n2melec-noir);
    color: var(--n2melec-blanc);
}
.n2melec-filtre:focus-visible { outline: 2px solid var(--n2melec-or-sombre); outline-offset: 2px; }

.n2melec-famille { margin-bottom: var(--n2melec-esp-6); }
.n2melec-famille[hidden] { display: none; }

.n2melec-produit { display: flex; flex-direction: column; }
.n2melec-produit__media {
    display: block;
    background: var(--n2melec-gris-05);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--n2melec-esp-2);
}
.n2melec-produit__media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.n2melec-produit__marque {
    display: inline-block;
    margin: var(--n2melec-esp-2) var(--n2melec-esp-2) 0;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--n2melec-texte-doux);
}
.n2melec-produit__marque--hero { margin: 0 0 .4rem; color: var(--n2melec-or); }
.n2melec-produit .n2melec-card__title { margin-top: .35rem; font-size: 1rem; }



.n2melec-nav__list .current-menu-item > a,
.n2melec-nav__list .current-page-ancestor > a { border-bottom-color: var(--n2melec-or); }

@media (max-width: 1100px) {
    /* En panneau, les sous-menus restent dépliés : pas de second clic à deviner. */
    .n2melec-nav__list .sub-menu {
        position: static;
        display: block;
        min-width: 0;
        background: none;
        border: 0;
        box-shadow: none;
        padding: 0 0 var(--n2melec-esp-1) var(--n2melec-esp-2);
    }
    .n2melec-nav__list .menu-item-has-children > a::after { display: none; }
    .n2melec-nav { max-height: 70vh; overflow-y: auto; }
}

/* ============================================================
   PAGES TRANSVERSES — contact, actualités, questions fréquentes
   ============================================================ */

/* Carte de moyen de contact : l'icône donne le repère, le lien reste la cible cliquable. */
.n2melec-card--contact svg { color: var(--n2melec-or-sombre); margin-bottom: var(--n2melec-esp-1); }

/* Date d'un article : discrète, au-dessus du titre, jamais plus visible que lui. */
.n2melec-card__meta {
    margin: 0 0 .35rem;
    font-size: .8125rem;
    color: var(--n2melec-texte-doux);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Sur une page entièrement consacrée aux questions, on respire davantage. */
.n2melec-faq--large { max-width: 80ch; }

.n2melec-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--n2melec-esp-1);
    margin-top: var(--n2melec-esp-4);
}
.n2melec-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;            /* cible tactile : 44 px, pas moins */
    min-height: 44px;
    padding: 0 .7rem;
    border: 1px solid var(--n2melec-gris-20);
    border-radius: var(--n2melec-rayon);
    text-decoration: none;
    color: var(--n2melec-texte);
}
.n2melec-pagination .page-numbers:hover { border-color: var(--n2melec-or); }
.n2melec-pagination .page-numbers.current {
    background: var(--n2melec-noir);
    border-color: var(--n2melec-noir);
    color: var(--n2melec-blanc);
    font-weight: 600;
}

/* ============================================================
   CARTES DE PRESTATION — la grille qui remplace les murs de texte
   ============================================================ */

.n2melec-grille-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--n2melec-esp-2);
}

.n2melec-carte {
    border: 1px solid var(--n2melec-gris-20);
    border-radius: var(--n2melec-rayon);
    background: var(--n2melec-blanc);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.n2melec-carte:hover {
    border-color: var(--n2melec-or);
    box-shadow: 0 10px 24px rgb(12 12 13 / .09);
    transform: translateY(-2px);
}

/* Toute la carte est cliquable : viser un titre de trois mots au doigt est pénible. */
.n2melec-carte__lien {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    height: 100%;
    padding: var(--n2melec-esp-2);
    text-decoration: none;
    color: inherit;
}

.n2melec-carte__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--n2melec-gris-05);
    color: var(--n2melec-gris-80);
    flex: none;
}
/* Or pour l'électronique, rouge pour l'incendie : les deux métiers se distinguent d'un
   coup d'œil, sans avoir à lire. */
.n2melec-carte.est-electronique .n2melec-carte__pastille { background: #fdf4d7; color: var(--n2melec-or-sombre); }
.n2melec-carte.est-incendie .n2melec-carte__pastille     { background: #fdeaea; color: var(--n2melec-rouge); }

.n2melec-carte__titre { font-size: 1.0625rem; margin: 0; line-height: 1.25; }
.n2melec-carte__texte {
    margin: 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--n2melec-texte-doux);
}
.n2melec-carte__fleche {
    margin-top: auto;
    padding-top: .35rem;
    color: var(--n2melec-or-sombre);
    transition: transform .16s ease;
}
.n2melec-carte:hover .n2melec-carte__fleche { transform: translateX(4px); }

/* Sur fond noir, la carte s'inverse au lieu de trouer la section. */
.n2melec-section--noire .n2melec-carte {
    background: rgb(255 255 255 / .04);
    border-color: rgb(255 255 255 / .12);
}
.n2melec-section--noire .n2melec-carte__texte { color: #b9bfc6; }
.n2melec-section--noire .n2melec-carte__pastille { background: rgb(255 255 255 / .07); }

@media (prefers-reduced-motion: reduce) {
    .n2melec-carte, .n2melec-carte__fleche { transition: none; }
    .n2melec-carte:hover { transform: none; }
}

/* Bloc d'un pôle : son titre, son compte, sa grille. */
.n2melec-pole-bloc + .n2melec-pole-bloc { margin-top: var(--n2melec-esp-6); }
.n2melec-pole-bloc__titre {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--n2melec-esp-2);
    font-size: 1.1875rem;
    margin: 0 0 var(--n2melec-esp-2);
    padding-bottom: var(--n2melec-esp-1);
    border-bottom: 2px solid var(--n2melec-or);
}
.n2melec-pole-bloc__titre a { text-decoration: none; }
.n2melec-pole-bloc__titre a:hover { text-decoration: underline; }
.n2melec-pole-bloc__compte {
    margin-inline-start: auto;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--n2melec-texte-doux);
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ============================================================
   DEUX COLONNES — texte à gauche, rail d'appui à droite
   Une fiche de 1 200 mots dans une colonne étroite au milieu d'une
   page vide se lit mal et ne propose rien. Le rail occupe la place
   perdue et garde le devis à portée pendant toute la lecture.
   ============================================================ */

.n2melec-colonnes {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--n2melec-esp-6);
    align-items: start;
}

.n2melec-rail {
    position: sticky;
    top: calc(72px + var(--n2melec-esp-2));   /* sous l'en-tête collant */
    display: grid;
    gap: var(--n2melec-esp-2);
}

.n2melec-rail__carte {
    border: 1px solid var(--n2melec-gris-20);
    border-radius: var(--n2melec-rayon);
    padding: var(--n2melec-esp-2);
    background: var(--n2melec-blanc);
}
.n2melec-rail__carte--action { background: var(--n2melec-gris-05); border-color: var(--n2melec-or); }

.n2melec-rail__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: var(--n2melec-esp-1);
}
.n2melec-rail__pastille.est-electronique { background: #fdf4d7; color: var(--n2melec-or-sombre); }
.n2melec-rail__pastille.est-incendie     { background: #fdeaea; color: var(--n2melec-rouge); }

.n2melec-rail__titre { font-weight: 700; font-size: 1.0625rem; margin: 0 0 .4rem; }
.n2melec-rail__texte { margin: 0 0 var(--n2melec-esp-2); font-size: .875rem; line-height: 1.5; color: var(--n2melec-texte-doux); }
.n2melec-rail__btn { display: block; text-align: center; }

.n2melec-rail__tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: var(--n2melec-esp-1);
    padding: .5rem;
    font-weight: 600;
    text-decoration: none;
}
.n2melec-rail__lien {
    display: block;
    margin-top: .2rem;
    text-align: center;
    font-size: .8125rem;
    color: var(--n2melec-texte-doux);
}

.n2melec-rail__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.n2melec-rail__liste a {
    display: block;
    padding: .45rem .5rem;
    border-radius: 7px;
    font-size: .875rem;
    text-decoration: none;
}
.n2melec-rail__liste a:hover { background: var(--n2melec-gris-05); }

/* Sous 1000 px le rail passe dessous : une colonne de 300 px écrase le texte. */
@media (max-width: 1000px) {
    .n2melec-colonnes { grid-template-columns: 1fr; gap: var(--n2melec-esp-4); }
    .n2melec-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

/* ============================================================
   VISUEL D'ÉQUIPEMENT — en attendant les photos
   Sept fiches sur onze n'ont pas encore de photo. Plutôt que
   d'étirer l'image de la famille, on montre une pastille nette :
   elle se lit comme un repère, pas comme une photo ratée.
   ============================================================ */

.n2melec-visuel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    min-height: 150px;
    padding: var(--n2melec-esp-2);
    background:
        linear-gradient(135deg, var(--n2melec-gris-05) 0%, #eceef1 100%);
    color: var(--n2melec-gris-50);
    text-align: center;
    text-decoration: none;   /* le libellé hérite sinon du soulignement du lien parent */
}
.n2melec-visuel.est-electronique { background: linear-gradient(135deg, #fdf7e3 0%, #f8ecc4 100%); color: var(--n2melec-or-sombre); }
.n2melec-visuel.est-incendie     { background: linear-gradient(135deg, #fdeeee 0%, #f8d8d8 100%); color: var(--n2melec-rouge); }

.n2melec-visuel__famille {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    opacity: .85;
}

/* Dans l'en-tête d'une fiche, le visuel occupe la place d'une vraie photo. */
.n2melec-visuel--grand {
    min-height: 260px;
    border-radius: var(--n2melec-rayon);
    gap: var(--n2melec-esp-1);
}
.n2melec-visuel--grand .n2melec-visuel__famille { font-size: .875rem; }

@media (max-width: 860px) {
    .n2melec-visuel--grand { min-height: 180px; }
}

/* ============================================================
   BANDEAU DE TERRAIN — la grande photo d'une fiche
   ============================================================ */

.n2melec-terrain { background: var(--n2melec-noir); color: var(--n2melec-blanc); }
.n2melec-terrain__inner {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--n2melec-esp-6);
    padding-block: var(--n2melec-esp-6);
}
.n2melec-terrain__media { border-radius: var(--n2melec-rayon); overflow: hidden; }
.n2melec-terrain__image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 340px;
    object-fit: cover;        /* vraie photo : on la cadre, on ne la déforme pas */
}
.n2melec-terrain__titre { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); margin: 0 0 var(--n2melec-esp-2); }
.n2melec-terrain__texte p { color: #c9ced4; line-height: 1.6; }
.n2melec-terrain__texte .n2melec-lien-fleche { color: var(--n2melec-or); }

@media (max-width: 860px) {
    .n2melec-terrain__inner { grid-template-columns: 1fr; gap: var(--n2melec-esp-3); }
    .n2melec-terrain__image { max-height: 240px; }
}

/* Le visuel d'un équipement garde sa proportion dans une carte. */
.n2melec-produit__media { display: block; background: var(--n2melec-gris-05); }
.n2melec-produit__media img { display: block; width: 100%; height: 190px; object-fit: contain; padding: var(--n2melec-esp-1); }

/* ============================================================
   EFFET MACHINE À ÉCRIRE — le curseur
   Le texte lui-même est géré en JavaScript ; ici on ne dessine
   que le curseur clignotant pendant la frappe.
   ============================================================ */

.n2melec-hero__titre.est-a-frapper,
.n2melec-hero__accroche.est-a-frapper,
.n2melec-section__titre.est-a-frapper,
.n2melec-terrain__titre.est-a-frapper {
    /* La hauteur est réservée en JS : la page ne saute pas pendant la frappe. */
    white-space: pre-wrap;
}

.est-en-frappe::after {
    content: '';
    display: inline-block;
    width: .08em;
    min-width: 2px;
    height: 1em;
    margin-inline-start: .08em;
    vertical-align: -.1em;
    background: var(--n2melec-or);
    animation: n2melec-curseur .7s steps(1) infinite;
}

/* Le curseur d'un titre de section reprend la couleur du texte : l'or
   sur fond clair y serait moins lisible que dans l'en-tête sombre. */
.n2melec-section__titre.est-en-frappe::after { background: currentColor; }

@keyframes n2melec-curseur {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Mouvement réduit : le script ne s'exécute pas, mais on neutralise aussi
   le curseur au cas où une classe serait restée en place. */
@media (prefers-reduced-motion: reduce) {
    .est-en-frappe::after { animation: none; opacity: 0; }
}

/* ============================================================
   VIDÉO DE L'EN-TÊTE D'ACCUEIL
   Même cadre que l'image qu'elle remplace : l'en-tête garde
   exactement la même géométrie, rien ne saute au chargement.
   ============================================================ */

/* ------------------------------------------------------------------
   En-tête d'accueil : la vidéo occupe tout le fond de la section.

   Le texte doit rester lisible QUOI QUE montre l'image en dessous —
   d'où le voile sombre, qui sert aussi à masquer le grain d'une source
   de 848×480 agrandie. Une hauteur minimale empêche la section de se
   réduire à rien avant l'arrivée du fichier.
   ------------------------------------------------------------------ */

.n2melec-hero--fond {
    position: relative;
    isolation: isolate;                  /* le voile ne déborde pas de la section */
    overflow: hidden;
    min-height: clamp(420px, 68vh, 640px);
    display: grid;
    align-items: center;
}

.n2melec-hero--fond .n2melec-hero__video,
.n2melec-hero--fond .n2melec-hero__fond,
.n2melec-hero--fond .n2melec-hero__voile {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.n2melec-hero--fond .n2melec-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* L'image d'attente est posée par l'attribut `poster` : rien à charger en plus. */
}

.n2melec-hero--fond .n2melec-hero__fond {
    background-size: cover;
    background-position: center;
}

/* Deux dégradés superposés : l'un assombrit la gauche, où vit le texte ;
   l'autre pose un fond uniforme pour que les boutons tiennent partout. */
.n2melec-hero--fond .n2melec-hero__voile {
    background:
        linear-gradient(100deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.75) 42%, rgba(10,10,10,.35) 100%),
        linear-gradient(0deg,   rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 100%);
}

/* Une seule colonne : le texte n'a plus de vignette à côté de lui. */
.n2melec-hero--fond .n2melec-hero__inner { grid-template-columns: 1fr; }
.n2melec-hero--fond .n2melec-hero__texte { max-width: 42rem; }

@media (max-width: 860px) {
    .n2melec-hero--fond { min-height: clamp(360px, 60vh, 480px); }
    /* Au téléphone, le texte passe devant une image, pas devant une vidéo
       (main.js ne charge pas le fichier) : on assombrit davantage. */
    .n2melec-hero--fond .n2melec-hero__voile {
        background: linear-gradient(0deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.70) 100%);
    }
}

/* ============================================================
   ILLUSTRATION DE SECTION
   Une photo posée à côté d'un texte, ou en tête d'une liste.
   Jamais décorative : le gabarit ne rend rien sans image.
   ============================================================ */

.n2melec-illustration { margin: 0 0 var(--n2melec-esp-3); }
.n2melec-illustration__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--n2melec-rayon);
}
.n2melec-illustration__legende {
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--n2melec-gris-50);
}

/* Texte et photo côte à côte. Le texte garde la priorité de largeur :
   on illustre un propos, on ne le remplace pas. */
.n2melec-avec-illustration {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--n2melec-esp-5);
    align-items: start;
}
.n2melec-avec-illustration .n2melec-prose { max-width: none; }

/* Dans une section à liste, la photo passe à droite du titre, en bandeau. */
.n2melec-illustration--droite { float: none; }

@media (min-width: 1000px) {
    .n2melec-section .n2melec-illustration--droite {
        float: inline-end;
        width: min(38%, 420px);
        margin-inline-start: var(--n2melec-esp-4);
    }
}

@media (max-width: 860px) {
    .n2melec-avec-illustration { grid-template-columns: 1fr; gap: var(--n2melec-esp-3); }
}

/* Carte de pôle, sur l'accueil : la photo coiffe la carte. */
.n2melec-pole__media { display: block; margin: calc(var(--n2melec-esp-3) * -1) calc(var(--n2melec-esp-3) * -1) var(--n2melec-esp-3); }
.n2melec-pole__image {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: var(--n2melec-rayon) var(--n2melec-rayon) 0 0;
}