@charset "UTF-8";
/*
Theme Name: Il était une histoire
Theme URI: https://iletait-unehistoire.fr
Author: Agence Netlinqueen
Description: Magazine beauté & art de vivre composé comme un recueil relié — frontispice, table des matières à folios romains, lettrines gravées, colophon. Encre sépia sur papier crème.
Version: 1.0.0
Text Domain: iletait-unehistoire
*/

/* ═══════════════════════════════════════════════════════════════
   Variables
   ═══════════════════════════════════════════════════════════════ */
:root {
    --iuh-papier:      #FAF8F3;   /* crème principal */
    --iuh-papier-2:    #F0ECE3;   /* crème plus profond, surfaces */
    --iuh-encre:       #22201B;   /* texte principal (brun-noir chaud) */
    --iuh-encre-2:     #48433B;   /* texte secondaire */
    --iuh-sepia:       #55483A;   /* accent : encre sépia d'imprimerie */
    --iuh-filet:       #D2CDC5;   /* filets d'un pixel */
    --iuh-filet-fort:  #B4AFA7;   /* filets plus marqués */

    --iuh-serif:  "Piazzolla", Georgia, "Times New Roman", serif;
    --iuh-caps:   "Archivo", "Helvetica Neue", Arial, sans-serif;

    --iuh-cadre:   1140px;   /* laize de page */
    --iuh-mesure:  40rem;    /* colonne de lecture serrée (~640px) */
    --iuh-marge:   2rem;
}

/* ═══════════════════════════════════════════════════════════════
   Reset
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--iuh-papier);
    color: var(--iuh-encre);
    font-family: var(--iuh-serif);
    font-size: 18px;
    line-height: 1.72;
    font-feature-settings: "kern", "liga", "onum";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--iuh-sepia); text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--iuh-serif); font-weight: 600; line-height: 1.14; margin: 0; color: var(--iuh-encre); letter-spacing: -0.01em; }
p { margin: 0 0 1.2em; }

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

.iuh-saut {
    position: absolute; left: -9999px; top: 0;
    background: var(--iuh-encre); color: var(--iuh-papier);
    padding: .6em 1em; z-index: 200;
    font-family: var(--iuh-caps); font-size: .8rem;
}
.iuh-saut:focus { left: 1rem; top: 1rem; }

/* Petites capitales de chrome (surtitres, folios, têtes de page) */
.iuh-surtitre {
    display: inline-block;
    font-family: var(--iuh-caps);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--iuh-sepia);
    margin-bottom: 1.1rem;
}

/* La lettrine gravée : initiale agrandie en Piazzolla italique sépia. */
.iuh-lettrine {
    font-family: var(--iuh-serif);
    font-style: italic;
    font-weight: 600;
    color: var(--iuh-sepia);
    font-size: 1.32em;
    line-height: 1;
}

/* ═══════════════════════════════════════════════════════════════
   Boutons
   ═══════════════════════════════════════════════════════════════ */
.iuh-bouton {
    display: inline-block;
    font-family: var(--iuh-caps);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--iuh-papier);
    background: var(--iuh-encre);
    padding: .95em 1.9em;
    border: 1px solid var(--iuh-encre);
    transition: background .25s ease, color .25s ease;
}
.iuh-bouton:hover { background: transparent; color: var(--iuh-encre); }
.iuh-bouton--ligne {
    color: var(--iuh-encre);
    background: transparent;
    border-color: var(--iuh-sepia);
}
.iuh-bouton--ligne:hover { background: var(--iuh-sepia); color: var(--iuh-papier); border-color: var(--iuh-sepia); }

.iuh-lien-fleche {
    font-family: var(--iuh-caps);
    font-size: .76rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--iuh-sepia);
    border-bottom: 1px solid var(--iuh-filet-fort);
    padding-bottom: .2em;
    transition: border-color .25s ease;
}
.iuh-lien-fleche::after { content: " →"; }
.iuh-lien-fleche:hover { border-color: var(--iuh-sepia); }

