@charset "UTF-8";
/*
Theme Name: Simcha
Theme URI: https://simcha.fr
Author: Simcha
Description: Magazine des jeux, des jouets et des sorties en famille. Direction « La planche prédécoupée » : chaque image est une pièce de carton cernée d’un trait de découpe à attaches.
Version: 1.0.3
Text Domain: simcha
*/

/* ── Gamme ──────────────────────────────────────────────────────
   Fond blanc pur. Un seul accent, une brique éteinte : canal R
   majoritaire, G et B égaux, écart entre canaux 18. Tous les gris
   restent sous 10 d’écart. Contrastes mesurés :
   encre 17,6:1 · doux 11,6:1 · gris 5,78:1 sur blanc, 5,18:1 sur carton
   vif 8,6:1 sur blanc (1,49 × le gris : il se distingue du texte courant)
   ─────────────────────────────────────────────────────────────── */
:root {
    --sim-papier: #FFFFFF;
    --sim-carton: #F5F3F3;
    --sim-carton-2: #ECE8E8;
    --sim-filet: #E3DDDD;
    --sim-filet-2: #CBC2C2;
    --sim-encre: #1D1818;
    --sim-encre-2: #231C1C;
    --sim-doux: #3E3636;
    --sim-gris: #6B6464;
    --sim-vif: #574545;
    --sim-vif-fonce: #3F3131;
    --sim-vif-clair: #D6CBCB;
    --sim-clair: #F5F1F1;
    --sim-clair-2: #C4B9B9;

    --sim-titre: "Solway", Georgia, serif;
    --sim-texte: "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif;

    --sim-cadre: 1120px;
    --sim-gouttiere: 40px;
    --sim-mesure: 680px;
    --sim-rayon: 10px;
    --sim-decal: 8px;
    --sim-attache: 12px;
}

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--sim-papier);
    color: var(--sim-encre);
    font-family: var(--sim-texte);
    font-size: 18px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
    font-family: var(--sim-titre);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--sim-encre);
}
p { margin: 0 0 1em; }

.sim-cadre {
    width: 100%;
    max-width: calc(var(--sim-cadre) + 2 * var(--sim-gouttiere));
    margin-inline: auto;
    padding-inline: var(--sim-gouttiere);
}
.sim-lecture { max-width: calc(var(--sim-mesure) + 2 * var(--sim-gouttiere)); }

.sim-evitement {
    position: absolute; left: -9999px; top: 0;
    background: var(--sim-encre); color: #fff; padding: 10px 16px; z-index: 1000;
}
.sim-evitement:focus { left: 16px; top: 16px; }

.sim-section { padding-block: 96px; }
.sim-section--carton { background: var(--sim-carton); }

/* ── Le geste : la pièce prédécoupée ─────────────────────────────
   L’image dans un cadre à coins doux ; ::after trace la découpe,
   décalée vers l’extérieur, et le masque l’interrompt au milieu de
   chaque côté (les attaches). Deux dégradés croisés en intersection :
   la bande verticale coupe le haut et le bas, l’horizontale les côtés.
   ─────────────────────────────────────────────────────────────── */
.sim-piece {
    position: relative;
    display: block;
    border-radius: var(--sim-rayon);
    isolation: isolate;
}
.sim-piece img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sim-rayon);
    aspect-ratio: 5 / 4;
}
.sim-piece::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--sim-decal));
    border: 1.5px solid var(--sim-vif);
    border-radius: calc(var(--sim-rayon) + var(--sim-decal));
    pointer-events: none;
    -webkit-mask:
        linear-gradient(90deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0),
        linear-gradient(180deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0);
    -webkit-mask-composite: source-in;
            mask:
        linear-gradient(90deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0),
        linear-gradient(180deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0);
            mask-composite: intersect;
    transition: inset .28s ease, border-radius .28s ease;
}
/* Le seul mouvement du thème : la découpe se resserre sur la pièce. */
.sim-lien-piece { display: block; }
.sim-lien-piece:hover .sim-piece::after,
.sim-carte:hover .sim-piece::after,
.sim-rubrique:hover .sim-piece::after,
.sim-une:hover .sim-piece::after {
    inset: -4px;
    border-radius: calc(var(--sim-rayon) + 4px);
}

