/* ═══════════════════════════════════════════════════════════════
   ◆ GLYPHE — Atelier de mise en page Unicode
   Fichier : styles.css — TOUTE l'apparence du site
   Version : 1.8.1 · Créé le : 04/07/2026 · © 2026 Émile Snyers
     Condition unique : conserver la notice de copyright originale
  (© 2026 Émile Snyers) dans toute copie ou portion substantielle du logiciel.
  // 🌍 Vous êtes autorisé à utiliser ce code, modifié ou non modifié, gratuitement et sans demande préalable, sous les conditions suivantes :  
  //  
  // 🇫🇷 Français :  
  // - Pour les entreprises ou associations opérant dans le secteur du nucléaire, l'utilisation est libre et sans aucune restriction.  
  // - Pour les entreprises ou associations exerçant en dehors du secteur du nucléaire, l'utilisation est permise uniquement dans un cadre non lucratif.  
  //  
  // 🇬🇧 English:  
  // - You are allowed to use this code, modified or unmodified, for free and without prior request, under the following conditions:  
  // - For companies or organizations operating in the nuclear sector, usage is free and without any restrictions.  
  // - For companies or organizations outside the nuclear sector, usage is allowed only in a non-profit context.  
  //  
  // 🇪🇸 Español:  
  // - Se le permite utilizar este código, modificado o no modificado, de forma gratuita y sin solicitud previa, bajo las siguientes condiciones:  
  // - Para empresas u organizaciones que operan en el sector nuclear, el uso es libre y sin restricciones.  
  // - Para empresas u organizaciones fuera del sector nuclear, el uso está permitido solo en un contexto sin fines de lucro.  
  //  
  // 🇩🇪 Deutsch:  
  // - Sie dürfen diesen Code, verändert oder unverändert, kostenlos und ohne vorherige Anfrage unter den folgenden Bedingungen verwenden:  
  // - Für Unternehmen oder Organisationen im Nuklearsektor ist die Nutzung kostenlos und uneingeschränkt.  
  // - Für Unternehmen oder Organisationen außerhalb des Nuklearsektors ist die Nutzung nur im gemeinnützigen Rahmen erlaubt.  
  //  
  // 🇮🇹 Italiano:  
  // - È consentito utilizzare questo codice, modificato o non modificato, gratuitamente e senza previa richiesta, alle seguenti condizioni:  
  // - Per le aziende o associazioni che operano nel settore nucleare, l'uso è gratuito e senza restrizioni.  
  // - Per le aziende o associazioni al di fuori del settore nucleare, l'uso è consentito solo in un contesto non profit.  
  //  
  // 🇷🇺 Русский:  
  // - Вам разрешено использовать этот код, измененный или неизмененный, бесплатно и без предварительного запроса на следующих условиях:  
  // - Для компаний или организаций, работающих в ядерной отрасли, использование бесплатно и без ограничений.  
  // - Для компаний или организаций за пределами ядерной отрасли использование разрешено только в некоммерческом контексте.  
  //  
  // 🇨🇳 中文:  
  // - 您可以在以下条件下免费使用此代码，无论是否经过修改，无需事先请求：  
  // - 对于在核能领域运营的企业或组织，可免费且无限制地使用。  
  // - 对于非核能领域的企业或组织，仅允许在非营利背景下使用。  
  //  
  // 🇯🇵 日本語:  
  // - 本コードを修正済みまたは未修正の状態で、以下の条件に基づき、事前の要請なしに無料で使用することが許可されています：  
  // - 原子力分野で活動する企業や団体は、自由かつ無制限に使用できます。  
  // - 原子力分野以外の企業や団体は、非営利目的の場合のみ使用が許可されます。  
  //  
  // 🇰🇷 한국어:  
  // - 이 코드를 수정하거나 수정하지 않은 상태로 다음 조건에 따라 사전 요청 없이 무료로 사용할 수 있습니다:  
  // - 핵 분야에서 활동하는 기업이나 단체는 무료로 제한 없이 사용할 수 있습니다.  
  // - 핵 분야 이외의 기업이나 단체는 비영리 목적으로만 사용이 허용됩니다.  
  //  
  // 🇧🇷 Português:  
  // - Você está autorizado a usar este código, modificado ou não modificado, gratuitamente e sem solicitação prévia, sob as seguintes condições:  
  // - Para empresas ou organizações que operam no setor nuclear, o uso é gratuito e sem restrições.  
  // - Para empresas ou organizações fora do setor nuclear, o uso é permitido apenas em um contexto sem fins lucrativos.  
  //  
  // 🇦🇪 العربية:  
  // - يُسمح لك باستخدام هذا الرمز، سواء كان معدلاً أو غير معدل، مجانًا وبدون طلب مسبق، بموجب الشروط التالية:  
  // - يُسمح للشركات أو الجمعيات العاملة في قطاع الطاقة النووية بالاستخدام مجانًا وبدون أي قيود.  
  // - يُسمح للشركات أو الجمعيات خارج قطاع الطاقة النووية بالاستخدام فقط في إطار غير ربحي.  
   ─────────────────────────────────────────────────────────────────
   ORGANISATION DU FICHIER (dans l'ordre) :
     1. Variables et thèmes ([data-theme=…]) — couleurs, polices
     2. Structure générale (header, nav, main pleine largeur, footer)
     3. Composants (boutons, panneaux, grilles, modales, toasts)
     4. Fond animé (.fx-*) — une ambiance par thème
     5. Blocs par version (v1.1.0 → v1.8.0), chacun sous sa bannière
     6. Responsive mobile (tout en bas)
   RÈGLES MAISON :
     - Les couleurs passent TOUJOURS par les variables (--accent…)
     - La couleur de validation des succès est --ok (verte, par thème)
     - Aucune animation ne doit survivre à data-anim="off" ni à
       prefers-reduced-motion (accessibilité)
   Ce fichier est lié depuis index.html : <link … styles.css?v=1.8.1>
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   1. THÈMES — chaque thème redéfinit les mêmes variables CSS.
   Le thème actif est posé sur <html data-theme="..."> par le JS.
   ═══════════════════════════════════════════════════════════════ */

/* ◆ TERMINAL (défaut) — vert phosphore rétro-futuriste */
:root, [data-theme="terminal"]{
  --bg:#070d07; --bg2:#0c150c; --panel:#101c10; --panel2:#152615;
  --border:#1f3a1f; --text:#b9e8b9; --muted:#6fa06f;
  --accent:#3dff7a; --accent2:#9dffbd; --accent-ink:#04150a;
  --danger:#ff6b6b; --gold:#ffd75e;
  /* v3.9.3 : pile courte — la protection anti-empreinte de Firefox
     sonde chaque police de repli et inondait la console de messages
     « Request for font … blocked » (bénins mais assourdissants). */
  --font-body:'Consolas',monospace;
  --font-display:'Consolas',monospace;
  --radius:4px; --glow:0 0 14px rgba(61,255,122,.25);
}
/* ◆ LCARS — hommage aux interfaces Star Trek */
[data-theme="lcars"]{
  --bg:#000006; --bg2:#06060f; --panel:#0d0d1c; --panel2:#141428;
  --border:#31315a; --text:#e8e0ff; --muted:#9a91c9;
  --accent:#ff9c66; --accent2:#cc99ff; --accent-ink:#1a0d00;
  --danger:#ff5470; --gold:#ffcc66;
  --font-body:'Trebuchet MS','Segoe UI',Arial,sans-serif;
  --font-display:'Trebuchet MS',Arial,sans-serif;
  --radius:18px; --glow:0 0 16px rgba(255,156,102,.28);
}
/* ◆ NOSTROMO — ambre industriel façon Alien */
[data-theme="nostromo"]{
  --bg:#0d0a06; --bg2:#141008; --panel:#1a140a; --panel2:#221a0d;
  --border:#453310; --text:#e8d2a0; --muted:#a08a58;
  --accent:#ffb000; --accent2:#ffd970; --accent-ink:#1c1200;
  --danger:#ff5c33; --gold:#ffe08a;
  --font-body:'Courier New','DejaVu Sans Mono',monospace;
  --font-display:'Courier New',monospace;
  --radius:2px; --glow:0 0 14px rgba(255,176,0,.22);
}
/* ◆ CLAIR — minimal, pour le travail de bureau en journée */
[data-theme="clair"]{
  --bg:#f4f6f9; --bg2:#eceff4; --panel:#ffffff; --panel2:#f1f4f8;
  --border:#d4dbe6; --text:#1d2634; --muted:#5d6b80;
  --accent:#2456c4; --accent2:#5a86e0; --accent-ink:#ffffff;
  --danger:#c43030; --gold:#b07d18;
  --font-body:'Segoe UI',system-ui,Arial,sans-serif;
  --font-display:'Segoe UI Semibold','Segoe UI',sans-serif;
  --radius:8px; --glow:0 2px 10px rgba(36,86,196,.12);
}
/* ◆ SÉPIA — confort de lecture, ambiance papier */
[data-theme="sepia"]{
  --bg:#f0e7d4; --bg2:#e8dcc4; --panel:#f8f1e0; --panel2:#efe5cd;
  --border:#cbb894; --text:#43351f; --muted:#82704e;
  --accent:#8a5a2b; --accent2:#b0803f; --accent-ink:#fdf8ec;
  --danger:#a83a2a; --gold:#8a6a10;
  --font-body:Georgia,'Times New Roman',serif;
  --font-display:Georgia,serif;
  --radius:6px; --glow:0 2px 8px rgba(138,90,43,.15);
}
/* ◆ CONTRASTE — accessibilité maximale (proche WCAG AAA) */
[data-theme="contraste"]{
  --bg:#000000; --bg2:#000000; --panel:#0a0a0a; --panel2:#141414;
  --border:#ffffff; --text:#ffffff; --muted:#d0d0d0;
  --accent:#ffff00; --accent2:#ffff80; --accent-ink:#000000;
  --danger:#ff8080; --gold:#ffff00;
  --font-body:Verdana,Arial,sans-serif;
  --font-display:Verdana,sans-serif;
  --radius:0px; --glow:none;
}
/* ◆ SOMBRE — sobre et élégant, gris graphite et bleu acier */
[data-theme="sombre"]{
  --bg:#101114; --bg2:#15161a; --panel:#1a1c21; --panel2:#22242b;
  --border:#31343d; --text:#d8dade; --muted:#8b8f99;
  --accent:#8aa2e8; --accent2:#b3c3f2; --accent-ink:#0c1020;
  --danger:#e07070; --gold:#d8b95e;
  --font-body:'Segoe UI',system-ui,Arial,sans-serif;
  --font-display:'Segoe UI Semibold','Segoe UI',sans-serif;
  --radius:10px; --glow:0 0 12px rgba(138,162,232,.20);
}
/* ◆ NUCLÉAIRE — hommage à l'atome : bleu Tcherenkov et jaune trisecteur */
[data-theme="nucleaire"]{
  --bg:#02121f; --bg2:#041a2c; --panel:#062338; --panel2:#0a2f4a;
  --border:#10486b; --text:#cfeaff; --muted:#6fa4c4;
  --accent:#2fd9ff; --accent2:#9beaff; --accent-ink:#001420;
  --danger:#ff7a5c; --gold:#ffd75e;
  /* v3.9.3 : pile courte — la protection anti-empreinte de Firefox
     sonde chaque police de repli et inondait la console de messages
     « Request for font … blocked » (bénins mais assourdissants). */
  --font-body:'Consolas',monospace;
  --font-display:'Consolas',monospace;
  --radius:6px; --glow:0 0 18px rgba(47,217,255,.30);
}