/* ═══════════════════════════════════════════════════════════════
   Barre / navigation
   ═══════════════════════════════════════════════════════════════ */
.iuh-barre {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    transition: background .3s ease, border-color .3s ease;
    border-bottom: 1px solid transparent;
}
.iuh-barre--posee {
    background: color-mix(in srgb, var(--iuh-papier) 92%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom-color: var(--iuh-filet);
}
.iuh-barre-int {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.iuh-marque { display: inline-flex; }
.iuh-marque svg { display: block; height: 40px; width: auto; }

.iuh-nav { display: flex; align-items: center; gap: 2rem; }
.iuh-nav-liens { display: flex; align-items: center; gap: 1.7rem; }
.iuh-nav-liens a {
    font-family: var(--iuh-caps);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--iuh-encre);
    position: relative;
    padding-bottom: .25em;
}
.iuh-nav-liens a::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 0; height: 1px; background: var(--iuh-sepia);
    transition: width .28s ease;
}
.iuh-nav-liens a:hover::after { width: 100%; }
.iuh-nav-contact {
    font-family: var(--iuh-caps);
    font-size: .78rem; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--iuh-encre);
    border: 1px solid var(--iuh-filet-fort);
    padding: .55em 1.2em;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.iuh-nav-contact:hover { background: var(--iuh-encre); color: var(--iuh-papier); border-color: var(--iuh-encre); }

.iuh-burger { display: none; background: none; border: 0; color: var(--iuh-encre); cursor: pointer; padding: .3rem; }
/* Éléments propres au menu mobile — masqués sur desktop */
.iuh-nav-logo { display: none; }
.iuh-nav-close { display: none; }

/* ═══════════════════════════════════════════════════════════════
   Frontispice (hero home)
   ═══════════════════════════════════════════════════════════════ */
.iuh-frontispice {
    position: relative;
    padding: 12rem var(--iuh-marge) 5rem;
    background-color: var(--iuh-papier);
    background-image:
        linear-gradient(rgba(250,248,243,.74), rgba(240,236,227,.84)),
        var(--iuh-front-img, none);
    background-size: cover;
    background-position: center;
}
.iuh-frontispice-cadre {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid var(--iuh-sepia);
    padding: 4rem 3.4rem 3.2rem;
    text-align: center;
}
.iuh-frontispice-cadre::before {
    content: ""; position: absolute; inset: 7px;
    border: 1px solid var(--iuh-filet-fort);
    pointer-events: none;
}
.iuh-frontispice-titre { animation: iuh-lever .9s ease both; }
@keyframes iuh-lever { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.iuh-titre {
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 600;
    line-height: 1.16;
    margin: 0 auto 1.4rem;
    max-width: 18ch;
}
.iuh-titre em { font-style: italic; color: var(--iuh-sepia); font-weight: 500; }
.iuh-deck {
    font-size: 1.06rem;
    line-height: 1.7;
    color: var(--iuh-encre-2);
    max-width: 46ch;
    margin: 0 auto 2rem;
}

.iuh-releves {
    display: flex; justify-content: center; flex-wrap: wrap;
    gap: 2.6rem;
    margin: 3rem auto 0;
    padding-top: 1.8rem;
    border-top: 1px solid var(--iuh-filet);
    max-width: 620px;
}
.iuh-releve { text-align: center; }
.iuh-releve-n {
    display: block;
    font-family: var(--iuh-serif);
    font-size: 2rem; font-weight: 600; font-style: italic;
    color: var(--iuh-sepia); line-height: 1;
}
.iuh-releve-l {
    display: block;
    font-family: var(--iuh-caps);
    font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--iuh-encre-2); margin-top: .5rem;
}

/* ═══════════════════════════════════════════════════════════════
   Sections & têtes
   ═══════════════════════════════════════════════════════════════ */
.iuh-section { padding: 5rem 0; }
.iuh-section--serree { padding-top: 1rem; }
.iuh-section--rubriques { padding-top: 1rem; }
.iuh-section--redactrice { background: var(--iuh-papier-2); }

