@charset "UTF-8";
/*
Theme Name: Toute la maison en parle
Theme URI: https://www.toutelamaisonenparle-shop.fr
Description: Theme editorial maison — les objets d une maison. Archetype CA : ouverture pleine hauteur, photographie voilee, typographie gravee.
Author: Netlinqueen
Version: 2.0.0
Text Domain: toutelamaisonenparle-shop
*/

/* =================================================================
   LE VIDE-POCHE — trois partis pris

   1. LA PHOTOGRAPHIE PORTE LA PAGE. Chaque gabarit s ouvre sur une
      image pleine hauteur, voilee, qui porte le titre en blanc. Le
      voile est DIRECTIONNEL : dense en bas, la ou se pose le texte,
      leger en haut, pour que la photographie reste une photographie
      et non un aplat. Contraste mesure dans la boite de chaque texte,
      jamais estime a l oeil.

   2. LE CORPS DE PAGE RESTE BLANC. Sous l ouverture, le fond est du
      blanc pur : c est le contraste entre la masse sombre du bandeau
      et le blanc de la lecture qui donne son calme au site.

   3. UN SEUL ACCENT, ET IL EST NEUTRE. #514A53, un gris mauve dont
      les canaux R et B sont quasi egaux et G passe en dessous (81/74/83,
      ecart 9). Il tient 8,56:1 sur blanc et vaut 1,55x le gris de meta :
      au-dessous de ~1,35x un accent neutre ne se distingue plus du
      texte courant. Sur fond sombre il est illisible (2,1:1) : c est
      --vp-vif-clair qui prend le relais partout ou il borde du sombre.
   ================================================================= */

:root {
    --vp-papier: #FFFFFF;
    --vp-surface: #F5F4F6;
    --vp-surface-2: #EBE9EE;
    --vp-filet: #E0DEE4;
    --vp-filet-2: #C5C2CB;

    --vp-encre: #16141A;
    --vp-encre-2: #0B090E;
    --vp-doux: #3B3841;
    --vp-gris: #6B6771;

    --vp-clair: #F2F1F4;
    --vp-clair-2: #B1ADB7;
    --vp-clair-3: #DCD9E0;

    --vp-vif: #514A53;
    --vp-vif-fonce: #39333B;
    --vp-vif-clair: #C2BEC8;
    --vp-vif-voile: #F1EFF2;

    --vp-cadre: 1240px;
    --vp-etroit: 940px;
    --vp-gouttiere: 40px;
    --vp-mesure: 700px;
    --vp-entete: 84px;

    --vp-display: "Bona Nova", Georgia, "Times New Roman", serif;
    --vp-corps: "Kumbh Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}

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

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

body {
    margin: 0;
    background: var(--vp-papier);
    color: var(--vp-doux);
    font-family: var(--vp-corps);
    font-size: 17px;
    line-height: 1.72;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--vp-display);
    font-weight: 400;
    color: var(--vp-encre);
    margin: 0;
    line-height: 1.14;
    letter-spacing: -0.005em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { list-style: none; margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 3px solid var(--vp-vif);
    outline-offset: 3px;
    border-radius: 2px;
}
.vp-sombre :focus-visible { outline-color: var(--vp-clair); }

.vp-saut {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--vp-encre);
    color: var(--vp-clair);
    padding: 14px 22px;
    z-index: 200;
}
.vp-saut:focus { left: 0; }

.vp-cadre {
    width: 100%;
    max-width: var(--vp-cadre);
    margin-inline: auto;
    padding-inline: var(--vp-gouttiere);
}
.vp-cadre--etroit { max-width: var(--vp-etroit); }

/* ── Libelles ────────────────────────────────────────────────────
   Petites capitales tracquees, precedees d un tic : l objet pose sur
   sa tablette, le meme signe que la puce du corps de texte et que le
   site icon. */
.vp-oeil {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--vp-corps);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vp-gris);
}
.vp-oeil::before {
    content: '';
    width: 15px; height: 11px;
    flex: none;
    background:
        linear-gradient(var(--vp-vif), var(--vp-vif)) 50% 0 / 7px 7px no-repeat,
        linear-gradient(var(--vp-vif), var(--vp-vif)) 0 100% / 15px 3px no-repeat;
}
.vp-sombre .vp-oeil { color: var(--vp-clair-3); }
.vp-sombre .vp-oeil::before {
    background:
        linear-gradient(var(--vp-vif-clair), var(--vp-vif-clair)) 50% 0 / 7px 7px no-repeat,
        linear-gradient(var(--vp-vif-clair), var(--vp-vif-clair)) 0 100% / 15px 3px no-repeat;
}

