@charset "UTF-8";
/*
Theme Name: Espaces Clôtures Portails
Theme URI: https://espacs-clotures-portails.fr
Author: Agence Netlinqueen
Description: Magazine de la maison et des travaux du quotidien. Archetype BR, editorial sobre au filet fin.
Version: 2.0.0
Text Domain: espacs-clotures-portails
*/

/* =========================================================================
   ESPACES CLÔTURES PORTAILS — ARCHETYPE BR « Filet fin / Editorial sobre »

   Le systeme tient en quatre regles :

   1. LE FILET FIN. La seule ligne du theme est un filet de 1px en gris tres
      clair. Aucun cadre noir epais, aucune trame, aucun motif decoratif.
   2. LE BLANC. La respiration porte la mise en page : grandes marges
      verticales, colonnes larges, rien qui ne soit enferme dans une boite.
   3. UN ACCENT, RARE. Le bleu d encre ne sert qu aux liens, au bouton
      principal et au surlignage d un seul mot du titre. Jamais en aplat
      plein sur une section entiere.
   4. AUCUNE OMBRE PORTEE, AUCUN DEPLACEMENT AU SURVOL. Les etats de survol
      se jouent sur la couleur et le filet, jamais sur la geometrie.
   ========================================================================= */

:root {
    --ecp-blanc:      #FFFFFF;
    --ecp-surface:    #F7F8FA;   /* bandes secondaires, tres discretes */
    --ecp-encre:      #16181D;   /* 16,6:1 sur blanc */
    --ecp-encre-2:    #101216;   /* pied */
    --ecp-doux:       #454A53;   /*  8,9:1 */
    --ecp-gris:       #6E747E;   /*  5,2:1 */
    --ecp-filet:      #E6E8EC;   /* LE filet du theme */
    --ecp-filet-fort: #D3D7DE;

    --ecp-bleu:       #1E3A8C;   /* 10,3:1, bidirectionnel */
    --ecp-bleu-p:     #16296B;
    --ecp-bleu-c:     #9DB4E8;   /* sur fond sombre */
    --ecp-clair:      #EDF0F5;

    /* Echelle typographique volontairement courte. */
    --ecp-t-geant:  clamp(1.95rem, 4.6vw, 3.9rem);
    --ecp-t-grand:  clamp(1.45rem, 2.4vw, 2.15rem);
    --ecp-t-titre:  clamp(1.08rem, 1.5vw, 1.28rem);
    --ecp-t-corps:  1rem;
    --ecp-t-micro:  0.72rem;

    --ecp-rang:  1180px;
    --ecp-marge: clamp(20px, 5vw, 56px);
    --ecp-hh:    76px;

    --ecp-display: "Hubot Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ecp-sans:    "Mona Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (max-width: 900px) {
    :root { --ecp-hh: 62px; }
}

/* ── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--ecp-blanc);
    color: var(--ecp-encre);
    font-family: var(--ecp-sans);
    font-size: var(--ecp-t-corps);
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    font-synthesis-weight: none;
    /* Filet de securite : aucun element ne peut provoquer de defilement
       horizontal, meme si un mot long deborde de son conteneur.
       « clip » plutot que « hidden » : hidden ferait de body un conteneur
       de defilement et casserait le position: sticky de l en-tete. */
    overflow-x: hidden;   /* repli navigateurs anciens */
    overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.14; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--ecp-bleu); color: #fff; }

/* Les titres longs se coupent proprement plutot que de deborder. */
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }

.ecp-rang { max-width: var(--ecp-rang); margin: 0 auto; padding: 0 var(--ecp-marge); }

.ecp-micro {
    font-family: var(--ecp-display);
    font-size: var(--ecp-t-micro);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ecp-gris);
    margin: 0;
}

.ecp-saut {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--ecp-encre); color: #fff; padding: 12px 18px;
    font-family: var(--ecp-display); font-weight: 600;
}
.ecp-saut:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--ecp-bleu); outline-offset: 3px; }