/* ═══════════════════════════════════════════════════════════════
   2. BASE & MISE EN PAGE GÉNÉRALE
   ═══════════════════════════════════════════════════════════════ */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
html[data-anim="off"]{scroll-behavior:auto;}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs,15px);
  line-height:1.55; min-height:100vh;
  /* On réserve la place de l'en-tête (haut) et du pied fixe (bas) */
  padding-bottom:64px;
}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
button{font-family:inherit; cursor:pointer;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* Fond animé : pluie discrète de glyphes (désactivable) */
#fx{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;}
.fx-glyph{position:absolute; top:-5%; color:var(--accent); opacity:.10;
  animation:chute linear infinite; user-select:none;}
@keyframes chute{to{transform:translateY(110vh) rotate(25deg);}}
/* v1.2.0 : chaque thème possède sa propre animation de fond */
.fx-glyph.fx-rise{top:auto; bottom:-5%; animation-name:montee;}       /* bulles Tcherenkov */
@keyframes montee{to{transform:translateY(-110vh);}}
.fx-glyph.fx-drift{top:auto; left:-5%; animation-name:derive;}        /* étoiles filantes LCARS */
@keyframes derive{to{transform:translateX(110vw);}}
.fx-glyph.fx-twinkle{animation-name:scintille; top:0;}                /* ciel étoilé / poussières */
@keyframes scintille{0%,100%{opacity:.03;} 50%{opacity:.20;}}
.fx-glyph.fx-leaf{animation-name:feuille;}                            /* feuilles sépia */
@keyframes feuille{to{transform:translateY(110vh) rotate(160deg) translateX(60px);}}
.fx-scan{position:absolute; left:0; right:0; height:2px;              /* balayage radar Nostromo */
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.14; animation:scan linear infinite;}
@keyframes scan{from{top:-2%;} to{top:102%;}}
html[data-anim="off"] .fx-glyph, html[data-anim="off"] .fx-scan{display:none;}
@media (prefers-reduced-motion:reduce){ .fx-glyph,.fx-scan{display:none;} }

/* ═══ EN-TÊTE : titre à gauche / navigation au centre / options à droite ═══ */
header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:12px;
  padding:10px 18px; background:var(--panel);
  border-bottom:2px solid var(--border); box-shadow:var(--glow);
}
html[data-compact="on"] header{padding:4px 12px;}
.brand{display:flex; align-items:center; gap:10px; flex:0 0 auto;}
.brand .logo{
  font-size:1.5em; color:var(--accent);
  animation:pulse 3s ease-in-out infinite;
}
html[data-anim="off"] .brand .logo{animation:none;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.brand h1{font-family:var(--font-display); font-size:1.15em; letter-spacing:2px;}
.brand .version-tag{
  font-size:.68em; color:var(--muted); border:1px solid var(--border);
  border-radius:var(--radius); padding:1px 6px; cursor:pointer;
}
html[data-compact="on"] .brand h1 span.sub{display:none;}
nav.main-nav{flex:1; display:flex; justify-content:center; gap:4px; flex-wrap:wrap;}
nav.main-nav a{
  padding:6px 12px; border-radius:var(--radius); color:var(--text);
  border:1px solid transparent; font-size:.92em; white-space:nowrap;
}
nav.main-nav a:hover{border-color:var(--border); text-decoration:none; background:var(--panel2);}
nav.main-nav a.active{
  background:var(--accent); color:var(--accent-ink); font-weight:bold;
}
html[data-compact="on"] nav.main-nav a{padding:3px 8px; font-size:.85em;}
.header-tools{flex:0 0 auto; display:flex; align-items:center; gap:8px;}
.tool-btn{
  background:var(--panel2); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:6px 10px; font-size:.95em;
}
.tool-btn:hover{border-color:var(--accent); box-shadow:var(--glow);}

/* Menu déroulant des thèmes (avec pastilles d'aperçu) */
.theme-menu{position:relative;}
.theme-list{
  display:none; position:absolute; right:0; top:calc(100% + 6px);
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); min-width:230px; padding:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); z-index:60;
}
.theme-list.open{display:block;}
.theme-item{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:none; color:var(--text);
  padding:8px 10px; border-radius:var(--radius); text-align:left; font-size:.92em;
}
.theme-item:hover{background:var(--panel2);}
.theme-item.current{outline:1px solid var(--accent);}
.swatches{display:flex; gap:3px;}
.swatches i{width:13px; height:13px; border-radius:50%; border:1px solid rgba(128,128,128,.5);}

/* ═══ ZONE DES PAGES (SPA) ═══ */
main{position:relative; z-index:1; width:100%; max-width:none; margin:0; padding:24px 28px 40px;} /* v1.3.0 : tout l'écran est utilisé */
.page{display:none; animation:apparition .25s ease;}
.page.visible{display:block;}
html[data-anim="off"] .page{animation:none;}
@keyframes apparition{from{opacity:0; transform:translateY(6px);} to{opacity:1;}}
.page h2{
  font-family:var(--font-display); color:var(--accent);
  margin-bottom:6px; letter-spacing:1px;
}
.page .subtitle{color:var(--muted); margin-bottom:20px;}

.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px; margin-bottom:18px;
}
.panel h3{color:var(--accent2); margin-bottom:10px; font-family:var(--font-display);}

.btn{
  background:var(--accent); color:var(--accent-ink); border:none;
  border-radius:var(--radius); padding:8px 16px; font-weight:bold; font-size:.95em;
}
.btn:hover{filter:brightness(1.12); box-shadow:var(--glow);}
.btn.ghost{background:var(--panel2); color:var(--text); border:1px solid var(--border); font-weight:normal;}
.btn.ghost:hover{border-color:var(--accent);}

/* ═══ TABLEAU DE BORD (accueil) ═══ */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px;}
.dash-card{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:16px; color:var(--text); display:block; transition:transform .15s, box-shadow .15s;
}
.dash-card:hover{transform:translateY(-3px); box-shadow:var(--glow); text-decoration:none; border-color:var(--accent);}
html[data-anim="off"] .dash-card:hover{transform:none;}
.dash-card .ico{font-size:1.7em; color:var(--accent);}
.dash-card h3{margin:6px 0 4px; color:var(--accent2);}
.dash-card p{font-size:.88em; color:var(--muted);}
.dash-card pre{
  margin-top:10px; font-size:.8em; color:var(--muted);
  background:var(--bg2); padding:8px; border-radius:var(--radius); overflow:hidden;
}

/* ═══ BIBLIOTHÈQUE DE CARACTÈRES ═══ */
.lib-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center;}
.lib-toolbar input[type="search"]{
  flex:1; min-width:220px; padding:9px 12px;
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius); font-family:inherit; font-size:1em;
}
.lib-toolbar input[type="search"]:focus{border-color:var(--accent);}
.cat-filters{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px;}
.cat-chip{
  background:var(--panel2); border:1px solid var(--border); color:var(--text);
  border-radius:999px; padding:5px 12px; font-size:.85em;
}
.cat-chip.active{background:var(--accent); color:var(--accent-ink); font-weight:bold;}
.glyph-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;}
/* v1.3.0 : 5 tailles d'affichage de la bibliothèque */
html[data-libsize="1"] .glyph-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:4px;}
html[data-libsize="2"] .glyph-grid{grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); gap:6px;}
html[data-libsize="3"] .glyph-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px;}
html[data-libsize="4"] .glyph-grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:10px;}
html[data-libsize="5"] .glyph-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px;}
html[data-libsize="1"] .glyph-btn .g{font-size:1.2em;}  html[data-libsize="1"] .glyph-btn .n{display:none;}
html[data-libsize="2"] .glyph-btn .g{font-size:1.5em;}
html[data-libsize="4"] .glyph-btn .g{font-size:2.4em;}
html[data-libsize="5"] .glyph-btn .g{font-size:3.2em;}
.size-chips{display:flex; gap:4px; align-items:center;}
.size-chip{background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-family:inherit; padding:6px 9px; line-height:1;}
.size-chip.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}
.glyph-btn{
  position:relative; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 4px 6px; color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:4px; min-height:66px;
}
.glyph-btn:hover{border-color:var(--accent); box-shadow:var(--glow); transform:scale(1.05);}
html[data-anim="off"] .glyph-btn:hover{transform:none;}
.glyph-btn .g{font-size:1.5em; line-height:1;}
.glyph-btn .n{font-size:.62em; color:var(--muted); text-align:center; line-height:1.15;}
.glyph-btn .fav{
  position:absolute; top:2px; right:4px; font-size:.75em; color:var(--muted);
  background:none; border:none; padding:2px;
}
.glyph-btn .fav.on{color:var(--gold);}
.cat-title{margin:20px 0 8px; color:var(--accent2); font-family:var(--font-display);
  border-bottom:1px dashed var(--border); padding-bottom:4px;}
.lib-side{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.mini-panel{
  flex:1; min-width:240px; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:10px 12px; font-size:.85em;
}
.mini-panel b{color:var(--accent2);}
.mini-panel .row{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px;}
.mini-glyph{
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:4px 9px; font-size:1.05em;
}
.mini-glyph:hover{border-color:var(--accent);}

/* ═══ GÉNÉRATEUR D'ARBORESCENCE ═══ */
.gen-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:820px){.gen-grid{grid-template-columns:1fr;}}
textarea{
  width:100%; min-height:260px; background:var(--bg2); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; font-family:'Consolas','DejaVu Sans Mono',monospace; font-size:.95em;
  resize:vertical; line-height:1.5;
}
textarea:focus{border-color:var(--accent);}
pre.output{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px; min-height:260px; overflow:auto; white-space:pre;
  font-family:'Consolas','DejaVu Sans Mono',monospace; font-size:.95em; line-height:1.5;
}
.gen-options{display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:12px 0;}
.gen-options label{font-size:.9em; display:flex; align-items:center; gap:6px;}
select{
  background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius); padding:6px 8px; font-family:inherit;
}

/* ═══ MODÈLES PRÊTS À L'EMPLOI ═══ */
.tpl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
.tpl-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px;}
.tpl-card h3{color:var(--accent2); margin-bottom:6px;}
.tpl-card pre{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px; font-size:.78em; max-height:220px; overflow:auto; margin:8px 0; white-space:pre;
}
.tpl-card .actions{display:flex; gap:8px;}

/* ═══ SUCCÈS / GAMIFICATION ═══ */
.xp-bar{background:var(--bg2); border:1px solid var(--border); border-radius:999px;
  height:18px; overflow:hidden; margin:8px 0 4px;}
.xp-bar .fill{height:100%; background:var(--accent); transition:width .5s ease;}
.ach-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px;}
.ach-card{
  display:flex; gap:12px; align-items:center;
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px;
}
.ach-card.locked{opacity:.45; filter:grayscale(.8);}
.ach-card .ico{font-size:1.8em;}
.ach-card h4{color:var(--accent2); font-size:.95em;}
.ach-card p{font-size:.8em; color:var(--muted);}
.ach-card .xp{margin-left:auto; color:var(--gold); font-size:.8em; white-space:nowrap;}