/* ── En-tete ─────────────────────────────────────────────────────
   Fixe, transparente au sommet, encre des que la page defile. Elle
   n est jamais blanche : tous les gabarits s ouvrent sur un bandeau
   photographique voile et sombre, donc le texte clair y est toujours
   lisible. C est ce qui evite le bug de menu blanc sur blanc des
   en-tetes transparentes du parc. */
.vp-entete {
    position: fixed;
    inset: 0 0 auto;
    z-index: 90;
    height: var(--vp-entete);
    display: flex;
    align-items: center;
    color: var(--vp-clair);
    transition: background-color .32s ease, box-shadow .32s ease, height .32s ease;
}
/* Le scrim de l en-tete transparente : une bande courte derriere la
   barre, et non un assombrissement de tout le haut de la photographie,
   qui la reduisait a un aplat gris. Elle disparait des que l en-tete
   prend son fond d encre au defilement. */
.vp-entete::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 168px;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(11, 9, 14, 0.66) 0%,
        rgba(11, 9, 14, 0.28) 58%,
        rgba(11, 9, 14, 0.00) 100%);
    transition: opacity .32s ease;
}
.vp-entete--fond::before { opacity: 0; }
.vp-entete--fond {
    background: var(--vp-encre);
    height: 68px;
    box-shadow: 0 1px 0 rgba(242, 241, 244, 0.12);
}
.vp-entete .vp-cadre {
    position: relative;   /* au-dessus du scrim, sans z-index negatif */
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 32px;
}
.vp-marque { display: inline-flex; align-items: center; }
.vp-marque svg { height: 30px; width: auto; }

.vp-nav { margin-left: auto; display: flex; align-items: center; gap: 34px; }
.vp-nav-liens { display: flex; align-items: center; gap: 34px; }
.vp-nav-liens a {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vp-clair);
    padding-block: 6px;
    position: relative;
}
.vp-nav-liens a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--vp-clair);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.vp-nav-liens a:hover::after { transform: scaleX(1); }

.vp-nav-contact {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vp-encre);
    background: var(--vp-clair);
    padding: 13px 22px;
    transition: background-color .25s ease, color .25s ease;
}
.vp-nav-contact:hover { background: var(--vp-vif-clair); }
.vp-nav-contact svg { width: 15px; height: 15px; }

.vp-burger {
    display: none;
    margin-left: auto;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--vp-clair);
}
.vp-burger svg { width: 26px; height: 26px; display: block; }
.vp-nav-close, .vp-nav-logo { display: none; }

/* ── L OUVERTURE : photographie pleine hauteur ───────────────────
   Le voile est pose en DEUX couches : un degrade vertical qui
   s intensifie vers le bas, ou tombe le texte, et une nappe laterale
   plus discrete. Un voile uniformement fort remonterait bien les
   contrastes mais transformerait la photo en aplat, ce que la charte
   interdit. */
.vp-ouverture {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--vp-encre);
}
.vp-ouverture-fond { position: absolute; inset: 0; }
.vp-ouverture-fond img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.vp-voile {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(11, 9, 14, 0.26) 0%,
            rgba(11, 9, 14, 0.14) 34%,
            rgba(11, 9, 14, 0.52) 58%,
            rgba(11, 9, 14, 0.86) 80%,
            rgba(11, 9, 14, 0.95) 100%),
        linear-gradient(92deg,
            rgba(11, 9, 14, 0.70) 0%,
            rgba(11, 9, 14, 0.62) 56%,
            rgba(11, 9, 14, 0.16) 80%,
            rgba(11, 9, 14, 0.00) 100%);
}
/* La manchette est bornee pour rester DANS le flanc dense du voile :
   sans cela le mot en italique tombait sur le mur clair de la
   photographie, mesure a 1,00:1 sur le rendu. */
.vp-ouverture .vp-titre { max-width: 800px; }
.vp-ouverture-corps {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-bottom: 92px;
    padding-top: calc(var(--vp-entete) + 60px);
    color: var(--vp-clair);
}
.vp-ouverture-mot { max-width: 940px; }

