@charset "UTF-8";
/*
Theme Name: Focus Quotidien
Theme URI: https://focusquotidien.fr
Author: Agence Netlinqueen
Description: Programme d'identité de magazine — noir, blanc, une couleur éditoriale par rubrique, une marque abstraite récurrente, compositions découpées dessinées en SVG.
Version: 2.0.0
Text Domain: focusquotidien
*/

/* ══ 1. Système ═══════════════════════════════════════════════════ */
:root {
    --fq-blanc:  #FFFFFF;
    --fq-encre:  #14110F;
    --fq-encre2: #0C0A09;
    --fq-doux:   #55504A;   /* 7,4:1 sur blanc */
    --fq-mute:   #6E6862;   /* 5,3:1 sur blanc */
    --fq-filet:  #E3DFD9;
    --fq-filet2: #C9C3BB;
    --fq-voile:  #F6F4F1;

    --fq-spot:   #14110F;   /* réassignée par rubrique */

    --fq-display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
    --fq-texte:   'Chivo', system-ui, -apple-system, sans-serif;

    --fq-max:  1320px;
    --fq-pad:  clamp(20px, 4vw, 56px);
    --fq-hh:   72px;

    --fq-sortie: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fq-blanc);
    color: var(--fq-encre);
    font-family: var(--fq-texte);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.62;
    overflow-x: hidden;
    padding-top: var(--fq-hh);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
figure { margin: 0; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--fq-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

:focus-visible {
    outline: 2px solid var(--fq-encre);
    outline-offset: 3px;
}
.fq-sombre :focus-visible { outline-color: var(--fq-blanc); }

.fq-saut {
    position: absolute; left: -9999px; top: 0; z-index: 300;
    background: var(--fq-encre); color: var(--fq-blanc);
    padding: 12px 18px; font-size: .8rem;
}
.fq-saut:focus { left: 10px; top: 10px; }

.fq-cadre {
    width: 100%;
    max-width: var(--fq-max);
    margin: 0 auto;
    padding: 0 var(--fq-pad);
}
/* Mesure de lecture : 66 caractères, pas la largeur du conteneur. */
.fq-mesure { max-width: 68ch; }

/* ══ 2. La marque ═════════════════════════════════════════════════ */
.fq-marque { display: block; width: auto; height: 1em; }

/* ══ 2 bis. Bichromie ═════════════════════════════════════════════
   Deux encres par surface, jamais plus : la photo est désaturée, puis
   l'encre est posée en `multiply` pour tenir les noirs, et la couleur de
   la rubrique en `screen` pour relever les clairs. Le résultat n'est ni
   un filtre de teinte ni un voile posé dessus : les deux extrémités de
   la gamme sont reconstruites. */
.fq-duo {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--fq-encre);
    isolation: isolate;
    width: 100%; height: 100%;
}
.fq-duo img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.12);
}
.fq-duo-encre,
.fq-duo-teinte {
    position: absolute; inset: 0; pointer-events: none;
}
/* `color` prend la teinte de la couche et la luminosité de l'image : un seul
   encrage, quelle que soit la photo. Deux couches d'encre superposées
   (multiply + screen) tombaient à plat dès que la couleur de rubrique était
   sombre — sur l'accueil, où la teinte vaut l'encre, la photo sortait bouchée.
   Ici l'accueil devient simplement un noir et blanc : la couleur n'apparaît
   qu'en entrant dans une rubrique, ce qui est la promesse du site. */
.fq-duo-teinte { background: var(--fq-spot); mix-blend-mode: color; }
.fq-duo-encre  { background: var(--fq-encre); mix-blend-mode: multiply; opacity: .16; }

/* Repli sans mix-blend-mode : la photo reste en niveaux de gris, ce qui
   tient la discipline à deux encres au lieu de rendre la couleur crue. */
@supports not (mix-blend-mode: multiply) {
    .fq-duo-encre, .fq-duo-teinte { display: none; }
}

/* ══ 3. Libellés et liens ═════════════════════════════════════════ */
.fq-etiq {
    font-family: var(--fq-texte);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fq-spot);
}

