/*
Theme Name: Paris Insights
Theme URI: https://parisinsights.fr
Author: Paris Insights
Description: Magazine beauté, mode, santé, bien-être et art de vivre — archetype Y « Cimaise / Galerie encadrée ». Mur de galerie nocturne (vert profond), œuvres en passe-partout ivoire suspendues, accrochage en mosaïque (masonry), cimaise des rubriques. Prata + Onest, vert galerie / ivoire / laiton.
Version: 1.2.0
License: GNU General Public License v2 or later
Text Domain: parisinsights
*/

/* ── Variables ─────────────────────────────────────────────────────────── */
:root {
    /* Galerie nocturne — rôles fond/texte inversés :
       --pi-creme = MUR (fond vert profond), --pi-encre = IVOIRE (texte & filets clairs). */
    --pi-creme: #1B332C;       /* mur de galerie (fond, header, sections) */
    --pi-nuit: #15281F;        /* footer & menu mobile — vert plus profond */
    --pi-surface: #22413A;     /* panneaux (édito, formulaire, signature) */
    --pi-mat: #EDE7DA;         /* passe-partout (reste clair) */
    --pi-encre: #ECE6D8;       /* ivoire : texte & filets clairs */
    --pi-encre-soft: #C6C2B5;  /* texte secondaire clair */
    --pi-ligne: #3C544B;       /* filets visibles sur le mur */
    --pi-mine: #94A39A;        /* labels atténués */
    --pi-or: #C3A35E;          /* laiton (accent métallique) */
    --pi-or-deep: #A8854A;
    --pi-or-tint: #E7DCC4;     /* wash clair (hover tags / mat) */
    --pi-laiton: #C3A35E;      /* filet de cadre brass */
    --pi-display: 'Prata', serif;
    --pi-corps: 'Onest', system-ui, sans-serif;
    --pi-hh: 78px;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--pi-corps);
    font-size: 17px;
    line-height: 1.7;
    color: var(--pi-encre);
    background: var(--pi-creme);
    padding-top: var(--pi-hh);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3, h4 { font-family: var(--pi-display); font-weight: 400; line-height: 1.16; }

.pi-nef { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

/* ── Utilitaire : cartel (étiquette muséale) ───────────────────────────── */
.pi-eyebrow {
    font-family: var(--pi-corps);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--pi-or);
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.pi-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--pi-laiton); }

/* ── Utilitaire : cadre passe-partout ──────────────────────────────────── */
.pi-cadre {
    position: relative;
    background: var(--pi-mat);
    padding: 13px;
    border: 1px solid var(--pi-encre);
    overflow: hidden;
}
.pi-cadre::after {
    content: '';
    position: absolute;
    inset: 13px;
    border: 1px solid var(--pi-laiton);
    opacity: 0.55;
    pointer-events: none;
    z-index: 2;
}
.pi-cadre img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.94) contrast(1.02);
}
/* Attache : cordon + clou suspendus au-dessus du cadre (signature).
   Le cordon est dessiné par le CONTENEUR (le cadre garde overflow:hidden
   pour le zoom de l'image au survol, ce qui clipperait le cordon). */
.pi-cadre--hung { margin-top: 27px; }
.pi-oeuvre, .pi-tableau, .pi-plaque, .pi-edito-portrait { position: relative; }
.pi-oeuvre::before, .pi-tableau::before, .pi-plaque::before, .pi-edito-portrait::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 27px;
    z-index: 4;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 78 27'%3E%3Cpath d='M5 26 L39 5 L73 26' fill='none' stroke='%23ECE6D8' stroke-width='1'/%3E%3Ccircle cx='39' cy='5' r='3' fill='%23C3A35E'/%3E%3Ccircle cx='39' cy='5' r='3' fill='none' stroke='%23ECE6D8' stroke-width='0.8'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ── Header (entrée de galerie) ────────────────────────────────────────── */
