#save-warning, #champion-guide, #tutorial-replay { position:absolute; z-index:85; left:14px; right:14px; display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:14px; color:#f6f3df; background:#122e43; border:2px solid #55c8ef; font-size:14px; line-height:1.3; }
#save-warning { bottom:110px; border-color:#edbb62; }
/* À l'accueil, l'avertissement et son bouton (« Réessayer », « Reprendre ici ») montent au-dessus du cartouche d'objectif (trois lignes au plus) et ne couvrent plus « Attaquer ». */
#save-warning.sur-accueil { bottom:calc(var(--nav-h) + 186px); }
#champion-guide { bottom:136px; right:88px; }
#tutorial-replay { top:64px; font-size:12px; }
#save-warning[hidden], #champion-guide[hidden], #tutorial-replay[hidden] { display:none; }
#save-warning span, #champion-guide span, #tutorial-replay span { flex:1; }
#save-warning button, #champion-guide button, #tutorial-replay button, .profile-storage button, .profile-storage-actions label { min-height:44px; padding:8px 12px; border-radius:10px; border:1px solid #63d5ef; color:#fff; background:#18466a; font:inherit; cursor:pointer; }
#champion-guide button { padding:4px; min-width:44px; }
.profile-storage { margin-bottom:18px; }
.profile-storage p { font-size:14px; line-height:1.5; margin:6px 0 12px; }
.profile-storage-actions { display:flex; gap:12px; }
.profile-storage-actions label { display:flex; align-items:center; }
.profile-storage > button { width:100%; margin-top:12px; }
#profile-import-confirm { background:#765229; border-color:#f5c06a; }
.profile-storage button:focus-visible, .profile-storage-actions label:focus-within, #save-warning button:focus-visible, #champion-guide button:focus-visible, #tutorial-replay button:focus-visible { outline:3px solid #ffc866; outline-offset:3px; }
/* Cartouche d'objectif de l'accueil : posé au-dessus d'« Attaquer », sur la porte et la route, jamais sur un bâtiment. */
#progression-next { position:absolute; left:14px; right:14px; bottom:calc(var(--nav-h) + 90px); z-index:4; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; min-height:52px; padding:8px 10px 8px 14px; text-align:left; border:2px solid #f5ce75; border-radius:16px; background:#fff6e8; color:#15417a; box-shadow:0 3px 0 #9a6a2a66, 0 6px 10px #3b5b6933; cursor:pointer; font:inherit; }
#progression-next strong { grid-column:1; font:800 15px/1.2 var(--f-texte); }
#progression-next span { grid-column:1; font:700 var(--fs-libelle)/1.25 var(--f-texte); color:#1852a1; font-variant-numeric:tabular-nums; }
#progression-next i { grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#15417a; color:#fff; font:900 20px/1 var(--f-texte); font-style:normal; padding-bottom:2px; }
#progression-next.payable i { background:#3fa837; box-shadow:0 0 0 2px #fff, 0 2px 3px #164c2844; }
#progression-next em { grid-column:1 / -1; margin-top:6px; padding-top:5px; border-top:1px solid #ebd6a4; font:600 var(--fs-legende)/1.3 var(--f-texte); font-style:normal; color:#4b5d78; }
#progression-next em[hidden] { display:none; }
#progression-next:active { transform:translateY(2px); box-shadow:0 1px 0 #9a6a2a66; }
#progression-next[hidden], #champion-owned[hidden] { display:none; }
#progression-next:focus-visible { outline:3px solid #ffc866; outline-offset:3px; }
/* ================================================================ famille D « Arcade premium » (6 octobre 2026, retour de Bastien)
Les restes ivoire ou sarcelle arrondis de cette feuille rejoignent les plaques nuit inclinées : cartouche d'objectif de
l'accueil, bandeaux d'état, boutons de « Progression locale » et du Champion. Bloc posé en fin de feuille : il adapte les
règles de base ci-dessus sans les réécrire. */
/* Cartouche d'objectif : une information, pas une seconde action. Plaque nuit FINE (arête d'un point, pas de tranche
épaisse ni de bout bleu) au-dessus d'« Attaquer », un peu moins large que lui. À gauche un sceau en losange (la flèche
d'amélioration), le titre en italique noir, le détail en or avec sa pièce quand il porte un prix (data-gain, posé par
src/ui/monde-cap26.js) ; à droite un chevron azur, qui devient un losange OR quand l'achat est payable. L'horizon de Cité
(troisième ligne de la tranche « cycle de vie ») est porté par la plaque d'époque du haut. */
#progression-next { top:auto; left:calc(var(--gout-l) + 6px); right:calc(var(--gout-r) + 6px); bottom:calc(var(--nav-h) + 88px); max-width:none; z-index:4; isolation:isolate; box-sizing:border-box;
display:grid; grid-template-columns:minmax(0,1fr) 26px; align-items:center; column-gap:6px; row-gap:3px; min-height:46px; padding:6px 8px 7px 46px;
border:0; border-radius:0; background:none; box-shadow:none; color:var(--blanc); text-align:left; transition:transform var(--t-appui) var(--courbe); }
#progression-next::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:3px; transform:skewX(var(--biais));
background:linear-gradient(110deg, rgba(9,34,70,.9), rgba(5,18,40,.9) 55%, rgba(4,14,32,.9));
box-shadow:inset 0 0 0 1px rgba(60,140,210,.65), 0 4px 8px rgba(0,5,17,.45); }
/* le chevron (colonne 2) */
#progression-next::after { content:''; grid-column:2; grid-row:1 / span 2; justify-self:center; width:26px; height:26px; pointer-events:none;
background:url("data:image/svg+xml,") center / contain no-repeat; }
#progression-next.payable::before { box-shadow:inset 0 1px 0 rgba(255,236,160,.7), inset 0 0 0 1.5px #E8B64C, 0 0 12px rgba(255,190,60,.45), 0 5px 10px rgba(0,5,17,.5); }
#progression-next.payable::after { background-image:url("data:image/svg+xml,"); }
#progression-next strong { grid-column:1; display:block; font:italic 900 19px/1 var(--f-titre); color:var(--blanc); text-shadow:0 2px 1px rgba(0,12,40,.55); text-wrap:balance; }
/* le sceau de gauche : losange nuit à filet azur, flèche d'amélioration ; or quand c'est payable */
#progression-next strong::before { content:''; position:absolute; left:9px; top:50%; width:30px; height:30px; margin-top:-16px; pointer-events:none;
background:url("data:image/svg+xml,") center / contain no-repeat; }
#progression-next.payable strong::before { background-image:url("data:image/svg+xml,"); }
#progression-next span { grid-column:1; display:block; font:italic 700 15px/1.05 var(--f-titre); color:var(--or-clair); font-variant-numeric:tabular-nums; text-wrap:balance; }
#progression-next[data-gain="or"] span::before { content:''; display:inline-block; width:15px; height:15px; margin-right:5px; vertical-align:-2px; background:var(--img-piece) center / contain no-repeat; }
#progression-next i, #progression-next em { display:none; }
#progression-next:active { transform:translateY(2px); box-shadow:none; }
#progression-next:active::before { filter:brightness(.86); }
#progression-next:focus-visible { outline:none; }
#progression-next:focus-visible::before { outline:3px solid var(--or-clair); outline-offset:3px; }
/* Bandeaux d'état (sauvegarde, conseil du Champion, entraînement) : plaques nuit à filet ; la sauvegarde en échec est un danger (corail). */
#save-warning, #champion-guide, #tutorial-replay { --bord:#3AA9F2; --halo:rgba(20,120,255,.4); isolation:isolate; padding:7px 14px; border:0; border-radius:0; background:none;
color:var(--blanc); font:600 var(--fs-libelle)/1.3 var(--f-texte); }
#save-warning::before, #champion-guide::before, #tutorial-replay::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:3px; transform:skewX(var(--biais));
background:linear-gradient(160deg, rgba(12,46,98,.97), rgba(4,17,42,.97) 58%, rgba(3,12,31,.97)); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1.5px var(--bord), 0 0 12px var(--halo), 0 5px 12px rgba(0,5,17,.55); }
#save-warning { --bord:#FF7A52; --halo:rgba(255,110,70,.4); }
/* À l'accueil et sur la carte, le bandeau quitte la zone d'action : posé sous l'en-tête, il ne couvre plus « Attaquer »,
« Visiter » ni la fiche de région (à 110 points du bas, son bouton interceptait le toucher du bouton principal). Le
sélecteur .sur-accueil de la tranche « cycle de vie » suit la même place. */
#stage:has(> .screen[data-screen="home"]:not([hidden])) > #save-warning,
#stage:has(> .screen[data-screen="carte"]:not([hidden])) > #save-warning,
#save-warning.sur-accueil { top:calc(var(--safe-t) + 66px); bottom:auto; }
/* Sur les autres écrans à barre (Boutique, Missions, Chronique, Paramètres), il se pose juste au-dessus de la barre et la
feuille gagne de quoi défiler : son dernier bouton ne reste plus dessous. */
#stage:has(> .screen:is([data-screen="shop"], [data-screen="missions"], [data-screen="lore"], [data-screen="settings"]):not([hidden])) > #save-warning { bottom:calc(var(--nav-h) + 8px); }
#stage:has(> #save-warning:not([hidden])) > .screen.panel .scroll-area { padding-bottom:72px; }
#tutorial-replay { font-size:var(--fs-libelle); }
/* Boutons de ces bandeaux, de « Progression locale » et du Champion : la face secondaire de la famille (nuit, arête cyan,
tranche), en parallélogramme ; le texte reste droit. La face vit dans des variables pour ses variantes or et corail. */
#save-warning button, #champion-guide button, #tutorial-replay button, .profile-storage button, .profile-storage-actions label {
--pb-face:linear-gradient(180deg, rgba(255,255,255,.10) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #0C3272 0%, #072457 50%, #03173A 100%);
--pb-arete:inset 0 2px 0 #6BDDFF, inset 1px 0 0 #36B8FF, inset -1px 0 0 #36B8FF, inset 0 -1px 0 #2C8BEA;
--pb-tranche:0 1px 0 #010C22, 0 4px 0 #06265C, 0 5px 0 #1F5FB8, 0 0 9px rgba(20,160,255,.32);
position:relative; isolation:isolate; min-height:44px; padding:6px 14px 10px; border:0; border-radius:0; background:none; color:var(--blanc);
font:italic 800 18px/1.05 var(--f-titre); text-shadow:0 2px 1px rgba(0,12,40,.55); transition:transform var(--t-appui) var(--courbe); }
#save-warning button::before, #champion-guide button::before, #tutorial-replay button::before, .profile-storage button::before, .profile-storage-actions label::before {
content:''; position:absolute; inset:0 3px 5px; z-index:-1; pointer-events:none; border-radius:3px; transform:skewX(var(--biais)); background:var(--pb-face); box-shadow:var(--pb-arete), var(--pb-tranche); }
#save-warning button:active, #champion-guide button:active, #tutorial-replay button:active, .profile-storage button:not(:disabled):active { transform:translateY(3px); }
.profile-storage button:disabled { color:#9FB4CB; cursor:default; }
.profile-storage button:disabled::before { --pb-face:linear-gradient(180deg, #2E4B69, #1A3656); --pb-arete:inset 0 0 0 1px rgba(126,170,210,.4); --pb-tranche:0 4px 0 #0B2440; }
.profile-storage button[aria-pressed="true"] { color:var(--blanc); }
.profile-storage button[aria-pressed="true"]::before { --pb-face:linear-gradient(180deg, rgba(150,230,255,.12) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #2EA2FF, #1C88F4 30%, #0A66E0 55%, #0558D4);
--pb-arete:inset 0 2px 0 #B6F0FF, inset 0 0 0 1px #7FDFFF; --pb-tranche:0 1px 0 #03307F, 0 4px 0 #0443BD, 0 0 12px rgba(70,180,255,.6); }
#champion-guide button { padding:4px 4px 8px; min-width:44px; font-size:22px; }
.profile-storage-actions { gap:10px; }
.profile-storage-actions > button { flex:1 1 0; min-width:0; }
.profile-storage > button { width:100%; margin-top:12px; }
/* confirmer un import remplace la progression : face or, encre sombre */
#profile-import-confirm { color:var(--or-texte); text-shadow:none; background:none; }
#profile-import-confirm::before { --pb-face:linear-gradient(180deg, rgba(255,255,255,.3) 0, rgba(255,255,255,.12) 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #FDE551, #FAC03A 66%, #F9B629);
--pb-arete:inset 0 2px 0 #FFF6B0; --pb-tranche:0 1px 0 #8A5200, 0 4px 0 #C88615; }
/* « Recommencer la campagne » (tranche « cycle de vie ») : action sans retour, face braise ; armée, elle s'allume */
.profile-storage > button.recommence-campagne { background:none; border:0; color:#FFD9CC; }
.profile-storage > button.recommence-campagne::before { --pb-face:linear-gradient(180deg, #4A1E10, #2A0F08); --pb-arete:inset 0 2px 0 #FF9A76, inset 0 0 0 1px var(--braise); --pb-tranche:0 4px 0 #1A0B08, 0 0 9px rgba(224,103,58,.35); }
.profile-storage > button.recommence-campagne.arme { background:none; color:var(--blanc); }
.profile-storage > button.recommence-campagne.arme::before { --pb-face:linear-gradient(180deg, #F08A62, #E0673A 45%, #9C3316); --pb-arete:inset 0 2px 0 #FFD0C0, inset 0 0 0 1px #FFB199; --pb-tranche:0 4px 0 #5A1C0A, 0 0 14px rgba(255,110,70,.6); }
.profile-storage button:focus-visible, .profile-storage-actions label:focus-within, #save-warning button:focus-visible, #champion-guide button:focus-visible, #tutorial-replay button:focus-visible { outline:none; }
.profile-storage button:focus-visible::before, .profile-storage-actions label:focus-within::before, #save-warning button:focus-visible::before, #champion-guide button:focus-visible::before, #tutorial-replay button:focus-visible::before { outline:2px solid #7FE3FF; outline-offset:3px; }
.profile-storage p { color:#D6E4F2; }
/* Paramètres : à 8 degrés vrais, la plaque d'un groupe haut (jusqu'à 250 points) sortait de 17 points de chaque côté, le texte
passait sous son bord et les bords ne s'alignaient plus d'un groupe à l'autre. Tous les groupes prennent la même plaque en
parallélogramme à découpe fixe de 10 points (le bord sur un calque, la face un point en retrait) : bords alignés. La face
n'est plus un aplat : une lueur azur tombe du coin haut gauche. */
/* Champion : la carte héros des Paramètres. Face bleu électrique, le heaume peint devant le titre, le rang et le prochain
corps en or (jamais un nombre seul en bout de ligne), puis les deux armes en tuiles ILLUSTRÉES : la silhouette de l'arme
au-dessus de son nom ; l'arme portée est bleu vif, l'arme pas encore offerte est éteinte sous un cadenas. */
[data-screen="settings"] #champion-appearance::before { background:linear-gradient(180deg, #9BEFFF, #4CC8FF 30%, #1E7FD0); }
[data-screen="settings"] #champion-appearance::after { background:radial-gradient(80% 110px at 8% 0, rgba(70,180,255,.5), rgba(70,180,255,0)), linear-gradient(160deg, #124C9F, #0A2E6C 44%, #061C49); }
#champion-appearance > p#champion-evolution { margin:2px 0 10px; font:italic 800 15px/1.15 var(--f-titre); color:var(--or-clair); text-shadow:0 1px 2px rgba(0,5,17,.7); }
#champion-appearance .profile-storage-actions > button { min-height:92px; padding:50px 8px 12px; font-size:17px; line-height:1; text-wrap:balance; }
#champion-appearance .profile-storage-actions > button::after { content:''; position:absolute; left:50%; top:9px; width:38px; height:38px; margin-left:-19px; pointer-events:none;
background:linear-gradient(160deg, #FFFFFF, #9FE6FF 55%, #4CC8FF); filter:drop-shadow(0 2px 0 rgba(0,30,90,.7)) drop-shadow(0 0 6px rgba(90,200,255,.6));
-webkit-mask:var(--ic-marteau) center / contain no-repeat; mask:var(--ic-marteau) center / contain no-repeat; }
#champion-appearance .profile-storage-actions > button[data-champion-look="crown"]::after { width:66px; margin-left:-33px;
-webkit-mask:var(--ic-epee) left center / 36px 36px no-repeat, var(--ic-bouclier) right center / 32px 32px no-repeat; mask:var(--ic-epee) left center / 36px 36px no-repeat, var(--ic-bouclier) right center / 32px 32px no-repeat; }
#champion-appearance .profile-storage-actions > button[aria-pressed="true"]::after { background:linear-gradient(160deg, #FFFFFF, #E6F8FF 60%, #BFEFFF); }
#champion-appearance .profile-storage-actions > button:disabled::after { background:#8FB4D8; filter:none; }
/* l'arme pas encore offerte : tuile nuit de la famille (plus une masse grise), silhouette éteinte et cadenas bleu gris au coin */
#champion-appearance .profile-storage-actions > button:disabled { color:#B4C8DD; }
#champion-appearance .profile-storage-actions > button:disabled::before { --pb-face:linear-gradient(180deg, rgba(150,230,255,.08) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #123A6E, #0A2550 55%, #071A38); --pb-arete:inset 0 1px 0 rgba(120,200,255,.5), inset 0 0 0 1px rgba(70,150,220,.55); --pb-tranche:0 4px 0 #04142E; }
#champion-appearance .profile-storage-actions > button:disabled::after { left:10px; right:12px; width:auto; margin-left:0;
-webkit-mask:var(--ic-marteau) center / 38px 38px no-repeat, var(--ic-verrou) right top / 15px 15px no-repeat; mask:var(--ic-marteau) center / 38px 38px no-repeat, var(--ic-verrou) right top / 15px 15px no-repeat; }
#champion-appearance > p#champion-appearance-hint { margin:10px 0 0; color:#D6E4F2; }
/* le texte de prestige du Champion, rangé ici par src/ui/monde-cap26.js (il se lisait dans le bloc de sauvegarde) */
#champion-appearance > p#champion-owned { margin:5px 0 0; font-size:var(--fs-legende); color:#9FBBD8; }
#champion-appearance > p#champion-appearance-hint { font-size:var(--fs-legende); }
/* ================================================================ troisième tour (6 octobre 2026) : accueil, cycle de vie, Paramètres
Bloc posé en fin de feuille, après ses règles de base. */
/* Cartouche d'objectif : il dit le GAIN (« Donjon → aspect 7 ») avec la vignette de l'aspect à gagner, son prix, et l'horizon
de la Cité en troisième ligne (la plaque d'époque du haut est retirée : un seul message d'objectif). Face cobalt biseautée
(un biseau clair, une tranche sombre) : c'est la prochaine action de la Cité, plus une ligne d'information éteinte. */
#progression-next { min-height:56px; padding:7px 8px 9px 60px; row-gap:2px; }
#progression-next::before { inset:0 0 3px; background:radial-gradient(60% 120% at 6% 40%, rgba(60,170,255,.34), rgba(60,170,255,0)), linear-gradient(110deg, rgba(18,76,159,.96), rgba(10,46,108,.96) 55%, rgba(7,28,69,.96));
box-shadow:inset 0 1px 0 rgba(160,230,255,.75), inset 0 0 0 1px #3AA9F2, 0 3px 0 #03122B, 0 0 12px rgba(20,130,255,.35), 0 7px 10px rgba(0,5,17,.5); }
#progression-next.payable::before { background:radial-gradient(60% 120% at 6% 40%, rgba(255,200,70,.34), rgba(255,200,70,0)), linear-gradient(110deg, rgba(18,76,159,.96), rgba(10,46,108,.96) 55%, rgba(7,28,69,.96));
box-shadow:inset 0 1px 0 rgba(255,236,160,.8), inset 0 0 0 1.5px #E8B64C, 0 3px 0 #03122B, 0 0 14px rgba(255,190,60,.5), 0 7px 10px rgba(0,5,17,.5); }
#progression-next .objectif-vignette { position:absolute; left:7px; top:50%; width:48px; height:48px; margin-top:-26px; object-fit:contain; pointer-events:none; filter:drop-shadow(0 2px 2px rgba(0,5,17,.6)); }
#progression-next .objectif-vignette[hidden] { display:none; }
#progression-next:has(.objectif-vignette:not([hidden])) strong::before { display:none; }
#progression-next:not(:has(.objectif-vignette:not([hidden]))) { padding-left:46px; }
#progression-next em { display:block; grid-column:1; margin:2px 0 0; padding:0; border:0; font:600 var(--fs-legende)/1.15 var(--f-texte); font-style:normal; color:#A9DCFF; text-wrap:balance; }
#progression-next em[hidden] { display:none; }
#progression-next::after { grid-row:1 / span 3; }
/* la zone réservée de la garnison : quand son écusson paraît au-dessus d'« Attaquer », le cartouche monte d'autant */
.screen.home:has(#home-battle-garnison:not([hidden])) #progression-next { bottom:calc(var(--nav-h) + 88px + 33px); }
/* Bandeau de sauvegarde : un pictogramme d'alerte, une phrase courte (« Progression non enregistrée », « Partie ouverte
ailleurs »), un bouton de largeur stable et DISTINCT des actions ordinaires (bleu vif : c'est le geste qui répare). */
#save-warning { gap:9px; padding:6px 10px 8px 12px; min-height:54px; box-sizing:border-box; }
#save-warning > span { display:flex; align-items:center; gap:8px; min-width:0; font:italic 800 16px/1.1 var(--f-titre); text-wrap:balance; }
#save-warning > span::before { content:''; flex:none; width:22px; height:22px; background:#FF8A5E; -webkit-mask:var(--ic-alerte) center / contain no-repeat; mask:var(--ic-alerte) center / contain no-repeat; }
#save-warning.decor { --bord:#3AA9F2; --halo:rgba(20,120,255,.4); }
#save-warning.decor > span::before { background:#6FE0FF; }
#save-warning > button { flex:none; min-width:118px; white-space:nowrap;
--pb-face:linear-gradient(180deg, rgba(150,230,255,.12) 0 42%, rgba(150,230,255,0) 44%), linear-gradient(180deg, #2EA2FF, #1C88F4 30%, #0A66E0 55%, #0558D4);
--pb-arete:inset 0 2px 0 #B6F0FF, inset 0 0 0 1px #7FDFFF; --pb-tranche:0 1px 0 #03307F, 0 4px 0 #0443BD, 0 0 12px rgba(70,180,255,.6); }
/* Message du départ (« Levée 7 + garnison 12 », rappel d'une bataille reprise, consigne de visée) : une plaque de la
famille, cobalt à arête claire, plus une pastille noire. Seuls les messages du bas (guide) sont concernés. */
#toast.guide { isolation:isolate; padding:8px 18px 11px; border-radius:0; background:none; box-shadow:none; font:italic 800 17px/1.15 var(--f-titre); color:var(--blanc); text-shadow:0 2px 1px rgba(0,12,40,.6); }
#toast.guide::before { content:''; position:absolute; inset:0 0 3px; z-index:-1; border-radius:3px; transform:skewX(var(--biais));
background:radial-gradient(60% 120% at 8% 0, rgba(70,180,255,.45), rgba(70,180,255,0)), linear-gradient(160deg, #124C9F, #0A2E6C 50%, #061C49);
box-shadow:inset 0 1px 0 rgba(170,240,255,.85), inset 0 0 0 1.5px #3FAEEA, 0 3px 0 #03122B, 0 0 14px rgba(30,150,255,.45), 0 7px 12px rgba(0,5,17,.5); }
#toast.guide .picon { color:#9FE6FF; }
/* « Recommencer la campagne » : une plaque de confirmation DÉDIÉE. Ce qui repart de zéro (braise), ce qui est gardé (azur),
puis « Annuler » voisin de « Recommencer à zéro » (le geste sans retour à droite, en braise vive). */
.profile-storage > .recommence-plaque { position:relative; isolation:isolate; margin-top:12px; padding:12px 14px 14px; display:flex; flex-direction:column; gap:9px; }
.profile-storage > .recommence-plaque[hidden] { display:none; }
.recommence-plaque::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:3px; transform:skewX(calc(var(--biais) / 3));
background:radial-gradient(70% 90px at 8% 0, rgba(255,110,60,.3), rgba(255,110,60,0)), linear-gradient(160deg, #3A1509, #24100F 55%, #150A12);
box-shadow:inset 0 1px 0 rgba(255,190,160,.55), inset 0 0 0 1.5px #FF7A52, 0 3px 0 #120503, 0 0 14px rgba(255,100,60,.3); }
.recommence-plaque h4 { margin:0; font:italic 900 21px/1.05 var(--f-titre); color:#FFF1EA; text-shadow:0 2px 0 rgba(90,20,5,.7); }
.profile-storage > .recommence-plaque > p { margin:0; display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:9px; row-gap:2px; align-items:start; font:500 13px/1.3 var(--f-texte); color:#F2DCD3; }
.recommence-plaque > p::before { content:''; grid-row:1 / span 2; width:22px; height:22px; margin-top:1px; background:#FF8A5E; -webkit-mask:var(--ic-rejouer, var(--ic-alerte)) center / contain no-repeat; mask:var(--ic-rejouer, var(--ic-alerte)) center / contain no-repeat; }
.recommence-plaque > p.recommence-garde::before { background:#6FE0FF; -webkit-mask-image:var(--ic-valider); mask-image:var(--ic-valider); }
.recommence-plaque > p b { grid-column:2; font:italic 800 16px/1 var(--f-titre); color:#FFB59C; }
.recommence-plaque > p.recommence-garde b { color:#9FE6FF; }
.recommence-plaque > p span { grid-column:2; }
.recommence-actions { display:flex; gap:12px; margin-top:3px; }
.profile-storage .recommence-actions > button { flex:1 1 0; min-width:0; min-height:48px; padding-inline:8px; font-size:17px; white-space:nowrap; }
.profile-storage .recommence-actions > .recommence-confirmer { flex:1.7 1 0; }
.profile-storage .recommence-actions > .recommence-confirmer { color:var(--blanc); }
.profile-storage .recommence-actions > .recommence-confirmer::before { --pb-face:linear-gradient(180deg, rgba(255,255,255,.14) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #F08A62, #E0673A 45%, #9C3316); --pb-arete:inset 0 2px 0 #FFD0C0, inset 0 0 0 1px #FFB199; --pb-tranche:0 4px 0 #5A1C0A, 0 0 14px rgba(255,110,70,.6); }
.profile-storage > button.recommence-campagne[hidden] { display:none; }
/* Paramètres, Champion : les deux armes sont ILLUSTRÉES (emblèmes peints) au-dessus de leur nom. L'arme portée est bleu vif
sous une coche or ; l'arme pas encore offerte garde ses couleurs, atténuées, sous un petit verrou (jamais une masse grise). */
#champion-appearance .profile-storage-actions > button { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; min-height:112px; padding:9px 8px 14px; font-size:17px; line-height:1; text-wrap:balance; }
#champion-appearance .profile-storage-actions > button::after, #champion-appearance .profile-storage-actions > button[data-champion-look="crown"]::after { content:none; }
#champion-appearance .profile-storage-actions > button > img { display:block; width:64px; height:64px; object-fit:contain; pointer-events:none; user-select:none; filter:drop-shadow(0 3px 0 rgba(0,20,70,.7)) drop-shadow(0 0 7px rgba(90,200,255,.45)); }
#champion-appearance .profile-storage-actions > button[aria-pressed="true"]::after { content:''; position:absolute; left:auto; right:9px; top:7px; width:20px; height:20px; margin:0; border-radius:50%; pointer-events:none; filter:none; -webkit-mask:none; mask:none;
background:url("data:image/svg+xml,") center / 14px 14px no-repeat, linear-gradient(180deg, #FFE98A, #F2B93A);
box-shadow:inset 0 1px 0 #FFF9D0, 0 0 0 2px #071226, 0 2px 3px rgba(0,5,17,.5); }
#champion-appearance .profile-storage-actions > button:disabled > img { opacity:.62; filter:saturate(.7) drop-shadow(0 3px 0 rgba(0,20,70,.7)); }
#champion-appearance .profile-storage-actions > button:disabled::after { content:''; position:absolute; left:auto; right:9px; top:7px; width:20px; height:20px; margin:0; border-radius:50%; pointer-events:none; filter:none; -webkit-mask:none; mask:none;
background:var(--ic-verrou) center / 11px 11px no-repeat, linear-gradient(180deg, #E6F4FF, #8FC0EE); box-shadow:inset 0 1px 0 #fff, 0 0 0 2px #06142B; }
/* Paramètres : moins d'aplats nus. Chaque groupe porte un sceau en losange à son pictogramme devant son titre, une barre
claire à gauche et un reflet oblique sur sa face ; chaque réglage est une plaque cobalt biseautée (un biseau clair, une
tranche sombre), l'interrupteur allumé est bleu vif. */
/* le Champion garde son heaume peint devant le titre : pas de sceau */
[data-screen="settings"] .option-line { isolation:isolate; min-height:50px; margin:6px 0 4px; padding:4px 14px 6px 14px; }
[data-screen="settings"] .option-line + .option-line { border-top:0; }
[data-screen="settings"] .option-line::before { content:''; position:absolute; inset:0 0 2px; z-index:-1; pointer-events:none; border-radius:3px; transform:skewX(calc(var(--biais) / 2));
background:linear-gradient(180deg, rgba(150,230,255,.10) 0 46%, rgba(150,230,255,0) 48%), linear-gradient(180deg, #164C96, #0D3470 55%, #0A2858);
box-shadow:inset 0 1px 0 rgba(160,230,255,.7), inset 0 0 0 1px rgba(70,160,235,.55), 0 2px 0 #041634, 0 4px 6px rgba(0,5,17,.35); }
[data-screen="settings"] .option-line:active { background:none; }
[data-screen="settings"] .option-line:active::before { filter:brightness(.88); }
[data-screen="settings"] .option-line .picon { color:#9FE6FF; }
[data-screen="settings"] .option-line small { color:#BFE9FF; }
[data-screen="settings"] .option-line i { background:#061630; box-shadow:inset 0 0 0 1.5px #4A7FB4, inset 0 2px 3px rgba(0,5,17,.6); }
[data-screen="settings"] .option-line.on i { background:linear-gradient(180deg, #46B6FF, #0A66E0); box-shadow:inset 0 1px 0 #B6F0FF, inset 0 0 0 1.5px #7FDFFF, 0 0 10px rgba(34,184,255,.6); }
/* Victoire : « Garnison gardée : 12 soldats (12 au plus) » sous « Cité ». La règle est dite ; la ligne passe sur deux lignes
équilibrées dans la largeur d'origine du bouton (62 % au plus) : la pastille de série voisine reste entière à l'écran. */
.won-haut .won-cite.garnison { max-width:62%; }
.won-cite.garnison small { font:italic 700 14px/1.1 var(--f-titre); color:var(--or-clair); white-space:normal; text-wrap:balance; text-align:left; }
/* Titre : « Niveau 6 · depuis le début · sans perte » tient sur une ligne sous « Reprendre la bataille » */
.title-continue-copy small { font:italic 700 16px/1 var(--f-titre); white-space:nowrap; }
/* Retouches du jugement indépendant (troisième tour) */
/* Bandeau de sauvegarde sur les écrans à feuille (Boutique, Missions, Chronique, Paramètres) : il RÉSERVE sa zone au-dessus
de la barre. La feuille s'arrête au-dessus de lui : plus aucun texte ni bouton dessous (la règle de base laissait défiler
le contenu sous le bandeau). */
#stage:has(> #save-warning:not([hidden])) > .screen.panel:is([data-screen="shop"], [data-screen="missions"], [data-screen="lore"], [data-screen="settings"]) .scroll-area { margin-bottom:66px; padding-bottom:10px; }
/* le Champion en trois lignes nommées (rang, armes, prestige) ; le Marteau pas encore offert dit son niveau sur sa tuile */
#champion-appearance .profile-storage-actions > button > small { font:italic 800 var(--fs-legende)/1 var(--f-titre); color:var(--or-clair); }
#champion-appearance .profile-storage-actions > button > small[hidden], #champion-appearance > p[hidden] { display:none; }
#champion-appearance > p#champion-owned { margin:8px 0 0; font:italic 800 15px/1.15 var(--f-titre); color:#BFE9FF; }
/* Bandeau de sauvegarde, second jet du troisième tour (jugement : « place disproportionnée ») : une réglette de 46 points
au lieu d'un bloc de 58. Le fait sur une ligne, sa conséquence dessous en petit (« Rien ne s'enregistre ici »), le bouton
garde 44 points de cible sous une face plus basse. */
#save-warning { gap:8px; min-height:46px; padding:1px 4px 1px 11px; }
#save-warning > span { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:8px; row-gap:1px; font:italic 800 15px/1.05 var(--f-titre); white-space:nowrap; text-wrap:nowrap; }
#save-warning > span::before { grid-row:1 / span 2; width:19px; height:19px; }
#save-warning > span::after { content:attr(data-detail); grid-column:2; font:italic 700 var(--fs-legende)/1 var(--f-titre); color:#FFC9B6; }
#save-warning > span[data-detail=""]::after, #save-warning > span:not([data-detail])::after { display:none; }
#save-warning > button { min-width:0; min-height:44px; padding:5px 13px 9px; font-size:16px; }
#save-warning > button::before { inset:5px 2px 8px; }
#stage:has(> #save-warning:not([hidden])) > .screen.panel:is([data-screen="shop"], [data-screen="missions"], [data-screen="lore"], [data-screen="settings"]) .scroll-area { margin-bottom:58px; }
/* Accueil, second jet : UN message d'objectif à la fois. Le cartouche dit le gain et son prix ; l'horizon de Cité (« Village :
1 sur 3 bâtiments… ») ne s'empile plus dessous, la pile du bas (objectif, garnison, Attaquer) s'allège d'une ligne. */
#progression-next > em { display:none; }
/* Victoire : « Vidéo ×2 » dit la condition du doublement */
.won-video-lbl { font-size:27px; }
/* « Garnison gardée : 12 / 12 » tient sur une ligne : la plaque « Cité » redevient basse et ne dispute rien à « Victoire » */
.won-cite.garnison small { white-space:nowrap; }
.won-haut .won-cite.garnison { max-width:66%; }
.won-video { gap:9px; }
.won-video-n b { font-size:32px; }
/* Titre : le logo peint d'Arcmarch (mot, heaume, écu, épées) remplace le grand mot blanc. Le
garde son texte pour le
lecteur d'écran ; la classe .peint n'est posée qu'une fois l'image chargée (src/ui/monde-cap26.js). */
.title-wordmark.peint { width:min(324px, 90vw); aspect-ratio:960 / 557; margin-top:-6px; overflow:hidden; font-size:0; line-height:0; color:transparent; text-shadow:none;
background:var(--logo) center / contain no-repeat; filter:drop-shadow(0 7px 8px rgba(0,5,17,.5)); }
/* Paramètres, second jet du troisième tour.
Champion : les deux armes en tuiles BASSES (emblème à gauche, nom à droite) : la carte ne repousse plus la progression.
Confirmation « Recommencer la campagne » : la plaque n'est plus un cadre corail DANS le cadre bleu du groupe ; ouverte,
elle EST le groupe (ses autres commandes se taisent, son liseré passe au corail). Trois lignes nommées : ce qui repart de
zéro, ce qui est gardé, la copie de secours. Le libellé du bouton de confirmation a ses marges. */
#champion-appearance .profile-storage-actions > button { flex-direction:row; justify-content:flex-start; gap:7px; min-height:66px; padding:5px 10px 10px 8px; font-size:15px; text-align:left; text-wrap:wrap; }
#champion-appearance .profile-storage-actions > button > img { flex:none; width:44px; height:44px; }
#champion-appearance .arme-copie { flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:3px; line-height:1.02; }
#champion-appearance .arme-copie > small { font:italic 800 var(--fs-legende)/1 var(--f-titre); color:var(--or-clair); white-space:nowrap; }
#champion-appearance .arme-copie > small[hidden] { display:none; }
#champion-appearance .profile-storage-actions > button[aria-pressed="true"]::after, #champion-appearance .profile-storage-actions > button:disabled::after { left:36px; right:auto; top:4px; width:17px; height:17px; }
.profile-storage > .recommence-plaque { margin-top:10px; padding:2px 2px 4px; gap:10px; }
.recommence-plaque::before { display:none; }
.recommence-plaque h4 { font-size:23px; }
.recommence-plaque > p.recommence-copie::before { background:#FFD05D; -webkit-mask-image:var(--ic-coffre); mask-image:var(--ic-coffre); }
.recommence-plaque > p.recommence-copie b { color:var(--or-clair); }
.profile-storage .recommence-actions > button { padding-inline:10px; font-size:16px; }
.profile-storage .recommence-actions > .recommence-confirmer { flex:2 1 0; }
.profile-storage .recommence-actions > .recommence-confirmer::before { --pb-face:linear-gradient(180deg, rgba(255,255,255,.14) 0 42%, rgba(255,255,255,0) 44%), linear-gradient(180deg, #E2683C, #C84E24 45%, #8A2B10); }
/* Paramètres, retouches du second jugement : moins de hauteur perdue (réglages plus bas, groupes plus serrés), « Exporter »
et « Importer » remontent dans le premier écran ; le conseil des deux armes, redit par les tuiles, se tait. */
[data-screen="settings"] .menu-feuille { padding-top:20px; }
[data-screen="settings"] .scroll-area { gap:8px; }
[data-screen="settings"] .option-line { min-height:46px; margin:4px 0 3px; }
#champion-appearance > p#champion-appearance-hint { display:none; }
#champion-appearance > p#champion-evolution { margin:0 0 7px; }
/* Titre : la carte du profil rejoint la famille (plaque nuit à filet azur et tranche, plus un rectangle arrondi presque noir) */
.title-profile, .title-nom-bloc { border-radius:4px; background:radial-gradient(70% 90px at 6% 0, rgba(40,150,255,.34), rgba(40,150,255,0)), linear-gradient(160deg, #103A72, #08204A 55%, #05142B);
box-shadow:inset 0 1px 0 rgba(156,234,255,.75), inset 0 0 0 1.5px #3AA9F2, 0 3px 0 #00305F, 0 8px 14px rgba(0,5,17,.55); color:var(--blanc); }
.title-profile-copy strong { color:var(--blanc); }
.title-level { border-left-color:rgba(120,200,255,.5); }
.title-level small { color:#BFE9FF; }
.title-level b { color:var(--or-clair); }
/* ---------------------------------------------------------------- tour 3 bis : états critiques
Le bandeau de sauvegarde (« Progression non enregistrée », « Partie ouverte ailleurs ») est une RÉGLETTE : une ligne de
36 points, un pictogramme, un bouton sobre (un filet corail, pas un second grand appel bleu à côté de l'action
principale ; sa cible tactile garde 44 points). Il se pose sous l'en-tête sur TOUS les écrans à barre : à l'accueil il
s'arrête au-dessus de la pastille du Donjon, sur le Monde et la Région la carte commence sous lui, et aux Paramètres,
à la Boutique et aux Missions il PRÉCÈDE le contenu au lieu de le suivre (il arrivait après la confirmation de
recommencement). */
#save-warning { gap:8px; min-height:36px; padding:0 3px 0 10px; }
#save-warning::before { box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1.5px var(--bord), 0 3px 8px rgba(0,5,17,.5); }
#save-warning > span { display:flex; align-items:center; gap:7px; font:italic 800 14px/1 var(--f-titre); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#save-warning > span::before { width:16px; height:16px; }
#save-warning > span::after { display:none; }
#save-warning > button { min-width:0; min-height:44px; margin:-4px 0; padding:0 11px 1px; font:italic 800 14px/1 var(--f-titre); color:#FFD9CC; text-shadow:none; white-space:nowrap; }
#save-warning > button::before { inset:9px 3px; background:rgba(255,122,82,.13); box-shadow:inset 0 0 0 1.5px #FF9B7A; }
#save-warning.decor > button { color:#CFEFFF; }
#save-warning.decor > button::before { background:rgba(58,169,242,.13); box-shadow:inset 0 0 0 1.5px #6FCBFF; }
#save-warning > button:active { transform:translateY(1px); }
#save-warning > button:focus-visible::before { outline:3px solid var(--or-clair); outline-offset:2px; }
#stage:has(> .screen[data-screen="home"]:not([hidden])) > #save-warning,
#stage:has(> .screen[data-screen="carte"]:not([hidden])) > #save-warning,
#save-warning.sur-accueil { top:calc(var(--safe-t) + 60px); bottom:auto; }
#stage:has(> .screen:is([data-screen="shop"], [data-screen="missions"], [data-screen="lore"], [data-screen="settings"]):not([hidden])) > #save-warning { top:calc(var(--safe-t) + 70px); bottom:auto; }
#stage:has(> #save-warning:not([hidden])) > .screen.panel:is([data-screen="shop"], [data-screen="missions"], [data-screen="lore"], [data-screen="settings"]) .scroll-area { margin-top:28px; margin-bottom:0; padding-bottom:10px; }
#stage:has(> #save-warning:not([hidden])) > .screen.panel[data-screen="settings"] .scroll-area { margin-top:46px; padding-bottom:22px; }
/* Paramètres : la raison d'un bouton grisé se lit au-dessus de lui */
.profile-storage > p.recommence-note.avant { display:flex; align-items:flex-start; gap:7px; margin:10px 0 6px; font:italic 700 var(--fs-libelle)/1.2 var(--f-titre); color:#FFC9B6; }
.profile-storage > p.recommence-note.avant[hidden] { display:none; }
.profile-storage > p.recommence-note.avant::before { content:''; flex:none; width:15px; height:15px; margin-top:1px; background:#FF8A5E; -webkit-mask:var(--ic-alerte) center / contain no-repeat; mask:var(--ic-alerte) center / contain no-repeat; }
/* ---------------------------------------------------------------- tour 3 bis : Paramètres
CADRES EMBOÎTÉS ALLÉGÉS. La feuille portait quatre grandes plaques à liseré, chacune pleine de plaques plus petites (un
formulaire habillé). Les groupes ne sont plus des cadres : un titre à losange souligné d'un filet, les réglages posés à
même la feuille. Seule la carte du Champion reste une plaque : c'est l'accent de la page.
TOUT TIENT AU-DESSUS DE LA BARRE à 360 × 780 : le nom n'a plus de titre de groupe au-dessus de sa seule ligne, « Son » et
« Vibrations » partagent une rangée (l'interrupteur dit l'état, plus de « activé » en bout de ligne). Sur un écran plus
court la feuille défile et s'estompe au bord bas : une commande n'est plus tranchée par la barre. */
/* une demi-rangée porte un mot et son interrupteur : le pictogramme du groupe est déjà dans le losange du titre */
[data-screen="settings"] #champion-appearance { margin-inline:0; }
[data-screen="settings"] .menu-feuille { padding-top:12px; }
[data-screen="settings"] .scroll-area { gap:6px; padding-top:8px; padding-bottom:22px;
-webkit-mask-image:linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(180deg, transparent 0, #000 9px, #000 calc(100% - 22px), transparent); }
/* LA CONFIRMATION de « Recommencer la campagne » : une vraie plaque de décision. Un biseau clair en tête, une face braise,
une tranche épaisse et sombre au pied, une ombre portée : elle a plus de relief que les boutons qu'elle porte. Les
autres groupes s'effacent tant qu'elle est ouverte (le Champion ne brille plus à côté d'une décision destructive). */
/* marge de 9 points de chaque côté : à 290 points de haut, la pente de 2° déporte les coins du cadre de 5 points, que le défilement rognait à droite */
.recommence-plaque h4 { display:flex; align-items:center; gap:9px; }
.recommence-plaque h4::before { content:''; flex:none; width:24px; height:24px; background:#FFD05D; -webkit-mask:var(--ic-alerte) center / contain no-repeat; mask:var(--ic-alerte) center / contain no-repeat; }
/* Session suspendue : message et reprise partagent une rangée, de hauteur naturelle. */
#save-warning.autre-onglet.sur-accueil:not([hidden]) {
display:grid; grid-template-columns:minmax(0,1fr) 116px; gap:8px;
padding:8px; min-height:0; --bord:#55B9EA;
}
#save-warning.autre-onglet.sur-accueil::before {
transform:skewX(calc(var(--biais) / 2)); background:#0B213B;
box-shadow:inset 0 1px 0 #92E5FF,inset 0 0 0 1px #55B9EA,0 2px 0 #071829;
}
#save-warning.autre-onglet.sur-accueil > span {
width:auto; min-width:0; white-space:normal; overflow:visible;
font:italic 800 16px/1.2 var(--f-titre); text-wrap:wrap;
}
#save-warning.autre-onglet.sur-accueil > span::before { width:20px; height:20px; background:#E2B567; }
#save-warning.autre-onglet.sur-accueil > button {
justify-self:end; width:116px; min-height:44px; margin:0; padding:8px;
color:#FFFFFF; font:italic 800 16px/1.2 var(--f-titre);
}
#save-warning.autre-onglet.sur-accueil > button::before {
inset:0; transform:skewX(calc(var(--biais) / 2)); background:#1069D4;
box-shadow:inset 0 1px 0 #B6F0FF,inset 0 0 0 1px #7FDFFF,0 2px 0 #063565;
}
/* Compacité v07 : un statut calme à côté de la seule commande de reprise.
La hauteur naturelle laisse les mots passer sur deux lignes au petit format. */
#save-warning.autre-onglet.sur-accueil:not([hidden]) {
grid-template-columns:minmax(0,1fr) 96px; gap:6px; padding:4px 6px; align-items:center;
}
#save-warning.autre-onglet.sur-accueil > span {
gap:5px; font:600 13px/1.2 var(--f-texte); text-wrap:wrap;
}
#save-warning.autre-onglet.sur-accueil > span::before { flex:none; width:14px; height:14px; }
#save-warning.autre-onglet.sur-accueil > button {
width:96px; min-width:44px; min-height:44px; padding:6px;
font:italic 800 14px/1.15 var(--f-titre);
}
/* Compacité v09 : la reprise conserve sa cible44 et ses mots ; seule la marge
de la surface existante diminue sur écran court. */
@media (max-height:700px) {
#save-warning.autre-onglet.sur-accueil:not([hidden]) { padding:2px 6px; }
}
/* Session v10 sur l'accueil : mêmes mots, bouton et cible44. La surface opaque
se resserre dans la cible ; le reste des écrans et des avertissements est intact. */
@media (max-height:700px) {
#save-warning.autre-onglet.sur-accueil:not([hidden]) {
display:flex; align-items:center; gap:8px; min-height:44px; padding:0 4px;
}
#save-warning.autre-onglet.sur-accueil::before {
inset:3px 0; background:#0B213B;
box-shadow:inset 0 0 0 1px #6097B6,0 1px 0 #071829;
}
#save-warning.autre-onglet.sur-accueil > span { flex:1; min-width:0; overflow:visible; }
#save-warning.autre-onglet.sur-accueil > button {
flex:none; width:84px; min-height:44px; padding:4px 6px;
}
#save-warning.autre-onglet.sur-accueil > button::before {
inset:3px 0; background:linear-gradient(180deg,#167CCC,#0752A2);
box-shadow:inset 0 1px 0 #B6F0FF,inset 0 0 0 1px #7FDFFF,0 1px 0 #063565;
}
}
/* Session v11 : une reprise lisible dans une surface courte, sur les deux
formats ; même bouton44 et aucun changement des autres avertissements. */
#save-warning.autre-onglet.sur-accueil:not([hidden]) {
display:flex; align-items:center; width:calc(100% - 24px); max-width:280px;
left:50%; right:auto; transform:translateX(-50%); box-sizing:border-box;
min-height:44px; gap:6px; padding:0 6px;
}
#save-warning.autre-onglet.sur-accueil::before {
inset:4px 0; border-radius:4px; transform:skewX(-4deg);
background:linear-gradient(180deg,#17354B,#0B2135);
box-shadow:inset 0 1px 0 #7C9AAF,inset 0 0 0 1px #4C718D;
}
#save-warning.autre-onglet.sur-accueil > span {
flex:1; min-width:0; gap:5px; font:600 13px/1.2 var(--f-texte);
white-space:normal; overflow:visible; text-overflow:clip;
}
#save-warning.autre-onglet.sur-accueil > button {
flex:none; width:84px; min-width:44px; min-height:44px; padding:4px;
font:italic 800 14px/1.15 var(--f-titre);
}
#save-warning.autre-onglet.sur-accueil > button::before {
inset:4px 0; border-radius:3px; transform:skewX(-4deg);
background:linear-gradient(180deg,#12689D,#0B4674);
box-shadow:inset 0 1px 0 #B6F0FF,inset 0 0 0 1px #6AB9D7;
}