/* Towa Play — feuille de style du site (ambiance « Console », clair et sombre).
   Repris de la maquette validée. Aucune ressource extérieure : polices hébergées sur le site. */

/* ============ Polices (licence OFL, voir /static/polices) ============ */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/polices/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/polices/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/polices/outfit-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/polices/outfit-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============ Couleurs et réglages ============ */
:root{--header-h:64px;--gutter:clamp(16px,4vw,40px);--maxw:1240px;--radius:20px;--radius-s:12px;
  --font:"Inter",system-ui,sans-serif;--brand-font:"Outfit","Inter",sans-serif;--jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans CJK JP","Noto Sans JP",sans-serif;
  --violet:#b06bff;--indigo:#6d7cff;--cyan:#33c8ff;--brand:linear-gradient(90deg,var(--violet),var(--indigo) 50%,var(--cyan));
  --brand-fonce:linear-gradient(90deg,#7a3fd1,#3d4fd6 50%,#0b6fa8)}
html[data-mode="dark"]{--bg:#060a18;--bg-2:#0b1226;--surface:rgba(255,255,255,.055);--surface-2:rgba(255,255,255,.1);--solid:#0e1530;
  --text:#eef2ff;--muted:#a5b0cf;--line:rgba(255,255,255,.12);--accent:#5b9bff;--on-accent:#04122e;--accent-2:#c09bff;
  --ok:#4ade9b;--warn:#ffb547;--danger:#ff6b81;--shadow:0 20px 50px rgba(0,0,0,.4);--bord-champ:#5d6785;color-scheme:dark}
html[data-mode="light"]{--bg:#eef2f9;--bg-2:#e3e9f4;--surface:rgba(255,255,255,.78);--surface-2:rgba(255,255,255,.95);--solid:#fff;
  --text:#101828;--muted:#4f5b73;--line:rgba(16,24,40,.11);--accent:#1a4fb5;--on-accent:#fff;--accent-2:#7a3fd1;
  --ok:#0b7343;--warn:#8f4f00;--danger:#c4203a;--shadow:0 20px 50px rgba(10,20,50,.12);--bord-champ:#7b8599;color-scheme:light}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--font),var(--jp);overflow-x:hidden;transition:background-color .35s,color .35s}
body:lang(ja){line-height:1.75}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font),var(--jp);line-height:1.15;margin:0;letter-spacing:-.025em;font-weight:700}
p{margin:0}
:focus-visible{outline:3px solid var(--accent-2);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:var(--accent);color:var(--on-accent);padding:10px 16px;border-radius:8px}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muted{color:var(--muted)}
.hl{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Aurores en arrière-plan */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(35% 35% at 20% 20%,color-mix(in srgb,var(--violet) 30%,transparent),transparent 70%),
    radial-gradient(30% 30% at 85% 30%,color-mix(in srgb,var(--cyan) 22%,transparent),transparent 70%),
    radial-gradient(40% 40% at 60% 90%,color-mix(in srgb,var(--indigo) 22%,transparent),transparent 70%);
  animation:aurora 24s ease-in-out infinite alternate}
html[data-mode="light"] body::before{opacity:.6}
@keyframes aurora{to{transform:translate(4%,-3%) rotate(8deg) scale(1.08)}}

/* ============ Éléments communs ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:var(--radius-s);border:1px solid transparent;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .2s,background-color .2s,color .2s;white-space:nowrap;min-height:44px;background:none}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn-brand{background:var(--brand-fonce);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.btn-brand:hover{transform:translateY(-2px)}
.btn-ghost{color:var(--text);border-color:var(--line);background:var(--surface)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-sm{padding:7px 12px;min-height:36px;font-size:14px}
.btn-block{width:100%}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface);cursor:pointer;color:var(--text)}
.icon-btn:hover{background:var(--surface-2)}
.kicker{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.kicker::before{content:"";width:22px;height:2px;background:currentColor}
.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);white-space:nowrap}
.tag-type{background:var(--accent);color:var(--on-accent)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.avatar{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;background:hsl(var(--h) 55% 36%);color:#fff;font:700 13px/1 var(--font)}
.ph-tag{position:absolute;right:10px;bottom:10px;z-index:2;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font:600 11px/1.3 var(--font)}
.chip{border:1px solid var(--line);background:var(--surface);padding:6px 13px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:500;min-height:36px;transition:background-color .2s,color .2s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.tabs{display:inline-flex;gap:4px;padding:4px;background:var(--bg-2);border-radius:calc(var(--radius-s) + 4px);border:1px solid var(--line)}
.tabs button,.tabs a{border:0;background:transparent;padding:8px 16px;border-radius:var(--radius-s);cursor:pointer;font-weight:600;color:var(--muted);min-height:38px;display:inline-flex;align-items:center}
.tabs [aria-pressed="true"],.tabs [aria-selected="true"],.tabs [aria-current="page"]{background:var(--solid);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.6rem,3vw,2.3rem);margin-top:10px}
.more{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent)}
.more::after{content:"→";transition:transform .2s}
.more:hover::after{transform:translateX(4px)}
.section{padding:clamp(40px,6vw,72px) 0}
.box{padding:18px}
.box h3{font-size:1.05rem;margin-bottom:14px}

/* Formulaires */
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:600}
.field .hint{font-size:13px;color:var(--muted)}
.input{width:100%;min-height:46px;padding:11px 14px;border:1px solid var(--bord-champ);border-radius:var(--radius-s);background:var(--bg);transition:border-color .2s,box-shadow .2s}
.input:focus{outline:2px solid transparent;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex:none}
.msg{font-size:13px;display:flex;gap:6px;align-items:center}
/* Un élément marqué « hidden » reste caché, même si sa classe lui donne un affichage (messages vides, etc.) */
[hidden]{display:none !important}
.msg.ok{color:var(--ok)}.msg.ko{color:var(--danger)}

/* ============ Bandeau d'actus défilant ============ */
.ticker{display:flex;align-items:center;height:38px;background:var(--bg-2);border-bottom:1px solid var(--line);font-size:14px;overflow:hidden}
.ticker-label{flex:none;display:flex;align-items:center;gap:8px;height:100%;padding:0 14px;background:var(--accent);color:var(--on-accent);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:12px}
.ticker-label::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.4s infinite}
.ticker-viewport{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:flex;gap:40px;width:max-content;padding-left:20px;animation:ticker 60s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track a{white-space:nowrap}
.ticker-track a:hover{color:var(--accent)}
.ticker-track a b{color:var(--accent);font-weight:600;margin-right:6px}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes pulse{50%{opacity:.25}}

/* ============ En-tête ============ */
.header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:20px;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand-logo{width:46px;height:auto}
.brand-name{font:300 22px/1 var(--brand-font);letter-spacing:-.01em;white-space:nowrap}
.brand-name b{font-weight:640}
.nav{display:flex;gap:4px;margin-left:8px}
.nav a{padding:8px 12px;border-radius:var(--radius-s);color:var(--muted);font-weight:500;position:relative;white-space:nowrap}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:3px;background:var(--brand)}
.header-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--surface)}
.lang a{display:grid;place-items:center;padding:0 10px;height:40px;font-size:13px;font-weight:600;color:var(--muted)}
.lang a:hover{color:var(--text)}
.lang a[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
.mode-btn .sun{display:none}
html[data-mode="dark"] .mode-btn .sun{display:block}
html[data-mode="dark"] .mode-btn .moon{display:none}

/* ============ Images d'exemple (dégradés) ============ */
.cover{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h) 78% 52%),hsl(calc(var(--h) + 55) 72% 26%))}
.cover::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 80% 10%,rgba(255,255,255,.35),transparent 60%);transition:transform .6s}
.cover-title{position:absolute;left:16px;bottom:14px;right:110px;z-index:1;color:#fff;font:700 1.35rem/1.05 var(--font),var(--jp);letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.cover .dur{position:absolute;right:10px;top:10px;z-index:2;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.65);color:#fff;font:600 12px/1.3 var(--font)}
.cover .play-badge{position:absolute;inset:0;margin:auto;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.18);border:2px solid rgba(255,255,255,.8);display:grid;place-items:center;z-index:2;backdrop-filter:blur(6px);transition:transform .25s}
.cover .play-badge .ico{fill:#fff;stroke:none;width:22px;height:22px;margin-left:3px}

/* ============ Cartes d'articles ============ */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:20px}
.post{display:flex;flex-direction:column;overflow:hidden;transition:transform .25s,box-shadow .25s}
.post:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 30px 60px rgba(10,20,60,.25)}
.post:hover .cover::before{transform:scale(1.15) translate(-4%,4%)}
.post:hover .play-badge{transform:scale(1.1)}
.post-body{display:flex;flex-direction:column;gap:10px;padding:16px 16px 14px;flex:1}
.post-title{font-size:1.12rem;line-height:1.25}
.post-title a:hover{color:var(--accent)}
.excerpt{font-size:14.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.who b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stats{display:flex;gap:10px;margin-left:auto;font-size:13px;color:var(--muted)}
.stats span{display:inline-flex;align-items:center;gap:4px}
.stats .ico{width:15px;height:15px}
.post-sub{font-size:12.5px;color:var(--muted)}
.post-sub .auto{color:var(--accent-2);font-weight:600;white-space:nowrap}
.post--big .cover{aspect-ratio:16/8}
.post--big .cover-title{font-size:2rem}
.post--big .post-title{font-size:clamp(1.3rem,2.4vw,1.75rem)}
.post--big .excerpt{-webkit-line-clamp:3;font-size:15.5px}
.post--row{flex-direction:row}
.post--row .cover{aspect-ratio:auto;width:42%;flex:none}
.post--row .cover-title{right:12px;font-size:1rem}
.post--row .excerpt{display:none}
.featured{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
.featured-side{display:grid;gap:20px}
.empty{padding:40px;text-align:center;color:var(--muted)}

/* Défilement horizontal (vidéos) */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin}
.rail > *{scroll-snap-align:start}

/* ============ Mise en page avec colonne ============ */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.aside{display:grid;gap:20px;position:sticky;top:calc(var(--header-h) + 16px)}
.blogger{display:flex;align-items:center;gap:10px;padding:8px 0}
.blogger + .blogger{border-top:1px solid var(--line)}
.blogger .who{flex:1}
.follow[aria-pressed="true"]{background:var(--surface-2);color:var(--text);border-color:var(--line)}
.release{display:flex;align-items:center;gap:12px;padding:8px 0}
.release + .release{border-top:1px solid var(--line)}
.date-chip{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line);line-height:1.05;text-align:center}
.date-chip b{font:700 17px/1 var(--font)}
.date-chip small{font-size:10.5px;text-transform:uppercase;color:var(--muted)}
.release span{font-size:14px;font-weight:600;line-height:1.3}
.release small.p{display:block;font-weight:400;color:var(--muted);font-size:12.5px}

/* ============ Contenu d'article ============ */
.prose{display:grid;gap:18px;font-size:17px;max-width:68ch}
.prose h2{font-size:1.5rem;margin-top:12px}
.prose h4{font-size:1.3rem;margin-top:10px}
.prose blockquote{margin:0;padding:6px 0 6px 20px;border-left:4px solid;border-image:var(--brand) 1;font-size:1.2rem;font-weight:500;font-style:italic}
.prose figure{margin:0}
.prose figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
.prose .cover{border-radius:var(--radius-s)}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.video{position:relative;aspect-ratio:16/9;border-radius:var(--radius-s);overflow:hidden;background:linear-gradient(135deg,#1b1b2e,#2a1240);display:grid;place-items:center;color:#fff}
.video::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px)}
.play{position:relative;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.7);display:grid;place-items:center;cursor:pointer;transition:transform .2s;color:#fff}
.play:hover{transform:scale(1.08)}
.play .ico{width:28px;height:28px;fill:#fff;stroke:none;margin-left:4px}
.video-cap{position:absolute;left:14px;bottom:12px;right:14px;display:flex;justify-content:space-between;gap:10px;font-size:13px;z-index:1}
.video-cap span:last-child{opacity:.75}
.reactions{display:flex;flex-wrap:wrap;gap:8px;padding-top:20px;margin-top:6px;border-top:1px solid var(--line)}
.react{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-weight:600;font-size:14px;min-height:40px;transition:transform .15s}
.react:active{transform:scale(.92)}
.react[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 16%,var(--surface));border-color:var(--accent)}
.react .e{font-size:17px;line-height:1}