.iuh-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--iuh-filet-fort);
    padding-bottom: 1.1rem; margin-bottom: 2.6rem;
}
.iuh-tete h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.iuh-tete-note {
    font-family: var(--iuh-caps);
    font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--iuh-sepia);
}

/* ── La « une » ─────────────────────────────────────────────── */
.iuh-une {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 3rem;
    align-items: center;
    padding-bottom: 3rem; margin-bottom: 2.4rem;
    border-bottom: 1px solid var(--iuh-filet);
}
.iuh-une-vue img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.iuh-une-vue .iuh-vue { border: 1px solid var(--iuh-filet-fort); padding: 8px; background: var(--iuh-papier); }
.iuh-une-titre { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: .5rem 0 1rem; }
.iuh-une-titre a { color: var(--iuh-encre); }
.iuh-une-titre a:hover { color: var(--iuh-sepia); }
.iuh-une-res { color: var(--iuh-encre-2); margin-bottom: 1.4rem; }

.iuh-meta {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    font-family: var(--iuh-caps);
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--iuh-encre-2);
}
.iuh-meta-cat { color: var(--iuh-sepia); font-weight: 600; }
.iuh-meta-pt { color: var(--iuh-filet-fort); }

/* ── Table des matières ─────────────────────────────────────── */
.iuh-toc { list-style: none; margin: 0; padding: 0; }
.iuh-toc-ligne {
    display: flex; align-items: baseline; gap: .3rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--iuh-filet);
}
.iuh-toc-folio {
    /* Le folio est la signature de la table des matières : en petites capitales
       sans empattement, un « I » se réduit à un trait et ne se lit plus. Même
       traitement que les folios de chapitre et de rubrique : serif italique. */
    font-family: var(--iuh-serif); font-style: italic;
    font-size: 1.15rem; letter-spacing: .02em;
    color: var(--iuh-sepia);
    min-width: 3.2rem;
    flex-shrink: 0;
}
.iuh-toc-titre {
    font-family: var(--iuh-serif);
    font-size: 1.18rem; font-weight: 500;
    color: var(--iuh-encre);
    flex-shrink: 1;
}
.iuh-toc-titre:hover { color: var(--iuh-sepia); }
.iuh-toc-points {
    flex: 1 1 auto;
    border-bottom: 1px dotted var(--iuh-filet-fort);
    transform: translateY(-.3em);
    margin: 0 .3rem;
    min-width: 1.5rem;
}
.iuh-toc-rubrique {
    font-family: var(--iuh-caps);
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--iuh-encre-2);
    flex-shrink: 0;
}

/* ── Sommaire (état vide) ───────────────────────────────────── */
.iuh-sommaire-intro { max-width: var(--iuh-mesure); margin-bottom: 2.4rem; color: var(--iuh-encre-2); }
.iuh-sommaire { list-style: none; margin: 0; padding: 0; }
.iuh-chapitre {
    display: flex; gap: 1.6rem; align-items: baseline;
    padding: 1.5rem 0; border-bottom: 1px solid var(--iuh-filet);
}
.iuh-chapitre-folio {
    font-family: var(--iuh-serif); font-style: italic;
    font-size: 1.5rem; color: var(--iuh-sepia);
    min-width: 3rem; flex-shrink: 0;
}
.iuh-chapitre-corps h3 { font-size: 1.3rem; margin-bottom: .4rem; }
.iuh-chapitre-corps p { color: var(--iuh-encre-2); margin: 0; }