/* Action principale : bloc plein, capitales espacées, la marque estampée à
   droite. C'est l'élément que le programme imprime en pleine matière. */
.fq-bouton {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 15px 20px 15px 24px;
    background: var(--fq-spot);
    color: var(--fq-blanc);
    font-size: .78rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid var(--fq-spot);
    transition: background .28s var(--fq-sortie), color .28s var(--fq-sortie);
}
.fq-bouton-marque { height: 20px; flex: none; }
.fq-bouton-marque path { transition: fill .28s var(--fq-sortie); }
.fq-bouton:hover { background: var(--fq-blanc); color: var(--fq-spot); }
.fq-bouton:hover .fq-bouton-marque path { fill: var(--fq-spot); }

/* Action secondaire : le lien de parcours. */
.fq-lien {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: .92rem;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--fq-encre);
    transition: gap .3s var(--fq-sortie), border-color .3s var(--fq-sortie);
}
.fq-lien .fq-ico { width: 20px; height: 16px; }
.fq-lien:hover { gap: 16px; border-bottom-color: var(--fq-spot); }
.fq-lien--clair { border-bottom-color: var(--fq-blanc); }

/* ══ 4. En-tête ═══════════════════════════════════════════════════ */
.fq-entete {
    position: fixed; inset: 0 0 auto 0; z-index: 120;
    height: var(--fq-hh);
    background: var(--fq-blanc);
    border-bottom: 1px solid var(--fq-filet);
}
.fq-entete-in {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.fq-logo-lockup { display: inline-flex; align-items: baseline; gap: 11px; color: var(--fq-encre); }
.fq-logo-marque { height: 24px; align-self: center; }
.fq-logo-mot {
    font-family: var(--fq-display);
    font-size: 1.62rem;
    line-height: 1;
    letter-spacing: -0.015em;
    white-space: nowrap;
}

.fq-nav { display: flex; align-items: center; gap: 26px; }
.fq-nav-liens { display: flex; align-items: center; gap: 22px; }
.fq-nav-liens a {
    position: relative;
    font-size: .82rem; font-weight: 400;
    color: var(--fq-doux);
    padding: 4px 0;
    transition: color .25s var(--fq-sortie);
}
.fq-nav-liens a::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--fq-spot, var(--fq-encre));
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--fq-sortie);
}
.fq-nav-liens a:hover { color: var(--fq-encre); }
.fq-nav-liens a:hover::after { transform: scaleX(1); }
/* Rubrique courante : le filet reste, c'est la promesse « on suit sa couleur
   de page en page ». Un état au survol seul ne la tient pas. */
.fq-nav-liens .fq-actuel { color: var(--fq-encre); font-weight: 600; }
.fq-nav-liens .fq-actuel::after { transform: scaleX(1); }
.fq-nav-contact {
    font-size: .82rem; font-weight: 600;
    border-bottom: 2px solid var(--fq-encre);
    padding-bottom: 2px;
}

/* réservés au mobile */
.fq-nav-fermer, .fq-nav-logo, .fq-burger { display: none; }

/* ══ 5. Ouverture ═════════════════════════════════════════════════
   Pas de bandeau à statistiques : le programme s'annonce par son titre
   et par une composition qui déborde jusqu'au bord droit. */
.fq-ouverture {
    border-bottom: 1px solid var(--fq-encre);
}
/* Le volet droit va jusqu'au bord du viewport. On ne l'obtient pas par une
   marge négative en vw : elle déborde le document et fabrique une barre de
   défilement horizontale. La grille occupe toute la largeur, et c'est le
   volet gauche qui reprend l'alignement du conteneur par son padding. */