/* Commentaires */
.comments{margin-top:28px}
.comments h3,.comments .titre-commentaires{font-size:1.3rem;margin-bottom:16px}
.compose{display:flex;gap:10px;margin-bottom:20px}
.compose textarea{flex:1;min-height:46px;resize:vertical;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.comment{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.comment .body{flex:1;min-width:0}
.comment .head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
.comment .head small{color:var(--muted)}
.comment p{margin-top:4px;font-size:15px}
.comment .acts{display:flex;gap:14px;margin-top:6px}
.comment .acts button{border:0;background:none;padding:4px 0;cursor:pointer;font-size:13px;color:var(--muted);font-weight:600}
.comment .acts button:hover{color:var(--accent)}
.comment.reply{margin-left:48px}
.comment.hidden-mod p{font-style:italic;color:var(--muted)}
.badge-author{font-size:11px;font-weight:700;padding:1px 7px;border-radius:999px;background:var(--accent);color:var(--on-accent)}

/* ============ Pied de page ============ */
.footer{border-top:1px solid var(--line);background:var(--bg-2);padding:40px 0 48px;font-size:14px;color:var(--muted);margin-top:40px}
.footer-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.footer a:hover{color:var(--text)}
.footer .brand-logo{width:38px}
.footer .brand-name{font-size:19px;color:var(--text)}

/* ============ Bulle d'information et apparitions ============ */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:210;background:var(--text);color:var(--bg);padding:12px 18px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}

/* ============ Adaptation mobile ============ */
@media (max-width:1020px){
  .layout{grid-template-columns:1fr}
  .aside{position:static;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .featured{grid-template-columns:1fr}
}
@media (max-width:820px){
  .header-in{flex-wrap:wrap;height:auto;padding-block:10px;gap:10px}
  .nav{order:3;width:100%;margin:0;overflow-x:auto;scrollbar-width:none}
  .header-tools .btn-login{display:none}
}
@media (max-width:640px){
  .post--row{flex-direction:column}
  .post--row .cover{width:100%;aspect-ratio:16/9}
  .comment.reply{margin-left:24px}
  .header-tools .btn-write span{display:none}
  .brand-name{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .ticker-viewport{overflow-x:auto}
}
/* Bouton « Animations » du site (classe posée par mode.js) : même effet que le réglage du système.
   Le bandeau ne défile plus (il se fait glisser à la main), « À la une » ne change plus tout seul. */
html.sans-anim *,html.sans-anim *::before,html.sans-anim *::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
html.sans-anim .ticker-viewport{overflow-x:auto}
html.sans-anim::view-transition-old(*),html.sans-anim::view-transition-new(*),html.sans-anim::view-transition-group(*){animation:none!important}
/* Bandeau « En direct » : en pause quand un de ses liens est sélectionné au clavier */
.ticker:focus-within .ticker-track{animation-play-state:paused}

/* ============ Ajouts du site (remplacent les styles écrits dans les pages de la maquette) ============ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ph-top{top:12px;bottom:auto}
.tag-note{background:var(--brand);color:#fff}
.team-logo{width:28px;height:28px}
.section-suite{padding-top:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.post[hidden]{display:none}
.d1{--d:.08s}.d2{--d:.16s}.d3{--d:.24s}
/* Teintes des images d'exemple, par paliers de 10° */
.h-0{--h:0}.h-10{--h:10}.h-20{--h:20}.h-30{--h:30}.h-40{--h:40}.h-50{--h:50}.h-60{--h:60}.h-70{--h:70}.h-80{--h:80}.h-90{--h:90}.h-100{--h:100}.h-110{--h:110}.h-120{--h:120}.h-130{--h:130}.h-140{--h:140}.h-150{--h:150}.h-160{--h:160}.h-170{--h:170}.h-180{--h:180}.h-190{--h:190}.h-200{--h:200}.h-210{--h:210}.h-220{--h:220}.h-230{--h:230}.h-240{--h:240}.h-250{--h:250}.h-260{--h:260}.h-270{--h:270}.h-280{--h:280}.h-290{--h:290}.h-300{--h:300}.h-310{--h:310}.h-320{--h:320}.h-330{--h:330}.h-340{--h:340}.h-350{--h:350}

/* ============ Accueil ============ */
.hero-home{padding:clamp(28px,4vw,48px) 0 8px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px}
.hero-main{position:relative;overflow:hidden;min-height:440px;display:flex;align-items:flex-end}
.hero-main .cover{position:absolute;inset:0;aspect-ratio:auto}
.hero-main .cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,8,20,.88))}
.hero-main .inner{position:relative;z-index:2;padding:clamp(20px,3vw,36px);color:#fff;display:grid;gap:12px;max-width:720px}
.hero-main h1{font-size:clamp(1.7rem,3.6vw,2.7rem)}
.hero-main p{color:rgba(255,255,255,.85);font-size:1.05rem}
.hero-main .meta{font-size:14px;color:rgba(255,255,255,.75)}
.hero-main .tag:not(.tag-type){background:rgba(255,255,255,.18);color:#fff}
.hero-side{display:grid;gap:20px}
.week{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.game{overflow:hidden;display:flex;flex-direction:column}
.game .cover{aspect-ratio:3/4}
.game .cover-title{right:12px;font-size:1.15rem}
.game-body{padding:12px 14px;display:grid;gap:4px}
.game-body b{font-size:15px}
.game-body small{color:var(--muted);font-size:13px}
.game .when{position:absolute;left:10px;top:10px;z-index:2;padding:4px 9px;border-radius:8px;background:rgba(0,0,0,.6);color:#fff;font:700 12px/1.2 var(--font)}
.join{position:relative;overflow:hidden;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px;align-items:center;isolation:isolate}
.join::before{content:"";position:absolute;inset:0;background:url(/static/img/banniere-site-1920x600.png) center/cover;opacity:.22;z-index:-1}
.join h2{font-size:clamp(1.6rem,3vw,2.4rem);margin:10px 0}
.join p{color:var(--muted);max-width:56ch}
.join ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px;font-size:15px}
.join li{display:flex;gap:10px;align-items:center}
.join li .ico{color:var(--accent)}
.join .actions{display:grid;gap:10px;min-width:220px}
@media (max-width:1020px){.hero-grid{grid-template-columns:1fr}.hero-side{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.hero-side{grid-template-columns:1fr}.join{grid-template-columns:1fr}.hero-main{min-height:380px}}

/* ============ Page introuvable / bientôt ============ */
.vide{padding:clamp(48px,10vw,120px) var(--gutter)}
.vide-boite{max-width:560px;margin:0 auto;padding:clamp(28px,5vw,48px);text-align:center;display:grid;gap:16px;justify-items:center}
.vide-boite img{width:140px;height:auto}
.vide-boite h1{font-size:clamp(1.6rem,3.4vw,2.2rem)}
.vide-boite p{color:var(--muted)}

/* ================================================================
   Pages de contenu (étape 1), reprises de la maquette
   ================================================================ */

/* ============ Article ============ */
.progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--brand);z-index:150}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--muted);padding-top:28px}
.crumbs a:hover{color:var(--accent)}
.crumbs span[aria-hidden]{opacity:.5}
.art-head{padding:18px 0 26px;max-width:860px}
.art-head h1{font-size:clamp(2rem,4.6vw,3.4rem);margin:14px 0 16px}
.chapo{font-size:clamp(1.08rem,1.7vw,1.25rem);color:var(--muted);max-width:62ch}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px;font-size:14px;color:var(--muted)}
.byline .who{flex-direction:row;align-items:center;gap:10px}
.byline img{width:36px;height:36px}
.share{display:flex;gap:8px;margin-left:auto}
.hero-cover{border-radius:var(--radius);aspect-ratio:21/9;margin-bottom:32px}
.hero-cover .cover-title{font-size:clamp(1.6rem,4vw,3rem);right:120px}
.article{padding:clamp(18px,3vw,36px)}
.toc{padding:16px 18px}
.toc ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14.5px}
.toc a:hover{color:var(--accent)}
.toc a.on{color:var(--accent);font-weight:600}
.gamecard .cover{border-radius:var(--radius-s);aspect-ratio:16/9;margin-bottom:14px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0 0 14px}
.facts dt{color:var(--muted)}
.facts dd{margin:0;font-weight:600}
.facts .plats{display:flex;flex-wrap:wrap;gap:4px}
.gamecard .btns{display:grid;gap:8px}
.related .post--row .cover{width:38%}
.keypoints{padding:18px 20px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line)}
.keypoints h2{font-size:1.05rem;margin:0 0 10px}
.keypoints ul{margin:0;padding-left:18px;display:grid;gap:6px}
@media (max-width:700px){.share{margin-left:0}.hero-cover{aspect-ratio:16/9}.hero-cover .cover-title{right:16px}}

/* ============ Calendrier des sorties ============ */
.page-head{padding:clamp(36px,6vw,64px) 0 24px}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:14px 0 10px}
.page-head p{color:var(--muted);max-width:60ch}
/* Les plus attendus : petites cartes horizontales */
.hot{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:32px}
.attendu{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px}
/* Vignette d'exemple (en attendant les vraies jaquettes) */
.vignette{position:relative;overflow:hidden;width:60px;height:60px;flex:none;border-radius:12px;background:linear-gradient(135deg,hsl(var(--h) 78% 52%),hsl(calc(var(--h) + 55) 72% 26%))}
.vignette::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 80% 10%,rgba(255,255,255,.35),transparent 60%)}
.vignette-large{width:72px;height:45px;border-radius:8px}
.attendu .txt{display:grid;gap:2px;min-width:0;line-height:1.3}
.attendu b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attendu small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.count-down{font-weight:700;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;margin-bottom:16px}
.month{display:flex;align-items:center;gap:6px}
.month h2{font-size:1.3rem;min-width:9ch;text-align:center;text-transform:capitalize}
.bar .chips{display:flex;flex-wrap:wrap;gap:6px}
.bar .right{margin-left:auto;display:flex;gap:8px;align-items:center}
/* Vue liste : une ligne fine par jeu, regroupée par jour */
.jours{padding:4px 18px}
.day{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.day:first-child{border-top:0}
.day-date{text-align:center;padding-top:6px}
.day-date b{display:block;font:700 1.8rem/1 var(--font)}
.day-date span{display:block;font-size:12px;color:var(--muted);text-transform:capitalize;margin-top:2px}
.day.today .day-date b{color:var(--accent)}
.games{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.jeu-ligne{display:grid;grid-template-columns:72px minmax(0,1.3fr) minmax(0,1.5fr) auto;grid-template-areas:"p n d a";gap:14px;align-items:center;padding:8px 10px;border-radius:var(--radius-s);transition:background-color .2s}
.jeu-ligne:hover{background:var(--surface-2)}
.jeu-ligne .vignette{grid-area:p}
.jeu-ligne .nom{grid-area:n;font-weight:600;font-size:15.5px;min-width:0}
.jeu-ligne .details{grid-area:d;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;color:var(--muted)}
.jeu-ligne .genre{color:var(--accent)}
.jeu-ligne .alerte{grid-area:a;width:36px;height:36px}
.badge-hot{color:var(--accent-2);font-size:13px;margin-left:4px}
/* Vue mois */
.cal{display:grid;gap:6px}
.cal-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal .dow{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:4px 6px}
.cell{min-height:118px;padding:8px;border-radius:var(--radius-s);background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;font-size:13px}
.cell.out{opacity:.35}
.cell.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cell .n{font-weight:700;font-size:14px}
.pill{display:block;padding:3px 7px;border-radius:7px;background:hsl(var(--h) 70% 45% / .22);border-left:3px solid hsl(var(--h) 75% 55%);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;text-align:left;border-top:0;border-right:0;border-bottom:0;font-size:12.5px;color:var(--text)}
.empty-month{padding:48px;text-align:center;color:var(--muted)}
@media (max-width:760px){
  .bar .right{margin-left:0}
  .day{grid-template-columns:1fr;gap:6px}
  .day-date{text-align:left;display:flex;gap:10px;align-items:baseline;padding-top:0}
  .day-date b{font-size:1.5rem}
  .jeu-ligne{grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"p n a" "p d a";gap:2px 12px}
  .vignette-large{width:64px;height:40px}
  .cal,.cal-row{gap:3px}.cell{min-height:70px;padding:4px}.pill{font-size:0;padding:0;height:6px;border-left:0;background:hsl(var(--h) 75% 55%)}
  .cal .dow{font-size:10px;padding:2px}
}

/* ============ Vidéos ============ */
.watch{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;padding:clamp(24px,4vw,40px) 0 8px;align-items:start}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000}
.player .cover{position:absolute;inset:0;aspect-ratio:auto}
.player .cover-title{font-size:clamp(1.6rem,4vw,3rem);right:24px}
.consent{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:20px;background:rgba(4,8,20,.55);backdrop-filter:blur(3px)}
.consent-box{max-width:440px;text-align:center;color:#fff;display:grid;gap:12px;justify-items:center}
.consent-box p{font-size:14px;color:rgba(255,255,255,.85)}
.consent-box .big{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;transition:transform .2s;color:#fff}
.consent-box .big:hover{transform:scale(1.07)}
.consent-box .big .ico{width:32px;height:32px;fill:#fff;stroke:none;margin-left:4px}
.consent-box label{font-size:13px;color:rgba(255,255,255,.8);display:flex;gap:8px;align-items:center}
.playing{position:absolute;inset:auto 0 0 0;z-index:3;padding:14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#fff;display:grid;gap:8px}
.playing .track{height:4px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden}
.playing .track i{display:block;height:100%;width:0;background:var(--brand);animation:play 20s linear forwards}
@keyframes play{to{width:100%}}
.watch-info{padding:18px 4px}
.watch-info h1{font-size:clamp(1.4rem,2.8vw,2rem);margin:10px 0 8px}
.watch-info .meta{color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.watch-info .meta .acts{margin-left:auto;display:flex;gap:8px}
.upnext{padding:16px;display:grid;gap:12px}
.upnext h2{font-size:1.05rem}
.mini{display:grid;grid-template-columns:130px 1fr;gap:12px;align-items:center;border-radius:var(--radius-s);padding:4px;transition:background-color .2s}
.mini:hover{background:var(--surface-2)}
.mini .cover{aspect-ratio:16/9;border-radius:10px}
.mini .cover .cover-title,.mini .cover .ph-tag{display:none}
.mini b{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mini small{color:var(--muted);font-size:12.5px}
.mini .dur{font-size:11px}
.shows{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.show{overflow:hidden;display:grid}
.show .cover{aspect-ratio:21/9}
.show-body{padding:16px;display:grid;gap:8px}
.show-body h3{font-size:1.15rem}
.show-body p{color:var(--muted);font-size:14.5px}
.show-body .row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
@media (max-width:1020px){.watch{grid-template-columns:1fr}}
@media (max-width:600px){.watch-info .meta .acts{margin-left:0}}

/* ============ À propos ============ */
.about-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(40px,7vw,88px) 0 clamp(24px,4vw,48px)}
.about-hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);margin:14px 0 18px}
.about-hero p{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:56ch}
.symbol{position:relative;display:grid;place-items:center;padding:clamp(20px,4vw,40px)}
.symbol img{width:100%;max-width:440px;filter:drop-shadow(0 20px 60px color-mix(in srgb,var(--indigo) 45%,transparent));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px)}}
.meaning{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mcard{padding:24px;display:grid;gap:10px;align-content:start}
.mcard .big{font:700 2.6rem/1 var(--font),var(--jp);background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.mcard h3{font-size:1.15rem}
.mcard p{color:var(--muted);font-size:15px}
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.value{padding:24px;display:grid;gap:10px}
.value .ico{width:28px;height:28px;color:var(--accent)}
.value h3{font-size:1.1rem}
.value p{color:var(--muted);font-size:15px}
.timeline{position:relative;display:grid;gap:22px;padding-left:30px;max-width:760px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:2px;background:var(--brand)}
.step{position:relative}
.step::before{content:"";position:absolute;left:-29px;top:6px;width:15px;height:15px;border-radius:50%;background:var(--bg);border:3px solid var(--indigo)}
.step.future::before{border-style:dashed;border-color:var(--muted)}
.step b{display:block;color:var(--accent);font-size:14px;letter-spacing:.04em}
.step h3{font-size:1.1rem;margin:2px 0 4px}
.step p{color:var(--muted);font-size:15px}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.member{padding:24px;text-align:center;display:grid;gap:8px;justify-items:center}
.member .avatar{width:84px;height:84px;font-size:26px}
.member small{color:var(--muted)}
.member.open{border-style:dashed}
.member.open .avatar{background:var(--surface-2);color:var(--muted)}
.ph{background:color-mix(in srgb,var(--warn) 25%,transparent);color:inherit;padding:0 4px;border-radius:4px}
.cta{padding:clamp(24px,4vw,44px);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cta h2{font-size:clamp(1.4rem,2.6vw,2rem)}
.cta p{color:var(--muted);margin-top:6px}
@media (max-width:900px){.about-hero{grid-template-columns:1fr}.symbol{order:-1}.symbol img{max-width:300px}.meaning{grid-template-columns:1fr}}

/* ============ Contact ============ */
.page-head{padding:clamp(36px,6vw,64px) 0 28px;max-width:720px}
.page-head h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:14px 0 10px}
.page-head p{color:var(--muted)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start;padding-bottom:40px}
.cform{padding:clamp(20px,3.5vw,36px);display:grid;gap:18px}
.cform[hidden]{display:none}
.motifs{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.motif{position:relative}
.motif input{position:absolute;opacity:0;inset:0;cursor:pointer;margin:0}
.motif > span{display:flex;align-items:center;gap:8px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);font-size:14.5px;font-weight:600;min-height:48px;transition:border-color .2s,background-color .2s}
.motif > span .ico{color:var(--accent)}
.motif input:checked + span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg))}
.motif input:focus-visible + span{outline:3px solid var(--accent-2);outline-offset:2px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
textarea.input{min-height:160px;resize:vertical}
.counter{font-size:12.5px;color:var(--muted);text-align:right}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.extra{padding:14px 16px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line);font-size:14px;color:var(--muted)}
.extra[hidden]{display:none}
.fine{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.fine .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
.fine a{color:var(--accent)}
.done{padding:clamp(28px,4vw,48px);text-align:center;display:grid;gap:12px;justify-items:center}
.done[hidden]{display:none}
.big-ico{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff}
.big-ico .ico{width:32px;height:32px}
.side{display:grid;gap:20px}
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:first-of-type{border-top:0}
.faq summary{cursor:pointer;font-weight:600;padding:10px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.2rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);font-size:14.5px;padding:0 0 12px}
.faq a{color:var(--accent)}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a,.socials span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:14px;font-weight:600}
.socials a:hover,.socials span:hover{border-color:var(--accent)}
.ph{background:color-mix(in srgb,var(--warn) 25%,transparent);padding:0 4px;border-radius:4px}
@media (max-width:1020px){.contact{grid-template-columns:1fr}}
@media (max-width:600px){.two{grid-template-columns:1fr}}

/* ============ Informations légales ============ */
.page-head{padding:clamp(36px,6vw,64px) 0 24px;max-width:760px}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:14px 0 10px}
.page-head p{color:var(--muted)}
.warn{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;margin-bottom:28px;border-color:color-mix(in srgb,var(--warn) 50%,var(--line));font-size:14.5px}
.warn .ico{color:var(--warn);width:22px;height:22px;margin-top:1px}
.legal{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start;padding-bottom:40px}
.toc-legal{position:sticky;top:calc(var(--header-h) + 16px);padding:16px;display:grid;gap:4px}
.toc-legal a{padding:9px 12px;border-radius:var(--radius-s);font-weight:600;color:var(--muted);display:flex;gap:10px;align-items:center}
.toc-legal a:hover{color:var(--text);background:var(--surface-2)}
.toc-legal a.on{color:var(--text);background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent)}
.toc-legal small{display:block;padding:10px 12px 0;color:var(--muted);font-size:12.5px}
.doc{display:grid;gap:28px}
.part{padding:clamp(20px,3.5vw,40px);scroll-margin-top:calc(var(--header-h) + 16px)}
.part > h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:6px}
.part > .upd{color:var(--muted);font-size:13.5px;margin-bottom:22px}
.part h3{font-size:1.15rem;margin:26px 0 8px}
.part p,.part li{color:var(--text);font-size:15.5px;line-height:1.7}
.part p + p{margin-top:10px}
.part ul{padding-left:20px;margin:8px 0;display:grid;gap:4px}
.part a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ph{background:color-mix(in srgb,var(--warn) 25%,transparent);padding:0 4px;border-radius:4px;font-weight:600}
dl.id{display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:8px 18px;margin:8px 0;font-size:15px}
dl.id dt{color:var(--muted)}
dl.id dd{margin:0}
.tbl{overflow-x:auto;margin:10px 0}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rules{counter-reset:r;list-style:none;padding:0!important;display:grid;gap:12px!important}
.rules li{counter-increment:r;display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.rules li::before{content:counter(r);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font-weight:700;font-size:15px}
.rules b{display:block}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.steps div{padding:12px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line);font-size:14px}
.steps b{display:block;font-size:14.5px;margin-bottom:4px}
@media (max-width:900px){.legal{grid-template-columns:1fr}.toc-legal{position:static;grid-template-columns:repeat(3,1fr)}.toc-legal small{display:none}.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.toc-legal{grid-template-columns:1fr}dl.id{grid-template-columns:1fr;gap:2px}dl.id dd{margin-bottom:8px}}

