/* ==========================================================================
   PROJET ÉLYSÉE — ACCUEIL ET CHOIX DU CANDIDAT (index.php), refonte d'oct. 2026
   Piste « QG de campagne » : papier crème, encre, couleur d'accent = parti du candidat.
   Tiré des maquettes de prototypes/refonte-da/ (commun.css + a-dossiers.html).
   ========================================================================== */
@import url('../vendor/fonts/polices.css');   /* polices servies par notre serveur (22 oct., RGPD : plus d'appel à Google Fonts) */

:root {
    /* Papier (jour) */
    --fond: #e9e4da;
    --fond-motif: rgba(23, 24, 28, .045);
    --papier: #f7f3ea;
    --papier-2: #efe8da;
    --kraft: #c8a979;
    --kraft-fonce: #a98955;
    --encre: #17181c;
    --encre-2: #4b4d55;
    --encre-3: #8b8a84;
    --ligne: rgba(23, 24, 28, .16);
    --ligne-forte: rgba(23, 24, 28, .55);
    --correcteur: #d4302b;
    --postit: #ffe46b;
    --ecran: #0f1216;
    --ecran-2: #1a1f26;
    --ecran-texte: #e8ecf1;
    --direct: #e5322d;

    /* Accent : couleur du parti du candidat sélectionné (posée en JS) */
    --parti: #0d233a;
    --parti-clair: color-mix(in srgb, var(--parti) 14%, var(--papier));

    --ombre-papier: 0 1px 0 rgba(0,0,0,.06), 0 6px 14px -6px rgba(30, 24, 10, .35), 0 18px 30px -18px rgba(30, 24, 10, .35);
    --ombre-legere: 0 1px 2px rgba(30, 24, 10, .18), 0 4px 10px -4px rgba(30, 24, 10, .25);

    --f-titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --f-ui: 'Barlow', system-ui, sans-serif;
    --f-texte: 'Source Serif 4', Georgia, serif;
    --f-chiffre: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Nuit de scrutin : la pièce s'assombrit, le papier reste éclairé par la lampe */
:root[data-theme="nuit"] {
    --fond: #111318;
    --fond-motif: rgba(255, 255, 255, .025);
    --papier: #ece6d8;
    --papier-2: #e1d8c6;
    --kraft: #a88b5d;
    --kraft-fonce: #8a6f45;
    --ligne: rgba(23, 24, 28, .2);
    --ombre-papier: 0 1px 0 rgba(0,0,0,.3), 0 10px 24px -8px rgba(0,0,0,.7), 0 30px 60px -20px rgba(0,0,0,.8);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { transition: background-color .6s; }
body {
    background-color: var(--fond);
    background-image:
        linear-gradient(var(--fond-motif) 1px, transparent 1px),
        linear-gradient(90deg, var(--fond-motif) 1px, transparent 1px);
    background-size: 28px 28px;
    color: var(--encre);
    font-family: var(--f-ui);
    font-size: 15px;
    min-height: calc(100 * var(--vhz, 1vh));
    transition: background-color .6s;
}
:root[data-theme="nuit"] body { color: var(--ecran-texte); }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* ---------- Barre du QG (commune aux maquettes) ---------- */
.qg-barre {
    display: flex; align-items: center; gap: 18px;
    padding: 0 20px; height: 44px;
    background: var(--encre); color: #f1ede4;
    font-family: var(--f-chiffre); font-size: 12px; letter-spacing: .04em;
    position: sticky; top: 0; z-index: 50;
}
.qg-barre .logo {
    font-family: var(--f-titre); font-weight: 900; font-size: 22px; letter-spacing: .02em;
    text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}
.qg-barre .logo i { /* l'accent du parti remplace le tricolore systématique */
    width: 10px; height: 22px; background: var(--parti); display: inline-block;
    box-shadow: 0 0 0 2px #f1ede4 inset; transition: background .4s;
}
.qg-barre .sep { opacity: .35; }
.qg-barre .vide { flex: 1; }
.qg-barre .pastille { padding: 3px 8px; border: 1px solid rgba(255,255,255,.3); border-radius: 2px; }
.qg-barre .direct { background: var(--direct); border-color: var(--direct); color: #fff; font-weight: 600; }
.qg-barre .direct::before { content: '●'; margin-right: 6px; animation: clignote 1.2s steps(2) infinite; }
@keyframes clignote { 50% { opacity: .2; } }


/* ---------- Petits éléments réutilisables ---------- */
.etiquette { /* titre de zone : capitales condensées + filet */
    font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--encre-2);
    display: flex; align-items: center; gap: 10px;
}
.etiquette::after { content: ''; flex: 1; height: 1px; background: var(--ligne-forte); opacity: .5; }
.chiffre { font-family: var(--f-chiffre); font-variant-numeric: tabular-nums; }

.tampon { /* tampon encreur : bord irrégulier, légèrement transparent */
    display: inline-block; font-family: var(--f-titre); font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; color: var(--correcteur); border: 3px solid currentColor; border-radius: 4px;
    padding: 4px 12px 2px; transform: rotate(-7deg); opacity: .88; mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.75) 61%, #000 75%);
}
.tampon.claque { animation: claque .38s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes claque {
    0% { transform: rotate(-12deg) scale(2.2); opacity: 0; }
    60% { transform: rotate(-6deg) scale(.94); opacity: .95; }
    100% { transform: rotate(-7deg) scale(1); opacity: .88; }
}

.postit {
    background: var(--postit); color: var(--encre); padding: 10px 12px 12px; font-family: var(--f-texte);
    font-style: italic; font-size: 14px; line-height: 1.3; box-shadow: var(--ombre-legere); transform: rotate(1.5deg);
}

.bouton-principal {
    font-family: var(--f-titre); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .06em;
    background: var(--parti); color: #fff; padding: 12px 22px; border-radius: 3px;
    box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 -3px 0 rgba(0,0,0,.25);
    transition: transform .12s, background .4s;
}
.bouton-principal:hover { transform: translateY(-1px); }
.bouton-principal:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(0,0,0,.25); }

/* jauges fines façon tableau de bord */
.jauge { display: grid; grid-template-columns: 92px 1fr 40px; align-items: center; gap: 8px; font-size: 12px; }
.jauge b { font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; color: var(--encre-2); }
.jauge .rail { height: 6px; background: var(--ligne); position: relative; }
.jauge .rail i { position: absolute; inset: 0 auto 0 0; background: var(--encre); transition: width .6s cubic-bezier(.3,.9,.3,1); }
.jauge .chiffre { text-align: right; }

/* axe idéologique : curseur sur un rail */
.axe { font-size: 11px; color: var(--encre-2); }
.axe .rail { height: 2px; background: var(--ligne-forte); position: relative; margin: 7px 0 3px; }
.axe .rail::before { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 8px; background: var(--ligne-forte); }
.axe .rail i {
    position: absolute; top: -4px; width: 10px; height: 10px; margin-left: -5px; background: var(--parti);
    border: 2px solid var(--papier); box-shadow: 0 0 0 1px var(--encre); transition: left .6s cubic-bezier(.3,.9,.3,1), background .4s;
}
.axe .bornes { display: flex; justify-content: space-between; gap: 8px; }
.axe .bornes span { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- écran du choix du candidat et accueil ---------- */
.page { display: grid; grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 22px; padding: 22px; max-width: 1880px; margin: 0 auto;
    min-height: calc(100 * var(--vhz, 1vh) - 44px); align-content: center; }
:root[data-theme="nuit"] .etiquette { color: #b9bcc4; }

/* ---------- Pile des dossiers ---------- */
.pile { display: flex; flex-direction: column; }
.pile .etiquette { margin-bottom: 4px; }
.pile .sous { font-family: var(--f-chiffre); font-size: 11px; color: var(--encre-3); margin-bottom: 14px; }
.chemise {
    position: relative; text-align: left; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px;
    padding: 9px 12px 9px 0; margin-bottom: -6px; border-radius: 3px 10px 3px 3px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--kraft) 82%, #fff), var(--kraft));
    box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset, 0 3px 6px -3px rgba(40,25,0,.5);
    color: #2a2014; transition: transform .25s cubic-bezier(.3,1.4,.5,1), filter .2s;
}
.chemise::before { /* bande de couleur du parti, comme un onglet de classeur */
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--c); border-radius: 3px 0 0 3px;
}
.chemise .num { font-family: var(--f-chiffre); font-size: 11px; text-align: right; opacity: .7; }
.chemise .nom { font-family: var(--f-titre); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.chemise .nom small { display: block; font-family: var(--f-ui); font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; opacity: .75; margin-top: 2px; }
.chemise .score { font-family: var(--f-chiffre); font-size: 13px; font-weight: 600; }
.chemise:hover { transform: translateX(6px); filter: brightness(1.04); z-index: 2; }
.chemise[aria-selected="true"] {
    transform: translateX(18px); z-index: 3; filter: brightness(1.1);
    box-shadow: 0 -1px 0 rgba(255,255,255,.35) inset, 0 8px 16px -6px rgba(40,25,0,.6);
}
.chemise[aria-selected="true"]::after {
    content: ''; position: absolute; right: -10px; top: 50%; border: 8px solid transparent; border-left-color: var(--kraft); transform: translateY(-50%);
}

/* ---------- Dossier ouvert ---------- */
.dossier {
    position: relative; background: linear-gradient(170deg, color-mix(in srgb, var(--kraft) 88%, #fff), var(--kraft-fonce));
    border-radius: 4px 14px 6px 6px; padding: 26px 26px 22px; box-shadow: var(--ombre-papier);
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 20px; align-content: start;
    grid-template-rows: 1fr auto;   /* les feuilles occupent la hauteur commune à tous les dossiers (js/accueil.js : caleDossier) */
}
.dossier::before { /* onglet du dossier */
    content: attr(data-onglet); position: absolute; top: -26px; left: 30px; height: 28px; padding: 6px 18px 0;
    background: color-mix(in srgb, var(--kraft) 88%, #fff); border-radius: 8px 8px 0 0;
    font-family: var(--f-chiffre); font-size: 11px; letter-spacing: .08em; color: #3a2c18;
}
.feuille {
    background: var(--papier); color: var(--encre); padding: 22px 24px; position: relative; box-shadow: var(--ombre-legere);
    background-image: linear-gradient(transparent 31px, rgba(23,24,28,.05) 32px); background-size: 100% 32px;
}
.feuille.entre { animation: entre .45s cubic-bezier(.2,.9,.3,1) both; }
.feuille + .feuille.entre { animation-delay: .07s; }
@keyframes entre { from { transform: translate(-30px, 14px) rotate(-2.5deg); opacity: 0; } to { transform: none; opacity: 1; } }
.f1 { transform: rotate(-.6deg); }
.f2 { transform: rotate(.5deg); }

.entete-officiel { display: flex; justify-content: space-between; font-family: var(--f-chiffre); font-size: 10px; letter-spacing: .08em; color: var(--encre-2); border-bottom: 1.5px solid var(--encre); padding-bottom: 6px; margin-bottom: 18px; text-transform: uppercase; }
.identite { display: grid; grid-template-columns: 170px 1fr; gap: 20px; }
.polaroid {
    background: #fff; padding: 8px 8px 30px; box-shadow: var(--ombre-legere); transform: rotate(-3deg); position: relative; align-self: start;
}
.polaroid .photo { aspect-ratio: 1; background: var(--parti-clair); display: grid; place-items: end center; overflow: hidden; transition: background .4s; }
.polaroid img { width: 100%; display: block; }
.polaroid figcaption { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font-family: var(--f-texte); font-style: italic; font-size: 12px; color: var(--encre-2); }
.trombone { /* trombone en CSS */
    position: absolute; top: -14px; left: 26px; width: 16px; height: 44px; border: 2.5px solid #8d96a3; border-radius: 9px;
    box-shadow: 1px 1px 0 rgba(0,0,0,.15);
}
.trombone::after { content: ''; position: absolute; inset: 6px 3px 10px; border: 2.5px solid #8d96a3; border-radius: 7px; border-top: 0; }
.nom-grand { font-family: var(--f-titre); font-weight: 900; font-size: 52px; line-height: .88; text-transform: uppercase; letter-spacing: -.005em; }
.nom-grand small { display: block; font-weight: 600; font-size: 22px; letter-spacing: .02em; color: var(--encre-2); }
.parti { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--f-titre); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.parti i { width: 14px; height: 14px; background: var(--parti); transition: background .4s; }
.slogan { font-family: var(--f-texte); font-style: italic; font-size: 20px; line-height: 1.25; margin-top: 12px; }
.slogan::before { content: '« '; } .slogan::after { content: ' »'; }
.bio { font-family: var(--f-texte); font-size: 14.5px; line-height: 1.5; margin-top: 16px; color: #2b2c31; }
.fiche-tableau { width: 64%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
.fiche-tableau td { padding: 6px 0; border-bottom: 1px dashed var(--ligne-forte); }
.fiche-tableau td:first-child { font-family: var(--f-titre); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); width: 46%; }
.fiche-tableau td:last-child { font-family: var(--f-chiffre); text-align: right; font-weight: 500; }
.tampon-niveau { position: absolute; right: 22px; bottom: 34px; max-width: 30%; font-size: 22px; text-align: center; line-height: 1; }
.tampon-niveau small { display: block; font-size: 11px; letter-spacing: .2em; }

.f2 h3 { font-family: var(--f-titre); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.f2 section + section { margin-top: 18px; }
.jauges { display: grid; gap: 7px; }
.jauge .rail i { background: var(--parti); }
.sujets { list-style: none; counter-reset: s; display: grid; gap: 6px; }
.sujets li { counter-increment: s; font-family: var(--f-texte); font-size: 15px; display: grid; grid-template-columns: 26px 1fr; }
.sujets li::before { content: counter(s) '.'; font-family: var(--f-chiffre); color: var(--correcteur); font-weight: 600; }
.sujets li span { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--correcteur) 22%, transparent) 62%, color-mix(in srgb, var(--correcteur) 22%, transparent) 90%, transparent 90%); justify-self: start; }
.axes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.postit-coin { position: absolute; right: -14px; top: -18px; width: 170px; z-index: 2; }

.actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.actions .secondaire { font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #2a2014; padding: 10px 14px; border: 1.5px solid #2a2014; border-radius: 3px; }
.actions .vide { flex: 1; }
.actions .mention { font-family: var(--f-chiffre); font-size: 11px; color: #3a2c18; }

/* ---------- Colonne des écrans ---------- */
.ecrans { display: flex; flex-direction: column; gap: 18px; }
/* écrans de moins de 1700 px (audit du 17 oct.) : le dossier n'avait plus la place, la télé et Le Sondé le recouvraient ;
   ils passent sous le dossier, côte à côte */
@media (max-width: 1700px) {
    .page { grid-template-columns: 260px minmax(0, 1fr); }
    .ecrans { grid-column: 2; flex-direction: row; align-items: flex-start; gap: 22px; }
    .ecrans > * { flex: 1 1 0; min-width: 0; }
}
.tele {
    background: #23262c; padding: 10px; border-radius: 10px; box-shadow: var(--ombre-papier), inset 0 0 0 1px rgba(255,255,255,.05);
}
.tele .verre { background: var(--ecran); color: var(--ecran-texte); border-radius: 4px; overflow: hidden; position: relative; }
.tele .verre::after { /* reflet et trame */
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px), linear-gradient(130deg, rgba(255,255,255,.07), transparent 40%);
}
.chaine { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: #1d4fd7; font-family: var(--f-titre); font-weight: 800; font-size: 17px; text-transform: uppercase; }
.chaine span:last-child { font-family: var(--f-chiffre); font-size: 11px; font-weight: 500; background: var(--direct); padding: 2px 6px; }
.tele h4 { font-family: var(--f-titre); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 12px 6px; color: #aeb6c2; }
.barres { padding: 0 12px 10px; display: grid; gap: 3px; }
.barre { display: grid; grid-template-columns: 96px 1fr 40px; gap: 8px; align-items: center; font-size: 11.5px; }
.barre span:first-child { font-family: var(--f-titre); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #c9cfd8; }
.barre .r { height: 9px; background: rgba(255,255,255,.06); }
.barre .r i { display: block; height: 100%; background: var(--c); opacity: .55; transition: width .6s; }
.barre .chiffre { text-align: right; color: #c9cfd8; }
.barre.moi span:first-child, .barre.moi .chiffre { color: #fff; font-weight: 700; }
.barre.moi .r i { opacity: 1; box-shadow: 0 0 10px var(--c); }
.bandeau { display: flex; background: var(--postit); color: var(--encre); font-family: var(--f-titre); font-weight: 700; font-size: 14px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.bandeau b { background: var(--direct); color: #fff; padding: 5px 10px; flex: none; z-index: 1; }
.bandeau .defile { padding: 5px 0; animation: defile 30s linear infinite; }
@keyframes defile { from { transform: translateX(10%); } to { transform: translateX(-100%); } }
.pied-tele { display: flex; justify-content: center; }
.pied-tele i { width: 80px; height: 10px; background: #23262c; border-radius: 0 0 6px 6px; }

.journal {
    background: #f4efe2; color: var(--encre); padding: 14px 16px 16px; box-shadow: var(--ombre-papier); transform: rotate(1deg); position: relative;
}
.journal .titre-journal { font-family: 'UnifrakturMaguntia', serif; font-size: 34px; text-align: center; line-height: 1; border-bottom: 3px double var(--encre); padding-bottom: 6px; }
.journal .ours { display: flex; justify-content: space-between; font-family: var(--f-chiffre); font-size: 9.5px; text-transform: uppercase; border-bottom: 1px solid var(--encre); padding: 4px 0; margin-bottom: 10px; }
.journal h5 { font-family: 'Source Serif 4', serif; font-weight: 600; font-size: 21px; line-height: 1.12; }
.journal p { font-family: var(--f-texte); font-size: 12.5px; line-height: 1.45; margin-top: 8px; columns: 2; column-gap: 14px; text-align: left; hyphens: auto; }   /* justifié, les colonnes étroites laissaient de grands trous */

/* ---------- Vos campagnes ---------- */
.campagnes { grid-column: 1 / -1; }
/* infobulle d'un axe : carte encre, titre condensé, la note du candidat en serif */
.axe { cursor: help; border-radius: 3px; padding: 2px 4px; margin: -2px -4px; }
.axe:hover, .axe:focus-visible { background: color-mix(in srgb, var(--parti) 10%, transparent); outline: none; }
.infobulle { position: fixed; z-index: 80; width: 300px; pointer-events: none; background: var(--encre); color: #f1ede4; padding: 12px 14px 13px;
    border-radius: 6px; box-shadow: 4px 4px 0 var(--parti); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s; }
.infobulle.vu { opacity: 1; transform: none; }
.infobulle::after { content: ''; position: absolute; left: var(--fleche, 50%); bottom: -7px; width: 14px; height: 14px; margin-left: -7px; background: var(--encre); transform: rotate(45deg); }
.infobulle.dessous::after { bottom: auto; top: -7px; }
.infobulle .cat { font-family: var(--f-chiffre); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.infobulle .poles { display: flex; justify-content: space-between; gap: 10px; margin: 4px 0 8px; font-family: var(--f-titre); font-weight: 700; font-size: 15px; text-transform: uppercase; line-height: 1.05; }
.infobulle .poles span:last-child { text-align: right; }
.infobulle .poles .fort { color: var(--postit); }
.infobulle .rail { height: 4px; background: rgba(255,255,255,.2); position: relative; margin-bottom: 9px; }
.infobulle .rail::before { content: ''; position: absolute; left: 50%; top: -3px; width: 1px; height: 10px; background: rgba(255,255,255,.5); }
.infobulle .rail i { position: absolute; top: -4px; width: 12px; height: 12px; margin-left: -6px; background: var(--parti); border: 2px solid #f1ede4; }
.infobulle p { font-family: var(--f-texte); font-style: italic; font-size: 14px; line-height: 1.4; }
.bristols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 12px; }
.bristol {
    background: var(--papier); color: var(--encre); padding: 14px 16px; box-shadow: var(--ombre-legere); display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center;
    background-image: linear-gradient(var(--correcteur), var(--correcteur)), repeating-linear-gradient(transparent 0 21px, rgba(60,110,200,.18) 21px 22px);
    background-size: 100% 1.5px, 100% 100%; background-repeat: no-repeat, repeat; background-position: 0 26px, 0 0;
}
.bristol img { width: 54px; height: 54px; border-radius: 50%; background: var(--parti-clair); }
.bristol .t { font-family: var(--f-titre); font-weight: 800; font-size: 18px; text-transform: uppercase; line-height: 1; }
.bristol .d { font-family: var(--f-chiffre); font-size: 11px; color: var(--encre-2); margin-top: 6px; }
.bristol .bouton-reprendre { color: var(--encre); text-decoration: none; font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 7px 12px; border: 1.5px solid var(--encre); border-radius: 3px; }
.bristol button { font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 7px 12px; border: 1.5px solid var(--encre); border-radius: 3px; }
.bristol.vide { display: flex; justify-content: center; color: var(--encre-3); font-family: var(--f-texte); font-style: italic; border: 1.5px dashed var(--ligne-forte); background: transparent; box-shadow: none; }
:root[data-theme="nuit"] .bristol.vide { color: #8b8f99; border-color: rgba(255,255,255,.2); }

/* ==========================================================================
   ACCUEIL ÉPURÉ (?jeu) : même papier que les dossiers, le titre, le menu à boutons,
   un bandeau d'infos en bas et Dédé dans le coin. « Jouer » révèle la sélection sur la même page.
   ========================================================================== */
.accueil { position: fixed; inset: 44px 0 0 0; z-index: 40; padding-bottom: 40px;   /* le contenu centré s'arrête au-dessus du bandeau Info24 (audit du 17 oct. : la signature était rognée) */
    display: grid; place-items: center; transition: opacity .35s .05s; }
.accueil.parti { opacity: 0; transform: scale(.985); pointer-events: none; }
body.en-accueil { overflow: hidden; }
body.en-accueil .page { opacity: 0; pointer-events: none; }
body.en-accueil .retour-bar { visibility: hidden; }
.page { transition: opacity .3s; }
/* 1. le passage : le menu glisse vers le haut, la pile arrive de gauche, le dossier monte, les écrans arrivent de droite */
.accueil .colonne { transition: transform .4s cubic-bezier(.5,0,.3,1), opacity .3s; }
.accueil.parti .colonne { transform: translateY(-60px); opacity: 0; }
.accueil .dede, .accueil .ticker { transition: transform .4s cubic-bezier(.5,0,.3,1); }
.accueil.parti .dede { transform: translateY(260px); }
.accueil.parti .ticker { transform: translateY(40px); }
body.arrivee .pile { animation: arrive-g .55s cubic-bezier(.2,.9,.3,1) .15s both; }
body.arrivee .dossier { animation: arrive-b .55s cubic-bezier(.2,.9,.3,1) .25s both; }
body.arrivee .ecrans { animation: arrive-d .55s cubic-bezier(.2,.9,.3,1) .35s both; }
body.arrivee .campagnes { animation: arrive-b .55s cubic-bezier(.2,.9,.3,1) .45s both; }
@keyframes arrive-g { from { transform: translateX(-90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes arrive-d { from { transform: translateX(90px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes arrive-b { from { transform: translateY(50px); opacity: 0; } to { transform: none; opacity: 1; } }
.accueil .colonne { width: 400px; display: flex; flex-direction: column; gap: 12px; margin-top: -40px; }
.accueil .titre { text-align: center; margin-bottom: 16px; color: var(--encre); }
.accueil .titre small { display: block; font-family: var(--f-chiffre); font-size: 13px; letter-spacing: .4em; text-transform: uppercase; color: var(--encre-2); }
.accueil .titre h1 { margin: 0; font: inherit; }   /* le titre est le h1 de la page (référencement, 22 oct.) : aucun style propre */
.accueil .titre b { display: block; font-family: var(--f-titre); font-weight: 900; font-size: 96px; line-height: 1; text-transform: uppercase; margin-top: 6px; }   /* 1 et pas moins : sinon les accents des É touchent la ligne du dessus (21 oct.) */
@media (max-height: 820px) { .accueil .titre b { font-size: 76px; } .accueil .titre { margin-bottom: 10px; } .accueil .signature { margin-top: 10px; } }
.accueil .titre span { display: inline-block; margin-top: 12px; font-family: var(--f-texte); font-style: italic; font-size: 17px; color: var(--encre-2); }
/* cadre de neutralité (20 oct., choix de l'auteur) : une ligne sous le slogan, un tampon au-dessus de la pile des dossiers */
.accueil .titre .parodie { display: block; margin-top: 6px; font-family: var(--f-chiffre); font-style: normal; font-size: 11.5px; letter-spacing: .04em; color: var(--encre-3); }
.tampon-parodie { display: inline-grid; margin: 8px 0 10px; padding: 4px 9px 5px; max-width: 250px; font-family: var(--f-texte); font-style: italic; font-size: 12px; line-height: 1.3;
  color: var(--correcteur); border: 2px solid var(--correcteur); border-radius: 3px; transform: rotate(-1.5deg); opacity: .85; }
.tampon-parodie b { font-family: var(--f-titre); font-style: normal; font-weight: 900; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; }
.btn {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; text-decoration: none;
    font-family: var(--f-titre); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .06em;
    padding: 13px 18px; border-radius: 6px; background: var(--papier); color: var(--encre);
    border: 2px solid var(--encre); box-shadow: 4px 4px 0 var(--encre); transition: transform .1s, box-shadow .1s, background .15s;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--encre); background: #fff; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--encre); }
.btn:focus-visible { outline: 3px solid var(--postit); outline-offset: 3px; }
.btn .fleche { font-family: var(--f-chiffre); font-size: 18px; opacity: .5; }
.btn.principal { background: var(--correcteur); color: #fff; font-size: 30px; padding: 16px 20px; }
.btn.principal:hover { background: #e23a34; }
/* Tuto (21 oct., auteur) : juste au-dessus de « Jouer », même largeur, moins haut ; bleu du drapeau (le rouge de « Jouer » en dessous) */
.btn.tuto { background: #1f3f8f; color: #fff; font-size: 17px; padding: 7px 20px; }
.btn.tuto:hover { background: #2a52b0; }
.btn.tuto .fleche { opacity: .7; }
/* Le mot écrit à la main sur le papier du fond, avec sa flèche, qui pointe vers « Tuto » (21 oct., demande de l'auteur) : stylo bleu,
   écriture Caveat, un peu penché ; posé à gauche de la colonne, hors du flux (le menu ne bouge pas). Caché sur téléphone (pas la place). */
.tuto-ligne { position: relative; display: grid; }
.note-tuto { position: absolute; right: calc(100% + 14px); top: -46px; width: 250px; margin: 0; pointer-events: none;
    font: 600 25px/1.05 'Caveat', 'Segoe Print', cursive; color: #24479a; text-align: right; transform: rotate(-5deg); }
.note-tuto svg { display: block; width: 92px; height: 54px; margin: 2px -2px 0 auto; overflow: visible; }
.note-tuto path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.accueil.parti .note-tuto { opacity: 0; }
html.mobile .note-tuto { display: none; }
.btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn[aria-disabled="true"]:hover { transform: none; box-shadow: 4px 4px 0 var(--encre); background: var(--papier); }
.btn .etat { font-family: var(--f-chiffre); font-size: 11px; font-weight: 600; letter-spacing: .04em; background: var(--postit); padding: 3px 7px; border-radius: 3px; border: 1px solid var(--encre); }
.btn .sous-ligne { display: block; font-family: var(--f-chiffre); font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--encre-2); margin-top: 3px; }
.btn-petits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-petits .btn { font-size: 16px; padding: 10px 12px; justify-content: center; }
.accueil .version { text-align: center; font-family: var(--f-chiffre); font-size: 11px; color: var(--encre-3); margin-top: 8px; }
.accueil .version a { color: inherit; }
/* bandeau d'infos en bas, façon Info24 */
.accueil .ticker { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; z-index: 2; display: flex; background: var(--encre); color: #f1ede4;
    font-family: var(--f-titre); font-weight: 700; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; overflow: hidden; }
.accueil .ticker b { flex: none; display: grid; place-items: center; padding: 0 16px; background: var(--correcteur); color: #fff; z-index: 1; }
.accueil .ticker div { display: flex; align-items: center; animation: defile-accueil 70s linear infinite; }
.accueil .ticker span + span::before { content: '·'; margin: 0 18px; color: var(--postit); }
@keyframes defile-accueil { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Dédé dans le coin : le bandeau cache le bas de son buste */
.accueil .dede { position: absolute; right: 48px; bottom: 26px; width: 210px; z-index: 1; pointer-events: none; }
.accueil .dede img { width: 100%; display: block; pointer-events: auto; }
/* Sa bulle (31 oct.) : nom et devise du légendaire du coin, au survol ou au toucher */
.accueil .dede .coin-bulle { position: absolute; right: 62%; top: 4%; width: 240px; padding: 10px 14px 11px; background: var(--papier); color: var(--encre);
    border: 2px solid var(--encre); border-radius: 8px; box-shadow: 4px 4px 0 var(--encre); text-align: left;
    opacity: 0; transform: translateY(6px) scale(.96); transform-origin: 90% 100%; transition: opacity .18s, transform .18s; pointer-events: none; }
.accueil .dede .coin-bulle.vu { opacity: 1; transform: none; }
.accueil .dede .coin-bulle::after { content: ''; position: absolute; right: -9px; top: 26px; width: 14px; height: 14px; background: var(--papier);
    border-right: 2px solid var(--encre); border-top: 2px solid var(--encre); transform: rotate(45deg); }
.accueil .dede .coin-bulle b { display: block; font: 900 18px/1.05 var(--f-titre); text-transform: uppercase; letter-spacing: .02em; }
.accueil .dede .coin-bulle span { display: block; margin-top: 5px; font: italic 14px/1.35 var(--f-texte); color: var(--encre-2); }
/* fenêtres */
.modale { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(20,22,28,.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
.modale.vu { opacity: 1; pointer-events: auto; }
.modale .boite { width: min(600px, 92vw); max-height: calc(84 * var(--vhz, 1vh)); overflow: auto; background: var(--papier); color: var(--encre); border: 2px solid var(--encre); box-shadow: 8px 8px 0 var(--encre); border-radius: 8px; padding: 24px 26px; }
.modale h3 { font-family: var(--f-titre); font-weight: 900; font-size: 32px; text-transform: uppercase; line-height: 1; }
.modale .sous { font-family: var(--f-chiffre); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--encre-2); margin: 4px 0 16px; }
.modale p, .modale li { font-family: var(--f-texte); font-size: 15px; line-height: 1.5; }
.modale ul { padding-left: 18px; display: grid; gap: 8px; }
.modale .btn { margin-top: 18px; display: inline-flex; font-size: 16px; padding: 8px 16px; }

/* ---------- index.php : barre du haut, renommage, emplacements de sauvegarde ---------- */
.qg-barre a.logo { color: inherit; text-decoration: none; }
/* La touche française (13 oct.) : un liseré tricolore sous la barre noire, un petit drapeau dans le logo, une cocarde sur l'accueil */
.qg-barre { box-shadow: 0 4px 0 -1px transparent; }
.qg-barre::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px;
    background: linear-gradient(90deg, #1f3f8f 0 33.33%, #f4f1ea 33.33% 66.66%, #d4302b 66.66%); }
.drapeau-logo { display: inline-flex; width: 18px; height: 13px; border-radius: 1.5px; overflow: hidden; box-shadow: 0 0 0 1.5px #f1ede4; }
.drapeau-logo b { flex: 1; } .drapeau-logo b:nth-child(1) { background: #1f3f8f; } .drapeau-logo b:nth-child(2) { background: #f4f1ea; } .drapeau-logo b:nth-child(3) { background: #d4302b; }
.accueil::before { content: ''; position: absolute; left: 50%; top: 50%; width: min(78vh, 760px); aspect-ratio: 1; transform: translate(-50%, -54%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M38 3 L53 8 L68 13 L79 27 L77 40 L72 52 L80 71 L69 80 L58 85 L48 87 L41 96 L23 93 L25 79 L28 63 L17 47 L3 39 L12 31 L29 30 L33 18 Z' fill='none' stroke='%2317181c' stroke-width='1.1' stroke-linejoin='round'/%3E%3Cpath d='M89 81 L92 85 L91 94 L87 96 L86 88 Z' fill='none' stroke='%2317181c' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .07; pointer-events: none; }
.accueil > * { position: relative; }
.accueil .dede, .accueil .ticker { position: absolute; }
/* bande tricolore en diagonale dans le coin du dossier kraft, comme une écharpe d'élu */
.dossier::after { content: ''; position: absolute; top: 0; right: 0; width: 96px; height: 96px; border-top-right-radius: 14px; pointer-events: none;
    background: linear-gradient(225deg, transparent 0 28%, #1f3f8f 28% 36%, #f4f1ea 36% 44%, #d4302b 44% 52%, transparent 52%); }
.cocarde { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 10px;
    background: radial-gradient(circle, #d4302b 0 30%, #f4f1ea 31% 62%, #1f3f8f 63%); box-shadow: 0 0 0 1px rgba(20,22,28,.25); }
.entete-officiel .mini-drapeau { display: inline-block; width: 14px; height: 9px; margin-right: 6px; vertical-align: 0;
    background: linear-gradient(90deg, #1f3f8f 0 33.33%, #f4f1ea 33.33% 66.66%, #d4302b 66.66%); box-shadow: 0 0 0 1px rgba(20,22,28,.3); }
.lien-barre { color: #f1ede4; text-decoration: none; font-family: var(--f-titre); font-weight: 700; font-size: 14px; text-transform: uppercase;
    letter-spacing: .08em; padding: 5px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 3px; display: inline-flex; align-items: center; gap: 8px; }
.lien-barre:hover { background: rgba(255,255,255,.1); }
.lien-barre.reseau { padding: 0 8px; align-self: stretch; margin: 7.5px 0; } /* icônes des comptes X et Bluesky du jeu (2 nov.) */
.lien-barre.reseau + .lien-barre.reseau { margin-left: -10px; }
.lien-barre .etat-mini { font-family: var(--f-chiffre); font-size: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--postit); color: var(--encre); padding: 1px 5px; border-radius: 2px; }
.ligne-nom { display: flex; align-items: flex-start; gap: 8px; }
.outils-nom { display: flex; gap: 4px; margin-top: 4px; }
.outil-nom { width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--ligne-forte); border-radius: 50%; color: var(--encre-2); font-size: 16px; opacity: .6; transition: opacity .15s, background .15s; }
.outil-nom:hover, .outil-nom:focus-visible { opacity: 1; background: var(--parti-clair); outline: none; }
.outil-nom svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.saisie-nom { font: inherit; font-family: var(--f-titre); font-weight: 900; font-size: 38px; text-transform: uppercase; width: 100%; max-width: 420px;
    background: var(--papier-2); border: 0; border-bottom: 3px solid var(--parti); color: var(--encre); padding: 2px 4px; }
.saisie-nom:focus { outline: none; }
/* « Votre candidat » : le nom s'écrit sur place, en cliquant dessus ou sur la plume (31 oct.) ; message s'il manque au lancement */
.nom-perso { display: block; text-align: left; padding: 2px 6px 2px 0; margin-left: -6px; padding-left: 6px; border-radius: 4px; cursor: text; transition: background .15s; }
.nom-perso:hover, .nom-perso:focus-visible { background: var(--parti-clair); outline: none; }
.nom-perso.vide, .nom-perso.vide small { color: #b9b6ad; }
.saisie-perso { display: grid; gap: 4px; max-width: 420px; }
.saisie-prenom { font: inherit; font-family: var(--f-titre); font-weight: 600; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; width: 100%; max-width: 300px;
    background: var(--papier-2); border: 0; border-bottom: 2px solid var(--parti); color: var(--encre-2); padding: 1px 4px; }
.saisie-prenom:focus { outline: none; }
.saisie-perso .saisie-nom::placeholder, .saisie-prenom::placeholder { color: #b9b6ad; }
.consigne-nom { margin: 8px 0 4px; padding: 8px 12px; background: var(--postit); border-left: 4px solid var(--correcteur, #c4392f); font-family: var(--f-texte); font-size: 14.5px; line-height: 1.35;
    color: var(--encre); border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); animation: consigne-nom .45s ease-out; }
@keyframes consigne-nom { 0% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-6px) rotate(-.6deg); } 50% { transform: translateX(5px) rotate(.4deg); } 75% { transform: translateX(-3px); } 100% { transform: none; } }
html.anim-reduites .consigne-nom { animation: none; }
.remplacer-consigne { margin-top: 10px; padding: 10px 14px; background: var(--postit); color: var(--encre); font-family: var(--f-texte); font-size: 15px; border-radius: 4px; }
.remplacer-consigne button { margin-left: 10px; font-family: var(--f-titre); font-weight: 700; text-transform: uppercase; border: 1.5px solid var(--encre); padding: 3px 10px; border-radius: 3px; }
.bristol .gestes { display: flex; gap: 8px; }
.bristol .geste { color: var(--encre); text-decoration: none; font-family: var(--f-titre); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
    padding: 6px 11px; border: 1.5px solid var(--encre); border-radius: 3px; background: transparent; }
.bristol .geste.fort { background: var(--encre); color: #f1ede4; }
.bristol .geste.confirmer { background: var(--correcteur); border-color: var(--correcteur); color: #fff; }
.bristol .initiales { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--f-titre); font-weight: 800; }
.bristol .t { font-size: 17px; }

/* Le petit Élysée au-dessus du titre (16 oct., demande de l'auteur) : façade au trait, drapeau tricolore sur le pavillon central */
.accueil .titre .elysee { display: block; width: 190px; height: auto; margin: 12px auto 2px; overflow: visible; }
.elysee .mur, .elysee .toit { fill: var(--papier); stroke: var(--encre); stroke-width: 2.4; stroke-linejoin: round; }
.elysee .toit { fill: var(--encre-3, #8a857c); }
.elysee .trait, .elysee .sol, .elysee .mat { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linecap: round; }
.elysee .sol { stroke-width: 2.6; }
.elysee .porte, .elysee .fen { fill: var(--encre); }
.elysee .drap-b { fill: #1f3f8f; } .elysee .drap-w { fill: #f4f1ea; stroke: var(--encre); stroke-width: .6; } .elysee .drap-r { fill: #d4302b; }
.elysee .drap-b, .elysee .drap-w, .elysee .drap-r { transform-origin: 120px 9px; animation: elysee-drapeau 3s ease-in-out infinite alternate; }
@keyframes elysee-drapeau { to { transform: skewY(-6deg) scaleX(.94); } }
@media (prefers-reduced-motion: reduce) { .elysee .drap-b, .elysee .drap-w, .elysee .drap-r { animation: none; } }
/* L'Élysée en maquette 3D au-dessus du titre (30 oct., rendu Blender : prototypes/logo-3d, mode « accueil »).
   Palais fixe en WebP + drapeau en 12 vues jouées par steps() ; la maquette se pose à l'arrivée puis respire à peine.
   La place du drapeau (%) vient de elysee-drapeau.json, écrit par le rendu : à recopier si on refait les images. */
/* Largeur : 320 px si la fenêtre est assez haute, sinon ce qui reste une fois le menu placé (≈ 910 px de barre, menu et marges,
   mesuré en 1920 × 1080), jamais moins de 150 px (en petite hauteur, l’accueil défilait déjà avant). 1,418 = largeur / hauteur de l'image. */
.accueil .titre .maquette { position: relative; display: block; aspect-ratio: 640 / 451; margin: 16px auto -20px;
  width: clamp(150px, calc((100 * var(--vhz, 1vh) - 910px) * 1.418), 320px);
  animation: maq-pose .75s cubic-bezier(.22, .9, .3, 1.15) both; }
.maquette .maq-corps { position: relative; z-index: 1; display: block; width: 100%; height: 100%;
  animation: maq-souffle 4.5s ease-in-out .9s infinite alternate; }
.maquette .maq-palais { display: block; width: 100%; height: auto; }
/* les span du titre ont une marge haute de 12 px (.titre span) : elle poussait toute la maquette et la toile du drapeau vers le bas, loin du haut du mât */
.accueil .titre .maquette .maq-corps, .accueil .titre .maquette .maq-drapeau, .accueil .titre .maquette .maq-ombre { margin: 0; }
.maquette .maq-drapeau { position: absolute; left: 54.31%; top: 7.564%; width: 7.759%; height: 10.567%;
  background: url(../images/logo/elysee-drapeau.webp) 0 0 / 1200% 100% no-repeat; animation: maq-drapeau 1.3s steps(12) infinite; }
.maquette .maq-ombre { position: absolute; z-index: 0; left: 8%; right: 4%; bottom: -3%; height: 26%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(23, 24, 28, .22), rgba(23, 24, 28, 0)); transform-origin: 50% 50%;
  animation: maq-ombre .75s ease-out both, maq-ombre-souffle 4.5s ease-in-out .9s infinite alternate; }
@keyframes maq-drapeau { to { background-position: 109.0909% 0; } }   /* 12 vues : la 12e position (12/11) n'est jamais affichée */
@keyframes maq-pose { from { opacity: 0; transform: translateY(-26px); } 70% { opacity: 1; } }
@keyframes maq-souffle { to { transform: translateY(-3px); } }
@keyframes maq-ombre { from { opacity: 0; transform: scale(.55); } }
@keyframes maq-ombre-souffle { to { transform: scale(.95); opacity: .8; } }
@media (max-height: 1100px) and (min-height: 821px) { .accueil .titre b { font-size: 88px; } }   /* place pour la maquette en 1080p */
html.anim-reduites .maquette, html.anim-reduites .maquette * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .maquette, .maquette * { animation: none !important; } }
/* La signature, sous le menu */
.accueil .signature { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; font-family: var(--f-texte); font-style: italic; font-size: 15px; color: var(--encre-2); }
.accueil .signature::before, .accueil .signature::after { content: ''; width: 34px; border-top: 1px solid var(--encre-3, #8a857c); }
.accueil .signature em { margin-left: 4px; font-family: var(--f-titre); font-style: normal; font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--encre); }

/* ---------- Objectifs par candidat (js/objectifs.js) : dossier de sélection et « Mes succès » ---------- */
.objectifs { width: 64%; margin-top: 14px; }   /* comme .fiche-tableau : laisse la place au tampon « Niveau » */
.objectifs h3 { font-family: var(--f-titre); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 6px; color: var(--encre-2); }
.objectifs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.objectifs li { display: flex; align-items: center; gap: 8px; font-family: var(--f-texte); font-size: 13px; line-height: 1.3; color: var(--encre-2); }
.objectifs li.ok { color: var(--encre); }
.objectifs .medaille { flex: none; }

/* ---------- « Mes succès » : le carnet du joueur (js/succes.js) ----------
   Un classeur à onglets kraft (comme celui de l'écran de partie) : Médailles, Événements, Légendaires, Affiches, Fins, Succès.
   Ce qui n'est pas encore découvert reste en pointillés, en silhouette ou en « ??? ». */
/* ---------- Continuer (js/accueil.js : FENETRES.continuer) ----------
   Un dossier kraft par emplacement : feuille avec le Polaroid du candidat, score, date, ruban de la campagne et ses jalons ;
   tampon « Dernière partie » sur la plus récente ; emplacement libre en pointillés. Tout le dossier est cliquable. */
.modale .boite.reprise { width: min(1060px, 94vw); padding: 24px 28px 22px; overflow-x: hidden; }   /* les dossiers qui glissent et le tampon qui claque débordaient : barre horizontale fugace (18 oct.) */
.reprise .rep-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; align-items: stretch; }
.reprise .rep-dossier { position: relative; display: block; text-decoration: none; color: inherit; border-radius: 4px 12px 6px 6px; padding: 14px 12px 12px;
    background: linear-gradient(170deg, color-mix(in srgb, var(--kraft) 88%, #fff), var(--kraft-fonce)); box-shadow: var(--ombre-papier);
    transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); animation: entre .45s cubic-bezier(.2, .9, .3, 1) both; }
.reprise .rep-dossier:nth-child(2) { animation-delay: .07s; } .reprise .rep-dossier:nth-child(3) { animation-delay: .14s; }
.reprise .rep-dossier::before { content: attr(data-onglet); position: absolute; top: -24px; left: 20px; height: 26px; padding: 5px 14px 0; border-radius: 8px 8px 0 0;
    background: color-mix(in srgb, var(--kraft) 88%, #fff); font-family: var(--f-chiffre); font-size: 11px; letter-spacing: .08em; color: #3a2c18; }
.reprise .rep-dossier:hover, .reprise .rep-dossier:focus-visible { transform: translateY(-6px) rotate(-.4deg); outline: none; }
.reprise .rep-dossier:focus-visible .feuille { outline: 3px solid var(--postit); outline-offset: 3px; }
.reprise .feuille { height: 100%; display: flex; flex-direction: column; padding: 18px 18px 16px; border-top: 5px solid var(--parti); }
.reprise .polaroid { width: 118px; align-self: center; padding: 6px 6px 24px; margin-bottom: 14px; }
.reprise .polaroid .photo { background: color-mix(in srgb, var(--parti) 16%, #fff); }
.reprise .polaroid figcaption { bottom: 5px; font-size: 11px; }
.reprise .polaroid .initiales { width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: var(--parti); color: #fff; font-family: var(--f-titre); font-weight: 900; font-size: 40px; }
.reprise .trombone { left: 18px; }
.reprise .rep-tampon { position: absolute; top: 34px; right: 12px; font-size: 16px; line-height: 1; text-align: center; padding: 5px 8px 3px; transform: rotate(9deg); }
.reprise .rep-tampon.claque { animation-name: claque-rep; animation-delay: .45s; }
@keyframes claque-rep { 0% { transform: rotate(14deg) scale(2.2); opacity: 0; } 60% { transform: rotate(8deg) scale(.94); opacity: .95; } 100% { transform: rotate(9deg); opacity: .88; } }
.reprise .rep-nom { font-family: var(--f-titre); font-weight: 900; font-size: 30px; line-height: .9; text-transform: uppercase; text-align: center; }
.reprise .rep-parti { font-family: var(--f-ui); font-size: 12px; text-align: center; color: var(--encre-2); margin-top: 4px; }
.reprise .rep-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 14px 0 4px; padding: 8px 0; border-top: 1.5px solid var(--encre); border-bottom: 1px dashed var(--ligne-forte); }
.reprise .rep-score b { font-size: 34px; font-weight: 600; line-height: 1; }
.reprise .rep-score small { font-family: var(--f-titre); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); }
.reprise .rep-date { font-size: 11px; color: var(--encre-2); text-align: center; margin-top: 6px; }
.reprise .rep-ruban { position: relative; height: 8px; margin: 10px 2px 6px; background: color-mix(in srgb, var(--kraft) 45%, var(--papier)); border-radius: 4px; }
.reprise .rep-ruban i { position: absolute; inset: 0 auto 0 0; background: var(--parti); border-radius: 4px; }
.reprise .rep-ruban span { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--encre); }
.reprise .rep-prochain { font-family: var(--f-texte); font-size: 13px; font-style: italic; text-align: center; color: var(--encre-2); }
.reprise .rep-prochain b { font-family: var(--f-titre); font-style: normal; text-transform: uppercase; letter-spacing: .04em; color: var(--encre); }
.reprise .rep-go { display: flex; margin-top: auto; font-size: 20px; padding: 10px 14px; }
.reprise .rep-prochain + .rep-go { margin-top: 16px; }
.reprise .rep-dossier:hover .rep-go { background: #e23a34; }
.reprise .rep-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 380px; padding: 20px; text-align: center;
    border: 2px dashed var(--ligne-forte); border-radius: 6px 12px 6px 6px; color: var(--encre-3); }
.reprise .rep-vide span { font-family: var(--f-chiffre); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.reprise .rep-vide em { font-family: var(--f-texte); font-size: 16px; }
.reprise .rep-vide .btn { margin-top: 14px; font-size: 16px; padding: 8px 14px; }
html.anim-reduites .reprise .rep-dossier, html.anim-reduites .reprise .rep-tampon { animation: none; }
@media (max-width: 820px) { .reprise .rep-grille { grid-template-columns: 1fr; } .reprise .rep-vide { min-height: 0; } }
/* taille fixe : seul le contenu de l'onglet défile, la fenêtre ne bouge pas d'un onglet à l'autre */
.modale .boite.carnet { width: min(1040px, 94vw); height: min(760px, calc(90 * var(--vhz, 1vh))); max-height: none; padding: 22px 26px 18px; display: flex; flex-direction: column; overflow: hidden; }
.modale .boite.carnet > .btn { align-self: flex-start; flex: none; margin-top: 14px; }
.carnet .sc-tete { flex: none; }
.carnet .sc-classeur { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.carnet .sc-tete .sous { margin-bottom: 14px; }
.carnet .sc-onglets { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding-left: 8px; }
.carnet .sc-onglets button { flex: none; display: grid; gap: 1px; text-align: left; padding: 8px 14px 7px; background: var(--kraft); color: var(--encre); border: 1.5px solid var(--kraft-fonce); border-bottom: 0;
  border-radius: 6px 6px 0 0; font-family: var(--f-titre); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transform: translateY(3px); transition: transform .12s; }
.carnet .sc-onglets button small { font-family: var(--f-chiffre); font-weight: 500; font-size: 10.5px; letter-spacing: .04em; text-transform: none; color: #5d4a2a; }
.carnet .sc-onglets button:hover { transform: translateY(0); }
.carnet .sc-onglets button[aria-selected="true"] { background: var(--papier); border-color: var(--ligne-forte); transform: translateY(1px); box-shadow: inset 0 -3px 0 var(--correcteur); }
.carnet .sc-panneau { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; background: var(--papier); border: 1.5px solid var(--ligne-forte); border-radius: 0 6px 6px 6px; padding: 18px 20px 20px; box-shadow: var(--ombre-papier); }
.carnet .sc-intro { margin: 0 0 14px; font-family: var(--f-texte); font-style: italic; font-size: 15px; color: var(--encre-2); max-width: 70ch; }
.carnet .sc-h4 { margin: 18px 0 8px; font-family: var(--f-titre); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.carnet ul { padding: 0; list-style: none; }
.carnet .sc-barre { display: block; height: 7px; background: var(--ligne); border-radius: 2px; overflow: hidden; }
.carnet .sc-barre i { display: block; width: 0; height: 100%; background: var(--encre); transition: width .8s cubic-bezier(.2, .8, .3, 1); }
/* médailles : une ligne par candidat */
.carnet .sc-medailles { display: grid; gap: 0; }
.carnet .sc-medailles li { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--ligne-forte); }
.carnet .sc-cand { display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center; }
.carnet .sc-cand img { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--papier-2); object-fit: cover; }
.carnet .sc-cand b { font-family: var(--f-titre); font-weight: 800; font-size: 15px; text-transform: uppercase; line-height: 1; }
.carnet .sc-cand small { font-family: var(--f-chiffre); font-size: 10.5px; color: var(--encre-3); text-transform: uppercase; letter-spacing: .05em; }
.carnet .sc-trois { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.carnet .sc-med { display: grid; grid-template-columns: 24px 1fr; gap: 6px; align-items: center; font-family: var(--f-texte); font-size: 12.5px; line-height: 1.25; color: var(--encre-3); }
.carnet .sc-med.ok { color: var(--encre); }
/* événements */
.carnet .sc-total { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; margin-bottom: 16px; }
.carnet .sc-compte { font-family: var(--f-chiffre); font-size: 15px; color: var(--encre-2); white-space: nowrap; }
.carnet .sc-compte b { font-family: var(--f-titre); font-weight: 900; font-size: 44px; line-height: 1; color: var(--encre); }
.carnet .sc-total .sc-barre { height: 10px; }
.carnet .sc-collections { display: grid; gap: 8px; }
.carnet .sc-collections li { display: grid; grid-template-columns: 280px 1fr 70px; gap: 12px; align-items: center; font-family: var(--f-texte); font-size: 14px; }
.carnet .sc-collections em { font-style: normal; font-family: var(--f-chiffre); font-size: 12px; text-align: right; color: var(--encre-2); }
.carnet .sc-trouvailles { display: flex; flex-wrap: wrap; gap: 6px; }
.carnet .sc-trouvailles li { padding: 4px 10px 3px; background: var(--postit); font-family: var(--f-texte); font-size: 13px; transform: rotate(-.6deg); box-shadow: var(--ombre-legere); }
.carnet .sc-trouvailles li:nth-child(even) { transform: rotate(.7deg); }
/* légendaires : des Polaroids punaisés ; ceux qu'on n'a pas recrutés restent en silhouette */
.carnet .sc-legendaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 18px; padding-top: 8px; }
.carnet .sc-legendaires li { position: relative; background: #fff; padding: 8px 8px 12px; box-shadow: var(--ombre-legere); transform: rotate(var(--r, 0deg)); border-top: 3px solid #c9a24b; text-align: center; transition: transform .2s, box-shadow .2s; }
.carnet .sc-legendaires li.vu:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 12px 20px -10px rgba(30,24,10,.45); }
.carnet .sc-legendaires li::before { content: ''; position: absolute; top: -8px; left: 50%; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--correcteur); box-shadow: 0 2px 2px rgba(0,0,0,.35); }
.carnet .sc-legendaires figure { margin: 0 0 8px; aspect-ratio: 1; background: #f6ecd0; overflow: hidden; }
.carnet .sc-legendaires img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carnet .sc-legendaires li.cache { border-top-color: var(--ligne-forte); }
.carnet .sc-legendaires li.cache figure { background: var(--papier-2); }
.carnet .sc-legendaires li.cache img { filter: brightness(0); opacity: .22; }
.carnet .sc-legendaires b { display: block; font-family: var(--f-titre); font-weight: 800; font-size: 15px; text-transform: uppercase; line-height: 1.05; }
.carnet .sc-legendaires small { display: block; margin-top: 2px; font-family: var(--f-chiffre); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-3); }
.carnet .sc-legendaires q, .carnet .sc-legendaires em { display: block; margin-top: 6px; font-family: var(--f-texte); font-style: italic; font-size: 12.5px; line-height: 1.3; color: var(--encre-2); }
/* affiches : des miniatures au mur ; les autres en pointillés */
.carnet .sc-affiches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 14px 12px; }
.carnet .sc-affiches li { display: grid; gap: 5px; }
.carnet .sc-aff-img { display: grid; place-items: center; aspect-ratio: 3 / 4; background: #fff; box-shadow: var(--ombre-legere); overflow: hidden; transition: transform .2s, box-shadow .2s; font-family: var(--f-titre); font-weight: 900; font-size: 28px; color: var(--encre-3); }
.carnet .sc-aff-img svg { width: 100%; height: 100%; display: block; }
.carnet .sc-affiches li.cache .sc-aff-img { background: transparent; box-shadow: none; border: 1.5px dashed var(--ligne-forte); }
.carnet .sc-affiches li:nth-child(3n) .sc-aff-img { transform: rotate(-1.2deg); } .carnet .sc-affiches li:nth-child(3n+1) .sc-aff-img { transform: rotate(.9deg); }
.carnet .sc-affiches small { font-family: var(--f-texte); font-size: 11px; line-height: 1.2; color: var(--encre-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* fins : des tampons ; les fins cachées en pointillés */
.carnet .sc-fins { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.carnet .sc-fins li { display: grid; justify-items: center; gap: 10px; padding: 16px 12px; background: #fffdf6; border: 1px solid var(--ligne); text-align: center; }
.carnet .sc-tampon { display: inline-block; font-family: var(--f-titre); font-weight: 900; font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: var(--correcteur);
  border: 3px solid currentColor; border-radius: 4px; padding: 4px 12px 2px; transform: rotate(var(--r, -6deg)); opacity: .88; mix-blend-mode: multiply; }
.carnet .sc-fins li.cache .sc-tampon { color: var(--encre-3); border-style: dashed; opacity: .7; }
.carnet .sc-fins small { font-family: var(--f-texte); font-size: 13px; line-height: 1.35; color: var(--encre-2); }
.carnet .sc-fins li.vu small { color: var(--encre); }
.carnet .sc-bientot { display: grid; justify-items: center; gap: 14px; padding: 60px 20px; text-align: center; }
.carnet .sc-bientot p { font-family: var(--f-texte); font-style: italic; color: var(--encre-2); max-width: 46ch; }
/* gestes sobres, une seule fois par onglet (classe .anime posée par js/succes.js) */
.carnet .sc-panneau:not([hidden]) { animation: sc-fondu .22s ease-out; }
@keyframes sc-fondu { from { opacity: 0; } }
@keyframes sc-entre { from { opacity: 0; transform: translateY(8px); } }
@keyframes sc-pose { from { opacity: 0; transform: translateY(-16px) rotate(calc(var(--r, 0deg) * 4)); } }
@keyframes sc-claque { 0% { opacity: 0; transform: rotate(calc(var(--r, -6deg) - 8deg)) scale(2); } 60% { opacity: .95; transform: rotate(var(--r, -6deg)) scale(.94); } }
.carnet .anime :is(.sc-medailles, .sc-collections, .sc-trouvailles, .sc-affiches, .sc-fins) > li { animation: sc-entre .38s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 40ms); }
.carnet .anime .sc-legendaires > li { animation: sc-pose .5s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.carnet .anime .sc-fins > li.vu .sc-tampon { animation: sc-claque .4s cubic-bezier(.2, 1.6, .4, 1) both; animation-delay: calc(var(--i, 0) * 40ms + .25s); }
.carnet .anime .sc-bientot .sc-tampon { animation: sc-claque .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.carnet .sc-affiches li.vu .sc-aff-img:hover { transform: translateY(-3px) rotate(0deg); box-shadow: 0 10px 16px -8px rgba(30,24,10,.45); }
@media (prefers-reduced-motion: reduce) { .carnet .sc-panneau, .carnet .anime * { animation: none !important; } .carnet .sc-barre i { transition: none; } }

/* ---------- Comptes joueurs (js/compte-ui.js, 16 oct. 2026) : fenêtre simple de la charte ---------- */
.lien-barre .compte-point { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #2f8f4e; vertical-align: 2px; }
.modale .onglets-compte { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 2px solid var(--encre); }
.modale .onglets-compte button { padding: 7px 14px 5px; font-family: var(--f-titre); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); background: transparent; border: 0; border-radius: 4px 4px 0 0; cursor: pointer; }
.modale .onglets-compte button[aria-selected="true"] { color: var(--papier); background: var(--encre); }
.modale .form-compte { display: grid; gap: 12px; }
.modale .champ { display: grid; gap: 4px; }
.modale .champ span { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); }
.modale .champ input { font: 16px var(--f-ui); padding: 9px 11px; color: var(--encre); background: #fffdf6; border: 2px solid var(--encre); border-radius: 4px; }
.modale .champ input:focus { outline: 3px solid var(--postit); outline-offset: 1px; }
.modale .form-compte .erreur { margin: 0; min-height: 1em; font-family: var(--f-ui); font-size: 14px; color: var(--correcteur); }
.modale .form-compte .erreur:empty { display: none; }
.modale .form-compte .btn.principal { justify-self: start; margin-top: 0; }
.modale .lien-oubli { justify-self: start; padding: 0; font: 14px var(--f-ui); color: var(--encre-2); text-decoration: underline; background: none; border: 0; cursor: pointer; }
.modale .mention { margin: 0; font-size: 13px !important; color: var(--encre-2); }
/* accord pour les nouvelles (20 oct.) : une case discrète, jamais cochée d'avance */
.modale .case-compte { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-family: var(--f-texte); font-size: 13.5px; line-height: 1.4; color: var(--encre-2); cursor: pointer; }
.modale .case-compte input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--encre); }
.modale .case-compte.profil-nouvelles { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--ligne-forte); }
.modale .choix-compte { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modale .carte-choix { display: grid; gap: 6px; padding: 14px; text-align: left; background: #fffdf6; border: 2px solid var(--encre); border-radius: 4px; box-shadow: 4px 4px 0 var(--encre); cursor: pointer; font: inherit; color: var(--encre); }
.modale .carte-choix:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--encre); }
.modale .carte-choix b { font-family: var(--f-titre); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.modale .carte-choix span { font-family: var(--f-chiffre); font-size: 12px; }
.modale .carte-choix em { font-family: var(--f-texte); font-size: 13px; color: var(--encre-2); }
.modale .profil-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.modale .profil-actions .btn { margin-top: 0; }
.modale .btn.danger { color: var(--correcteur); }
@media (max-width: 560px) { .modale .choix-compte { grid-template-columns: 1fr; } }
.modale .profil-actions .btn[aria-pressed="true"] { background: var(--encre); color: var(--papier); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--encre); }
.modale .profil-actions .btn.danger[aria-pressed="true"] { background: var(--correcteur); color: #fff; }
.modale .profil-panneau { display: grid; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 2px solid var(--encre); }
.modale .profil-panneau h4 { margin: 0; font-family: var(--f-titre); font-weight: 800; font-size: 20px; text-transform: uppercase; }
.modale .profil-panneau p { margin: 0; }

/* Logo des barres noires (31 oct.) : la maquette 3D dépouillée de l'Élysée (elysee-entete.webp, 96 px de haut pour le 2K) */
.logo-symbole { display: inline-block; height: 30px; width: auto; margin: -4px 4px -4px 0; vertical-align: middle; flex: none; }

/* ---------- Options (js/options.js) : sur l'accueil (.modale) et dans le menu Pause de la partie (#modal) ; game.php charge aussi cette feuille ---------- */
body { zoom: calc(var(--zo, 1) * var(--reduc, 1)); --vhz: calc(1vh / (var(--zo, 1) * var(--reduc, 1))); }   /* option « Taille de l'interface » × réduction des petites fenêtres (--reduc, js/mobile-bascule.js) ; l'écran de partie la combine avec son propre zoom (partie.css) */
.opt { display: grid; gap: 0; }
.opt-ligne { display: grid; grid-template-columns: 170px 1fr; gap: 4px 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--ligne); }
.opt-ligne:first-child { border-top: 0; padding-top: 2px; }
.opt-titre { font-family: var(--f-titre); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.opt-ligne small { grid-column: 2; font-family: var(--f-texte); font-style: italic; font-size: 13px; line-height: 1.35; color: var(--encre-2); }
.opt-choix { display: inline-flex; width: fit-content; border: 2px solid var(--encre); border-radius: 5px; overflow: hidden; background: #fffdf6; }
.opt-choix button { padding: 6px 12px 5px; font-family: var(--f-ui); font-weight: 600; font-size: 14px; color: var(--encre); background: transparent; border: 0; border-left: 2px solid var(--encre); cursor: pointer; }
.opt-choix button:first-child { border-left: 0; }
.opt-choix button:hover { background: var(--postit); }
.opt-choix button[aria-checked="true"] { color: var(--papier); background: var(--encre); }
.opt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-actions button { padding: 6px 12px 5px; font-family: var(--f-ui); font-weight: 600; font-size: 14px; color: var(--encre); background: #fffdf6; border: 2px solid var(--encre); border-radius: 5px; box-shadow: 2px 2px 0 var(--encre); cursor: pointer; }
.opt-actions button:hover:not(:disabled) { background: var(--postit); }
.opt-actions button:disabled { opacity: .55; cursor: default; box-shadow: none; }
.opt-actions .opt-danger { color: var(--correcteur); border-color: var(--correcteur); box-shadow: 2px 2px 0 var(--correcteur); }
.opt-actions .opt-danger.confirm { color: #fff; background: var(--correcteur); }
@media (max-width: 560px) { .opt-ligne { grid-template-columns: 1fr; } .opt-ligne small { grid-column: 1; } }

/* ---------- Atelier du portrait de « Votre candidat » (js/createur-portrait.js, dans la boîte .modale) ---------- */
.modale .boite.atelier { width: min(940px, 94vw); max-height: calc(92 * var(--vhz, 1vh)); }
.atelier .at-corps { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.atelier .at-gauche { display: grid; gap: 18px; justify-items: center; padding-top: 10px; }
.atelier .at-photo { width: 260px; transform: rotate(-2deg); }
.atelier .at-photo .photo { place-items: end center; background: #dfe7ee; }
.atelier .at-humeurs { display: grid; grid-template-columns: repeat(4, 58px); gap: 8px; }
.atelier .at-humeurs button { padding: 2px; background: #fff; border: 2px solid var(--ligne); border-radius: 4px; cursor: pointer; }
.atelier .at-humeurs button:hover { border-color: var(--encre-2); }
.atelier .at-humeurs button[aria-checked="true"] { border-color: var(--encre); box-shadow: 2px 2px 0 var(--encre); }
.atelier .at-humeurs img { width: 100%; display: block; aspect-ratio: 1; }
.atelier .at-reglages { display: grid; gap: 0; }
.atelier .at-ligne { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ligne); }
.atelier .at-ligne:first-child { border-top: 0; }
.atelier .at-titre { font-family: var(--f-titre); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.atelier .at-pas { display: inline-grid; grid-template-columns: 34px 200px 34px; align-items: center; width: fit-content; border: 2px solid var(--encre); border-radius: 5px; background: #fffdf6; overflow: hidden; }
.atelier .at-pas button { height: 32px; font: 800 20px/1 var(--f-titre); color: var(--encre); background: transparent; border: 0; cursor: pointer; }
.atelier .at-pas button:hover { background: var(--postit); }
.atelier .at-pas output { text-align: center; font-family: var(--f-ui); font-weight: 600; font-size: 14px; border-inline: 2px solid var(--encre); line-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.atelier .at-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.atelier .at-pastilles button { width: 26px; height: 26px; border-radius: 50%; background: var(--p); border: 2px solid rgba(23, 24, 28, .25); cursor: pointer; padding: 0; }
.atelier .at-pastilles button:hover { transform: scale(1.1); }
.atelier .at-pastilles button[aria-checked="true"] { border-color: var(--encre); box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--encre); }
.atelier .at-pastilles button.aucune { background: repeating-linear-gradient(45deg, #fff 0 4px, #e6e1d6 4px 8px); }
.atelier .at-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 8px; }
.atelier .at-actions .btn { margin-top: 0; }
.atelier .at-actions .btn.principal { font-size: 18px; padding: 9px 16px; }
.atelier .at-actions #fermer { margin-right: auto; }
/* lien « Composer votre portrait » sous le Polaroid du dossier vierge */
.portrait-perso .lien-photo { font-size: 12px; }
.lien-photo { font: italic 13px var(--f-texte); color: var(--encre); background: none; border: 0; text-decoration: underline; cursor: pointer; padding: 0; }
.lien-photo:hover { color: var(--correcteur); }
@media (max-width: 760px) { .atelier .at-corps { grid-template-columns: 1fr; } .atelier .at-pas { grid-template-columns: 34px 1fr 34px; } }

/* ---------- Entretien de « Votre candidat » (js/entretien.js) : le conseiller à gauche, sa bulle et les réponses à droite ---------- */
.modale .boite.entretien { width: min(980px, 94vw); max-height: calc(92 * var(--vhz, 1vh)); }
.entretien .en-corps { display: grid; grid-template-columns: 200px 1fr; gap: 26px; align-items: start; }
.entretien .en-conseiller { display: grid; justify-items: center; text-align: center; gap: 2px; position: sticky; top: 0; }
.entretien .en-visage { width: 180px; background: #dfe7ee; border: 2px solid var(--encre); border-radius: 6px; box-shadow: 4px 4px 0 var(--encre); margin-bottom: 8px; }
.entretien .en-conseiller b { font-family: var(--f-titre); font-weight: 800; font-size: 18px; text-transform: uppercase; }
.entretien .en-conseiller small { font-family: var(--f-texte); font-style: italic; font-size: 13px; color: var(--encre-2); }
.entretien .en-bulle { position: relative; background: #fffdf6; border: 2px solid var(--encre); border-radius: 8px; padding: 14px 18px; margin-bottom: 16px; }
.entretien .en-bulle::before { content: ''; position: absolute; left: -12px; top: 26px; border: 10px solid transparent; border-right-color: var(--encre); border-left: 0; }
.entretien .en-bulle p { font-family: var(--f-texte); font-size: 17px; line-height: 1.45; }
.entretien .en-bulle p + p { margin-top: 8px; }
.entretien .en-theme { display: block; font-family: var(--f-chiffre); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2); margin-bottom: 4px; }
.entretien .en-progres { display: grid; gap: 4px; margin-bottom: 10px; font-family: var(--f-chiffre); font-size: 11px; color: var(--encre-2); }
.entretien .en-progres i { height: 4px; background: linear-gradient(90deg, var(--encre) var(--p), var(--ligne) var(--p)); }
.entretien .en-consigne { font-family: var(--f-titre); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--correcteur); margin-bottom: 8px; }
/* l'affirmation lue par le conseiller, et l'échelle d'accord en cinq cases (du rouge au vert, en douceur) */
.entretien .en-bulle p.en-affirmation { font-size: 22px; line-height: 1.35; font-weight: 600; }
.entretien .en-echelle { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 4px; }
.entretien .en-echelle button { width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 14px 8px 12px;
  font: 600 14px/1.25 var(--f-ui); color: var(--encre); text-align: center; background: var(--papier); border: 2px solid var(--encre); border-radius: 6px; box-shadow: 3px 3px 0 var(--encre); cursor: pointer; transition: transform .08s; }
.entretien .en-echelle button i { display: block; border-radius: 50%; border: 2.5px solid var(--encre); background: var(--teinte); }
.entretien .en-echelle .n0 { --teinte: #d9534a; } .entretien .en-echelle .n0 i { width: 34px; height: 34px; }
.entretien .en-echelle .n1 { --teinte: #f0a49c; } .entretien .en-echelle .n1 i { width: 26px; height: 26px; margin-top: 4px; }
.entretien .en-echelle .n2 { --teinte: #e6e1d6; } .entretien .en-echelle .n2 i { width: 20px; height: 20px; margin-top: 7px; }
.entretien .en-echelle .n3 { --teinte: #9fd3ad; } .entretien .en-echelle .n3 i { width: 26px; height: 26px; margin-top: 4px; }
.entretien .en-echelle .n4 { --teinte: #2f8f4e; } .entretien .en-echelle .n4 i { width: 34px; height: 34px; }
.entretien .en-echelle button:hover { background: color-mix(in srgb, var(--teinte) 22%, var(--papier)); }
.entretien .en-echelle button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.entretien .en-echelle button[aria-pressed="true"] { background: color-mix(in srgb, var(--teinte) 45%, var(--papier)); }
@media (max-width: 760px) { .entretien .en-echelle { grid-template-columns: 1fr; } .entretien .en-echelle button { grid-auto-flow: column; justify-content: start; } }
.entretien .en-reponses { list-style: none; padding: 0; display: grid; gap: 8px; }
.entretien .en-reponses button { width: 100%; text-align: left; font: 15px/1.35 var(--f-ui); color: var(--encre); background: var(--papier); border: 2px solid var(--encre); border-radius: 5px; padding: 9px 14px; box-shadow: 3px 3px 0 var(--encre); cursor: pointer; transition: transform .08s; }
.entretien .en-reponses button:hover { background: var(--postit); }
.entretien .en-reponses button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
.entretien .en-reponses button[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.entretien .en-actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 14px; }
.entretien .en-actions .btn { margin-top: 0; }
.entretien .en-actions .btn.principal { font-size: 18px; padding: 9px 16px; }
.entretien .lien-retour { margin-right: auto; font: italic 14px var(--f-texte); color: var(--encre-2); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.entretien .en-titre { font-size: 26px; }
.entretien .en-famille { font-size: 26px; margin: 10px 0 6px 4px; display: inline-grid; line-height: 1; }
.entretien .en-famille small { font-size: 11px; letter-spacing: .12em; }
.entretien .en-explique { font-family: var(--f-texte); font-size: 15px; margin: 6px 0 14px; }
.entretien .en-actions #fermer { order: -1; }
@media (max-width: 760px) { .entretien .en-corps { grid-template-columns: 1fr; } .entretien .en-conseiller { position: static; } .entretien .en-visage { width: 110px; } }

/* ---------- Identité et point de départ de « Votre candidat » (js/identite.js) : la fiche à gauche, le formulaire à droite ---------- */
.modale .boite.identite-perso { width: min(1060px, 95vw); max-height: calc(94 * var(--vhz, 1vh)); }
.identite-perso .id-corps { display: grid; grid-template-columns: 300px 1fr; gap: 30px; align-items: start; }
.identite-perso .id-fiche { position: sticky; top: 0; display: grid; gap: 10px; justify-items: start; padding: 18px; background: #fffdf6; border: 1.5px solid var(--ligne); box-shadow: var(--ombre-legere); }
.identite-perso .id-fiche .polaroid { width: 200px; justify-self: center; margin-bottom: 8px; }
.identite-perso .id-fiche .photo { place-items: end center; background: color-mix(in srgb, var(--parti) 18%, #fff); }
.identite-perso .id-vide { align-self: center; font-family: var(--f-titre); font-weight: 900; font-size: 80px; color: #9aa3ae; }
.identite-perso .id-fiche .nom-grand { font-size: 40px; }
.identite-perso .id-fiche .parti i { background: var(--parti); }
.identite-perso .id-fiche .tampon-niveau { position: static; max-width: none; transform: rotate(-6deg); margin-top: 6px; }
.identite-perso .id-form { gap: 10px; }
.identite-perso .id-deux { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.identite-perso .champ small { font-family: var(--f-texte); font-style: italic; font-size: 12px; color: var(--encre-2); }
.identite-perso .opt-choix { margin-top: 2px; }
.identite-perso .at-pastilles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.identite-perso .at-pastilles button { width: 26px; height: 26px; border-radius: 50%; background: var(--p); border: 2px solid rgba(23, 24, 28, .25); cursor: pointer; padding: 0; }
.identite-perso .at-pastilles button[aria-checked="true"] { border-color: var(--encre); box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--encre); }
.identite-perso .id-profils { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.identite-perso .id-profil { position: relative; display: grid; gap: 4px; text-align: left; padding: 10px 12px 12px; color: var(--encre); background: var(--papier); border: 2px solid var(--encre); border-radius: 5px; box-shadow: 3px 3px 0 var(--encre); cursor: pointer; }
.identite-perso .id-profil:hover { background: #fffdf6; }
.identite-perso .id-profil[aria-pressed="true"] { background: var(--postit); }
.identite-perso .id-profil b { font-family: var(--f-titre); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .03em; padding-right: 92px; }
.identite-perso .id-profil em { font-family: var(--f-texte); font-size: 13px; line-height: 1.35; color: var(--encre-2); }
.identite-perso .id-chiffres { font-family: var(--f-chiffre); font-size: 12px; }
.identite-perso .id-niveau { position: absolute; top: 8px; right: 8px; font-size: 12px; padding: 3px 7px 1px; transform: rotate(4deg); }
.identite-perso .id-form > .btn.principal { justify-self: end; font-size: 18px; padding: 9px 16px; margin-top: 4px; }
.identite-perso .id-form > #fermer { justify-self: start; margin-top: -48px; }
@media (max-width: 820px) { .identite-perso .id-corps, .identite-perso .id-profils { grid-template-columns: 1fr; } .identite-perso .id-fiche { position: static; } }
/* dossier personnel : « Supprimer ce dossier » (deux clics) */
.lien-photo.lien-danger { color: var(--correcteur); }
.lien-photo.lien-danger.confirm { font-weight: 700; }
/* Photo manquante du dossier personnel : toute la photo est un bouton, comme les cartes « Recruter » de l'équipe (auteur : « plus voyant ») */
.photo-vide { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 2px; padding: 8px; cursor: pointer;
  background: repeating-linear-gradient(-45deg, #fffdf6 0 10px, #f3eee2 10px 20px); border: 2.5px dashed var(--correcteur); color: var(--encre); }
.photo-vide b { font-family: var(--f-titre); font-weight: 900; font-size: 64px; line-height: .8; color: var(--correcteur); }
.photo-vide span { font-family: var(--f-titre); font-weight: 900; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.photo-vide small { font-family: var(--f-texte); font-style: italic; font-size: 12px; color: var(--encre-2); text-align: center; }
.photo-vide:hover { background: var(--postit); }
.photo-vide:hover b { transform: scale(1.1); }
@media (prefers-reduced-motion: no-preference) { .photo-vide b { animation: photo-vide-bat 2.4s ease-in-out infinite; } }
@keyframes photo-vide-bat { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.18); } 90% { transform: scale(.96); } }
/* « Mes succès » : la ligne « Votre candidat », sans portrait */
.carnet .sc-cand .sc-vide { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 900 20px/1 var(--f-titre); font-style: normal; color: var(--encre-2); background: var(--papier-2); border: 1.5px dashed var(--encre-2); }

/* ---------- Entretien avec du peps (17 oct., auteur) : l'affirmation est une fiche posée sur le bureau, tamponnée puis retirée ;
   la réplique du conseiller « tombe » dans sa bulle (js/entretien.js) ---------- */
.entretien .en-fiche { position: relative; margin: 16px 6px 14px 2px; padding: 18px 22px 20px; background: #fffdf6; border: 1.5px solid var(--ligne-forte, rgba(23,24,28,.3)); box-shadow: 4px 5px 0 rgba(23, 24, 28, .18); transform: rotate(-.8deg); }
.entretien .en-fiche .en-affirmation { font-family: var(--f-texte); font-size: 24px; line-height: 1.32; font-weight: 600; }
.entretien .en-scotch { position: absolute; top: -9px; left: 50%; width: 90px; height: 20px; margin-left: -45px; background: rgba(255, 228, 107, .75); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.entretien .en-fiche.entre { animation: en-fiche-entre .38s cubic-bezier(.2, 1.2, .4, 1) both; }
.entretien .en-fiche.part { animation: en-fiche-part .35s ease-in forwards; }
@keyframes en-fiche-entre { from { opacity: 0; transform: translate(60px, -10px) rotate(5deg); } }
@keyframes en-fiche-part { to { opacity: 0; transform: translate(-80px, 30px) rotate(-9deg); } }
.entretien .en-tampon { position: absolute; right: 18px; bottom: 10px; padding: 4px 12px 2px; font-family: var(--f-titre); font-weight: 900; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--t); border: 3.5px solid currentColor; border-radius: 4px; transform: rotate(-9deg); opacity: .9; mix-blend-mode: multiply; animation: en-tampon .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.entretien .en-tampon.n0 { --t: #b3261e; } .entretien .en-tampon.n1 { --t: #d9534a; } .entretien .en-tampon.n2 { --t: #6b6b6b; } .entretien .en-tampon.n3 { --t: #2f8f4e; } .entretien .en-tampon.n4 { --t: #1d6b39; }
@keyframes en-tampon { from { opacity: 0; transform: rotate(-14deg) scale(2.2); } }
.entretien .en-bulle.parle { animation: en-bulle .32s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes en-bulle { 0% { transform: scale(.94); opacity: .4; } 100% { transform: none; opacity: 1; } }
.entretien .en-echelle button:disabled { cursor: default; }
.entretien .en-echelle button:disabled:not([aria-pressed="true"]) { opacity: .45; }

/* Au-dessus de la pile : remettre les noms d'origine quand des candidats ont été renommés (js/accueil.js : rendrePile) */
#pile-noms:empty { display: none; }
.noms-origine { display: inline-flex; align-items: baseline; gap: 7px; margin: -4px 0 14px; padding: 6px 12px 5px; cursor: pointer;
  font-family: var(--f-titre); font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--encre);
  background: var(--papier); border: 2px solid var(--encre); border-radius: 5px; box-shadow: 3px 3px 0 var(--encre); transform: rotate(-1deg);
  animation: noms-origine-entre .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.noms-origine span { font-size: 17px; line-height: 0; color: var(--correcteur); }
.noms-origine small { font-family: var(--f-chiffre); font-weight: 400; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--encre-2); }
.noms-origine:hover { background: var(--postit); }
.noms-origine:active { transform: rotate(-1deg) translate(2px, 2px); box-shadow: 1px 1px 0 var(--encre); }
@keyframes noms-origine-entre { from { opacity: 0; transform: rotate(-1deg) translateY(-6px); } }
/* « Abandonner ce personnage » (dossier « Votre candidat ») : bouton secondaire bien visible, à l'encre rouge ; deux clics */
.actions .bouton-abandon { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px 10px; cursor: pointer;
  font-family: var(--f-titre); font-weight: 800; font-size: 17px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--correcteur); background: var(--papier); border: 2.5px solid var(--correcteur); border-radius: 4px; box-shadow: 4px 4px 0 var(--correcteur); }
.actions .bouton-abandon span { font-size: 15px; }
.actions .bouton-abandon:hover { background: #fdecea; }
.actions .bouton-abandon:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--correcteur); }
.actions .bouton-abandon.confirm { color: #fff; background: var(--correcteur); box-shadow: 4px 4px 0 var(--encre); }

/* ---------- Entretien : une fenêtre de taille fixe, un conseiller qui vit (17 oct., auteur) ---------- */
.modale .boite.entretien { height: min(700px, calc(92 * var(--vhz, 1vh))); display: flex; flex-direction: column; }
.entretien .en-corps { flex: 1; min-height: 0; }
.entretien .en-droite { display: flex; flex-direction: column; min-height: 0; }
.entretien .en-bulle { min-height: 92px; cursor: pointer; }
.entretien .en-fiche { min-height: 130px; }
.entretien .en-cadre-visage { width: 180px; margin-bottom: 8px; transform-origin: 50% 90%; animation: en-respire 4.2s ease-in-out infinite, en-penche 11s ease-in-out infinite; }
.entretien .en-cadre-visage .en-visage { margin-bottom: 0; display: block; }
@keyframes en-respire { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 0 -2px; scale: 1.012; } }
@keyframes en-penche { 0%, 62%, 100% { rotate: 0deg; } 68%, 78% { rotate: -2.2deg; } 84% { rotate: 1deg; } 90% { rotate: 0deg; } }
@media (prefers-reduced-motion: reduce) { .entretien .en-cadre-visage { animation: none; } }

/* ---------- Entretien : le sous-main de bureau occupe la place libre (17 oct., auteur : « plein de place vide bizarre ») ----------
   La fiche est posée au centre d'un sous-main kraft qui s'étire ; l'échelle et les boutons restent en bas. Sous le conseiller, le tas
   des fiches restantes descend au fil de l'entretien (js/entretien.js : tas). */
.entretien .en-corps { height: 100%; }
.entretien .en-conseiller { display: flex; flex-direction: column; align-items: center; height: 100%; }
.entretien .en-zone { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.entretien .en-bureau { flex: 1; min-height: 0; display: grid; place-items: center; margin: 4px 0 12px; padding: 18px 22px; overflow: auto;
  background: linear-gradient(160deg, color-mix(in srgb, var(--kraft) 80%, #fff), var(--kraft)); border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(58, 44, 24, .18), inset 0 6px 14px rgba(58, 44, 24, .18); }
.entretien .en-bureau .en-fiche { width: 100%; max-width: 640px; margin: 0; }
.entretien .en-theme em { float: right; font-style: normal; color: var(--encre-3); }
.entretien .en-zone > .en-consigne { margin-top: 0; }
/* l'accueil : le paquet des fiches à lire */
.entretien .en-paquet { position: relative; width: 300px; height: 170px; }
.entretien .en-paquet i { position: absolute; inset: 0; background: #fffdf6; border: 1.5px solid rgba(23,24,28,.25); box-shadow: 3px 4px 0 rgba(23,24,28,.15); }
.entretien .en-paquet i:nth-child(1) { transform: rotate(-6deg) translate(-8px, 6px); }
.entretien .en-paquet i:nth-child(2) { transform: rotate(3deg) translate(6px, 2px); }
.entretien .en-paquet span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #fffdf6; border: 1.5px solid rgba(23,24,28,.3);
  font-family: var(--f-titre); font-weight: 900; font-size: 34px; text-transform: uppercase; transform: rotate(-1deg); }
.entretien .en-paquet span small { font-family: var(--f-texte); font-style: italic; font-weight: 400; font-size: 14px; text-transform: none; color: var(--encre-2); }
/* le résultat : une feuille posée sur le sous-main */
.entretien .en-bureau-resultat { place-items: stretch; padding: 12px 16px; }
.entretien .en-feuille-resultat { background: var(--papier); padding: 14px 18px 16px; box-shadow: 3px 4px 0 rgba(23,24,28,.15); align-self: center; }
.entretien .en-feuille-resultat .en-titre { margin-top: 0; }
/* le tas des fiches restantes, sous le conseiller */
.entretien .en-tas { margin-top: auto; display: grid; justify-items: center; gap: 2px; padding-bottom: 4px; }
.entretien .en-tas-pile { position: relative; width: 120px; height: calc(18px + var(--h, 3) * 7px); transition: height .4s; }
.entretien .en-tas-pile i { position: absolute; left: 0; right: 0; height: 18px; background: #fffdf6; border: 1.5px solid rgba(23,24,28,.3); box-shadow: 2px 2px 0 rgba(23,24,28,.12); transition: opacity .3s; }
.entretien .en-tas-pile i:nth-child(1) { bottom: 0; transform: rotate(-2deg); }
.entretien .en-tas-pile i:nth-child(2) { bottom: 7px; transform: rotate(1.5deg); opacity: calc(var(--h, 3) - 1); }
.entretien .en-tas-pile i:nth-child(3) { bottom: 14px; transform: rotate(-1deg); opacity: calc(var(--h, 3) - 2); }
.entretien .en-tas-n { font-family: var(--f-titre); font-weight: 900; font-size: 34px; line-height: 1; margin-top: 6px; }
.entretien .en-tas-l { font-family: var(--f-chiffre); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--encre-2); }
.entretien .en-corps { align-items: stretch; }
.entretien .en-droite { height: 100%; }
.entretien .en-conseiller { position: static; }
/* la fiche qui s'en va et le tampon qui tombe débordent un instant : pas de barre de défilement fugace (auteur, 17 oct.) */
.entretien .en-bureau { overflow: hidden; }
.entretien .en-bureau-resultat { overflow: auto; }
/* Le cadre reste fixe, seul le personnage bouge dedans (auteur, 17 oct.) : contour et fond passent du dessin au cadre */
.entretien .en-cadre-visage { animation: none; overflow: hidden; background: #dfe7ee; border: 2px solid var(--encre); border-radius: 6px; box-shadow: 4px 4px 0 var(--encre); }
.entretien .en-cadre-visage .en-visage { width: 100%; border: 0; border-radius: 0; box-shadow: none; background: none; transform-origin: 50% 100%;
  animation: en-respire 4.2s ease-in-out infinite, en-penche 11s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .entretien .en-cadre-visage .en-visage { animation: none; } }
.entretien .en-cadre-visage .en-visage { animation: en-respire-dedans 4.2s ease-in-out infinite, en-penche-dedans 11s ease-in-out infinite; }
@keyframes en-respire-dedans { 0%, 100% { scale: 1.02; } 50% { scale: 1.045; } }   /* ancré en bas : les épaules ne décollent jamais du bord */
@keyframes en-penche-dedans { 0%, 62%, 100% { rotate: 0deg; } 68%, 78% { rotate: -2.5deg; } 84% { rotate: 1.2deg; } 90% { rotate: 0deg; } }
/* La coupe du dessin (aux épaules) ne doit jamais se voir quand il bouge (auteur, 17 oct.) : le dessin, un peu plus grand que le cadre,
   descend sous son bord ; il respire et penche autour du bas, toujours caché */
.entretien .en-cadre-visage { position: relative; aspect-ratio: 1; }
.entretien .en-cadre-visage .en-visage { position: absolute; left: -2%; bottom: -6%; width: 104%; max-width: none; transform-origin: 50% 100%; }
@keyframes en-respire-dedans { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes en-penche-dedans { 0%, 62%, 100% { rotate: 0deg; } 68%, 78% { rotate: -2deg; } 84% { rotate: 1deg; } 90% { rotate: 0deg; } }

/* ---------- Le tuto (js/tuto.js) : Dédé le propose au premier « Jouer », ou reprend au chapitre atteint ---------- */
.tuto-proposition { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; }
.tuto-proposition img { width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--postit, #f6d84a) 55%, #fff); border: 2px solid var(--encre, #17181c); }
.tuto-proposition p { margin-top: 6px; line-height: 1.5; }
.tuto-choix { display: grid; gap: 10px; margin: 18px 0 10px; }