.vp-titre {
    color: #FFFFFF;
    font-size: clamp(2.7rem, 6.1vw, 5.3rem);
    line-height: 1.045;
    margin: 26px 0 0;
    text-wrap: balance;
}
.vp-titre em {
    font-style: italic;
    color: #FFFFFF;
}
.vp-deck {
    max-width: 620px;
    margin: 30px 0 0;
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--vp-clair);
}

/* Le lien souligne : la seule action du hero, jamais un bouton plein
   qui ferait tache sur une photographie. */
.vp-lien {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 38px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #FFFFFF;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.55);
    transition: border-color .3s ease, gap .3s ease;
}
.vp-lien:hover { border-color: #FFFFFF; gap: 19px; }
.vp-lien svg { width: 16px; height: 16px; }

/* ── Les releves ────────────────────────────────────────────────── */
.vp-releves {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 62px;
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    padding-top: 26px;
}
.vp-releve {
    padding-right: 52px;
    margin-right: 52px;
    border-right: 1px solid rgba(255, 255, 255, 0.22);
}
.vp-releve:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.vp-releve-n {
    display: block;
    font-family: var(--vp-display);
    font-size: 2.15rem;
    line-height: 1;
    color: #FFFFFF;
}
.vp-releve-l {
    display: block;
    margin-top: 9px;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vp-clair);
}
/* Sur blanc, les memes releves changent de filets et d encre. */
.vp-releves--clair {
    border-top-color: var(--vp-filet-2);
    color: var(--vp-doux);
}
.vp-releves--clair .vp-releve { border-right-color: var(--vp-filet); }
.vp-releves--clair .vp-releve-n { color: var(--vp-encre); }
.vp-releves--clair .vp-releve-l { color: var(--vp-gris); }

/* ── La coiffe : meme ouverture, plus basse, pour les pages ─────── */
.vp-coiffe {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--vp-encre);
}
.vp-coiffe--courte { min-height: 52vh; }

/* Le voile de la coiffe est mesure, pas estime : le fil d Ariane, le
   libelle et le titre s y posent en bas, et l en-tete transparente en
   haut. Les deux extremites sont donc denses, le milieu reste clair
   pour que la photographie existe encore. */
.vp-coiffe .vp-voile {
    background:
        linear-gradient(180deg,
            rgba(11, 9, 14, 0.28) 0%,
            rgba(11, 9, 14, 0.18) 30%,
            rgba(11, 9, 14, 0.56) 60%,
            rgba(11, 9, 14, 0.88) 82%,
            rgba(11, 9, 14, 0.96) 100%),
        linear-gradient(96deg,
            rgba(11, 9, 14, 0.70) 0%,
            rgba(11, 9, 14, 0.54) 42%,
            rgba(11, 9, 14, 0.14) 74%,
            rgba(11, 9, 14, 0.00) 100%);
}

.vp-coiffe-corps {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: calc(var(--vp-entete) + 48px);
    padding-bottom: 62px;
    color: var(--vp-clair);
}
.vp-coiffe .vp-titre { font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.vp-coiffe .vp-deck { margin-top: 22px; }

/* Fil d Ariane */
.vp-fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
    color: var(--vp-clair);
}
.vp-fil a { color: var(--vp-clair); border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 2px; }
.vp-fil a:hover { border-bottom-color: #FFFFFF; }
.vp-fil span[aria-current] { color: var(--vp-clair-3); }
.vp-fil-sep { width: 16px; height: 1px; background: rgba(255,255,255,.45); }

/* ── Sections ───────────────────────────────────────────────────── */
.vp-section { padding-block: 104px; }
.vp-section--serre { padding-block: 76px; }
.vp-section--surface { background: var(--vp-surface); }

.vp-tete-sec {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--vp-filet);
    margin-bottom: 52px;
}
.vp-tete-sec h2 {
    font-size: clamp(1.85rem, 3.1vw, 2.6rem);
}
.vp-tete-sec .vp-oeil { padding-bottom: 6px; }

/* ── La une : photographie large, carte de texte en chevauchement ─
   La carte est OPAQUE : aucun mot ne se pose sur la photographie hors
   des bandeaux voiles, ou le contraste est mesure. */