/* Le jeton : un rond cerclé, coupé à gauche et à droite. */
.sim-jeton {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px; height: 34px;
    font-family: var(--sim-titre);
    font-size: .82rem;
    font-weight: 700;
    color: var(--sim-vif);
    flex: none;
}
.sim-jeton::before {
    content: "";
    position: absolute; inset: 0;
    border: 1.5px solid var(--sim-vif);
    border-radius: 50%;
    -webkit-mask: linear-gradient(180deg, #000 calc(50% - 4px), transparent 0 calc(50% + 4px), #000 0);
            mask: linear-gradient(180deg, #000 calc(50% - 4px), transparent 0 calc(50% + 4px), #000 0);
}

/* ── Libellés ─────────────────────────────────────────────────── */
.sim-oeil {
    display: inline-block;
    font-family: var(--sim-texte);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sim-vif);
    text-decoration: none;
    margin-bottom: 18px;
}
.sim-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sim-gris);
}
.sim-meta span + span:not(.sim-jeton)::before {
    content: "";
    display: inline-block;
    width: 4px; height: 4px;
    margin-right: 16px;
    border-radius: 50%;
    background: var(--sim-filet-2);
    vertical-align: middle;
    transform: translateY(-2px);
}
.sim-meta .sim-jeton + span::before { display: none; }
.sim-role {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sim-vif);
    margin: 6px 0 22px;
}

.sim-tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 52px;
    border-bottom: 1px solid var(--sim-filet);
}
.sim-tete h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); }
.sim-tete-note { font-size: .92rem; color: var(--sim-gris); font-style: italic; }