/* ═══ CHANGELOG (frise verticale avec marqueurs ◆) ═══ */
.changelog{font-family:'Consolas','DejaVu Sans Mono',monospace; position:relative; padding-left:34px;}
.changelog::before{ /* la ligne │ continue de la frise */
  content:""; position:absolute; left:22px; top:24px; bottom:24px;
  border-left:1px solid var(--accent); opacity:.5;
}
.cl-entry{position:relative;}
.cl-mark{
  position:absolute; left:-17px; top:0; color:var(--accent);
  background:var(--panel); line-height:1.4;
}
.cl-body{padding-bottom:18px;}
.cl-body .v{color:var(--accent); font-weight:bold;}
.cl-body .d{color:var(--muted); font-size:.85em; margin-left:8px;}
.cl-body ul{list-style:none; margin-top:4px;}
.cl-body li{font-size:.9em; padding:1px 0;}
.badge{font-size:.75em; padding:1px 7px; border-radius:999px; border:1px solid var(--border); margin-right:6px;}
.badge.new{color:var(--accent); border-color:var(--accent);}
.badge.fix{color:var(--danger); border-color:var(--danger);}
.badge.imp{color:var(--gold); border-color:var(--gold);}

/* ═══ PAGES TEXTE (mentions, à propos) ═══ */
.legal h3{color:var(--accent); margin:22px 0 8px; font-family:var(--font-display);}
.legal h3 .num{color:var(--muted); margin-right:8px;}
.legal p, .legal li{font-size:.94em; margin-bottom:6px;}
.legal ul{margin-left:22px;}
.notice{
  border-left:3px solid var(--accent); background:var(--panel2);
  padding:10px 14px; border-radius:var(--radius); margin:10px 0; font-size:.9em;
}

/* ═══ PIED DE PAGE FIXE ═══ */
footer{
  position:fixed; bottom:0; left:0; right:0; z-index:50;
  background:var(--panel); border-top:2px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:8px 18px;
  font-size:.82em; box-shadow:0 -4px 14px rgba(0,0,0,.3);
}
footer .credit{color:var(--muted); white-space:nowrap;}
footer .credit b{color:var(--accent2);}
footer nav{flex:1; display:flex; justify-content:center; gap:4px 16px; flex-wrap:wrap;}
footer a{color:var(--text);}
footer a:hover{color:var(--accent);}
footer .sep{color:var(--border); user-select:none;}

/* ═══ MODALES (paramètres, plan du site) ═══ */
.modal-back{
  display:none; position:fixed; inset:0; z-index:90;
  background:rgba(0,0,0,.6); align-items:center; justify-content:center; padding:16px;
}
.modal-back.open{display:flex;}
.modal{
  background:var(--panel); border:1px solid var(--accent);
  border-radius:var(--radius); max-width:520px; width:100%;
  max-height:85vh; overflow:auto; padding:20px; box-shadow:var(--glow);
}
.modal h3{color:var(--accent); margin-bottom:14px; font-family:var(--font-display);}
.set-row{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:10px 0; border-bottom:1px dashed var(--border); font-size:.92em;
}
.set-row:last-of-type{border-bottom:none;}
.modal .close-x{float:right; background:none; border:none; color:var(--muted); font-size:1.2em;}
.modal .close-x:hover{color:var(--danger);}

/* Interrupteur (checkbox stylisée) */
.switch{position:relative; width:44px; height:22px; flex:0 0 auto;}
.switch input{opacity:0; width:0; height:0;}
.switch .track{
  position:absolute; inset:0; background:var(--bg2); border:1px solid var(--border);
  border-radius:999px; transition:.2s;
}
.switch .track::before{
  content:""; position:absolute; left:2px; top:2px; width:16px; height:16px;
  background:var(--muted); border-radius:50%; transition:.2s;
}
.switch input:checked + .track{background:var(--accent); border-color:var(--accent);}
.switch input:checked + .track::before{transform:translateX(21px); background:var(--accent-ink);}

/* ═══ TOASTS (notifications de copie et de succès) ═══ */
#toasts{position:fixed; bottom:74px; right:16px; z-index:120; display:flex; flex-direction:column; gap:8px;}
.toast{
  background:var(--panel); border:1px solid var(--accent); border-radius:var(--radius);
  padding:10px 16px; font-size:.9em; box-shadow:var(--glow);
  animation:toast-in .25s ease;
}
.toast.ach{border-color:var(--gold);}
.toast.ach b{color:var(--gold);}
html[data-anim="off"] .toast{animation:none;}
@keyframes toast-in{from{opacity:0; transform:translateX(30px);} to{opacity:1;}}

/* v1.2.0 : couleur de VALIDATION (succès débloqués) adaptée à chaque
   thème — toujours dans les verts, aucun de nos thèmes n'étant rouge */