.vp-une { position: relative; }
.vp-une-vue { display: block; overflow: hidden; }
.vp-une-vue img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.vp-une:hover .vp-une-vue img { transform: scale(1.035); }
.vp-une-carte {
    position: relative;
    z-index: 2;
    background: var(--vp-papier);
    max-width: 720px;
    margin: -96px 0 0 0;
    padding: 46px 54px 0 0;
}
.vp-une-carte h3 {
    font-size: clamp(1.8rem, 3.2vw, 2.55rem);
    margin: 18px 0 16px;
}
.vp-une-carte h3 a { background-image: linear-gradient(var(--vp-vif), var(--vp-vif)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s ease; }
.vp-une:hover .vp-une-carte h3 a { background-size: 100% 1px; }
.vp-une-extrait { color: var(--vp-doux); max-width: 560px; }

/* ── Le flux : deux colonnes aerees ─────────────────────────────── */
.vp-flux {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px 60px;
}
.vp-fiche { display: flex; flex-direction: column; }
.vp-fiche-vue { display: block; overflow: hidden; margin-bottom: 24px; }
.vp-fiche-vue img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.vp-fiche:hover .vp-fiche-vue img { transform: scale(1.035); }
.vp-fiche h2,
.vp-fiche h3 {
    font-family: var(--vp-display);
    font-weight: 400;
    font-size: 1.55rem;
    margin: 14px 0 12px;
}
.vp-fiche h2 a,
.vp-fiche h3 a {
    background-image: linear-gradient(var(--vp-vif), var(--vp-vif));
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .4s ease;
}
.vp-fiche:hover h2 a,
.vp-fiche:hover h3 a { background-size: 100% 1px; }
.vp-fiche-extrait { color: var(--vp-doux); }

.vp-meta {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--vp-gris);
}
.vp-meta a { color: var(--vp-vif); }
.vp-meta-point { width: 4px; height: 4px; background: var(--vp-filet-2); }

/* ── L etat vide ────────────────────────────────────────────────── */
.vp-vide {
    max-width: 620px;
    border-top: 2px solid var(--vp-encre);
    padding-top: 30px;
}
.vp-vide h3 { font-size: 1.7rem; margin-bottom: 14px; }

/* ── Le portrait de la redactrice ───────────────────────────────── */
.vp-portrait {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 72px;
    align-items: start;
}
/* Le portrait est le SEUL visuel vertical du site : il porte sa propre
   classe et son propre cadrage. Une regle scopee a un seul parent en
   laisserait deux casses, le portrait etant rendu a trois endroits. */
.vp-portrait-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 18%;
}
.vp-portrait-corps h2 {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    margin-bottom: 10px;
}
.vp-portrait-role {
    display: block;
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vp-vif);
    margin-bottom: 26px;
}
.vp-portrait-bio { color: var(--vp-doux); }
.vp-portrait-bio strong { color: var(--vp-encre); font-weight: 600; }
.vp-portrait-bio ul { margin: 1.1em 0; }
.vp-portrait-bio li { position: relative; padding-left: 28px; margin-bottom: 0.6em; }
.vp-portrait-bio li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.52em;
    width: 15px; height: 11px;
    background:
        linear-gradient(var(--vp-vif), var(--vp-vif)) 50% 0 / 7px 7px no-repeat,
        linear-gradient(var(--vp-vif), var(--vp-vif)) 0 100% / 15px 3px no-repeat;
}
.vp-portrait .vp-releves { margin-top: 40px; }

/* ── Le carnet : les six sujets ─────────────────────────────────── */
.vp-carnet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 54px 46px;
}
.vp-sujet { border-top: 1px solid var(--vp-filet-2); padding-top: 22px; }
.vp-sujet-n {
    display: block;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--vp-vif);
    margin-bottom: 12px;
}
.vp-sujet h3 { font-size: 1.4rem; margin-bottom: 10px; }