.fq-ouverture-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
    align-items: stretch;
    min-height: min(78vh, 720px);
    max-width: none;
    padding: 0;
}
.fq-ouverture-texte {
    padding: clamp(48px, 7vw, 104px) clamp(32px, 5vw, 72px) clamp(48px, 7vw, 96px)
             max(var(--fq-pad), calc(50vw - var(--fq-max) / 2));
    display: flex; flex-direction: column; justify-content: center;
    border-right: 1px solid var(--fq-filet);
}
.fq-h1 {
    font-size: clamp(3rem, 7.2vw, 6rem);
    letter-spacing: -0.035em;
    text-wrap: balance;
    margin-bottom: 26px;
}
.fq-h1 em { font-style: italic; }
.fq-deck {
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    line-height: 1.55;
    color: var(--fq-doux);
    max-width: 46ch;
    margin-bottom: 34px;
}
.fq-ouverture-vue { position: relative; overflow: hidden; }
.fq-compo { width: 100%; height: 100%; display: block; }

/* ══ 6. Sommaire des rubriques ════════════════════════════════════
   Une liste éditoriale à filets, pas une grille de tuiles. */
.fq-sommaire { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); }
.fq-tete {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--fq-encre);
    margin-bottom: 0;
}
.fq-tete h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.fq-tete-note { font-size: .8rem; color: var(--fq-mute); }

.fq-rubriques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Placement explicite des deux colonnes. Le compteur portait auparavant un
   `grid-row: 1 / span 2` : une position définie le faisait placer AVANT le
   bloc de texte, donc en colonne 1, et la colonne `auto` se calait alors sur
   la longueur du texte — d'où des titres qui ne s'alignaient pas d'une
   rubrique à l'autre. */
.fq-rub {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px 24px;
    padding: 26px 28px 26px 0;
    border-bottom: 1px solid var(--fq-filet);
}
.fq-rub-texte { grid-column: 1; grid-row: 1; min-width: 0; }
.fq-rubriques .fq-rub:nth-child(odd) { padding-right: 44px; border-right: 1px solid var(--fq-filet); }
.fq-rubriques .fq-rub:nth-child(even) { padding-left: 44px; }
/* Le filet se remplit par scaleX : animer width ferait recalculer la mise
   en page à chaque frame. */
.fq-rub::before {
    content: '';
    position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
    background: var(--fq-spot);
    transform: scaleX(0); transform-origin: left;
    transition: transform .5s var(--fq-sortie);
}
.fq-rub:hover::before, .fq-rub:focus-visible::before { transform: scaleX(1); }
.fq-rub-nom {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    transition: color .3s var(--fq-sortie);
}
.fq-rub:hover .fq-rub-nom { color: var(--fq-spot); }
.fq-rub-desc { font-size: .93rem; color: var(--fq-doux); margin: 8px 0 0; max-width: 42ch; }
.fq-rub-compte {
    grid-column: 2; grid-row: 1;
    justify-self: end;
    font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--fq-spot);
    white-space: nowrap;
}

/* ══ 7. Flux d'articles ═══════════════════════════════════════════ */
.fq-flux { padding: clamp(40px, 5vw, 72px) 0 clamp(56px, 7vw, 96px); }
.fq-entrees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fq-entree {
    display: block;
    padding: 30px 28px 30px 0;
    border-bottom: 1px solid var(--fq-filet);
}
.fq-entrees .fq-entree:nth-child(odd) { padding-right: 44px; border-right: 1px solid var(--fq-filet); }
.fq-entrees .fq-entree:nth-child(even) { padding-left: 44px; }
/* La première entrée occupe les deux colonnes : le rythme du magazine
   commence par une pleine largeur, puis se resserre. */
.fq-entree--une {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .64fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    padding: 0 0 clamp(28px, 4vw, 48px);
    border-right: 0 !important;
}
.fq-entree-vue {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--fq-voile);
    border: 1px solid var(--fq-filet);
}
.fq-entree-vue img { width: 100%; height: 100%; object-fit: cover; }
.fq-entree-titre {
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    margin: 10px 0 8px;
    text-wrap: balance;
    transition: color .3s var(--fq-sortie);
}
.fq-entree--une .fq-entree-titre { font-size: clamp(2rem, 3.6vw, 3.1rem); }
.fq-entree:hover .fq-entree-titre { color: var(--fq-spot); }
.fq-entree-res { color: var(--fq-doux); font-size: .95rem; margin: 0 0 12px; max-width: 56ch; }
.fq-entree-meta {
    display: flex; gap: 14px; align-items: center;
    font-size: .76rem; color: var(--fq-mute);
}