/* ============ Ajouts du site pour ces pages ============ */
a.chip{display:inline-flex;align-items:center}
.chip[aria-current="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.desactive{opacity:.35;pointer-events:none}
.section-bas{padding-bottom:clamp(40px,6vw,72px)}
.sous-titre{font-size:1.25rem;margin-bottom:14px}
.non-traduit{margin-top:12px;font-size:14px;color:var(--warn);font-weight:600}
.mention-ia{margin:22px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;font-style:italic;color:var(--muted)}
.byline-who b{color:var(--text)}
.toc h3{font-size:1rem;margin-bottom:10px}
.related h3{font-size:1.05rem;margin:4px 0 12px}
.related-list{display:grid;gap:14px}
.jours{padding:8px 20px}
.upnext-list{display:grid;gap:8px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.par-mail{font-size:14px;margin-top:14px;color:var(--muted)}
.par-mail a{color:var(--accent)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}


/* ============ Comptes (connexion, inscription, mot de passe) ============ */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(24px,5vw,64px);align-items:center;padding:clamp(32px,6vw,72px) 0}
.pitch{position:relative;border-radius:var(--radius);overflow:hidden;min-height:540px;padding:clamp(24px,4vw,48px);display:flex;flex-direction:column;justify-content:flex-end;gap:18px;color:#fff;background:#060a18 url(/static/img/banniere-site-1920x600.png) 30% center/cover}
.pitch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,24,.1),rgba(6,10,24,.85))}
.pitch > *{position:relative;z-index:1}
.pitch .logo{width:min(280px,70%);margin-bottom:auto}
.pitch h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.pitch ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;color:rgba(255,255,255,.88)}
.pitch li{display:flex;gap:10px;align-items:center}
.pitch li .ico{color:#8fd8ff}
.panel-auth{padding:clamp(20px,3.5vw,36px)}
.panel-auth .tabs{width:100%;margin-bottom:24px}
.panel-auth .tabs button{flex:1;justify-content:center}
.form{display:grid;gap:16px}
.form[hidden],.step[hidden]{display:none}
.form h2{font-size:1.5rem}
.form .sub{color:var(--muted);font-size:15px;margin-top:-6px}
.pw{position:relative}
.pw .input{padding-right:52px}
.pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:40px;border:0;background:none;cursor:pointer;color:var(--muted);display:grid;place-items:center;border-radius:8px}
.pw button:hover{color:var(--text)}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px}
.row-between a{color:var(--accent);font-weight:600}
.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:2px}
.meter i{height:5px;border-radius:3px;background:var(--surface-2);transition:background-color .3s}
.meter[data-s="1"] i:nth-child(-n+1){background:var(--danger)}
.meter[data-s="2"] i:nth-child(-n+2){background:var(--warn)}
.meter[data-s="3"] i:nth-child(-n+3){background:var(--accent)}
.meter[data-s="4"] i{background:var(--ok)}
.rules{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px;font-size:13px;color:var(--muted)}
.rules li::before{content:"○ ";}
.rules li.ok{color:var(--ok)}
.rules li.ok::before{content:"✓ "}
.fine{font-size:12.5px;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.fine .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
.fine a{color:var(--accent)}
.code{display:flex;gap:8px;justify-content:center}
.code input{width:clamp(40px,11vw,52px);height:60px;text-align:center;font:700 1.6rem/1 var(--font);border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.code input:focus{outline:2px solid transparent;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.big-ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;margin:0 auto 4px}
.big-ico .ico{width:30px;height:30px}
.center{text-align:center}
.link-btn{border:0;background:none;color:var(--accent);font-weight:600;cursor:pointer;padding:6px}
.link-btn:disabled{color:var(--muted);cursor:default}
@media (max-width:900px){.auth{grid-template-columns:1fr}.pitch{min-height:300px}}
.onglets-auth{width:100%;margin-bottom:24px}
.onglets-auth a{flex:1;justify-content:center}
.erreurs ul{margin:0;padding-left:18px;display:grid;gap:4px}
.erreurs{display:block;padding:12px 14px;border-radius:var(--radius-s);background:color-mix(in srgb,var(--danger) 12%,transparent);border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}
.msg.ko[role="alert"]:not(.erreurs){padding:10px 12px;border-radius:var(--radius-s);background:color-mix(in srgb,var(--danger) 12%,transparent)}
.renvoi{margin-top:12px}
.renvoi-inline{display:flex;flex-wrap:wrap;gap:8px;width:100%;max-width:420px}
.renvoi-inline .input{flex:1;min-width:200px}
.boite-form{text-align:left}
.boite-form h1,.boite-form > p{text-align:center}
.boite-form .big-ico,.boite-form .lien-retour{justify-self:center}
.boite-form .form{width:100%}
.lien-retour{color:var(--accent);font-weight:600}
.hint{font-size:13px;color:var(--muted)}
.membre-entete{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.membre-entete .avatar{width:32px;height:32px;font-size:12px}
.form-deco{margin:0}
@media (max-width:820px){.membre-pseudo{display:none}}
/* Boîte de réception de test */
.boite-dev{padding-bottom:60px}
.email-dev{padding:16px 18px;margin-bottom:14px}
.email-tete{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-bottom:10px}
.email-tete small{color:var(--muted)}
.email-dev pre{margin:0;white-space:pre-wrap;word-break:break-word;font:14.5px/1.6 var(--font)}
.email-dev pre a{color:var(--accent);text-decoration:underline}


/* ============ Profil et sécurité du compte (étape 3) ============ */
.profile{overflow:hidden;margin-top:28px}
/* Bannière de profil : image taillée pour le profil (2400 × 440), affichée en entier ; contenu à droite, l'avatar est à gauche */
.p-banner{aspect-ratio:2400/440;background:#060a18 url(/static/img/banniere-profil-2400x440.png) center/cover no-repeat}
.p-id{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;padding:0 24px 18px;margin-top:-48px;position:relative}
.p-id .avatar{width:104px;height:104px;font-size:34px;border:4px solid var(--solid);--h:200}
.p-text{flex:1;min-width:220px;padding-top:54px}
.p-text h1{font-size:clamp(1.6rem,3vw,2.2rem);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.p-text p{color:var(--muted);margin-top:6px;max-width:60ch}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;border:1px solid var(--line);background:var(--surface)}
.badge.brand{background:var(--brand);color:#fff;border-color:transparent}
.p-stats{display:flex;flex-wrap:wrap;gap:24px;padding:14px 24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.p-stats b{color:var(--text);font-size:16px;margin-right:4px}
.ptabs{display:flex;gap:4px;padding:0 16px;border-top:1px solid var(--line);overflow-x:auto}
.ptabs button{border:0;background:none;padding:14px 12px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer;min-height:48px}
.ptabs button[aria-selected="true"]{color:var(--text);border-image:var(--brand) 1}
.panel{padding-top:28px}
.panel[hidden]{display:none}
.feed{display:grid;gap:0;padding:6px 20px}
.ev{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line);align-items:flex-start}
.ev:first-child{border-top:0}
.ev .dot{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);flex:none;color:var(--accent)}
.ev p{font-size:15px}
.ev small{color:var(--muted);font-size:13px}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.lib .post .cover{aspect-ratio:3/4}
.lib .cover-title{right:12px;font-size:1.05rem}
.status{font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;width:max-content}
.st-play{background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent)}
.st-done{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok)}
.st-todo{background:var(--surface-2);color:var(--muted)}
.lib-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
/* Sécurité */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
.sbox{padding:22px;display:grid;gap:14px;align-content:start}
.sbox h2{font-size:1.15rem;display:flex;align-items:center;gap:10px}
.sbox h2 .ico{color:var(--accent);width:22px;height:22px}
.sbox > p{font-size:14.5px;color:var(--muted)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.state.on{color:var(--ok)}.state.off{color:var(--warn)}
.item{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.item .ico{width:22px;height:22px;color:var(--muted)}
.item .txt{flex:1;min-width:0;line-height:1.35}
.item .txt b{display:block;font-size:14.5px}
.item .txt small{color:var(--muted);font-size:13px}
.here{font-size:11.5px;font-weight:700;color:var(--ok);margin-left:6px}
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line);cursor:pointer}
.switch span{font-size:14.5px}
.switch input{appearance:none;-webkit-appearance:none;width:46px;height:26px;border-radius:999px;background:var(--surface-2);border:1px solid var(--bord-champ);position:relative;cursor:pointer;flex:none;transition:background-color .2s;margin:0}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.switch input:checked{background:var(--accent);border-color:var(--accent)}
.switch input:checked::after{transform:translateX(20px)}
.select{min-height:40px;padding:6px 10px;border:1px solid var(--bord-champ);border-radius:var(--radius-s);background:var(--bg)}
.danger{border-color:color-mix(in srgb,var(--danger) 45%,var(--line))}
.btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent);background:transparent}
.btn-danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.owner-note{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted);padding:12px 16px;margin-bottom:18px}
.owner-note .ico{color:var(--accent)}
.avatar-xl{width:104px;height:104px;font-size:34px;border:4px solid var(--solid)}
.p-bientot{padding:12px 24px 18px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}
.bandeau-ok{display:flex;gap:10px;align-items:center;padding:12px 16px;margin:20px 0 0;border-color:color-mix(in srgb,var(--ok) 45%,var(--line));color:var(--ok);font-weight:600}
#securite{margin-top:36px}
.sbox details{border-top:1px solid var(--line);padding-top:10px}
.sbox summary{cursor:pointer;font-weight:600;font-size:14.5px;color:var(--accent);list-style:none}
.sbox summary::-webkit-details-marker{display:none}
.sbox summary::before{content:"▸ ";display:inline-block;transition:transform .2s}
.sbox details[open] summary::before{transform:rotate(90deg)}
.sbox details .form{margin-top:12px}
.danger-txt{color:var(--danger)!important}
.petit{font-size:13px}
.bouton-gauche{justify-self:start}
.boite-large{max-width:640px}
.etapes-2fa{text-align:left;margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted);font-size:15px}
.qr{background:#fff;padding:14px;border-radius:var(--radius-s);width:min(240px,100%)}
.qr svg{display:block;width:100%;height:auto}
.secret-txt{display:grid;gap:6px;justify-items:center;font-size:13.5px;color:var(--muted)}
.secret-txt code{font:600 15px/1.4 ui-monospace,monospace;letter-spacing:.05em;color:var(--text);padding:6px 10px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);word-break:break-all}
.input-code{font:600 1.4rem/1 ui-monospace,monospace;letter-spacing:.3em;text-align:center}
.codes{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:420px}
.codes code{display:block;padding:10px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line);font:600 1.05rem/1 ui-monospace,monospace;letter-spacing:.06em}