/* ── La rubrique : bandeau photographique voile ─────────────────── */
.vp-rubrique {
    position: relative;
    min-height: 58vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    background: var(--vp-encre);
}
.vp-rubrique-corps {
    position: relative;
    z-index: 2;
    padding-block: 84px;
    color: var(--vp-clair);
    max-width: 720px;
}
.vp-rubrique .vp-voile {
    background:
        radial-gradient(ellipse 66% 74% at 50% 50%,
            rgba(11, 9, 14, 0.80) 0%,
            rgba(11, 9, 14, 0.58) 62%,
            rgba(11, 9, 14, 0.30) 100%),
        linear-gradient(180deg,
            rgba(11, 9, 14, 0.34) 0%,
            rgba(11, 9, 14, 0.22) 40%,
            rgba(11, 9, 14, 0.44) 100%);
}
.vp-rubrique-corps .vp-oeil { justify-content: center; }
.vp-rubrique h2 {
    color: #FFFFFF;
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    margin: 22px 0 20px;
}
.vp-rubrique-desc { color: var(--vp-clair); margin-bottom: 32px; }
.vp-rubrique .vp-lien { margin-top: 0; }

/* ── Article ────────────────────────────────────────────────────── */
.vp-article { padding-block: 72px 96px; }
.vp-lecture,
.vp-lecture-meta,
.vp-plaque,
.vp-etiquettes,
.vp-auteur,
.vp-article .entry-content {
    max-width: var(--vp-mesure);
    margin-inline: auto;
}
.vp-plaque { margin-bottom: 46px; }
.vp-plaque img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vp-plaque figcaption {
    margin-top: 12px;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vp-gris);
}
.vp-lecture-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--vp-filet);
    margin-bottom: 34px;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--vp-gris);
}
.vp-lecture-meta a { color: var(--vp-vif); }

.entry-content { font-size: 1.06rem; }
.entry-content h2 {
    font-size: 1.95rem;
    margin: 2em 0 0.6em;
}
.entry-content h3 {
    font-size: 1.45rem;
    margin: 1.7em 0 0.5em;
}
.entry-content a {
    color: var(--vp-vif);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}
.entry-content img { margin-block: 2em; }
.entry-content blockquote {
    margin: 2em 0;
    padding-left: 28px;
    border-left: 2px solid var(--vp-vif);
    font-family: var(--vp-display);
    font-size: 1.35rem;
    font-style: italic;
    color: var(--vp-encre);
}

/* Le bullet : l objet pose sur sa tablette, a l echelle du texte. */
.entry-content ul { list-style: none; padding-left: 0; margin-bottom: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.4em; }
.entry-content ul li { position: relative; padding-left: 28px; margin-bottom: 0.55em; }
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.42em;
    width: 15px; height: 11px;
    background:
        linear-gradient(var(--vp-vif), var(--vp-vif)) 50% 0 / 7px 7px no-repeat,
        linear-gradient(var(--vp-vif), var(--vp-vif)) 0 100% / 15px 3px no-repeat;
}
.entry-content ol li { margin-bottom: 0.5em; }
/* Le sommaire du plugin apporte sa propre numerotation : il ne prend
   pas la puce du theme. */
.entry-content .ez-toc-list li::before { content: none; }
.entry-content .ez-toc-list li { padding-left: 0; }

.vp-etiquettes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 42px; }
.vp-etiquettes a {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vp-doux);
    border: 1px solid var(--vp-filet-2);
    padding: 9px 15px;
}
.vp-etiquettes a:hover { border-color: var(--vp-encre); color: var(--vp-encre); }

.vp-auteur {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
    margin-top: 62px;
    padding-top: 38px;
    border-top: 2px solid var(--vp-encre);
}
.vp-auteur-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: center 18%;
}
.vp-auteur h2 { font-size: 1.5rem; margin-bottom: 6px; }
.vp-auteur-role {
    display: block;
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vp-vif);
    margin-bottom: 16px;
}

.vp-voisins { padding-block: 88px; background: var(--vp-surface); }

/* Le widget d etoiles : borne, et surtout AUCUN selecteur descendant
   large autour de lui. Le plugin imbrique ses div sur quatre niveaux,
   et une regle .bloc div y cumulerait padding et filet a chaque etage. */
.vp-note { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.vp-note-l {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vp-gris);
}
.vp-note-widget { max-width: 100%; overflow-x: auto; }

/* ── Bloc editorial d archive ───────────────────────────────────── */
.vp-dossier {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 64px;
    align-items: center;
}
.vp-dossier h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin: 20px 0 18px; }
.vp-dossier-vue img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vp-dossier ul { margin: 1.2em 0; }
.vp-dossier li { position: relative; padding-left: 28px; margin-bottom: 0.55em; }
.vp-dossier li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.52em;
    width: 15px; height: 11px;
    background:
        linear-gradient(var(--vp-vif), var(--vp-vif)) 50% 0 / 7px 7px no-repeat,
        linear-gradient(var(--vp-vif), var(--vp-vif)) 0 100% / 15px 3px no-repeat;
}