:root{--ok:#2f9e44;}
[data-theme="terminal"]{--ok:#3dff7a;}
[data-theme="lcars"]{--ok:#66e2a0;}
[data-theme="nostromo"]{--ok:#9acd32;}
[data-theme="clair"]{--ok:#2f9e44;}
[data-theme="sombre"]{--ok:#69c97e;}
[data-theme="nucleaire"]{--ok:#4cf2c3;}
[data-theme="sepia"]{--ok:#5c8a3a;}
[data-theme="contraste"]{--ok:#00ff00;}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v1.1.0
   ═══════════════════════════════════════════════════════════════ */

/* ── Ambiance amplifiée (option, désactivée par défaut) ──────────
   Halos animés sous les boutons et zones colorées, en-tête et pied
   balayés par un dégradé. Ne s'active que si les animations sont ON. */
/* v1.3.0 : l'option « Ambiance amplifiée » disparaît — les animations
   riches sont désormais la norme dès que les animations sont actives */
html[data-anim="on"] nav.main-nav a.active,
html[data-anim="on"] .cat-chip.active{
  animation:halo 2.6s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{box-shadow:0 0 3px var(--accent);}
  50%    {box-shadow:0 0 16px var(--accent);}
}
html[data-anim="on"] header,
html[data-anim="on"] footer{
  background:linear-gradient(110deg,var(--panel) 20%,var(--panel2) 50%,var(--panel) 80%);
  background-size:250% 100%;
  animation:balayage 9s linear infinite;
}
@keyframes balayage{from{background-position:0% 0;} to{background-position:250% 0;}}
@media (prefers-reduced-motion:reduce){
  header, footer, .xp-bar .fill, .ach-mini .bar i, .pill-bar i{animation:none !important;}
}

/* ── Pilule XP dans l'en-tête ── */
.xp-pill{display:flex; align-items:center; gap:7px;}
.xp-pill .pill-bar{
  width:52px; height:8px; background:var(--bg2);
  border:1px solid var(--border); border-radius:999px; overflow:hidden; display:inline-block;
}
.xp-pill .pill-bar i{display:block; height:100%; background:var(--accent); transition:width .5s;}
@media(max-width:760px){ .xp-pill .pill-bar{display:none;} }

/* ── Mon Panier (pop-up bas gauche) ── */
.basket{
  position:fixed; left:16px; bottom:74px; z-index:80; width:270px;
  background:var(--panel); border:1px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--glow); font-size:.9em;
}
.basket-head{
  width:100%; background:none; border:none; color:var(--accent2);
  padding:9px 12px; text-align:left; font-weight:bold; font-family:inherit;
  display:flex; align-items:center; gap:6px;
}
.basket-head .bk-caret{margin-left:auto; color:var(--muted); transition:transform .2s;}
.basket.collapsed .basket-body{display:none;}
.basket.collapsed .bk-caret{transform:rotate(180deg);}
.basket-body{padding:0 12px 12px;}
.bk-items{display:flex; flex-wrap:wrap; gap:5px; max-height:150px; overflow:auto; margin-bottom:10px;}
.bk-chip{
  display:inline-flex; align-items:center; background:var(--panel2);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.bk-chip button{background:none; border:none; color:var(--text); padding:4px 6px; font-size:1em;}
.bk-chip button:hover{background:var(--bg2); color:var(--accent);}
.bk-chip .bk-x{color:var(--muted); font-size:.75em;}
.bk-chip .bk-dup{color:var(--muted); font-size:.8em;}
.bk-actions{display:flex; gap:8px;}
.bk-actions .btn{flex:1; padding:6px 8px; font-size:.85em;}
.bk-empty{color:var(--muted); font-size:.85em; padding:4px 0 10px;}
@media(max-width:760px){ .basket{left:8px; bottom:96px; width:225px;} }

/* ── Page d'accueil restructurée ── */
.home-sep{
  margin:26px 0 12px; color:var(--accent); font-family:var(--font-display);
  border-bottom:1px dashed var(--border); padding-bottom:5px; letter-spacing:1px;
}
.fn-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px;}
.fn-card{
  position:relative; background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:18px 18px 14px; color:var(--text);
  display:block; transition:transform .15s, box-shadow .15s;
}
.fn-card:hover{transform:translateY(-3px); box-shadow:var(--glow); border-color:var(--accent); text-decoration:none;}
html[data-anim="off"] .fn-card:hover{transform:none;}
.fn-card .fn-num{
  position:absolute; top:12px; right:14px; font-size:1.6em; color:var(--accent); opacity:.85;
}
.fn-card .ico{font-size:1.9em; color:var(--accent);}
.fn-card h3{margin:8px 0 4px; color:var(--accent2);}
.fn-card p{font-size:.88em; color:var(--muted);}
.fn-card pre{
  margin-top:10px; font-size:.8em; color:var(--muted);
  background:var(--bg2); padding:8px; border-radius:var(--radius); overflow:hidden;
}
.side-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
.side-card{
  display:flex; gap:12px; align-items:center; background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px;
  color:var(--text); width:100%; text-align:left; font-size:1em;
}
.side-card:hover{border-color:var(--accent); text-decoration:none; box-shadow:var(--glow);}
.side-card .ico{font-size:1.4em; color:var(--accent);}
.admin-row{display:flex; gap:8px; flex-wrap:wrap;}
.admin-link{
  background:var(--panel2); border:1px solid var(--border); border-radius:999px;
  padding:6px 14px; color:var(--text); font-size:.88em;
}
.admin-link:hover{border-color:var(--accent); text-decoration:none;}
.folio-panel{
  background:var(--panel); border:1px solid var(--gold); border-radius:var(--radius);
  padding:18px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.folio-panel .ico{font-size:2.2em;}
.folio-panel p{flex:1; min-width:220px; font-size:.92em; color:var(--muted);}

/* ── Bibliothèque : compatibilité ── */
.compat-note{
  display:none; font-size:.82em; color:var(--muted);
  border-left:3px solid var(--gold); background:var(--panel2);
  padding:6px 10px; border-radius:var(--radius); margin-bottom:12px;
}
.compat-note.visible{display:block;}

/* ── Succès : sections, jauges, temporaires, trophées ── */
.ach-sep{
  margin:26px 0 10px; color:var(--accent); font-family:var(--font-display);
  border-bottom:1px dashed var(--border); padding-bottom:5px; letter-spacing:1px;
}
.ach-sep small{color:var(--muted); font-weight:normal; letter-spacing:0; margin-left:8px;}
.std-gauge{margin-bottom:14px;}
.countdown{
  font-family:'Consolas','DejaVu Sans Mono',monospace;
  color:var(--gold); white-space:nowrap;
}
.temp-card{border-color:var(--gold);}
.temp-card .prog{font-size:.8em; color:var(--accent2);}
.trophy-card{border:1px solid var(--gold); background:var(--panel);}
.trophy-card .ico{filter:drop-shadow(0 0 6px var(--gold));}
.trophy-card h4{color:var(--gold);}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v1.2.0
   ═══════════════════════════════════════════════════════════════ */

/* ── Générateurs (onglets + zones interactives) ── */
.gen-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}
.gen-tab{
  background:var(--panel2); border:1px solid var(--border); border-radius:999px;
  padding:7px 15px; color:var(--text); font-family:inherit; font-size:.92em;
}
.gen-tab.active{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:bold;}
.gen-hint{font-size:.85em; color:var(--muted); margin-bottom:10px;
  border-left:3px solid var(--accent); padding:5px 10px; background:var(--panel2); border-radius:var(--radius);}
.task-line{display:flex; align-items:flex-start; gap:8px; padding:3px 0; font-family:inherit;}
.task-line button{
  background:none; border:none; color:var(--accent); font-size:1.15em;
  line-height:1.2; padding:0; font-family:inherit;
}
.task-line.done span{color:var(--muted); text-decoration:line-through;}
.dyn-node button.dyn-toggle{
  background:none; border:none; color:var(--accent); font-family:inherit;
  font-size:1em; padding:0 4px 0 0;
}
.dyn-children.folded{display:none;}
.out-interactive{
  background:var(--bg2); border:1px dashed var(--border); border-radius:var(--radius);
  padding:12px 14px; min-height:180px; font-family:'Consolas','DejaVu Sans Mono',monospace;
  white-space:pre-wrap; overflow:auto;
}

/* ── Succès : indicateur VERT de déblocage (adapté au thème) ── */
#achGrid .ach-card:not(.locked),
#seasonGrid .ach-card:not(.locked){
  border-color:var(--ok);
  box-shadow:0 0 8px color-mix(in srgb, var(--ok) 45%, transparent);
}
#achGrid .ach-card:not(.locked) .xp,
#seasonGrid .ach-card:not(.locked) .xp{color:var(--ok); font-weight:bold;}
.ach-card.fresh{animation:eclatOk 1.2s ease-out 3;}
@keyframes eclatOk{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent);}
  70%{box-shadow:0 0 0 14px transparent;}
  100%{box-shadow:0 0 8px color-mix(in srgb, var(--ok) 45%, transparent);}
}

/* ── Succès : mini-jauge de progression par succès standard ── */
.ach-mini{margin-top:6px;}
.ach-mini .bar{
  height:7px; background:var(--bg2); border:1px solid var(--border);
  border-radius:999px; overflow:hidden;
}
.ach-mini .bar i{display:block; height:100%; transition:width .4s;}
.ach-mini small{color:var(--muted); font-size:.78em;}

/* ── Ambiance amplifiée : jauges dynamiques et colorées ── */
html[data-anim="on"] .xp-bar .fill,
html[data-anim="on"] .ach-mini .bar i,
html[data-anim="on"] .xp-pill .pill-bar i{
  background:linear-gradient(90deg,#ff5e5e,#ffb02e,#ffe600,#42d97c,#2fd9ff,#a06bff,#ff5e5e);
  background-size:300% 100%;
  animation:arcenciel 4s linear infinite;
}
@keyframes arcenciel{from{background-position:0% 0;} to{background-position:300% 0;}}

/* ── Trophée « Shiny » : reflets irisés et scintillement ── */
.trophy-card.shiny{
  border:2px solid var(--gold);
  background:linear-gradient(120deg,var(--panel) 40%,color-mix(in srgb,var(--gold) 22%,var(--panel)) 50%,var(--panel) 60%);
  background-size:250% 100%;
  animation:reflet 3.2s linear infinite;
}
.trophy-card.shiny .ico{animation:brille 1.6s ease-in-out infinite;}
@keyframes reflet{from{background-position:120% 0;} to{background-position:-130% 0;}}
@keyframes brille{0%,100%{filter:drop-shadow(0 0 4px var(--gold));}
  50%{filter:drop-shadow(0 0 14px var(--gold)) brightness(1.4);}}
html[data-anim="off"] .trophy-card.shiny,
html[data-anim="off"] .trophy-card.shiny .ico{animation:none;}
.trophy-card.upcoming{opacity:.45; filter:grayscale(.7); border-style:dashed;}
.sec-intro{font-size:.88em; color:var(--muted); margin:-2px 0 12px;}

/* ── Paramètres : drapeaux de langue + police ── */
.flag-grid{display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; max-width:330px;}
.flag-btn{
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  padding:6px 10px; color:var(--text); font-family:inherit; font-size:.88em;
  display:flex; align-items:center; gap:6px;
}
.flag-btn .fl{font-size:1.25em; line-height:1;}
.flag-btn.active{border-color:var(--accent); background:var(--accent); color:var(--accent-ink); font-weight:bold;}
.font-preview{
  margin-top:6px; text-align:right; color:var(--muted); font-size:1.05em;
  border:1px dashed var(--border); border-radius:var(--radius); padding:6px 10px;
}

/* ── Mentions légales façon générique Star Wars ── */
#crawlOverlay{
  position:fixed; inset:0; z-index:200; display:none;
  background:#000 radial-gradient(ellipse at 50% 120%, #101024 0%, #000 70%);
  overflow:hidden; perspective:400px;
}
#crawlOverlay.open{display:block;}
.crawl-stars{position:absolute; inset:0;}
.crawl-stars i{position:absolute; width:2px; height:2px; background:#fff; border-radius:50%; opacity:.8;}
.crawl-plane{
  position:absolute; inset:0; display:flex; justify-content:center;
  transform:rotateX(24deg); transform-origin:50% 100%;
}
.crawl-text{
  width:min(620px,86vw); color:#ffd75e; font-family:Arial,Helvetica,sans-serif;
  font-weight:bold; text-align:justify; font-size:1.5em; line-height:1.7;
  animation:crawl var(--crawl-dur,70s) linear forwards;
}
.crawl-text h2{color:#ffd75e; text-align:center; font-size:1.6em; margin-bottom:1em;}
.crawl-text h3{color:#ffd75e; text-align:center; margin:1.2em 0 .5em;}
@keyframes crawl{from{transform:translateY(100vh);} to{transform:translateY(-230%);}}
.crawl-bar{
  position:absolute; top:12px; right:14px; z-index:2; display:flex; gap:8px; align-items:center;
  background:rgba(0,0,0,.55); padding:8px 12px; border:1px solid #ffd75e; border-radius:8px;
  color:#ffd75e; font-size:.9em;
}
.crawl-bar select{background:#000; color:#ffd75e; border:1px solid #ffd75e; border-radius:6px; padding:4px;}
.crawl-bar button{background:none; border:1px solid #ffd75e; color:#ffd75e; border-radius:6px; padding:4px 10px;}

/* ── Accueil : cartes « Bientôt ici » ── */
.fn-card.soon{opacity:.5; filter:grayscale(.65); border-style:dashed; cursor:default;}
.fn-card.soon:hover{transform:none; box-shadow:none; border-color:var(--border);}
.fn-card.soon .soon-tag{
  display:inline-block; margin-top:8px; font-size:.78em; color:var(--gold);
  border:1px dashed var(--gold); border-radius:999px; padding:2px 10px;
}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v1.3.0
   ═══════════════════════════════════════════════════════════════ */

/* ── Fonds animés MASSIFS par thème ──────────────────────────────
   Colonnes de code façon Matrix, atomes en orbite, filigranes
   géants… volontairement imposants mais sous le contenu (z-index 0)
   et suffisamment transparents pour rester lisibles. */
.fx-col{ /* colonne de code verticale (Terminal) */
  position:absolute; top:-110%; color:var(--accent); opacity:.16;
  writing-mode:vertical-rl; text-orientation:upright; letter-spacing:2px;
  font-family:'Consolas','DejaVu Sans Mono',monospace; white-space:nowrap;
  animation:chute linear infinite; user-select:none;
}
.fx-line{ /* ligne de code horizontale qui dérive (Terminal) */
  position:absolute; left:-60%; color:var(--accent); opacity:.13;
  font-family:'Consolas','DejaVu Sans Mono',monospace; white-space:nowrap;
  animation:derive linear infinite; user-select:none;
}
.fx-watermark{ /* symbole géant en filigrane, pulse lentement */
  position:absolute; color:var(--accent); opacity:.07; user-select:none;
  animation:pulseWm 9s ease-in-out infinite;
}
@keyframes pulseWm{0%,100%{transform:scale(1) rotate(0deg); opacity:.05;}
  50%{transform:scale(1.12) rotate(6deg); opacity:.10;}}
.fx-orbit{ /* atome : noyau + électron en orbite (Nucléaire) */
  position:absolute; user-select:none;
}
.fx-orbit .noyau{color:var(--accent); opacity:.28;}
.fx-orbit .electron{
  position:absolute; left:50%; top:50%; width:1em; height:1em; margin:-0.5em;
  animation:orbite linear infinite;
}
.fx-orbit .electron i{
  position:absolute; left:50%; top:-1.6em; width:.45em; height:.45em;
  border-radius:50%; background:var(--gold); opacity:.5;
  box-shadow:0 0 8px var(--gold);
}
@keyframes orbite{to{transform:rotate(360deg);}}
.fx-bar{ /* barre colorée qui balaie l'écran (LCARS) */
  position:absolute; left:-40%; height:10px; border-radius:999px;
  background:var(--accent); opacity:.14; animation:derive linear infinite;
}
.fx-glyph.big{opacity:.15;}
html[data-anim="off"] .fx-col, html[data-anim="off"] .fx-line,
html[data-anim="off"] .fx-watermark, html[data-anim="off"] .fx-orbit,
html[data-anim="off"] .fx-bar{display:none;}
@media (prefers-reduced-motion:reduce){
  .fx-col,.fx-line,.fx-watermark,.fx-orbit,.fx-bar{display:none;}
}

/* ── Navigation : menu déroulant Outils ── */
.nav-menu{position:relative; display:inline-block;}
.nav-menu > button{
  background:none; border:none; color:var(--text); font-family:inherit;
  font-size:1em; padding:6px 10px; border-radius:var(--radius);
}
.nav-menu > button:hover, .nav-menu > button.active{color:var(--accent);}
.nav-menu > button.active{background:var(--panel2); font-weight:bold;}
.nav-list{
  display:none; position:absolute; top:100%; left:0; z-index:60; min-width:230px;
  background:var(--panel); border:1px solid var(--accent); border-radius:var(--radius);
  box-shadow:var(--glow); padding:6px;
}
.nav-list.open{display:block;}
.nav-list a{
  display:block; padding:8px 12px; color:var(--text); border-radius:var(--radius);
  font-size:.95em;
}
.nav-list a:hover{background:var(--panel2); color:var(--accent); text-decoration:none;}

/* ── Succès temporaires : chronomètre géant + double jauge ── */
.temp-card{display:block;}
.temp-clock{
  font-family:'Consolas','DejaVu Sans Mono',monospace;
  font-size:1.9em; font-weight:bold; letter-spacing:2px;
  color:var(--gold); text-shadow:0 0 12px color-mix(in srgb, var(--gold) 55%, transparent);
  margin:8px 0 4px; text-align:center;
}
html[data-anim="on"] .temp-clock{animation:battement 1s steps(2) infinite;}
@keyframes battement{50%{opacity:.75;}}
.temp-gauge{margin:6px 0;}
.temp-gauge .bar{height:12px; background:var(--bg2); border:1px solid var(--border);
  border-radius:999px; overflow:hidden;}
.temp-gauge .bar i{display:block; height:100%; transition:width .5s, background .5s;}
.temp-gauge small{color:var(--muted); font-size:.8em;}

/* ── Accueil : section Statistics ── */
.stats-panel{background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;}
.stats-views{display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap;}
.stats-msg{
  font-size:1.02em; color:var(--accent2); font-family:var(--font-display);
  border-left:3px solid var(--gold); background:var(--panel2);
  padding:8px 12px; border-radius:var(--radius); margin-bottom:14px;
}
.st-bars .row{display:flex; align-items:center; gap:10px; margin:7px 0;}
.st-bars .lbl{width:170px; font-size:.88em; color:var(--muted);}
.st-bars .bar{flex:1; height:14px; background:var(--bg2); border:1px solid var(--border);
  border-radius:999px; overflow:hidden;}
.st-bars .bar i{display:block; height:100%; transition:width .5s;}
.st-bars .val{width:64px; text-align:right; font-family:'Consolas',monospace; color:var(--accent2);}
.st-donut{display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.st-donut .legend div{margin:4px 0; font-size:.88em;}
.st-donut .legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px;}
.st-gauges{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px;}
.st-gauge{text-align:center;}
.st-gauge .ring{
  width:96px; height:96px; border-radius:50%; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Consolas',monospace; color:var(--text); font-size:.95em;
}
.st-gauge .ring b{background:var(--panel); border-radius:50%; width:72px; height:72px;
  display:flex; align-items:center; justify-content:center;}
.st-gauge small{color:var(--muted); font-size:.8em;}
.st-radar{display:flex; justify-content:center;}

/* Drapeaux SVG (couleurs garanties sur tous les systèmes) */
.flag-btn .fl svg{width:21px; height:14px; border-radius:2px; display:block;
  box-shadow:0 0 0 1px var(--border);}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v1.4.0
   ═══════════════════════════════════════════════════════════════ */

/* ── Tâches : troisième état ☒ Annulé ── */
.task-line.cancel span{color:var(--muted); text-decoration:line-through; opacity:.65;}
.task-line.cancel button{color:var(--danger);}
.task-line.done button{color:var(--ok);}

/* ── Bannière d'accueil « Découvrez la personnalisation » ── */
.welcome-banner{
  position:relative; overflow:hidden; margin-bottom:20px;
  border:2px solid transparent; border-radius:var(--radius); padding:18px 20px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(120deg,#ff5e5e,#ffb02e,#42d97c,#2fd9ff,#a06bff,#ff5e5e) border-box;
}
html[data-anim="on"] .welcome-banner{
  background-size:100% 100%, 400% 400%;
  animation:cadreArc 6s linear infinite;
}
@keyframes cadreArc{from{background-position:0 0, 0% 50%;} to{background-position:0 0, 400% 50%;}}
.welcome-banner h3{
  font-family:var(--font-display); font-size:1.25em; margin-bottom:6px;
  background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent));
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--accent);
}
html[data-anim="on"] .welcome-banner h3{animation:texteArc 3.5s linear infinite;}
@keyframes texteArc{to{background-position:200% 0;}}
.welcome-banner p{color:var(--muted); font-size:.92em; margin-bottom:12px;}
.welcome-banner .wb-actions{display:flex; gap:10px; flex-wrap:wrap;}
.welcome-banner .spark{position:absolute; pointer-events:none; opacity:.5; color:var(--gold);}
html[data-anim="on"] .welcome-banner .spark{animation:scintille 2.4s ease-in-out infinite;}

/* ── Classement (avant-première promotionnelle) ── */
.rank-panel{
  position:relative; overflow:hidden; margin-top:10px;
  border:2px solid var(--gold); border-radius:var(--radius);
  padding:20px; background:linear-gradient(160deg,var(--panel) 55%, color-mix(in srgb, var(--gold) 14%, var(--panel)));
}
.rank-ribbon{
  position:absolute; top:16px; right:-42px; transform:rotate(38deg);
  background:var(--gold); color:#221a00; font-weight:bold; font-size:.8em;
  padding:5px 48px; letter-spacing:1px; box-shadow:0 0 12px color-mix(in srgb, var(--gold) 60%, transparent);
}
.rank-podium{display:flex; align-items:flex-end; gap:10px; justify-content:center; margin:18px 0 8px;}
.rank-step{
  width:96px; text-align:center; border-radius:var(--radius) var(--radius) 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, var(--panel2)), var(--panel2));
  border:1px solid var(--border); border-bottom:3px solid var(--gold);
  padding-top:8px; color:var(--muted);
}
.rank-step .medal{font-size:1.7em; display:block;}
.rank-step .pseudo{filter:blur(3px); user-select:none; font-size:.85em;}
.rank-step .pts{font-family:'Consolas',monospace; color:var(--accent2); font-size:.8em;}
.rank-badges{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:16px 0;}
.rank-badge{
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  font-size:1.7em; color:var(--accent-ink);
  background:conic-gradient(from 210deg, var(--gold), #fff2c4, var(--gold), #b8860b, var(--gold));
  clip-path:polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  position:relative;
}
html[data-anim="on"] .rank-badge{animation:brille 2.8s ease-in-out infinite;}
.rank-badge.b2{background:conic-gradient(from 210deg, #cfd6e4, #ffffff, #cfd6e4, #8a93a5, #cfd6e4);}
.rank-badge.b3{background:conic-gradient(from 210deg, #e8a06b, #ffd9b8, #e8a06b, #9c5a24, #e8a06b);}
.rank-badge.b4{background:conic-gradient(from 210deg, #7ae2ff, #e8fbff, #7ae2ff, #1f7f9c, #7ae2ff);}
.rank-cta{text-align:center; margin-top:8px;}

/* ── Constellation cachée (s'illumine au survol) ── */
#constel{
  position:fixed; right:26px; top:110px; z-index:0; opacity:.08;
  transition:opacity .6s;
}
#constel:hover{opacity:.85;}
#constel polyline{
  stroke-dasharray:300; stroke-dashoffset:300; transition:stroke-dashoffset 1.4s ease;
}
#constel:hover polyline{stroke-dashoffset:0;}
html[data-anim="off"] #constel{display:none;}
@media(max-width:900px){ #constel{display:none;} }

/* ── Confettis du code Konami ── */
#confetti{position:fixed; inset:0; z-index:300; pointer-events:none; overflow:hidden;}
#confetti span{position:absolute; top:-6%; font-size:1.2em; animation:confChute linear forwards;}
@keyframes confChute{to{transform:translateY(115vh) rotate(540deg); opacity:.2;}}

/* ── Curseur baguette 🥖 (100 clics en 20 s) ── */
body.baguette, body.baguette *{
  cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34"><text y="26" font-size="26">🥖</text></svg>') 6 6, auto !important;
}

/* ── Page 404 jouable ── */
.nf-stage{
  position:relative; height:260px; margin-top:16px; overflow:hidden;
  background:var(--bg2); border:1px dashed var(--border); border-radius:var(--radius);
  font-family:'Consolas','DejaVu Sans Mono',monospace;
}
.nf-ground{position:absolute; left:0; right:0; bottom:14px; color:var(--muted);
  white-space:nowrap; overflow:hidden; letter-spacing:0;}
#nfHero{
  position:absolute; bottom:26px; font-size:1.9em; color:var(--accent);
  transition:left .08s linear; text-shadow:0 0 10px var(--accent);
}
#nfHero.jump{animation:nfSaut .55s ease;}
@keyframes nfSaut{50%{transform:translateY(-62px);}}
.nf-star{position:absolute; color:var(--gold); font-size:1.25em; text-shadow:0 0 8px var(--gold);}
.nf-score{position:absolute; top:8px; right:12px; color:var(--accent2);
  font-family:'Consolas',monospace;}

/* ── v1.5.0 : curseurs personnalisés ── */
body[data-cursor="dia"], body[data-cursor="dia"] *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><text y="21" font-size="21" fill="%232fd9ff">◆</text></svg>') 8 8, auto !important;}
body[data-cursor="atom"], body[data-cursor="atom"] *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><text y="22" font-size="22">⚛</text></svg>') 9 9, auto !important;}
body[data-cursor="star"], body[data-cursor="star"] *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"><text y="21" font-size="21" fill="%23ffd75e">★</text></svg>') 8 8, auto !important;}
body[data-cursor="pen"], body[data-cursor="pen"] *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28"><text y="22" font-size="22">✒</text></svg>') 2 24, auto !important;}
body[data-cursor="cross"], body[data-cursor="cross"] *{cursor:crosshair !important;}
body[data-cursor="bag"], body[data-cursor="bag"] *{cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><text y="23" font-size="23">🥖</text></svg>') 6 6, auto !important;}
/* le mode baguette éphémère (easter egg) garde la priorité visuelle */

/* ── v1.7.0 : zone documentation sous chaque outil ── */
.tool-doc{
  margin-top:34px; border-top:1px dashed var(--border); padding-top:20px;
}
.tool-doc h3{color:var(--accent); font-family:var(--font-display); margin:16px 0 6px;}
.tool-doc h3:first-child{margin-top:0;}
.tool-doc p, .tool-doc li{color:var(--muted); font-size:.92em; line-height:1.6;}
.tool-doc ul{list-style:none; padding-left:4px;}
.tool-doc ul li::before{content:"◆ "; color:var(--accent);}
.tool-doc pre{
  background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; font-size:.85em; color:var(--text); overflow:auto; margin:8px 0;
}
.task-line.head span{color:var(--accent2); font-weight:bold;}
.task-line .tsub{opacity:.92;}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v1.8.0
   ═══════════════════════════════════════════════════════════════ */

/* ── Classement : mise en page revue, plus grande et plus aérée ── */
.rank-panel{padding:30px 26px 26px;}
.rank-ribbon{
  position:static; transform:none; display:block; width:max-content;
  margin:0 auto 24px; border-radius:999px; font-size:.95em;
  padding:8px 26px; letter-spacing:2px;
}
.rank-podium{margin:26px 0 20px; gap:18px;}
.rank-step{
  width:118px; display:flex; flex-direction:column; justify-content:flex-end;
  align-items:center; gap:5px; padding:10px 6px 12px;
}
.rank-step .medal{font-size:2em;}
.rank-step .pseudo{filter:blur(3px); font-size:.9em; line-height:1.2;}
.rank-step .pts{font-size:.82em;}
.rank-badges{margin:24px 0;}
.rank-table{
  width:100%; max-width:560px; margin:6px auto 20px; border-collapse:collapse; font-size:.9em;
}
.rank-table th{
  color:var(--muted); font-weight:normal; text-align:left; font-size:.82em;
  border-bottom:1px solid var(--border); padding:6px 10px;
}
.rank-table td{padding:8px 10px; border-bottom:1px dashed var(--border);}
.rank-table .pseudo{filter:blur(3px); user-select:none;}
.rank-table .xpbar{
  display:inline-block; width:90px; height:8px; vertical-align:middle;
  background:var(--bg2); border:1px solid var(--border); border-radius:999px; overflow:hidden;
}
.rank-table .xpbar i{display:block; height:100%; background:var(--gold);}
.rank-cta{margin-top:18px;}

/* ── Menu de langue dans l'en-tête ── */
#langMenu .fl svg{width:20px; height:13px; border-radius:2px; vertical-align:-2px;
  box-shadow:0 0 0 1px var(--border);}
#langList a{display:flex; align-items:center; gap:8px;}

/* ── Panneau latéral escamotable ── */
#sideBtn{font-size:1.15em;}
#sidePanel{
  position:fixed; left:0; top:0; bottom:0; z-index:120; width:264px;
  background:var(--panel); border-right:1px solid var(--accent);
  box-shadow:var(--glow); transform:translateX(-102%);
  transition:transform .3s ease; overflow-y:auto; padding:14px 16px 20px;
}
html[data-side="open"] #sidePanel{transform:translateX(0);}
@media (prefers-reduced-motion:reduce){ #sidePanel{transition:none;} }
#sidePanel h3{
  color:var(--accent); font-family:var(--font-display); font-size:.95em;
  margin:16px 0 8px; border-bottom:1px dashed var(--border); padding-bottom:4px;
}
#sidePanel .sp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
#sidePanel .sp-chips{display:flex; flex-wrap:wrap; gap:5px;}
#sidePanel .sp-chips button{
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); font-size:1.05em; padding:5px 9px;
}
#sidePanel .sp-chips button:hover{border-color:var(--accent); color:var(--accent);}
#sidePanel a{display:block; padding:6px 4px; color:var(--text); font-size:.92em; border-radius:var(--radius);}
#sidePanel a:hover{background:var(--panel2); color:var(--accent); text-decoration:none;}
#sidePanel .sp-empty{color:var(--muted); font-size:.85em;}

/* ── Bibliothèque : gestionnaire de catégories + mode simplifié ── */
#catManager{
  display:none; background:var(--panel); border:1px solid var(--accent);
  border-radius:var(--radius); padding:12px 14px; margin-bottom:14px;
}
#catManager.open{display:block;}
#catManager .cm-row{
  display:flex; align-items:center; gap:8px; padding:4px 0;
  border-bottom:1px dashed var(--border); font-size:.92em;
}
#catManager .cm-row:last-child{border-bottom:none;}
#catManager .cm-row .nm{flex:1;}
#catManager .cm-row button{
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text); padding:2px 8px;
}
#catManager .cm-row button:disabled{opacity:.3;}
html[data-libmode="simple"] .glyph-btn .fav,
html[data-libmode="simple"] .glyph-btn .n{display:none !important;}
html[data-libmode="simple"] .glyph-btn{padding:8px 4px;}
#libSimpleBtn.active, #catManageBtn.active{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v1.9.0
   ═══════════════════════════════════════════════════════════════ */

/* ── Bouton « Réinitialiser les filtres » : rouge, impossible à rater ── */
.reset-filters{
  border-color:var(--danger); color:var(--danger); background:transparent;
}
.reset-filters:hover{
  background:var(--danger); color:#fff; border-color:var(--danger);
  box-shadow:0 0 12px color-mix(in srgb, var(--danger) 55%, transparent);
}

/* ── Compteur de caractères affichés (bas droite, page Bibliothèque) ── */
#charCount{
  position:fixed; right:18px; bottom:16px; z-index:80; display:none;
  background:var(--panel); border:1px solid var(--accent); border-radius:999px;
  padding:7px 14px; font-size:.85em; color:var(--accent2);
  font-family:'Consolas','DejaVu Sans Mono',monospace; box-shadow:var(--glow);
}
#charCount b{color:var(--accent); font-size:1.1em;}
html[data-page="bibliotheque"] #charCount{display:block;}

/* ── Menu contextuel sur mesure (clic droit) ── */
#ctxMenu{
  position:fixed; z-index:400; min-width:220px; display:none;
  background:var(--panel); border:1px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--glow); padding:6px;
  font-size:.92em;
}
#ctxMenu.open{display:block;}
#ctxMenu .cx-title{
  color:var(--muted); font-size:.78em; text-transform:uppercase;
  letter-spacing:1px; padding:4px 10px 6px;
}
#ctxMenu button.cx-item{
  display:block; width:100%; text-align:left; background:none; border:none;
  color:var(--text); padding:7px 10px; border-radius:calc(var(--radius) - 2px);
  font-size:1em; cursor:pointer;
}
#ctxMenu button.cx-item:hover{background:var(--panel2); color:var(--accent);}
#ctxMenu .cx-sep{border-top:1px dashed var(--border); margin:5px 4px;}
#ctxMenu .cx-cursors{display:flex; gap:4px; padding:4px 8px 6px; flex-wrap:wrap;}
#ctxMenu .cx-cursors button{
  background:var(--panel2); border:1px solid var(--border); border-radius:var(--radius);
  padding:4px 7px; cursor:pointer; font-size:1em; color:var(--text);
}
#ctxMenu .cx-cursors button.active{border-color:var(--accent); color:var(--accent);}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v1.9.1 — menu des thèmes en tableau + Mode Intense
   ═══════════════════════════════════════════════════════════════ */