/* ── Boutons ──────────────────────────────────────────────────── */
.sim-bouton {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: var(--sim-rayon);
    background: var(--sim-vif);
    color: #FFFFFF;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .02em;
    text-decoration: none;
    border: 1.5px solid var(--sim-vif);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.sim-bouton:hover { background: var(--sim-vif-fonce); border-color: var(--sim-vif-fonce); }
.sim-bouton--ligne { background: transparent; color: var(--sim-vif); }
.sim-bouton--ligne:hover { background: var(--sim-vif); color: #FFFFFF; }

/* ── En-tête ──────────────────────────────────────────────────── */
.sim-entete {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--sim-papier);
    border-bottom: 1px solid var(--sim-filet);
}
.sim-entete--posee { box-shadow: 0 1px 0 var(--sim-filet-2); }
.sim-entete-int {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
}
.sim-marque { display: inline-flex; text-decoration: none; }
.sim-marque svg { height: 38px; width: auto; }
.sim-nav { display: flex; align-items: center; gap: 36px; }
.sim-nav-liens { display: flex; gap: 30px; }
.sim-nav-liens a {
    text-decoration: none;
    font-weight: 600;
    font-size: .98rem;
    padding-block: 6px;
    background: linear-gradient(var(--sim-vif), var(--sim-vif)) 0 100% / 0 1.5px no-repeat;
    transition: background-size .22s ease;
}
.sim-nav-liens a:hover { background-size: 100% 1.5px; }
.sim-nav-contact {
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    padding: 10px 18px;
    border: 1.5px solid var(--sim-vif);
    border-radius: var(--sim-rayon);
    color: var(--sim-vif);
    transition: background .2s ease, color .2s ease;
}
.sim-nav-contact:hover { background: var(--sim-vif); color: #FFFFFF; }
.sim-burger { display: none; background: none; border: 0; padding: 8px; color: var(--sim-encre); cursor: pointer; }
.sim-nav-close { display: none; }
.sim-nav-logo  { display: none; }

/* ── Ouverture ────────────────────────────────────────────────── */
.sim-ouverture { padding-block: 76px 24px; }
.sim-ouverture-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}
.sim-titre {
    font-size: clamp(2.3rem, 4.1vw, 3.3rem);
    line-height: 1.1;
    margin-bottom: 26px;
}
.sim-mot { color: var(--sim-vif); }
.sim-deck { font-size: 1.12rem; color: var(--sim-doux); max-width: 34em; margin-bottom: 34px; }
.sim-ouverture-vue img { aspect-ratio: 5 / 4; }

.sim-releves {
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
    margin-top: 48px;
}
.sim-releve { display: flex; align-items: center; gap: 12px; }
.sim-releve-n {
    position: relative;
    display: grid;
    place-items: center;
    min-width: 58px; height: 58px;
    padding-inline: 9px;
    font-family: var(--sim-titre);
    font-weight: 700;
    font-size: 1.22rem;
    color: var(--sim-encre);
}
.sim-releve-n::before {
    content: "";
    position: absolute; inset: 0;
    border: 1.5px solid var(--sim-vif);
    border-radius: 29px;
    -webkit-mask: linear-gradient(180deg, #000 calc(50% - 6px), transparent 0 calc(50% + 6px), #000 0);
            mask: linear-gradient(180deg, #000 calc(50% - 6px), transparent 0 calc(50% + 6px), #000 0);
}
.sim-releve-l {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sim-gris);
    max-width: 7.2em;
    line-height: 1.3;
}

/* ── Flux d’articles ──────────────────────────────────────────── */
.sim-une {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: center;
    margin-bottom: 84px;
}
.sim-une h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 18px 0 16px; }
.sim-une p { color: var(--sim-doux); }
.sim-une h3 a,
.sim-carte h3 a,
.sim-carte h2 a,
.sim-rubrique h3 a {
    text-decoration: none;
    background: linear-gradient(var(--sim-vif), var(--sim-vif)) 0 100% / 0 1.5px no-repeat;
    transition: background-size .25s ease;
}
.sim-une h3 a:hover,
.sim-carte h3 a:hover,
.sim-carte h2 a:hover,
.sim-rubrique h3 a:hover { background-size: 100% 1.5px; }

.sim-grille {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 72px 48px;
}
.sim-carte { grid-column: span 5; }
.sim-carte--large { grid-column: span 7; }
.sim-carte .sim-piece { margin-bottom: 26px; }
.sim-carte h3 { font-size: 1.36rem; margin-top: 14px; }
.sim-carte h2 { font-size: 1.4rem; margin: 14px 0 10px; }
.sim-carte p { color: var(--sim-doux); font-size: 1rem; }
.sim-grille--archive .sim-carte { grid-column: span 6; }

.sim-vide {
    max-width: 640px;
    padding-top: 30px;
    border-top: 2px solid var(--sim-encre);
}
.sim-vide h2, .sim-vide h3 { font-size: 1.6rem; margin-bottom: 14px; }
.sim-vide p { color: var(--sim-doux); margin-bottom: 26px; }

/* ── Le ludothécaire ──────────────────────────────────────────── */
.sim-ludo {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}
.sim-portrait img { aspect-ratio: 4 / 5; object-position: center 22%; }
.sim-ludo-corps h2 { font-size: clamp(2rem, 3.2vw, 2.7rem); }
.sim-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding-block: 16px;
    margin-bottom: 26px;
    border-block: 1px solid var(--sim-filet-2);
    font-size: .96rem;
    color: var(--sim-doux);
}
.sim-badges strong { font-family: var(--sim-titre); color: var(--sim-encre); font-size: 1.1rem; }
.sim-bio { color: var(--sim-doux); margin-bottom: 30px; }
.sim-bio ul { margin: 0 0 1.2em; }
.sim-bio strong { color: var(--sim-encre); }