/* ── Pages ──────────────────────────────────────────────────────── */
.vp-page-corps {
    max-width: var(--vp-mesure);
    margin-inline: auto;
    color: var(--vp-doux);
}
.vp-page-corps h2 { font-size: 1.75rem; margin: 2em 0 0.6em; }
.vp-page-corps h2:first-child { margin-top: 0; }
.vp-page-corps h3 { font-size: 1.3rem; margin: 1.6em 0 0.5em; }
.vp-page-corps ul { margin: 1.1em 0; }
.vp-page-corps li { position: relative; padding-left: 28px; margin-bottom: 0.5em; }
.vp-page-corps li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.52em;
    width: 15px; height: 11px;
    background:
        linear-gradient(var(--vp-vif), var(--vp-vif)) 50% 0 / 7px 7px no-repeat,
        linear-gradient(var(--vp-vif), var(--vp-vif)) 0 100% / 15px 3px no-repeat;
}
.vp-page-corps a { color: var(--vp-vif); text-decoration: underline; text-underline-offset: 0.18em; }

.vp-plan-groupe { margin-bottom: 46px; }
.vp-plan-groupe h2 { font-size: 1.6rem; margin-bottom: 16px; }
.vp-plan-groupe li { padding-left: 28px; }

/* ── Contact ────────────────────────────────────────────────────── */
.vp-echange {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    gap: 64px;
    align-items: start;
}
.vp-echange-mot { color: var(--vp-doux); }
.vp-echange-mot p:first-child {
    font-family: var(--vp-display);
    font-size: 1.35rem;
    line-height: 1.45;
    color: var(--vp-encre);
}
.vp-echange-form {
    background: var(--vp-surface);
    padding: 40px;
    border-top: 2px solid var(--vp-encre);
}

/* Contact Form 7 : le plugin enveloppe ses champs caches dans un
   <fieldset> qu il ne masque pas lui-meme (verifie : sa feuille ne
   contient pas le mot fieldset), et le navigateur lui dessine donc sa
   bordure par defaut, soit un rectangle vide au-dessus du formulaire. */
.wpcf7-form fieldset.hidden-fields-container { display: none; }
.wpcf7-form p { margin: 0 0 20px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vp-doux);
}
.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form textarea {
    width: 100%;
    font-family: var(--vp-corps);
    font-size: 1rem;
    color: var(--vp-encre);
    background: var(--vp-papier);
    border: 1px solid var(--vp-filet-2);
    padding: 14px 16px;
    letter-spacing: normal;
    text-transform: none;
}
.wpcf7-form textarea { min-height: 190px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: 2px solid var(--vp-vif); outline-offset: 1px; }
.wpcf7-form input.wpcf7-submit {
    width: 100%;
    font-family: var(--vp-corps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vp-clair);
    background: var(--vp-encre);
    border: 0;
    padding: 18px 24px;
    cursor: pointer;
    transition: background-color .25s ease;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--vp-vif); }

/* ── Boutons ────────────────────────────────────────────────────── */
.vp-bouton {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vp-clair);
    background: var(--vp-encre);
    padding: 17px 28px;
    transition: background-color .25s ease;
}
.vp-bouton:hover { background: var(--vp-vif); }
.vp-bouton svg { width: 15px; height: 15px; }
.vp-bouton--ligne {
    color: var(--vp-encre);
    background: none;
    border: 1px solid var(--vp-filet-2);
}
.vp-bouton--ligne:hover { background: var(--vp-encre); color: var(--vp-clair); border-color: var(--vp-encre); }

