@charset "UTF-8";
/* =========================================================================
   ESPACES CLÔTURES PORTAILS : formats complémentaires
   Matériaux comparés, poses commentées, équipement extérieur en vitrine,
   outil panneaux et poteaux.
   Mêmes règles que style.css : le filet fin de 1 px, le blanc, l'accent bleu
   réservé aux liens et au repère courant, aucune ombre, aucun déplacement au survol.
   Jetons : ceux de :root dans style.css. Seule valeur ajoutée, une hauteur :
   --ecp-fx-haut = hauteur réelle de l'en-tête collant (barre 76 px + filet,
   bande des formats 40 px + filet ; sous 1000 px, la bande passe dans le menu).
   ========================================================================= */

:root { --ecp-fx-haut: calc(var(--ecp-hh) + 42px); }
@media (max-width: 999px) { :root { --ecp-fx-haut: calc(var(--ecp-hh) + 1px); } }

.screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── En-tête : bande des formats sous la barre principale ─────────────
   Les quatre formats ne tiennent pas dans la barre à côté de la rubrique :
   ils prennent une seconde ligne en petites capitales, posée sur le filet.
   Sous 1000 px, cette bande disparaît et les formats passent dans le menu
   plein écran du thème (mêmes règles que le palier 720 px, recopiées). */
.ecp-nav-fx { display: none; }
.ecp-formats { border-top: 1px solid var(--ecp-filet); }
.ecp-formats-liste {
    display: flex; align-items: center; gap: 30px;
    height: 40px;
    overflow-x: auto; scrollbar-width: none;
}
.ecp-formats-liste::-webkit-scrollbar { display: none; }
.ecp-formats-liste a {
    display: inline-flex; align-items: center; height: 40px;
    font-family: var(--ecp-display); font-weight: 600; font-size: var(--ecp-t-micro);
    letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    color: var(--ecp-gris);
    border-bottom: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.ecp-formats-liste a:hover { color: var(--ecp-encre); }
.ecp-formats-liste a.est-courant { color: var(--ecp-bleu); border-bottom-color: var(--ecp-bleu); }

@media (max-width: 999px) {
    .ecp-formats { display: none; }
    .ecp-entete--formats .ecp-nav-fx { display: list-item; }
    .ecp-entete--formats .ecp-burger { display: inline-flex; }
    .ecp-entete--formats .ecp-nav {
        position: fixed; inset: 0; z-index: 150;
        background: var(--ecp-blanc);
        transform: translateX(100%); transition: transform .28s ease;
        display: flex; flex-direction: column; padding: 0;
        overflow-y: auto;
    }
    .ecp-entete--formats .ecp-nav--ouvert { transform: none; }
    .ecp-entete--formats .ecp-nav-tete {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px var(--ecp-marge); border-bottom: 1px solid var(--ecp-filet);
        height: var(--ecp-hh);
    }
    .ecp-entete--formats .ecp-nav-logo { display: inline-flex; color: var(--ecp-encre); min-width: 0; }
    .ecp-entete--formats .ecp-nav-logo svg { height: 26px; width: auto; max-width: 100%; }
    .ecp-entete--formats .ecp-nav-close { display: inline-flex; background: none; border: 0; color: var(--ecp-encre); padding: 6px; }
    .ecp-entete--formats .ecp-nav-liste { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--ecp-marge) 24px; }
    .ecp-entete--formats .ecp-nav-liste li { border-bottom: 1px solid var(--ecp-filet); }
    .ecp-entete--formats .ecp-nav-liste a { display: block; padding: 15px 2px; font-size: 1.08rem; }
    .ecp-entete--formats .ecp-nav-contact { border: 1px solid var(--ecp-filet-fort); margin: 18px 0 0; text-align: center; justify-content: center; padding: 14px !important; }
    .ecp-entete--formats .ecp-nav-liste li:last-child { border-bottom: 0; }
}