.theme-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:4px 10px 8px; color:var(--muted); font-size:.78em;
  text-transform:uppercase; letter-spacing:1px;
  border-bottom:1px dashed var(--border); margin-bottom:4px;
}
.theme-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-radius:calc(var(--radius) - 2px); padding-right:8px;
}
.theme-row.current{background:var(--panel2);}
.theme-row .theme-item{flex:1;}
.theme-note{
  color:var(--muted); font-size:.78em; padding:8px 10px 4px; max-width:260px;
  border-top:1px dashed var(--border); margin-top:4px; line-height:1.5;
}
/* ── Interrupteur façon Apple : lisible d'un coup d'œil ── */
.iswitch{position:relative; display:inline-block; width:44px; height:26px; flex:0 0 auto; cursor:pointer;}
.iswitch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.iswitch .knob{
  position:absolute; inset:0; border-radius:999px;
  background:var(--panel2); border:1px solid var(--border);
  transition:background .25s, border-color .25s;
}
.iswitch .knob::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,.35);
  transition:transform .25s ease;
}
.iswitch input:checked + .knob{
  background:#34c759; border-color:#34c759; /* le vert Apple, universellement compris */
}
.iswitch input:checked + .knob::after{transform:translateX(18px);}
.iswitch input:focus-visible + .knob{outline:2px solid var(--accent); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  .iswitch .knob, .iswitch .knob::after{transition:none;}
}