/* ---------- Blogs ---------- */
.blogs-hero{padding:clamp(40px,7vw,84px) 0 clamp(32px,5vw,56px);border-bottom:1px solid var(--line)}
.blogs-hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end}
.blogs-hero h1{font-size:clamp(2.3rem,5.4vw,4.2rem);margin:14px 0 16px}
.blogs-lead{font-size:clamp(1.02rem,1.6vw,1.15rem);color:var(--muted);max-width:56ch;margin-bottom:24px}
.blogs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat{padding:18px 16px}
.stat b{display:block;font:700 1.9rem/1 var(--font);background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:8px;font-size:13px;color:var(--muted);line-height:1.35}
.posts-une{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.toolbar{display:grid;gap:12px;margin-bottom:24px;padding:16px}
.toolbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.toolbar-label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-right:4px;min-width:96px}
.toolbar-bas{min-height:28px}
.search{display:flex;align-items:center;gap:8px;flex:1;min-width:220px;padding:0 12px;height:44px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg)}
.search input{flex:1;border:0;background:transparent;outline:0;min-width:0;color:inherit;font:inherit}
.search:focus-within{outline:3px solid var(--accent-2);outline-offset:2px}
.count{font-size:14px;color:var(--muted);margin-left:auto}
.cloud{display:flex;flex-wrap:wrap;gap:6px}
.cloud a{padding:4px 10px;border-radius:999px;background:var(--surface-2);font-size:13px;font-weight:500;border:1px solid var(--line)}
.cloud a:hover{border-color:var(--accent);color:var(--accent)}
.safe{background:var(--bg-2)}
.safe ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:14px}
.safe li{display:flex;gap:8px;align-items:flex-start}
.safe li .ico{color:var(--accent);margin-top:3px;width:16px;height:16px;flex:none}
.pagination{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.pagination a:only-child[rel="next"]{margin-left:auto}
.tag-pin{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);gap:4px}
.tag-pin .ico{width:13px;height:13px}
.tag-brouillon{background:color-mix(in srgb,var(--warn,#d89614) 22%,transparent)}
.tag-publie{background:color-mix(in srgb,var(--ok) 20%,transparent)}
.tag-lien:hover{color:var(--accent)}
.cover-img{background:var(--bg-2)}
.cover-img img{width:100%;height:100%;object-fit:cover}
.cover-img::before{display:none}
.related-billets{display:grid;gap:14px}
/* En-tête d'un blog */
.blog-head{overflow:hidden;margin-bottom:28px}
.blog-banner{position:relative;height:clamp(140px,22vw,220px);background:linear-gradient(120deg,hsl(var(--h,260) 75% 50%),hsl(calc(var(--h,260) + 60) 65% 32%) 55%,hsl(calc(var(--h,260) + 110) 55% 22%))}
.blog-banner::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 2px,transparent 2px 14px)}
/* Bannière envoyée : elle remplit toute la bannière (taille fixe) ; le membre choisit la partie visible (cadrage). */
.blog-banner-img{overflow:hidden;background:var(--bg-2)}
.blog-banner-img::after{display:none}
.banniere-image,.choix-banniere img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--ox,50%) var(--oy,50%)}
.ox-0{--ox:0%}.ox-5{--ox:5%}.ox-10{--ox:10%}.ox-15{--ox:15%}.ox-20{--ox:20%}.ox-25{--ox:25%}.ox-30{--ox:30%}.ox-35{--ox:35%}.ox-40{--ox:40%}.ox-45{--ox:45%}.ox-50{--ox:50%}.ox-55{--ox:55%}.ox-60{--ox:60%}.ox-65{--ox:65%}.ox-70{--ox:70%}.ox-75{--ox:75%}.ox-80{--ox:80%}.ox-85{--ox:85%}.ox-90{--ox:90%}.ox-95{--ox:95%}.ox-100{--ox:100%}
.oy-0{--oy:0%}.oy-5{--oy:5%}.oy-10{--oy:10%}.oy-15{--oy:15%}.oy-20{--oy:20%}.oy-25{--oy:25%}.oy-30{--oy:30%}.oy-35{--oy:35%}.oy-40{--oy:40%}.oy-45{--oy:45%}.oy-50{--oy:50%}.oy-55{--oy:55%}.oy-60{--oy:60%}.oy-65{--oy:65%}.oy-70{--oy:70%}.oy-75{--oy:75%}.oy-80{--oy:80%}.oy-85{--oy:85%}.oy-90{--oy:90%}.oy-95{--oy:95%}.oy-100{--oy:100%}
.blog-id{display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px;padding:0 24px 20px;margin-top:-44px;position:relative}
.blog-id .avatar{width:96px;height:96px;font-size:30px;border:4px solid var(--solid)}
.blog-id-text{flex:1;min-width:220px;padding-top:50px}
.blog-id h1{font-size:clamp(1.5rem,3vw,2.1rem)}
.blog-id p{color:var(--muted);margin-top:6px;max-width:64ch}
.blog-actions{display:flex;gap:8px;padding-bottom:4px}
.blog-stats{display:flex;flex-wrap:wrap;gap:24px;padding:14px 24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.blog-stats b{color:var(--text);font-size:16px;margin-right:5px}
.blog-mini p{font-size:14px;color:var(--muted);margin:8px 0 12px}
.bandeau-brouillon{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 0;padding:12px 16px;border-radius:var(--radius-s);border:1px dashed var(--line);background:var(--bg-2);font-weight:600}
.bandeau-brouillon .ico{width:18px;height:18px;color:var(--accent)}
.bandeau-brouillon a{color:var(--accent);text-decoration:underline}
html:lang(fr) .auto-note,.auto-note{margin:10px 0 0;font-size:13.5px;color:var(--accent-2);font-weight:600}
.auto-note a{text-decoration:underline;text-underline-offset:3px}
/* Blocs propres aux billets */
.liste-billet{margin:0;padding-left:22px;display:grid;gap:6px}
.image-billet{width:100%;height:auto;border-radius:var(--radius-s);background:var(--bg-2)}
.galerie-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.galerie-grille a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-s);background:var(--bg-2)}
.galerie-grille img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.galerie-grille a:hover img{transform:scale(1.04)}
.spoiler{position:relative;border:1px dashed var(--line);border-radius:var(--radius-s);padding:16px 18px;background:var(--bg-2);cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.spoiler-text{filter:blur(7px);user-select:none;transition:filter .4s;display:block}
.spoiler-label{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;transition:opacity .3s}
.spoiler[aria-expanded="true"]{cursor:default}
.spoiler[aria-expanded="true"] .spoiler-text{filter:none;user-select:auto}
.spoiler[aria-expanded="true"] .spoiler-label{opacity:0;pointer-events:none}
.verdict{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:20px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line)}
.score{--s:0;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--s) * 36deg),var(--surface-2) 0);position:relative}
.s-0{--s:0}.s-1{--s:1}.s-2{--s:2}.s-3{--s:3}.s-4{--s:4}.s-5{--s:5}.s-6{--s:6}.s-7{--s:7}.s-8{--s:8}.s-9{--s:9}.s-10{--s:10}
.score::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--bg-2)}
.score b{position:relative;font:700 28px/1 var(--font)}
.score b small{font-size:13px;color:var(--muted)}
.verdict h3,.verdict h4{margin:0 0 8px;font-size:1.05rem}
.pros{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;font-size:14.5px;margin:0;padding:0;list-style:none}
.pros li::before{content:"+ ";color:var(--accent);font-weight:700}
.pros li.minus::before{content:"− ";color:var(--muted)}
.poll{padding:18px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface)}
.poll h3,.poll h4{font-size:1.05rem;margin:4px 0 12px}
.poll-opt{position:relative;display:flex;justify-content:space-between;width:100%;padding:11px 14px;margin-top:8px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);cursor:pointer;overflow:hidden;text-align:left;min-height:44px;font:inherit;color:inherit}
.poll-opt:hover{border-color:var(--accent)}
.poll-opt .bar{position:absolute;inset:0 auto 0 0;width:0;background:color-mix(in srgb,var(--accent) 22%,transparent)}
.poll-opt span{position:relative}
.poll-foot{margin-top:10px;font-size:13px;color:var(--muted)}
/* Créer, gérer, écrire */
.carte-pad{padding:clamp(18px,3vw,28px);margin-bottom:24px}
.carte-pad h2{font-size:1.3rem;margin-bottom:16px}
.form-blog{display:grid;gap:18px;max-width:680px}
.teintes{border:0;padding:0;margin:0}
.teintes legend{font-size:14px;font-weight:600;margin-bottom:8px}
.teintes-liste{display:flex;flex-wrap:wrap;gap:10px}
.teinte{width:40px;height:40px;border-radius:50%;cursor:pointer;background:linear-gradient(135deg,hsl(var(--h) 78% 52%),hsl(calc(var(--h) + 55) 72% 30%));border:3px solid transparent;transition:transform .15s}
.teinte:hover{transform:scale(1.08)}
.teinte:has(input:checked){border-color:var(--text);box-shadow:0 0 0 3px var(--bg)}
.teinte:focus-within{outline:3px solid var(--accent-2);outline-offset:2px}
.teinte input{position:absolute;opacity:0;pointer-events:none}
.gestion-liste{list-style:none;margin:0;padding:0;display:grid}
.gestion-liste li{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line)}
.gestion-liste li:first-child{border-top:0}
.gestion-texte{display:grid;gap:6px;min-width:0;flex:1 1 280px}
.gestion-texte small{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--muted)}
.gestion-actions{display:flex;flex-wrap:wrap;gap:6px}
.gestion-actions form{margin:0}
.label{font-size:14px;font-weight:600}
.choix-image{display:grid;gap:10px}
.choix-apercu{display:grid;place-items:center;min-height:0;border-radius:var(--radius-s);overflow:hidden;color:var(--muted);font-size:14px}
.choix-apercu:not(:empty){min-height:90px;background:var(--bg-2);border:1px solid var(--line)}
.choix-apercu img{width:100%;max-height:260px;object-fit:cover}
.choix-banniere:not(:empty){aspect-ratio:5/1;cursor:grab;touch-action:none;user-select:none}
.choix-banniere:active{cursor:grabbing}
/* Aperçu de cadrage : l'image est forcée aux dimensions du cadre, sinon object-position n'a rien à déplacer. */
.choix-banniere{display:block;position:relative}
.choix-banniere img{position:absolute;inset:0;width:100%;height:100%;max-height:none;pointer-events:none}
.choix-banniere:empty + .cadrage-aide{display:none}
.choix-boutons{display:flex;flex-wrap:wrap;gap:8px}
.choix-boutons label{cursor:pointer}
.editeur-grille{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin-top:20px}
.editeur-principal{display:grid;gap:18px;margin:0}
.editeur-cote{display:grid;gap:20px;position:sticky;top:calc(var(--header-h) + 16px)}
.editeur-cote .carte-pad{margin:0;display:grid;gap:16px}
.editeur-actions .btn{justify-content:center}
.input-titre{font:700 1.4rem/1.2 var(--font);min-height:56px}
.blocs-editeur{display:grid;gap:14px}
.bloc-ed{display:grid;gap:10px;padding:14px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg-2)}
.bloc-ed:focus-within{border-color:var(--accent)}
.bloc-ed-tete{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bloc-ed-outils{display:flex;gap:4px}
.bloc-ed-outils .icon-btn{width:34px;height:34px;font-size:15px}
.bloc-ed-vide{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-s)}
.petit-label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted)}
.input-intertitre{font:700 1.15rem/1.2 var(--font)}
.input-note{max-width:120px}
.ajout-blocs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:6px}
.galerie-ed{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.galerie-ed-img{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--surface);display:grid;place-items:center}
.galerie-ed-img img{width:100%;height:100%;object-fit:cover}
.galerie-ed-img .icon-btn{position:absolute;top:4px;right:4px;width:28px;height:28px;background:rgba(0,0,0,.6);color:#fff}
.video-etat{font-size:13px;font-weight:600;min-height:1.2em}
.video-etat.ok{color:var(--ok)}.video-etat.ko{color:var(--danger)}
.editor-note{margin-top:4px;font-size:12.5px;color:var(--muted);display:flex;gap:8px}
.editor-note .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}
@media (max-width:1020px){.blogs-hero .wrap{grid-template-columns:1fr;align-items:start}.editeur-grille{grid-template-columns:1fr}.editeur-cote{position:static}}
@media (max-width:640px){
  .blogs-stats{gap:8px}.stat{padding:12px 10px}.stat b{font-size:1.4rem}
  .toolbar-label{min-width:0;width:100%}.count{margin-left:0}
  .verdict{grid-template-columns:1fr;justify-items:start}.pros{grid-template-columns:1fr}
  .blog-id{padding:0 16px 16px}.blog-stats{padding:12px 16px;gap:14px}
}

/* Aperçus des vidéos (servis par le site, jamais par YouTube avant le clic) */
.video-miniature{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.video:has(.video-miniature)::before{background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.65));z-index:1}
.video .play{z-index:2}
.player .video-miniature{z-index:1}
.cover-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover:has(.cover-video)::before{background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.45));z-index:1}
.video:has(.video-miniature) .video-cap{z-index:2;text-shadow:0 1px 6px rgba(0,0,0,.7)}