.pi-entree {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--pi-hh);
    background: var(--pi-creme);
    z-index: 300;
    border-bottom: 1px solid var(--pi-encre);
}
.pi-entree::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 1px;
    background: var(--pi-laiton);
    opacity: 0.4;
}
.pi-entree-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}
.pi-griffe { color: var(--pi-encre); display: flex; align-items: center; }
.pi-nav .pi-griffe--mobile { display: none; }
.pi-nav ul { display: flex; align-items: center; gap: 30px; }
.pi-nav a {
    font-family: var(--pi-corps);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-encre);
    padding: 6px 0;
    position: relative;
    transition: color 0.2s;
}
.pi-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 1px;
    background: var(--pi-or);
    transition: width 0.28s ease;
}
.pi-nav a:hover { color: var(--pi-or); }
.pi-nav a:hover::after { width: 100%; }
.pi-nav-contact a {
    border: 1px solid var(--pi-encre);
    padding: 10px 22px;
}
.pi-nav-contact a::after { display: none; }
.pi-nav-contact a:hover { background: var(--pi-encre); color: var(--pi-creme); }
.pi-nav-fermer { display: none; }
.pi-burger {
    display: none;
    width: 44px; height: 44px;
    background: none;
    border: 1px solid var(--pi-encre);
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.pi-burger span { display: block; width: 18px; height: 1.5px; background: var(--pi-encre); }
.pi-burger:hover { border-color: var(--pi-or); }
.pi-burger:hover span { background: var(--pi-or); }

/* ── Boutons ───────────────────────────────────────────────────────────── */
.pi-bouton {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 15px 32px;
    background: var(--pi-encre);
    color: var(--pi-creme);
    font-family: var(--pi-corps);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--pi-encre);
    cursor: pointer;
    transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.pi-bouton:hover { background: var(--pi-or-deep); border-color: var(--pi-or-deep); color: #fff; }
.pi-bouton--ghost { background: transparent; color: var(--pi-encre); border-color: var(--pi-encre); }
.pi-bouton--ghost:hover { background: var(--pi-encre); color: var(--pi-creme); }

/* ── Hero « Accrochage » ───────────────────────────────────────────────── */
.pi-accrochage {
    position: relative;
    padding: 70px 0 78px;
    border-bottom: 1px solid var(--pi-ligne);
    overflow: hidden;
}
.pi-accrochage::before {
    content: '';
    position: absolute;
    top: 44px; left: 0; right: 0;
    height: 1px;
    background: var(--pi-ligne);
}
.pi-accrochage-grille {
    display: grid;
    grid-template-columns: 0.94fr 1.06fr;
    gap: 70px;
    align-items: center;
    position: relative;
}
.pi-accrochage-texte .pi-eyebrow { margin-bottom: 26px; }
.pi-accrochage h1 {
    font-size: clamp(2.6rem, 5.2vw, 4.3rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    margin-bottom: 26px;
}
.pi-accrochage h1 em { font-style: italic; color: var(--pi-or); }
.pi-accroche-lead {
    font-size: 1.13rem;
    color: var(--pi-encre-soft);
    max-width: 480px;
    margin-bottom: 36px;
}
.pi-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Œuvre encadrée (visuel hero) */
.pi-oeuvre { position: relative; }
.pi-oeuvre .pi-cadre img { aspect-ratio: 4 / 4.4; }
.pi-cartel {
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--pi-encre);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
}
.pi-cartel-ref {
    font-family: var(--pi-corps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pi-or);
}
.pi-cartel-leg {
    font-family: var(--pi-display);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--pi-encre-soft);
    text-align: right;
}

/* Jauges (stats) */
.pi-jauges {
    margin-top: 40px;
    display: flex;
    gap: 42px;
    flex-wrap: wrap;
}
.pi-jauge { display: flex; flex-direction: column; gap: 4px; }
.pi-jauge-num {
    font-family: var(--pi-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--pi-encre);
}
.pi-jauge-num sup { font-size: 1.1rem; color: var(--pi-or); top: -0.7em; }
.pi-jauge-lib {
    font-family: var(--pi-corps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pi-mine);
}

/* ── Sections communes ─────────────────────────────────────────────────── */
.pi-section { padding: 84px 0; }
.pi-tete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 48px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--pi-encre);
}
.pi-tete h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    letter-spacing: -0.01em;
}
.pi-tete-note {
    font-family: var(--pi-corps);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-mine);
    white-space: nowrap;
    padding-bottom: 6px;
}