/* Menu des thèmes agrandi + mention sous chaque interrupteur (v2.0.0) */
.theme-list{min-width:320px; padding:12px;}
.theme-row{padding:3px 8px 3px 0;}
.int-wrap{display:flex; flex-direction:column; align-items:center; gap:2px; flex:0 0 auto;}
.int-cap{color:var(--muted); font-size:.68em; text-transform:uppercase; letter-spacing:.5px;}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v2.2.0 — raretés, profil, portfolio, bandeau stats
   ═══════════════════════════════════════════════════════════════ */
#achGrid{display:block;}
.rar-sep{
  display:flex; align-items:center; gap:10px; margin:22px 0 10px;
  color:var(--rc); font-family:var(--font-display); font-size:1.05em;
  border-bottom:2px solid var(--rc); padding-bottom:5px;
}
.rar-sep small{color:var(--muted); font-size:.75em;}
.ach-card[data-rar="inhabituel"]{border-left:4px solid #2fd9ff;}
.ach-card[data-rar="legendaire"]{border-left:4px solid #b06bff;}
.ach-card[data-rar="extreme"]{border-left:4px solid #ff5e5e;}

.home-tagline{
  color:var(--accent2); font-size:1.02em; margin:-6px 0 16px; font-style:italic;
}
.stats-strip{
  display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 14px;
}
.ss-item{
  background:var(--panel2); border:1px solid var(--border);
  border-left:4px solid var(--sc); border-radius:var(--radius);
  padding:5px 10px; font-size:.85em; color:var(--muted);
}
.ss-item b{color:var(--sc); font-size:1.15em; font-family:'Consolas',monospace;}

.profile-panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px 18px;
}
.profile-hello{
  background:var(--panel2); border-left:4px solid var(--gold);
  border-radius:var(--radius); padding:10px 14px; margin-bottom:12px;
}
.profile-hello span{color:var(--muted);}
.phrase-list{list-style:none; padding-left:4px; color:var(--muted); font-size:.85em;}
.phrase-list li::before{content:"◇ "; color:var(--accent);}

.about-cta{display:flex; gap:12px; flex-wrap:wrap; margin:14px 0;}
.big-cta{font-size:1.05em; padding:14px 22px;}

.folio-empty{
  text-align:center; padding:50px 20px; border:1px dashed var(--border);
  border-radius:var(--radius); color:var(--muted); margin-top:14px;
}
.folio-card{
  display:flex; align-items:center; gap:14px; background:var(--panel);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px;
}
.folio-card .fc-emoji{font-size:1.8em;}
.folio-card .fc-body{flex:1;}
.folio-card .fc-visit{flex:0 0 auto;}
.folio-tuiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px;}
.folio-tuiles .folio-card{flex-direction:column; text-align:center; margin:0;}
.folio-compact .folio-card{padding:7px 12px;}
.fc-tags code{background:var(--bg2); border:1px solid var(--border);
  border-radius:4px; padding:1px 6px; font-size:.8em; margin-right:4px;}

.sp-actions{margin-top:18px; border-top:1px dashed var(--border); padding-top:12px;}

/* ── v2.3.0 : bêta, options avancées des tâches ── */
.beta-tag{
  color:var(--gold); font-size:.75em; border:1px dashed var(--gold);
  border-radius:999px; padding:2px 8px; white-space:nowrap;
}
#taskAdv{
  border:1px solid var(--accent); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:12px; background:var(--panel);
}
#taskAdv .adv-block{border-bottom:1px dashed var(--border); padding:10px 0;}
#taskAdv .adv-block:last-child{border-bottom:none;}
#taskAdv h4{color:var(--accent); margin-bottom:4px;}
#taskAdv label{margin-right:14px;}
.proj-row{
  display:flex; align-items:center; gap:8px; padding:5px 0;
  border-bottom:1px dashed var(--border); font-size:.92em;
}
.proj-row:last-child{border-bottom:none;}
.proj-row .nm{flex:1;}

/* ── v2.4.0 : nom de code des modes intenses opérationnels ── */
.int-ready{
  color:var(--gold); font-size:.7em; white-space:nowrap; margin-left:auto;
  margin-right:8px; letter-spacing:.5px;
}

/* ═══════════════════════════════════════════════════════════════
   NOUVEAUTÉS v2.5.0
   ═══════════════════════════════════════════════════════════════ */