.fq-vide {
    padding: 0 0 8px;
    font-size: 1.02rem;
    color: var(--fq-doux);
    max-width: 60ch;
}
/* Renvoi vers les autres rubriques quand celle-ci est vide. */
.fq-relais-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 22px;
    border-top: 1px solid var(--fq-filet);
}
.fq-relais-liste li { border-bottom: 1px solid var(--fq-filet); }
.fq-relais-liste a {
    display: block;
    padding: 18px 24px 18px 0;
    border-left: 1px solid var(--fq-filet);
    padding-left: 22px;
    transition: background .25s var(--fq-sortie);
}
.fq-relais-liste li:first-child a { border-left: 0; padding-left: 0; }
.fq-relais-liste a:hover { background: var(--fq-voile); }
.fq-relais-nom {
    display: block;
    font-family: var(--fq-display);
    font-size: 1.3rem;
    margin-bottom: 4px;
}
.fq-relais-liste a:hover .fq-relais-nom { color: var(--fq-spot); }
.fq-relais-desc { display: block; font-size: .86rem; color: var(--fq-doux); }

/* ══ 8. Signature (persona) ═══════════════════════════════════════ */
.fq-signature { border-top: 1px solid var(--fq-encre); padding: clamp(48px, 6vw, 88px) 0; }
.fq-signature-in {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}
.fq-portrait { position: relative; }
.fq-portrait img {
    width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
    border: 1px solid var(--fq-filet2);
}
.fq-portrait-cap {
    margin-top: 10px;
    font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fq-mute);
}
.fq-signature-nom { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: 6px; }
.fq-signature-role { color: var(--fq-spot); font-weight: 600; font-size: .92rem; margin-bottom: 18px; }
.fq-signature-bio { column-count: 2; column-gap: 40px; }
.fq-signature-bio p { margin-bottom: .9em; }
.fq-signature-bio ul { margin: 0 0 1em; }
.fq-signature-bio li { position: relative; padding-left: 18px; margin-bottom: .4em; }
.fq-signature-bio li::before {
    content: ''; position: absolute; left: 0; top: .62em;
    width: 8px; height: 8px; background: var(--fq-spot);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}
.fq-signature-cta { margin-top: 18px; }

/* ══ 9. Coiffe des pages internes ═════════════════════════════════ */
.fq-coiffe {
    border-bottom: 1px solid var(--fq-encre);
}
.fq-coiffe-in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .5fr);
    min-height: min(46vh, 420px);
    align-items: stretch;
    max-width: none;
    padding: 0;
}
.fq-coiffe-texte {
    padding: clamp(36px, 5vw, 72px) clamp(28px, 4vw, 56px) clamp(36px, 5vw, 64px)
             max(var(--fq-pad), calc(50vw - var(--fq-max) / 2));
    display: flex; flex-direction: column; justify-content: center;
    border-right: 1px solid var(--fq-filet);
}
.fq-coiffe-h1 { font-size: clamp(2.3rem, 5vw, 4.2rem); letter-spacing: -0.03em; margin-bottom: 14px; }
.fq-coiffe-desc { color: var(--fq-doux); max-width: 54ch; margin: 0; }
.fq-coiffe-vue { position: relative; overflow: hidden; }
.fq-coiffe-vue img { width: 100%; height: 100%; object-fit: cover; }

.fq-fil { font-size: .76rem; color: var(--fq-mute); margin-bottom: 18px; }
.fq-fil a { border-bottom: 1px solid var(--fq-filet2); }
.fq-fil a:hover { border-bottom-color: var(--fq-spot); color: var(--fq-spot); }
.fq-fil-sep { padding: 0 7px; color: var(--fq-filet2); }