/* ── Images ──────────────────────────────────────────────────────────── */
/* Un seul traitement d image : le cadre clair, sans filet epais ni
   surimpression. .ecp-clairevoie est conserve comme alias pour ne pas
   casser les gabarits, mais rend exactement comme .ecp-cadre. */
.ecp-cadre,
.ecp-clairevoie {
    position: relative;
    background: var(--ecp-surface);
    overflow: hidden;
}
.ecp-cadre img,
.ecp-clairevoie img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── En-tete ─────────────────────────────────────────────────────────── */
.ecp-entete {
    position: sticky; top: 0; z-index: 100;
    background: var(--ecp-blanc);
    border-bottom: 1px solid var(--ecp-filet);
    transition: border-color .2s ease;
}
.ecp-entete--fixe { border-bottom-color: var(--ecp-filet-fort); }
.ecp-entete-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px;
    height: var(--ecp-hh);
}
.ecp-marque { display: inline-flex; align-items: center; color: var(--ecp-encre); min-width: 0; }
.ecp-marque svg { display: block; height: 30px; width: auto; max-width: 100%; }

.ecp-nav-liste { display: flex; align-items: center; gap: 4px; }
.ecp-nav-liste a {
    font-family: var(--ecp-display);
    font-weight: 500;
    font-size: .93rem;
    padding: 8px 13px;
    color: var(--ecp-doux);
    transition: color .18s ease;
}
.ecp-nav-liste a:hover { color: var(--ecp-encre); }
.ecp-nav-liste a.est-courant { color: var(--ecp-encre); }
.ecp-nav-contact {
    border: 1px solid var(--ecp-filet-fort);
    color: var(--ecp-encre) !important;
    margin-left: 10px;
    padding: 8px 18px !important;
    transition: border-color .18s ease, color .18s ease;
}
.ecp-nav-contact:hover { border-color: var(--ecp-bleu); color: var(--ecp-bleu) !important; }