/* ── Horloge ── */
#headClock, #footClock{
  font-family:'Consolas','DejaVu Sans Mono',monospace; color:var(--accent2);
  font-size:.9em; padding:0 6px; white-space:nowrap;
}
/* ── Statistiques unifiées : les 4 graphiques ensemble ── */
.stats-unified{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:16px;
}
.su-cell{
  background:var(--panel2); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px;
}
.su-cell h5{color:var(--muted); margin-bottom:8px; letter-spacing:1px;}
/* ── Modèles agrandis et mis en valeur ── */
.tpl-grid{grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)) !important; gap:20px !important;}
.tpl-card{padding:20px !important; transition:transform .18s, box-shadow .18s;}
.tpl-card:hover{transform:translateY(-4px); box-shadow:var(--glow);}
.tpl-card h3{font-size:1.25em; color:var(--accent);}
.tpl-card pre{font-size:1.02em !important; line-height:1.45; max-height:280px; overflow:auto;}
/* ── Guide & FAQ ── */
.guide-panel h3{margin-top:18px; color:var(--accent);}
.guide-panel details{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 14px; margin:8px 0; background:var(--panel2);
}
.guide-panel summary{cursor:pointer; font-weight:bold; color:var(--accent2);}
.guide-panel details[open] summary{margin-bottom:6px;}
/* ── Rédaction ── */
#redText{width:100%; min-height:280px; font-size:1.05em;}
#redToolbar{display:inline-flex; gap:6px; flex-wrap:wrap;}
.red-key{min-width:42px; min-height:42px; font-size:1.2em;}
#redAuto{
  border:1px solid var(--accent); border-radius:var(--radius);
  padding:12px 16px; margin-top:10px; background:var(--panel);
}
#redAuto .adv-block{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
/* ── Prompts & Instructions IA ── */
.ia-card{margin-bottom:20px;}
.ia-card h3{color:var(--accent);}
.ia-prompt{white-space:pre-wrap; font-size:.95em;}
.ia-compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px;}
.ia-compare h5{color:var(--muted); margin:8px 0 4px;}
@media (max-width:800px){.ia-compare{grid-template-columns:1fr;}}
/* ── Démo vivante & fontaine de glyphes (À propos) ── */
.about-demo{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:10px 0 18px;}
@media (max-width:800px){.about-demo{grid-template-columns:1fr;}}
#aboutTyping{min-height:150px;}
#glyphFountain{
  position:relative; overflow:hidden; min-height:150px; cursor:pointer;
  border:2px dashed var(--accent); border-radius:var(--radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:1.4em; color:var(--accent2); user-select:none;
}
#glyphFountain small{font-size:.55em; color:var(--muted);}
.gf-fly{
  position:absolute; bottom:0; pointer-events:none; font-size:1.3em;
  animation:gfFly 1.4s ease-out forwards;
}
@keyframes gfFly{
  0%{transform:translateY(0) rotate(0); opacity:1;}
  100%{transform:translateY(-160px) rotate(var(--rot, 40deg)); opacity:0;}
}
.about-sites{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin:10px 0 18px;}
.site-card{
  display:flex; flex-direction:column; gap:4px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 16px; text-decoration:none !important; color:var(--text) !important;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.site-card:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--glow);}
.site-card span{font-size:1.6em;}
.site-card small{color:var(--muted);}
/* ── MODE DALTONIEN : palettes adaptées (placées en fin de feuille,
   elles priment sur les variables de thème à spécificité égale) ──
   deuter/prota : palette Okabe-Ito (bleu/orange/jaune, sûre R-V)
   trita : axe rouge-cyan (sûr B-J) · achro : gris + contraste ── */
html[data-cb="deuter"], html[data-cb="prota"]{
  --accent:#0072B2; --accent2:#56B4E9; --gold:#F0E442;
  --ok:#0072B2; --danger:#E69F00;
}
html[data-cb="prota"]{--danger:#F0E442; --gold:#E69F00;}
html[data-cb="trita"]{
  --accent:#D55E00; --accent2:#CC79A7; --gold:#E8B78A;
  --ok:#009E73; --danger:#D55E00;
}
html[data-cb="achro"] body{filter:grayscale(1) contrast(1.08);}
html[data-cb="achro"]{--glow:none;}
#cbMenu{min-width:260px;}

/* ── v2.6.0 : thème actif grisé dans le menu ── */
.theme-item[disabled]{
  opacity:.5; cursor:default; pointer-events:none;
}
/* ── v2.6.0 : pistes « en cours de réflexion » ── */
.ideas-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:12px; margin:10px 0 6px;
}
.idea-item{
  display:flex; flex-direction:column; gap:3px;
  background:var(--panel); border:1px dashed var(--border);
  border-radius:var(--radius); padding:12px 14px;
}
.idea-item span{font-size:1.4em;}
.idea-item small{color:var(--muted);}
.ideas-note{
  font-size:.78em; color:var(--muted); opacity:.8;
  text-align:right; margin:4px 2px 18px;
}

/* ── v2.7.0 : intro Prompts IA (3 niveaux) ── */
.ia-intro{border-width:2px;}
.ia-levels{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:10px; margin-top:12px;}
.ia-level{
  display:flex; flex-direction:column; gap:3px;
  border:1px solid var(--border); border-radius:var(--radius);
  padding:10px 12px; background:var(--panel2);
}
.ia-level small{color:var(--muted);}
/* ── v2.7.0 : confort d'écriture droite-à-gauche (arabe) ── */
html[dir="rtl"] .main-nav, html[dir="rtl"] footer{direction:rtl;}
html[dir="rtl"] .gen-grid, html[dir="rtl"] textarea, html[dir="rtl"] .output{direction:ltr;} /* le texte technique reste LTR */

/* ── v2.8.0 : bannière d'événement du journal des versions ── */
.cl-entry.event{position:relative;}
.cl-event{
  border:2px solid var(--gold); border-radius:var(--radius);
  background:linear-gradient(135deg, color-mix(in srgb, var(--gold) 14%, var(--panel)), var(--panel));
  padding:14px 18px; margin:0 0 12px 26px;
  box-shadow:var(--glow);
}
.cl-event b{font-size:1.25em; letter-spacing:.5px;}
.cl-event p{margin:6px 0 0; color:var(--text);}

/* ── v2.10.0 : bannière de traduction partielle ── */
.i18n-warn{
  display:flex; align-items:center; gap:10px;
  border:1px solid var(--gold); border-radius:var(--radius);
  background:color-mix(in srgb, var(--gold) 12%, var(--panel));
  padding:10px 14px; margin-bottom:14px;
}
.i18n-warn span{flex:1;}
#iaMenu{min-width:220px;}

/* ── v2.11.0 : composeur de demande IA ── */
.ia-note{
  border:1px dashed var(--accent2); border-radius:var(--radius);
  padding:8px 12px; color:var(--muted); margin-bottom:10px;
}
#iaComposeText{width:100%; min-height:160px;}

/* ── v2.13.0 : bibliothèque de prompts robustes ── */
.ia-duo{display:grid; grid-template-columns:1fr 230px; gap:16px; align-items:start;}
@media (max-width:900px){.ia-duo{grid-template-columns:1fr;}}
.ia-check{
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel2); padding:12px 14px; position:sticky; top:70px;
}
.ia-check h5{margin-bottom:8px; color:var(--accent);}
.ia-check label{display:flex; gap:8px; align-items:flex-start; margin:7px 0; cursor:pointer;}
.ia-check input:checked + *{opacity:.6;}
.ia-check label:has(input:checked){text-decoration:line-through; opacity:.65;}
/* ── Composeur bien visible ── */
.ia-compose-hot{border:2px solid #d64545 !important;}
.ia-compose-label{
  display:block; font-weight:bold; color:#d64545; font-size:1.15em; margin:4px 0 6px;
}
.ia-compose-hot #iaComposeText{
  min-height:260px; border:2px solid #d64545; border-radius:var(--radius);
}
.ia-compose-hot #iaComposeText:focus{outline:2px solid #d64545; outline-offset:2px;}

/* ── v2.14.0 : Modèles — vue large (défaut) / compacte, descriptions ── */
.tpl-grid[data-view="large"]{grid-template-columns:repeat(2, 1fr) !important; gap:26px !important;}
.tpl-grid[data-view="large"] .tpl-card pre{font-size:1.08em !important; max-height:none;}
.tpl-grid[data-view="compact"]{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)) !important; gap:14px !important;}
.tpl-grid[data-view="compact"] .tpl-card pre{font-size:.9em !important; max-height:200px;}
.tpl-desc{
  color:var(--muted); margin:8px 0 14px; line-height:1.5;
}
.tpl-card h3{margin-bottom:2px;}
[data-tpl-view].active{border-color:var(--accent); color:var(--accent);}
@media (max-width:860px){.tpl-grid[data-view="large"]{grid-template-columns:1fr !important;}}
.tpl-future{
  columns:2; column-gap:34px; list-style:none; margin:8px 0 20px;
}
.tpl-future li{
  border:1px dashed var(--border); border-radius:var(--radius);
  padding:8px 12px; margin:0 0 8px; break-inside:avoid; background:var(--panel);
}
@media (max-width:720px){.tpl-future{columns:1;}}

.fc-badge{font-size:.68em; background:var(--panel2); border:1px solid var(--border);
  border-radius:20px; padding:2px 8px; margin-left:6px; vertical-align:middle; font-weight:normal;}

/* ── v3.0.0 : journal des versions refondu (frise + résumé) ── */
.cl-stats{
  display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;
}
.cl-stat{
  flex:1; min-width:110px; text-align:center; padding:12px 8px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--panel);
}
.cl-stat b{display:block; font-size:1.7em; color:var(--accent);}
#clList{position:relative; padding-left:6px;}
.cl-entry{
  position:relative; padding:12px 14px 10px 30px; margin-bottom:14px;
  border:1px solid var(--border); border-left:4px solid var(--accent);
  border-radius:var(--radius); background:var(--panel);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cl-entry:hover{transform:translateX(4px); box-shadow:var(--glow);}
.cl-entry .v{
  font-size:1.15em; font-weight:bold; color:var(--accent);
  background:var(--panel2); border:1px solid var(--border);
  border-radius:20px; padding:2px 12px; margin-right:10px;
}
.cl-entry .d{color:var(--muted); font-size:.9em;}
.cl-entry .cl-mark{position:absolute; left:8px; top:14px; color:var(--accent);}
details.cl-old{margin-top:8px;}
details.cl-old > summary{
  cursor:pointer; padding:12px 16px; border:1px dashed var(--border);
  border-radius:var(--radius); color:var(--muted); font-weight:bold;
}
details.cl-old > summary:hover{color:var(--accent); border-color:var(--accent);}
details.cl-old[open] > summary{margin-bottom:12px;}

/* ── v3.0.0 : note Lakȟótiyapi par section ── */
.tp-note{
  border:1px dashed var(--gold); border-radius:var(--radius);
  background:color-mix(in srgb, var(--gold) 8%, var(--panel));
  padding:10px 14px; margin:0 0 14px; color:var(--text);
}

/* ── v3.1.0 : filtres Usage / Forme de la Bibliothèque ── */
.lib-filterbar{display:flex; align-items:flex-start; gap:10px; margin:10px 0 2px;}
.lib-flabel{font-weight:bold; color:var(--muted); white-space:nowrap; padding-top:5px;}
.lib-chips{display:flex; flex-wrap:wrap; gap:6px;}
.lib-chip{
  border:1px solid var(--border); border-radius:20px; background:var(--panel);
  color:var(--text); padding:4px 12px; cursor:pointer; font-size:.92em;
  transition:border-color .15s, color .15s, transform .1s;
}
.lib-chip:hover{border-color:var(--accent); transform:translateY(-1px);}
.lib-chip.active{border-color:var(--accent); color:var(--accent); font-weight:bold; background:var(--panel2);}

/* ── v3.5.0 : notes i18n multi-pages + vitrine des temporaires ── */
.i18n-note{
  border:1px solid var(--gold); border-radius:var(--radius);
  background:color-mix(in srgb, var(--gold) 10%, var(--panel));
  padding:8px 12px; margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
.i18n-note-x{background:none; border:none; color:var(--muted); cursor:pointer; margin-left:auto;}
.i18n-note-x:hover{color:var(--accent);}
.i18n-mini{
  position:fixed; right:16px; bottom:16px; z-index:500;
  border:1px solid var(--gold); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--glow);
  padding:8px 14px; opacity:.96; transition:opacity 1.2s ease;
}
.i18n-mini.fade{opacity:0;}
.temp-won-title{margin:14px 0 8px;}
.temp-won-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px;}
.temp-won-card{opacity:.95;}
.temp-won-badge{
  display:inline-block; background:var(--accent); color:var(--bg);
  border-radius:20px; padding:1px 9px; font-size:.8em; margin-left:6px; vertical-align:middle;
}