/* ══ 10. Article ══════════════════════════════════════════════════ */
.fq-article { padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.fq-article-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
}
.fq-plaque { margin: 0 0 clamp(28px, 4vw, 48px); width: 100%; }
.fq-plaque img {
    width: 100%; max-height: 620px; object-fit: cover;
    border: 1px solid var(--fq-filet);
}
.entry-content { font-size: 1.06rem; max-width: 68ch; }
.entry-content h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 1.9em 0 .5em; }
.entry-content h3 { font-size: 1.3rem; margin: 1.6em 0 .4em; font-family: var(--fq-texte); font-weight: 700; letter-spacing: 0; }
.entry-content a { color: var(--fq-spot); border-bottom: 1px solid currentColor; }
.entry-content img { margin: 1.8em 0; border: 1px solid var(--fq-filet); }
.entry-content blockquote {
    margin: 1.8em 0; padding: 0 0 0 26px;
    border-left: 1px solid var(--fq-spot);
    font-family: var(--fq-display); font-size: 1.5rem; line-height: 1.25;
}
.entry-content blockquote p { margin-bottom: .3em; }

/* Puces décoratives — le coin coupé de la marque, jamais un rond. */
.entry-content ul { list-style: none; padding-left: 0; margin-bottom: 1.4em; }
.entry-content ol { list-style: decimal; padding-left: 1.4em; margin-bottom: 1.4em; }
.entry-content ul li { position: relative; padding-left: 1.4em; margin-bottom: .5em; }
.entry-content ul li::before {
    content: '';
    position: absolute; left: 0; top: .58em;
    width: 9px; height: 9px;
    background: var(--fq-spot);
    clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}
.entry-content ol li { margin-bottom: .5em; }

.fq-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 0; max-width: 68ch; }
.fq-tag {
    font-size: .76rem; padding: 5px 12px;
    border: 1px solid var(--fq-filet2);
    transition: border-color .25s var(--fq-sortie), color .25s var(--fq-sortie);
}
.fq-tag:hover { border-color: var(--fq-spot); color: var(--fq-spot); }

.fq-auteur {
    margin-top: clamp(36px, 5vw, 64px);
    padding-top: 28px;
    border-top: 1px solid var(--fq-encre);
    display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 22px; align-items: start;
    max-width: 68ch;
}
.fq-auteur img { width: 92px; height: 92px; object-fit: cover; object-position: center top; border: 1px solid var(--fq-filet2); }
.fq-auteur-nom { font-size: 1.5rem; margin-bottom: 2px; }
.fq-auteur-role { font-size: .84rem; color: var(--fq-spot); font-weight: 600; margin-bottom: 10px; }
.fq-auteur-bio { font-size: .95rem; color: var(--fq-doux); }
.fq-auteur-bio p:last-child { margin-bottom: 0; }

.fq-voisins { border-top: 1px solid var(--fq-encre); padding: clamp(40px, 5vw, 72px) 0; }

/* ══ 11. Grille d'archive ═════════════════════════════════════════ */
.fq-archive { padding: clamp(40px, 5vw, 72px) 0; }

/* ══ 12. Bloc éditorial ═══════════════════════════════════════════ */
/* Le bloc éditorial de bas de rubrique reprend le registre à deux colonnes
   du reste du site : titre à gauche contre le filet, texte à droite. Il
   était auparavant posé sans conteneur, donc collé au bord du viewport. */
.fq-encart { border-top: 1px solid var(--fq-encre); padding: clamp(40px, 5vw, 72px) 0; }
.fq-encart-in {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
}
.fq-encart-tete { border-right: 1px solid var(--fq-filet); padding-right: clamp(20px, 3vw, 44px); }
.fq-encart-vue { margin-top: 22px; aspect-ratio: 4 / 3; }
.fq-encart-titre { font-size: clamp(1.8rem, 3vw, 2.5rem); text-wrap: balance; }
.fq-encart-corps { max-width: 62ch; }
.fq-encart-intro { color: var(--fq-doux); }
.fq-encart-liste { margin: 0 0 1.1em; }
.fq-encart-liste li { position: relative; padding-left: 22px; margin-bottom: .5em; }
.fq-encart-liste li::before {
    content: ''; position: absolute; left: 0; top: .6em;
    width: 10px; height: 1px; background: var(--fq-spot);
}
.fq-encart-fin { font-size: .93rem; color: var(--fq-mute); }