/* ── Le Mur (accrochage en mosaïque / masonry salon hang) ──────────────── */
.pi-grille { columns: 3; column-gap: 40px; }
.pi-tableau { display: flex; flex-direction: column; break-inside: avoid; margin-bottom: 54px; }
.pi-tableau .pi-cadre img { aspect-ratio: 4 / 3.4; transition: transform 0.5s ease; }
.pi-tableau--haut .pi-cadre img { aspect-ratio: 4 / 5.3; }
.pi-tableau:hover .pi-cadre img { transform: scale(1.04); }
/* Articles similaires : rang propre, pas de mosaïque */
.pi-voisins .pi-grille { columns: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.pi-voisins .pi-tableau { margin-bottom: 0; }
.pi-tableau .pi-cartel { border-top: none; padding-top: 0; margin-top: 18px; flex-direction: column; align-items: stretch; gap: 0; }
.pi-tableau-cat {
    font-family: var(--pi-corps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pi-or);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.pi-tableau-cat .pi-num { color: var(--pi-mine); }
.pi-tableau h3, .pi-tableau h2 {
    font-size: 1.42rem;
    line-height: 1.22;
    margin-bottom: 12px;
}
.pi-tableau h3 a, .pi-tableau h2 a {
    background-image: linear-gradient(var(--pi-or), var(--pi-or));
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.32s ease;
    padding-bottom: 2px;
}
.pi-tableau:hover h3 a, .pi-tableau:hover h2 a { background-size: 100% 1px; }
.pi-tableau-resume { font-size: 0.96rem; color: var(--pi-encre-soft); margin-bottom: 16px; }
.pi-tableau-meta {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--pi-ligne);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--pi-corps);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pi-mine);
}
.pi-tableau-lire { margin-left: auto; color: var(--pi-or); font-weight: 600; transition: transform 0.25s; }
.pi-tableau:hover .pi-tableau-lire { transform: translateX(5px); }

/* ── Édito (persona) ───────────────────────────────────────────────────── */
.pi-edito { background: var(--pi-surface); border-top: 1px solid var(--pi-ligne); border-bottom: 1px solid var(--pi-ligne); }
.pi-edito-grille { display: grid; grid-template-columns: 360px 1fr; gap: 66px; align-items: start; }
.pi-edito-portrait .pi-cadre img { aspect-ratio: 4 / 5; object-position: center top; }
.pi-edito-portrait .pi-cartel { justify-content: center; text-align: center; }
.pi-edito-portrait .pi-cartel-ref { letter-spacing: 0.18em; }
.pi-edito-corps .pi-eyebrow { margin-bottom: 20px; }
.pi-edito-corps h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: 6px; }
.pi-edito-role {
    font-family: var(--pi-corps);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-or);
    margin-bottom: 26px;
}
.pi-edito-bio { columns: 2; column-gap: 40px; }
.pi-edito-bio p { margin-bottom: 1.1em; color: var(--pi-encre-soft); break-inside: avoid; }
.pi-edito-bio p:first-child:first-letter {
    font-family: var(--pi-display);
    font-size: 3.4em;
    line-height: 0.78;
    float: left;
    margin: 0.06em 0.1em 0 0;
    color: var(--pi-or);
}
.pi-edito-bio ul { margin-bottom: 1.1em; }
.pi-edito-bio ul li { position: relative; padding-left: 1.5em; margin-bottom: 0.5em; color: var(--pi-encre-soft); break-inside: avoid; }
.pi-edito-bio ul li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.55em;
    width: 7px; height: 7px;
    border: 1.5px solid var(--pi-or);
    background: transparent;
}
.pi-edito-bio strong { color: var(--pi-encre); font-weight: 600; }
.pi-paraphe { margin: 28px 0 4px; }
.pi-paraphe svg { width: 168px; height: auto; display: block; }
.pi-edito-pied { margin-top: 26px; }
.pi-edito-corps { columns: auto; }