/* ── Persona ────────────────────────────────────────────────── */
.iuh-portrait {
    display: grid; grid-template-columns: 380px 1fr; gap: 3.5rem;
    align-items: center;
}
.iuh-portrait-photo { border: 1px solid var(--iuh-filet-fort); padding: 10px; background: var(--iuh-papier); }
.iuh-portrait-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; width: 100%; }
.iuh-portrait-corps h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.iuh-portrait-role {
    font-family: var(--iuh-caps);
    font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--iuh-sepia); margin: .5rem 0 1.4rem;
}
.iuh-portrait-bio { color: var(--iuh-encre-2); }
.iuh-portrait-bio p { margin-bottom: 1em; }
.iuh-portrait-bio ul { margin: 1em 0 1.2em; }
.iuh-portrait-bio li { position: relative; padding-left: 1.5em; margin-bottom: .5em; }
.iuh-portrait-bio li::before { content: "✱"; position: absolute; left: 0; top: 0; color: var(--iuh-sepia); font-size: .82em; }
.iuh-portrait-bio strong { color: var(--iuh-encre); font-weight: 600; }
.iuh-portrait-corps .iuh-bouton, .iuh-portrait-corps .iuh-bouton--ligne { margin-top: .8rem; }

/* ── Rubriques ──────────────────────────────────────────────── */
.iuh-rubriques { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem; }
.iuh-rubrique { display: block; border: 1px solid var(--iuh-filet); background: var(--iuh-papier); transition: border-color .3s ease; }
.iuh-rubrique:hover { border-color: var(--iuh-sepia); }
.iuh-rubrique-vue { position: relative; overflow: hidden; }
.iuh-rubrique-vue img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; transition: transform .6s ease; }
.iuh-rubrique:hover .iuh-rubrique-vue img { transform: scale(1.04); }
.iuh-rubrique-folio {
    position: absolute; top: 1rem; left: 1rem;
    font-family: var(--iuh-serif); font-style: italic;
    font-size: 1.4rem; color: var(--iuh-papier);
    background: var(--iuh-sepia);
    width: 2.4rem; height: 2.4rem;
    display: flex; align-items: center; justify-content: center;
}
.iuh-rubrique-corps { padding: 1.7rem 1.8rem 2rem; }
.iuh-rubrique-nom { display: block; font-family: var(--iuh-serif); font-size: 1.55rem; font-weight: 600; color: var(--iuh-encre); }
.iuh-rubrique:hover .iuh-rubrique-nom { color: var(--iuh-sepia); }
.iuh-rubrique-desc { color: var(--iuh-encre-2); font-size: .96rem; margin: .7rem 0 1.1rem; }
.iuh-rubrique-compte {
    font-family: var(--iuh-caps);
    font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--iuh-sepia);
}

/* ═══════════════════════════════════════════════════════════════
   Coiffe (single / archive / pages)
   ═══════════════════════════════════════════════════════════════ */
.iuh-coiffe {
    padding: 11rem var(--iuh-marge) 4rem;
    background-color: var(--iuh-papier-2);
    background-image:
        linear-gradient(rgba(250,248,243,.72), rgba(240,236,227,.82)),
        var(--iuh-front-img, none);
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--iuh-filet);
}
.iuh-coiffe-cadre { max-width: 780px; margin: 0 auto; }
.iuh-coiffe--centre .iuh-coiffe-cadre { text-align: center; }
.iuh-coiffe--centre .iuh-fil { justify-content: center; }
.iuh-coiffe h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); margin: .6rem 0; }
.iuh-coiffe-meta {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
    font-family: var(--iuh-caps); font-size: .74rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--iuh-encre-2);
    margin-top: 1rem;
}
.iuh-coiffe--centre .iuh-coiffe-meta { justify-content: center; }
.iuh-coiffe-desc { color: var(--iuh-encre-2); font-size: 1.04rem; max-width: 52ch; margin-top: .8rem; }
.iuh-coiffe--centre .iuh-coiffe-desc { margin-left: auto; margin-right: auto; }
.iuh-coiffe-notes { margin-top: 1.2rem; }

.iuh-fil {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-family: var(--iuh-caps);
    font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--iuh-encre-2); margin-bottom: 1rem;
}
.iuh-fil a { color: var(--iuh-sepia); }
.iuh-fil-sep { color: var(--iuh-filet-fort); }
.iuh-fil-courant { color: var(--iuh-encre-2); }