/* ══ 13. Contact et pages ═════════════════════════════════════════ */
.fq-page { padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 88px); }
.fq-contact-grille {
    display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px); align-items: start;
}
.fq-form { border: 1px solid var(--fq-encre); padding: clamp(22px, 3vw, 34px); }
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.wpcf7-form br { display: none; }
.wpcf7-form label {
    display: flex; flex-direction: column; gap: 6px;
    font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
    width: 100%; padding: 12px 14px;
    font: inherit; font-size: .95rem; font-weight: 400; letter-spacing: 0; text-transform: none;
    color: var(--fq-encre); background: var(--fq-blanc);
    border: 1px solid var(--fq-filet2); border-radius: 0;
    transition: border-color .25s var(--fq-sortie);
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { border-color: var(--fq-encre); outline: none; }
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-submit {
    width: 100%; padding: 14px 20px;
    font-family: var(--fq-texte); font-size: .8rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
    background: var(--fq-encre); color: var(--fq-blanc);
    border: 1px solid var(--fq-encre); border-radius: 0; cursor: pointer;
    transition: background .25s var(--fq-sortie), color .25s var(--fq-sortie);
}
.wpcf7-submit:hover { background: var(--fq-blanc); color: var(--fq-encre); }
.wpcf7-not-valid-tip { font-size: .78rem; color: #B4231C; font-weight: 400; letter-spacing: 0; text-transform: none; }
.wpcf7 form .wpcf7-response-output {
    margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--fq-filet2); font-size: .88rem;
}

.fq-plan-groupe { border-top: 1px solid var(--fq-filet); padding: 24px 0; }
.fq-plan-groupe h2 { font-size: 1.6rem; margin-bottom: 12px; }
.fq-plan-liste li { padding: 5px 0; }
.fq-plan-liste a { border-bottom: 1px solid transparent; }
.fq-plan-liste a:hover { border-bottom-color: var(--fq-spot); color: var(--fq-spot); }

/* ══ 14. Pied ═════════════════════════════════════════════════════ */
.fq-pied {
    background: var(--fq-encre2);
    color: #E8E4DF;
    padding: clamp(48px, 6vw, 80px) 0 0;
}
.fq-pied-grille {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: clamp(24px, 4vw, 56px);
    padding-bottom: 44px;
}
.fq-pied-desc { color: #A9A29B; font-size: .92rem; margin: 16px 0 0; max-width: 34ch; }
.fq-pied-titre {
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: #A9A29B; margin-bottom: 14px;
}
.fq-pied a { color: #E8E4DF; font-size: .92rem; }
.fq-pied a:hover { color: var(--fq-blanc); }
.fq-pied-liens li { margin-bottom: 9px; }
/* Derniers articles : liens texte à puces, jamais de vignette — une image
   ici étire la colonne et déforme la grille du pied. */
.fq-pied-recents li { position: relative; padding-left: 16px; margin-bottom: 11px; }
.fq-pied-recents li::before {
    content: ''; position: absolute; left: 0; top: .6em;
    width: 8px; height: 8px; background: #6E6862;
    clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%);
}
.fq-pied-recents a { line-height: 1.4; display: block; }
.fq-pied-bas {
    border-top: 1px solid #2A2622;
    padding: 20px 0 24px;
    text-align: center;
    font-size: .8rem; color: #8B847D;
}

/* ══ 15. Mouvement ════════════════════════════════════════════════
   Un seul geste dans la page : les compositions se dévoilent par un
   volet qui s'ouvre, en sortie exponentielle. Rien d'autre n'anime. */
/* Le volet est VISIBLE par défaut. Il n'est refermé que si le script l'a
   explicitement armé, juste avant de l'observer. La version précédente
   masquait le panneau dès la présence de JS et comptait sur un
   IntersectionObserver pour le rouvrir : quand l'observateur ne se
   déclenchait pas, les seules images du site restaient invisibles. Une
   animation décorative ne doit jamais pouvoir escamoter le contenu. */
/* On n'anime PAS un masque. Une transition `clip-path` entre un pourcentage
   et zéro s'est révélée capable de rester bloquée sur son état de départ :
   le panneau restait alors rogné à zéro et les seules images du site
   disparaissaient. L'état de départ est désormais déjà lisible, et
   l'animation ne fait que l'amener à son état final. Bloquée, elle laisse
   une image un peu pâle ; absente, elle ne laisse rien voir d'anormal. */
[data-fq-volet].fq-arme {
    opacity: .55;
    transform: scale(1.03);
}
[data-fq-volet].fq-arme.fq-ouvert {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--fq-sortie), transform 1.1s var(--fq-sortie);
}

@media (prefers-reduced-motion: reduce) {
    [data-fq-volet].fq-arme,
    [data-fq-volet].fq-arme.fq-ouvert { opacity: 1; transform: none; transition: none; }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ══ 16. Adaptations ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .fq-ouverture-in { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
    .fq-signature-in { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
    .fq-pied-grille { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
    body { padding-top: 64px; font-size: 16px; }
    :root { --fq-hh: 64px; }

    .fq-burger {
        display: flex; flex-direction: column; gap: 5px; padding: 8px; margin-right: -8px;
    }
    .fq-burger span { display: block; width: 22px; height: 2px; background: var(--fq-encre); }

    .fq-nav {
        position: fixed; inset: 0; z-index: 200;
        background: var(--fq-blanc);
        flex-direction: column; align-items: flex-start; justify-content: flex-start;
        gap: 0;
        padding: 22px var(--fq-pad) 40px;
        transform: translateX(100%);
        transition: transform .45s var(--fq-sortie);
        overflow-y: auto;
    }
    .fq-nav.fq-nav--ouvert { transform: translateX(0); }
    .fq-nav-liens { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
    .fq-nav-liens a {
        display: block; width: 100%;
        padding: 16px 0;
        font-family: var(--fq-display); font-size: 1.6rem;
        color: var(--fq-encre);
        border-bottom: 1px solid var(--fq-filet);
    }
    .fq-nav-liens a::after { display: none; }
    .fq-nav-contact { margin-top: 22px; font-size: .9rem; }
    .fq-nav-logo {
        display: flex; align-items: center; justify-content: space-between;
        width: 100%; margin-bottom: 18px;
    }
    .fq-nav-fermer { display: block; font-size: 1.6rem; line-height: 1; padding: 6px 10px; }

    .fq-ouverture-in,
    .fq-coiffe-in { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .fq-ouverture-texte,
    .fq-coiffe-texte {
        border-right: 0;
        padding: 40px var(--fq-pad) 32px;
    }
    .fq-ouverture-vue,
    .fq-coiffe-vue {
        aspect-ratio: 4 / 3;
        border-top: 1px solid var(--fq-filet);
    }

    .fq-rubriques, .fq-entrees { grid-template-columns: minmax(0, 1fr); }
    .fq-rubriques .fq-rub:nth-child(odd),
    .fq-entrees .fq-entree:nth-child(odd) { padding-right: 0; border-right: 0; }
    .fq-rubriques .fq-rub:nth-child(even),
    .fq-entrees .fq-entree:nth-child(even) { padding-left: 0; }
    .fq-entree--une { grid-template-columns: minmax(0, 1fr); }

    .fq-signature-in { grid-template-columns: minmax(0, 1fr); }
    .fq-portrait { max-width: 260px; }
    .fq-signature-bio { column-count: 1; }

    .fq-contact-grille { grid-template-columns: minmax(0, 1fr); }
    .fq-encart-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .fq-encart-tete { border-right: 0; padding-right: 0; }
    .fq-auteur { grid-template-columns: 72px minmax(0, 1fr); }
    .fq-auteur img { width: 72px; height: 72px; }
    .fq-pied-grille { grid-template-columns: minmax(0, 1fr); gap: 30px; }
}

@media (max-width: 520px) {
    .fq-h1 { font-size: clamp(2.4rem, 12vw, 3.2rem); }
    .fq-entree--une .fq-entree-titre { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .fq-signature-bio { column-count: 1; }
}