/* ── Rubriques ────────────────────────────────────────────────── */
.sim-rubriques {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
}
.sim-rubrique .sim-piece { margin-bottom: 28px; }
.sim-rubrique .sim-piece img { aspect-ratio: 16 / 10; }
.sim-rubrique h3 { font-size: 1.8rem; margin: 14px 0 12px; }
.sim-rubrique p { color: var(--sim-doux); max-width: 30em; }

/* ── Coiffes intérieures ──────────────────────────────────────── */
.sim-coiffe { padding-block: 60px 72px; border-bottom: 1px solid var(--sim-filet); }
.sim-coiffe-grille {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: center;
}
.sim-coiffe h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 18px; }
.sim-coiffe-desc { color: var(--sim-doux); font-size: 1.08rem; }
.sim-coiffe-desc p:last-child { margin-bottom: 0; }
.sim-coiffe-compte { margin: 22px 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sim-gris); }
.sim-coiffe-vue img { aspect-ratio: 16 / 10; }
.sim-coiffe--page .sim-coiffe-vue img { aspect-ratio: 16 / 9; }

.sim-fil { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .88rem; color: var(--sim-gris); margin-bottom: 22px; }
.sim-fil a { color: var(--sim-doux); text-decoration: none; border-bottom: 1px solid var(--sim-filet-2); }
.sim-fil a:hover { color: var(--sim-vif); border-color: var(--sim-vif); }
.sim-fil-sep { color: var(--sim-filet-2); }

/* ── Bloc éditorial d’archive ─────────────────────────────────── */
.sim-regle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 72px;
    align-items: center;
}
.sim-regle h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 20px; }
.sim-regle-corps { color: var(--sim-doux); }
.sim-regle-corps ul { margin: 0 0 1.3em; }
.sim-regle-corps li { position: relative; padding-left: 1.6em; margin-bottom: .6em; }
.sim-regle-vue img { aspect-ratio: 4 / 5; }

/* ── Article ──────────────────────────────────────────────────── */
.sim-article-tete { padding-block: 56px 44px; }
.sim-article-titre { font-size: clamp(2.1rem, 4vw, 3rem); margin-bottom: 22px; }
.sim-meta--article { margin-bottom: 6px; }
.sim-note-lecteurs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--sim-filet);
}
.sim-note-lecteurs .sim-oeil { margin: 0; }
.sim-etoiles { max-width: 100%; overflow-x: auto; }
.sim-etoiles .kk-star-ratings { margin: 0 !important; }
.sim-plaque { margin: 8px 0 52px; }
.sim-plaque img { aspect-ratio: 16 / 10; }
.sim-resume { margin-bottom: 36px; }

