/* =================================================================================================
   UNITYRP - LIFE — feuille de style unique du site (DA « rouge et blanc » du 11/10/2026)
   Site public, espace client (/client) et administration (/admin) partagent le même système :
   jetons de couleur, typographie, boutons, cartes, formulaires, tableaux. Aucun style en ligne
   (CSP stricte) : tout est ici.
   Direction artistique : blanc, un rouge vif et l'encre noire, à plat. Formes de jeu vidéo :
   angles coupés, diagonales, hachures, ombres dures décalées ; grands titres condensés en
   capitales (Bebas Neue), texte en Inter, étiquettes techniques en IBM Plex Mono. Aucun dégradé
   de couleur, aucun halo, aucun effet de verre.  Développeur : Dylou
   ================================================================================================= */

/* ---------------------------------------------------------------- Polices (locales) */
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('../fonts/inter-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-display: swap; src: url('../fonts/inter-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('../fonts/inter-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('../fonts/inter-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 800; font-display: swap; src: url('../fonts/inter-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-weight: 400; font-display: swap; src: url('../fonts/bebas-neue-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 500; font-display: swap; src: url('../fonts/caveat-500-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------- Jetons */
:root {
    color-scheme: light;
    --fond: #f3f3f1;          /* fond des pages d'application et des sections grises */
    --fond-2: #eceae6;
    --surface: #ffffff;
    --surface-2: #fafaf8;
    --surface-3: #f0efec;
    --survol: rgba(14, 14, 16, .05);
    --bord: #e6e5e1;
    --bord-2: #d8d7d2;
    --bord-3: #a8a7a1;
    --texte: #141417;
    --doux: #4a4a52;
    --pale: #6b6b74;
    --encre: #0e0e10;
    --papier: #ffffff;

    --rouge: #e3102e;          /* contraste 4,9:1 avec le blanc (texte et fonds) */
    --rouge-vif: #ff1f3d;
    --rouge-sombre: #b70b24;
    --rouge-clair: #ff5c72;    /* sur fond noir */
    --rouge-doux: #fdecef;
    --rouge-bord: #f3b4be;
    --lien: #c40c27;
    --or: #e89c12;             /* étoiles des avis */
    --degrade: var(--rouge);   /* (ancien nom) aplat rouge */
    --accent: var(--rouge);
    --accent-texte: #fff;
    --accent-doux: var(--rouge-doux);
    --accent-bord: var(--rouge-bord);

    --ok: #0b8457;     --ok-doux: #e5f4ed;
    --warn: #a35f05;   --warn-doux: #fff2dc;
    --danger: #cf1730; --danger-doux: #fdeaed;
    --info: #1c5cc2;   --info-doux: #e8effb;
    --violet: #6544d4; --violet-doux: #efeafd;
    --discord: #5865f2;

    --rayon-s: 0;
    --rayon: 0;
    --rayon-l: 0;
    --rayon-xl: 0;
    --c: 10px;                 /* taille des angles coupés */
    --ombre: 0 12px 30px -16px rgba(14, 14, 16, .3);
    --ombre-l: 0 24px 60px -24px rgba(14, 14, 16, .42);
    --police: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --titre: 'Bebas Neue', 'Inter', sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --entete: 74px;
    --transition: .18s cubic-bezier(.2, .7, .3, 1);
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete) + 16px); scrollbar-color: #b9b8b2 var(--surface-3); }
body {
    margin: 0; min-height: 100vh; background: var(--surface); color: var(--texte);
    font: 400 15px/1.6 var(--police); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
/* Liens dans le texte (paragraphes, messages, aides) : soulignés ; les liens de navigation ne le sont pas */
:where(p, label, dd, small, .prose, .message, .aide, .bulle-texte) a:not([class]) { color: var(--lien); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: rgba(196, 12, 39, .35); text-underline-offset: 3px; }
:where(p, label, dd, small, .prose, .message, .aide, .bulle-texte) a:not([class]):hover { text-decoration-color: currentColor; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
h1 { font-size: clamp(28px, 3.2vw, 40px); }
h2 { font-size: clamp(22px, 2.4vw, 30px); }
h3 { font-size: 18px; letter-spacing: -.01em; }
h4 { font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, .mono { font-family: var(--mono); font-size: .92em; }
kbd { padding: 1px 6px; border: 1px solid var(--bord-2); border-bottom-width: 2px; background: var(--surface-2); font-size: .85em; }
hr { border: 0; border-top: 1px solid var(--bord-2); margin: 24px 0; }
::selection { background: var(--rouge); color: #fff; }
:focus-visible { outline: 2px solid var(--rouge); outline-offset: 2px; }
[hidden] { display: none !important; }

.ico { width: 18px; height: 18px; flex: 0 0 auto; }
.ico-grand { width: 26px; height: 26px; }
.visuellement-cache, .vc {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.visuellement-cache:focus { position: fixed !important; top: 12px; left: 12px; width: auto; height: auto; clip: auto; z-index: 1000; padding: 10px 16px; background: var(--rouge); color: #fff; font-weight: 800; }

/* ---------------------------------------------------------------- Typographie utilitaire */
.surtitre {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
    font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge);
}
.surtitre .ico { width: 15px; height: 15px; }
/* Grand titre de la DA : capitales condensées */
.titre-affiche, .affiche { font-family: var(--titre); font-weight: 400; letter-spacing: .01em; line-height: .9; text-transform: uppercase; }
.degrade { color: var(--rouge); }
/* Mot souligné d'un trait rouge tracé à la main */
.souligne { position: relative; white-space: nowrap; padding-bottom: .12em; background: url('../img/trait.svg') no-repeat 0 100% / 100% .34em; }
/* Étiquette en parallélogramme (titres de tuiles, prix, nouveautés) */
.etiquette-rouge {
    --etiquette: var(--rouge);
    display: inline-block; padding: .1em .55em .02em; background: var(--etiquette);
    clip-path: polygon(.28em 0, 100% 0, calc(100% - .28em) 100%, 0 100%);
    font-family: var(--titre); font-weight: 400; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
/* Texte en creux (contour seul) */
.contour-texte { color: transparent; -webkit-text-stroke: 1.5px var(--encre); }
/* Étiquettes techniques (dates, catégories, lieux) : petite police à chasse fixe, précédée de « // » */
.meta { display: block; margin: 0 0 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.meta::before { content: '//\00a0'; }
.meta-note { margin: 0; font: 400 11.5px/1.5 var(--mono); color: var(--pale); }
.doux { color: var(--doux); }
.pale { color: var(--pale); }
.petit { font-size: 13px; }
.tres-petit { font-size: 12px; }
.gras { font-weight: 700; }
.centre { text-align: center; }
.droite { text-align: right; }
.nowrap { white-space: nowrap; }
.coupe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.texte-ok { color: var(--ok); }
.texte-danger { color: var(--danger); }
.texte-warn { color: var(--warn); }
.texte-accent { color: var(--rouge); }
.majuscules { text-transform: uppercase; letter-spacing: .06em; }
.prose { color: var(--doux); }
.prose h2, .prose h3 { color: var(--encre); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--rouge); }
.prose strong, .prose b { color: var(--encre); }
.a-completer { padding: 10px 14px; border: 1px dashed #d99a2b; border-left: 4px solid var(--warn); background: var(--warn-doux); color: #6b4004; font-size: 13.5px; }

/* ---------------------------------------------------------------- Mise en page */
.conteneur { width: min(1200px, 100% - 40px); margin-inline: auto; }
.conteneur-etroit { width: min(760px, 100% - 40px); margin-inline: auto; }
.pile { display: flex; flex-direction: column; gap: 16px; }
.pile-l { display: flex; flex-direction: column; gap: 24px; }
.ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ligne-s { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ligne-s > select, .ligne-s > input { flex: 1 1 150px; width: auto; min-width: 0; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grille-principale { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.grille-principale-l { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.collant { position: sticky; top: calc(var(--entete) + 20px); }
.mt { margin-top: 20px; }
.mt-s { margin-top: 10px; }
.mt-l { margin-top: 32px; }
.mb { margin-bottom: 20px; }
.sans-marge { margin: 0; }

/* ---------------------------------------------------------------- Boutons à angles coupés
   Le fond (::before) et le contour (::after, anneau tracé par clip-path « evenodd ») suivent les
   angles coupés ; un bouton « contour » reste ainsi transparent sur n'importe quel fond. */
.bouton {
    --b-fond: var(--surface); --b-texte: var(--encre); --b-bord: var(--encre); --c: 9px; --e: 1.5px; --k: .62px;
    position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 46px; padding: 0 22px; border: 0; background: none; color: var(--b-texte);
    font: 800 13px/1 var(--police); letter-spacing: .07em; text-transform: uppercase;
    white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none;
    transition: color var(--transition), transform var(--transition), filter var(--transition);
}
.bouton::before, .bouton::after { content: ''; position: absolute; inset: 0; z-index: -1; transition: background var(--transition); }
.bouton::before { background: var(--b-fond); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.bouton::after {
    background: var(--b-bord);
    clip-path: polygon(evenodd, 0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 0,
        var(--e) var(--e), var(--e) calc(100% - var(--c) - var(--k)), calc(var(--c) + var(--k)) calc(100% - var(--e)), calc(100% - var(--e)) calc(100% - var(--e)),
        calc(100% - var(--e)) calc(var(--c) + var(--k)), calc(100% - var(--c) - var(--k)) var(--e), var(--e) var(--e));
}
.bouton:hover { --b-fond: var(--encre); --b-texte: #fff; }
.bouton:active { transform: translate(1px, 1px); filter: none; }
.bouton:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }
.bouton[disabled], .bouton.desactive { opacity: .42; pointer-events: none; filter: none; }
.bouton .ico { width: 17px; height: 17px; }
/* Bouton principal : rouge plein, ombre dure au survol */
.bouton-or, .bouton-primaire { --b-fond: var(--rouge); --b-texte: #fff; --b-bord: var(--rouge); }
.bouton-or:hover, .bouton-primaire:hover { --b-fond: var(--rouge); --b-texte: #fff; transform: translate(-2px, -2px); filter: drop-shadow(4px 4px 0 var(--encre)); }
.bouton-contour { --b-fond: transparent; --b-bord: var(--encre); --b-texte: var(--encre); }
.bouton-contour:hover { --b-fond: var(--encre); --b-texte: #fff; }
.bouton-blanc { --b-fond: #fff; --b-texte: var(--rouge); --b-bord: #fff; }
.bouton-blanc:hover { --b-fond: #fff; --b-texte: var(--rouge); transform: translate(-2px, -2px); filter: drop-shadow(4px 4px 0 var(--encre)); }
.bouton-contour-blanc { --b-fond: transparent; --b-texte: #fff; --b-bord: #fff; }
.bouton-contour-blanc:hover { --b-fond: #fff; --b-texte: var(--rouge); }
.bouton-noir { --b-fond: var(--encre); --b-texte: #fff; --b-bord: var(--encre); }
.bouton-noir:hover { --b-fond: var(--rouge); --b-bord: var(--rouge); }
.bouton-fantome { --b-fond: transparent; --b-bord: transparent; --b-texte: var(--doux); }
.bouton-fantome:hover { --b-fond: var(--surface-3); --b-texte: var(--encre); }
.bouton-verre { --b-fond: transparent; --b-bord: currentColor; }
.bouton-danger { --b-fond: var(--danger-doux); --b-texte: var(--danger); --b-bord: var(--danger); }
.bouton-danger:hover { --b-fond: var(--danger); --b-texte: #fff; }
.bouton-danger-plein { --b-fond: var(--danger); --b-texte: #fff; --b-bord: var(--danger); }
.bouton-danger-plein:hover { --b-fond: var(--encre); --b-bord: var(--encre); }
.bouton-ok { --b-fond: var(--ok-doux); --b-texte: var(--ok); --b-bord: var(--ok); }
.bouton-ok:hover { --b-fond: var(--ok); --b-texte: #fff; }
.bouton-discord { --b-fond: var(--discord); --b-texte: #fff; --b-bord: var(--discord); }
.bouton-discord:hover { --b-fond: #4752e0; --b-bord: #4752e0; }
.bouton-cfx { --b-fond: #f40552; --b-texte: #fff; --b-bord: #f40552; }
.bouton-cfx:hover { --b-fond: var(--encre); --b-bord: var(--encre); }
.bouton-petit { min-height: 36px; padding: 0 14px; font-size: 11.5px; --c: 7px; }
.bouton-petit .ico { width: 15px; height: 15px; }
.bouton-grand { min-height: 54px; padding: 0 28px; font-size: 14px; --c: 12px; }
.bouton-bloc { width: 100%; }
.bouton-icone { width: 44px; min-height: 44px; padding: 0; }
.bouton-icone.bouton-petit { width: 36px; min-height: 36px; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
form.en-ligne { display: inline; }

/* ---------------------------------------------------------------- Badges, puces, pastilles */
.badge {
    --g: var(--doux); --g-fond: var(--surface-3);
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px;
    background: var(--g-fond); color: var(--g); border-left: 3px solid var(--g);
    font: 800 11px/1.45 var(--police); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.badge-ok, .badge-succes { --g: var(--ok); --g-fond: var(--ok-doux); }
.badge-warn, .badge-alerte, .badge-attente { --g: var(--warn); --g-fond: var(--warn-doux); }
.badge-danger, .badge-erreur { --g: var(--danger); --g-fond: var(--danger-doux); }
.badge-info { --g: var(--info); --g-fond: var(--info-doux); }
.badge-accent, .badge-or { --g: var(--rouge); --g-fond: var(--rouge-doux); }
.badge-violet { --g: var(--violet); --g-fond: var(--violet-doux); }
.badge-muted, .badge-neutre { --g: var(--pale); --g-fond: var(--surface-3); }
.badge-sans-point { border-left-width: 0; padding-left: 8px; }
.puce { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-3); border: 1px solid var(--bord-2); color: var(--doux); font: 700 11.5px/1.3 var(--police); letter-spacing: .04em; text-transform: uppercase; }
.puce .ico { width: 14px; height: 14px; }
.compteur-pastille {
    display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
    background: var(--rouge); color: #fff; font: 800 11px/1 var(--police);
}
.compteur-pastille.danger { background: var(--danger); }
.point { width: 8px; height: 8px; background: var(--pale); flex: 0 0 auto; rotate: 45deg; }
.pastille { display: inline-block; width: 8px; height: 8px; background: var(--danger); flex: 0 0 auto; rotate: 45deg; }
.point.en-ligne, .pastille.en-ligne { background: #12b26f; }
.pastille.en-ligne { animation: pulsation 2.4s ease-in-out infinite; }
@keyframes pulsation { 50% { box-shadow: 0 0 0 5px rgba(18, 178, 111, 0); } 0%, 100% { box-shadow: 0 0 0 0 rgba(18, 178, 111, .45); } }

.avatar {
    display: inline-grid; place-items: center; width: 36px; height: 36px; overflow: hidden; flex: 0 0 auto;
    background: var(--encre); color: #fff; font-weight: 800; font-size: 14px; object-fit: cover;
}
.avatar-petit { width: 28px; height: 28px; font-size: 12px; }
.avatar-grand { width: 64px; height: 64px; font-size: 24px; }
.avatar-staff { background: var(--rouge); color: #fff; }

/* ---------------------------------------------------------------- Cartes */
.carte { position: relative; padding: 24px; background: var(--surface); border: 1px solid var(--bord-2); }
.carte-compacte { padding: 16px; }
.carte-plate { background: var(--surface); }
.carte-accent { border-top: 3px solid var(--rouge); }
.carte-danger { border-color: #f0bcc4; border-top: 3px solid var(--danger); background: #fffafa; }
.carte-ok { border-top: 3px solid var(--ok); }
.carte-lien { display: block; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.carte-lien:hover { border-color: var(--encre); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--rouge); }
.carte-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.carte-entete h2, .carte-entete h3 { margin: 0; display: flex; align-items: center; gap: 10px; font: 800 14px/1.25 var(--police); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); }
.carte-entete h2 .ico, .carte-entete h3 .ico { color: var(--rouge); }
.carte-pied { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bord); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.carte > :last-child { margin-bottom: 0; }
/* Encart qui suit le défilement (après .carte : sa « position: relative » ne doit pas l'emporter) */
.collant, .carte.collant { position: sticky; top: calc(var(--entete) + 20px); }
.corps-app .collant { top: 86px; }

/* Statistiques */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 14px; }
.stat {
    position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'ico libelle' 'valeur valeur' 'sous sous';
    column-gap: 12px; row-gap: 4px; align-items: center; padding: 18px; background: var(--surface); border: 1px solid var(--bord-2); overflow: hidden;
}
.stat::after { content: ''; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 100% 100%); }
.stat .stat-ico { margin-bottom: 8px; }
.stat .stat-libelle { margin-bottom: 8px; line-height: 1.3; }
a.stat { transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
a.stat:hover { border-color: var(--encre); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--encre); }
.stat-ico { grid-area: ico; display: grid; place-items: center; width: 40px; height: 40px; background: var(--rouge-doux); color: var(--rouge); }
.stat-ico .ico { width: 20px; height: 20px; }
.stat-ico.ok { background: var(--ok-doux); color: var(--ok); }
.stat-ico.warn { background: var(--warn-doux); color: var(--warn); }
.stat-ico.danger { background: var(--danger-doux); color: var(--danger); }
.stat-ico.info { background: var(--info-doux); color: var(--info); }
.stat-ico.violet { background: var(--violet-doux); color: var(--violet); }
.stat-libelle { grid-area: libelle; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.stat-valeur { grid-area: valeur; font: 400 40px/1 var(--titre); letter-spacing: .01em; color: var(--encre); }
.stat-valeur small { font: 600 14px var(--police); color: var(--pale); letter-spacing: 0; }
.stat-sous { grid-area: sous; font-size: 12px; color: var(--pale); }

/* Informations (clé / valeur) */
.infos { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 10px 16px; margin: 0; }
.infos dt { color: var(--pale); font-size: 13px; }
.infos dd { margin: 0; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.infos-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
.infos-colonnes div { padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--bord); border-left: 3px solid var(--encre); min-width: 0; }
.infos-colonnes dt { font: 500 11px/1.3 var(--mono); color: var(--pale); text-transform: uppercase; letter-spacing: .06em; }
.infos-colonnes dd { margin: 4px 0 0; font-weight: 800; overflow-wrap: anywhere; }

/* État vide */
.vide { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--doux); }
.vide-ico { display: grid; place-items: center; width: 60px; height: 60px; background: var(--surface-3); color: var(--pale); margin-bottom: 6px; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.vide-ico .ico { width: 28px; height: 28px; }
.vide h3 { color: var(--encre); margin: 0; text-transform: uppercase; letter-spacing: .02em; font-size: 16px; }
.vide p { max-width: 460px; margin: 0; }
.vide .boutons { margin-top: 10px; justify-content: center; }

/* ---------------------------------------------------------------- Messages */
.messages { display: grid; gap: 10px; margin-bottom: 20px; }
.messages-global { padding-top: 20px; margin-bottom: 0; }
.messages-flottants { position: fixed; z-index: 70; top: calc(var(--entete) + 46px); right: 16px; width: min(440px, calc(100% - 32px)); box-shadow: var(--ombre-l); }
.message {
    --m: var(--info); --m-fond: var(--info-doux);
    display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px;
    background: var(--m-fond); border: 1px solid color-mix(in srgb, var(--m) 30%, transparent); border-left: 4px solid var(--m); color: var(--texte); font-size: 14px;
}
.messages-flottants .message { background: color-mix(in srgb, var(--m-fond) 70%, #fff); }
.message > .ico { color: var(--m); margin-top: 2px; }
.message > div, .message > span { min-width: 0; flex: 1; }
.message b { color: var(--encre); }
.message-succes { --m: var(--ok); --m-fond: var(--ok-doux); }
.message-erreur { --m: var(--danger); --m-fond: var(--danger-doux); }
.message-alerte { --m: var(--warn); --m-fond: var(--warn-doux); }
.message-info { --m: var(--info); --m-fond: var(--info-doux); }
.message .boutons { margin-top: 10px; }

/* ---------------------------------------------------------------- Formulaires */
.formulaire { display: grid; gap: 16px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.champs-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.champ { display: grid; gap: 7px; min-width: 0; align-content: start; }
.champ > label, .etiquette { font-size: 13px; font-weight: 700; color: var(--encre); }
.champ > label small, .etiquette small { color: var(--pale); font-weight: 500; }
.requis::after { content: ' *'; color: var(--rouge); }
.aide { font-size: 12.5px; color: var(--pale); margin: 0; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], input[type=date], input[type=datetime-local], input[type=tel], select, textarea {
    width: 100%; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--bord-2); border-radius: 0;
    background: var(--surface); color: var(--texte); font-size: 14.5px; outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
select { appearance: none; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--encre) 50%), linear-gradient(135deg, var(--encre) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: #8d8d95; }
input:hover, select:hover, textarea:hover { border-color: var(--bord-3); }
input:focus, select:focus, textarea:focus { border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(227, 16, 46, .14); }
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--danger); }
input[type=file] { font-size: 13px; color: var(--doux); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-3); color: var(--pale); }
.champ-icone { position: relative; }
.champ-icone > .ico { position: absolute; left: 13px; top: 50%; translate: 0 -50%; color: var(--pale); pointer-events: none; }
.champ-icone input { padding-left: 40px; }
.compteur-caracteres { font: 500 11.5px var(--mono); color: var(--pale); text-align: right; margin-top: -2px; }
.compteur-caracteres.court { color: var(--warn); }
.compteur-caracteres.ok { color: var(--ok); }

.case { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--doux); cursor: pointer; }
.case input { appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid var(--bord-3); background: var(--surface); flex: 0 0 auto; display: grid; place-items: center; cursor: pointer; transition: background var(--transition), border-color var(--transition); }
.case input:checked { background: var(--rouge); border-color: var(--rouge); }
.case input:checked::after { content: ''; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; rotate: -45deg; translate: 0 -1px; }
.case b { color: var(--encre); }

.interrupteur { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--bord-2); cursor: pointer; }
.interrupteur span:first-child { display: grid; gap: 2px; }
.interrupteur span:first-child b { font-size: 14.5px; color: var(--encre); }
.interrupteur span:first-child small { color: var(--pale); font-size: 12.5px; }
.interrupteur input { appearance: none; width: 46px; height: 24px; background: var(--bord-2); position: relative; flex: 0 0 auto; cursor: pointer; transition: background var(--transition); }
.interrupteur input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; transition: translate var(--transition); }
.interrupteur input:checked { background: var(--rouge); }
.interrupteur input:checked::after { translate: 22px 0; }

/* Choix en cartes (radio) */
.choix-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.choix { position: relative; cursor: pointer; }
.choix input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choix > span {
    display: flex; gap: 10px; align-items: center; height: 100%; padding: 12px 14px;
    background: var(--surface); border: 1.5px solid var(--bord-2); transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    font-size: 13.5px; font-weight: 700;
}
.choix > span .ico { color: var(--pale); }
.choix > span small { display: block; color: var(--pale); font-weight: 500; font-size: 12px; }
.choix:hover > span { border-color: var(--encre); }
.choix input:checked + span { border-color: var(--rouge); background: var(--rouge-doux); box-shadow: inset 4px 0 0 var(--rouge); }
.choix input:checked + span .ico { color: var(--rouge); }
.choix input:focus-visible + span { outline: 2px solid var(--rouge); outline-offset: 2px; }

/* Jauge de mot de passe */
.force { height: 5px; background: var(--surface-3); overflow: hidden; }
.force span { display: block; height: 100%; width: 0; transition: width .3s, background .3s; }

/* Barre de progression native */
progress.jauge { appearance: none; width: 100%; height: 8px; border: 0; background: var(--surface-3); overflow: hidden; }
progress.jauge::-webkit-progress-bar { background: var(--surface-3); }
progress.jauge::-webkit-progress-value { background: var(--rouge); }
progress.jauge::-moz-progress-bar { background: var(--rouge); }
progress.jauge.ok::-webkit-progress-value { background: var(--ok); }
progress.jauge.ok::-moz-progress-bar { background: var(--ok); }

/* ---------------------------------------------------------------- Tableaux, filtres, pagination */
.tableau-conteneur { overflow-x: auto; border: 1px solid var(--bord-2); background: var(--surface); }
.carte > .tableau-conteneur { margin: 0 -1px; }
.tableau { width: 100%; border-collapse: collapse; font-size: 14px; }
.tableau th { text-align: left; padding: 11px 14px; font: 500 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--encre); background: var(--surface-3); border-bottom: 2px solid var(--encre); white-space: nowrap; }
.tableau td { padding: 12px 14px; border-bottom: 1px solid var(--bord); vertical-align: middle; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau tbody tr { transition: background var(--transition); }
.tableau tbody tr:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--rouge); }
.tableau .nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tableau a:not(.bouton) { font-weight: 700; }
.tableau a:not(.bouton):hover { color: var(--rouge); }
.tableau .principal { display: flex; align-items: center; gap: 11px; min-width: 0; }
.tableau .principal b { display: block; }
.tableau .principal small { display: block; color: var(--pale); font-size: 12px; }
.tableau-dense td { padding: 9px 12px; }

.barre-outils { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.recherche { display: flex; gap: 8px; flex: 1 1 320px; max-width: 520px; }
.recherche .champ-icone { flex: 1; }
.filtres { display: flex; gap: 2px; flex-wrap: wrap; padding: 3px; background: var(--surface); border: 1px solid var(--bord-2); }
.filtres a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; font: 800 11.5px/1.3 var(--police); letter-spacing: .05em; text-transform: uppercase; color: var(--doux); transition: background var(--transition), color var(--transition); }
.filtres a:hover { color: var(--encre); background: var(--surface-3); }
.filtres a[aria-current] { background: var(--encre); color: #fff; }
.filtres .compteur-pastille { min-width: 18px; height: 18px; font-size: 10.5px; }
.pagination { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.pagination a, .pagination span { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--bord-2); font-size: 13px; font-weight: 800; color: var(--doux); background: var(--surface); }
.pagination a:hover { border-color: var(--encre); color: var(--encre); }
.pagination [aria-current] { background: var(--rouge); color: #fff; border-color: var(--rouge); }

/* Listes à lignes */
.liste { display: grid; margin: 0; padding: 0; list-style: none; }
.liste > li, .liste > a { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--bord); min-width: 0; }
.liste > :last-child { border-bottom: 0; }
.liste > a { transition: background var(--transition), box-shadow var(--transition); padding-inline: 10px; }
.liste > a:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--rouge); }
.liste-ico { display: grid; place-items: center; width: 38px; height: 38px; background: var(--surface-3); color: var(--doux); flex: 0 0 auto; }
.liste-ico.accent { background: var(--rouge-doux); color: var(--rouge); }
.liste-ico.ok { background: var(--ok-doux); color: var(--ok); }
.liste-ico.danger { background: var(--danger-doux); color: var(--danger); }
.liste-ico.warn { background: var(--warn-doux); color: var(--warn); }
.liste-principal { flex: 1; min-width: 0; }
.liste-principal b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre); }
.liste-principal small { display: block; color: var(--pale); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste-fin { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; color: var(--pale); font-size: 12.5px; }
.non-lu { width: 9px; height: 9px; background: var(--rouge); rotate: 45deg; flex: 0 0 auto; }

/* Étapes (progression) */
.parcours { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
.parcours li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-bottom: 20px; }
.parcours li::before {
    counter-increment: etape; content: counter(etape); display: grid; place-items: center; width: 34px; height: 34px;
    background: var(--surface); border: 1.5px solid var(--bord-3); color: var(--doux); font: 400 19px/1 var(--titre); z-index: 1;
}
.parcours li::after { content: ''; position: absolute; left: 16.5px; top: 34px; bottom: 0; width: 1.5px; background: var(--bord-2); }
.parcours li:last-child { padding-bottom: 0; }
.parcours li:last-child::after { display: none; }
.parcours li.fait::before { content: '✓'; font: 800 14px/1 var(--police); background: var(--ok); color: #fff; border-color: var(--ok); }
.parcours li.actuel::before { background: var(--rouge); color: #fff; border-color: var(--rouge); box-shadow: 3px 3px 0 var(--encre); }
.parcours li.refuse::before { content: '✕'; font: 800 14px/1 var(--police); background: var(--danger); color: #fff; border-color: var(--danger); }
.parcours b { display: block; padding-top: 6px; color: var(--encre); }
.parcours small { display: block; color: var(--pale); }

/* Chronologie */
.chronologie { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.chronologie li { display: grid; grid-template-columns: 12px 1fr; gap: 14px; font-size: 13.5px; }
.chronologie li::before { content: ''; width: 9px; height: 9px; margin-top: 7px; rotate: 45deg; background: var(--surface); border: 2px solid var(--bord-3); }
.chronologie li.ok::before { border-color: var(--ok); background: var(--ok); }
.chronologie li.danger::before { border-color: var(--danger); background: var(--danger); }
.chronologie li.accent::before { border-color: var(--rouge); background: var(--rouge); }
.chronologie small { display: block; color: var(--pale); font-size: 12px; }

/* Menus déroulants (details) */
.deroulant { position: relative; }
.deroulant > summary { list-style: none; cursor: pointer; }
.deroulant > summary::-webkit-details-marker { display: none; }
.deroulant-menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; min-width: 240px; padding: 6px;
    background: var(--surface); border: 1px solid var(--bord-2); border-top: 3px solid var(--rouge); box-shadow: var(--ombre-l);
    animation: apparition .16s ease-out;
}
@keyframes apparition { from { opacity: 0; translate: 0 -6px; } }
.deroulant-menu a, .deroulant-menu button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border: 0; background: none;
    color: var(--doux); font-size: 14px; font-weight: 600; text-align: left;
}
.deroulant-menu a:hover, .deroulant-menu button:hover { background: var(--surface-3); color: var(--encre); box-shadow: inset 3px 0 0 var(--rouge); }
.deroulant-menu hr { margin: 6px 4px; }
.deroulant-menu form { margin: 0; }

/* ---------- Administration : finances de la boutique (ventes, part d'UnityRP, part de l'association) ---------- */
.finances-mois { flex: 0 0 auto; display: grid; grid-template-columns: 230px auto; gap: 6px 8px; align-items: end; }
.finances-mois label { grid-column: 1 / -1; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.finances-mois select { width: 100%; min-width: 0; }
.finances-partage { display: grid; gap: 14px; }
/* les trois chiffres du mois servent d'onglets : celui de la vue affichée reste « levé » */
.finances-vues { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finances-vues .stat[aria-current] { border-color: var(--encre); transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--encre); }
.finances-vues .stat[aria-current]::after { width: 22px; height: 22px; }
.partage { padding: 14px 18px 12px; background: var(--surface); border: 1px solid var(--bord-2); }
/* part de l'association (rouge) dans les ventes du mois (noir : part d'UnityRP) */
progress.partage-barre { display: block; width: 100%; height: 14px; border: 0; background: var(--encre); -webkit-appearance: none; appearance: none; }
progress.partage-barre::-webkit-progress-bar { background: var(--encre); }
progress.partage-barre::-webkit-progress-value { background: var(--rouge); }
progress.partage-barre::-moz-progress-bar { background: var(--rouge); }
.partage-legende { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 10px 0 0; font-size: 13px; color: var(--doux); }
.partage-legende b { color: var(--encre); }
.partage-don { display: inline-flex; align-items: center; gap: 8px; }
.partage-don .ico { width: 15px; height: 15px; color: var(--rouge); }
progress.barre-mini { display: inline-block; vertical-align: middle; width: calc(100% - 48px); min-width: 60px; height: 8px; border: 0; background: var(--surface-3); -webkit-appearance: none; appearance: none; }
progress.barre-mini::-webkit-progress-bar { background: var(--surface-3); }
progress.barre-mini::-webkit-progress-value { background: var(--encre); }
progress.barre-mini::-moz-progress-bar { background: var(--encre); }
.cellule-barre { min-width: 130px; white-space: nowrap; }
.cellule-barre span { display: inline-block; width: 44px; text-align: right; font: 500 11.5px/1 var(--mono); color: var(--pale); }
.cellule-barre progress:only-child { width: 100%; }
.tableau tfoot td { padding: 12px 14px; border-top: 2px solid var(--encre); background: var(--surface-2); font-weight: 800; color: var(--encre); }
.tableau tr.ligne-active td { background: var(--rouge-doux); }
.tableau tr.ligne-active td:first-child { box-shadow: inset 3px 0 0 var(--rouge); }
.annonce-texte { margin: 10px 0 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--bord-2); border-left: 3px solid var(--encre); font: 400 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--doux); }
@media (max-width: 980px) { .finances-vues { grid-template-columns: minmax(0, 1fr); } }

/* ---------- GRAPHIQUES de l'administration : ventes et encaissements (app/lib/graphiques.php) ----------
   Même code couleur que la barre de partage : noir = part d'UnityRP, rouge = part de l'association.
   Le SVG ne contient que des formes et s'étire à la taille de son cadre ; les textes sont du HTML autour. */
.ventes-graphiques .carte-entete .ligne { gap: 16px; }
.ventes-chiffres { display: grid; grid-template-columns: minmax(250px, 1.5fr) repeat(4, minmax(0, 1fr)); margin: 0 0 22px; border: 1px solid var(--bord-2); background: var(--surface-2); }
.ventes-chiffre { min-width: 0; padding: 16px 18px; border-left: 1px solid var(--bord-2); }
.ventes-chiffre:first-child { border-left: 0; }
.ventes-chiffre dt { display: flex; align-items: center; gap: 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.ventes-chiffre dd { margin: 7px 0 0; font: 400 34px/1 var(--titre); letter-spacing: .01em; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ventes-chiffre dd.ventes-note { margin-top: 7px; font: 400 12px/1.45 var(--police); letter-spacing: 0; color: var(--pale); white-space: normal; }
.ventes-chiffre.principal { background: var(--encre); box-shadow: inset 5px 0 0 var(--rouge); padding-left: 23px; }
.ventes-chiffre.principal dt { color: #b9b9c1; }
.ventes-chiffre.principal dd { color: #fff; font-size: 46px; }
.ventes-chiffre.principal dd.ventes-note { color: #c9c9cf; font-size: 12px; }
.tendance { display: inline-block; padding: 1px 7px; font: 700 11.5px/1.45 var(--mono); color: #fff; }
.tendance.hausse { background: var(--ok); }
.tendance.baisse { background: var(--danger); }
.puce { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; background: var(--bord-3); }
.puce-unityrp { background: var(--encre); }
.puce-don { background: var(--rouge); }

.graphiques { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.graphique-bloc { min-width: 0; margin: 0; padding: 16px 18px 12px; border: 1px solid var(--bord-2); border-top: 3px solid var(--encre); background: var(--surface); }
.graphique-bloc figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.graphique-bloc figcaption b { font: 800 12.5px/1.3 var(--police); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); }
.graphique-legende { display: inline-flex; align-items: center; gap: 14px; font: 500 11px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pale); }
.graphique-legende > span { display: inline-flex; align-items: center; gap: 7px; }
/* cadre : montants à gauche, tracé, dates dessous */
.graphique-cadre { --gr-hauteur: 250px; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: var(--gr-hauteur) auto; column-gap: 10px; padding-top: 8px; }
.graphique-y { display: flex; flex-direction: column; justify-content: space-between; text-align: right; }
.graphique-y span { display: block; height: 0; font: 500 10.5px/0 var(--mono); color: var(--pale); white-space: nowrap; }
.graphique-trace { position: relative; min-width: 0; }
.graphique { display: block; width: 100%; height: 100%; overflow: visible; }
.graphique-x { grid-column: 2; display: grid; padding-top: 9px; }
.graphique-7 .graphique-x { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.graphique-12 .graphique-x { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.graphique-30 .graphique-x { grid-template-columns: repeat(30, minmax(0, 1fr)); }
.graphique-x span { justify-self: center; font: 500 10.5px/1.3 var(--mono); color: var(--pale); white-space: nowrap; }
.graphique-rien { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--pale); text-align: center; pointer-events: none; }
.graphique-rien span { padding: 5px 14px; background: var(--surface); }
.gr-grille { stroke: var(--bord); stroke-width: 1; vector-effect: non-scaling-stroke; }
.gr-base { stroke: var(--encre); stroke-width: 2; }
.gr-zone { fill: transparent; }
.gr-colonne:hover .gr-zone { fill: rgba(14, 14, 16, .06); }
.gr-unityrp { fill: var(--encre); }
.gr-don { fill: var(--rouge); }
.gr-aire { fill: var(--rouge-doux); }
.gr-courbe { fill: none; stroke: var(--rouge); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr-point, .gr-fin { fill: none; stroke: var(--rouge); stroke-width: 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.gr-point { stroke: var(--encre); opacity: 0; }
.gr-repere { stroke: var(--encre); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; }
.gr-colonne:hover .gr-point, .gr-colonne:hover .gr-repere { opacity: 1; }
/* info-bulle posée par site.js au survol d'une colonne */
.graphique-bulle { position: absolute; z-index: 5; left: 0; top: 0; min-width: 190px; padding: 10px 12px; background: var(--encre); color: #fff; box-shadow: 4px 4px 0 var(--rouge); pointer-events: none; translate: -50% 0; }
.graphique-bulle b { display: block; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .2); font: 700 12px/1.3 var(--police); }
.graphique-bulle span { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.7; color: #c9c9cf; }
.graphique-bulle span i { display: inline-flex; align-items: center; gap: 7px; font-style: normal; }
.graphique-bulle span i::before { content: ''; width: 8px; height: 8px; background: transparent; }
.graphique-bulle .ton-unityrp i::before { background: #fff; }
.graphique-bulle .ton-don i::before { background: var(--rouge-vif); }
.graphique-bulle span em { font: 500 12px/1 var(--mono); font-style: normal; color: #fff; white-space: nowrap; }
.graphique-bulle .ton-total { color: #fff; font-weight: 700; }
/* ventes par offre sur la période */
.ventes-offres { margin-top: 20px; }
.ventes-offres-titre { margin: 0 0 10px; font: 800 12.5px/1.3 var(--police); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); }
.ventes-offres ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border: 1px solid var(--bord-2); }
.ventes-offres li { display: grid; grid-template-columns: minmax(150px, 280px) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--bord); }
.ventes-offres li:last-child { border-bottom: 0; }
.ventes-offres li b { display: block; font-size: 14px; color: var(--encre); }
.ventes-offres li small { display: block; font-size: 12px; color: var(--pale); }
.ventes-offres progress.barre-mini { width: 100%; height: 10px; }
.ventes-offre-montant { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* les mêmes chiffres en tableau */
.graphique-donnees { margin-top: 18px; border-top: 1px solid var(--bord); padding-top: 14px; }
.graphique-donnees > summary { display: inline-flex; align-items: center; gap: 9px; list-style: none; cursor: pointer; font: 800 12px/1.3 var(--police); letter-spacing: .06em; text-transform: uppercase; color: var(--doux); }
.graphique-donnees > summary::-webkit-details-marker { display: none; }
.graphique-donnees > summary:hover { color: var(--rouge); }
.graphique-donnees > summary .ico { width: 15px; height: 15px; }
.graphique-donnees > summary .ico-fleche { transition: rotate .2s; }
.graphique-donnees[open] > summary .ico-fleche { rotate: 180deg; }
.graphique-donnees > .tableau-conteneur { margin-top: 12px; max-height: 420px; overflow-y: auto; }
@media (max-width: 1500px) { .ventes-chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ventes-chiffre.principal { grid-column: 1 / -1; border-bottom: 1px solid var(--bord-2); } .ventes-chiffre:nth-child(2) { border-left: 0; } }
@media (max-width: 1180px) { .graphiques { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
    .ventes-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ventes-chiffre { border-left: 0; border-top: 1px solid var(--bord-2); }
    .ventes-chiffre:nth-child(odd) { border-left: 1px solid var(--bord-2); }
    .ventes-chiffre.principal { border-top: 0; border-left: 0; }
    .ventes-chiffre dd { font-size: 28px; }
    .ventes-chiffre.principal dd { font-size: 38px; }
    .graphique-cadre { --gr-hauteur: 200px; }
    .graphique-bloc { padding: 14px 12px 10px; }
    /* trente jours sur un téléphone : une date sur six */
    .graphique-30 .graphique-x span:nth-last-child(6n + 4) { visibility: hidden; }
    .ventes-offres li { grid-template-columns: minmax(0, 1fr) auto; }
    .ventes-offres progress.barre-mini { grid-column: 1 / -1; grid-row: 2; }
}

/* Dialogue natif */
dialog.dialogue { width: min(560px, 100% - 32px); padding: 0; border: 1px solid var(--bord-2); border-top: 4px solid var(--rouge); background: var(--surface); color: var(--texte); box-shadow: var(--ombre-l); }
dialog.dialogue::backdrop { background: rgba(14, 14, 16, .62); }
.dialogue-corps { padding: 24px; }
.dialogue-pied { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--bord); background: var(--surface-2); }
dialog.dialogue[open] { animation: dialogue-entree .22s cubic-bezier(.2, .7, .3, 1); }
@keyframes dialogue-entree { from { opacity: 0; translate: 0 14px; } }
@media (prefers-reduced-motion: reduce) { dialog.dialogue[open] { animation: none; } }
.dialogue-fermer { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; transition: background var(--transition), color var(--transition); }
.dialogue-fermer:hover { background: var(--rouge); color: #fff; }
.dialogue-fermer .ico { width: 20px; height: 20px; }
/* Une fenêtre est ouverte : la page derrière ne défile plus */
html.dialogue-ouvert { overflow: hidden; }

/* ---------- FENÊTRE « JOUER » à l'arrivée (vues/_modale_jouer.php) ----------
   Panneau rouge à angles coupés, comme la une : il se déroule de gauche à droite, puis l'étiquette, le titre
   (ligne par ligne), l'état du serveur, les étapes et les boutons arrivent l'un après l'autre. Le bouton
   principal « respire » (ombre dure qui avance et recule) pour attirer l'œil. Rien de tout cela avec
   « moins d'animations ». */
dialog.dialogue-jouer {
    width: min(640px, 100% - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto;
    border: 0; background: var(--rouge); color: #fff; box-shadow: none;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}
dialog.dialogue-jouer::backdrop { background: rgba(14, 14, 16, .8); }
dialog.dialogue-jouer[open] { animation: jouer-volet .6s cubic-bezier(.6, 0, .2, 1); }
@keyframes jouer-volet { from { clip-path: polygon(0 0, 0 0, 0 0, 0 100%, 0 100%, 0 100%); } }
dialog.dialogue-jouer[open]::backdrop { animation: jouer-fondu .4s ease; }
@keyframes jouer-fondu { from { opacity: 0; } }
.dialogue-jouer .dialogue-fermer { z-index: 3; color: #fff; }
.dialogue-jouer .dialogue-fermer:hover { background: #fff; color: var(--rouge); }
/* décor : hachures blanches qui défilent lentement sur la droite, trois traits qui se tracent en haut à gauche */
.jouer-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.jouer-decor::before {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 46%;
    background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 14px);
    background-size: 200% 200%; clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%);
    animation: jouer-hachures 14s linear infinite;
}
@keyframes jouer-hachures { to { background-position: 100% 100%; } }
.jouer-decor span { position: absolute; left: 28px; height: 5px; background: #fff; transform-origin: 0 50%; animation: jouer-trait .5s cubic-bezier(.2, .7, .3, 1) backwards; }
.jouer-decor span:nth-child(1) { top: 22px; width: 92px; animation-delay: .45s; }
.jouer-decor span:nth-child(2) { top: 32px; width: 56px; background: var(--encre); animation-delay: .55s; }
.jouer-decor span:nth-child(3) { top: 42px; width: 28px; animation-delay: .65s; }
@keyframes jouer-trait { from { transform: scaleX(0); } }
.jouer-corps { position: relative; z-index: 1; display: grid; gap: 18px; padding: 62px 34px 26px; }
.jouer-corps > * { animation: jouer-monte .5s cubic-bezier(.2, .7, .3, 1) backwards; }
.jouer-etiquette { animation-delay: .35s !important; display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0; padding: 6px 12px; background: #fff; color: var(--rouge); font: 600 12px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.jouer-etiquette .ico { width: 14px; height: 14px; }
.jouer-titre { margin: 0; font: 400 clamp(54px, 9vw, 92px)/.86 var(--titre); letter-spacing: .005em; text-transform: uppercase; animation: none !important; }
.jouer-titre > span { display: block; overflow: hidden; padding-top: .06em; }
.jouer-titre em { display: inline-block; font-style: normal; color: var(--encre); }
.jouer-titre > span:first-child { animation: jouer-ligne .6s cubic-bezier(.2, .7, .3, 1) .45s backwards; }
.jouer-titre > span:last-child { animation: jouer-ligne .6s cubic-bezier(.2, .7, .3, 1) .58s backwards; }
@keyframes jouer-ligne { from { clip-path: inset(100% 0 0 0); translate: 0 30%; } to { clip-path: inset(-10% 0 -10% 0); } }
.jouer-texte { margin: 0; max-width: 470px; font-size: 16px; font-weight: 500; line-height: 1.55; animation-delay: .7s !important; }
.jouer-statut { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin: 0; padding: 9px 14px; background: var(--encre); font: 500 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; animation-delay: .8s !important; }
.jouer-statut .pastille.en-ligne { background: #3dffa8; }
.jouer-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; animation: none !important; }
.jouer-etapes li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; animation: jouer-monte .45s cubic-bezier(.2, .7, .3, 1) backwards; }
.jouer-etapes li:nth-child(1) { animation-delay: .9s; }
.jouer-etapes li:nth-child(2) { animation-delay: 1s; }
.jouer-etapes li:nth-child(3) { animation-delay: 1.1s; }
.jouer-etapes li span { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; border: 2px solid #fff; font: 400 18px/1 var(--titre); }
.jouer-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; animation-delay: 1.2s !important; }
.jouer-principal { animation: jouer-appel 2.4s ease-in-out 2s infinite; }
@keyframes jouer-appel { 0%, 100% { transform: none; filter: none; } 50% { transform: translate(-3px, -3px); filter: drop-shadow(5px 5px 0 var(--encre)); } }
.jouer-note { margin: -4px 0 0; font-size: 13px; color: #fff; opacity: .9; animation-delay: 1.25s !important; }
.jouer-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .35); font: 500 11.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; animation-delay: 1.3s !important; }
.jouer-pied button { padding: 4px 0; border: 0; border-bottom: 2px solid #fff; background: none; color: #fff; font: 800 12px/1.2 var(--police); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.jouer-pied button:hover { color: var(--encre); border-color: var(--encre); }
@keyframes jouer-monte { from { opacity: 0; translate: 0 16px; } }
@media (max-width: 560px) {
    .jouer-corps { padding: 56px 22px 22px; gap: 16px; }
    .jouer-actions .bouton { flex: 1 1 100%; }
    .jouer-decor::before { width: 60%; }
}
@media (prefers-reduced-motion: reduce) {
    dialog.dialogue-jouer[open], dialog.dialogue-jouer[open]::backdrop, .jouer-decor::before, .jouer-decor span,
    .jouer-corps > *, .jouer-titre > span, .jouer-etapes li, .jouer-principal { animation: none !important; }
}
/* Éléments réservés aux navigateurs avec (ou sans) JavaScript */
.sans-js .avec-js, html:not(.sans-js) .sans-js-seulement { display: none !important; }

/* =================================================================================================
   SITE PUBLIC
   ================================================================================================= */
/* ---------- Barre d'information (au-dessus de l'en-tête) : bande rouge ---------- */
.barre-info { background: var(--rouge); color: #fff; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.barre-info .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
.barre-info-gauche { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-info-droite, .barre-info-droite a, .barre-info [data-statut] { white-space: nowrap; }
.barre-info-droite { display: flex; align-items: center; gap: 20px; }
.barre-info [data-statut] { display: inline-flex; align-items: center; gap: 9px; }
.barre-info .pastille { background: rgba(255, 255, 255, .55); animation: none; }
.barre-info .pastille.en-ligne { background: #3dffa8; }
.barre-info a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
.barre-info a:hover { text-decoration-color: #fff; }

/* ---------- Barre « boutique solidaire » : tout en haut du site public et de l'espace client ----------
   Trois messages se relaient (15 s le tour), un filet rouge marque le temps de chacun, le cœur bat.
   Au survol ou au clavier, tout se met en pause ; animations réduites : premier message seul, fixe. */
.barre-solidaire { position: relative; overflow: hidden; background: var(--encre); color: #fff; font: 500 12px/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.barre-solidaire::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--rouge); transform-origin: 0 50%; animation: solidaire-compte 5s linear infinite; }
.barre-solidaire-interieur { display: flex; align-items: center; gap: 18px; width: min(1200px, 100% - 40px); min-height: 38px; margin-inline: auto; }
.app-principal .barre-solidaire-interieur { width: auto; margin: 0; padding: 0 28px; }
.barre-solidaire-marque { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; }
.barre-solidaire-marque b { font-weight: 500; }
.barre-solidaire-coeur { display: grid; place-items: center; width: 24px; height: 24px; background: var(--rouge); clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px)); }
.barre-solidaire-coeur .ico { width: 14px; height: 14px; animation: solidaire-battement 1.6s ease-in-out infinite; }
.barre-solidaire-messages { position: relative; flex: 1 1 auto; min-width: 0; height: 38px; overflow: hidden; border-left: 1px solid rgba(255, 255, 255, .24); }
.barre-solidaire-messages > span { position: absolute; inset: 0; display: block; padding-left: 18px; line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .88); opacity: 0; animation: solidaire-relais 15s infinite; }
.barre-solidaire-messages > span:nth-child(2) { animation-delay: 5s; }
.barre-solidaire-messages > span:nth-child(3) { animation-delay: 10s; }
.barre-solidaire-messages b { padding: 2px 6px; background: var(--rouge); color: #fff; font-weight: 500; }
.barre-solidaire-lien { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 2px; border-bottom: 2px solid var(--rouge); color: #fff; transition: color var(--transition); }
.barre-solidaire-lien:hover { color: var(--rouge-clair); }
.barre-solidaire-lien .ico { width: 14px; height: 14px; }
.barre-solidaire:hover::after, .barre-solidaire:hover .barre-solidaire-messages > span, .barre-solidaire:hover .barre-solidaire-coeur .ico,
.barre-solidaire:focus-within::after, .barre-solidaire:focus-within .barre-solidaire-messages > span, .barre-solidaire:focus-within .barre-solidaire-coeur .ico { animation-play-state: paused; }
@keyframes solidaire-relais {
    0% { opacity: 0; translate: 0 100%; }
    2.5%, 31% { opacity: 1; translate: 0 0; }
    33.33%, 100% { opacity: 0; translate: 0 -100%; }
}
@keyframes solidaire-compte { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes solidaire-battement { 0%, 55%, 100% { scale: 1; } 18% { scale: 1.3; } 36% { scale: .92; } }
@media (prefers-reduced-motion: reduce) {
    .barre-solidaire::after, .barre-solidaire-coeur .ico { animation: none; }
    .barre-solidaire-messages > span { animation: none; }
    .barre-solidaire-messages > span:first-child { opacity: 1; }
}
/* messages d'accueil (flottants) : sous l'en-tête, barre solidaire comprise */
.avec-solidaire .messages-flottants { top: calc(var(--entete) + 84px); }

/* ---------- En-tête : blanc, filet noir ---------- */
.entete { position: sticky; top: 0; z-index: 50; height: var(--entete); background: #fff; border-bottom: 1px solid var(--bord-2); transition: box-shadow var(--transition); }
.entete.defile { box-shadow: 0 10px 26px -18px rgba(14, 14, 16, .45); }
.entete .conteneur { display: flex; align-items: center; gap: 28px; height: 100%; }
.marque { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.marque-logo { width: 40px; height: 40px; }
.marque-nom { display: block; font-family: var(--titre); font-size: 29px; letter-spacing: .03em; line-height: .84; text-transform: uppercase; color: var(--encre); }
.marque-nom b { font-weight: 400; color: var(--rouge); }
.marque-sous { display: block; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--pale); margin-top: 4px; }
.nav { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav-pilule { display: flex; align-items: stretch; gap: 2px; height: var(--entete); }
.nav-pilule a { position: relative; display: inline-flex; align-items: center; padding: 0 12px; font: 800 12.5px/1 var(--police); letter-spacing: .07em; text-transform: uppercase; color: var(--encre); transition: color var(--transition); }
.nav-pilule a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 4px; background: var(--rouge); transform: skewX(-24deg) scaleX(0); transform-origin: left; transition: transform .22s ease; }
.nav-pilule a:hover { color: var(--rouge); }
.nav-pilule a:hover::after, .nav-pilule a[aria-current]::after { transform: skewX(-24deg) scaleX(1); }
.nav-pilule a[aria-current] { color: var(--rouge); }
.nav-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; }
.nav-icone { position: relative; display: grid; place-items: center; width: 42px; height: 42px; color: var(--encre); transition: color var(--transition), background var(--transition); }
.nav-icone:hover, .nav-icone[aria-current] { color: var(--rouge); background: var(--surface-3); }
.nav-icone .compteur-pastille { position: absolute; top: 3px; right: 1px; min-width: 17px; height: 17px; font-size: 10px; }
.nav-lien { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; font: 800 12.5px/1 var(--police); letter-spacing: .07em; text-transform: uppercase; color: var(--encre); transition: color var(--transition), background var(--transition); }
.nav-lien:hover, .nav-lien[aria-current] { color: var(--rouge); background: var(--surface-3); }
.nav-actions .bouton { margin-left: 10px; }
.nav-texte-mobile { display: none; }
.menu-mobile { display: none; margin-left: auto; width: 46px; height: 46px; border: 1.5px solid var(--encre); background: #fff; color: var(--encre); place-items: center; }

/* ---------- Une (accueil) : panneau rouge en biais sur une vraie capture de GTA V ---------- */
.une { position: relative; isolation: isolate; display: flex; align-items: stretch; min-height: min(84vh, 780px); overflow: hidden; background: var(--encre); color: #fff; }
.une-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 0% 40%; }
.une-panneau {
    position: relative; display: flex; flex-direction: column; justify-content: center; width: min(64%, 1010px);
    padding: 70px 190px 120px max(20px, calc((100vw - 1200px) / 2));
    background: var(--rouge); clip-path: polygon(0 0, 100% 0, calc(100% - 150px) 100%, 0 100%);
}
/* hachures blanches le long du biais */
.une-panneau::before {
    content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 260px; pointer-events: none;
    background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 13px);
    clip-path: polygon(150px 0, 100% 0, 110px 100%, 0 100%);
}
.une-contenu { position: relative; max-width: 640px; }
.une-etiquette {
    display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 14px 6px;
    background: #fff; color: var(--rouge); font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.une-etiquette .pastille { background: var(--rouge); }
.une-etiquette .pastille.en-ligne { background: #0b8457; }
.une-titre { margin: 22px 0 0; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(84px, 11.5vw, 176px); line-height: .8; letter-spacing: .005em; color: #fff; }
.une-titre span { color: var(--encre); }
.une-titre em { display: block; font-style: normal; color: transparent; -webkit-text-stroke: 2.5px #fff; }
.une-texte { max-width: 540px; margin: 24px 0 32px; font-size: 17.5px; line-height: 1.55; color: #fff; font-weight: 500; }
/* Fiche du serveur : encart blanc posé sur la photo */
.une-fiche {
    --c: 22px;
    position: absolute; z-index: 2; right: max(20px, calc((100vw - 1200px) / 2)); bottom: 36px; width: min(560px, 40%);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; background: #fff; color: var(--encre);
    border-top: 5px solid var(--encre); clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.une-fiche > div { padding: 16px 20px 18px; min-width: 0; border-bottom: 1px solid var(--bord); }
.une-fiche > div:nth-child(even) { border-left: 1px solid var(--bord); }
.une-fiche > div:nth-last-child(-n + 2) { border-bottom: 0; }
.une-fiche dt { margin-bottom: 6px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.une-fiche dd { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 14px; font-weight: 800; color: var(--encre); }
.une-credit { position: absolute; z-index: 2; top: 14px; right: 16px; margin: 0; padding: 5px 8px; background: rgba(14, 14, 16, .72); font: 400 10.5px/1 var(--mono); color: rgba(255, 255, 255, .85); }

/* ---------- Bandeau défilant (noir) ---------- */
.defilant { position: relative; overflow: hidden; background: var(--encre); color: #fff; border-bottom: 4px solid var(--rouge); }
.defilant-piste { display: flex; width: max-content; animation: defiler 55s linear infinite; }
.defilant span { display: inline-flex; align-items: center; padding: 15px 0 12px; font: 400 30px/1 var(--titre); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.defilant span::after { content: ''; width: 10px; height: 10px; margin: 0 28px 3px; background: var(--rouge); rotate: 45deg; }
@keyframes defiler { to { transform: translateX(-50%); } }

/* ---------- Bandeau rouge : le développement en chiffres ---------- */
.bande-studio { position: relative; padding: 72px 0 84px; background: var(--rouge); color: #fff; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%); }
.bande-studio::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: min(30vw, 380px); pointer-events: none; background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 13px); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); }
.bande-studio .meta { color: #fff; opacity: .9; }
.bande-studio-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; align-items: end; }
.bande-studio h2 { margin: 0; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(50px, 5.6vw, 82px); line-height: .86; color: #fff; }
.bande-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.bande-chiffres > div { padding: 0 0 4px 22px; border-left: 3px solid #fff; }
.bande-chiffres dt { font-family: var(--titre); font-size: clamp(54px, 5.4vw, 84px); line-height: .9; }
.bande-chiffres dd { margin: 6px 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.bande-studio .meta-note { position: relative; z-index: 1; margin-top: 30px; color: rgba(255, 255, 255, .85); }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(68px, 8vw, 116px) 0; background: #fff; }
.section-sombre { background: var(--fond); }
.section-papier { background: #fff; }
.section:not(.section-sombre) + .section:not(.section-sombre) { border-top: 1px solid var(--bord); }
.section h2, .titre-section { margin: 0 0 18px; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(50px, 6vw, 92px); line-height: .88; letter-spacing: .005em; color: var(--encre); }
.titre-ligne { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 48px; flex-wrap: wrap; margin-bottom: 40px; padding-bottom: 22px; border-bottom: 2px solid var(--encre); }
.titre-ligne::after { content: ''; position: absolute; left: 0; bottom: -5px; width: 150px; height: 8px; background: var(--rouge); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.titre-ligne h2 { margin: 0; }
.titre-ligne-note { max-width: 420px; margin: 0; color: var(--doux); font-size: 14.5px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font: 800 12.5px/1 var(--police); letter-spacing: .07em; text-transform: uppercase; color: var(--encre); border-bottom: 3px solid var(--rouge); padding-bottom: 5px; transition: color var(--transition); }
.lien-fleche .ico { width: 15px; height: 15px; color: var(--rouge); transition: translate var(--transition); }
.lien-fleche:hover { color: var(--rouge); }
.lien-fleche:hover .ico { translate: 4px 0; }

/* Coin rouge des tuiles (repère visuel des blocs) */
.systemes-liste li::after, .metiers-liste li::after, .produit-carte::after, .etapes-liste li::after {
    content: ''; position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; background: var(--rouge); clip-path: polygon(0 0, 100% 0, 100% 100%);
}

/* ---------- La ville : tuiles des systèmes ---------- */
.systemes { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.systemes-intro { position: sticky; top: calc(var(--entete) + 32px); }
.systemes-intro > p:not(.meta) { color: var(--doux); font-size: 16px; margin-bottom: 26px; }
.systemes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.systemes-liste li { position: relative; padding: 24px 24px 22px; background: #fff; border: 1px solid var(--bord-2); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.systemes-liste li:hover { border-color: var(--encre); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--rouge); }
.systeme-num { display: block; margin-bottom: 12px; font: 400 54px/.85 var(--titre); color: transparent; -webkit-text-stroke: 1.5px var(--rouge); transition: color var(--transition); }
.systemes-liste li:hover .systeme-num { color: var(--rouge); }
.systemes-liste h3 { margin: 0 0 8px; font: 800 17px/1.2 var(--police); letter-spacing: .02em; text-transform: uppercase; }
.systemes-liste p { margin: 0; color: var(--doux); font-size: 14.5px; }
.systemes-liste .systeme-tags { margin-top: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--rouge); }

/* ---------- Métiers : qui recrute ---------- */
.metiers-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.metiers-liste li { position: relative; padding: 26px 22px 22px; background: #fff; border: 1px solid var(--bord-2); border-top: 4px solid var(--encre); transition: border-color var(--transition), transform var(--transition); }
.metiers-liste li:hover { border-top-color: var(--rouge); transform: translateY(-4px); }
.metier-type { display: block; margin-bottom: 10px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.metiers-liste h3 { margin: 0 0 8px; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: .95; letter-spacing: .01em; }
.metiers-liste p { margin: 0; color: var(--doux); font-size: 14px; }

/* ---------- Journal de développement ---------- */
.journal { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--encre); }
.journal-entree { display: grid; grid-template-columns: 96px 104px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--bord-2); align-items: baseline; transition: background var(--transition); }
.journal-entree:hover { background: var(--surface-2); }
.journal-date { font: 500 13px/1.4 var(--mono); color: var(--pale); }
.journal-type {
    justify-self: start; padding: 5px 12px 4px; font: 800 10.5px/1 var(--police); letter-spacing: .08em; text-transform: uppercase;
    background: var(--encre); color: #fff; clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.journal-nouveau { background: var(--rouge); }
.journal-corrige { background: var(--ok); }
.journal-ameliore { background: var(--info); }
.journal-corps h3 { margin: 0 0 4px; font-size: 16.5px; letter-spacing: -.01em; }
.journal-corps p { margin: 0; font-size: 14.5px; color: var(--doux); }
.journal-accueil { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.journal-intro > p:not(.meta) { color: var(--doux); font-size: 15.5px; margin-bottom: 24px; }
.journal-intro .bouton .ico { width: 15px; height: 15px; }
.journal-intro > .journal-recrute { color: #fff; }
.journal-recrute { margin-top: 32px !important; padding: 18px 20px; background: var(--rouge); color: #fff; font-size: 14px !important; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.journal-recrute b { color: #fff; }
.journal-recrute a { color: #fff !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .6) !important; text-underline-offset: 3px; }
.journal-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.journal-cote { position: sticky; top: calc(var(--entete) + 24px); display: grid; gap: 16px; }
.studio-encart, .recrute-encart { position: relative; padding: 24px; border: 1px solid var(--bord-2); background: #fff; }
.studio-encart { border-top: 4px solid var(--encre); }
.studio-encart dl { margin: 0 0 14px; display: grid; gap: 14px; }
.studio-encart dt { font-family: var(--titre); font-size: 46px; line-height: .9; color: var(--rouge); }
.studio-encart dd { margin: 2px 0 0; font-size: 13.5px; color: var(--doux); }
.recrute-encart { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.recrute-encart h2 { margin: 0 0 8px; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 36px; line-height: .92; color: #fff; }
.recrute-encart p { color: #fff; font-size: 14px; }
.recrute-encart p a:not([class]) { color: #fff; text-decoration-color: rgba(255, 255, 255, .6); }
.recrute-encart .meta { color: #fff; }
.recrute-encart .bouton-or, .recrute-encart .bouton-discord { --b-fond: #fff; --b-bord: #fff; --b-texte: var(--rouge); }

/* ---------- Galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 10px; }
.galerie-tuile {
    position: relative; overflow: hidden; border: 0; padding: 0; background: var(--encre); cursor: zoom-in;
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.galerie-tuile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galerie-tuile:hover img { transform: scale(1.05); }
.galerie-tuile figcaption, .galerie-tuile span { position: absolute; left: 0; bottom: 0; max-width: calc(100% - 24px); padding: 7px 12px 6px 22px; background: var(--encre); color: #fff; font: 700 11.5px/1.3 var(--police); letter-spacing: .04em; text-transform: uppercase; text-align: left; border-left: 4px solid var(--rouge); }
.galerie-tuile.grande { grid-column: span 2; grid-row: span 2; }
.galerie-tuile.large { grid-column: span 2; }
.visionneuse { width: min(1400px, 100% - 32px); max-height: calc(100vh - 32px); padding: 0; border: 0; border-top: 4px solid var(--rouge); background: #000; overflow: hidden; }
.visionneuse::backdrop { background: rgba(14, 14, 16, .92); }
.visionneuse img { width: 100%; max-height: calc(100vh - 100px); object-fit: contain; }
.visionneuse-pied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; background: var(--encre); color: #fff; font-size: 14px; }
.visionneuse-pied .bouton-contour { --b-bord: #fff; --b-texte: #fff; }

/* ---------- Rejoindre : étapes numérotées ---------- */
.etapes-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; }
.etapes-liste li { position: relative; display: flex; flex-direction: column; padding: 26px 24px 24px; background: #fff; border: 1px solid var(--bord-2); border-top: 4px solid var(--encre); transition: border-color var(--transition); }
.etapes-liste li:hover { border-top-color: var(--rouge); }
.etape-chiffre { font-family: var(--titre); font-size: 76px; line-height: .82; color: var(--rouge); margin-bottom: 16px; }
.etape-chiffre::before { content: '0'; }
.etapes-liste h3 { margin: 0 0 8px; font: 800 17px/1.2 var(--police); letter-spacing: .02em; text-transform: uppercase; }
.etapes-liste p { color: var(--doux); font-size: 14.5px; }
.etapes-liste .lien-fleche, .etapes-liste .adresse { margin-top: auto; align-self: flex-start; }
.adresse { display: flex; gap: 8px; align-items: center; width: 100%; padding: 6px 6px 6px 12px; background: var(--surface-3); border: 1px solid var(--bord-2); }
.adresse code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.appel {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-top: 56px;
    padding: 34px 36px; background: var(--encre); color: #fff; border-left: 8px solid var(--rouge);
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.appel h2 { margin: 0 0 6px; font-size: clamp(34px, 3.6vw, 48px); color: #fff; }
.appel p { margin: 0; color: #c9c9cf; max-width: 620px; }
.appel .bouton-contour { --b-bord: #fff; --b-texte: #fff; }
.appel .bouton-contour:hover { --b-fond: #fff; --b-texte: var(--encre); }

/* ---------- FAQ ---------- */
.faq-grille { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.faq-grille .doux { margin-bottom: 22px; }
.faq { border-top: 2px solid var(--encre); }
.faq details { border-bottom: 1px solid var(--bord-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font: 800 16px/1.35 var(--police); color: var(--encre); cursor: pointer; list-style: none; transition: color var(--transition); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rouge); }
.faq summary .ico { flex: 0 0 auto; width: 30px; height: 30px; padding: 6px; border: 1.5px solid var(--encre); color: var(--encre); transition: rotate var(--transition), background var(--transition), color var(--transition), border-color var(--transition); }
.faq details[open] summary .ico { rotate: 45deg; background: var(--rouge); border-color: var(--rouge); color: #fff; }
.faq details > div { padding: 0 46px 22px 0; color: var(--doux); }

/* ---------- Appel final : bande rouge en biais ---------- */
.final { position: relative; padding: clamp(84px, 9vw, 120px) 0 clamp(60px, 7vw, 90px); margin-top: -1px; background: var(--rouge); color: #fff; clip-path: polygon(0 52px, 100% 0, 100% 100%, 0 100%); }
.final::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: min(28vw, 340px); pointer-events: none; background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .13) 0 2px, transparent 2px 13px); clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); }
.final-ligne { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.final h2 { margin: 0; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(52px, 6.4vw, 96px); line-height: .88; color: #fff; }
.centre-bloc { display: block; margin: 0 auto 18px; }

/* ---------- Pied de page : noir ---------- */
.pied { background: var(--encre); color: #c9c9cf; padding: 64px 0 28px; border-top: 6px solid var(--rouge); }
.pied .marque-nom { color: #fff; }
.pied .marque-sous { color: #8f8f98; }
.pied-haut { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }
.pied-haut p { color: #b4b4bb; font-size: 14px; max-width: 380px; }
.pied .bouton-contour { --b-bord: #fff; --b-texte: #fff; }
.pied .bouton-contour:hover { --b-fond: #fff; --b-texte: var(--encre); }
.pied-colonne { display: grid; gap: 10px; align-content: start; }
.pied-colonne h4 { margin-bottom: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--rouge-clair); }
.pied-colonne a { color: #d6d6db; font-size: 14px; transition: color var(--transition), padding var(--transition); }
.pied-colonne a:hover { color: #fff; padding-left: 4px; }
.pied-bas { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.pied-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0; }
.pied-legal a { padding: 0 14px; font: 800 11.5px/1.1 var(--police); letter-spacing: .06em; text-transform: uppercase; color: #d6d6db; border-left: 3px solid var(--rouge); }
.pied-legal a:first-child { padding-left: 0; border-left: 0; }
.pied-legal a:hover { color: #fff; }
.pied-reseaux { display: flex; gap: 8px; }
.pied-reseaux a { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid rgba(255, 255, 255, .35); color: #fff; transition: background var(--transition), border-color var(--transition); }
.pied-reseaux a:hover { background: var(--rouge); border-color: var(--rouge); }
.mentions { margin-top: 22px; font-size: 12px; color: #8f8f98; }
.retour-haut {
    position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 46px; height: 46px; background: var(--rouge); color: #fff;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity var(--transition), translate var(--transition), background var(--transition);
}
/* Tchat en direct : sa bulle occupe le coin bas droit, le bouton « haut de page » passe au-dessus */
.avec-tchat .retour-haut { bottom: 96px; }
.retour-haut:hover { background: var(--encre); }
.retour-haut .ico { rotate: -90deg; width: 18px; height: 18px; }
.retour-haut.visible { opacity: 1; translate: 0 0; pointer-events: auto; }

/* ---------- Pages simples (légal, règlement, boutique, journal, erreurs) ---------- */
.page-simple { padding: 56px 0 96px; }
.page-simple-entete { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0 clamp(36px, 4vw, 54px); background: #fff; border-bottom: 2px solid var(--encre); }
/* bloc de hachures rouges à droite, barre rouge sous le titre */
.page-simple-entete::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: min(32vw, 420px); pointer-events: none; background: repeating-linear-gradient(-58deg, var(--rouge) 0 3px, transparent 3px 15px); clip-path: polygon(38% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; }
.page-simple-entete::after { content: ''; position: absolute; left: max(20px, calc((100vw - 1200px) / 2)); bottom: 0; width: 160px; height: 8px; background: var(--rouge); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 100%, 0 100%); }
.page-simple-entete .conteneur { position: relative; z-index: 1; }
.page-simple-entete h1 { margin: 0 0 16px; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(60px, 8.4vw, 124px); line-height: .84; letter-spacing: .004em; color: var(--encre); }
.page-simple-entete p { color: var(--doux); max-width: 700px; font-size: 16px; }
.page-simple-entete .page-accroche { margin: 0 0 12px; font-size: clamp(18px, 1.8vw, 23px); font-weight: 800; letter-spacing: -.02em; color: var(--encre); }
.page-simple-entete .surtitre { margin-bottom: 22px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; } /* place pour les accents des capitales (È, É) */
.page-simple-entete .surtitre::before { content: '//'; }
.page-simple-entete .surtitre .ico { display: none; }
.sommaire { display: grid; padding: 0; border-top: 2px solid var(--encre); }
.sommaire a { padding: 12px 0; border-bottom: 1px solid var(--bord-2); color: var(--doux); font-size: 14px; font-weight: 700; transition: color var(--transition), padding var(--transition), box-shadow var(--transition); }
.sommaire a:hover { color: var(--rouge); padding-left: 10px; box-shadow: inset 3px 0 0 var(--rouge); }
.regle { padding: 0 0 32px; border-bottom: 1px solid var(--bord-2); }
.regle h2 { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: 42px; letter-spacing: .01em; line-height: 1; }
.regle h2 span { font: 500 14px/1 var(--mono); color: var(--rouge); }
.regle ol { margin: 0; padding-left: 0; list-style: none; color: var(--doux); display: grid; gap: 10px; }
.regle li b { color: var(--encre); }
.erreur-page { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 20px; }
.erreur-code { margin: 0 0 22px; font-family: var(--titre); font-size: clamp(130px, 22vw, 240px); line-height: .8; color: transparent; -webkit-text-stroke: 3px var(--rouge); }
.erreur-page .boutons { justify-content: center; }
.erreur-page h1 { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(42px, 5vw, 64px); line-height: .9; }

/* =================================================================================================
   BOUTIQUE
   ================================================================================================= */
.produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.produit-carte { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bord-2); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.produit-carte:hover { border-color: var(--encre); transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--encre); }
.produit-carte.mise-en-avant { border: 2px solid var(--rouge); }
.produit-carte.mise-en-avant:hover { box-shadow: 6px 6px 0 var(--rouge); }
.produit-carte::after { z-index: 2; background: var(--encre); }
.produit-visuel {
    position: relative; display: grid; place-items: center; height: 156px; overflow: hidden; isolation: isolate; background: var(--rouge); color: #fff;
}
.produit-visuel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 13px); clip-path: polygon(55% 0, 100% 0, 100% 100%, 30% 100%); }
.produit-filigrane { position: absolute; left: -16px; bottom: -26px; z-index: -1; color: #fff; opacity: .18; }
.produit-filigrane .ico { width: 150px; height: 150px; }
.produit-visuel .etiquette-rouge { --etiquette: var(--encre); font-size: 32px; }
.produit-ruban { position: absolute; top: 12px; left: 12px; right: 28px; display: flex; gap: 6px; flex-wrap: wrap; }
.produit-ruban .badge { background: #fff; }
.produit-corps { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.produit-carte h3 { margin-bottom: 6px; font-family: var(--titre); font-weight: 400; font-size: 34px; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.produit-carte h3 a:hover { color: var(--rouge); }
.produit-corps > p { color: var(--doux); font-size: 14px; }
.produit-contenu { list-style: none; padding: 0; margin: 4px 0 20px; display: grid; gap: 9px; font-size: 14px; }
.produit-contenu li { display: flex; gap: 10px; align-items: center; color: var(--texte); font-weight: 600; }
.produit-contenu li .ico { width: 18px; height: 18px; padding: 2px; background: var(--rouge); color: #fff; }
.produit-bas { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 16px; border-top: 2px solid var(--encre); }
/* Conditions à remplir (offre gratuite, panier) : libellés sur plusieurs lignes, lien en dessous si besoin */
.liste-etapes > li { flex-wrap: wrap; row-gap: 6px; }
.liste-etapes .liste-principal { min-width: 140px; }
.liste-etapes .liste-principal b { white-space: normal; }
.liste-etapes .lien-fleche { font-size: 11px; }
.prix { font-family: var(--titre); font-weight: 400; font-size: 42px; line-height: .9; letter-spacing: .01em; color: var(--encre); }
.prix small { font-family: var(--police); font-size: 13px; color: var(--pale); font-weight: 600; }
.prix-gratuit { color: var(--rouge); }
/* Paiement PayPal : bouton aux couleurs de PayPal (logo officiel, assets/img/paypal.svg) */
.bouton-paypal { --b-fond: #ffc439; --b-bord: #ffc439; --b-texte: #003087; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.bouton-paypal:hover { --b-fond: #f2ba36; --b-bord: #f2ba36; --b-texte: #003087; transform: translate(-2px, -2px); filter: drop-shadow(4px 4px 0 var(--encre)); }
.bouton-paypal img { width: auto; height: 24px; }
.bouton-paypal[disabled] { filter: grayscale(1); }
.paiement-paypal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0; color: var(--pale); font-size: 12.5px; }
.paiement-paypal .ico { flex: 0 0 auto; width: 15px; height: 15px; color: var(--ok); }
.paiement-paypal span { flex: 1 1 180px; }
.paiement-paypal img { width: auto; height: 18px; }
.paiement-paypal span:first-child:not(:only-child) { flex: 0 0 auto; }
.logo-paypal-petit { display: inline-block; width: auto; height: 19px; vertical-align: middle; }

/* ---------- Paiement par carte bancaire (Stripe) : boutons, pictogrammes des cartes, page /paiement/carte ---------- */
/* en-tête de page resserré : la page de paiement va droit au formulaire */
.page-simple-entete.compacte { padding: clamp(34px, 4vw, 54px) 0 clamp(26px, 3vw, 38px); }
.page-simple-entete.compacte h1 { margin-bottom: 12px; font-size: clamp(44px, 5.4vw, 78px); }
.page-simple-entete.compacte .surtitre { margin-bottom: 14px; }
.logos-cartes { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.logos-cartes img { display: block; width: auto; height: 26px; }
.bouton-carte { --b-fond: var(--encre); --b-bord: var(--encre); --b-texte: #fff; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.bouton-carte:hover { --b-fond: #000; --b-bord: #000; transform: translate(-2px, -2px); filter: drop-shadow(4px 4px 0 var(--rouge)); }
.bouton-carte .logos-cartes { margin-left: 4px; gap: 4px; }
.bouton-carte .logos-cartes img { height: 22px; }
.bouton-carte[disabled] { filter: grayscale(1); }
.pile-serree { display: grid; gap: 10px; }
.pile-serree > legend { margin-bottom: 10px; }
.moyens-paiement { display: grid; gap: 10px; }
.moyens-ou { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--pale); }
.moyens-ou::before, .moyens-ou::after { content: ''; flex: 1; height: 1px; background: var(--bord-2); }
.moyens-essai { display: flex; gap: 9px; align-items: flex-start; margin: 2px 0 0; padding: 9px 11px; background: var(--warn-doux); border-left: 3px solid var(--warn); font-size: 12px; line-height: 1.45; color: var(--doux); }
.moyens-essai .ico { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; color: var(--warn); }
.paiement-securise { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 0; color: var(--pale); font-size: 12.5px; }
.paiement-securise > .ico { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--ok); }
.paiement-securise > span:first-of-type { flex: 1 1 180px; }
.paiement-securise-logos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.paiement-securise-logos .logos-cartes img { height: 20px; }
.paiement-paypal .logos-cartes img { height: 20px; }
.commande-payer { flex: 1 1 320px; max-width: 460px; }
/* champs de carte : mêmes dimensions et mêmes états que les champs du site (le cadre de Stripe est à l'intérieur) */
.champ-carte { min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--bord-2); background: var(--surface); transition: border-color var(--transition), box-shadow var(--transition); cursor: text; }
.champ-carte:hover { border-color: var(--bord-3); }
.champ-carte.actif { border-color: var(--rouge); box-shadow: 0 0 0 3px rgba(227, 16, 46, .14); }
.champ-carte.invalide { border-color: var(--danger); }
.champ-carte.complet:not(.actif) { border-color: var(--ok); }
.paiement-carte .carte-entete { align-items: center; }
.paiement-carte .formulaire { max-width: 560px; }
.paiement-carte .formulaire.occupe .champ-carte, .paiement-carte .formulaire.occupe input { background: var(--surface-3); }
.paiement-carte .formulaire.reussi #carte-payer { --b-fond: var(--ok); --b-bord: var(--ok); }
.carte-etat { min-height: 20px; margin: -4px 0 0; font: 500 12px/1.6 var(--mono); letter-spacing: .02em; color: var(--pale); }
.paiement-carte .formulaire.occupe .carte-etat { color: var(--encre); }
.paiement-carte .formulaire.occupe .carte-etat::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 9px; border: 2px solid var(--rouge); border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: carte-tourne .7s linear infinite; }
@keyframes carte-tourne { to { rotate: 360deg; } }
.paiement-garanties { list-style: none; margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--bord); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.paiement-garanties li { display: flex; gap: 11px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--pale); }
.paiement-garanties .ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; color: var(--ok); }
.paiement-garanties b { display: block; margin-bottom: 2px; font-size: 13px; color: var(--encre); }
.paiement-autres { display: grid; gap: 10px; }
.paiement-autres form { margin: 0; }
@media (max-width: 900px) { .paiement-garanties { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .paiement-carte .formulaire.occupe .carte-etat::before { animation: none; } }
.garantie-logo { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; }
.boutique-garanties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 48px; }
.boutique-garanties > div { display: flex; gap: 14px; align-items: flex-start; padding: 20px; background: var(--surface-2); border: 1px solid var(--bord-2); border-left: 4px solid var(--rouge); }
.boutique-garanties .ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--rouge); margin-top: 2px; }
.boutique-garanties b { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; color: var(--encre); }
.boutique-garanties span span { display: block; font-size: 13px; color: var(--doux); }
/* ---------- Boutique solidaire : bandeau de la boutique, fenêtre d'annonce, rappel du panier ---------- */
.solidaire-part { flex: 0 0 auto; padding: 8px 12px 3px; background: var(--rouge); color: #fff; font: 400 44px/.9 var(--titre); letter-spacing: .01em; white-space: nowrap; clip-path: polygon(0 0, calc(100% - var(--c, 9px)) 0, 100% var(--c, 9px), 100% 100%, var(--c, 9px) 100%, 0 calc(100% - var(--c, 9px))); }
.solidaire-bandeau { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; background: var(--encre); color: #fff; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.solidaire-texte b { display: block; font: 800 14px/1.3 var(--police); letter-spacing: .06em; text-transform: uppercase; }
.solidaire-texte span { display: block; margin-top: 2px; font-size: 14px; color: rgba(255, 255, 255, .8); }
dialog.dialogue-solidaire { width: min(640px, 100% - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); border: 0; overflow: auto; }
.solidaire-tete { position: relative; display: flex; gap: 20px; align-items: center; padding: 22px 60px 20px 24px; background: var(--encre); color: #fff; border-bottom: 4px solid var(--rouge); overflow: hidden; }
/* hachures rouges de la charte, dans le coin de l'en-tête */
.solidaire-tete::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 150px; pointer-events: none; background: repeating-linear-gradient(-58deg, var(--rouge) 0 3px, transparent 3px 15px); clip-path: polygon(62% 0, 100% 0, 100% 100%, 0 100%); opacity: .55; }
.solidaire-tete > * { position: relative; }
.solidaire-tete .solidaire-part { font-size: 64px; padding: 11px 15px 4px; --c: 12px; }
.solidaire-tete .surtitre { margin-bottom: 6px; color: var(--rouge-clair); }
.solidaire-tete h2 { margin: 0; color: #fff; font: 400 32px/.95 var(--titre); letter-spacing: .01em; text-transform: uppercase; }
.dialogue-solidaire .dialogue-corps { padding: 20px 24px; }
.solidaire-tete form { position: static; margin: 0; }
.solidaire-intro { margin: 0; color: var(--doux); font-size: 15px; }
.solidaire-intro b { color: var(--encre); }
.solidaire-etapes { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: etape; }
.solidaire-etapes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--bord-2); counter-increment: etape; }
.solidaire-etapes li::before { content: counter(etape, decimal-leading-zero); font: 400 30px/1 var(--titre); color: var(--rouge); }
.solidaire-etapes b { display: block; font-size: 13.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--encre); }
.solidaire-etapes span { display: block; font-size: 14px; color: var(--doux); }
.solidaire-note { margin: 4px 0 0; padding: 12px 14px; background: var(--surface-2); border-left: 3px solid var(--encre); font-size: 13px; color: var(--doux); }
.dialogue-solidaire .dialogue-pied { flex-wrap: wrap; position: sticky; bottom: 0; }
.solidaire-ligne { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 0; padding: 12px 14px; background: var(--rouge-doux); border-left: 3px solid var(--rouge); font-size: 13.5px; color: var(--doux); }
.solidaire-ligne .ico { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--rouge); }
.solidaire-ligne b { color: var(--encre); }
@media (max-width: 720px) {
    /* barre du haut : le cœur seul, messages sur deux lignes, flèche seule */
    .barre-solidaire { font-size: 10.5px; letter-spacing: .03em; }
    .barre-solidaire-interieur, .app-principal .barre-solidaire-interieur { width: auto; margin: 0; padding: 0 14px; gap: 12px; min-height: 44px; }
    .barre-solidaire-marque b, .barre-solidaire-lien span { display: none; }
    .barre-solidaire-lien { padding: 6px; border: 0; }
    .barre-solidaire-messages { height: 44px; border-left: 0; }
    .barre-solidaire-messages > span { display: flex; align-items: center; padding-left: 0; line-height: 1.4; white-space: normal; }
    .barre-solidaire-messages > span > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
    .barre-solidaire-messages b { padding: 1px 5px; }
    .solidaire-bandeau { grid-template-columns: auto minmax(0, 1fr); }
    .solidaire-bandeau .bouton { grid-column: 1 / -1; justify-self: start; }
    .solidaire-tete { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 56px 20px 20px; }
    .solidaire-tete .solidaire-part { font-size: 56px; }
    .solidaire-tete h2 { font-size: 28px; }
    .dialogue-solidaire .dialogue-corps { padding: 20px; }
    .dialogue-solidaire .dialogue-pied .bouton { flex: 1 1 100%; }
}
.panier-ligne { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--bord); }
.panier-ligne:last-child { border-bottom: 0; }
.panier-ligne .prix { font-size: 30px; }
.quantite { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--bord-2); overflow: hidden; }
.quantite input { width: 56px; min-height: 36px; border: 0; text-align: center; padding: 6px; }
.recap { display: grid; gap: 10px; }
.recap div { display: flex; justify-content: space-between; color: var(--doux); }
.recap .total { padding-top: 12px; border-top: 2px solid var(--encre); color: var(--encre); font-size: 18px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }

/* =================================================================================================
   COMPTES (connexion, inscription…) : photo de Los Santos en bichromie rouge
   ================================================================================================= */
.auth { min-height: calc(100vh - var(--entete)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.auth-visuel { position: relative; overflow: hidden; isolation: isolate; display: grid; align-items: end; padding: 56px; color: #fff; background: var(--rouge); }
/* photo de nuit en noir et blanc, « éclaircie » sur l'aplat rouge : les lumières de la ville ressortent en clair */
.auth-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; object-position: 55% 50%; filter: grayscale(1) contrast(1.35) brightness(1.15); mix-blend-mode: screen; opacity: .7; }
.auth-visuel .degrade { color: var(--encre); }
.auth-visuel::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 120px; z-index: 0; background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 13px); }
.auth-visuel blockquote { position: relative; z-index: 1; margin: 0; max-width: 480px; }
.auth-visuel blockquote p { font-family: var(--titre); font-size: clamp(50px, 4.4vw, 70px); line-height: .86; letter-spacing: .005em; text-transform: uppercase; color: #fff; }
.auth-visuel ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; color: #fff; font-weight: 600; }
.auth-visuel li { display: flex; gap: 10px; align-items: center; }
.auth-visuel li .ico { width: 20px; height: 20px; padding: 3px; background: #fff; color: var(--rouge); }
.auth-formulaire { display: grid; place-items: center; padding: 48px 24px; background: #fff; }
.auth-boite { width: min(440px, 100%); }
.auth-boite h1 { margin-bottom: 8px; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(52px, 5.2vw, 70px); line-height: .88; letter-spacing: .005em; }
.auth-boite > p { color: var(--doux); margin-bottom: 26px; }
.separateur { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--pale); font: 500 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.separateur::before, .separateur::after { content: ''; flex: 1; height: 1.5px; background: var(--bord-2); }
.auth-bas { margin-top: 22px; text-align: center; color: var(--doux); font-size: 14px; }

/* Carte de statut du serveur (tableau de bord client) */
.statut-carte { display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-width: 260px; background: #fff; color: var(--encre); border-left: 5px solid var(--encre); }
.statut-carte p { margin: 0; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.statut-carte b { font-size: 15px; color: var(--encre); }

/* =================================================================================================
   APPLICATION : espace client (barre blanche) et administration (barre noire)
   ================================================================================================= */
.corps-app { background: var(--fond); }
.app { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.app-barre {
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 16px;
    background: #fff; border-right: 1px solid var(--bord-2); overflow-y: auto; scrollbar-width: thin;
}
.app-marque { display: flex; align-items: center; gap: 11px; padding: 4px 6px; }
.app-marque img { width: 40px; height: 40px; }
.app-marque b { display: block; font-family: var(--titre); font-size: 27px; font-weight: 400; letter-spacing: .03em; line-height: .86; text-transform: uppercase; color: var(--encre); }
.app-marque b em { font-style: normal; color: var(--rouge); }
.app-marque small { display: block; margin-top: 4px; font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pale); }
.app-fermer { display: none; margin-left: auto; width: 38px; height: 38px; border: 1.5px solid var(--bord-2); background: var(--surface); place-items: center; }
.app-perso { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--bord-2); border-left: 4px solid var(--rouge); transition: border-color var(--transition), background var(--transition); }
.app-perso:hover { border-color: var(--encre); border-left-color: var(--rouge); background: #fff; }
.app-perso img, .app-perso .app-perso-ico { width: 42px; height: 42px; object-fit: cover; flex: 0 0 auto; }
.app-perso .app-perso-ico { display: grid; place-items: center; background: var(--rouge); color: #fff; }
.app-perso b { display: block; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre); }
.app-perso small { display: block; font-size: 12px; color: var(--pale); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-perso > span { min-width: 0; flex: 1; }
.app-perso > .ico { color: var(--pale); width: 16px; height: 16px; }
/* Navigation : liens directs + menus déroulants (<details class="app-groupe">, état gardé par site.js).
   Un menu fermé affiche le total de ce qui attend à l'intérieur ; celui de la page en cours est marqué en rouge. */
.app-nav { display: grid; gap: 3px; align-content: start; }
.app-nav a, .app-groupe > summary { position: relative; display: flex; align-items: center; gap: 11px; padding: 9px 11px; color: var(--doux); font-size: 14px; font-weight: 600; transition: background var(--transition), color var(--transition); }
.app-nav a:hover, .app-groupe > summary:hover { background: var(--surface-3); color: var(--encre); }
.app-nav a[aria-current] { background: var(--rouge-doux); color: var(--rouge-sombre); font-weight: 800; }
.app-nav > a[aria-current]::before, .app-groupe.actif > summary::before { content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 5px; background: var(--rouge); }
.app-nav a[aria-current] .ico { color: var(--rouge); }
.app-nav a span:first-of-type, .app-groupe > summary > span:first-of-type { flex: 1; min-width: 0; }
.app-nav .ico-externe { width: 14px; height: 14px; opacity: .6; }
.app-groupe > summary { list-style: none; cursor: pointer; user-select: none; color: var(--encre); font-weight: 700; }
.app-groupe > summary::-webkit-details-marker { display: none; }
.app-groupe > summary:focus-visible { outline: 2px solid var(--rouge); outline-offset: -2px; }
.app-groupe > summary .ico-fleche { width: 15px; height: 15px; color: var(--pale); transition: rotate .2s cubic-bezier(.2, .7, .3, 1); }
.app-groupe[open] > summary .ico-fleche { rotate: 180deg; }
.app-groupe[open] > summary .compteur-pastille { display: none; }
.app-groupe.actif > summary { color: var(--rouge-sombre); font-weight: 800; }
.app-groupe.actif > summary > .ico:first-child { color: var(--rouge); }
.app-groupe-liens { display: grid; gap: 1px; margin: 3px 0 7px 19px; padding-left: 12px; border-left: 2px solid var(--bord-2); }
.app-groupe-liens a { padding: 7px 10px; font-size: 13.5px; }
.app-groupe-liens a[aria-current]::before { content: ''; position: absolute; left: -14px; top: 0; bottom: 0; width: 2px; background: var(--rouge); }
.app-groupe.vient-de-s-ouvrir > .app-groupe-liens { animation: menu-ouvre .22s cubic-bezier(.2, .7, .3, 1); }
@keyframes menu-ouvre { from { opacity: 0; translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .app-groupe.vient-de-s-ouvrir > .app-groupe-liens { animation: none; } }
.app-barre-bas { margin-top: auto; display: grid; gap: 8px; }
.app-discord { display: flex; align-items: center; gap: 12px; padding: 12px; background: #eef0fe; border: 1px solid #cdd2fb; border-left: 4px solid var(--discord); }
.app-discord .ico { color: var(--discord); width: 22px; height: 22px; }
.app-discord b { display: block; font-size: 13.5px; color: var(--encre); }
.app-discord small { display: block; font-size: 12px; color: var(--doux); }
.app-voile { display: none; }
.app-principal { display: flex; flex-direction: column; min-width: 0; }
.app-entete { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--bord-2); }
.app-burger { display: none; width: 42px; height: 42px; border: 1.5px solid var(--encre); background: #fff; place-items: center; }
.fil { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--pale); min-width: 0; }
.fil a { color: var(--doux); font-weight: 700; white-space: nowrap; }
.fil a:first-child { font: 800 11.5px/1 var(--police); letter-spacing: .08em; text-transform: uppercase; color: var(--rouge); }
.fil a:hover { color: var(--encre); }
.fil .ico { width: 14px; height: 14px; }
.fil span { color: var(--encre); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profil-nom b, .profil-nom small { white-space: nowrap; }
@media (max-width: 1280px) { .app-statut { display: none; } }
.app-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.app-statut { display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--bord-2); font: 500 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--doux); white-space: nowrap; }
.app-icone { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--bord-2); background: var(--surface); color: var(--encre); transition: color var(--transition), border-color var(--transition); }
.app-icone:hover { color: var(--rouge); border-color: var(--encre); }
.app-icone .compteur-pastille { position: absolute; top: -7px; right: -7px; min-width: 19px; height: 19px; font-size: 10px; }
.notifs .deroulant-menu { width: min(380px, calc(100vw - 24px)); padding: 0; overflow: hidden; }
.notifs-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--bord); }
.notifs-tete b { font: 800 13px/1 var(--police); letter-spacing: .06em; text-transform: uppercase; color: var(--encre); }
.notifs-tete button { width: auto; padding: 4px 8px; font-size: 12.5px; font-weight: 700; color: var(--rouge); }
.notifs-liste { max-height: 380px; overflow-y: auto; }
.notif { display: flex; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--bord); transition: background var(--transition); }
.notif:last-child { border-bottom: 0; }
.notif:hover { background: var(--surface-2); }
.notif .liste-ico { width: 34px; height: 34px; }
.notif b { display: block; font-size: 13.5px; line-height: 1.35; color: var(--encre); }
.notif small { display: block; font-size: 12px; color: var(--pale); margin-top: 2px; }
.notif p { margin: 3px 0 0; font-size: 12.5px; color: var(--doux); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif.non-lue { background: var(--rouge-doux); box-shadow: inset 4px 0 0 var(--rouge); }
.notifs-pied { display: block; padding: 11px 16px; text-align: center; font: 800 12px/1.2 var(--police); letter-spacing: .06em; text-transform: uppercase; color: var(--rouge); border-top: 1px solid var(--bord); }
.profil > summary { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border: 1px solid var(--bord-2); background: var(--surface); }
.profil > summary:hover { border-color: var(--encre); }
.profil-nom b { display: block; font-size: 13.5px; line-height: 1.2; color: var(--encre); }
.profil-nom small { display: block; font-size: 11.5px; color: var(--pale); }
.profil .ico-fleche { width: 14px; height: 14px; color: var(--pale); }
/* Contenu en pleine page : il occupe toute la largeur disponible, aligné sur la barre du haut (même marge de 28 px) */
.app-contenu { flex: 1; width: 100%; min-width: 0; padding: 28px 28px 56px; }
.app-pied { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 28px; border-top: 1px solid var(--bord-2); font-size: 12.5px; color: var(--pale); background: #fff; }
.app-pied a:hover { color: var(--rouge); }

/* Administration : barre latérale noire et filet rouge, pour ne jamais confondre l'espace du staff avec l'espace client */
.app-admin .app-barre { background: var(--encre); border-right-color: #000; color: #fff; scrollbar-color: #3a3a40 var(--encre); }
.app-admin .app-marque b { color: #fff; }
.app-admin .app-marque small { color: var(--rouge-clair); }
.app-admin .app-fermer { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.app-admin .app-perso { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); border-left-color: var(--rouge); }
.app-admin .app-perso:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); border-left-color: var(--rouge); }
.app-admin .app-perso b { color: #fff; }
.app-admin .app-perso small, .app-admin .app-perso > .ico { color: #9d9da6; }
.app-admin .app-nav a { color: #c4c4cb; }
.app-admin .app-nav a:hover, .app-admin .app-groupe > summary:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.app-admin .app-nav a[aria-current] { background: rgba(227, 16, 46, .22); color: #fff; }
.app-admin .app-nav a[aria-current] .ico { color: var(--rouge-clair); }
.app-admin .app-groupe > summary { color: #ececf0; }
.app-admin .app-groupe > summary .ico-fleche { color: #8d8d96; }
.app-admin .app-groupe.actif > summary { color: #fff; }
.app-admin .app-groupe.actif > summary > .ico:first-child { color: var(--rouge-clair); }
.app-admin .app-groupe-liens { border-left-color: rgba(255, 255, 255, .14); }
.app-admin .app-discord { background: rgba(88, 101, 242, .14); border-color: rgba(88, 101, 242, .35); border-left-color: var(--discord); }
.app-admin .app-discord b { color: #fff; }
.app-admin .app-discord small { color: #b4b4bb; }
.app-admin .app-discord .ico { color: #9aa2ff; }
.app-admin .app-barre-bas .bouton-fantome { --b-texte: #c4c4cb; }
.app-admin .app-barre-bas .bouton-fantome:hover { --b-fond: rgba(255, 255, 255, .08); --b-texte: #fff; }
.app-admin .app-entete { border-bottom: 3px solid var(--rouge); }

/* En-tête de page */
.page-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-tete h1 { margin: 0; font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 4vw, 58px); line-height: .88; letter-spacing: .005em; }
.page-tete p { margin: 8px 0 0; color: var(--doux); max-width: 720px; }
.page-tete .surtitre { margin-bottom: 8px; }
.retour { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font: 800 11.5px/1 var(--police); letter-spacing: .07em; text-transform: uppercase; color: var(--doux); }
.retour:hover { color: var(--rouge); }
.retour .ico { width: 15px; height: 15px; }

/* Bienvenue (tableau de bord client) : photo en bichromie rouge */
.bienvenue {
    position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center;
    padding: clamp(24px, 3vw, 36px); margin-bottom: 20px; background: var(--rouge); color: #fff;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.bienvenue > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; z-index: -2; filter: grayscale(1) contrast(1.35) brightness(1.1); mix-blend-mode: screen; opacity: .55; }
.bienvenue::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 160px; z-index: -1; background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 13px); }
.bienvenue .degrade { color: var(--encre); }
.bienvenue h1 { font-family: var(--titre); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 4.8vw, 70px); line-height: .88; letter-spacing: .005em; margin-bottom: 10px; color: #fff; }
.bienvenue p { color: #fff; margin: 0; font-weight: 500; }
.bienvenue .meta, .bienvenue .surtitre { color: #fff; }
.bienvenue .boutons { margin-top: 18px; }
.bienvenue .bouton-or { --b-fond: #fff; --b-bord: #fff; --b-texte: var(--rouge); }
.bienvenue .bouton-or:hover { --b-fond: #fff; --b-texte: var(--rouge); }
.bienvenue .bouton-contour, .bienvenue .bouton-fantome, .bienvenue .bouton-verre { --b-fond: transparent; --b-bord: #fff; --b-texte: #fff; }
.bienvenue .bouton-contour:hover, .bienvenue .bouton-fantome:hover, .bienvenue .bouton-verre:hover { --b-fond: #fff; --b-texte: var(--rouge); }
.bienvenue .badge { background: #fff; }

/* =================================================================================================
   CARTE D'IDENTITÉ (réplique du document du jeu : unity_identite/html/carte.css)
   ================================================================================================= */
.cni-scene { display: grid; justify-items: center; gap: 14px; }
.cni-cadre { width: 430px; height: 272px; perspective: 1400px; }
.cni { position: relative; width: 430px; height: 272px; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .7, .3, 1); }
.cni.retournee { transform: rotateY(180deg); }
.cni-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cni-face-verso { transform: rotateY(180deg); }
.cni-legende { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: 12.5px; color: var(--pale); }

.uc-carte {
    --uc-encre: #1c2a4a; --uc-label: #5a6a8c;
    position: relative; width: 430px; height: 272px; border-radius: 16px; overflow: hidden;
    font-family: 'Inter', 'Segoe UI', sans-serif; color: var(--uc-encre); text-align: left; line-height: 1.3;
    box-shadow: 0 24px 50px rgba(14, 14, 16, .28), 0 2px 0 rgba(255, 255, 255, .6) inset; user-select: none;
}
.uc-cni { background: linear-gradient(125deg, #e3eefb 0%, #f3e8f3 45%, #e6f1ee 75%, #e9ecfb 100%); }
.uc-guilloche {
    position: absolute; inset: 0; opacity: .55; pointer-events: none;
    background:
        repeating-radial-gradient(circle at 78% 30%, transparent 0 9px, rgba(70, 90, 160, .10) 9px 10px),
        repeating-radial-gradient(circle at 18% 90%, transparent 0 13px, rgba(160, 70, 120, .08) 13px 14px),
        repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, .35) 22px 23px);
}
.uc-holo {
    position: absolute; right: 26px; bottom: 30px; width: 74px; height: 74px; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(255, 0, 150, .18), rgba(0, 200, 255, .22), rgba(255, 230, 0, .2), rgba(120, 0, 255, .18), rgba(255, 0, 150, .18));
    mix-blend-mode: multiply; opacity: .7; animation: uc-holo 6s linear infinite;
}
@keyframes uc-holo { to { transform: rotate(360deg); } }
.uc-entete { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 18px 6px; }
.uc-etat { display: flex; align-items: center; gap: 9px; }
.uc-etat b { display: block; font-size: 10.5px; letter-spacing: .14em; font-weight: 800; }
.uc-etat small { display: block; font-size: 8.5px; letter-spacing: .08em; color: var(--uc-label); }
.uc-blason { width: 24px; height: 28px; border-radius: 4px 4px 12px 12px; background: linear-gradient(90deg, #233a8c 0 33%, #fff 33% 66%, #c4283a 66%); box-shadow: 0 0 0 1.5px rgba(28, 42, 74, .35); }
.uc-titre { text-align: right; }
.uc-titre b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.uc-titre small { display: block; font-size: 8.5px; color: var(--uc-label); letter-spacing: .18em; }
.uc-corps { position: relative; display: flex; gap: 14px; padding: 4px 18px 0; }
.uc-photo { position: relative; flex: 0 0 104px; height: 134px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, #d7dde9, #c6cedd); box-shadow: 0 0 0 1px rgba(28, 42, 74, .2); }
.uc-photo-img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05); }
.uc-photo-vide { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.uc-photo-vide svg { width: 78%; fill: rgba(28, 42, 74, .22); }
.uc-photo-vide span { position: absolute; margin-bottom: 8px; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; color: var(--uc-label); background: rgba(255, 255, 255, .7); padding: 2px 6px; border-radius: 4px; }
.uc-champs { flex: 1; min-width: 0; }
.uc-champ { margin-bottom: 5px; min-width: 0; }
.uc-champ label, .uc-champ .uc-label { display: block; font-size: 7.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--uc-label); }
.uc-champ em { font-style: normal; opacity: .75; }
.uc-champ p { margin: 1px 0 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--uc-encre); }
.uc-champ p i { font-style: normal; font-weight: 500; opacity: .35; }
.uc-large p { font-size: 15px; }
.uc-grille { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 10px; }
.uc-maj { text-transform: uppercase; }
.uc-mono { font-family: 'IBM Plex Mono', Consolas, monospace !important; font-weight: 500 !important; letter-spacing: .02em; }
.uc-rouge { color: #b0283a !important; }
.uc-nat { display: flex; align-items: center; gap: 5px; }
.uc-drapeau { width: 17px; height: 12.75px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); flex: 0 0 auto; object-fit: cover; }
.uc-signature { font-family: 'Caveat', cursive !important; font-weight: 500 !important; font-size: 19px !important; color: #23356e !important; line-height: 1; }
.uc-marque { position: absolute; right: 16px; bottom: 9px; font-family: 'Bebas Neue', sans-serif; font-size: 13px; letter-spacing: .32em; color: rgba(28, 42, 74, .28); }
.uc-dos-corps { position: relative; display: flex; gap: 16px; padding: 18px 18px 0; }
.uc-dos-photo { width: 52px; height: 66px; border-radius: 6px; overflow: hidden; opacity: .55; background: #d3d9e6; filter: grayscale(1); flex: 0 0 auto; }
.uc-dos-photo .uc-photo-vide span { display: none; }
.uc-dos-infos { flex: 1; min-width: 0; }
.uc-mrz { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 18px 12px; background: rgba(255, 255, 255, .55); font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 13.4px; letter-spacing: .085em; line-height: 1.3; color: #111; }
.uc-mrz span { display: block; white-space: pre; }

/* Fiche personnage */
.fiche-perso { display: grid; gap: 22px; justify-items: center; }
.fiche-perso > :last-child { width: 100%; }
.fiche-perso-large { grid-template-columns: auto minmax(0, 1fr); justify-items: stretch; align-items: center; gap: 32px; }
@media (max-width: 1280px) { .fiche-perso-large { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.argent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.argent div { padding: 16px; background: var(--surface-2); border: 1px solid var(--bord-2); border-left: 4px solid var(--rouge); }
.argent span { display: flex; align-items: center; gap: 8px; font: 500 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pale); }
.argent span .ico { width: 15px; height: 15px; }
.argent b { display: block; margin-top: 6px; font: 400 34px/1 var(--titre); letter-spacing: .01em; color: var(--encre); font-variant-numeric: tabular-nums; }
.vehicules { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.vehicule { padding: 16px; background: var(--surface); border: 1px solid var(--bord-2); border-top: 3px solid var(--encre); display: grid; gap: 10px; }
.vehicule-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vehicule-tete b { display: block; font-size: 15px; color: var(--encre); }
.vehicule-tete small { display: block; font-size: 12px; color: var(--pale); }
.plaque { display: inline-block; padding: 3px 9px; border-radius: 4px; background: #f4f1e6; color: #16224a; font: 700 12.5px/1.2 var(--mono); letter-spacing: .1em; border: 2px solid #16224a; box-shadow: inset 0 0 0 1px #f4f1e6; }
.etat-vehicule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; font-size: 11.5px; color: var(--pale); }
.etat-vehicule progress { margin-top: 4px; height: 5px; }

/* File de livraison */
.file-livraison { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.file-livraison li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--bord-2); }
.file-livraison li.prochaine { border-color: var(--rouge-bord); background: var(--rouge-doux); box-shadow: inset 4px 0 0 var(--rouge); }
.file-num { display: grid; place-items: center; width: 30px; height: 30px; background: var(--surface-3); font: 400 19px/1 var(--titre); flex: 0 0 auto; }
.file-livraison li.prochaine .file-num { background: var(--rouge); color: #fff; }

/* Code de liaison */
.code-liaison { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; background: var(--surface); border: 2px dashed var(--rouge); flex-wrap: wrap; }
.commande-jeu { flex: 1; font: 600 22px/1.2 var(--mono); letter-spacing: .08em; color: var(--rouge); }

/* =================================================================================================
   SUPPORT : tickets
   ================================================================================================= */
.ticket-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 16px; border-bottom: 1px solid var(--bord); transition: background var(--transition), box-shadow var(--transition); }
.ticket-ligne:last-child { border-bottom: 0; }
.ticket-ligne:hover { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--rouge); }
.ticket-ligne b { display: flex; align-items: center; gap: 8px; font-size: 14.5px; min-width: 0; color: var(--encre); }
.ticket-ligne b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-ligne small { display: block; color: var(--pale); font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-ligne .liste-fin { flex-direction: column; align-items: flex-end; gap: 6px; }
.liste-encadree { border: 1px solid var(--bord-2); background: var(--surface); overflow: hidden; }

.fil-messages { display: grid; gap: 16px; }
.bulle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.bulle-corps { padding: 14px 16px; background: var(--surface); border: 1px solid var(--bord-2); min-width: 0; }
.bulle-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.bulle-tete b { font-size: 14px; color: var(--encre); }
.bulle-tete time { color: var(--pale); font: 500 11.5px var(--mono); margin-left: auto; }
.bulle-texte { font-size: 14.5px; color: var(--texte); overflow-wrap: anywhere; }
.bulle-texte a { color: var(--lien); text-decoration: underline; }
.bulle-staff .bulle-corps { background: #fff9fa; border-color: var(--rouge-bord); border-left: 4px solid var(--rouge); }
.bulle-moi { grid-template-columns: minmax(0, 1fr) auto; }
.bulle-moi .avatar { order: 2; }
.bulle-moi .bulle-corps { background: var(--surface-3); border-right: 4px solid var(--encre); }
.bulle-interne .bulle-corps { background: repeating-linear-gradient(135deg, rgba(232, 156, 18, .1) 0 10px, transparent 10px 20px), #fffdf6; border: 1.5px dashed #d99a2b; }
.bulle-systeme { display: flex; justify-content: center; }
.bulle-systeme p { display: inline-flex; align-items: center; gap: 8px; max-width: 640px; margin: 0; padding: 8px 14px; background: var(--surface); border: 1px solid var(--bord-2); font-size: 12.5px; color: var(--doux); text-align: center; white-space: pre-line; }
.bulle-systeme p .ico { width: 15px; height: 15px; color: var(--rouge); flex: 0 0 auto; }
.bulle-pieces { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.bulle-pieces a { display: block; width: 120px; height: 84px; overflow: hidden; border: 1px solid var(--bord-2); background: var(--surface-3); }
.bulle-pieces img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bulle-pieces a:hover img { transform: scale(1.06); }
.composer { padding: 16px; background: var(--surface); border: 1px solid var(--bord-2); border-top: 3px solid var(--encre); display: grid; gap: 12px; }
.composer textarea { min-height: 110px; }
.composer-barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.joindre { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px dashed var(--bord-3); color: var(--doux); font-size: 13px; font-weight: 700; cursor: pointer; }
.joindre:hover { color: var(--rouge); border-color: var(--rouge); }
.joindre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.apercus { display: flex; gap: 8px; flex-wrap: wrap; }
.apercus img { width: 64px; height: 48px; object-fit: cover; border: 1px solid var(--bord-2); }
.etoiles { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.etoiles input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.etoiles label { cursor: pointer; color: var(--bord-3); }
.etoiles label .ico { width: 26px; height: 26px; }
.etoiles input:checked ~ label, .etoiles label:hover, .etoiles label:hover ~ label { color: var(--or); }
.etoiles input:checked ~ label .ico, .etoiles label:hover .ico, .etoiles label:hover ~ label .ico { fill: currentColor; }

/* =================================================================================================
   WHITELIST
   ================================================================================================= */
.wl-etat { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.wl-etat-ico { display: grid; place-items: center; width: 72px; height: 72px; background: var(--rouge); color: #fff; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.wl-etat-ico .ico { width: 34px; height: 34px; }
.wl-etat-ico.ok { background: var(--ok); }
.wl-etat-ico.danger { background: var(--danger); }
.wl-etat-ico.warn { background: var(--warn); }
.wl-section { display: grid; gap: 16px; padding: 24px; background: var(--surface); border: 1px solid var(--bord-2); }
.wl-section > h2 { display: flex; align-items: center; gap: 12px; margin: 0; font: 800 15px/1.25 var(--police); letter-spacing: .05em; text-transform: uppercase; }
.wl-section > h2 span { display: grid; place-items: center; width: 32px; height: 32px; background: var(--rouge); color: #fff; font: 400 19px/1 var(--titre); }
.reponse-wl { padding: 16px; background: var(--surface-2); border: 1px solid var(--bord-2); border-left: 4px solid var(--encre); }
.reponse-wl h4 { font: 500 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--pale); margin-bottom: 8px; }
details.reponse-wl > summary { cursor: pointer; list-style: none; }
details.reponse-wl > summary::-webkit-details-marker { display: none; }
.reponse-wl p { white-space: pre-line; overflow-wrap: anywhere; color: var(--texte); font-size: 14.5px; }

/* Administration → Réglages : liaison avec le serveur de jeu (configuration de unity_site.cfg) */
.config-jeu { margin-top: 14px; border-top: 1px solid var(--bord); padding-top: 12px; }
.config-jeu > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--encre); }
.config-jeu pre { margin: 10px 0; padding: 12px; background: var(--surface-2); border: 1px solid var(--bord); font: 12.5px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }

/* =================================================================================================
   ADMINISTRATION
   ================================================================================================= */
.alerte-bandeau { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--warn-doux); border: 1px solid #f0d29c; border-left: 5px solid var(--warn); margin-bottom: 20px; }
.alerte-bandeau .ico { color: var(--warn); }
.alerte-bandeau.danger { background: var(--danger-doux); border-color: #f0bcc4; border-left-color: var(--danger); }
.alerte-bandeau.danger .ico { color: var(--danger); }
.alerte-bandeau.ok { background: var(--ok-doux); border-color: #b4e0cb; border-left-color: var(--ok); }
.alerte-bandeau.ok .ico { color: var(--ok); }
.identifiants { display: grid; gap: 8px; }
.identifiant { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--surface-2); border: 1px solid var(--bord-2); font-size: 13px; min-width: 0; }
.identifiant span { color: var(--rouge); font: 500 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; width: 74px; flex: 0 0 auto; }
.identifiant code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texte); }
.identifiant button { width: 30px; height: 30px; min-height: 30px; padding: 0; }
.sanction-carte { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--bord); }
.sanction-carte:last-child { border-bottom: 0; }
.motifs { display: flex; gap: 6px; flex-wrap: wrap; }
.motifs button { padding: 5px 10px; border: 1px solid var(--bord-2); background: var(--surface); color: var(--doux); font-size: 12px; font-weight: 700; }
.motifs button:hover { border-color: var(--rouge); color: var(--rouge); }
.json { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 var(--mono); color: var(--doux); background: var(--surface-3); border: 1px solid var(--bord-2); padding: 10px 12px; margin: 0; max-height: 220px; overflow: auto; }

/* =================================================================================================
   ANIMATIONS D'APPARITION (accueil)
   ================================================================================================= */
/* Blocs sous l'écran à l'arrivée : ils apparaissent en y entrant (classes posées par site.js, retirées ensuite).
   « revele » : monte ; « revele-gauche » : glisse depuis la gauche ; « revele-zoom » : s'agrandit. */
.revele { opacity: 0; translate: 0 26px; transition: opacity .7s cubic-bezier(.2, .7, .3, 1), translate .7s cubic-bezier(.2, .7, .3, 1), scale .7s cubic-bezier(.2, .7, .3, 1); }
.revele-gauche { translate: -32px 0; }
.revele-zoom { translate: 0 0; scale: .93; }
.revele.visible { opacity: 1; translate: 0 0; scale: 1; }
/* le trait rouge sous un titre de section se trace après le titre */
.titre-ligne.revele::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.2, .7, .3, 1) .35s; }
.titre-ligne.revele.visible::after { transform: scaleX(1); }
.sans-js .revele { opacity: 1; translate: 0 0; scale: 1; }

/* =================================================================================================
   CONSTRUCTION DE LA PAGE À CHAQUE CHARGEMENT (classes posées par assets/js/chargeur.js, avant l'affichage)
     html.monte-entete : barres du haut puis en-tête se montent (site public, espace client, administration)
     html.monte        : la une de l'accueil (ou le titre d'une page intérieure) se monte
     html.pret         : top départ (écran de chargement qui s'efface) ; avant, tout attend sur sa
                         première image, donc invisible
   Chaque animation ne décrit que son point de départ : elle rejoint l'état normal de l'élément et ne
   laisse rien derrière elle (les survols et transitions habituels reprennent aussitôt).
   Sans JavaScript, pour les robots et avec « moins d'animations » : aucune de ces classes, page affichée
   telle quelle.
   ================================================================================================= */
html.monte { --depart: 0s; --marche: running; }
html.monte-entete { --depart: .5s; }
html.monte:not(.pret) { --marche: paused; }
@keyframes c-descend { from { translate: 0 -100%; } }
@keyframes c-volet { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes c-du-haut { from { opacity: 0; translate: 0 -14px; } }
@keyframes c-du-bas { from { opacity: 0; translate: 0 24px; } }
@keyframes c-de-gauche { from { opacity: 0; translate: -28px 0; } }
@keyframes c-glisse { from { translate: -101% 0; } }
@keyframes c-photo { from { opacity: 0; scale: 1.07; } }
@keyframes c-leve { from { clip-path: inset(0 0 100% 0); translate: 0 26%; } to { clip-path: inset(-10% 0 -10% 0); } }
@keyframes c-fondu { from { opacity: 0; } }
@keyframes c-trait { 0% { transform: scaleX(0); opacity: 1; } 65% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* --- 1. Barres du haut : la barre solidaire descend, la barre rouge se déroule --- */
html.monte-entete .barre-solidaire { animation: c-descend .5s cubic-bezier(.2, .7, .3, 1) backwards; animation-play-state: var(--marche); }
html.monte-entete .barre-info { animation: c-volet .6s cubic-bezier(.6, 0, .2, 1) .12s backwards; animation-play-state: var(--marche); }
/* --- 2. En-tête : un trait rouge le parcourt, puis la marque, les liens et les actions se posent un à un --- */
html.monte-entete .entete::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--rouge); transform-origin: 0 50%; pointer-events: none; animation: c-trait .9s cubic-bezier(.6, 0, .2, 1) .2s both; animation-play-state: var(--marche); }
html.monte-entete .entete .marque, html.monte-entete .nav-pilule a, html.monte-entete .nav-actions > *, html.monte-entete .menu-mobile {
    animation: c-du-haut .45s cubic-bezier(.2, .7, .3, 1) backwards; animation-play-state: var(--marche);
}
html.monte-entete .entete .marque { animation-name: c-de-gauche; animation-delay: .26s; }
html.monte-entete .nav-pilule a:nth-child(1) { animation-delay: .34s; }
html.monte-entete .nav-pilule a:nth-child(2) { animation-delay: .39s; }
html.monte-entete .nav-pilule a:nth-child(3) { animation-delay: .44s; }
html.monte-entete .nav-pilule a:nth-child(4) { animation-delay: .49s; }
html.monte-entete .nav-pilule a:nth-child(5) { animation-delay: .54s; }
html.monte-entete .nav-pilule a:nth-child(n + 6) { animation-delay: .59s; }
html.monte-entete .nav-actions > *:nth-child(1) { animation-delay: .62s; }
html.monte-entete .nav-actions > *:nth-child(2) { animation-delay: .67s; }
html.monte-entete .nav-actions > *:nth-child(3) { animation-delay: .72s; }
html.monte-entete .nav-actions > *:nth-child(n + 4) { animation-delay: .77s; }
html.monte-entete .menu-mobile { animation-delay: .4s; }
/* --- 3. Une de l'accueil : la photo, le panneau rouge, puis l'étiquette, le titre, le texte, les boutons, la fiche --- */
html.monte .une-image { animation: c-photo 1.3s cubic-bezier(.2, .7, .3, 1) var(--depart) backwards; animation-play-state: var(--marche); }
html.monte .une-panneau { animation: c-glisse .75s cubic-bezier(.6, 0, .2, 1) calc(var(--depart) + .05s) backwards; animation-play-state: var(--marche); }
html.monte .une-etiquette { animation: c-de-gauche .5s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + .5s) backwards; animation-play-state: var(--marche); }
html.monte .une-titre { animation: c-leve .7s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + .6s) backwards; animation-play-state: var(--marche); }
html.monte .une-titre em { animation: c-de-gauche .6s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + .85s) backwards; animation-play-state: var(--marche); }
html.monte .une-texte { animation: c-du-bas .6s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + 1s) backwards; animation-play-state: var(--marche); }
html.monte .une .boutons > * { animation: c-du-bas .5s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + 1.12s) backwards; animation-play-state: var(--marche); }
html.monte .une .boutons > *:nth-child(n + 2) { animation-delay: calc(var(--depart) + 1.2s); }
html.monte .une-fiche { animation: c-du-bas .7s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + 1.05s) backwards; animation-play-state: var(--marche); }
html.monte .une-fiche > div { animation: c-du-bas .45s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + 1.3s) backwards; animation-play-state: var(--marche); }
html.monte .une-fiche > div:nth-child(2) { animation-delay: calc(var(--depart) + 1.37s); }
html.monte .une-fiche > div:nth-child(3) { animation-delay: calc(var(--depart) + 1.44s); }
html.monte .une-fiche > div:nth-child(4) { animation-delay: calc(var(--depart) + 1.51s); }
html.monte .une-credit { animation: c-fondu .6s ease calc(var(--depart) + 1.6s) backwards; animation-play-state: var(--marche); }
html.monte .defilant { animation: c-volet .8s cubic-bezier(.6, 0, .2, 1) calc(var(--depart) + 1.2s) backwards; animation-play-state: var(--marche); }
/* --- 4. Page intérieure ouverte à l'arrivée : son en-tête se monte de la même façon --- */
html.monte-entete .page-simple-entete .conteneur > *, html.monte-entete .page-simple-entete .conteneur-etroit > * { animation: c-du-bas .55s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + .1s) backwards; animation-play-state: var(--marche); }
html.monte-entete .page-simple-entete .conteneur > *:nth-child(2), html.monte-entete .page-simple-entete .conteneur-etroit > *:nth-child(2) { animation-delay: calc(var(--depart) + .2s); }
html.monte-entete .page-simple-entete .conteneur > *:nth-child(n + 3), html.monte-entete .page-simple-entete .conteneur-etroit > *:nth-child(n + 3) { animation-delay: calc(var(--depart) + .3s); }
html.monte-entete .page-simple-entete::before { animation: c-fondu .9s ease calc(var(--depart) + .2s) backwards; animation-play-state: var(--marche); }
html.monte-entete .page-simple, html.monte-entete .auth, html.monte-entete .erreur-page { animation: c-du-bas .6s cubic-bezier(.2, .7, .3, 1) calc(var(--depart) + .35s) backwards; animation-play-state: var(--marche); }
/* --- 5. Espace client et administration : même principe, en moins d'une seconde pour ne pas gêner le travail.
       La barre du haut se trace, le fil d'Ariane et les actions se posent, puis le titre (ou la bannière
       d'accueil) et les blocs de la page montent l'un après l'autre. La barre latérale ne bouge pas. --- */
html.monte-entete .app-entete::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--rouge); transform-origin: 0 50%; pointer-events: none; animation: c-trait .8s cubic-bezier(.6, 0, .2, 1) .05s both; animation-play-state: var(--marche); }
html.monte-entete .app-entete .fil { animation: c-de-gauche .4s cubic-bezier(.2, .7, .3, 1) .08s backwards; animation-play-state: var(--marche); }
html.monte-entete .app-actions > * { animation: c-du-haut .4s cubic-bezier(.2, .7, .3, 1) .12s backwards; animation-play-state: var(--marche); }
html.monte-entete .app-actions > *:nth-child(2) { animation-delay: .17s; }
html.monte-entete .app-actions > *:nth-child(3) { animation-delay: .22s; }
html.monte-entete .app-actions > *:nth-child(n + 4) { animation-delay: .27s; }
html.monte-entete .app-contenu > * { animation: c-du-bas .5s cubic-bezier(.2, .7, .3, 1) .2s backwards; animation-play-state: var(--marche); }
html.monte-entete .app-contenu > *:nth-child(2) { animation-delay: .27s; }
html.monte-entete .app-contenu > *:nth-child(3) { animation-delay: .34s; }
html.monte-entete .app-contenu > *:nth-child(4) { animation-delay: .41s; }
html.monte-entete .app-contenu > *:nth-child(n + 5) { animation-delay: .48s; }
html.monte-entete .bienvenue > div > *, html.monte-entete .page-tete > div:first-child > * { animation: c-de-gauche .45s cubic-bezier(.2, .7, .3, 1) .34s backwards; animation-play-state: var(--marche); }
html.monte-entete .bienvenue > div > *:nth-child(2), html.monte-entete .page-tete > div:first-child > *:nth-child(2) { animation-delay: .41s; }
html.monte-entete .bienvenue > div > *:nth-child(3), html.monte-entete .page-tete > div:first-child > *:nth-child(3) { animation-delay: .48s; }
html.monte-entete .bienvenue > div > *:nth-child(n + 4), html.monte-entete .page-tete > div:first-child > *:nth-child(n + 4) { animation-delay: .55s; }
html.monte-entete .bienvenue > img { animation: c-photo .9s cubic-bezier(.2, .7, .3, 1) .25s backwards; animation-play-state: var(--marche); }
html.monte-entete .bienvenue .statut-carte { animation: c-du-bas .45s cubic-bezier(.2, .7, .3, 1) .6s backwards; animation-play-state: var(--marche); }

/* Journal de développement (administration) */
.dev-entree b { display: block; color: var(--encre); }
.dev-entree small { display: block; max-width: 620px; margin-top: 2px; color: var(--pale); font-size: 12.5px; }
.dev-actions { display: flex; gap: 6px; }
.dev-actions form { margin: 0; }
.dev-type > span { flex-direction: column; align-items: flex-start; gap: 8px; }
.dev-type .journal-type { display: inline-block; }

/* =================================================================================================
   ÉCRAN DE CHARGEMENT (première page ouverte dans l'onglet) et page de transition vers un autre site
   Le chargeur n'apparaît que si assets/js/chargeur.js a marqué la page (html.premiere-visite) ;
   sans JavaScript, il n'existe pas. Il disparaît seul au bout de 4 s quoi qu'il arrive.
   ================================================================================================= */
.chargeur {
    position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; align-content: center; gap: 22px;
    background: #fff; color: var(--encre); text-align: center; overflow: hidden;
}
html.premiere-visite .chargeur { display: grid; animation: chargeur-sortie .6s cubic-bezier(.7, 0, .2, 1) 4s forwards; }
.chargeur-fixe { display: grid; }
/* hachures rouges dans l'angle, comme les en-têtes de page */
.chargeur::before {
    content: ''; position: absolute; right: 0; bottom: 0; width: min(46vw, 520px); height: min(60vh, 520px); pointer-events: none;
    background: repeating-linear-gradient(-58deg, var(--rouge) 0 3px, transparent 3px 15px); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: .9;
}
.chargeur::after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 8px; background: var(--rouge); }
/* Emblème : le logo dans deux cadres à angles coupés qui tournent en sens inverse */
.chargeur-embleme { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.chargeur-embleme::before, .chargeur-embleme::after {
    content: ''; position: absolute; --e: 3px; --c: 22px; --k: 1.24px;
    clip-path: polygon(evenodd, 0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 0,
        var(--e) var(--e), var(--e) calc(100% - var(--c) - var(--k)), calc(var(--c) + var(--k)) calc(100% - var(--e)), calc(100% - var(--e)) calc(100% - var(--e)),
        calc(100% - var(--e)) calc(var(--c) + var(--k)), calc(100% - var(--c) - var(--k)) var(--e), var(--e) var(--e));
}
.chargeur-embleme::before { inset: 0; background: var(--rouge); animation: chargeur-tourne 2.4s cubic-bezier(.6, 0, .4, 1) infinite; }
.chargeur-embleme::after { inset: 18px; --e: 2px; --c: 14px; --k: .83px; background: var(--encre); animation: chargeur-tourne 2.4s cubic-bezier(.6, 0, .4, 1) infinite reverse; }
.chargeur-embleme img { position: relative; width: 74px; height: 74px; animation: chargeur-pouls 1.2s ease-in-out infinite; }
.chargeur-nom { margin: 0; font: 400 34px/.9 var(--titre); letter-spacing: .06em; text-transform: uppercase; }
.chargeur-nom b { font-weight: 400; color: var(--rouge); }
/* Barre de progression : avance pendant le chargement, se remplit à la fin (classe « fini ») */
.chargeur-barre { position: relative; width: min(260px, 70vw); height: 6px; background: var(--surface-3); overflow: hidden; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.chargeur-barre span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--rouge); animation: chargeur-progression 2.6s cubic-bezier(.2, .7, .3, 1) forwards; }
.chargeur-fixe .chargeur-barre span { animation: chargeur-va-et-vient 1.1s ease-in-out infinite; }
.chargeur.fini .chargeur-barre span { width: 100% !important; animation: none; transition: width .25s ease-out; }
.chargeur-texte { margin: 0; font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--rouge); }
.chargeur-texte::before { content: '//\00a0'; }
.chargeur-texte::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: chargeur-points 1.2s steps(4) infinite; }
/* Sortie : le panneau remonte en biais et découvre la page */
.chargeur.sortie, html.premiere-visite .chargeur.sortie { animation: chargeur-sortie .6s cubic-bezier(.7, 0, .2, 1) forwards; pointer-events: none; }
@keyframes chargeur-sortie {
    from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    to { clip-path: polygon(0 0, 100% 0, 100% 0, 0 -18%); visibility: hidden; }
}
@keyframes chargeur-tourne { to { rotate: 360deg; } }
@keyframes chargeur-pouls { 50% { scale: 1.07; } }
@keyframes chargeur-progression { 0% { width: 0; } 40% { width: 52%; } 100% { width: 88%; } }
@keyframes chargeur-va-et-vient { 0% { left: -40%; width: 40%; } 100% { left: 100%; width: 40%; } }
@keyframes chargeur-points { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@media (prefers-reduced-motion: reduce) {
    .chargeur-embleme::before, .chargeur-embleme::after, .chargeur-embleme img { animation: none !important; }
}

/* =================================================================================================
   ADAPTATION AUX ÉCRANS
   ================================================================================================= */
@media (max-width: 1180px) {
    .grille-principale, .grille-principale-l { grid-template-columns: minmax(0, 1fr); }
    .collant, .carte.collant { position: static; }
    .carte.collant { position: relative; top: auto; }
    .nav-pilule a { padding: 0 9px; }
    .metiers-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .une-panneau { width: 70%; padding-right: 150px; }
    .une-fiche { width: min(480px, 38%); grid-template-columns: minmax(0, 1fr); }
    .une-fiche > div:nth-child(even) { border-left: 0; }
    .une-fiche > div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--bord); }
    .une-fiche > div:last-child { border-bottom: 0; }
}
@media (max-width: 1024px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .app-barre { position: fixed; z-index: 90; left: 0; top: 0; bottom: 0; width: 290px; translate: -100% 0; transition: translate .25s cubic-bezier(.2, .7, .3, 1); box-shadow: var(--ombre-l); }
    .barre-ouverte .app-barre { translate: 0 0; }
    .app-voile { position: fixed; inset: 0; z-index: 80; background: rgba(14, 14, 16, .55); }
    .barre-ouverte .app-voile { display: block; }
    .app-burger, .app-fermer { display: grid; }
    .app-statut { display: none; }
    .grille-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pied-haut { grid-template-columns: 1fr 1fr; }
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-visuel { display: none; }
    .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 180px; }
    .systemes, .journal-accueil, .faq-grille, .journal-page, .bande-studio-grille { grid-template-columns: minmax(0, 1fr); }
    .systemes-intro, .journal-cote { position: static; }
    .etapes-liste { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Une : la photo en bandeau, le panneau rouge en dessous, la fiche à la suite */
    .une { flex-direction: column; min-height: 0; padding-top: 0; background: #fff; color: var(--encre); }
    .une-image { position: relative; inset: auto; z-index: 0; height: clamp(220px, 42vw, 380px); object-position: 60% 45%; }
    .une-panneau { width: 100%; margin-top: -34px; padding: 62px 20px 46px; clip-path: polygon(0 34px, 100% 0, 100% 100%, 0 100%); color: #fff; }
    .une-panneau::before { width: 160px; clip-path: none; }
    .une-contenu { max-width: none; }
    .une-fiche { position: static; width: auto; margin: 0 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--bord-2); border-top: 5px solid var(--encre); translate: 0 -22px; }
    .une-fiche > div:nth-child(even) { border-left: 1px solid var(--bord); }
    .une-fiche > div:nth-last-child(-n + 2) { border-bottom: 0; }
    .une-credit { top: 10px; right: 10px; }
}
/* Navigation repliée dans un menu (en dessous, les liens et les boutons ne tiennent plus sur une ligne) */
@media (max-width: 1100px) {
    .nav {
        position: fixed; inset: var(--entete) 0 auto 0; z-index: 49; display: none; flex-direction: column; align-items: stretch; gap: 8px; margin: 0;
        max-height: calc(100vh - var(--entete)); overflow-y: auto; padding: 8px 20px 22px; background: #fff; border-bottom: 4px solid var(--rouge); box-shadow: var(--ombre-l);
    }
    .nav.ouverte { display: flex; }
    .nav-pilule { flex-direction: column; height: auto; gap: 0; }
    .nav-pilule a { padding: 15px 0; font-size: 14px; border-bottom: 1px solid var(--bord); }
    .nav-pilule a::after { display: none; }
    .nav-pilule a[aria-current] { color: var(--rouge); box-shadow: inset 4px 0 0 var(--rouge); padding-left: 12px; }
    .nav-actions { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
    .nav-icone, .nav-lien { display: flex; justify-content: flex-start; gap: 10px; width: auto; height: auto; padding: 15px 0; font: 800 14px/1 var(--police); letter-spacing: .07em; text-transform: uppercase; border-bottom: 1px solid var(--bord); }
    .nav-icone:hover, .nav-lien:hover { background: none; }
    .nav-icone .compteur-pastille { position: static; }
    .nav-texte-mobile { display: inline; }
    .nav-actions .bouton { margin: 16px 0 0; }
    .menu-mobile { display: grid; }
}
@media (max-width: 860px) {
    .bienvenue { grid-template-columns: minmax(0, 1fr); }
    .bande-chiffres { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .systemes-liste { grid-template-columns: minmax(0, 1fr); }
    .page-simple-entete::before { width: 120px; opacity: .5; }
}
@media (max-width: 720px) {
    body { font-size: 14.5px; }
    .conteneur, .conteneur-etroit { width: min(100% - 32px, 1200px); }
    .grille-2, .grille-3, .grille-4, .champs, .champs-3 { grid-template-columns: minmax(0, 1fr); }
    .app-entete { padding: 0 16px; gap: 10px; }
    .app-contenu { padding: 22px 16px 48px; }
    .app-pied { padding: 16px; }
    .profil-nom, .profil .ico-fleche, .nav-texte-bureau { display: none; }
    .profil > summary { padding: 3px; }
    .fil { display: none; }
    .carte { padding: 18px; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { padding: 14px; }
    .stat-ico { width: 36px; height: 36px; }
    .stat-valeur { font-size: 32px; }
    .infos { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
    .infos dd { margin-bottom: 10px; }
    .pied-haut { grid-template-columns: minmax(0, 1fr); }
    .pied-bas { flex-direction: column; align-items: flex-start; }
    .barre-info-gauche { display: none; }
    .barre-info .conteneur { justify-content: center; }
    .barre-info-droite a { display: none; }
    .une-panneau { padding: 56px 16px 40px; }
    .une-titre { font-size: clamp(70px, 22vw, 116px); }
    .une-titre em { -webkit-text-stroke-width: 2px; }
    .une .boutons .bouton { flex: 1 1 100%; }
    .une-fiche { margin: 0 16px; grid-template-columns: minmax(0, 1fr); }
    .une-fiche > div:nth-child(even) { border-left: 0; }
    .une-fiche > div:nth-last-child(-n + 2) { border-bottom: 1px solid var(--bord); }
    .une-fiche > div:last-child { border-bottom: 0; }
    .defilant span { font-size: 24px; padding: 12px 0 10px; }
    .bande-studio { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); }
    .final { clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%); }
    .titre-ligne { margin-bottom: 28px; }
    .metiers-liste { grid-template-columns: minmax(0, 1fr); }
    .journal-entree { grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; }
    .journal-corps { grid-column: 1 / -1; }
    .etapes-liste { grid-template-columns: minmax(0, 1fr); }
    .appel { padding: 26px 22px; }
    .faq details > div { padding-right: 0; }
    .final .boutons .bouton { flex: 1 1 100%; }
    .boutique-garanties { grid-template-columns: minmax(0, 1fr); }
    .galerie { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 200px; }
    .galerie-tuile.grande, .galerie-tuile.large { grid-column: auto; grid-row: auto; }
    .panier-ligne { grid-template-columns: 1fr auto; }
    .ticket-ligne { grid-template-columns: auto minmax(0, 1fr); }
    .ticket-ligne .liste-fin { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
    .sanction-carte { grid-template-columns: auto minmax(0, 1fr); }
    .sanction-carte > :last-child { grid-column: 2; }
    .wl-etat { grid-template-columns: minmax(0, 1fr); }
    .bulle-pieces a { width: 96px; height: 70px; }
    .cni-cadre { zoom: .8; }
    .page-tete { align-items: flex-start; }
    .argent { grid-template-columns: minmax(0, 1fr); }
    .regle h2 { font-size: 34px; }
    .page-simple-entete::before { display: none; }
}
@media (max-width: 400px) {
    .cni-cadre { zoom: .72; }
    .stats { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .defilant-piste { animation: none; }
    .revele { opacity: 1; translate: none; }
}

/* Menu mobile : accroché sous l'en-tête, où que soit celui-ci (barres du haut encore visibles ou non).
   Avant, il était fixé à la hauteur de l'en-tête et le recouvrait tant que la page n'avait pas défilé. */
@media (max-width: 1100px) {
    .nav { position: absolute; inset: 100% 0 auto 0; max-height: calc(100vh - var(--entete) - 84px); }
}