/* ══ v3.6.0 : CLASSEMENT VIVANT ══ */
.rank-join{display:flex; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.rank-join input{flex:1; min-width:180px; padding:9px 12px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel2); color:var(--text);}
.rank-privacy{font-size:.85em;}
.rank-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0;}
.rank-tab{
  border:1px solid var(--border); border-radius:var(--radius); cursor:pointer;
  background:var(--panel); color:var(--text); padding:8px 16px; text-align:left;
  display:flex; flex-direction:column; gap:2px; transition:transform .15s, border-color .15s;
}
.rank-tab small{color:var(--muted); font-size:.78em;}
.rank-tab:hover{transform:translateY(-2px);}
.rank-tab.lg-bronze{border-left:4px solid hsl(25,70%,50%);}
.rank-tab.lg-argent{border-left:4px solid hsl(210,60%,60%);}
.rank-tab.lg-or{border-left:4px solid hsl(45,85%,55%);}
.rank-tab.active{border-color:var(--accent); color:var(--accent); font-weight:bold;
  box-shadow:var(--glow);}
tr.lg-bronze td.pseudo{color:hsl(25,70%,55%);}
tr.lg-argent td.pseudo{color:hsl(210,60%,65%);}
tr.lg-or td.pseudo{color:hsl(45,85%,55%);}
.rank-step.lg-or{box-shadow:0 0 18px hsla(45,85%,55%,.35);}
.rank-step.lg-argent{box-shadow:0 0 12px hsla(210,60%,60%,.3);}
.rank-searchbar{display:flex; align-items:center; gap:8px; margin:10px 0 6px;}
.rank-searchbar input{flex:1; padding:8px 12px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel2); color:var(--text);}
tr.rank-self{outline:2px solid var(--accent); outline-offset:-2px;}
tr.rank-self td{font-weight:bold; background:color-mix(in srgb, var(--accent) 10%, transparent);}
.rank-me{border:1px solid var(--accent); border-radius:var(--radius); padding:12px 16px;
  margin:10px 0; background:var(--panel);}
.rank-cheer{margin:6px 0 0; color:var(--accent); font-weight:bold;}
.rank-stats{display:flex; gap:18px; color:var(--muted); margin:6px 2px; flex-wrap:wrap;}

/* ── Boîte à idées ── */
.idea-box{margin-top:22px;}
.idea-text{width:100%; resize:vertical; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel2); color:var(--text); font:inherit;}
.idea-foot{display:flex; justify-content:space-between; align-items:center; margin-top:8px;}
.idea-count{color:var(--muted);}

/* ══ v3.6.0 : LICENCE — mise en page animée en permanence ══ */
.lic-title .lic-shimmer{
  background:linear-gradient(90deg, var(--accent), var(--gold), #7bd88f, var(--accent));
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text;
  color:transparent; animation:licShimmer 6s linear infinite;
}
@keyframes licShimmer{0%{background-position:0% 0}100%{background-position:300% 0}}
.lic-atom{display:inline-block; animation:licSpinPulse 5s ease-in-out infinite;}
@keyframes licSpinPulse{
  0%,100%{transform:rotate(0) scale(1); text-shadow:0 0 4px var(--accent);}
  50%{transform:rotate(180deg) scale(1.25); text-shadow:0 0 16px var(--accent);}
}
.lic-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px;}
.lic-tab{border:1px solid var(--border); border-radius:20px; cursor:pointer;
  background:var(--panel); color:var(--text); padding:6px 14px; transition:all .15s;}
.lic-tab small{color:var(--muted);}
.lic-tab:hover{border-color:var(--accent); transform:translateY(-1px);}
.lic-tab.active{border-color:var(--accent); color:var(--accent); font-weight:bold; box-shadow:var(--glow);}
.lic-mark{
  background:linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--gold) 42%, transparent) 12%,
    color-mix(in srgb, var(--gold) 42%, transparent) 88%, transparent 100%);
  background-size:220% 100%; border-radius:4px; padding:0 3px;
  animation:licSweep 4.5s ease-in-out infinite alternate;
}
@keyframes licSweep{0%{background-position:120% 0}100%{background-position:-20% 0}}
.lic-under{
  background-image:linear-gradient(90deg, var(--accent), var(--gold));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 2px;
  animation:licUnder 3.4s ease-in-out infinite alternate; padding-bottom:2px;
}
@keyframes licUnder{0%{background-size:12% 2px}100%{background-size:100% 2px}}

/* ══ v3.7.0 : drapeaux plus grands et plus visibles ══ */
#langBtn .fl svg{width:26px; height:18px; vertical-align:-4px; border-radius:2px;
  box-shadow:0 0 0 1px var(--border);}
#langList .fl svg{width:34px; height:23px; vertical-align:-6px; border-radius:3px;
  box-shadow:0 0 0 1px var(--border);}
#langList a{padding:10px 14px !important; font-size:1.05em;}
#langList a:hover .fl svg{transform:scale(1.12); transition:transform .15s;}

/* ── Aération des mentions légales ── */
.legal{line-height:1.75;}
.legal h3{margin:34px 0 14px; padding-top:10px;}
.legal h3:first-child{margin-top:6px;}
.legal p{margin:10px 0 14px;}
.legal ul li{margin:8px 0;}
.legal .notice{padding:18px 20px; margin:14px 0;}

/* ══ v3.7.0 : classement figé, mais magnifique ══ */
.rank-frozen{
  border:1px dashed var(--gold); border-radius:var(--radius);
  background:color-mix(in srgb, var(--gold) 8%, var(--panel));
  padding:10px 14px; margin:10px 0; text-align:center;
}
.rank-podium.frozen .rank-step{filter:saturate(.85); position:relative;}
.frozen-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));
  gap:10px; margin:12px 0;}
.rank-stat{text-align:center; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--panel); padding:12px 8px;}
.rank-stat b{display:block; font-size:1.5em; color:var(--accent);}

/* ══ v3.7.0 : le mur des idées ══ */
.idea-wall{margin-top:18px; border-top:1px dashed var(--border); padding-top:14px;}
.iw-bar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.iw-bar input{flex:1; min-width:200px; padding:8px 12px; border:1px solid var(--border);
  border-radius:var(--radius); background:var(--panel2); color:var(--text);}
.iw-sorts{display:flex; gap:6px;}
.iw-sort{border:1px solid var(--border); border-radius:20px; cursor:pointer;
  background:var(--panel); color:var(--text); padding:5px 12px; transition:all .15s;}
.iw-sort:hover{border-color:var(--accent);}
.iw-sort.active{border-color:var(--accent); color:var(--accent); font-weight:bold;}
.iw-grid{display:grid; gap:10px;}
.iw-card{border:1px solid var(--border); border-left:4px solid var(--muted);
  border-radius:var(--radius); background:var(--panel); padding:12px 14px;
  transition:transform .15s, box-shadow .15s;}
.iw-card:hover{transform:translateX(3px); box-shadow:var(--glow);}
.iw-card.st-ok{border-left-color:#3fbf6f;}
.iw-card.st-no{border-left-color:#d05656; opacity:.8;}
.iw-card.st-wait{border-left-color:var(--gold);}
.iw-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.iw-head small{color:var(--muted);}
.iw-status{margin-left:auto; border-radius:20px; padding:2px 10px; font-size:.82em;
  border:1px solid var(--border);}
.iw-status.ok{color:#3fbf6f; border-color:#3fbf6f;}
.iw-status.no{color:#d05656; border-color:#d05656;}
.iw-status.wait{color:var(--gold); border-color:var(--gold);}
.iw-text{margin:6px 0 10px; white-space:pre-wrap;}
.iw-reacts{display:flex; gap:8px; flex-wrap:wrap;}
.iw-react{border:1px solid var(--border); border-radius:20px; cursor:pointer;
  background:var(--panel2); color:var(--text); padding:4px 12px; transition:all .15s;}
.iw-react:hover{transform:translateY(-1px); border-color:var(--accent);}
.iw-react.on{border-color:var(--accent); color:var(--accent); font-weight:bold;
  box-shadow:var(--glow);}

/* ═══ RESPONSIVE MOBILE ═══ */

@media(max-width:760px){
  header{flex-wrap:wrap; padding:8px 10px;}
  nav.main-nav{order:3; width:100%; justify-content:flex-start; overflow-x:auto;
    -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding-bottom:2px;}
  .brand h1 span.sub{display:none;}
  main{padding:14px 8px 60px;}
  footer{flex-wrap:wrap; gap:4px 10px; font-size:.75em; padding:6px 10px;}
  footer nav{justify-content:flex-start;}
  body{padding-bottom:84px;}
  #toasts{bottom:94px; right:8px; left:8px;}
  .glyph-btn{min-height:60px;}
}


/* ═══ 🪶 v3.10.0 — BANNIÈRE TEEPEE (visible en langue tp uniquement) ═══ */
#tpBanner{
  display:none; align-items:center; gap:16px; padding:13px 22px; flex-wrap:wrap;
  background:linear-gradient(100deg, #044860, #0d7d92);
  color:#fff; font-weight:600; line-height:1.5;
  box-shadow:0 3px 14px rgba(4,72,96,.35); position:relative; z-index:5;
}
#tpBanner.visible{display:flex;}
#tpBanner .tp-plume{font-size:1.7em;}
#tpBanner .tp-texte{flex:1; min-width:240px;}
#tpBanner .tp-btn{
  background:#fff; color:#044860; font-weight:800; text-decoration:none;
  padding:10px 20px; border-radius:12px; white-space:nowrap;
  box-shadow:0 3px 0 rgba(0,0,0,.28); transition:transform .15s;
}
#tpBanner .tp-btn:hover{transform:translateY(-2px);}