.entry-content { font-size: 1.08rem; color: var(--sim-doux); }
.entry-content h2 { font-size: 1.8rem; margin: 1.8em 0 .6em; }
.entry-content h3 { font-size: 1.4rem; margin: 1.6em 0 .5em; }
.entry-content a { color: var(--sim-vif); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.entry-content a:hover { color: var(--sim-vif-fonce); }
.entry-content img { border-radius: var(--sim-rayon); }
.entry-content blockquote { margin: 1.6em 0; padding-left: 22px; border-left: 3px solid var(--sim-vif); font-family: var(--sim-titre); color: var(--sim-encre); }

/* ── Bullets décoratifs entry-content ─────────────────────────────
   Le jeton à deux attaches : un anneau coupé à gauche et à droite. */
.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: 0.5em; }
.entry-content ul li::before,
.sim-bio li::before,
.sim-regle-corps li::before,
.sim-pied li::before,
.sim-page-corps ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.46em;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--sim-vif);
    border-radius: 50%;
    background: radial-gradient(circle, var(--sim-vif) 0 2.2px, transparent 2.7px);
    /* L’anneau est coupé à gauche et à droite (les deux attaches), le point
       central reste plein : deux calques de masque en union. */
    -webkit-mask:
        radial-gradient(circle, #000 0 3px, transparent 3.5px),
        linear-gradient(180deg, #000 calc(50% - 2px), transparent 0 calc(50% + 2px), #000 0);
            mask:
        radial-gradient(circle, #000 0 3px, transparent 3.5px),
        linear-gradient(180deg, #000 calc(50% - 2px), transparent 0 calc(50% + 2px), #000 0);
}
.sim-bio li { position: relative; padding-left: 1.6em; margin-bottom: .55em; }
.entry-content ol li { margin-bottom: 0.5em; }
/* Le sommaire d’Easy Table of Contents est injecté DANS le contenu : il garde sa numérotation. */
.entry-content .ez-toc-list li { padding-left: 0; }
.entry-content .ez-toc-list li::before { display: none; }

.sim-etiquettes { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; }
.sim-etiquettes a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid var(--sim-filet-2);
    border-radius: var(--sim-rayon);
    font-size: .88rem;
    text-decoration: none;
    color: var(--sim-doux);
}
.sim-etiquettes a:hover { border-color: var(--sim-vif); color: var(--sim-vif); }

.sim-auteur {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin: 64px 0 104px;
    padding-top: 44px;
    border-top: 1px solid var(--sim-filet);
}
.sim-auteur h2 { font-size: 1.5rem; }
.sim-auteur .sim-role { margin-bottom: 12px; }
.sim-auteur-bio { color: var(--sim-doux); font-size: 1rem; }
.sim-auteur-photo::after { inset: -6px; border-radius: calc(var(--sim-rayon) + 6px); }

.sim-voisins {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
}
.sim-voisins .sim-carte { grid-column: auto; }

/* ── Pages ────────────────────────────────────────────────────── */
.sim-page-corps { color: var(--sim-doux); }
.sim-page-corps h2 { font-size: 1.35rem; margin: 1.8em 0 .6em; color: var(--sim-encre); }
.sim-page-corps h2:first-child { margin-top: 0; }
.sim-page-corps a { color: var(--sim-vif); text-decoration: underline; text-underline-offset: 3px; }
.sim-page-corps ul li { position: relative; padding-left: 1.6em; }

.sim-echange {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 80px;
    align-items: start;
}
.sim-echange-mot { position: sticky; top: 120px; }
.sim-echange-attaque { font-family: var(--sim-titre); font-size: 1.45rem; line-height: 1.35; color: var(--sim-encre); }
.sim-echange-mot p:not(.sim-echange-attaque) { color: var(--sim-doux); }
.sim-echange-form {
    position: relative;
    background: var(--sim-carton);
    border-radius: var(--sim-rayon);
    padding: 40px;
}
.sim-echange-form::after {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--sim-decal));
    border: 1.5px solid var(--sim-vif);
    border-radius: calc(var(--sim-rayon) + var(--sim-decal));
    pointer-events: none;
    -webkit-mask:
        linear-gradient(90deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0),
        linear-gradient(180deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0);
    -webkit-mask-composite: source-in;
            mask:
        linear-gradient(90deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0),
        linear-gradient(180deg, #000 calc(50% - var(--sim-attache)), transparent 0 calc(50% + var(--sim-attache)), #000 0);
            mask-composite: intersect;
}
.wpcf7-form p { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.wpcf7-form br { display: none; }
.wpcf7-form fieldset.hidden-fields-container { display: none; }
.wpcf7-form label {
    display: flex; flex-direction: column; gap: 8px;
    font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sim-doux);
}
.wpcf7-form input:not([type=submit]),
.wpcf7-form textarea {
    width: 100%;
    padding: 13px 15px;
    font: inherit;
    font-size: 1rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--sim-encre);
    background: var(--sim-papier);
    border: 1.5px solid var(--sim-filet-2);
    border-radius: var(--sim-rayon);
}
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form input:not([type=submit]):focus,
.wpcf7-form textarea:focus { outline: none; border-color: var(--sim-vif); box-shadow: 0 0 0 3px var(--sim-vif-clair); }
.wpcf7-form input.wpcf7-submit {
    width: 100%;
    padding: 15px 20px;
    font: inherit;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--sim-vif);
    border: 0;
    border-radius: var(--sim-rayon);
    cursor: pointer;
}
.wpcf7-form input.wpcf7-submit:hover { background: var(--sim-vif-fonce); }
.wpcf7-spinner { position: absolute; }