.ecp-nav-tete { display: none; }
.ecp-nav-logo, .ecp-nav-close, .ecp-burger { display: none; }
.ecp-burger { background: none; border: 0; color: var(--ecp-encre); padding: 6px; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.ecp-bouton {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--ecp-display); font-weight: 600;
    font-size: .93rem;
    background: var(--ecp-encre); color: #fff;
    border: 1px solid var(--ecp-encre);
    padding: 13px 26px;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ecp-bouton:hover { background: var(--ecp-bleu); border-color: var(--ecp-bleu); color: #fff; }
.ecp-bouton--ligne { background: transparent; color: var(--ecp-encre); border-color: var(--ecp-filet-fort); }
.ecp-bouton--ligne:hover { background: transparent; border-color: var(--ecp-encre); color: var(--ecp-encre); }
.ecp-bouton--clair { background: var(--ecp-encre); color: #fff; border-color: var(--ecp-encre); }
.ecp-bouton--clair:hover { background: var(--ecp-bleu); border-color: var(--ecp-bleu); }

/* =========================================================================
   ACCUEIL — ouverture
   Pas de grand cadre, pas de rail : du blanc, un titre, une image.
   ========================================================================= */
.ecp-portail { padding: clamp(38px, 6vw, 84px) 0 clamp(30px, 4vw, 56px); }
.ecp-portail-cadre { background: none; border: 0; }
.ecp-portail-grille {
    display: grid;
    grid-template-columns: 1.06fr .94fr;
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.ecp-portail-texte { padding: 0; border: 0; }
.ecp-oeil { margin-bottom: 18px; }
.ecp-titre {
    font-family: var(--ecp-display);
    font-size: var(--ecp-t-geant);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--ecp-encre);
    margin: 0 0 20px;
    /* Un titre long ne doit jamais pousser la page en largeur. */
    overflow-wrap: break-word;
    hyphens: auto;
}
/* Le mot accent : simple changement de couleur, sans soulignement trame.
   Surtout pas de white-space: nowrap, qui faisait deborder le H1 sur mobile. */
.ecp-accent { color: var(--ecp-bleu); white-space: normal; }
.ecp-deck {
    font-size: clamp(1rem, 1.2vw, 1.14rem);
    color: var(--ecp-doux);
    max-width: 54ch;
    margin: 0 0 28px;
}
.ecp-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.ecp-vantail { position: relative; }
.ecp-vantail .ecp-cadre,
.ecp-vantail .ecp-clairevoie { aspect-ratio: 4 / 3; }
.ecp-vantail-cote { display: none; }

/* Les releves : trois chiffres poses sur un filet, sans boite. */
.ecp-rail {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: clamp(18px, 3vw, 40px);
    border-top: 1px solid var(--ecp-filet);
    margin-top: clamp(34px, 5vw, 60px);
    padding-top: clamp(22px, 3vw, 32px);
}
.ecp-releve { padding: 0; border: 0 !important; }
.ecp-releve-n {
    display: block;
    font-family: var(--ecp-display); font-weight: 600;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    color: var(--ecp-encre); line-height: 1;
}
.ecp-releve-l { display: block; font-size: .84rem; color: var(--ecp-gris); margin-top: 7px; }

/* ── Tete de section ─────────────────────────────────────────────────── */
.ecp-tete {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: clamp(22px, 3vw, 34px);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ecp-filet);
}
.ecp-tete-filet { display: none; }
.ecp-tete .ecp-etiquette-compte {
    margin-left: auto;
    font-family: var(--ecp-display); font-weight: 500; font-size: var(--ecp-t-micro);
    letter-spacing: .12em; text-transform: uppercase; color: var(--ecp-gris);
}

/* =========================================================================
   LE FIL — articles
   Grille aeree, aucune carte encadree : l image, le titre, la meta.
   ========================================================================= */
.ecp-cloture { padding: clamp(38px, 6vw, 76px) 0; }
.ecp-panneaux {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: clamp(26px, 3.4vw, 44px);
}

.ecp-panneau {
    grid-column: span 1;
    display: flex; flex-direction: column;
    background: none; border: 0;
}
.ecp-panneau-tete { display: none; }
.ecp-panneau-vue {
    aspect-ratio: 4 / 3; position: relative; overflow: hidden;
    background: var(--ecp-surface); border: 0;
}
.ecp-panneau-vue img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: opacity .3s ease;
}
.ecp-panneau:hover .ecp-panneau-vue img { opacity: .9; }
.ecp-folio { display: none; }

.ecp-panneau-corps { padding: 16px 0 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ecp-panneau-meta {
    display: flex; align-items: center; gap: 10px;
    font-size: .78rem; color: var(--ecp-gris);
}
.ecp-panneau-meta .ecp-pastille { display: none; }
.ecp-panneau-titre {
    font-family: var(--ecp-display);
    font-size: var(--ecp-t-titre); font-weight: 600; letter-spacing: -.01em;
    line-height: 1.28;
    color: var(--ecp-encre);
}
.ecp-panneau-titre a { transition: color .18s ease; }
.ecp-panneau:hover .ecp-panneau-titre a { color: var(--ecp-bleu); }
.ecp-panneau-extrait { font-size: .94rem; color: var(--ecp-doux); margin: 0; }

/* La premiere piece : deux colonnes, toujours sans cadre. */
.ecp-panneau--une { grid-column: 1 / -1; padding-bottom: clamp(26px, 3.4vw, 40px); border-bottom: 1px solid var(--ecp-filet); }
.ecp-panneau--une .ecp-panneau-corps-une {
    display: grid; grid-template-columns: 1.04fr .96fr;
    gap: clamp(24px, 4vw, 52px); align-items: center;
}
.ecp-panneau--une .ecp-une-vue { position: relative; overflow: hidden; border: 0; aspect-ratio: 4 / 3; }
.ecp-panneau--une .ecp-une-vue .ecp-cadre,
.ecp-panneau--une .ecp-une-vue .ecp-clairevoie { position: absolute; inset: 0; }
.ecp-panneau--une .ecp-une-texte { padding: 0; display: flex; flex-direction: column; gap: 13px; }
.ecp-panneau--une .ecp-panneau-titre { font-size: var(--ecp-t-grand); line-height: 1.18; }
.ecp-drapeau {
    display: inline-flex; align-self: flex-start;
    background: none; color: var(--ecp-bleu);
    font-family: var(--ecp-display); font-weight: 600; font-size: var(--ecp-t-micro);
    letter-spacing: .14em; text-transform: uppercase; padding: 0;
}

.ecp-vide { border: 1px solid var(--ecp-filet); padding: clamp(30px, 4vw, 54px); text-align: center; }
.ecp-vide-texte { max-width: 58ch; margin: 0 auto; color: var(--ecp-doux); font-size: 1.02rem; }

/* =========================================================================
   LA RUBRIQUE
   ========================================================================= */
.ecp-rubrique { padding: 0 0 clamp(44px, 6vw, 80px); }
.ecp-rubrique-lien {
    display: grid; grid-template-columns: 1.02fr .98fr;
    gap: clamp(26px, 4vw, 56px); align-items: center;
    border: 0; background: none;
    padding-top: clamp(26px, 3.4vw, 40px);
    border-top: 1px solid var(--ecp-filet);
}
.ecp-rubrique-vue { position: relative; overflow: hidden; border: 0; aspect-ratio: 16 / 10; }
.ecp-rubrique-vue .ecp-cadre,
.ecp-rubrique-vue .ecp-clairevoie { position: absolute; inset: 0; }
.ecp-rubrique-vue img { transition: opacity .3s ease; }
.ecp-rubrique-lien:hover .ecp-rubrique-vue img { opacity: .9; }
.ecp-rubrique-texte { padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ecp-rubrique-nom {
    font-family: var(--ecp-display); font-size: var(--ecp-t-grand);
    font-weight: 600; letter-spacing: -.015em; color: var(--ecp-encre);
    transition: color .18s ease;
}
.ecp-rubrique-lien:hover .ecp-rubrique-nom { color: var(--ecp-bleu); }
.ecp-rubrique-texte p { margin: 0; color: var(--ecp-doux); }
.ecp-rubrique-fleche {
    font-family: var(--ecp-display); font-weight: 600; font-size: .9rem;
    color: var(--ecp-bleu);
}

/* =========================================================================
   L AUTEUR — bande claire, jamais un aplat de couleur pleine
   ========================================================================= */
.ecp-atelier { background: var(--ecp-surface); color: var(--ecp-encre); }
.ecp-atelier-inner { padding: clamp(46px, 6vw, 86px) var(--ecp-marge); max-width: var(--ecp-rang); margin: 0 auto; }
.ecp-atelier .ecp-micro { color: var(--ecp-gris); }
.ecp-atelier-grille {
    display: grid; grid-template-columns: 300px 1fr;
    gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 22px;
}
.ecp-atelier-portrait { position: relative; }
.ecp-atelier-portrait::after { display: none; }
.ecp-atelier-portrait .ecp-cadre { aspect-ratio: 4 / 5; background: var(--ecp-blanc); }
.ecp-atelier-portrait .ecp-cadre img { object-position: center 22%; }
.ecp-atelier-nom {
    font-family: var(--ecp-display); font-size: var(--ecp-t-grand);
    font-weight: 600; color: var(--ecp-encre); letter-spacing: -.015em;
}
.ecp-atelier-role {
    font-family: var(--ecp-display); font-weight: 500; font-size: var(--ecp-t-micro);
    letter-spacing: .14em; text-transform: uppercase; color: var(--ecp-gris);
    margin: 8px 0 18px;
}
.ecp-atelier-bio { color: var(--ecp-doux); max-width: 62ch; }
.ecp-atelier-bio p { margin: 0 0 14px; }
.ecp-atelier-bio strong { color: var(--ecp-encre); font-weight: 600; }
.ecp-atelier-bio ul { margin: 0 0 16px; }
.ecp-atelier-bio li { position: relative; padding-left: 20px; margin-bottom: 9px; }
.ecp-atelier-bio li::before {
    content: ""; position: absolute; left: 0; top: .72em;
    width: 10px; height: 1px; background: var(--ecp-bleu);
}
.ecp-atelier-bio .ecp-bouton { margin-top: 8px; }

/* =========================================================================
   COIFFE (hero interne) ET FIL D ARIANE
   ========================================================================= */
.ecp-coiffe { position: relative; background: var(--ecp-blanc); overflow: hidden; border-bottom: 1px solid var(--ecp-filet); }
.ecp-coiffe img { display: none; }           /* plus de photo voilee derriere le titre */
.ecp-coiffe-voile { display: none; }
.ecp-coiffe::after { display: none; }
.ecp-coiffe-texte {
    position: relative; z-index: 2;
    padding: clamp(34px, 5vw, 62px) 0 clamp(26px, 4vw, 44px);
}
.ecp-coiffe .ecp-titre { color: var(--ecp-encre); max-width: 22ch; }
.ecp-coiffe-desc { color: var(--ecp-doux); max-width: 60ch; margin-top: 14px; font-size: 1.02rem; }

.ecp-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: .8rem; margin-bottom: 18px; color: var(--ecp-gris); }
.ecp-fil a { color: var(--ecp-gris); transition: color .18s ease; }
.ecp-fil a:hover { color: var(--ecp-bleu); }
.ecp-fil span { color: var(--ecp-doux); }
.ecp-fil .ecp-fil-sep { color: var(--ecp-filet-fort); }

/* =========================================================================
   ARTICLE
   ========================================================================= */
.ecp-article { padding: clamp(30px, 4vw, 54px) 0; }
.ecp-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 26px; }
.ecp-article-meta a {
    font-family: var(--ecp-display); font-weight: 600; font-size: var(--ecp-t-micro);
    letter-spacing: .13em; text-transform: uppercase; color: var(--ecp-bleu);
}
.ecp-article-meta span { font-size: .85rem; color: var(--ecp-gris); }
.ecp-resume { max-width: 720px; margin-bottom: 26px; }
.ecp-article .ecp-cadre { max-width: 900px; aspect-ratio: 16 / 9; margin-bottom: 34px; }

.ecp-lecture { max-width: 720px; font-size: 1.06rem; }
.ecp-etiquettes { display: flex; flex-wrap: wrap; gap: 9px; margin: 34px 0 0; max-width: 720px; }
.ecp-etiquettes a {
    border: 1px solid var(--ecp-filet); padding: 6px 14px;
    font-size: .82rem; color: var(--ecp-gris);
    transition: border-color .18s ease, color .18s ease;
}
.ecp-etiquettes a:hover { border-color: var(--ecp-bleu); color: var(--ecp-bleu); }

.ecp-plume { max-width: 720px; margin-top: 44px; border: 0; border-top: 1px solid var(--ecp-filet); }
.ecp-plume::before { display: none; }
.ecp-plume-inner { padding: 28px 0 0; }
.ecp-plume-grille { display: grid; grid-template-columns: 96px 1fr; gap: 22px; align-items: start; }
.ecp-plume-grille .ecp-cadre { aspect-ratio: 1 / 1; border-radius: 50%; }
.ecp-plume-grille .ecp-cadre img { object-position: center 22%; }
.ecp-plume-nom { font-family: var(--ecp-display); font-weight: 600; font-size: 1.12rem; color: var(--ecp-encre); margin: 0; }
.ecp-plume-role {
    font-family: var(--ecp-display); font-weight: 500; font-size: var(--ecp-t-micro);
    letter-spacing: .13em; text-transform: uppercase; color: var(--ecp-gris); margin: 5px 0 11px;
}
.ecp-plume-bio { color: var(--ecp-doux); font-size: .95rem; }
.ecp-plume-bio p { margin: 0; }

.ecp-voisins { padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--ecp-filet); background: var(--ecp-blanc); }