/* ═══════════════════════════════════════════════════════════════
   Article
   ═══════════════════════════════════════════════════════════════ */
.iuh-article { padding: 4rem 0 5rem; }
/* Colonne de lecture centrée : tous les blocs partagent la même mesure. */
.iuh-rang > * {
    max-width: var(--iuh-mesure);
    margin-inline: auto;
}
.iuh-plaque { max-width: 820px; margin: 0 auto 2.6rem; border: 1px solid var(--iuh-filet-fort); padding: 10px; background: var(--iuh-papier); }
.iuh-plaque img { width: 100%; max-height: 560px; object-fit: cover; }
.iuh-plaque figcaption {
    font-family: var(--iuh-serif); font-style: italic;
    font-size: .9rem; color: var(--iuh-encre-2);
    text-align: center; margin-top: .8rem;
}
.iuh-resume {
    background: var(--iuh-papier-2);
    border-left: 2px solid var(--iuh-sepia);
    padding: 1.4rem 1.6rem; margin-bottom: 2.4rem;
    font-size: .98rem; color: var(--iuh-encre-2);
}

/* Corps de l'article */
.entry-content { font-size: 1.06rem; }
.entry-content p { margin: 0 0 1.35em; }
.entry-content > p:first-of-type::first-letter {
    font-family: var(--iuh-serif); font-style: italic; font-weight: 600;
    color: var(--iuh-sepia);
    float: left; font-size: 3.6em; line-height: .72;
    padding: .06em .1em 0 0; margin-right: .04em;
}
.entry-content h2 { font-size: 1.6rem; margin: 2em 0 .7em; }
.entry-content h3 { font-size: 1.3rem; margin: 1.6em 0 .6em; }
.entry-content h2 + p, .entry-content h3 + p { margin-top: 0; }
.entry-content a { color: var(--iuh-sepia); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.entry-content a:hover { text-decoration-thickness: 2px; }
.entry-content img { margin: 1.8em auto; border: 1px solid var(--iuh-filet-fort); padding: 8px; background: var(--iuh-papier); }
.entry-content blockquote {
    margin: 1.8em 0; padding: .4em 0 .4em 1.6rem;
    border-left: 2px solid var(--iuh-sepia);
    font-style: italic; color: var(--iuh-encre-2);
}
.entry-content strong { font-weight: 600; }

/* ── Bullets décoratifs (règle universelle — astérisque de note) ── */
.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.6em; margin-bottom: .55em; }
.entry-content ul li::before {
    content: "✱";
    position: absolute; left: 0; top: .06em;
    color: var(--iuh-sepia);
    font-size: .82em; line-height: 1.5;
}
.entry-content ol li { margin-bottom: .55em; }

/* Étiquettes */
.iuh-etiquettes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.6rem; }
.iuh-etiquettes a {
    font-family: var(--iuh-caps); font-size: .72rem; letter-spacing: .08em;
    color: var(--iuh-encre-2); border: 1px solid var(--iuh-filet-fort);
    padding: .4em .9em; transition: border-color .25s ease, color .25s ease;
}
.iuh-etiquettes a:hover { border-color: var(--iuh-sepia); color: var(--iuh-sepia); }

/* Bloc auteur */
.iuh-auteur {
    display: grid; grid-template-columns: 140px 1fr; gap: 2rem;
    align-items: start;
    margin-top: 3rem; padding-top: 2.4rem;
    border-top: 1px solid var(--iuh-filet-fort);
}
.iuh-auteur-photo { border: 1px solid var(--iuh-filet-fort); padding: 6px; background: var(--iuh-papier); }
.iuh-auteur-photo img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; width: 100%; }
.iuh-auteur-corps h2 { font-size: 1.5rem; margin: .3rem 0 0; }
.iuh-auteur-role { font-family: var(--iuh-caps); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--iuh-sepia); margin: .4rem 0 1rem; }
.iuh-auteur-bio { color: var(--iuh-encre-2); font-size: .98rem; }
.iuh-auteur-bio p { margin: 0; }