/* Photos de profil (découpées en carré par le serveur) */
.avatar-img{object-fit:cover;padding:0;background:var(--bg-2)}
.carte-photo .form-photo{max-width:520px;margin-top:14px}
.choix-avatar{display:block;position:relative;width:180px;aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;user-select:none}
.choix-avatar:not(:empty){border:3px solid var(--line);background:var(--bg-2)}
.choix-avatar:active{cursor:grabbing}
.choix-avatar img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:var(--ox,50%) var(--oy,50%);pointer-events:none}
.choix-avatar:empty + .cadrage-aide{display:none}

/* Menu du membre (en-tête) : survol, clavier ou toucher */
.menu-membre{position:relative}
.membre-entete{padding:4px 8px 4px 4px;border-radius:999px;border:1px solid transparent}
.membre-entete .fleche{width:14px;height:14px;opacity:.7;transition:transform .2s}
.menu-membre:hover .membre-entete,.menu-membre.ouvert .membre-entete{border-color:var(--line);background:var(--surface)}
.menu-membre-liste{position:absolute;right:0;top:100%;z-index:60;min-width:240px;padding:8px;display:grid;gap:2px;margin-top:6px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility 0s .15s;background:var(--solid)}
/* Petit pont invisible entre le bouton et le menu, pour que le survol ne se coupe pas. */
.menu-membre-liste::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.menu-membre:hover .menu-membre-liste,.menu-membre.ouvert .menu-membre-liste{opacity:1;visibility:visible;transform:none;transition:opacity .15s,transform .15s}
.menu-membre:hover .fleche,.menu-membre.ouvert .fleche{transform:rotate(180deg)}
.menu-titre{padding:6px 10px 8px;font-size:13px;color:var(--muted);margin:0}
.menu-membre-liste a,.menu-membre-liste button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:var(--radius-s);font-size:14px;font-weight:500;border:0;background:transparent;color:inherit;cursor:pointer;text-align:left;font-family:inherit}
.menu-membre-liste a:hover,.menu-membre-liste button:hover,.menu-membre-liste a:focus-visible,.menu-membre-liste button:focus-visible{background:var(--surface-2);color:var(--accent)}
.menu-membre-liste .ico{width:17px;height:17px;flex:none;opacity:.8}
.menu-membre-liste hr{border:0;border-top:1px solid var(--line);margin:4px 2px}
.menu-membre-liste form{margin:0}
@media (hover:none){.menu-membre:hover .menu-membre-liste{opacity:0;visibility:hidden}.menu-membre.ouvert .menu-membre-liste{opacity:1;visibility:visible}}
.carte-blog .cta-actions{margin-top:14px}

/* Barre de mise en forme (gras, italique, barré, lien) */
.barre-format{display:flex;gap:4px;margin-bottom:-2px}
.fmt{min-width:34px;height:30px;padding:0 8px;border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;background:var(--surface);color:inherit;cursor:pointer;font:600 14px/1 var(--font)}
.fmt:hover,.fmt:focus-visible{color:var(--accent);border-color:var(--accent)}
.fmt-gras{font-weight:800}.fmt-italique{font-style:italic;font-family:Georgia,serif}.fmt-barre{text-decoration:line-through}
.prose s{opacity:.75}