/* ── Éléments communs ─────────────────────────────────────────────── */
.ecp-fx-coiffe .ecp-titre { max-width: 24ch; font-size: clamp(1.8rem, 3.6vw, 3rem); hyphens: manual; }
.ecp-fx-oeil { margin: 0 0 14px; color: var(--ecp-bleu); }
.ecp-fx-coiffe-meta { margin: 20px 0 0; }

.ecp-fx-cote {
    margin: 0;
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-sous {
    margin: 1.5em 0 .6em;
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-note { font-size: .9rem; color: var(--ecp-gris); max-width: 70ch; }

/* Listes de liens : le tiret fin bleu des articles. */
.ecp-fx-liste { margin: 0 0 1.2em; }
.ecp-fx-liste li { position: relative; padding-left: 1.4em; margin-bottom: .55em; }
.ecp-fx-liste li::before {
    content: ""; position: absolute; left: 0; top: .78em;
    width: 13px; height: 1.5px; background: var(--ecp-bleu);
}
.ecp-fx-liste a { color: var(--ecp-bleu); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ecp-fx-liste a:hover { color: var(--ecp-bleu-p); }

.ecp-fx-signature {
    margin: 44px 0 0; padding-top: 18px;
    border-top: 1px solid var(--ecp-filet);
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
}

.ecp-fx-badge {
    display: inline-block; padding: 5px 11px;
    border: 1px solid var(--ecp-filet-fort); background: var(--ecp-blanc);
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ecp-doux);
}

/* Tableaux : le défilement horizontal reste dans le cadre, jamais sur la page. */
.ecp-fx-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--ecp-filet-fort);
    border-bottom: 1px solid var(--ecp-filet-fort);
}
.ecp-fx-table-wrap:focus-visible { outline: 2px solid var(--ecp-bleu); outline-offset: 3px; }
.ecp-fx-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .94rem; }
.ecp-fx-table caption {
    text-align: left; padding: 12px 14px;
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
    border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-table th, .ecp-fx-table td {
    padding: 12px 14px; text-align: left; vertical-align: top;
    border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-table thead th {
    font-family: var(--ecp-display); font-weight: 600; font-size: .86rem;
    color: var(--ecp-encre); background: var(--ecp-surface);
    border-bottom: 1px solid var(--ecp-filet-fort);
}
.ecp-fx-table thead a { color: var(--ecp-bleu); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ecp-fx-table tbody th { font-family: var(--ecp-display); font-weight: 600; color: var(--ecp-encre); background: var(--ecp-blanc); position: sticky; left: 0; }
.ecp-fx-table tbody td { color: var(--ecp-doux); }
.ecp-fx-table tbody tr:last-child th, .ecp-fx-table tbody tr:last-child td { border-bottom: 0; }
.ecp-fx-table--chiffres td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ecp-fx-table--fiche { min-width: 0; }
.ecp-fx-table--fiche th { width: 34%; position: static; }
.ecp-fx-table--detail { min-width: 0; }

/* ── MATÉRIAU COMPARÉ : sommaire collant sous l'en-tête ────────────── */
.ecp-fx-gd { padding: clamp(36px, 5vw, 68px) 0 clamp(52px, 7vw, 92px); }
.ecp-fx-gd-grille {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: clamp(28px, 4.4vw, 68px);
    align-items: start;
}
.ecp-fx-gd-nav {
    position: sticky;
    top: calc(var(--ecp-fx-haut) + 24px);
    max-height: calc(100vh - var(--ecp-fx-haut) - 48px);
    overflow-y: auto;
    border-left: 1px solid var(--ecp-filet);
    background: var(--ecp-blanc);
    padding: 2px 0;
}
.ecp-fx-gd-nav .ecp-fx-cote { padding: 0 18px 12px; }
.ecp-fx-gd-nav ol { list-style: none; margin: 0; padding: 0; }
.ecp-fx-gd-nav a {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px;
    margin-left: -1px; padding: 8px 18px;
    border-left: 1px solid transparent;
    color: var(--ecp-doux);
    font-size: .88rem; line-height: 1.35;
    transition: color .18s ease, border-color .18s ease;
}
.ecp-fx-gd-nav a:hover { color: var(--ecp-bleu); border-left-color: var(--ecp-bleu); }
.ecp-fx-gd-nav-n { font-family: var(--ecp-display); font-size: .72rem; color: var(--ecp-gris); padding-top: 2px; font-variant-numeric: tabular-nums; }

.ecp-fx-gd-corps { min-width: 0; max-width: 800px; }
.ecp-fx-gd-corps p { max-width: 70ch; }

.ecp-fx-gd-bref {
    background: var(--ecp-surface);
    padding: clamp(22px, 2.6vw, 32px);
    margin-bottom: 46px;
    scroll-margin-top: calc(var(--ecp-fx-haut) + 20px);
}
.ecp-fx-gd-bref h2 { font-family: var(--ecp-display); font-size: 1.3rem; margin-bottom: 14px; }
.ecp-fx-gd-bref li { position: relative; padding-left: 1.4em; margin-bottom: 9px; color: var(--ecp-encre); }
.ecp-fx-gd-bref li::before {
    content: ""; position: absolute; left: 0; top: .78em;
    width: 13px; height: 1.5px; background: var(--ecp-bleu);
}

.ecp-fx-gd-sec { margin-bottom: 50px; scroll-margin-top: calc(var(--ecp-fx-haut) + 20px); }
.ecp-fx-gd-sec h2 {
    display: flex; align-items: baseline; gap: 14px;
    font-family: var(--ecp-display);
    font-size: clamp(1.4rem, 2.2vw, 1.85rem); letter-spacing: -.015em;
    margin-bottom: .7em;
}
.ecp-fx-gd-num {
    flex: none;
    font-size: .78rem; font-weight: 600; letter-spacing: .1em; color: var(--ecp-bleu);
    font-variant-numeric: tabular-nums;
}
.ecp-fx-gd-sec > p { margin: 0 0 1.15em; font-size: 1.03rem; color: var(--ecp-encre); }

.ecp-fx-gd-cas { margin: 0; border-top: 1px solid var(--ecp-filet-fort); }
.ecp-fx-gd-cas-ligne { display: grid; grid-template-columns: minmax(180px, 1fr) 1.6fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--ecp-filet); }
.ecp-fx-gd-cas dt { font-family: var(--ecp-display); font-weight: 600; line-height: 1.3; color: var(--ecp-encre); }
.ecp-fx-gd-cas dd { margin: 0; color: var(--ecp-doux); }

/* ── Fiches (cartes) : grille aérée, sans cadre ──────────────────────── */
.ecp-fx-grille {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 38px);
}
.ecp-fx-grille--serree { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.ecp-fx-carte { min-width: 0; }
.ecp-fx-carte-lien { display: flex; flex-direction: column; gap: 5px; height: 100%; color: var(--ecp-encre); }
.ecp-fx-carte-visuel {
    display: grid; place-items: center;
    aspect-ratio: 4 / 3; margin-bottom: 12px;
    background: var(--ecp-surface); color: var(--ecp-gris);
    transition: color .18s ease;
}
.ecp-fx-carte-visuel svg { width: 48px; height: 48px; }
.ecp-fx-carte-lien:hover .ecp-fx-carte-visuel { color: var(--ecp-bleu); }
.ecp-fx-carte-visuel--photo { background: var(--ecp-blanc); border: 1px solid var(--ecp-filet); padding: 12px; }
.ecp-fx-carte-visuel--photo img { width: 100%; height: 100%; object-fit: contain; }
.ecp-fx-carte-marque {
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-carte-nom { font-family: var(--ecp-display); font-size: var(--ecp-t-titre); font-weight: 600; line-height: 1.25; transition: color .18s ease; }
.ecp-fx-carte-lien:hover .ecp-fx-carte-nom { color: var(--ecp-bleu); }
.ecp-fx-carte-type { flex: 1; font-size: .88rem; line-height: 1.45; color: var(--ecp-doux); }
.ecp-fx-carte-stock {
    align-self: flex-start; margin-top: 8px;
    font-family: var(--ecp-display); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ecp-gris);
    padding-top: 7px; border-top: 1px solid var(--ecp-filet-fort);
}

/* ── POSE COMMENTÉE : bandeau sur filets, étapes reliées par un filet ── */
.ecp-fx-tu { padding: 0 0 clamp(52px, 7vw, 92px); }
.ecp-fx-tu-bandeau {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    margin: 0 0 clamp(32px, 4.4vw, 54px);
    border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-tu-bandeau > div { padding: 18px 22px 18px 0; }
.ecp-fx-tu-bandeau > div + div { padding-left: 22px; border-left: 1px solid var(--ecp-filet); }
.ecp-fx-tu-bandeau dt {
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-tu-bandeau dd { margin: 5px 0 0; font-family: var(--ecp-display); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--ecp-encre); }
.ecp-fx-tu-colonne { max-width: 760px; margin-inline: auto; }

.ecp-fx-tu-materiel { background: var(--ecp-surface); padding: 24px 28px 12px; margin-bottom: 44px; }
.ecp-fx-tu-materiel h2 { font-family: var(--ecp-display); font-size: 1.3rem; }
.ecp-fx-tu-materiel .ecp-fx-cote { margin: 6px 0 14px; }
.ecp-fx-tu-materiel li { position: relative; padding-left: 1.4em; margin-bottom: .55em; }
.ecp-fx-tu-materiel li::before {
    content: ""; position: absolute; left: 0; top: .78em;
    width: 13px; height: 1.5px; background: var(--ecp-bleu);
}

.ecp-fx-tu-etapes { list-style: none; margin: 0 0 44px; padding: 0; }
.ecp-fx-tu-etape {
    position: relative;
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 22px;
    padding-bottom: 34px;
    scroll-margin-top: calc(var(--ecp-fx-haut) + 20px);
}
.ecp-fx-tu-etape::before {
    content: ""; position: absolute; left: 25px; top: 52px; bottom: 0;
    width: 1px; background: var(--ecp-filet-fort);
}
.ecp-fx-tu-etape:last-child::before { display: none; }
.ecp-fx-tu-n {
    display: grid; place-items: center;
    width: 52px; height: 52px;
    border: 1px solid var(--ecp-filet-fort); background: var(--ecp-blanc);
    font-family: var(--ecp-display); font-weight: 600; font-size: 1.1rem; color: var(--ecp-bleu);
    font-variant-numeric: tabular-nums;
}
.ecp-fx-tu-etape-titre { font-family: var(--ecp-display); font-size: clamp(1.15rem, 1.9vw, 1.4rem); margin: 12px 0 .55em; }
.ecp-fx-tu-etape-corps p { margin: 0 0 .9em; }
.ecp-fx-tu-attention { padding: 12px 16px; background: var(--ecp-surface); border-left: 2px solid var(--ecp-bleu); font-size: .95rem; color: var(--ecp-doux); }
.ecp-fx-tu-attention strong { color: var(--ecp-encre); font-weight: 600; }
.ecp-fx-tu-controle { border-top: 1px solid var(--ecp-filet-fort); border-bottom: 1px solid var(--ecp-filet-fort); padding: 24px 0 10px; margin-bottom: 44px; }
.ecp-fx-tu-controle h2 { font-family: var(--ecp-display); font-size: 1.3rem; margin-bottom: .6em; }
.ecp-fx-tu-bloc { margin-bottom: 40px; }
.ecp-fx-tu-bloc > h2 { font-family: var(--ecp-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); margin-bottom: .6em; }

/* ── INDEX DES MATÉRIAUX COMPARÉS : lignes posées sur le filet ─────── */
.ecp-fx-ix { padding: clamp(36px, 5vw, 70px) 0 clamp(52px, 7vw, 92px); }
.ecp-fx-ix-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ecp-filet-fort); }
.ecp-fx-ix-ligne {
    display: grid; grid-template-columns: 80px minmax(0, 1fr) 150px;
    gap: clamp(16px, 3vw, 40px); align-items: baseline;
    padding: 28px 0;
    border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-ix-num { font-family: var(--ecp-display); font-weight: 600; font-size: .9rem; color: var(--ecp-bleu); font-variant-numeric: tabular-nums; }
.ecp-fx-ix-titre { font-family: var(--ecp-display); font-size: var(--ecp-t-grand); line-height: 1.16; letter-spacing: -.015em; margin-bottom: 10px; }
.ecp-fx-ix-titre a { transition: color .18s ease; }
.ecp-fx-ix-titre a:hover { color: var(--ecp-bleu); }
.ecp-fx-ix-accroche { margin: 0; color: var(--ecp-doux); max-width: 72ch; font-size: .97rem; }
.ecp-fx-ix-compte {
    justify-self: end;
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris); white-space: nowrap;
}

/* ── INDEX DES POSES COMMENTÉES : grille aérée ─────────────────────── */
.ecp-fx-tx { padding: clamp(36px, 5vw, 70px) 0 clamp(52px, 7vw, 92px); }
.ecp-fx-tx-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 44px); }
.ecp-fx-tx-fiche { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--ecp-filet-fort); padding-top: 18px; }
.ecp-fx-tx-niveau {
    margin: 0; display: flex; gap: 14px;
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-tx-niveau span:first-child { color: var(--ecp-bleu); font-variant-numeric: tabular-nums; }
.ecp-fx-tx-titre { font-family: var(--ecp-display); font-size: var(--ecp-t-titre); line-height: 1.28; }
.ecp-fx-tx-titre a { transition: color .18s ease; }
.ecp-fx-tx-titre a:hover { color: var(--ecp-bleu); }
.ecp-fx-tx-accroche { flex: 1; margin: 0; color: var(--ecp-doux); font-size: .94rem; }
.ecp-fx-tx-meta {
    margin: 6px 0 0; padding-top: 12px; border-top: 1px solid var(--ecp-filet);
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: .8rem; color: var(--ecp-gris);
}

/* ── ÉQUIPEMENT EXTÉRIEUR : rayons et catalogue ────────────────────── */
.ecp-fx-bt { padding: clamp(36px, 5vw, 68px) 0 clamp(52px, 7vw, 92px); }
.ecp-fx-bt-rayons {
    display: flex; flex-wrap: wrap; gap: 4px 26px;
    margin-bottom: 38px; padding-bottom: 2px;
    border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-bt-rayons a {
    display: inline-block; padding: 10px 0; margin-bottom: -3px;
    border-bottom: 1px solid transparent;
    font-family: var(--ecp-display); font-weight: 500; font-size: .9rem; color: var(--ecp-doux);
    transition: color .18s ease, border-color .18s ease;
}
.ecp-fx-bt-rayons a:hover { color: var(--ecp-encre); }
.ecp-fx-bt-rayons a[aria-current="page"] { color: var(--ecp-bleu); border-bottom-color: var(--ecp-bleu); }
.ecp-fx-bt-rayon-n { margin-left: 3px; font-size: .74rem; color: var(--ecp-gris); }

/* ── OUTIL : panneaux et poteaux ───────────────────────────────────── */
.ecp-fx-sm { padding: clamp(36px, 5vw, 68px) 0; }
.ecp-fx-sm-grille { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; }
.ecp-fx-sm-form, .ecp-fx-sm-resultat { min-width: 0; }
.ecp-fx-sm-form { border: 1px solid var(--ecp-filet); padding: clamp(20px, 2.4vw, 30px); }
.ecp-fx-sm-titre { font-family: var(--ecp-display); font-size: 1.3rem; margin-bottom: 20px; }
.ecp-fx-sm-groupe { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; }
.ecp-fx-sm-groupe legend, .ecp-fx-sm-champ > label {
    padding: 0; margin-bottom: 8px;
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-sm-cotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.ecp-fx-sm-option { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ecp-fx-sm-champ { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; min-width: 0; }
.ecp-fx-sm-champ input {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 1px solid var(--ecp-filet-fort); border-radius: 0;
    background: var(--ecp-blanc); color: var(--ecp-encre);
    font-family: var(--ecp-sans); font-size: 1.05rem;
    transition: border-color .18s ease;
}
.ecp-fx-sm-champ input:focus { outline: none; border-color: var(--ecp-bleu); }
.ecp-fx-sm-choix { display: flex; flex-direction: column; gap: 10px; }
.ecp-fx-sm-choix label { display: flex; align-items: center; gap: 10px; font-size: .98rem; color: var(--ecp-encre); cursor: pointer; }
.ecp-fx-sm-choix input { width: 18px; height: 18px; margin: 0; accent-color: var(--ecp-bleu); }
.ecp-fx-sm-aide { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--ecp-gris); }
.ecp-fx-sm-erreur { margin: 0; color: var(--ecp-bleu); font-weight: 600; }
.ecp-fx-sm-chiffres { margin: 0 0 4px; border-top: 1px solid var(--ecp-filet-fort); }
.ecp-fx-sm-chiffres > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-sm-chiffres dt {
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-sm-chiffres dd { margin: 0; font-family: var(--ecp-display); font-weight: 600; font-size: 1.2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ecp-fx-sm-total dd { font-size: clamp(2rem, 5vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--ecp-encre); }
.ecp-fx-sm-impact { margin: 20px 0 22px; padding: 2px 0 2px 18px; border-left: 2px solid var(--ecp-bleu); color: var(--ecp-encre); }
.ecp-fx-sm-ref, .ecp-fx-sm-methode { padding: 0 0 clamp(40px, 5vw, 64px); }
.ecp-fx-sm-colonne { max-width: 820px; }
.ecp-fx-sm-colonne h2 { font-family: var(--ecp-display); font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin: 1.6em 0 .6em; }
.ecp-fx-sm-ref h2 { margin-top: 0; }
.ecp-fx-sm-colonne > p { max-width: 72ch; color: var(--ecp-encre); }
.ecp-fx-sm [hidden], .ecp-fx-sm-resultat [hidden] { display: none !important; }

/* ── FICHE DE L'ÉQUIPEMENT : page produit en vitrine ───────────────── */
.ecp-fx-fp { padding: 0 0 clamp(44px, 6vw, 80px); }
.ecp-fx-fp-fil { padding: 26px 0 8px; margin-bottom: 18px; }
.ecp-fx-fp-fil-cur { color: var(--ecp-doux); }
.ecp-fx-fp-haut { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(26px, 5vw, 72px); align-items: start; }
.ecp-fx-fp-visuel {
    position: relative; display: grid; place-items: center;
    aspect-ratio: 1 / 1;
    background: var(--ecp-surface); color: var(--ecp-gris);
}
.ecp-fx-fp-visuel > svg { width: 34%; height: 34%; }
.ecp-fx-fp-visuel--photo { background: var(--ecp-blanc); border: 1px solid var(--ecp-filet); padding: 8%; }
.ecp-fx-fp-visuel--photo > img { width: 100%; height: 100%; object-fit: contain; }
.ecp-fx-badge--visuel { position: absolute; top: 14px; left: 14px; }
.ecp-fx-fp-marque { margin-bottom: 12px; }
.ecp-fx-fp-titre { font-family: var(--ecp-display); font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.ecp-fx-fp-type { margin: 12px 0 0; color: var(--ecp-doux); font-size: 1.03rem; }
.ecp-fx-fp-resume { margin: 22px 0 0; }
.ecp-fx-fp-resume li { position: relative; padding-left: 1.4em; margin-bottom: .55em; max-width: 56ch; }
.ecp-fx-fp-resume li::before {
    content: ""; position: absolute; left: 0; top: .78em;
    width: 13px; height: 1.5px; background: var(--ecp-bleu);
}
.ecp-fx-fp-prix {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
    margin: 26px 0 14px; padding: 16px 0;
    border-top: 1px solid var(--ecp-filet-fort); border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-fp-prix-val { font-family: var(--ecp-display); font-weight: 600; font-size: 1.35rem; color: var(--ecp-gris); }
.ecp-fx-fp-achat { display: flex; gap: 10px; }
.ecp-fx-fp-achat input {
    width: 76px; min-height: 50px; padding: 8px 10px;
    border: 1px solid var(--ecp-filet); border-radius: 0;
    background: var(--ecp-surface); color: var(--ecp-gris);
    font: inherit; text-align: center;
}
.ecp-fx-fp-cta {
    flex: 1; min-height: 50px; padding: 0 26px;
    border: 1px solid var(--ecp-encre); border-radius: 0;
    background: var(--ecp-encre); color: #fff; opacity: .35;
    font-family: var(--ecp-display); font-weight: 600; font-size: .93rem;
    cursor: not-allowed;
}
.ecp-fx-fp-dispo { margin: 10px 0 0; font-size: .92rem; color: var(--ecp-doux); }
.ecp-fx-fp-meta { margin: 22px 0 0; font-size: .93rem; }
.ecp-fx-fp-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--ecp-filet); }
.ecp-fx-fp-meta dt {
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris); padding-top: 2px;
}
.ecp-fx-fp-meta dd { margin: 0; color: var(--ecp-encre); }
.ecp-fx-fp-meta a { color: var(--ecp-bleu); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ecp-fx-fp-onglets {
    position: sticky; top: var(--ecp-fx-haut); z-index: 5;
    display: flex; flex-wrap: wrap; gap: 0 28px;
    margin: clamp(36px, 5vw, 60px) 0 0;
    background: var(--ecp-blanc);
    border-top: 1px solid var(--ecp-filet); border-bottom: 1px solid var(--ecp-filet);
}
.ecp-fx-fp-onglets a {
    padding: 13px 0;
    font-family: var(--ecp-display); font-weight: 500; font-size: .9rem; color: var(--ecp-doux);
    transition: color .18s ease;
}
.ecp-fx-fp-onglets a:hover { color: var(--ecp-bleu); }
.ecp-fx-fp-corps { max-width: 820px; padding-top: 36px; }
.ecp-fx-fp-section { margin-bottom: 46px; scroll-margin-top: calc(var(--ecp-fx-haut) + 64px); }
.ecp-fx-fp-section h2 { font-family: var(--ecp-display); font-size: clamp(1.35rem, 2.2vw, 1.8rem); margin-bottom: .7em; }
.ecp-fx-fp-section h3 { font-family: var(--ecp-display); font-size: 1.08rem; margin: 1.4em 0 .5em; }
.ecp-fx-fp-section > p { max-width: 70ch; }
.ecp-fx-faits li { position: relative; padding: 11px 0 11px 1.4em; border-bottom: 1px solid var(--ecp-filet); max-width: 70ch; }
.ecp-fx-faits li::before {
    content: ""; position: absolute; left: 0; top: 1.42em;
    width: 13px; height: 1.5px; background: var(--ecp-bleu);
}
.ecp-fx-vigilance .ecp-fx-faits li::before { width: 7px; height: 7px; top: 1.2em; background: none; border: 1.5px solid var(--ecp-bleu); }
.ecp-fx-voisins { background: var(--ecp-surface); padding: clamp(40px, 5vw, 72px) 0; }

/* ── Accueil : accès aux formats, sous la rubrique ─────────────────── */
.ecp-fx-acces {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(22px, 3vw, 40px);
    margin-top: clamp(30px, 4vw, 46px);
}
.ecp-fx-acces-lien { display: flex; flex-direction: column; gap: 10px; height: 100%; padding-top: 18px; border-top: 1px solid var(--ecp-filet-fort); transition: border-color .18s ease; }
.ecp-fx-acces-lien:hover { border-top-color: var(--ecp-bleu); }
.ecp-fx-acces-picto { color: var(--ecp-gris); transition: color .18s ease; }
.ecp-fx-acces-picto svg { width: 34px; height: 34px; }
.ecp-fx-acces-lien:hover .ecp-fx-acces-picto { color: var(--ecp-bleu); }
.ecp-fx-acces-nom { font-family: var(--ecp-display); font-size: var(--ecp-t-titre); font-weight: 600; color: var(--ecp-encre); transition: color .18s ease; }
.ecp-fx-acces-lien:hover .ecp-fx-acces-nom { color: var(--ecp-bleu); }
.ecp-fx-acces-lien p { flex: 1; margin: 0; font-size: .92rem; color: var(--ecp-doux); }
.ecp-fx-acces-compte {
    font-family: var(--ecp-display); font-size: var(--ecp-t-micro); font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
}

/* ── Plan du site ──────────────────────────────────────────────────── */
.ecp-plan-bloc .ecp-pied-titre a:hover { color: var(--ecp-bleu); }
.ecp-fx-plan-rayon { margin: 18px 0 8px; font-family: var(--ecp-display); font-weight: 600; font-size: .9rem; }
.ecp-fx-plan-rayon a { color: var(--ecp-encre); }
.ecp-fx-plan-rayon a:hover { color: var(--ecp-bleu); }

/* ── Bloc « Pour aller plus loin » sous un article ─────────────────── */
.ecp-fx-suite {
    margin: 40px 0 0;
    border-top: 1px solid var(--ecp-filet-fort);
    padding: 22px 0 6px;
}
.ecp-fx-suite-titre { font-family: var(--ecp-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 14px; }
.ecp-fx-suite ul { list-style: none; margin: 0; padding: 0; }
.ecp-fx-suite li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 12px; padding-left: 0; }
.ecp-fx-suite li::before { display: none; }
.ecp-fx-suite-type {
    flex: none;
    font-family: var(--ecp-display); font-size: .68rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
}
.ecp-fx-suite a { color: var(--ecp-bleu); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ecp-fx-suite a:hover { color: var(--ecp-bleu-p); }

/* =========================================================================
   RESPONSIVE (paliers de style.css)
   ========================================================================= */
@media (max-width: 1100px) {
    .ecp-fx-grille { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ecp-fx-tx-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ecp-fx-acces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .ecp-fx-gd-grille, .ecp-fx-sm-grille, .ecp-fx-fp-haut { grid-template-columns: minmax(0, 1fr); }
    .ecp-fx-gd-nav { position: static; max-height: none; }
    .ecp-fx-fp-visuel { aspect-ratio: 16 / 9; }
    .ecp-fx-fp-visuel > svg { width: 18%; height: 18%; }
}

@media (max-width: 900px) {
    .ecp-fx-fp-onglets { position: static; }
}

@media (max-width: 720px) {
    .ecp-fx-grille, .ecp-fx-grille--serree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ecp-fx-tx-grille { grid-template-columns: minmax(0, 1fr); }
    .ecp-fx-acces { grid-template-columns: minmax(0, 1fr); }
    .ecp-fx-gd-cas-ligne { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .ecp-fx-gd-sec h2 { flex-direction: column; gap: 6px; }
    .ecp-fx-tu-bandeau { grid-auto-flow: row; }
    .ecp-fx-tu-bandeau > div, .ecp-fx-tu-bandeau > div + div { padding: 12px 0; border-left: 0; }
    .ecp-fx-tu-bandeau > div + div { border-top: 1px solid var(--ecp-filet); }
    .ecp-fx-tu-etape { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
    .ecp-fx-tu-n { width: 40px; height: 40px; font-size: .95rem; }
    .ecp-fx-tu-etape::before { left: 19px; top: 40px; }
    .ecp-fx-tu-etape-titre { margin-top: 7px; }
    .ecp-fx-tu-materiel { padding: 20px 18px 8px; }
    .ecp-fx-ix-ligne { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
    .ecp-fx-ix-compte { justify-self: start; }
    .ecp-fx-fp-onglets { gap: 0 18px; }
    .ecp-fx-fp-onglets a { padding: 11px 0; font-size: .85rem; }
    .ecp-fx-fp-meta > div { grid-template-columns: 92px minmax(0, 1fr); }
    .ecp-fx-fp-achat { flex-wrap: wrap; }
    .ecp-fx-sm-chiffres > div { flex-wrap: wrap; }
}

@media (max-width: 420px) {
    .ecp-fx-grille, .ecp-fx-grille--serree { grid-template-columns: minmax(0, 1fr); }
    .ecp-fx-sm-cotes { grid-template-columns: minmax(0, 1fr); }
}