/* Articles similaires */
.iuh-voisins { max-width: var(--iuh-cadre); margin: 4rem auto 0; padding-top: 3rem; border-top: 1px solid var(--iuh-filet); }
.iuh-voisins-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.iuh-voisin-vue img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.iuh-voisin-vue .iuh-vue { border: 1px solid var(--iuh-filet-fort); padding: 6px; background: var(--iuh-papier); margin-bottom: 1rem; }
.iuh-voisin h3 { font-size: 1.15rem; }
.iuh-voisin h3 a { color: var(--iuh-encre); }
.iuh-voisin h3 a:hover { color: var(--iuh-sepia); }

/* ═══════════════════════════════════════════════════════════════
   Grille d'archive
   ═══════════════════════════════════════════════════════════════ */
.iuh-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2.2rem; }
.iuh-carte-vue img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.iuh-carte-vue .iuh-vue { border: 1px solid var(--iuh-filet-fort); padding: 7px; background: var(--iuh-papier); margin-bottom: 1.1rem; }
.iuh-carte .iuh-meta { margin-bottom: .6rem; }
.iuh-carte-titre { font-size: 1.3rem; margin-bottom: .6rem; }
.iuh-carte-titre a { color: var(--iuh-encre); }
.iuh-carte-titre a:hover { color: var(--iuh-sepia); }
.iuh-carte-res { color: var(--iuh-encre-2); font-size: .95rem; margin: 0; }

/* État vide */
.iuh-vide { max-width: var(--iuh-mesure); margin: 2rem auto; text-align: center; }
.iuh-vide h2, .iuh-vide h3 { font-size: 1.7rem; margin-bottom: 1rem; }
.iuh-vide p { color: var(--iuh-encre-2); margin-bottom: 1.8rem; }

/* ═══════════════════════════════════════════════════════════════
   Bloc éditorial (SEO archive)
   ═══════════════════════════════════════════════════════════════ */
.iuh-edito { padding: 4rem 0 5rem; border-top: 1px solid var(--iuh-filet); }
.iuh-edito-titre { font-size: clamp(1.6rem, 2.8vw, 2.1rem); max-width: var(--iuh-cadre); margin: 0 auto 2rem; }
.iuh-edito-grille { display: grid; grid-template-columns: 1fr 440px; gap: 3rem; align-items: center; }
.iuh-edito-texte p { color: var(--iuh-encre-2); }
.iuh-edito-liste { list-style: none; margin: 1.4em 0; padding: 0; }
.iuh-edito-liste li { position: relative; padding-left: 1.8em; margin-bottom: .7em; color: var(--iuh-encre); }
.iuh-edito-liste li::before {
    content: "→"; position: absolute; left: 0; top: 0;
    font-family: var(--iuh-caps); color: var(--iuh-sepia);
}
.iuh-edito-vue img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.iuh-edito-vue .iuh-vue { border: 1px solid var(--iuh-filet-fort); padding: 9px; background: var(--iuh-papier); }

/* ═══════════════════════════════════════════════════════════════
   Pages statiques
   ═══════════════════════════════════════════════════════════════ */
.iuh-page { padding: 4rem 0 5rem; }
.iuh-page-corps { max-width: var(--iuh-mesure); margin: 0 auto; }
.iuh-page-corps h2 { font-size: 1.5rem; margin: 2em 0 .7em; }
.iuh-page-corps h2:first-child { margin-top: 0; }
.iuh-page-corps p { color: var(--iuh-encre-2); }
.iuh-page-corps a { text-decoration: underline; text-underline-offset: 2px; }
.iuh-legal a { color: var(--iuh-sepia); }