/* =========================================================================
   ARCHIVE & PAGES
   ========================================================================= */
.ecp-archive { padding: clamp(34px, 5vw, 64px) 0 clamp(40px, 6vw, 76px); }
.ecp-page { padding: clamp(34px, 5vw, 64px) 0 clamp(40px, 6vw, 72px); }
.ecp-page-corps { max-width: 720px; }
.ecp-contact-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.ecp-contact-panneau { border: 1px solid var(--ecp-filet); padding: clamp(22px, 3vw, 34px); }
.ecp-contact-panneau::before { display: none; }

.ecp-plan-bloc { margin-bottom: 32px; }
.ecp-plan-liste { border-left: 1px solid var(--ecp-filet); padding-left: 18px; }
.ecp-plan-liste li { margin-bottom: 8px; }
.ecp-plan-liste a { color: var(--ecp-doux); transition: color .18s ease; }
.ecp-plan-liste a:hover { color: var(--ecp-bleu); }

/* =========================================================================
   PIED
   ========================================================================= */
.ecp-pied { background: var(--ecp-encre-2); color: rgba(255,255,255,.68); }
.ecp-pied::before { display: none; }
.ecp-pied-inner { padding: clamp(46px, 6vw, 74px) 0 30px; }
.ecp-pied-grille { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.3fr; gap: clamp(26px, 4vw, 52px); }
.ecp-pied .ecp-marque svg { height: 28px; }
.ecp-pied-desc { margin: 16px 0 0; font-size: .92rem; max-width: 38ch; line-height: 1.6; }
.ecp-pied-titre {
    font-family: var(--ecp-display); font-weight: 600; font-size: var(--ecp-t-micro);
    letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: 16px;
}
.ecp-pied-liste li { margin-bottom: 10px; padding-left: 0; }
.ecp-pied-liste li::before { display: none; }
.ecp-pied-liste a { color: rgba(255,255,255,.68); transition: color .18s ease; }
.ecp-pied-liste a:hover { color: #fff; }
.ecp-pied-bas {
    margin-top: 42px; padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center; font-size: .82rem; color: rgba(255,255,255,.5);
}

/* =========================================================================
   ENTRY-CONTENT — bullets : un simple tiret d encre bleue
   ========================================================================= */
.entry-content { color: var(--ecp-encre); }
.entry-content > *:first-child { margin-top: 0; }
.entry-content p { margin: 0 0 1.3em; }
.entry-content h2 { font-family: var(--ecp-display); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 600; margin: 1.9em 0 .6em; letter-spacing: -.015em; }
.entry-content h3 { font-family: var(--ecp-display); font-size: clamp(1.15rem, 1.7vw, 1.38rem); font-weight: 600; margin: 1.6em 0 .5em; }
.entry-content a { color: var(--ecp-bleu); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content a:hover { color: var(--ecp-bleu-p); }
.entry-content img { border: 0; margin: 1.7em 0; }
.entry-content blockquote {
    margin: 1.7em 0; padding: 2px 0 2px 22px;
    border-left: 2px solid var(--ecp-bleu);
    font-size: 1.1rem; color: var(--ecp-doux);
}
.entry-content ul { list-style: none; padding-left: 0; margin: 0 0 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 1.4em; }
.entry-content ul li { position: relative; padding-left: 1.4em; margin-bottom: .55em; }
/* Signature du theme : un tiret fin bleu, jamais une puce ronde. */
.entry-content ul li::before {
    content: ""; position: absolute; left: 0; top: .78em;
    width: 13px; height: 1.5px; background: var(--ecp-bleu);
}
.entry-content ol li { margin-bottom: .55em; }

/* =========================================================================
   FORMULAIRE CF7
   ========================================================================= */
.wpcf7-form p { display: flex; flex-direction: column; gap: 7px; margin: 0 0 16px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
    font-family: var(--ecp-display); font-weight: 600; font-size: var(--ecp-t-micro);
    letter-spacing: .1em; text-transform: uppercase; color: var(--ecp-gris);
    display: flex; flex-direction: column; gap: 7px;
}
.wpcf7-form input, .wpcf7-form textarea {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--ecp-filet-fort); background: var(--ecp-blanc);
    font-family: var(--ecp-sans); font-size: 1rem; color: var(--ecp-encre);
    transition: border-color .18s ease;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--ecp-bleu); }
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form .wpcf7-submit {
    width: 100%; background: var(--ecp-encre); color: #fff; border: 1px solid var(--ecp-encre);
    font-family: var(--ecp-display); font-weight: 600; padding: 14px; cursor: pointer;
    transition: background .18s ease, border-color .18s ease;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--ecp-bleu); border-color: var(--ecp-bleu); }