/* ── Rubriques (cimaise : rail continu, cadres suspendus en quinconce) ──── */
.pi-rubriques {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    padding-top: 66px;
}
.pi-rubriques::before {            /* le rail (cimaise) */
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--pi-encre);
}
.pi-rubriques .pi-plaque { display: flex; flex-direction: column; transition: transform 0.3s ease; }
.pi-rubriques .pi-plaque:nth-child(even) { margin-top: 38px; }
.pi-rubriques .pi-plaque:hover { transform: translateY(-6px); }
.pi-rubriques .pi-cadre--hung { margin-top: 0; }
.pi-rubriques .pi-plaque .pi-cadre img { aspect-ratio: 3 / 3.6; }
.pi-rubriques .pi-plaque:hover .pi-cadre { background: var(--pi-or-tint); }
/* cordon vertical reliant chaque cadre au rail + clou sur le rail */
.pi-rubriques .pi-plaque::before {
    content: '';
    position: absolute;
    top: -66px; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 66px;
    background: var(--pi-encre);
    z-index: 4;
}
.pi-rubriques .pi-plaque:nth-child(even)::before { top: -104px; height: 104px; }
.pi-rubriques .pi-plaque::after {
    content: '';
    position: absolute;
    top: -69px; left: 50%;
    transform: translateX(-50%);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--pi-or);
    border: 1px solid var(--pi-encre);
    z-index: 5;
}
.pi-rubriques .pi-plaque:nth-child(even)::after { top: -107px; }
.pi-plaque-cartel { margin-top: 17px; padding-top: 13px; border-top: 1px solid var(--pi-encre); }
.pi-plaque-nom { font-family: var(--pi-display); font-size: 1.35rem; margin-bottom: 8px; }
.pi-plaque-desc { font-size: 0.86rem; color: var(--pi-encre-soft); line-height: 1.55; margin-bottom: 12px; }
.pi-plaque-compte {
    font-family: var(--pi-corps);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pi-or);
}