/* Plan du site */
.iuh-plan-groupe { margin-bottom: 2.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--iuh-filet); }
.iuh-plan-groupe h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.iuh-plan-groupe h2 a { color: var(--iuh-encre); }
.iuh-plan-groupe h2 a:hover { color: var(--iuh-sepia); }
.iuh-plan-groupe ul { display: grid; gap: .55rem; }
.iuh-plan-groupe li { position: relative; padding-left: 1.4em; }
.iuh-plan-groupe li::before { content: "✱"; position: absolute; left: 0; top: 0; color: var(--iuh-sepia); font-size: .78em; }
.iuh-plan-groupe li a { color: var(--iuh-encre-2); }
.iuh-plan-groupe li a:hover { color: var(--iuh-sepia); }

/* Contact */
.iuh-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: start; }
.iuh-contact-mot p { color: var(--iuh-encre-2); font-size: 1.04rem; }
.iuh-contact-mot p:first-child::first-letter {
    font-family: var(--iuh-serif); font-style: italic; font-weight: 600;
    color: var(--iuh-sepia);
    float: left; font-size: 3.2em; line-height: .72; padding: .06em .1em 0 0; margin-right: .04em;
}
.iuh-contact-form .wpcf7-form p { display: flex; flex-direction: column; margin: 0 0 1.2rem; }
.iuh-contact-form label { font-family: var(--iuh-caps); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--iuh-sepia); margin-bottom: .4rem; }
.iuh-contact-form .wpcf7-form br { display: none; }
.iuh-contact-form input[type="text"],
.iuh-contact-form input[type="email"],
.iuh-contact-form textarea {
    font-family: var(--iuh-serif); font-size: 1rem;
    background: var(--iuh-papier);
    border: 1px solid var(--iuh-filet-fort);
    padding: .8em .9em; color: var(--iuh-encre);
    width: 100%;
}
.iuh-contact-form textarea { min-height: 150px; resize: vertical; }
.iuh-contact-form input:focus, .iuh-contact-form textarea:focus { outline: none; border-color: var(--iuh-sepia); }
.iuh-contact-form input[type="submit"] {
    font-family: var(--iuh-caps); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
    background: var(--iuh-encre); color: var(--iuh-papier);
    border: 1px solid var(--iuh-encre); padding: .95em 1.9em; width: 100%; cursor: pointer;
    transition: background .25s ease, color .25s ease;
}
.iuh-contact-form input[type="submit"]:hover { background: transparent; color: var(--iuh-encre); }

/* ═══════════════════════════════════════════════════════════════
   Colophon (footer)
   ═══════════════════════════════════════════════════════════════ */