/* Mise en forme dans les textes */
.prose u{text-underline-offset:3px}
.prose mark,mark{background:color-mix(in srgb,#ffd84d 55%,transparent);color:inherit;padding:0 .15em;border-radius:3px}
.prose code,code.ligne{font:500 .9em/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;padding:.1em .4em;border-radius:6px;background:var(--bg-2);border:1px solid var(--line)}
.spoiler-ligne{filter:blur(5px);background:color-mix(in srgb,var(--text) 14%,transparent);border-radius:4px;cursor:pointer;transition:filter .3s;padding:0 .15em}
.spoiler-ligne.vu{filter:none;background:transparent;cursor:auto}
.spoiler-ligne:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}
.tc-rouge{color:#e5484d}.tc-orange{color:#f76b15}.tc-jaune{color:#d29b00}.tc-vert{color:#2f9e63}.tc-bleu{color:#3d8fd6}.tc-violet{color:#9a5cd6}
html[data-mode="dark"] .tc-rouge{color:#ff6b70}html[data-mode="dark"] .tc-orange{color:#ff9046}html[data-mode="dark"] .tc-jaune{color:#ffd43b}
html[data-mode="dark"] .tc-vert{color:#4cd38a}html[data-mode="dark"] .tc-bleu{color:#6db6ff}html[data-mode="dark"] .tc-violet{color:#c08bff}
/* Barre : boutons en plus, palette de couleurs */
.barre-format{flex-wrap:wrap;position:relative}
.fmt-souligne{text-decoration:underline}.fmt-code{font-family:ui-monospace,monospace;font-size:12px}
.fmt-surligne,.fmt-spoiler,.fmt-couleur,.fmt-lien,.fmt-effacer{font-size:14px}
.palette{position:absolute;top:34px;z-index:5;display:flex;gap:6px;padding:8px;border-radius:10px;background:var(--solid);border:1px solid var(--line);box-shadow:var(--shadow)}
.pastille{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;font-size:12px;color:var(--muted);background:var(--surface)}
.pastille:hover{transform:scale(1.12)}
.tc-fond-rouge{background:#e5484d}.tc-fond-orange{background:#f76b15}.tc-fond-jaune{background:#ffd43b}.tc-fond-vert{background:#30a46c}.tc-fond-bleu{background:#3e8ed0}.tc-fond-violet{background:#8e4ec6}

/* Sélecteur d'émojis */
.fmt-emojis{font-size:15px}
.emojis{position:absolute;top:34px;left:0;z-index:6;width:min(340px,90vw);max-height:300px;overflow:auto;padding:10px;border-radius:12px;background:var(--solid);border:1px solid var(--line);box-shadow:var(--shadow)}
.emojis-titre{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:6px 2px 4px}
.emojis-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
.emoji{width:34px;height:34px;border:0;border-radius:8px;background:transparent;font-size:20px;line-height:1;cursor:pointer}
.emoji:hover,.emoji:focus-visible{background:var(--surface-2)}

/* ---------- Étape 5 : communauté ---------- */
.reactions{display:flex;flex-wrap:wrap;gap:8px}
.reactions form,.commentaire-actions form{margin:0}
.react{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font:inherit;color:inherit}
.react .nb{font-size:13px;font-weight:600;color:var(--muted)}
.react.actif,.mini-btn.actif{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.react.actif .nb{color:var(--accent)}
.btn.actif{filter:saturate(.75)}
.icon-btn.alerte.actif{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.comments{display:grid;gap:16px}
.form-commentaire{display:grid;gap:0}
.form-commentaire textarea{min-height:90px;resize:vertical}
.form-commentaire-pied{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:10px}
.repondre-a{margin:0 0 8px;font-size:13.5px;font-weight:600;color:var(--accent)}
.commenter-connexion{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0}
.fil-commentaires{display:grid;gap:12px}
.commentaire{display:grid;gap:8px;padding:14px 16px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line)}
.commentaire.reponse{margin-left:clamp(18px,5vw,48px);border-left:3px solid color-mix(in srgb,var(--accent) 45%,var(--line))}
.commentaire:target{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}
.commentaire-tete{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.commentaire-tete .avatar{width:30px;height:30px;font-size:11px}
.commentaire-tete small{font-size:12.5px}
.commentaire-texte{font-size:15.5px;line-height:1.55;overflow-wrap:anywhere}
.commentaire-texte a{color:var(--accent);text-decoration:underline}
.commentaire-supprime{margin:0;font-style:italic}
.commentaire-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mini-btn{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font:600 12.5px/1.4 var(--font);color:inherit;cursor:pointer;list-style:none}
.mini-btn::-webkit-details-marker{display:none}
.mini-btn:hover{border-color:var(--accent)}
.commentaire-modif[open]{flex-basis:100%}
.commentaire-modif[open]{order:5}
.commentaire-modif[open] summary{margin-bottom:8px}
.commentaire-modif .form-commentaire{gap:8px}
.tag-auteur{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.poll form{margin:0}
.poll-opt .pct{opacity:1;font-weight:700;margin-left:auto;padding-left:10px}
.poll-opt .bar{transition:width .8s cubic-bezier(.2,.8,.2,1)}
.pc-0{width:0%}.pc-5{width:5%}.pc-10{width:10%}.pc-15{width:15%}.pc-20{width:20%}.pc-25{width:25%}.pc-30{width:30%}.pc-35{width:35%}.pc-40{width:40%}.pc-45{width:45%}.pc-50{width:50%}.pc-55{width:55%}.pc-60{width:60%}.pc-65{width:65%}.pc-70{width:70%}.pc-75{width:75%}.pc-80{width:80%}.pc-85{width:85%}.pc-90{width:90%}.pc-95{width:95%}.pc-100{width:100%}
.cloche{position:relative}
.compteur-notifs{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#c4203a;color:#fff;font:700 11px/18px var(--font);text-align:center}
.liste-notifs{list-style:none;margin:0;padding:6px}
.liste-notifs li + li{border-top:1px solid var(--line)}
.liste-notifs a{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:var(--radius-s)}
.liste-notifs a:hover{background:var(--surface-2)}
.liste-notifs .ico{width:20px;height:20px;flex:none;color:var(--accent)}
.liste-notifs span{display:grid;gap:3px;flex:1}
.liste-notifs small{color:var(--muted);font-size:12.5px}
.liste-notifs .nouvelle a{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pastille-nouveau{width:9px;height:9px;flex:none;border-radius:50%;background:var(--accent)}
.abonnements-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:16px}
.abonnements-grille h3{font-size:1rem;margin-bottom:8px}
.liste-suivis{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.liste-suivis li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--radius-s);background:var(--bg-2)}
.liste-suivis li > a,.liste-suivis li > span{display:grid;min-width:0}
.liste-suivis small{color:var(--muted);font-size:12.5px}
.liste-suivis form{margin:0}
.petit{font-size:13.5px}
.gamecard .btns form{margin:0}
.blog-actions form{margin:0}

/* La cloche « sonne » quand une notification arrive en temps réel */
@keyframes sonner{0%,100%{transform:rotate(0)}20%{transform:rotate(16deg)}40%{transform:rotate(-14deg)}60%{transform:rotate(9deg)}80%{transform:rotate(-5deg)}}
.cloche.sonne .ico{animation:sonner .9s ease;transform-origin:50% 15%}
@media (prefers-reduced-motion:reduce){.cloche.sonne .ico{animation:none}}

/* Commentaire arrivé en direct */
@keyframes arrivee{from{opacity:0;transform:translateY(-6px);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent)}to{opacity:1;transform:none;box-shadow:0 0 0 0 transparent}}
.commentaire.arrive{animation:arrivee 1.6s ease}
@media (prefers-reduced-motion:reduce){.commentaire.arrive{animation:none}}

/* ---------- Étape 6 : modération ---------- */
.onglets-modo{margin-bottom:24px}
.section-modo{margin-bottom:32px}
.section-modo h2{font-size:1.3rem;margin-bottom:14px}
.file-modo{display:grid;gap:14px}
.signalement{padding:16px 18px;display:grid;gap:10px}
.signalement.est-masque{border-color:color-mix(in srgb,var(--danger,#e5484d) 40%,var(--line))}
.signalement-tete{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nb-signalements{color:var(--danger,#e5484d)}
.extrait-modo{margin:0;padding:10px 14px;border-left:3px solid var(--line);background:var(--bg-2);border-radius:0 var(--radius-s) var(--radius-s) 0;overflow-wrap:anywhere}
.details-signalement{margin:0;padding-left:18px;font-size:14px;color:var(--muted)}
.versions summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent)}
.versions ol{margin:8px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14px}
.actions-modo{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.actions-modo form{margin:0}
.form-masquer{display:flex;gap:6px;flex-wrap:wrap}
.form-masquer .input{min-height:36px;padding:6px 10px;width:auto;min-width:220px}
.liste-membres{list-style:none;margin:0;padding:6px}
.liste-membres li + li{border-top:1px solid var(--line)}
.liste-membres a{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-s)}
.liste-membres a:hover{background:var(--surface-2)}
.membre-ligne-texte{display:grid;gap:3px}
.membre-ligne-texte small{color:var(--muted);font-size:12.5px}
.recherche-modo{max-width:520px;margin-bottom:18px}
.fiche-tete{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fiche-tete h2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fiche-tete form{margin-top:8px}
.grille-modo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.liste-sanctions,.liste-ip,.liste-coms-modo{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.liste-sanctions li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:var(--radius-s);background:var(--bg-2)}
.liste-sanctions li.active{border-left:3px solid var(--danger,#e5484d)}
.liste-sanctions small{display:block;margin-top:2px}
.liste-sanctions p{margin:6px 0 0;font-size:14px}
.liste-coms-modo li{padding:10px 12px;border-radius:var(--radius-s);background:var(--bg-2);font-size:14.5px;overflow-wrap:anywhere}
.tableau-journal{overflow-x:auto}
.tableau-journal table{width:100%;border-collapse:collapse;font-size:14px}
.tableau-journal th,.tableau-journal td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.motifs-signalement{border:0;padding:0;margin:0;display:grid;gap:8px}
.motifs-signalement legend{font-weight:600;margin-bottom:6px}
.choix-motif{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s);cursor:pointer}
.choix-motif:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.bandeau-masque{border-style:solid;border-color:color-mix(in srgb,var(--danger,#e5484d) 45%,var(--line))}
.mini-btn .ico{width:14px;height:14px}

/* ---------- Administration ---------- */
.annonce-site{background:var(--brand);color:#fff;font-weight:600;font-size:14px;padding:8px 0;text-align:center}
.chiffres-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:24px}
a.card.stat:hover{border-color:var(--accent)}
.stat small{color:var(--muted);font-size:12px}
.form-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.form-inline .input{width:auto;min-height:38px;padding:6px 10px}
.form-ip .input[name=motif]{flex:1;min-width:200px}
#equipe h3{font-size:1rem;margin:18px 0 8px}

/* ---------- Espace rédaction ---------- */
.barre-redac{margin-bottom:16px;gap:12px;flex-wrap:wrap}
.onglets-langues{margin-bottom:6px}
.panneau-langue{display:grid;gap:16px}
.relecture{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 14px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line)}
.relecture.a-relire{border-color:color-mix(in srgb,var(--warn,#d89614) 60%,var(--line));background:color-mix(in srgb,var(--warn,#d89614) 10%,var(--bg-2))}
.titre-form{font-size:1.5rem}
.choix-plateformes{display:flex;flex-wrap:wrap;gap:8px}
.supprimer-article{margin-top:16px}

/* ---------- Recherche globale ---------- */
.recherche-globale{max-width:720px;height:52px;margin-bottom:24px}
.recherche-globale .btn{margin-left:auto}
.section-recherche{margin-bottom:32px}
.section-recherche h2{font-size:1.3rem;margin-bottom:14px}
.grille-blogueurs{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px}
.grille-blogueurs .blogger + .blogger{border-top:0}
.liste-jeux-recherche{list-style:none;margin:0;padding:8px;display:grid;gap:4px}
.liste-jeux-recherche li{display:flex;gap:12px;align-items:center;padding:8px}
.liste-jeux-recherche li > span:last-child{display:grid}
.liste-jeux-recherche small{color:var(--muted);font-size:12.5px}

/* Titre de niveau 2 présenté comme un niveau 3 (ordre des titres respecté pour les lecteurs d’écran) */
h2.h3{font-size:1.05rem}

/* Clés d'accès */
.avec-cle{display:grid;gap:10px;margin-top:4px}
#cles details summary{list-style:none;display:inline-flex;margin-top:10px}
#cles details summary::-webkit-details-marker{display:none}
#cles details[open] summary{margin-bottom:12px}

/* ---------- Réseaux sociaux et guide Matrix ---------- */
.grille-reseaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px}
.carte-reseau{padding:22px;display:grid;gap:14px;align-content:start}
.reseau-tete{display:flex;gap:14px;align-items:center}
.reseau-tete h2{font-size:1.3rem;margin-bottom:4px}
.reseau-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;font:800 1.2rem/1 var(--font);color:#fff;flex:none}
.reseau-matrix .reseau-logo{background:#0dbd8b}.reseau-discord .reseau-logo{background:#5865f2}.reseau-x .reseau-logo{background:#111;border:1px solid var(--line)}
.reseau-matrix{border-color:color-mix(in srgb,#0dbd8b 45%,var(--line))}
.reseau-points{margin:0;padding-left:20px;display:grid;gap:4px;font-size:14.5px;color:var(--muted)}
.note-reseaux{display:flex;gap:10px;align-items:flex-start}
.note-reseaux .ico{flex:none;color:var(--accent);margin-top:3px}
.guide .carte-pad{max-width:860px}
.guide-sommaire{max-width:860px;margin-bottom:24px}
.etape-guide{display:grid;gap:10px}
.etape-guide h2{display:flex;align-items:center;gap:12px;font-size:1.25rem}
.etape-guide .num{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;font:700 15px/1 var(--font);flex:none}
.etape-guide ol,.etape-guide ul{margin:0;padding-left:22px;display:grid;gap:8px}
.etape-guide a{color:var(--accent);text-decoration:underline}
.etape-importante{border-color:color-mix(in srgb,var(--warn,#d89614) 55%,var(--line))}
.guide .faq details{padding:10px 0;border-top:1px solid var(--line)}
.guide .faq summary{cursor:pointer;font-weight:600}
.reseau-admin .check{margin-top:4px}

/* Modification d'un commentaire par la modération */
.mention-modo{color:var(--accent-2);font-weight:600}
.modif-moderation summary{display:inline-flex;gap:6px;align-items:center}
.modif-moderation .form-commentaire{gap:8px;margin-top:8px}

/* ---------- Publications des réseaux sociaux (carte, puis cadre chargé au clic) ---------- */
.publi{margin:0;max-width:560px;display:grid;gap:8px}
.publi-carte{border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);padding:18px;display:grid;gap:12px;border-left:4px solid var(--publi,var(--accent))}
.publi-tete{display:flex;gap:12px;align-items:center}
.publi-tete div{display:grid;gap:2px}
.publi-tete span:not(.publi-logo){color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.publi-logo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--publi,var(--accent));color:#fff;font:800 1.05rem/1 var(--font);flex:none}
.publi-note{margin:0;font-size:13.5px;color:var(--muted)}
.publi-actions{display:flex;flex-wrap:wrap;gap:8px}
.publi-toujours{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.publi figcaption{font-size:14px;color:var(--muted)}
.publi iframe{display:block;width:100%;border:0;border-radius:var(--radius-s);background:var(--surface);height:520px}
.publi-x{--publi:#111}.publi-bluesky{--publi:#1185fe}.publi-instagram{--publi:#d62976}.publi-tiktok{--publi:#010101}.publi-reddit{--publi:#ff4500}
.publi-x .publi-logo,.publi-tiktok .publi-logo{border:1px solid var(--line)}
.publi-bluesky iframe{height:360px}.publi-instagram iframe{height:720px}.publi-reddit iframe{height:480px}
.publi-tiktok{max-width:340px}.publi-tiktok iframe{height:auto;aspect-ratio:9/16}
.oubli-externes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.oubli-externes span{font-size:14px;color:var(--muted)}
.publi-secours{margin:0;font-size:13px;color:var(--muted)}
/* Copie d'une publication, faite par le site */
.publi-copie .publi-carte{gap:10px}
.publi-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;background:var(--line)}
.publi-copie .publi-tete div{flex:1;min-width:0}
.publi-marque{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--publi,var(--accent));color:#fff;font:800 .85rem/1 var(--font);flex:none}
.publi-texte{margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.publi-texte a{color:var(--accent)}
.publi-images{display:grid;gap:4px;border-radius:var(--radius-s);overflow:hidden}
.publi-images.n-2,.publi-images.n-3,.publi-images.n-4{grid-template-columns:1fr 1fr}
.publi-images.n-3 .publi-image:first-child{grid-row:span 2}
.publi-image{position:relative;background:var(--line);min-height:0}
.publi-image img{display:block;width:100%;height:100%;max-height:520px;object-fit:cover}
.publi-images:not(.n-1) .publi-image img{aspect-ratio:1}
.publi-play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.publi-play .ico{width:54px;height:54px;padding:14px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff}
.publi-pied{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13.5px;color:var(--muted)}
.publi-pied a{color:var(--accent)}
.publi-tiktok.publi-copie{max-width:560px}
.publi-tiktok.publi-copie .publi-images.n-1 .publi-image{max-width:300px}
.publi-tiktok.publi-copie iframe{max-width:340px;aspect-ratio:9/16;height:auto}
.ligne-lien-image{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.ligne-lien-image .input{flex:1;min-width:200px}
/* Images jointes aux commentaires */
.commentaire-images{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.commentaire-images a{display:block;border-radius:10px;overflow:hidden;background:var(--line)}
.commentaire-images img{display:block;height:150px;width:auto;max-width:min(280px,100%);object-fit:cover}
.com-images{display:grid;gap:6px}
.com-images-liste{display:flex;flex-wrap:wrap;gap:6px}
.com-images-liste:empty{display:none}
.com-image{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:var(--line)}
.com-image img{width:100%;height:100%;object-fit:cover}
.com-image .icon-btn{position:absolute;top:3px;right:3px;width:26px;height:26px;font-size:12px}
.com-images-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.com-images-actions .input-sm{flex:1;min-width:160px;padding:5px 10px;font-size:13px;min-height:0}
.com-images-actions .desactive{opacity:.45;pointer-events:none}
.com-images-etat{font-size:12.5px}
/* Carrousel d'images (3 images ou plus) */
.carrousel{margin:0;display:grid;gap:10px}
.carrousel-cadre{position:relative}
.carrousel-piste{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:var(--radius-s);background:var(--bg-2);scrollbar-width:thin}
.carrousel-actif .carrousel-piste{scrollbar-width:none}
.carrousel-actif .carrousel-piste::-webkit-scrollbar{display:none}
.carrousel-piste:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.carrousel-diapo{flex:0 0 100%;scroll-snap-align:center;display:grid;align-content:center;gap:8px;min-width:0}
.carrousel-diapo a{display:grid;place-items:center;height:min(62vh,520px)}
.carrousel-diapo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.carrousel-legende{margin:0;padding:0 14px 12px;font-size:14px;color:var(--muted);text-align:center}
.carrousel-fleche{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(10,10,20,.55);color:#fff;font:400 28px/1 var(--font);cursor:pointer;display:grid;place-items:center;padding-bottom:3px;backdrop-filter:blur(6px)}
.carrousel-fleche:disabled{opacity:.25;cursor:default}
.carrousel-fleche:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.carrousel-prec{left:10px}.carrousel-suiv{right:10px}
.carrousel-pied{display:flex;align-items:center;justify-content:center;gap:14px;font-size:13.5px;color:var(--muted)}
.carrousel-points{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.carrousel-points{gap:0}
.carrousel-points button{width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.carrousel-points button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--line);transition:transform .2s,background-color .2s}
.carrousel-points button[aria-current]::before{background:var(--accent);transform:scale(1.3)}
.carrousel-points button:focus-visible{outline:2px solid var(--accent);border-radius:50%}
.carrousel figcaption{font-size:14px;color:var(--muted)}
@media (max-width:600px){.carrousel-fleche{width:36px;height:36px;font-size:22px}.carrousel-diapo a{height:min(50vh,380px)}}
/* Menu déroulant de la barre (Rétro › Tests, News) */
.nav-deroulant{position:relative}
.nav-deroulant summary{list-style:none;display:flex;align-items:center;gap:4px;padding:8px 12px;border-radius:var(--radius-s);color:var(--muted);font-weight:500;cursor:pointer;white-space:nowrap;position:relative}
.nav-deroulant summary::-webkit-details-marker{display:none}
.nav-deroulant summary:hover,.nav-deroulant.actif summary,.nav-deroulant[open] summary{color:var(--text)}
.nav-deroulant.actif summary::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:3px;background:var(--brand)}
.nav-deroulant summary .ico{width:14px;height:14px;transition:transform .2s}
.nav-deroulant[open] summary .ico{transform:rotate(180deg)}
.nav-sous{position:absolute;top:calc(100% + 6px);left:0;min-width:170px;display:grid;gap:2px;padding:6px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--surface);box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:60}
.nav .nav-sous a{padding:9px 12px}
.nav .nav-sous a:hover{background:var(--bg-2)}
.nav .nav-sous a[aria-current="page"]::after{display:none}
.nav .nav-sous a[aria-current="page"]{color:var(--accent)}
.onglets-retro{display:flex;gap:8px;margin-bottom:12px}
.section-retro-blogs{margin-top:36px}
@media (max-width:900px){.nav-deroulant[open]{display:flex;align-items:center}.nav-sous{position:static;display:flex;min-width:0;padding:0;border:0;background:none;box-shadow:none}}
/* Gestion du bandeau « En direct » */
.bandeau-section{display:grid;gap:14px;margin-top:18px}
.form-breve{display:grid;gap:10px}
.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.liste-bandeau{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.liste-bandeau>li{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-s)}
.liste-bandeau>li.expiree{opacity:.55}
.actions-source{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.actus-source{margin:6px 0 0;padding-left:20px;font-size:14px}
.langues-source{border:0;padding:0;margin:0;display:flex;gap:14px;align-items:center}
.langues-source legend{font-weight:600;margin-right:6px;float:left}
.ok-txt{color:var(--ok)}
.ticker-externe b{opacity:.85}
.jaquette{object-fit:cover;background:var(--bg-2)}.credit-igdb{margin-top:-8px;margin-bottom:24px}
img.vignette.jaquette{width:48px;height:68px;border-radius:8px}img.vignette-large.jaquette{width:40px;height:56px;border-radius:6px}
/* Vue en liste (actus, blogs, rétro) */
.barre-vue{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.choix-vue{display:flex;gap:6px;margin-left:auto}
.choix-vue button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.liste-posts{list-style:none;margin:0 0 24px;padding:0;overflow:hidden}
.ligne-post{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 14px}
.ligne-post:nth-child(even){background:color-mix(in srgb,var(--text) 4%,transparent)}
.ligne-post+.ligne-post{border-top:1px solid var(--line)}
.ligne-vignette{display:block;width:96px;height:60px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,hsl(var(--h,220) 78% 52%),hsl(calc(var(--h,220) + 55) 72% 26%))}
.ligne-vignette img{width:100%;height:100%;object-fit:cover}
.ligne-texte{display:grid;gap:3px;min-width:0}
.ligne-titre{font-weight:600;color:var(--text);line-height:1.35;overflow-wrap:anywhere}
.ligne-titre:hover{color:var(--accent)}
.ligne-rubrique{color:var(--muted);font-weight:500}
.ligne-texte small{color:var(--muted);font-size:12.5px}
.ligne-texte .ico{width:13px;height:13px;vertical-align:-2px}
.ligne-auteur{font-weight:700;color:var(--accent);text-align:right;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:600px){.ligne-post{grid-template-columns:72px minmax(0,1fr);gap:10px}.ligne-vignette{width:72px;height:46px}.ligne-auteur{grid-column:2;text-align:left;font-size:13px}}
.barre-vue:has(> .choix-vue:only-child){justify-content:flex-end;margin-bottom:12px}.sec-head .choix-vue{align-self:flex-end}
.blogs-hero .barre-vue-haut{display:flex;justify-content:flex-end;margin-bottom:8px;position:relative;z-index:1}
/* Plateformes et rubriques (administration) et cases de l'éditeur */
.liste-catalogue{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.liste-catalogue>li.masquee{opacity:.5}
.form-catalogue{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.form-catalogue .input{width:150px;min-height:0;padding:6px 10px}
.form-ajout-catalogue{margin-bottom:18px;padding-top:8px;border-top:1px dashed var(--line)}
.cases-plateformes{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.cases-plateformes legend{width:100%;margin-bottom:6px}
.cases-plateformes .hint{width:100%;margin:2px 0 0}
/* Bouton « Ajouter une clé d'accès » : pas le style des intitulés « ▸ » des blocs du profil (texte bleu sur bleu sinon). */
#cles details summary.btn{color:var(--on-accent);font-size:inherit}
#cles details summary.btn::before{content:none}
/* Amis et messages */
.page-amis>.card{margin-bottom:18px}
.form-ajout-ami{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.form-ajout-ami label{font-weight:600}
.form-ajout-ami .input{flex:1;min-width:180px}
.liste-amis{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.liste-amis>li{display:flex;align-items:center;gap:12px;padding:8px 0;flex-wrap:wrap}
.liste-amis>li+li{border-top:1px solid var(--line)}
.ami-texte{display:grid;gap:2px;flex:1;min-width:140px}
.ami-texte small{color:var(--muted);font-size:12.5px}
.ami-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.liste-conversations>li{padding:0 14px}
.conversation-lien{display:flex;align-items:center;gap:12px;width:100%;padding:10px 0;color:inherit}
.conversation-tete{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.conversation-tete h1{font-size:1.6rem;margin:0}
.fil-messages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto}
.bulle{max-width:min(80%,560px);align-self:flex-start;padding:10px 14px;border-radius:16px 16px 16px 4px;background:var(--bg-2);border:1px solid var(--line)}
.bulle.mienne{align-self:flex-end;border-radius:16px 16px 4px 16px;background:color-mix(in srgb,var(--accent) 18%,var(--surface))}
.bulle.masquee{opacity:.6}
.bulle-texte{overflow-wrap:anywhere;line-height:1.5}
.bulle small{display:block;margin-top:4px;color:var(--muted);font-size:12px}
.form-message{display:grid;gap:10px;margin-top:14px}
.form-message .btn{justify-self:end}
/* Espace équipe */
.btn-equipe{position:relative}
.grille-equipe{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.carte-equipe{display:grid;gap:10px;align-content:start}
.carte-equipe h2{display:flex;gap:10px;align-items:center;font-size:1.25rem;margin:0}
.liens-equipe{display:grid;gap:4px}
.liens-equipe a{padding:9px 12px;border-radius:var(--radius-s);background:var(--bg-2);font-weight:600;color:var(--text)}
.liens-equipe a:hover{color:var(--accent)}
.citation-membre{color:var(--accent);font-weight:600}
/* Suggestions « @pseudo » */
.suggestions-membres{position:absolute;z-index:80;list-style:none;margin:0;padding:4px;max-width:280px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.suggestions-membres li{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;font-weight:600}
.suggestions-membres li img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.suggestions-membres li[aria-selected="true"],.suggestions-membres li:hover{background:var(--accent);color:var(--on-accent)}
/* Bouton du compte : la flèche reste dans l'arrondi ; un pseudo trop long est coupé avec « … » */
.menu-membre{min-width:0}
.membre-entete{max-width:230px;min-width:0;padding:4px 10px 4px 4px}
.membre-entete .avatar{flex:none}
.membre-pseudo{min-width:0;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.membre-entete .fleche{flex:none}
/* Choix de la langue : globe et menu déroulant */
.choix-langue{position:relative}
.choix-langue summary{list-style:none;display:inline-flex;align-items:center;gap:5px;width:auto;padding:0 10px;cursor:pointer}
.choix-langue summary::-webkit-details-marker{display:none}
.langue-actuelle{font-size:12.5px;font-weight:700}
.langues-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;display:grid;gap:2px;min-width:150px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.langues-menu a{padding:9px 12px;border-radius:8px;font-weight:600;color:var(--text)}
.langues-menu a:hover{background:var(--bg-2)}
.langues-menu a[aria-current="true"]{background:var(--accent);color:var(--on-accent)}
/* Blogs de groupe */
.membres-groupe{list-style:none;margin:0;padding:0 24px 16px;display:flex;flex-wrap:wrap;gap:8px 16px}
.membres-groupe li{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.membres-groupe .avatar{width:28px;height:28px;font-size:11px}
.groupe-editeur{margin-bottom:14px;font-weight:600}
/* Citation au début d'un commentaire */
.citation-com{margin:0 0 10px;padding:8px 12px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--radius-s) var(--radius-s) 0;font-size:.95em}
.citation-com>a{display:block;margin-bottom:2px;font-size:.85em;font-weight:600;color:var(--muted);text-decoration:none}
.citation-com>a:hover{text-decoration:underline}
.citation-com p{margin:2px 0}
/* Page d'un jeu et jaquette de la fiche */
.fiche-jeu{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:24px;padding:20px;margin-top:12px}
.fiche-jeu-visuel .cover{aspect-ratio:264/374;border-radius:var(--radius-s)}
.fiche-jaquette{display:block;width:100%;height:auto;border-radius:var(--radius-s);box-shadow:var(--shadow)}
.fiche-jeu-infos h1{margin:4px 0 12px}
.fiche-jeu .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fiche-jeu .btns form{margin:0}
.gamecard .fiche-visuel{display:block;margin-bottom:14px}
.gamecard .fiche-jaquette{max-width:180px;margin:0 auto}
@media (max-width:560px){.fiche-jeu{grid-template-columns:1fr}.fiche-jeu-visuel{max-width:200px}}
/* Recherche dans le calendrier ; jeux cliquables dans la recherche du site et sur l'accueil */
.recherche-cal{display:flex;gap:6px;align-items:center;min-width:0}
.recherche-cal .input{width:200px;max-width:100%;padding-block:6px}
.resultats-cal{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;margin:0 0 12px}
.liste-jeux-recherche li a{display:flex;gap:12px;align-items:center;color:inherit;text-decoration:none;width:100%}
.liste-jeux-recherche li a:hover b{text-decoration:underline}
.liste-jeux-recherche li a > span:last-child{display:grid}
.liste-jeux-recherche .jaquette{width:40px;height:auto;border-radius:4px}
.week .cover .cover-jaquette{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.game-body b a{color:inherit;text-decoration:none}
.game-body b a:hover{text-decoration:underline}
@media (max-width:560px){.recherche-cal,.recherche-cal .input{width:100%}}
/* Page de profil d'un membre */
.profil-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 20px 18px}
.profil-actions form{margin:0}
.profil-actions .muted{margin:0;flex-basis:100%}
.liens-profil{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.jeux-profil{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.jeux-profil a{display:block;width:128px;height:128px;border-radius:var(--radius-s);overflow:hidden}
.jeux-profil img,.jeux-profil .cover{display:block;width:128px;height:128px;aspect-ratio:auto;object-fit:cover;object-position:center 30%}
.jeux-profil a:hover img{transform:scale(1.04)}
.jeux-profil img{transition:transform .2s}
@media (max-width:560px){.jeux-profil a,.jeux-profil img,.jeux-profil .cover{width:96px;height:96px}}
.jeux-profil .cover-title{font-size:11px}
.nuage-amis{display:flex;flex-wrap:wrap;gap:14px}
.nuage-amis a{display:grid;justify-items:center;gap:4px;width:72px;color:inherit;text-decoration:none;font-size:12px;text-align:center;overflow-wrap:anywhere}
.nuage-amis .avatar{width:56px;height:56px;font-size:18px}
.nuage-amis a:hover span:last-child{text-decoration:underline}
.lien-membre{color:inherit;text-decoration:none}
.lien-membre:hover{text-decoration:underline}
.p-visibilite{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:0 20px 18px}
.p-visibilite .select{width:auto}
.p-visibilite .hint{flex-basis:100%;margin:0}
/* Comptes de jeu */
.comptes-jeu{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:end}
.comptes-jeu .btn{justify-self:start}
.comptes-jeu-liste{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0}
.comptes-jeu-liste dt{font-weight:600;color:var(--muted)}
.comptes-jeu-liste dd{margin:0;overflow-wrap:anywhere}
.copiable{user-select:all;font-family:ui-monospace,monospace}
/* À propos : sous le capot */
.capot h2{margin:6px 0 10px}
.capot p{margin:0;max-width:760px;color:var(--muted)}
.capot b{color:var(--text)}
/* Boîte de réception des messages de contact */
.messages-contact{display:grid;gap:14px;margin:16px 0}
.message-contact header{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:8px}
.message-contact p{overflow-wrap:anywhere}
.message-actions{display:flex;flex-wrap:wrap;gap:8px}
.message-actions form{margin:0}
/* Rôles cumulables (cases) */
.cases-roles{display:inline-flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.cases-roles label{display:inline-flex;gap:6px;align-items:center;font-size:14px;cursor:pointer}
/* Accueil : « Tout voir » sous les articles à la une (quand « Les dernières infos » est cachée) */
.barre-accueil{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.barre-accueil .more{margin-left:8px}
/* Page d'aide : captures d'écran, liste des blocs, tableau de mise en forme */
.aide .part h3{margin-top:22px}
.capture{margin:16px 0;display:grid;gap:8px}
.capture img{display:block;width:100%;height:auto;border-radius:var(--radius-s);border:1px solid var(--line);box-shadow:var(--shadow)}
.capture-etroite img{max-width:560px}
.capture figcaption{font-size:13px;color:var(--muted)}
.liste-blocs{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:12px 0}
.liste-blocs dt{font-weight:700}
.liste-blocs dd{margin:0;color:var(--muted)}
.table-format td:first-child code{white-space:nowrap}
.astuce{padding:10px 14px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--radius-s) var(--radius-s) 0}
.aide-note{padding:12px 16px;font-size:14px;color:var(--muted)}
kbd{font:600 12px/1 var(--font);padding:2px 6px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;background:var(--surface)}
@media (max-width:640px){.liste-blocs{grid-template-columns:1fr}.liste-blocs dd{margin-bottom:6px}}
/* Aide et pages légales sur téléphone : la colonne de texte ne s'élargit jamais au-delà de l'écran */
.legal>*{min-width:0}
.aide .part{overflow-wrap:anywhere}
.aide .tbl{overflow-x:auto}
@media (max-width:640px){.table-format td:first-child code{white-space:normal}}
.doc>*,.capture>*{min-width:0}
.capture{grid-template-columns:minmax(0,1fr)}
.capture img{max-width:100%}
.capture-etroite img{max-width:min(100%,560px)}
/* Accueil : la carte « À la une » comme les autres cartes (image en haut, texte en dessous, toujours lisible) */
.hero-main{display:flex;flex-direction:column;align-items:stretch;min-height:0}
.hero-main .cover{position:relative;inset:auto;aspect-ratio:2/1}
.hero-main .cover::after{display:none}
.hero-main .inner{color:var(--text);padding:clamp(18px,2.5vw,28px)}
.hero-main h1{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.hero-main h1 a{color:inherit}
.hero-main p{color:var(--muted);font-size:1rem}
.hero-main .meta{color:var(--muted)}
.hero-main .tag:not(.tag-type){background:var(--surface-2);color:var(--text)}
/* Boutons-liens « Nouvel article », « Ajouter un jeu »… : texte blanc, même quand une règle de lien colore les <a> */
a.btn.btn-brand,a.btn.btn-brand:visited{color:#fff}
/* Un champ dans une grille ne s'étire pas à la hauteur de son voisin (ex. : lien officiel à côté de la jaquette) */
.field{align-content:start}
/* Le pseudo du menu du compte garde au moins quelques lettres visibles avant d'être raccourci */
.membre-pseudo{min-width:min(5ch,150px)}
.capture-colonne img{max-width:min(100%,340px)}
/* Administration : alerte d'espace disque */
.stat-alerte{border-color:var(--danger);box-shadow:inset 0 0 0 2px var(--danger)}
.stat-alerte b{color:var(--danger)}

/* ============ Animations (choisies sur la maquette maquette/animations) ============
   Courtes, en déplacement / agrandissement / fondu seulement. Coupées par le réglage
   « réduire les animations » (règle générale plus haut, et réglages au cas par cas ci-dessous). */
:root{--ease-sortie:cubic-bezier(.2,.8,.2,1);--rebond:cubic-bezier(.34,1.56,.64,1)}

/* 1. Cartes : l'image zoome et un reflet la traverse au survol */
.post .cover-img img{transition:transform .6s var(--ease-sortie)}
.post:hover .cover-img img,.post:focus-within .cover-img img{transform:scale(1.07)}
.post .cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.2) 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s var(--ease-sortie)}
.post:hover .cover::after,.post:focus-within .cover::after{transform:translateX(110%)}
.post:focus-within{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,20,60,.25)}

/* 3. Boutons : ils s'enfoncent, une onde part du clic ; un envoi en cours tourne */
.btn{position:relative;isolation:isolate}
.btn:active{transform:scale(.96)!important}
.ondes{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none}
.onde{position:absolute;border-radius:50%;background:currentColor;opacity:.28;transform:scale(0);animation:onde .6s ease-out forwards;pointer-events:none}
@keyframes onde{to{transform:scale(4);opacity:0}}
.btn.envoi{cursor:progress}
.btn.envoi::before{content:"";width:15px;height:15px;flex:none;border:2.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* 4. Le compteur de la cloche saute quand une notification arrive */
.compteur-notifs.saute{animation:saute .5s var(--rebond)}
@keyframes saute{from{transform:scale(0)}}

/* 5. « À la une » : les articles défilent en fondu, une barre montre le temps restant */
.hero-unes{position:relative;display:grid;min-width:0}
.hero-unes>.hero-main{grid-area:1/1;min-width:0}
.hero-unes>[data-suite]{display:none}
.hero-unes.tourne>[data-suite]{display:flex}
.hero-unes.tourne>.hero-main{transition:opacity .9s ease,visibility .9s}
.hero-unes.tourne>.hero-main:not(.actif){opacity:0;visibility:hidden}
.hero-unes.tourne .cover-img img{transform:scale(1.06);transition:transform 7s linear}
.hero-unes.tourne .actif .cover-img img{transform:scale(1)}
.hero-main .hero-titre{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.hero-main .hero-titre a{color:inherit}
/* En haut à droite, sur l'image (le texte de la carte est dessous, sur fond clair en mode clair). */
.une-points{position:absolute;right:14px;top:12px;z-index:3;display:flex;gap:6px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.une-points button{position:relative;width:30px;height:16px;padding:0;border:0;background:none;cursor:pointer}
.une-points button::before,.une-points button::after{content:"";position:absolute;left:0;right:0;top:6px;height:4px;border-radius:4px;background:rgba(255,255,255,.35)}
.une-points button::after{background:#fff;transform:scaleX(0);transform-origin:left}
.une-points button[aria-current]::after{animation:progres var(--duree,7s) linear forwards}
.hero-unes:hover .une-points button::after,.hero-unes:focus-within .une-points button::after{animation-play-state:paused}
@keyframes progres{to{transform:scaleX(1)}}
/* Sans animation : la barre garde son rythme (le changement se fait d'un coup) */

/* 8. Suivre, Souhaits, réactions : le bouton bat et lance des éclats */
.btn.bat{animation:bat .5s var(--rebond)}
@keyframes bat{0%{transform:scale(.9)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
.eclat{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:2;animation:eclat .6s ease-out forwards}
@keyframes eclat{from{transform:translate(-50%,-50%) rotate(var(--a)) translateX(10px);opacity:1}to{transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--r,40px));opacity:0}}

/* 9. Jaquettes en relief : elles s'inclinent vers la souris (towa.js) */
.fiche-jaquette,img.jaquette,.jeux-profil img{transition:transform .2s ease-out,filter .3s;will-change:transform}
.relief{filter:brightness(1.08);box-shadow:0 18px 36px rgba(0,0,0,.35)}

/* 10. Le logo se trace à la première page de la visite (classe posée par mode.js) */
.logo-anime .brand-logo .trace{stroke-dasharray:1;stroke-dashoffset:1;animation:trace 1.1s var(--ease-sortie) .15s forwards}
.logo-anime .brand-logo .trace+.trace{animation-delay:.6s}
.logo-anime .header .brand-name{opacity:0;animation:nom .7s 1.2s var(--ease-sortie) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes nom{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* 11. Pages vides : une manette flotte doucement */
.empty-anime::before{content:"";display:block;width:110px;height:66px;margin:0 auto 16px;background:url(/static/img/manette.svg) center/contain no-repeat;animation:flotte 3.2s ease-in-out infinite}
@keyframes flotte{50%{transform:translateY(-10px) rotate(-4deg)}}

/* 12. Page introuvable : écran d'arcade « Game Over » */
.arcade{width:100%;padding:24px 16px;border-radius:var(--radius-s);background:#05060d;color:#fff;display:grid;gap:10px;justify-items:center;position:relative;overflow:hidden;font-family:ui-monospace,"Courier New",monospace}
.arcade::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(255,255,255,.04) 2px 4px);pointer-events:none}
.arcade-go{font:900 clamp(30px,7vw,46px)/1 var(--brand-font);letter-spacing:.06em;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;animation:tombe .7s var(--rebond) both}
.arcade-continue{font-size:17px;letter-spacing:.2em;animation:clignote 1s steps(2) infinite}
.arcade-compte{font:800 42px/1 var(--brand-font);color:var(--cyan)}
.arcade-compte.tic{animation:tic .4s var(--ease-sortie)}
@keyframes tombe{from{transform:translateY(-90px);opacity:0}}
@keyframes clignote{50%{opacity:.2}}
@keyframes tic{from{transform:scale(1.5);opacity:.4}}

/* Menus déroulants de la barre (Actus, Blogs, Rétro, langues) : fond plein — la barre floute déjà
   la page, son flou ne passe pas aux menus, qui laissaient voir « À la une » défiler à travers —
   et ouverture en douceur. */
.nav-sous,.langues-menu{background:var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none}
@keyframes menu-ouvre{from{opacity:0;transform:translateY(-6px) scale(.98)}}
.nav-deroulant[open] .nav-sous,.choix-langue[open] .langues-menu{animation:menu-ouvre .18s var(--ease-sortie);transform-origin:top left}
.choix-langue[open] .langues-menu{transform-origin:top right}
@media (max-width:900px){.nav-sous{background:none}.nav-deroulant[open] .nav-sous{animation:none}}
.nav-deroulant.enchaine[open] .nav-sous,.choix-langue.enchaine[open] .langues-menu{animation:none}

/* 7. Changement de page tout doux : l'ancienne page s'efface, la nouvelle arrive en fondu.
   Navigateurs qui ne savent pas le faire : changement de page normal. La barre du haut ne bouge pas.
   Le léger glissement est réservé aux changements de page (type « page ») : le passage clair/sombre
   garde son simple fondu. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;types:page}
  .header{view-transition-name:entete}
  html:active-view-transition-type(page)::view-transition-old(root){animation:.22s ease both page-sort}
  html:active-view-transition-type(page)::view-transition-new(root){animation:.38s .04s var(--ease-sortie) both page-entre}
}
@keyframes page-sort{to{opacity:0;transform:translateY(-8px)}}
@keyframes page-entre{from{opacity:0;transform:translateY(12px)}}
/* Version de secours (classe posée par mode.js) */
/* « backwards » : rien ne reste appliqué après l'arrivée (un transform restant empêcherait les éléments fixés, comme « Rejoins-nous », de rester en place). */
.fondu-page #main{animation:page-entre .38s var(--ease-sortie) backwards}
.fondu-page #main.quitte{animation:page-sort .16s ease both}

/* ============ Cartes cliquables sur toute leur surface ============
   Le lien du titre s'étend à toute la carte (calque invisible) ; les autres liens et boutons de la
   carte (nom du blog, auteur, Suivre…) passent au-dessus et gardent leur propre destination.
   Au clavier, on s'arrête toujours une seule fois par carte, sur le titre. */
.post,.game,.attendu,.jeu-ligne,.ligne-post{position:relative}
.post .post-title a::after,.game .game-body b a::after,.attendu .txt b a::after,.jeu-ligne .nom a::after,.ligne-post .ligne-titre::after{content:"";position:absolute;inset:0;z-index:1}
.post .post-meta a,.post .post-sub a,.post .tags a,.post form,.ligne-post a.ligne-auteur,.jeu-ligne form,.jeu-ligne .badge-hot{position:relative;z-index:2}
.post:has(.post-title a:focus-visible),.game:has(.game-body a:focus-visible),.attendu:has(.txt a:focus-visible),.jeu-ligne:has(.nom a:focus-visible),.ligne-post:has(.ligne-titre:focus-visible){outline:3px solid var(--accent-2);outline-offset:3px}
.post .post-title a:focus-visible,.game .game-body a:focus-visible,.attendu .txt a:focus-visible,.jeu-ligne .nom a:focus-visible,.ligne-post .ligne-titre:focus-visible{outline:none}
.game:hover .game-body b a,.attendu:hover .txt b a,.jeu-ligne:hover .nom a,.ligne-post:hover .ligne-titre{color:var(--accent)}
.post:hover .post-title a{color:var(--accent)}

/* ============ Ambiances de la page Actus (ambiances.js) ============ */
.ambiance{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s ease}
.ambiance.visible{opacity:1}
/* En mode clair, le fond reste un voile léger : les textes sombres restent lisibles. */
html[data-mode="light"] .ambiance.visible{opacity:.06}
.barre-vue:has(.son-ambiance:not([hidden])) .choix-vue{margin-left:auto}
.son-ambiance[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent}
[data-ambiance-zone][aria-busy="true"]{opacity:.6;transition:opacity .2s}
/* Le fond animé remplace les aurores ; plus discret sur les pages de lecture. */
html.ambiance-on body::before{display:none}
.ambiance.calme.visible{opacity:.7}
html[data-mode="light"] .ambiance.calme.visible{opacity:.05}
.filters .son-ambiance,.toolbar-bas .son-ambiance{margin-left:auto}
.barre-vue .choix-musique,.toolbar-bas .choix-musique{flex:none}

/* Musique d'ambiance (musique.js) */
.choix-musique{position:relative}
.choix-musique summary{list-style:none;cursor:pointer}
.choix-musique summary::-webkit-details-marker{display:none}
.choix-musique summary.actif{background:var(--accent);color:var(--on-accent);border-color:transparent}
.musique-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;display:grid;gap:2px;min-width:190px;padding:6px;background:var(--solid);box-shadow:0 12px 30px rgba(0,0,0,.25)}
.barre-accueil .musique-menu{left:0;right:auto}
.musique-menu button{border:0;background:none;text-align:left;padding:8px 12px;border-radius:8px;font:600 14px/1.3 var(--font);color:var(--text);cursor:pointer}
.musique-menu button:hover{background:var(--bg-2)}
.musique-menu button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.choix-musique[open] .musique-menu{animation:menu-ouvre .18s var(--ease-sortie)}
/* « À la une » qui défile : fond plein, pour que le texte de l'article suivant ne transparaisse pas pendant le fondu */
.hero-unes.tourne>.hero-main{background:var(--solid)}
/* Accueil en vue Liste : jaquettes des sorties en format boîte */
.ligne-jeu .ligne-vignette{width:44px;height:60px;justify-self:center}

/* ============ Sociétés (éditeur, développeur) à côté de la jaquette ============ */
.fiche-duo.avec-societes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;margin-bottom:14px}
.fiche-duo.avec-societes .fiche-visuel{margin:0}
.fiche-duo.avec-societes .fiche-jaquette{max-width:none}
.fiche-societes{display:grid;gap:10px;align-content:start}
.societe{display:grid;gap:6px;justify-items:center;text-align:center;padding:10px 8px;border-radius:var(--radius-s);background:var(--bg-2);border:1px solid var(--line);aspect-ratio:1;align-content:center;min-width:0}
.societe b{font-size:12.5px;line-height:1.25;overflow-wrap:anywhere}
.societe-role{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Pastille claire : beaucoup de logos sont faits pour un fond blanc. */
.societe-logo{display:grid;place-items:center;width:100%;max-width:120px;height:48px;padding:6px 8px;border-radius:8px;background:#f4f6fb;overflow:hidden}
/* Hauteur en pixels : un pourcentage ne s'applique pas dans cette pastille, et les logos carrés débordaient. */
.societe-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:36px;object-fit:contain}
/* Page d'un jeu : la colonne de la jaquette s'élargit pour loger les sociétés à côté. */
.fiche-jeu:has(.fiche-jeu-visuel.avec-societes){grid-template-columns:minmax(260px,400px) 1fr}
.fiche-jeu-visuel.avec-societes{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:560px){.fiche-jeu:has(.fiche-jeu-visuel.avec-societes){grid-template-columns:1fr}.fiche-jeu-visuel.avec-societes{max-width:340px}}
/* Fiche d'une société (à côté d'une rumeur, par exemple) */
.fiche-societe{display:grid;gap:10px;justify-items:start}
.societe-logo-grand{max-width:200px;height:80px}
.societe-logo-grand img{max-height:66px}
.societe-nom{font:700 18px/1.2 var(--brand-font)}
.fiche-societe h4{margin:6px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.societe-jeux{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%}
.societe-jeux li{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.societe-jeux small{color:var(--muted);white-space:nowrap}

/* ============ En-tête sur toute la largeur, avec les boutons d'affichage ============ */
.header .header-in{max-width:none}
.outils-affichage{display:flex;align-items:center;gap:6px}
.outils-affichage .choix-vue{margin:0;gap:4px}
.outils-affichage .mini-btn{gap:6px;padding:6px 11px;font-size:13px;min-height:34px;white-space:nowrap}
.membre-pseudo{max-width:220px}
/* Écrans moyens : les boutons d'affichage gardent seulement leur symbole (le nom reste lu par les lecteurs d'écran). */
@media (max-width:1720px){.outils-affichage .libelle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.outils-affichage .mini-btn{padding:6px 9px}}

/* ============ « Rejoins-nous » dans la marge de gauche, sur les grands écrans ============ */
.hero-home:has(+ .accueil-corps){padding-bottom:0}
.hero-contenu{padding-top:0}
.accueil-corps{position:relative}
.rejoindre-piste{display:none}
@media (min-width:1820px){
  /* La piste va du haut des articles à la fin de l'accueil ; la carte y reste accrochée sous l'en-tête. */
  .rejoindre-piste{display:block;position:absolute;z-index:5;top:0;bottom:0;left:calc((100% - 1240px) / 2 - 300px);width:272px}
  .rejoindre-piste .join{position:sticky;top:calc(var(--header-h) + 20px);grid-template-columns:1fr;gap:16px;padding:22px}
  .rejoindre-piste .join::before{display:none}
  .rejoindre-piste .join h2{font-size:1.45rem}
  .rejoindre-piste .join p{font-size:14px}
  .rejoindre-piste .join ul{font-size:13.5px}
  .rejoindre-piste .join .actions{min-width:0}
  .section-rejoindre{display:none}
}
}
/* Colonnes « À lire aussi » en vue Liste */
.liste-cote .ligne-post{grid-template-columns:72px minmax(0,1fr)}
.liste-cote .ligne-vignette{width:72px;height:46px}
.liste-cote .ligne-auteur{display:none}
.conversation-export{margin-left:auto}
.row-gap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tag-retro{background:var(--brand);color:#fff;vertical-align:middle;font-size:13px}
/* Éditeur d'un article Rétro : consoles rangées par constructeur */
.famille-plateformes{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.famille-plateformes:last-of-type{border-bottom:0}
.famille-nom{flex-basis:100%;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Contrastes (audit d'accessibilité) : chiffres en dégradé plus foncés en mode clair, interrupteur éteint visible */
html[data-mode="light"] .count-down,html[data-mode="light"] .mcard .big,html[data-mode="light"] .stat b{background:var(--brand-fonce);-webkit-background-clip:text;background-clip:text}
html[data-mode="light"] .switch input:not(:checked){background:#c9d0dc}

/* Accessibilité (lot 4) : bouton d'envoi d'image visiblement sélectionné au clavier */
label:has(> input[type=file]:focus-visible){outline:3px solid var(--accent-2);outline-offset:3px}
.avatar:not(.avatar-img){background:hsl(var(--h) 55% 30%)}
.cover:not(.cover-img) .cover-title{text-shadow:0 1px 3px rgba(0,0,0,.75),0 2px 14px rgba(0,0,0,.45)}
.galerie-ed{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
/* Chaque image de la galerie, avec sa description dessous */
.galerie-ed-img{aspect-ratio:auto;overflow:visible;display:flex;flex-direction:column;gap:6px;background:none}
.galerie-ed-img > img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px}
.galerie-ed-img .input-alt{width:100%;min-height:34px;padding:6px 8px;font-size:13px}
/* Image jointe à un commentaire, avec sa description dessous */
.com-image{width:150px;height:auto;overflow:visible;background:none;display:grid;gap:4px}
.com-image img{width:84px;height:84px;border-radius:10px;background:var(--line)}
.com-image .icon-btn{left:58px;right:auto}
.com-image .input-alt{width:100%;padding:4px 8px;font-size:12.5px;min-height:0}
.com-images-etat.ko{color:var(--danger);font-weight:600}
.menu-membre{display:flex;align-items:center}
.membre-fleche{display:inline-grid;place-items:center;width:30px;height:30px;margin-left:-6px;border:0;border-radius:8px;background:none;color:inherit;cursor:pointer}
.membre-fleche:hover{background:var(--surface-2)}
.membre-fleche .ico{width:16px;height:16px;transition:transform .2s}
/* Administration › Clés de publication */
.cle-nouvelle{margin:12px 0;padding:12px 14px;border:1px solid var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.cle-nouvelle p{margin:0 0 8px;font-weight:600}
.cle-nouvelle code{display:block;word-break:break-all;user-select:all;font-size:14px}
.liste-cles{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.liste-cles li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
/* Pied de page : logos des réseaux sociaux */
.pied-reseaux{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.pied-reseaux a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--muted);transition:color .2s,background .2s}
.pied-reseaux a:hover,.pied-reseaux a:focus-visible{color:var(--text);background:var(--line)}
.ico-marque{width:20px;height:20px;fill:currentColor}