.wpcf7 .wpcf7-response-output { border: 1px solid var(--ecp-filet-fort); padding: 12px 14px; margin: 8px 0 0; font-size: .9rem; }

/* =========================================================================
   REVEAL — part d un etat deja lisible
   ========================================================================= */
.ecp-js [data-ecp-reveal] { opacity: .6; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.ecp-js [data-ecp-reveal].est-vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
    .ecp-js [data-ecp-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
    .ecp-pied-grille { grid-template-columns: 1fr 1fr; gap: 34px; }
    .ecp-atelier-grille { grid-template-columns: 260px 1fr; gap: 40px; }
}

@media (max-width: 860px) {
    .ecp-panneaux { grid-template-columns: 1fr 1fr; }
    .ecp-portail-grille { grid-template-columns: 1fr; gap: 30px; }
    .ecp-portail-texte { border: 0; }
    .ecp-panneau--une .ecp-panneau-corps-une { grid-template-columns: 1fr; gap: 22px; }
    .ecp-panneau--une .ecp-une-vue { border: 0; }
    .ecp-rubrique-lien { grid-template-columns: 1fr; gap: 22px; }
    .ecp-rubrique-vue { border: 0; }
    .ecp-atelier-grille { grid-template-columns: 1fr; }
    .ecp-atelier-portrait { max-width: 280px; }
    .ecp-contact-grille { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    /* Menu plein ecran. */
    .ecp-burger { display: inline-flex; }
    .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-nav--ouvert { transform: none; }
    .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-nav-logo { display: inline-flex; color: var(--ecp-encre); min-width: 0; }
    .ecp-nav-logo svg { height: 26px; width: auto; max-width: 100%; }
    .ecp-nav-close { display: inline-flex; background: none; border: 0; color: var(--ecp-encre); padding: 6px; }
    .ecp-nav-liste { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--ecp-marge) 24px; }
    .ecp-nav-liste li { border-bottom: 1px solid var(--ecp-filet); }
    .ecp-nav-liste a { display: block; padding: 15px 2px; font-size: 1.08rem; }
    .ecp-nav-contact { border: 1px solid var(--ecp-filet-fort); margin: 18px 0 0; text-align: center; justify-content: center; padding: 14px !important; }
    .ecp-nav-liste li:last-child { border-bottom: 0; }

    .ecp-panneaux { grid-template-columns: 1fr; }
    .ecp-rail { grid-template-columns: 1fr; gap: 18px; }
    .ecp-plume-grille { grid-template-columns: 72px 1fr; gap: 16px; }
    .ecp-atelier-portrait { max-width: 100%; }
}

/* Tres petits ecrans : le titre reste dans le cadre. */
@media (max-width: 400px) {
    :root { --ecp-t-geant: 1.72rem; }
}

/* ── Colonne de lecture centree (regle universelle du reseau) ──────────
   Les blocs de l article portaient une largeur de lecture sans centrage :
   la colonne se collait au bord gauche du conteneur et laissait une
   demi-page de blanc a droite. Tous les blocs partagent desormais le meme
   axe, l image mise en avant gardant sa largeur propre. */
.ecp-article > .ecp-rang > *:not(.ecp-cadre) {
    max-width: 720px;
    margin-inline: auto;
}
.ecp-article > .ecp-rang > .ecp-cadre { margin-inline: auto; }
.ecp-lecture,
.ecp-resume,
.ecp-etiquettes,
.ecp-plume { margin-inline: auto; }

/* Le hero d article n a plus de photo : son titre se calait au bord du
   conteneur pendant que le corps etait centre, soit deux axes visibles sur
   une page blanche. Le fil d ariane et le titre suivent la meme mesure. */
.single .ecp-coiffe .ecp-rang { max-width: calc(720px + 2 * var(--ecp-marge)); }