/* ── Footer (colophon) ─────────────────────────────────────────────────── */
.pi-colophon {
    background: var(--pi-nuit);
    color: var(--pi-encre);
    position: relative;
    padding: 70px 0 0;
}
.pi-colophon::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--pi-laiton);
}
.pi-colophon-grille { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1.2fr; gap: 48px; padding-bottom: 52px; }
.pi-colophon-desc { font-size: 0.92rem; color: rgba(244,240,230,0.62); margin-top: 18px; max-width: 320px; }
.pi-colophon-titre {
    font-family: var(--pi-corps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pi-laiton);
    margin-bottom: 20px;
}
.pi-colophon ul li { margin-bottom: 11px; }
.pi-colophon ul a { font-size: 0.95rem; color: rgba(244,240,230,0.8); transition: color 0.2s, padding-left 0.2s; }
.pi-colophon ul a:hover { color: #fff; padding-left: 6px; }
.pi-colophon-article { display: flex; gap: 14px; margin-bottom: 16px; align-items: center; }
.pi-colophon-article img { width: 62px; height: 70px; object-fit: cover; border: 1px solid rgba(244,240,230,0.25); flex-shrink: 0; }
.pi-colophon-article a { font-family: var(--pi-display); font-size: 0.96rem; line-height: 1.3; color: rgba(244,240,230,0.88); }
.pi-colophon-article a:hover { color: #fff; }
.pi-colophon-article time { display: block; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(244,240,230,0.45); margin-top: 5px; }
.pi-colophon-pied {
    border-top: 1px solid rgba(244,240,230,0.16);
    padding: 22px 0;
    text-align: center;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: rgba(244,240,230,0.5);
}

/* ── Heroes internes (bandeau) ─────────────────────────────────────────── */
.pi-bandeau { position: relative; background-size: cover; background-position: center; }
.pi-bandeau::before { content: ''; position: absolute; inset: 0; background: rgba(16,24,26,0.66); }
.pi-bandeau-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 340px;
    padding: 80px 40px;
    color: #fff;
}
.pi-bandeau h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); color: #fff; }
.pi-fil {
    font-family: var(--pi-corps);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.78);
}
.pi-fil a { color: rgba(255,255,255,0.78); transition: color 0.2s; }
.pi-fil a:hover { color: #fff; }
.pi-fil span { color: rgba(255,255,255,0.5); }
.pi-bandeau-desc { max-width: 660px; margin-top: 16px; color: #fff !important; }
.pi-bandeau-desc p { color: #fff !important; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.pi-bandeau-compte {
    margin-top: 22px;
    font-family: var(--pi-corps);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 14px;
}

/* ── Archive ───────────────────────────────────────────────────────────── */
.pi-salle { padding: 74px 0; }
.pi-salle .pi-grille .pi-cadre--hung { margin-top: 26px; }

/* ── Bloc SEO (encart) ─────────────────────────────────────────────────── */
.pi-encart { padding: 70px 0 90px; border-top: 1px solid var(--pi-ligne); }
.pi-encart-titre { font-size: clamp(1.6rem, 2.6vw, 2.2rem); border-bottom: 1px solid var(--pi-encre); padding-bottom: 16px; margin-bottom: 40px; }
.pi-encart-inner { display: grid; grid-template-columns: 1fr 440px; gap: 60px; align-items: center; }
.pi-encart-texte p { margin-bottom: 1.2em; color: var(--pi-encre-soft); }
.pi-encart-texte ul { margin-bottom: 1.2em; }
.pi-encart-texte ul li { position: relative; padding-left: 1.9em; margin-bottom: 0.65em; color: var(--pi-encre-soft); }
.pi-encart-texte ul li::before { content: '\2192'; position: absolute; left: 0; color: var(--pi-or); font-weight: 600; }
.pi-encart-image .pi-cadre img { aspect-ratio: 4 / 3.3; transition: transform 0.45s; }
.pi-encart-image:hover .pi-cadre img { transform: scale(1.04); }

/* ── Single (lecture) ──────────────────────────────────────────────────── */
.pi-lecture-hero { position: relative; min-height: 84vh; background-size: cover; background-position: center; display: flex; align-items: center; }
.pi-lecture-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(165deg, rgba(16,24,26,0.74), rgba(10,70,76,0.5)); }
.pi-lecture-hero-inner { position: relative; max-width: 880px; margin: 0 auto; padding: 130px 40px 96px; text-align: center; color: #fff; }
.pi-badge-cat {
    display: inline-block;
    font-family: var(--pi-corps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: var(--pi-or);
    color: #fff;
    padding: 8px 18px;
    margin-bottom: 24px;
}
.pi-lecture-hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); color: #fff; margin-bottom: 24px; line-height: 1.1; }
.pi-lecture-meta {
    font-family: var(--pi-corps);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.84);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pi-lecture-etoiles { margin-top: 22px; display: flex; justify-content: center; }
.pi-lecture-etoiles .kk-star-ratings { margin: 0 auto; }
.pi-lecture-corps { max-width: 820px; margin: 0 auto; padding: 60px 40px 32px; }
.pi-resume-ia { max-width: 720px; margin: 0 auto 10px; }
.pi-lecture-vignette { margin: 0 0 44px; }
.pi-lecture-vignette img { border-radius: 15px; width: 100%; max-height: 600px; object-fit: cover; }

.entry-content { font-size: 1.06rem; }
.entry-content h2 { font-size: 1.75rem; margin: 1.7em 0 0.7em; }
.entry-content h3 { font-size: 1.32rem; margin: 1.4em 0 0.6em; }
.entry-content p { margin-bottom: 1.3em; }
.entry-content a { color: var(--pi-or); text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: 8px; margin: 1.6em 0; }
.entry-content blockquote {
    border-left: 2px solid var(--pi-or);
    padding-left: 22px;
    margin: 1.6em 0;
    font-family: var(--pi-display);
    font-style: italic;
    font-size: 1.2rem;
    color: var(--pi-encre);
}

/* ── Bullets décoratifs entry-content (carré évidé — signature) ────────── */
.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: 1.5em; margin-bottom: 0.55em; }
.entry-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border: 1.5px solid var(--pi-or);
    background: transparent;
    border-radius: 0;
    flex-shrink: 0;
}
.entry-content ol li { margin-bottom: 0.55em; }