.sim-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.sim-plan-groupe h2 { font-size: 1.3rem; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--sim-filet); }
.sim-plan-groupe h2 a { text-decoration: none; }
.sim-plan-groupe li { margin-bottom: 10px; color: var(--sim-doux); }
.sim-plan-groupe li a { text-decoration: none; }
.sim-plan-groupe li a:hover { color: var(--sim-vif); text-decoration: underline; }
.sim-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ── Pied ─────────────────────────────────────────────────────── */
.sim-pied { background: var(--sim-encre-2); color: var(--sim-clair-2); padding-bottom: 36px; }
/* Le trait de découpe à attaches, pleine largeur, en tête du pied. */
.sim-pied-decoupe {
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--sim-vif-clair) 0 120px, transparent 120px 138px);
    opacity: .55;
}
.sim-pied-grille {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
    gap: 48px;
    padding-block: 72px 56px;
}
.sim-pied-marque svg { height: 40px; width: auto; margin-bottom: 20px; }
.sim-pied-mot { font-size: .98rem; max-width: 26em; }
.sim-pied-titre { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sim-clair); margin-bottom: 20px; }
.sim-pied li { position: relative; padding-left: 1.6em; margin-bottom: 12px; font-size: .98rem; }
.sim-pied li::before { border-color: var(--sim-vif-clair); background: radial-gradient(circle, var(--sim-vif-clair) 0 2.2px, transparent 2.7px); }
.sim-pied a { text-decoration: none; color: var(--sim-clair); }
.sim-pied a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sim-pied-bas {
    padding-top: 26px;
    border-top: 1px solid rgba(214, 203, 203, 0.18);
    font-size: .85rem;
    color: var(--sim-clair-2);
}

/* ── Navigation au clavier ────────────────────────────────────────
   L’anneau reprend la découpe : même accent, même rayon. */
:focus-visible { outline: 2px solid var(--sim-vif); outline-offset: 4px; border-radius: 4px; }
.sim-pied :focus-visible { outline-color: var(--sim-vif-clair); }

/* ── Réactivité ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
    :root { --sim-gouttiere: 32px; }
    .sim-ouverture-grille, .sim-coiffe-grille { gap: 48px; }
    .sim-ludo { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 56px; }
    .sim-pied-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sim-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sim-voisins { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .sim-burger { display: block; }
    .sim-nav {
        position: fixed;
        inset: 0;
        z-index: 150;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 28px;
        padding: 96px var(--sim-gouttiere) 48px;
        background: var(--sim-papier);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
        overflow-y: auto;
    }
    body.sim-menu-ouvert .sim-nav { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
    /* Le panneau vit dans l’en-tête (sticky, z-index 100) : son z-index est
       plafonné par ce contexte. C’est l’EN-TÊTE qu’on élève tant qu’il est ouvert. */
    body.sim-menu-ouvert .sim-entete { z-index: 400; }
    /* Verrou de défilement : overflow: hidden est ignoré par iOS ; le body est
       figé à son offset courant (posé par theme.js). */
    body.sim-menu-ouvert { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
    .sim-nav-logo { display: block; position: absolute; top: 22px; left: var(--sim-gouttiere); }
    .sim-nav-logo svg { height: 38px; width: auto; }
    .sim-nav-close { display: block; position: absolute; top: 26px; right: var(--sim-gouttiere); background: none; border: 0; padding: 8px; color: var(--sim-encre); cursor: pointer; }
    .sim-nav-liens { flex-direction: column; gap: 18px; }
    .sim-nav-liens a { font-family: var(--sim-titre); font-size: 1.9rem; font-weight: 700; color: var(--sim-encre); }

    .sim-section { padding-block: 72px; }
    .sim-ouverture { padding-block: 44px 8px; }
    .sim-ouverture-grille, .sim-coiffe-grille, .sim-une, .sim-regle, .sim-echange { grid-template-columns: minmax(0, 1fr); }
    .sim-ouverture-vue, .sim-coiffe-vue { order: -1; }
    .sim-coiffe { padding-block: 40px 44px; }
    .sim-coiffe h1 { margin-bottom: 0; }
    .sim-coiffe-desc { margin-top: 16px; }
    .sim-echange-mot { position: static; }
    .sim-regle-vue { max-width: 420px; }
    .sim-regle-vue img { aspect-ratio: 16 / 10; }
    .sim-ludo { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .sim-portrait { max-width: 420px; }
    .sim-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; }
    .sim-carte, .sim-carte--large, .sim-grille--archive .sim-carte { grid-column: auto; }
    .sim-rubriques { gap: 56px 32px; }
    .sim-une { margin-bottom: 64px; gap: 36px; }
}