/* ── Pied ───────────────────────────────────────────────────────── */
.vp-pied {
    background: var(--vp-encre-2);
    color: var(--vp-clair);
    padding-block: 78px 34px;
}
.vp-pied-grille {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
    gap: 52px;
    padding-bottom: 52px;
}
.vp-pied-marque svg { height: 30px; width: auto; margin-bottom: 20px; }
.vp-pied-mot { color: var(--vp-clair-2); font-size: 0.95rem; max-width: 300px; }
.vp-pied-titre {
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vp-vif-clair);
    margin-bottom: 20px;
}
.vp-pied li { margin-bottom: 12px; position: relative; padding-left: 27px; }
.vp-pied li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 15px; height: 11px;
    background:
        linear-gradient(var(--vp-vif-clair), var(--vp-vif-clair)) 50% 0 / 7px 7px no-repeat,
        linear-gradient(var(--vp-vif-clair), var(--vp-vif-clair)) 0 100% / 15px 3px no-repeat;
}
.vp-pied a { color: var(--vp-clair); }
.vp-pied a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 0.2em; }
.vp-pied-bas {
    border-top: 1px solid rgba(242, 241, 244, 0.16);
    padding-top: 26px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vp-clair-2);
}

/* ── 404 ────────────────────────────────────────────────────────── */
.vp-404 { text-align: center; }
.vp-404 p { max-width: 560px; margin-inline: auto; color: var(--vp-doux); font-size: 1.05rem; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .vp-portrait { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; }
    .vp-carnet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vp-dossier, .vp-echange { grid-template-columns: 1fr; gap: 40px; }
    .vp-pied-grille { grid-template-columns: 1fr 1fr; gap: 42px; }
}