/* Étiquettes (tags) */
.pi-etiquettes { max-width: 820px; margin: 0 auto; padding: 0 40px 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.pi-etiquettes a {
    font-family: var(--pi-corps);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid var(--pi-ligne);
    padding: 7px 15px;
    color: var(--pi-encre-soft);
    transition: all 0.2s;
}
.pi-etiquettes a:hover { border-color: var(--pi-or); color: var(--pi-or); background: var(--pi-or-tint); }

/* Signature auteur */
.pi-signature { max-width: 820px; margin: 0 auto 76px; padding: 0 40px; }
.pi-signature-cadre { display: flex; gap: 28px; border: 1px solid var(--pi-encre); padding: 30px; background: var(--pi-surface); align-items: flex-start; position: relative; }
.pi-signature-cadre::after { content: ''; position: absolute; inset: 9px; border: 1px solid var(--pi-laiton); opacity: 0.4; pointer-events: none; }
.pi-signature-photo { flex-shrink: 0; width: 108px; height: 132px; overflow: hidden; border: 1px solid var(--pi-encre); position: relative; z-index: 1; }
.pi-signature-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pi-signature-corps { position: relative; z-index: 1; }
.pi-signature-nom { font-family: var(--pi-display); font-size: 1.4rem; }
.pi-signature-role { font-family: var(--pi-corps); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pi-or); margin: 5px 0 14px; }
.pi-signature-bio p { font-size: 0.95rem; color: var(--pi-encre-soft); margin-bottom: 0.6em; }

/* Articles similaires */
.pi-voisins { padding: 0 0 90px; }
.pi-voisins .pi-nef > h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); border-bottom: 1px solid var(--pi-encre); padding-bottom: 16px; margin-bottom: 44px; }

/* ── Pages (contact, mentions, plan) ───────────────────────────────────── */
.pi-page-corps { padding: 74px 0 90px; }
.pi-page-texte { max-width: 800px; margin: 0 auto; padding: 0 40px; }
.pi-page-texte h2 { font-size: 1.5rem; margin: 1.8em 0 0.7em; }
.pi-page-texte p { margin-bottom: 1.2em; color: var(--pi-encre-soft); }
.pi-page-texte a { color: var(--pi-or); text-decoration: underline; }