@media (max-width: 600px) {
    :root { --sim-gouttiere: 22px; --sim-decal: 6px; }
    body { font-size: 17px; }
    .sim-entete-int { min-height: 68px; }
    .sim-marque svg { height: 32px; }
    .sim-grille, .sim-rubriques, .sim-voisins, .sim-plan, .sim-pied-grille { grid-template-columns: minmax(0, 1fr); }
    .sim-tete { flex-direction: column; gap: 6px; margin-bottom: 40px; }
    .sim-releves { gap: 16px 22px; margin-top: 40px; }
    .sim-auteur { grid-template-columns: 1fr; }
    .sim-meta--article { gap: 4px 18px; }
    .sim-meta.sim-meta--article span + span::before { display: none; }
    .sim-auteur-photo { max-width: 150px; }
    .sim-portrait img { aspect-ratio: 3 / 4; }
    .sim-echange-form { padding: 26px 20px; }
    .sim-pied-grille { gap: 36px; padding-block: 56px 40px; }
}

/* ───────────────────────────────────────────────────────────────
   AXE 13 — MÉCANISME : « la pièce se détache de la planche »
   Transition de vue entre documents (@view-transition). L'en-tête et
   le pied SONT la planche : ils ne bougent pas d'une page à l'autre,
   seul le contenu est remplacé entre eux. Et la pièce sur laquelle on
   clique se détache pour devenir l'image de l'article — la référence
   du site, jouée par la navigation elle-même.

   Enrichissement pur, jamais une dépendance : un navigateur qui ne
   comprend pas ces règles les ignore et charge la page normalement.
   Rien n'est masqué, rien n'attend, aucun contenu n'en dépend.
   ─────────────────────────────────────────────────────────────── */
@view-transition { navigation: auto; }

/* La planche ne bouge pas. */
.sim-entete { view-transition-name: sim-planche-haut; }
.sim-pied   { view-transition-name: sim-planche-bas; }

/* Garde-fou, menu mobile : selon le moteur, un nom de transition peut faire de
   l'élément un bloc conteneur pour ses descendants en `position: fixed` — ce qui
   replierait le panneau du menu sur la boîte de l'en-tête, soit exactement le
   défaut 31(a) de /livraison-check. Chrome ne le fait pas (mesuré sur simcha.fr :
   offsetParent du panneau à `null`, couverture 100 %), mais rien ne garantit les
   autres, et un menu ouvert n'a de toute façon aucune transition à jouer. */
body.sim-menu-ouvert .sim-entete { view-transition-name: none; }

/* L'image de l'article, point d'arrivée de la pièce détachée. La classe
   est posée sur la pièce cliquée par theme.js (page de départ) ; les deux
   documents portent alors le même nom, et le navigateur les relie. */
.sim-plaque,
.sim-piece--detachee { view-transition-name: sim-piece-detachee; }

/* Le mouvement reste celui du thème : bref, sans rebond. */
::view-transition-group(sim-piece-detachee) { animation-duration: .38s; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .24s; }

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}