@media (max-width: 900px) {
    :root { --vp-gouttiere: 24px; --vp-entete: 72px; }
    .vp-nav-liens, .vp-nav > .vp-nav-contact { display: none; }
    .vp-burger { display: block; }

    .vp-nav {
        position: fixed;
        inset: 0;
        z-index: 120;
        background: var(--vp-encre);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 30px 24px;
        gap: 0;
        transform: translateX(100%);
        transition: transform .34s ease;
    }
    body.vp-menu-ouvert .vp-nav { transform: translateX(0); }
    body.vp-menu-ouvert { overflow: hidden; }

    .vp-nav-logo { display: block; margin-bottom: 46px; }
    .vp-nav-logo svg { height: 28px; width: auto; }
    .vp-nav-close {
        display: block;
        position: absolute;
        top: 26px; right: 22px;
        background: none; border: 0; padding: 8px;
        color: var(--vp-clair); cursor: pointer;
    }
    .vp-nav-close svg { width: 24px; height: 24px; display: block; }
    .vp-nav-liens {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .vp-nav-liens a {
        font-family: var(--vp-display);
        font-size: 1.9rem;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        padding-block: 12px;
    }
    .vp-nav-liens a::after { display: none; }
    .vp-nav > .vp-nav-contact,
    .vp-nav .vp-nav-contact--mobile { display: inline-flex; margin-top: 32px; }

    .vp-section { padding-block: 72px; }
    .vp-section--serre { padding-block: 56px; }
    .vp-ouverture { min-height: 90svh; }
    .vp-ouverture-corps { padding-bottom: 64px; }
    .vp-flux { grid-template-columns: 1fr; gap: 54px; }
    .vp-une-carte { margin-top: -54px; padding: 32px 32px 0 0; max-width: none; }
    .vp-portrait { grid-template-columns: 1fr; gap: 36px; }
    .vp-portrait-photo { max-width: 380px; }
    .vp-auteur { grid-template-columns: 132px minmax(0, 1fr); gap: 24px; }
    .vp-voisins { padding-block: 64px; }
    .vp-releve { padding-right: 30px; margin-right: 30px; }
    .vp-echange-form { padding: 28px; }
}

@media (max-width: 620px) {
    body { font-size: 16px; }
    .vp-carnet { grid-template-columns: 1fr; gap: 36px; }
    .vp-pied-grille { grid-template-columns: 1fr; gap: 36px; }
    .vp-portrait-photo { max-width: none; }
    .vp-portrait-photo img, .vp-auteur-photo img { aspect-ratio: 3 / 4; }
    .vp-releves { gap: 22px 0; }
    .vp-releve {
        flex: 1 1 40%;
        padding-right: 22px;
        margin-right: 22px;
    }
    .vp-une-carte { margin-top: -34px; padding: 26px 22px 0 0; }
    .vp-auteur { grid-template-columns: 1fr; }
    .vp-auteur-photo { max-width: 190px; }
    .vp-coiffe { min-height: 56vh; }
}

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

/* ============================================================
   PAGE À PROPOS
   ============================================================ */
.vp-ap-intro { background: var(--vp-surface); padding: clamp(56px, 9vw, 104px) 0; }
.vp-ap-intro-inner {
    max-width: var(--vp-cadre); margin: 0 auto; padding: 0 var(--vp-gouttiere);
    display: grid; grid-template-columns: 340px 1fr; gap: clamp(40px, 6vw, 80px); align-items: center;
}
.vp-ap-portrait { aspect-ratio: 3/4; overflow: hidden; background: var(--vp-filet); border-radius: 0; }
.vp-ap-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vp-ap-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vp-vif); margin: 0 0 16px; }
.vp-ap-name { font-family: var(--vp-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; font-style: normal; line-height: 1.1; color: var(--vp-encre); margin: 0 0 6px; }
.vp-ap-role { font-size: 0.85rem; color: var(--vp-doux); letter-spacing: 0.04em; margin: 0 0 28px; }
.vp-ap-lede { max-width: 60ch; line-height: 1.75; color: var(--vp-encre); }
.vp-ap-lede p { margin: 0; }
.vp-ap-lede p + p { margin-top: 1em; }
.vp-ap-body { background: var(--vp-papier); padding: clamp(56px, 9vw, 104px) 0; }
.vp-ap-col { max-width: 780px; margin: 0 auto; padding: 0 var(--vp-gouttiere); color: var(--vp-encre); }
.vp-ap-bloc { padding-bottom: clamp(40px, 6vw, 64px); margin-bottom: clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--vp-filet); }
.vp-ap-bloc-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 22px; }
.vp-ap-folio { font-family: var(--vp-display); font-style: normal; font-size: 1rem; color: var(--vp-vif); }
.vp-ap-bloc h2 { font-family: var(--vp-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 400; font-style: normal; line-height: 1.15; color: var(--vp-encre); margin: 0; }
.vp-ap-bloc > p { line-height: 1.8; margin: 0; }
.vp-ap-bloc > p + p, .vp-ap-bloc > ul + p, .vp-ap-bloc > dl + p { margin-top: 1em; }
.vp-ap-liste { list-style: none; margin: 1.2em 0 0; padding: 0; display: grid; gap: 14px; }
.vp-ap-liste li { position: relative; padding-left: 22px; line-height: 1.7; }
.vp-ap-liste li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 2px; background: var(--vp-vif); }
.vp-ap-liste a { color: var(--vp-vif); text-decoration: none; border-bottom: 1px solid currentColor; font-weight: 600; }
.vp-ap-liste a:hover { color: var(--vp-vif-fonce); }
.vp-ap-reperes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--vp-filet); border: 1px solid var(--vp-filet); margin: 0 0 24px; }
.vp-ap-reperes div { background: var(--vp-papier); padding: 24px 20px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.vp-ap-reperes dd { margin: 0; font-family: var(--vp-display); font-style: normal; font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--vp-encre); }
.vp-ap-reperes dd.vp-ap-reperes-mot { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.15; }
.vp-ap-reperes dt { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vp-doux); }
.vp-ap-fin { text-align: center; }
.vp-ap-fin p { max-width: 54ch; margin: 0 auto 28px; line-height: 1.75; }
.vp-ap-bouton { display: inline-block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--vp-vif); padding: 15px 34px; border-radius: 0; text-decoration: none; transition: background .2s; }
.vp-ap-bouton:hover { background: var(--vp-vif-fonce); color: #fff; }
@media (max-width: 860px) {
    .vp-ap-intro-inner { grid-template-columns: 1fr; }
    .vp-ap-portrait { max-width: 340px; }
}
@media (max-width: 560px) { .vp-ap-reperes { grid-template-columns: 1fr; } }

/* ── Blocs « La rédaction » (sans portrait) ─────────────────────── */
.vp-portrait.vp-portrait--seule { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.vp-auteur.vp-auteur--seule { grid-template-columns: minmax(0, 1fr); }
.vp-auteur h2 a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--vp-filet-2); }
.vp-auteur h2 a:hover { border-bottom-color: currentColor; }
.vp-ap-intro-inner.vp-ap-intro-inner--seule { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.vp-ap-reperes.vp-ap-reperes--duo { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) {
    .vp-portrait.vp-portrait--seule, .vp-auteur.vp-auteur--seule { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .vp-ap-reperes.vp-ap-reperes--duo { grid-template-columns: 1fr; } }