/* Contact */
.pi-contact-grille { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.pi-contact-intro h2 { font-size: 1.7rem; margin-bottom: 18px; }
.pi-contact-intro p { color: var(--pi-encre-soft); margin-bottom: 1.2em; }
.pi-contact-note { border: 1px solid var(--pi-encre); background: var(--pi-surface); padding: 24px 28px; margin-top: 30px; }
.pi-contact-note .pi-eyebrow { margin-bottom: 12px; }
.pi-contact-note p { font-size: 0.92rem; margin-bottom: 0; }
.pi-formulaire { border: 1px solid var(--pi-encre); background: var(--pi-surface); padding: 38px; position: relative; }
.pi-formulaire::after { content: ''; position: absolute; inset: 11px; border: 1px solid var(--pi-laiton); opacity: 0.35; pointer-events: none; }
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-family: var(--pi-corps);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pi-mine);
}
.wpcf7-form input, .wpcf7-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--pi-ligne);
    background: var(--pi-mat);
    font-family: var(--pi-corps);
    font-size: 0.98rem;
    color: var(--pi-creme);
    transition: border-color 0.2s;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--pi-or); }
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-submit {
    width: 100%;
    padding: 16px;
    background: var(--pi-encre);
    color: var(--pi-creme);
    border: 1px solid var(--pi-encre);
    font-family: var(--pi-corps);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.wpcf7-submit:hover { background: var(--pi-or-deep); border-color: var(--pi-or-deep); color: #fff; }

/* Plan du site */
.pi-plan-bloc { margin-bottom: 46px; }
.pi-plan-bloc h2 { font-size: 1.5rem; border-bottom: 1px solid var(--pi-encre); padding-bottom: 12px; margin-bottom: 20px; }
.pi-plan-bloc ul li { margin-bottom: 9px; padding-left: 1.5em; position: relative; }
.pi-plan-bloc ul li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border: 1.5px solid var(--pi-or); background: transparent; }
.pi-plan-bloc ul a { color: var(--pi-encre-soft); }
.pi-plan-bloc ul a:hover { color: var(--pi-or); }

/* ── Animations reveal ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .pi-anime { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
    .pi-anime.est-visible { opacity: 1; transform: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pi-accrochage-grille { grid-template-columns: 1fr; gap: 50px; }
    .pi-oeuvre { max-width: 540px; }
    .pi-grille { columns: 2; column-gap: 32px; }
    .pi-voisins .pi-grille { grid-template-columns: repeat(2, 1fr); }
    .pi-rubriques { gap: 20px; }
    .pi-edito-grille { grid-template-columns: 300px 1fr; gap: 48px; }
    .pi-encart-inner { grid-template-columns: 1fr; gap: 36px; }
    .pi-encart-image { order: -1; max-width: 560px; }
    .pi-contact-grille { grid-template-columns: 1fr; gap: 46px; }
    .pi-colophon-grille { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 860px) {
    .pi-burger { display: flex; }
    .pi-nav {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 400;
        background: var(--pi-nuit);
        padding: 28px 30px;
        display: none;
        flex-direction: column;
        overflow-y: auto;
    }
    .pi-nav.est-ouvert { display: flex; }
    .pi-nav .pi-griffe--mobile { display: flex; margin-bottom: 44px; }
    .pi-nav-fermer {
        display: flex;
        position: absolute;
        top: 24px; right: 26px;
        width: 44px; height: 44px;
        align-items: center;
        justify-content: center;
        background: none;
        border: 1px solid rgba(236,230,216,0.35);
        color: var(--pi-encre);
        cursor: pointer;
    }
    .pi-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .pi-nav li { border-bottom: 1px solid rgba(244,240,230,0.12); }
    .pi-nav a,
    .category .pi-nav a,
    .tag .pi-nav a,
    .single .pi-nav a {
        color: var(--pi-encre) !important;
        font-size: 1.05rem;
        letter-spacing: 0.12em;
        padding: 18px 0;
    }
    .pi-nav a::after { display: none; }
    .pi-nav a:hover, .single .pi-nav a:hover { color: #fff !important; }
    .pi-nav-contact a { border: none; padding: 18px 0; color: #fff !important; }
    .pi-edito-grille { grid-template-columns: 1fr; gap: 36px; }
    .pi-edito-portrait { max-width: 360px; }
    .pi-edito-bio { columns: 1; }
    /* cimaise → grille simple, sans rail ni cordons */
    .pi-rubriques { grid-template-columns: 1fr 1fr; gap: 42px 30px; padding-top: 30px; }
    .pi-rubriques::before { display: none; }
    .pi-rubriques .pi-plaque::before, .pi-rubriques .pi-plaque::after { display: none; }
    .pi-rubriques .pi-plaque:nth-child(even) { margin-top: 0; }
    .pi-voisins .pi-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    body { padding-top: 62px; }
    .pi-entree { height: 62px; }
    .pi-nef { padding: 0 24px; }
    .pi-accrochage { padding: 50px 0 56px; }
    .pi-accrochage::before { display: none; }
    .pi-jauges { gap: 30px; }
    .pi-jauge-num { font-size: 2rem; }
    .pi-section { padding: 60px 0; }
    .pi-grille { columns: 1; }
    .pi-voisins .pi-grille { grid-template-columns: 1fr; }
    .pi-rubriques { grid-template-columns: 1fr; }
    .pi-colophon-grille { grid-template-columns: 1fr; gap: 34px; text-align: center; }
    .pi-colophon-desc { margin-left: auto; margin-right: auto; }
    .pi-colophon-article { justify-content: center; text-align: left; }
    .pi-signature-cadre { flex-direction: column; align-items: center; text-align: center; }
    .pi-lecture-hero { min-height: 70vh; }
    .pi-lecture-corps, .pi-etiquettes, .pi-signature { padding-left: 24px; padding-right: 24px; }
    .pi-formulaire { padding: 26px; }
    .pi-tete { flex-direction: column; align-items: flex-start; gap: 8px; }
    .pi-tete-note { white-space: normal; }
}