.iuh-pied { background: var(--iuh-encre); color: #CFC7B8; padding: 4rem 0 2.4rem; }
.iuh-colophon-tete { height: 1px; background: rgba(207,199,184,.28); margin-bottom: 3rem; }
.iuh-pied-grille { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2.6rem; }
.iuh-pied .iuh-marque svg { height: 40px; }
.iuh-pied-desc { font-size: .92rem; color: #A79E8E; margin-top: 1rem; max-width: 32ch; }
.iuh-pied-titre { font-family: var(--iuh-caps); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: #C9B79C; margin-bottom: 1.1rem; }
.iuh-pied ul { display: grid; gap: .6rem; }
.iuh-pied-grille li { position: relative; padding-left: 1.3em; }
.iuh-pied-grille li::before { content: "✱"; position: absolute; left: 0; top: 0; color: #6E6252; font-size: .72em; }
.iuh-pied-grille a { color: #CFC7B8; font-size: .92rem; transition: color .25s ease; }
.iuh-pied-grille a:hover { color: #F4F0E7; }
.iuh-pied-bas {
    margin-top: 3rem; padding-top: 1.6rem;
    border-top: 1px solid rgba(207,199,184,.2);
    font-family: var(--iuh-caps); font-size: .72rem; letter-spacing: .1em;
    color: #8A8172;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .iuh-une { grid-template-columns: 1fr; gap: 2rem; }
    .iuh-portrait { grid-template-columns: 1fr; gap: 2.4rem; }
    .iuh-portrait-photo { max-width: 340px; }
    .iuh-edito-grille { grid-template-columns: 1fr; gap: 2rem; }
    .iuh-edito-vue { order: -1; max-width: 440px; }
    .iuh-contact { grid-template-columns: 1fr; gap: 2.4rem; }
    .iuh-pied-grille { grid-template-columns: 1fr 1fr; gap: 2.2rem; }
    .iuh-voisins-grille { grid-template-columns: 1fr 1fr; }
    .iuh-grille { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    body { font-size: 17px; }
    .iuh-burger { display: block; }
    .iuh-nav {
        position: fixed; inset: 0;
        flex-direction: column; align-items: flex-start; justify-content: center;
        gap: 1.4rem;
        background: var(--iuh-papier);
        padding: 2rem var(--iuh-marge);
        transform: translateX(100%); transition: transform .34s ease;
        z-index: 150;
    }
    body.iuh-menu-ouvert .iuh-nav { transform: none; }

    /* Le menu est un enfant du header : son z-index est plafonné par le
       contexte d'empilement de celui-ci (`.iuh-barre`, fixed z-index 100).
       Quoi qu'on écrive sur `.iuh-nav`, le panneau ne peut pas passer au-dessus
       d'un élément de page à z-index supérieur à 100. C'est donc la BARRE qu'il
       faut élever tant que le menu est ouvert. */
    body.iuh-menu-ouvert .iuh-barre { z-index: 400; }

    /* Verrou de défilement : `overflow: hidden` est ignoré par iOS. Le body est
       figé en position fixe à son offset courant (posé par theme.js), et la
       largeur est forcée pour éviter le saut de la barre de défilement. */
    body.iuh-menu-ouvert {
        position: fixed;
        left: 0; right: 0; width: 100%;
        overflow: hidden;
    }
    .iuh-nav-liens { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
    .iuh-nav-liens a { font-size: 1.1rem; }
    .iuh-nav-logo { display: block; margin-bottom: 1rem; }
    .iuh-nav-logo svg { height: 42px; }
    .iuh-nav-close { display: block; position: absolute; top: 1.6rem; right: var(--iuh-marge); background: none; border: 0; color: var(--iuh-encre); cursor: pointer; }
    .iuh-nav-contact { align-self: flex-start; margin-top: .6rem; }

    .iuh-frontispice { padding: 8rem 1.2rem 3.5rem; }
    .iuh-frontispice-cadre { padding: 2.6rem 1.4rem 2.2rem; }
    .iuh-releves { gap: 1.6rem; }
    .iuh-releve-n { font-size: 1.6rem; }

    .iuh-coiffe { padding: 8rem var(--iuh-marge) 3rem; }
    .iuh-section { padding: 3.4rem 0; }
    .iuh-tete { margin-bottom: 1.8rem; }

    .iuh-rubriques { grid-template-columns: 1fr; gap: 1.8rem; }
    .iuh-grille { grid-template-columns: 1fr; }
    .iuh-voisins-grille { grid-template-columns: 1fr; gap: 1.8rem; }
    .iuh-auteur { grid-template-columns: 1fr; gap: 1.2rem; }
    .iuh-auteur-photo { max-width: 120px; }

    .iuh-toc-ligne { flex-wrap: wrap; }
    .iuh-toc-points { display: none; }
    .iuh-toc-rubrique { width: 100%; margin-top: .3rem; padding-left: 3.2rem; }

    .iuh-pied-grille { grid-template-columns: 1fr; gap: 2rem; text-align: left; }
}

/* ── Navigation au clavier ───────────────────────────────────
   Le filet d'encadrement du frontispice sert aussi d'anneau de focus :
   même vocabulaire graphique, et l'élément actif se voit sans souris. */
:focus-visible {
    outline: 2px solid var(--iuh-sepia);
    outline-offset: 3px;
}
.iuh-nav-liens a:focus-visible,
.iuh-toc-ligne:focus-visible { outline-offset: 5px; }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .iuh-frontispice-titre { animation: none; opacity: 1; transform: none; }
}