/* ==== Corp/corp.css ==== */
/* ------------------------------------------------------------------
CORP — le fond du site.
Un bleu nuit profond, qui s'éclaircit légèrement vers le haut.
Les couleurs sont nommées ici une fois pour toutes ; tout le reste
du site les appelle par leur nom.
------------------------------------------------------------------ */
:root{
--nuit: #0E1118; /* le fond, en bas */
--nuit-haut: #1A2238; /* le fond, en haut : un peu plus clair */
--or: #F0CE55; /* le doré des lignes et des titres */
--or-sombre: #C9A227; /* le doré des bordures, plus mat */
--blanc: #F2F5FF; /* le blanc clair du texte */
--gris: #6E7BA0; /* le texte en retrait, les commandes au repos */
--carte: #141A28; /* le fond d'un bouton, d'une carte */
--survol: #19212F; /* le même, sous la souris */
--ligne: #232C46; /* les bordures fines */
--gris-clair:#A6B0CC; /* le texte courant, un ton sous le blanc */
--etoile-off:#8C96B4; /* une étoile de difficulté non gagnée */
--carte-2: #111725; /* le fond d'un compteur, plus profond que la carte */
--carte-nuit:#0E111D; /* le fond des cadres de la page Détails, presque la nuit (capture du user, 8 sept.) */
/* les familles, reprises de l'ancien site : une couleur par onglet, la
même sur le filet des cartes qu'il ouvre */
--bleu: #4C8DE0; /* bâtiments, et le panneau Général */
--roux: #C2703A; /* unités */
--vert: #3E9E7A; /* technologies */
--violet: #A177E0; /* capacités */
--rose: #DB6A9C; /* codex de civilisation */
--cyan: #27EEF5; /* passif */
--age1: #C9524A; /* les quatre âges, du rouge au vert — ceux de l'ancien site */
--age2: #D98A3C;
--age3: #BFAE3E;
--age4: #3E9E7A;
--nourriture:var(--age1); /* les ressources, dans les couleurs de l'ancien site — sauf le rouge : un seul rouge, celui de l'Âge I (règle du user) */
--bois: #B8763F; /* un brun, plus bois que le roux d'origine */
--or-res: #DCBE55;
--pierre: #A9B4C6;
--temps: #DCC655;
--feu: #DC8A3C; /* l'armure feu, pour les statistiques */
--pos: #63C48A; /* ce qui va bien : point fort, taux au-dessus de 50 */
--neg: var(--age1); /* ce qui va mal : point faible, taux au-dessous — le rouge de l'Âge I */
/* LE TEXTE D'INFORMATION : la présentation d'une civilisation — 15,5 px, graisse 400, gris clair */
--texte-info-taille: 15.5px;
--texte-info-graisse: 400;
--texte-info-couleur: var(--gris-clair);
/* L'INTITULÉ (user, 10 sept. au soir) : le mot d'une ligne chiffrée — « Dégâts réels » du
Combat — 12 px, graisse 600, gris clair. Les titres du Duel et de l'Armurerie le reprennent. */
--intitule-taille: 12px;
--intitule-graisse: 600;
--intitule-couleur: var(--gris-clair); /* « grisés un peu » (user, 10 sept. au soir) : le blanc clair a été essayé, puis le gris clair */
}
/* La police du site : Inter, celle d'AOE4, enregistrée dans Asset/Font — en
quatre graisses FIXES (400, 500, 600, 700), comme l'ancien site la recevait
de Google Fonts : chaque graisse est dessinée, pas interpolée, et rend plus
net qu'une police variable sur Windows (règle du user, 8 sept.).
Les graisses du site : 400 le texte courant, 600 un libellé, 700 un nombre
ou un titre. */
@font-face{font-family:"Inter";src:url("Asset/Font/Inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("Asset/Font/Inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("Asset/Font/Inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("Asset/Font/Inter-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("Asset/Font/Inter-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap} /* ExtraBold : le pourcentage du score du Duel (le « 750 » demandé n'existe pas en graisse fixe) */
@font-face{font-family:"Inter";src:url("Asset/Font/Inter-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap} /* le gras maximal (Black) : le « #1 » et l'Elo de la tête du Duel */
html{
background:var(--nuit);
}
body{
margin:0;
min-height:100vh;
font-family:"Inter", "Segoe UI", system-ui, sans-serif; /* tout le texte en hérite */
color:var(--blanc);
background:linear-gradient(180deg, var(--nuit-haut) 0%, var(--nuit) 100%) fixed;
}
/* ==== Fonction/Icone/icone.css ==== */
/* ------------------------------------------------------------------
ICÔNE — la forme, remplie de la couleur du texte. La taille est donnée
par celui qui la pose (width/height) ; ici, seulement la recette du
masque, écrite une fois pour tout le site.
------------------------------------------------------------------ */
.icone{
display:inline-block;
flex:none;
background:currentColor;
-webkit-mask-size:contain; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
mask-size:contain; mask-position:center; mask-repeat:no-repeat;
/* l'image du masque est posée en ligne par Icone.pose */
}
/* ==== Fonction/Trait/trait.css ==== */
/* ------------------------------------------------------------------
TRAIT — la ligne dorée qui s'estompe, écrite une fois pour tout le site.
1 px, de la couleur --trait-couleur (l'or), plein d'un côté, transparent
de l'autre ; le sens dit vers où elle s'efface.
------------------------------------------------------------------ */
.trait{
--trait-couleur: var(--or);
display:block;
flex:none;
background:linear-gradient(var(--trait-sens), var(--trait-couleur) 0%, transparent 100%);
}
.trait-droite{--trait-sens:90deg; height:1px; width:100%}
.trait-gauche{--trait-sens:270deg; height:1px; width:100%}
.trait-bas {--trait-sens:180deg; width:1px; height:100%}
.trait-haut {--trait-sens:0deg; width:1px; height:100%}
/* plein au milieu, effacé aux deux bouts : le dégradé va et revient */
.trait-centre{height:1px;width:100%;background:linear-gradient(90deg, transparent 0%, var(--trait-couleur) 50%, transparent 100%)}
/* ==== Fonction/BoutonDynamique/bouton-dynamique.css ==== */
/* ------------------------------------------------------------------
BOUTON DYNAMIQUE — l'apparence des onglets d'AOE4.
Une porte : un pictogramme ouvre la marche, le nom le suit. Toutes de la
même largeur, pour une rangée de portes égales. Le nom peut se retirer :
il glisse sous le bord du bouton, qui se referme sur lui — c'est l'œil
qui commande, pour tout un groupe à la fois.
Les tailles sont nommées ici une fois ; les boutons en héritent tous.
------------------------------------------------------------------ */
:root{
--bd-hauteur: 36px;
--bd-largeur: 124px; /* nom déplié : le plus long nom, « Civilisation » (74 px), avec 11 px d'air de chaque côté (8 sept.) */
--bd-fermee: 38px; /* nom retiré : 36 px élargis de 5 % (user, 8 sept.), un peu plus large que haut */
--bd-icone: 16px;
--bd-espace: 8px; /* entre deux boutons */
--bd-recherche: 260px; /* la recherche, ouverte : large, pour taper à l'aise */
}
/* ---- le groupe : une rangée, alignée à droite ---- */
.bd-groupe{
display:flex;
align-items:center;
gap:var(--bd-espace);
}
/* ---- une porte ---- */
.bd{
position:relative;
flex:none;
overflow:hidden;
display:inline-flex;
align-items:center;
justify-content:center;
width:var(--bd-largeur);
height:var(--bd-hauteur);
padding:0 10px;
box-sizing:border-box;
border:1px solid var(--ligne);
border-left:2px solid var(--or-sombre);
border-radius:4px;
background:var(--carte);
color:var(--blanc);
font-family:inherit;
font-size:12.5px;
font-weight:600;
line-height:1;
letter-spacing:.05em;
white-space:nowrap;
cursor:pointer;
box-shadow:0 12px 28px -16px #000;
transition:background-color .14s ease, border-color .14s ease, color .14s ease,
width .3s cubic-bezier(.4,0,.2,1), padding .3s cubic-bezier(.4,0,.2,1);
}
.bd:hover{background:var(--survol);border-color:var(--or-sombre);color:var(--or)}
.bd.on{background:var(--or-sombre);border-color:var(--or-sombre);color:#12160C}
/* le pictogramme : un Icone, à la taille du bouton */
.bd > .icone{
width:var(--bd-icone);
height:var(--bd-icone);
}
/* le nom, qui peut se retirer */
.bd > span{
display:block;
overflow:hidden;
white-space:nowrap;
max-width:90px;
margin-left:9px;
opacity:1;
transition:max-width .3s cubic-bezier(.4,0,.2,1), margin-left .3s cubic-bezier(.4,0,.2,1),
opacity .17s ease;
}
/* ---- le groupe replié : rien que les pictogrammes. Une porte `ferme` l'est
toujours, groupe ouvert ou non (l'Accueil, user du 8 sept.) ---- */
.bd-groupe.replie .bd,.bd.ferme{width:var(--bd-fermee);padding:0 9px}
.bd-groupe.replie .bd > span,.bd.ferme > span{max-width:0;margin-left:0;opacity:0}
/* ---- l'œil : pas une porte, un interrupteur. Nu, sans cadre.
Une fois les noms retirés, une barre se trace en diagonale. ---- */
.bd-oeil{
position:relative;
flex:none;
width:32px;
height:var(--bd-hauteur);
padding:0;
border:0;
background:none;
color:var(--or); /* ouvert : doré, les noms sont là */
cursor:pointer;
display:inline-flex;
align-items:center;
justify-content:center;
}
.bd-oeil:hover{color:var(--blanc)}
.bd-oeil[aria-pressed="true"]{color:var(--gris)} /* barré : grisé, les noms sont retirés */
/* l'œil et sa barre : deux masques empilés dans une seule boîte de 19 px,
si bien que la barre — tracée de coin à coin — passe par la pupille */
.bd-oeil-pile{
display:grid;
width:19px;
height:19px;
}
.bd-oeil-pile > .icone{
grid-area:1 / 1;
width:100%;
height:100%;
}
.bd-oeil-barre{
/* un trait de 1 px, du coin bas-gauche au coin haut-droit, bouts arrondis */
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
transform:scaleX(0);
transform-origin:center; /* elle s'ouvre depuis la pupille */
transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.bd-oeil[aria-pressed="true"] .bd-oeil-barre{transform:scaleX(1)}
/* ---- la recherche : une porte dont le nom est un champ ----
Fermée, c'est la loupe seule, dans un carré — que le groupe soit ouvert ou
replié. Ouverte d'un clic, elle s'étend et montre son champ et sa croix. */
.bd-rech{
width:var(--bd-fermee);
padding:0 9px;
justify-content:flex-start;
cursor:pointer;
}
.bd-rech > input{
flex:none;
width:0;
min-width:0;
margin-left:0;
border:0;
outline:0;
background:none;
color:var(--blanc);
font:inherit;
font-weight:400; /* ce qu'on tape n'est pas en gras, à la différence du mot « Recherche » du bouton */
letter-spacing:0;
opacity:0;
transition:opacity .17s ease, margin-left .3s cubic-bezier(.4,0,.2,1);
}
.bd-rech > input::placeholder{color:var(--gris)}
.bd-rech > input::-webkit-search-cancel-button{display:none}
.bd-rech-croix{
display:none;flex:none;
width:22px;height:22px;padding:0;
border:0;background:none;color:var(--blanc); /* blanc clair, sans fond ni bordure */
cursor:pointer;
}
.bd-rech-croix > .icone{width:16px;height:16px}
.bd-rech-croix:hover{color:var(--or)}
.bd-rech.ouverte,.bd-groupe.replie .bd-rech.ouverte{width:var(--bd-recherche);padding:0 10px;cursor:text} /* ouverte : large, groupe replié ou non */
.bd-rech.ouverte > input{opacity:1;margin-left:9px;width:auto;flex:1}
.bd-rech.ouverte > .bd-rech-croix{display:inline-flex;align-items:center;justify-content:center}
/* ==== Fonction/Page/page.css ==== */
/* ------------------------------------------------------------------
PAGE — une page dans le corps. Cachée par défaut ; Page.montre() la
révèle. Le nom en filigrane est un repère provisoire, le temps que les
pages aient un contenu.
------------------------------------------------------------------ */
.page[hidden]{display:none}
.page-nom{
margin:0;
font-size:13px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--gris);
}
/* ==== Fonction/BoutonDrapeau/bouton-drapeau.css ==== */
/* ------------------------------------------------------------------
BOUTON DRAPEAU — l'apparence de la liste des civilisations d'AOE4.
Réduite : une colonne de drapeaux, chacun ancré au milieu de sa colonne
(--bdr-colonne), à égale distance. Large : la liste ouverte d'AOE4 —
le nom, les étoiles à droite, les variantes sous leur mère — alignées,
une barre fine à gauche —, un trait entre les familles.
Le drapeau ne bouge JAMAIS entre les deux états : seul ce qui l'entoure
apparaît ou disparaît. Rien ne saute.
Les tailles sont nommées ici une fois ; les boutons en héritent tous.
------------------------------------------------------------------ */
:root{
--bdr-drapeau-l: 32px; /* le drapeau, mêmes proportions qu'AOE4, plus grand */
--bdr-drapeau-h: 18px;
--bdr-hauteur: 26px; /* une ligne, réduit */
--bdr-espace: 4px; /* entre deux lignes, réduit */
--bdr-colonne: 56px; /* la colonne où le drapeau reste, large ou réduit */
--bdr-etoile: 10px; /* une étoile : une taille ENTIÈRE, un écart entier —
sinon chacune tombe sur un demi-pixel différent
et ne se dessine pas comme sa voisine */
--bdr-etoile-ecart: 2px;
--bdr-etoiles-l: calc(3 * var(--bdr-etoile) + 2 * var(--bdr-etoile-ecart));
--bdr-nom-loupe: 1.12; /* la loupe sur le nom, plus douce que sur le drapeau */
}
/* ---- la liste ---- */
.bdr-liste{
display:flex;
flex-direction:column;
align-items:stretch;
gap:var(--bdr-espace);
width:100%;
padding:10px 0;
box-sizing:border-box;
/* si la liste défile, sa barre ne prend AUCUNE largeur : sinon elle
décalerait les drapeaux dès qu'elle paraît. La molette défile toujours. */
scrollbar-width:none;
}
.bdr-liste::-webkit-scrollbar{width:0;height:0}
/* une famille : ses boutons, et un Trait doré avant elle — dans les deux
états, avec de l'air au-dessus et au-dessous */
.bdr-groupe{display:flex;flex-direction:column;gap:var(--bdr-espace)}
.bdr-trait{
display:flex;
align-items:center;
padding:7px 0 7px 3px; /* collé au bord droit : il rejoint la ligne verticale */
}
/* le trait ne se montre qu'entre deux familles visibles : pas avant la
première, ni avant la première qui reste quand on filtre */
.bdr-trait{display:none}
.bdr-groupe:not(.cache) ~ .bdr-groupe:not(.cache) > .bdr-trait{display:flex}
/* filtrés : cachés */
.bdr.cache,.bdr-groupe.cache{display:none}
/* ---- un bouton ---- */
.bdr{
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
height:var(--bdr-hauteur);
padding-left:calc((var(--bdr-colonne) - var(--bdr-drapeau-l)) / 2); /* le drapeau au milieu de sa colonne */
padding-right:10px;
border:0;
border-radius:7px;
background:none;
color:var(--gris-clair);
font-family:inherit;
font-size:13.5px;
line-height:18px;
white-space:nowrap;
cursor:pointer;
transition:background-color .14s ease, color .14s ease;
}
/* pas de fond, ni au survol ni choisi, tant que la liste est réduite :
seul le drapeau change */
.bdr.on{font-weight:600}
/* le drapeau, dans son petit cadre : éteint au repos comme sur AOE4 —
désaturé à 70 %, opacité 72 % —, dans ses vraies couleurs quand on le
survole ou qu'il est choisi */
.bdr-drapeau{
width:var(--bdr-drapeau-l);
height:var(--bdr-drapeau-h);
flex:none;
border-radius:2px;
overflow:hidden;
box-shadow:0 0 0 1px rgba(255,255,255,.09);
filter:grayscale(.7);
opacity:.72;
transition:filter .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.bdr-drapeau > img{width:100%;height:100%;object-fit:cover;display:block}
/* survolé ou choisi : ses vraies couleurs, et un liseré doré autour — plus épais pour le choisi */
.bdr:hover .bdr-drapeau,.bdr.on .bdr-drapeau{filter:none;opacity:1;box-shadow:0 0 0 1px var(--or)}
.bdr.on .bdr-drapeau{box-shadow:0 0 0 2px var(--or)}
.bdr.on:hover .bdr-drapeau{box-shadow:0 0 0 1px var(--or)} /* survolé, même choisi : 1 px */
/* la loupe (Carrousel) sur le nom : moins forte que sur le drapeau, et
elle part du centre du drapeau, pour que le nom s'écarte avec lui */
.bdr-nom.carrousel-loupe{
--carrousel-loupe: var(--bdr-nom-loupe);
transform-origin:calc(-8px - var(--bdr-drapeau-l) / 2) center;
}
/* les étoiles hors d'un bouton (l'en-tête d'une civilisation) : visibles */
.bdr-etoiles:not(.bdr .bdr-etoiles){display:flex}
/* le nom et les étoiles : absents tant que la liste est réduite */
.bdr-nom{
display:none;
flex:0 1 auto;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
text-align:left;
/* un nom trop long se rogne, avec « … », AVANT les étoiles — même
grossi par la loupe : la place qu'on lui laisse est divisée par elle
(et moins les 3 px que la loupe, partant du centre du drapeau, lui
fait gagner à droite) */
max-width:calc((100% - var(--bdr-drapeau-l) - 16px - var(--bdr-etoiles-l)) / var(--bdr-nom-loupe) - 3px);
}
/* les étoiles : à droite, toutes à la même taille entière, centrées sur
la ligne du nom */
.bdr-etoiles{display:none;flex:none;align-items:center;gap:var(--bdr-etoile-ecart);height:var(--bdr-hauteur);margin-left:auto}
/* une étoile : un Icone, gris éteinte, doré allumée */
.bdr-etoile{
width:var(--bdr-etoile);height:var(--bdr-etoile);
color:var(--etoile-off);
}
.bdr-etoile.on{color:var(--or)}
/* un bouton du tri par difficulté : trois étoiles, les dorées disent le
niveau ; un liseré gris, toujours là, qui passe au doré quand il est
en marche ; étoiles blanches au survol */
.bdr-tri{
display:flex;
align-items:center;
height:26px;
padding:0 6px;
border:0;
border-radius:7px;
background:none;
cursor:pointer;
}
.bdr-tri .bdr-etoiles{display:flex}
.bdr-tri .bdr-etoile{transition:color .14s ease}
.bdr-tri{box-shadow:0 0 0 1px color-mix(in srgb, var(--gris) 50%, transparent);transition:box-shadow .14s ease} /* au repos : gris, à moitié */
.bdr-tri:hover .bdr-etoile.on{color:var(--blanc)}
.bdr-tri.on{box-shadow:0 0 0 1px var(--or)}
/* le nom dit en bulle, liste réduite : la même mise en forme que le nom
affiché, liste ouverte — pas celle des onglets du bandeau haut */
.infobulle.bdr-bulle{
font-size:13.5px;
font-weight:400;
letter-spacing:0;
}
/* ================================================================
LA LISTE LARGE — comme AOE4, trait pour trait
================================================================ */
/* RÈGLE : l'état large ne change RIEN de vertical — mêmes hauteurs de
ligne, mêmes écarts, mêmes traits. Les drapeaux restent exactement où
ils sont ; seuls le nom et les étoiles apparaissent, à droite. */
.bdr-liste.large .bdr-trait{padding-left:9px} /* le trait s'écarte un peu du bord, c'est tout */
/* la ligne : le drapeau à sa place, le nom, les étoiles à droite */
.bdr-liste.large .bdr-nom{display:block}
.bdr-liste.large .bdr-etoiles{display:flex}
/* survolé : le nom passe en doré — pas de fond, pas d'encadré */
.bdr-liste.large .bdr:hover{color:var(--or)}
/* choisi : le nom en doré, rien d'autre — pas de fond. Le drapeau garde
son liseré doré (2 px), les étoiles leurs couleurs. */
.bdr-liste.large .bdr.on{color:var(--or)}
/* une variante : SANS retrait — son drapeau reste aligné sur tous les
autres. Seule une barre fine, au bord gauche, la rattache à sa mère. */
.bdr-liste.large .bdr.variante{
position:relative;
}
.bdr-liste.large .bdr.variante::before{
content:"";
position:absolute;
left:3px; top:5px; bottom:5px;
width:1px;
background:var(--ligne);
}
/* ==== Fonction/Carrousel/carrousel.css ==== */
/* ------------------------------------------------------------------
CARROUSEL — la loupe au survol, pour n'importe quelle liste.
L'élément survolé grossit, les autres ne bougent pas. Une
transformation, pas une taille : rien ne bouge autour.
La liste porte la classe .carrousel ; ce qu'on survole porte
.carrousel-element, et dedans, ce qui grossit porte .carrousel-loupe
(les deux posés par Carrousel.applique). Sans cible, l'élément porte
les deux : c'est lui tout entier qui grossit. Une partie peut avoir
sa propre force : --carrousel-loupe posée sur elle.
------------------------------------------------------------------ */
.carrousel{
--carrousel-loupe: 1.40; /* le survolé */
}
.carrousel-loupe{
transform-origin:center;
transition:transform .18s cubic-bezier(.4,0,.2,1);
}
.carrousel-element:hover .carrousel-loupe,
.carrousel-element.carrousel-loupe:hover{
transform:scale(var(--carrousel-loupe));
}
/* ==== Fonction/Infobulle/infobulle.css ==== */
/* ------------------------------------------------------------------
INFOBULLE — la petite fenêtre qui nomme ce qu'on survole.
Elle a l'air d'une porte du bandeau haut — même fond, même bordure,
même filet doré à gauche, même police — sans pictogramme. Elle glisse
de quelques pixels en paraissant, et ne gêne jamais la souris.
------------------------------------------------------------------ */
.infobulle{
position:fixed;
z-index:200;
pointer-events:none;
opacity:0;
transform:translateX(-5px);
background:var(--carte);
border:1px solid var(--ligne);
border-left:2px solid var(--or-sombre);
border-radius:4px;
padding:5px 11px;
color:var(--blanc);
font-family:inherit;
font-size:12.5px;
font-weight:600;
letter-spacing:.05em;
white-space:nowrap;
box-shadow:0 12px 28px -16px #000;
transition:opacity .11s ease, transform .11s ease;
}
.infobulle.on{opacity:1;transform:translateX(0)}
/* un contenu bâti : une fenêtre plus large, où le texte va à la ligne */
.infobulle.infobulle-riche{white-space:normal;max-width:280px;padding:12px 14px;font-weight:400;letter-spacing:0}
/* ==== Fonction/CadrePublicite/cadre-publicite.css ==== */
/* ------------------------------------------------------------------
CADRE PUBLICITÉ — le rectangle au liseré rouge d'AOE4, le mot au
milieu, seul. Le rouge et le rayon sont partagés avec le Cadre Détails.
------------------------------------------------------------------ */
:root{
--cadre-rouge: #E5736A; /* le liseré, et le mot — pour les deux cadres */
--cadre-rayon: 10px;
}
.cadre-publicite{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
box-sizing:border-box;
border:1px solid var(--cadre-rouge);
border-radius:var(--cadre-rayon);
}
.cadre-publicite-mot{
color:var(--cadre-rouge);
font-size:12.5px;
font-weight:700;
letter-spacing:.1em;
text-transform:uppercase;
}
/* ==== Fonction/CadreDetails/cadre-details.css ==== */
/* ------------------------------------------------------------------
CADRE DÉTAILS — plus de liseré ni de titre : toute la place au contenu,
collé en haut, qui défile s'il est long. Le rouge et le rayon restent
ceux du Cadre Publicité (--cadre-rouge, --cadre-rayon), pour ce qui
voudrait s'en servir.
------------------------------------------------------------------ */
.cadre-details{
display:flex;
flex-direction:column;
width:100%;
height:100%;
box-sizing:border-box;
}
.cadre-details-contenu{
flex:1;
min-height:0;
overflow:auto;
scrollbar-width:none;
}
.cadre-details-contenu::-webkit-scrollbar{display:none}
/* ==== Fonction/MenuDeroulant/menu-deroulant.css ==== */
/* ------------------------------------------------------------------
MENU DÉROULANT — la liste sous le bouton : une carte du site, des
lignes qui s'éclairent au survol, le choix en cours en doré.
------------------------------------------------------------------ */
.deroulant{
position:fixed;
z-index:300;
min-width:180px;
box-sizing:border-box;
padding:4px;
overflow-y:auto;
background:var(--carte);
border:1px solid var(--ligne);
border-radius:6px;
box-shadow:0 14px 34px -14px #000;
scrollbar-width:thin;
}
.deroulant-ligne{
display:flex;
align-items:center;
gap:9px;
width:100%;
height:30px;
padding:0 9px;
border:0;
border-radius:4px;
background:none;
color:var(--gris-clair);
font-family:inherit;
font-size:13px;
text-align:left;
white-space:nowrap;
cursor:pointer;
}
.deroulant-ligne:hover{background:var(--survol);color:var(--blanc)}
.deroulant-ligne.on{color:var(--or)}
.deroulant-image{width:24px;height:15px;border-radius:2px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.deroulant-icone{width:16px;height:16px}
.deroulant-texte{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.deroulant-sous{color:var(--gris);font-size:12px}
/* un intertitre : petites capitales dorées, le trait qui s'estompe à sa suite, à mi-hauteur */
.deroulant-titre{display:flex;align-items:center;gap:8px;padding:7px 9px 3px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or);white-space:nowrap}
.deroulant-titre .trait{flex:1 1 auto;width:auto}
/* une liste d'éléments (deroulant-carre) : des vignettes carrées, pas des drapeaux */
.deroulant-carre .deroulant-image{width:22px;height:22px;border-radius:4px;object-fit:contain;background:var(--carte-2);box-shadow:none}
/* le bouton qui l'ouvre : rien d'imposé ici, chaque bouton a son style ;
.deroulant-ouvert dit seulement qu'il est ouvert */
/* ==== Fonction/Panneau/panneau.css ==== */
/* ------------------------------------------------------------------
PANNEAU — l'encadré de l'ancien site : fond carte, bordure teintée à
moitié de la couleur, le point et le titre dans la couleur, le texte
en gris clair.
------------------------------------------------------------------ */
.panneau{
--panneau-couleur: var(--bleu);
background:var(--carte);
border:1px solid color-mix(in srgb, var(--panneau-couleur) 45%, transparent);
border-radius:5px;
padding:13px 15px;
box-sizing:border-box;
}
.panneau-titre{
display:flex;
align-items:center;
gap:7px;
margin-bottom:7px;
font-size:12.5px;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--panneau-couleur);
}
.panneau-point{width:7px;height:7px;border-radius:50%;background:var(--panneau-couleur);flex:none}
.panneau-contenu p{margin:0;font-size:13.5px;line-height:1.5;color:var(--gris-clair)}
/* ==== Fonction/Taux/taux.css ==== */
/* ------------------------------------------------------------------
TAUX — le compteur de l'ancien site : fond profond, bordure teintée à
moitié de sa couleur, le titre en blanc clair, le chiffre dans la
couleur, la barre fine dessous — pleine dans la couleur, son fond dans
la même couleur assombrie (règle du user, 8 sept.).
------------------------------------------------------------------ */
.taux{
--taux-couleur: var(--gris);
display:grid;
gap:7px;
align-content:start;
padding:11px 14px 13px;
box-sizing:border-box;
background:var(--carte-2);
border:1px solid color-mix(in srgb, var(--taux-couleur) 55%, transparent);
border-radius:5px;
}
.taux-titre{
display:flex;
align-items:center;
gap:8px;
font-size:12.5px;
font-weight:700;
letter-spacing:.05em;
text-transform:uppercase;
color:var(--blanc);
}
.taux-rangee{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.taux-valeur{
font-size:23px;
font-weight:700;
line-height:1;
color:var(--taux-couleur);
font-variant-numeric:tabular-nums;
}
.taux-droite{font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--taux-couleur)}
.taux-barre{height:3px;background:color-mix(in srgb, var(--taux-couleur) 28%, var(--carte-2));border-radius:2px;overflow:hidden} /* le fond : la couleur, sombre */
.taux-barre > i{display:block;height:100%;width:0;background:var(--taux-couleur);transition:width .3s ease}
/* ==== Fonction/Barre/barre.css ==== */
/* BARRE — une ligne de 5 px, arrondie ; sa part dedans, dans sa couleur, sur
la même couleur assombrie. */
.barre{
position:relative;
display:flex;
width:100%;
height:5px;
border-radius:3px;
overflow:hidden;
}
/* une barre simple avec sa couleur : la part dans la couleur, le fond dans la
même couleur assombrie (mêlée au fond du cadre) */
.barre > i{display:block;height:100%;background:var(--barre-couleur, var(--or));transition:width .3s ease}
.barre:not(.barre-double){background:color-mix(in srgb, var(--barre-couleur, var(--ligne)) 28%, var(--carte-2))}
/* la double : bleu à gauche, rouge à droite, sur le gris des bordures */
.barre-double{background:var(--ligne)}
.barre-double > i{flex:none}
.barre-double .barre-gauche{background:var(--bleu);border-radius:3px 0 0 3px}
.barre-double .barre-droite{background:var(--neg);border-radius:0 3px 3px 0}
/* l'étincelle de la double : un trait blanc de 1 px à la démarcation, débordant un peu de la barre,
et un halo blanc très léger du côté qui gagne (user, 10 sept.) */
.barre > .barre-etincelle{position:absolute;top:-1px;bottom:-1px;height:auto;width:1px;margin-left:-.5px;background:#fff;border-radius:1px;transition:none;pointer-events:none} /* « .barre > » : plus fort que la règle des parts ; déborde d'1 px en haut et en bas (user, 10 sept.) */
/* le halo : un voile blanc étalé sur une dizaine de pixels du côté qui gagne, plus un liséré serré ;
il déborde de la barre (spread 1 px) pour se voir sur le fond du cadre (user : « je ne vois pas son halo ») */
.barre > .barre-etincelle.vers-gauche{box-shadow:-6px 0 10px 1px rgba(255,255,255,.45), -2px 0 3px rgba(255,255,255,.7)}
.barre > .barre-etincelle.vers-droite{box-shadow:6px 0 10px 1px rgba(255,255,255,.45), 2px 0 3px rgba(255,255,255,.7)}
/* ==== Fonction/Compteur/compteur.css ==== */
/* COMPTEUR — le calque SVG couvre tout son parent (qui doit être position:relative). Chaque case :
un fond éteint en blanc très léger ; par-dessus, le plein dans la couleur (--compteur-couleur,
posée par l'appelant) et son halo flou, tracés sur la fraction allumée de la case (dasharray,
compteur.js). La lumière s'allume en douceur. */
.compteur{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.compteur-fond{stroke:rgba(255,255,255,.13)}
.compteur-case{stroke:var(--compteur-couleur, var(--or));stroke-linecap:butt;transition:stroke-dasharray .4s ease}
.compteur-halo{stroke:var(--compteur-couleur, var(--or));opacity:.8;transition:stroke-dasharray .4s ease}
.compteur-case:not(.allumee),.compteur-halo:not(.allumee){visibility:hidden} /* rien à tracer : on cache (pas de point parasite) */
/* ==== Fonction/Onglets/onglets.css ==== */
/* ------------------------------------------------------------------
ONGLETS — la rangée de l'ancien site. Un onglet grossit au survol et
garde sa taille une fois retenu : c'est une transformation, la place
ne change pas, rien ne bouge autour.
------------------------------------------------------------------ */
.onglets{
--onglets-actif: var(--or);
padding:10px 0 0;
}
.onglets-rangee{display:flex;flex-wrap:wrap;gap:4px;padding-bottom:6px}
.onglets-trait{--trait-couleur: var(--onglets-actif)}
.onglet{
--onglet-couleur: var(--or);
display:flex;
align-items:center;
gap:8px;
padding:6px 13px 6px 11px;
border:1px solid transparent;
border-radius:5px;
background:none;
color:var(--gris);
font-family:inherit;
font-size:12px;
font-weight:700;
letter-spacing:.04em;
text-transform:uppercase;
cursor:pointer;
transition:transform .14s ease, color .14s ease;
}
.onglet-icone{width:20px;height:20px;transition:color .15s ease}
.onglet:hover,.onglet.on{transform:scale(1.07);color:var(--onglet-couleur)}
/* une rangée de tri : les mêmes mots, plus petits, plus serrés, sans trait */
.onglets-tri{padding:4px 0 0}
.onglets-tri .onglets-rangee{gap:2px;padding-bottom:4px}
.onglets-tri .onglet{padding:5px 10px;font-size:11.5px;letter-spacing:.06em}
/* ==== Fonction/MotsCles/mots-cles.css ==== */
/* ------------------------------------------------------------------
MOTS-CLÉS — un nom d'élément dans un texte : en gras, dans la couleur
de sa famille. Pas de soulignement : la couleur et la graisse suffisent.
------------------------------------------------------------------ */
.mot{font-weight:700;cursor:pointer;border-radius:2px}
.mot-u{color:var(--roux)}
.mot-b{color:var(--bleu)}
.mot-t{color:var(--vert)}
.mot-c{color:var(--violet)}
.mot-p{color:var(--cyan)} /* un passif */
.mot:hover{background:color-mix(in srgb, currentColor 18%, transparent)}
.mot-attente{color:var(--neg);cursor:default} /* un mot-clé validé dont la page n'existe pas encore (user, 10 sept.) */
.mot-attente:hover{background:none}
/* ==== Fonction/Carte/carte.css ==== */
/* ------------------------------------------------------------------
CARTE — la carte de l'ancien site, trait pour trait : fond carte,
bordure fine, filet de 2 px à gauche dans la couleur de la famille,
rayon 5, 19 px × 22 px d'air. Le nom en 15,5 px dans la couleur.
Compacte : l'illustration à gauche dans un cadre de 42 px, le type sous
le nom en blanc grisé. Texte : la première ligne en blanc et en gras,
les suivantes en gris ; points forts en vert, faibles en rouge ;
étiquettes en pied ; une note signalée par une étiquette dorée.
------------------------------------------------------------------ */
.carte{
--carte-couleur: var(--or);
display:flex;
gap:12px;
align-items:flex-start;
width:100%;
box-sizing:border-box;
text-align:left;
background:var(--carte);
border:1px solid var(--ligne);
border-left:2px solid var(--carte-couleur);
border-radius:5px;
padding:19px 22px;
color:var(--gris-clair);
font-family:inherit;
}
.carte-compacte{padding:14px 18px 14px 16px}
.carte-ouvrable{cursor:pointer;transition:background-color .14s ease, border-color .14s ease}
.carte-ouvrable:hover{background:var(--survol);border-color:var(--carte-couleur)}
/* l'illustration : un cadre sombre, l'image dedans */
.carte-image{
flex:none;
width:42px;height:42px;
box-sizing:border-box;
border:1px solid var(--ligne);
border-radius:4px;
background:var(--carte-2);
overflow:hidden;
}
.carte-image > img{width:100%;height:100%;object-fit:cover;display:block}
.carte-co{flex:1;min-width:0}
.carte-tt{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.carte-titre{
margin:0;
font-size:15.5px;
font-weight:700;
letter-spacing:.03em;
color:var(--carte-couleur);
}
.carte-compacte .carte-titre{letter-spacing:0}
/* « Unique » : une étoile et le mot, en doré, à côté du nom */
.carte-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--or);white-space:nowrap}
.carte-badge-etoile{width:9px;height:9px}
/* le type, sous le nom : en blanc grisé, pas en blanc */
.carte-sous{margin:3px 0 0;font-size:12.5px;font-weight:600;color:var(--gris-clair)}
.carte-corps:empty{display:none}
.carte-titre + .carte-corps:not(:empty),.carte-tt + .carte-corps:not(:empty){margin-top:6px}
.carte-ligne{margin:0;font-size:13.5px;line-height:1.55}
.carte-lead{font-weight:400;color:var(--blanc)} /* le texte sous le nom : en blanc clair (user, 10 sept. : « blanc clair le texte ! ») */
.carte-compacte .carte-lead{color:var(--gris-clair)} /* sur une carte compacte, le type sous le nom reste grisé (user, 8 sept.) */
.carte-suite{color:var(--gris);margin-top:6px} /* la ligne détachée : en gris, à la même distance du texte que le texte du titre (user, 10 sept.) */
.carte-explication{margin-top:8px;color:var(--gris-clair)}
.carte-point{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12.5px;line-height:1.45}
.carte-point > b{flex:none;font-weight:700;opacity:.85}
.carte-lead + .carte-point,.carte-suite + .carte-point,.carte-explication + .carte-point{margin-top:10px}
.carte-point + .carte-point{margin-top:2px}
.carte-plus{color:var(--pos)}
.carte-moins{color:var(--neg)}
/* les étiquettes en pied : petites, encadrées ; « vert » pour ce qui se débloque */
.carte-pied{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.carte-etiquette{
font-size:10px;font-weight:600;letter-spacing:.04em;
border:1px solid var(--ligne);border-radius:3px;padding:2px 7px;
color:var(--gris);
}
.carte-etiquette-vert{border-color:var(--pos);color:var(--pos);background:color-mix(in srgb, var(--pos) 12%, transparent)}
.carte-etiquette .mot{font-weight:700}
/* une note : l'étiquette dorée, puis le texte en gris */
.carte-note{display:flex;align-items:baseline;gap:9px;margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--gris-clair)}
.carte-note-etiquette{
flex:none;
font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
border:1px solid var(--or);border-radius:3px;padding:2px 6px;
color:var(--or);
}
/* ==== Fonction/Pli/pli.css ==== */
/* ------------------------------------------------------------------
PLI — la ligne de titre d'un groupe : chevron, mot en capitales, Trait
dans la couleur (le jaune clair du site par défaut). Le chevron pointe
vers le bas quand le groupe est déplié, vers la droite quand il est
replié.
------------------------------------------------------------------ */
.pli{--pli-couleur: var(--or);margin:0 0 10px}
.pli-tete{
display:flex;
align-items:center;
gap:11px;
width:100%;
margin:0;
padding:12px 0 8px 4px;
border:0;
background:none;
color:var(--pli-couleur);
font-family:inherit;
font-size:11.5px;
font-weight:700;
letter-spacing:.09em;
text-transform:uppercase;
text-align:left;
cursor:pointer;
}
.pli-tete:hover{color:var(--blanc)}
.pli-chevron{width:10px;height:10px;transform:rotate(90deg);transition:transform .14s ease}
.pli.replie .pli-chevron{transform:rotate(0deg)}
.pli-titre{flex:none}
.pli-trait{flex:1;width:auto;--trait-couleur: var(--pli-couleur)}
.pli-corps{display:grid;grid-template-columns:1fr;gap:9px}
.pli-corps[hidden]{display:none}
/* ==== Fonction/Bloc/bloc.css ==== */
/* ------------------------------------------------------------------
BLOC — le cadre des détails : fond carte, bordure fine, filet de 3 px
à gauche dans la couleur, rayon 8, 14 px d'air. Vide, il n'est pas là.
À tête : le titre tel quel dans la couleur, le sous-titre en blanc
grisé dessous, le chevron à droite (vers le bas replié, vers le haut
déplié) ; replié, seule la tête reste.
------------------------------------------------------------------ */
.bloc{
--bloc-couleur: var(--or);
position:relative;
background:var(--carte);
border:1px solid var(--ligne);
border-left:3px solid var(--bloc-couleur);
border-radius:8px;
padding:14px;
color:var(--gris-clair);
}
.bloc[hidden]{display:none}
.bloc-corps[hidden]{display:none}
/* la tête */
.bloc-tete{
display:flex;align-items:flex-start;gap:10px;
width:100%;
margin:0;padding:0;
border:0;background:none;
color:inherit;font-family:inherit;
text-align:left;
cursor:pointer;
}
.bloc-mots{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bloc-titre{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--bloc-titre-couleur, var(--bloc-couleur))}
.bloc-sous{font-size:12.5px;font-weight:400;color:var(--gris-clair)}
.bloc-chevron{flex:none;width:12px;height:12px;margin-top:2px;color:var(--bloc-couleur);transform:rotate(-90deg);transition:transform .14s ease} /* déplié : vers le haut */
.bloc.replie .bloc-chevron{transform:rotate(90deg)} /* replié : vers le bas */
.bloc-tete:hover .bloc-chevron{color:var(--blanc)}
.bloc-a-tete > .bloc-corps{margin-top:10px}
/* ==== Fonction/Jauge/jauge.css ==== */
/* JAUGE — 5 px de haut, les segments séparés de 2 px, le reste en sombre */
.jauge{display:flex;gap:2px;width:100%;height:5px;border-radius:3px;overflow:hidden}
.jauge-segment{display:block;height:100%;flex:none;background:var(--or)}
.jauge-reste{display:block;height:100%;flex:none;background:#1E293D}
/* ==== Fonction/Fond/fond.css ==== */
/* ------------------------------------------------------------------
FOND — le voile de l'ancien site, repris tel quel : l'image étirée sur
toute la place (100 % × 100 %), débordant de 60 px pour que le flou
n'ait pas de bord, à 18 % d'opacité, floutée à 40 px et un peu
saturée. Fixe : la page défile, le voile ne bouge pas.
------------------------------------------------------------------ */
:root{
--fond-opacite: .18;
--fond-flou: 40px;
}
.fond{
position:fixed;
top:var(--bandeau-haut);
left:var(--bandeau-gauche);
right:0;
bottom:0;
z-index:0; /* au-dessus du fond du site, sous le corps et les bandeaux */
pointer-events:none;
overflow:hidden;
opacity:0;
transition:opacity .4s ease, left .3s cubic-bezier(.4,0,.2,1); /* il suit le bandeau gauche */
}
.fond.on{opacity:1}
.fond-image{
position:absolute;
inset:-60px; /* déborde : le flou ne laisse pas de bord clair */
background-size:100% 100%;
background-repeat:no-repeat;
opacity:var(--fond-opacite);
filter:blur(var(--fond-flou)) saturate(1.5);
}
/* le décor NET d'une civilisation (Asset/Fonds/Civilisations, les images du
user) : l'image telle quelle, en couverture, sans flou, dans un CADRE — pas
toute la place : centré, 14 % de marge de chaque côté, la moitié haute de
l'écran (le cadre rouge du user, 8 sept.) — et ses bords s'estompent, en
haut, en bas et sur les côtés (un masque : deux dégradés croisés). */
:root{
--fond-opacite-nette: .55;
--fond-cadre-cote: 14%; /* la marge de chaque côté du cadre */
--fond-cadre-haut: 52%; /* la hauteur du cadre, depuis le haut */
--fond-estompe-cote: 18%; /* la largeur de l'estompe sur les côtés (du cadre) */
--fond-estompe-bas: 40%; /* la hauteur de l'estompe en bas (du cadre) */
--fond-estompe-haut: 8%; /* en haut */
}
.fond.nette .fond-image{
inset:0 var(--fond-cadre-cote) auto;
height:var(--fond-cadre-haut);
background-size:cover;
background-position:center center;
opacity:var(--fond-opacite-nette);
filter:none;
-webkit-mask-image:
linear-gradient(to right, transparent, #000 var(--fond-estompe-cote), #000 calc(100% - var(--fond-estompe-cote)), transparent),
linear-gradient(to bottom, transparent, #000 var(--fond-estompe-haut), #000 calc(100% - var(--fond-estompe-bas)), transparent);
mask-image:
linear-gradient(to right, transparent, #000 var(--fond-estompe-cote), #000 calc(100% - var(--fond-estompe-cote)), transparent),
linear-gradient(to bottom, transparent, #000 var(--fond-estompe-haut), #000 calc(100% - var(--fond-estompe-bas)), transparent);
-webkit-mask-composite:source-in;
mask-composite:intersect;
}
/* la variante LADDER (Fond.pose('…/ladder.webp', {nette, variante:'ladder'})) : le
placement choisi par le user dans la maquette (15 sept.). Les estompes et
l'opacité restent celles du décor net ; seuls changent le CADRE d'estompe et la
place de l'IMAGE, tous deux en % de la zone du fond (l'écran moins les bandeaux
haut et gauche) — l'image est posée par rapport à la zone, pas au cadre, d'où
les calculs sur la taille de la zone. */
.fond.ladder{
--fond-zone-l: calc(100vw - var(--bandeau-gauche));
--fond-zone-h: calc(100vh - var(--bandeau-haut));
/* toutes les valeurs en FRACTION de la zone (largeur pour gauche/largeur, hauteur pour haut/hauteur) */
--fond-ladder-cadre-gauche: .04;
--fond-ladder-cadre-haut: 0;
--fond-ladder-cadre-largeur: .92;
--fond-ladder-cadre-hauteur: .52;
/* pas de « gauche » pour l'image : son bord DROIT touche la ligne rouge de la
Publicité (le bord gauche du bandeau droit), sur tous les écrans (user, 15 sept.) */
--fond-ladder-image-decalage: 50px; /* …puis décalée de 50 px vers la droite, sous la Publicité (user, 15 sept.) */
--fond-ladder-image-estompe: 12%; /* l'estompe des bords gauche et droit de l'IMAGE, en % de sa largeur (user, 15 sept.) */
--fond-ladder-image-haut: -.024;
--fond-ladder-image-largeur: .605; /* la hauteur de l'image suit ses proportions */
}
.fond.ladder .fond-image{
/* l'image est placée dans la ZONE. En largeur, son bord droit est sur la ligne
rouge de la Publicité (+ le décalage) : zone - bandeau droit - largeur de
l'image, moins la place du cadre. En hauteur : (image - cadre) × zone.
--fond-ladder-x sert deux fois : à l'image et à l'estompe de ses bords. */
--fond-ladder-l: calc(var(--fond-ladder-image-largeur) * var(--fond-zone-l));
--fond-ladder-x: calc(var(--fond-zone-l) - var(--bandeau-droit, 387px) + var(--fond-ladder-image-decalage, 0px) - (var(--fond-ladder-image-largeur) + var(--fond-ladder-cadre-gauche)) * var(--fond-zone-l));
inset:auto;
left:calc(var(--fond-ladder-cadre-gauche) * 100%);
top:calc(var(--fond-ladder-cadre-haut) * 100%);
width:calc(var(--fond-ladder-cadre-largeur) * 100%);
height:calc(var(--fond-ladder-cadre-hauteur) * 100%);
background-size:var(--fond-ladder-l) auto;
background-position:var(--fond-ladder-x) calc((var(--fond-ladder-image-haut) - var(--fond-ladder-cadre-haut)) * var(--fond-zone-h));
/* trois estompes croisées : les deux du CADRE (celles du décor net), et une
troisième qui suit l'IMAGE — ses bords gauche et droit s'effacent (user, 15 sept.) */
-webkit-mask-image:
linear-gradient(to right, transparent, #000 var(--fond-estompe-cote), #000 calc(100% - var(--fond-estompe-cote)), transparent),
linear-gradient(to bottom, transparent, #000 var(--fond-estompe-haut), #000 calc(100% - var(--fond-estompe-bas)), transparent),
linear-gradient(to right, transparent, #000 var(--fond-ladder-image-estompe), #000 calc(100% - var(--fond-ladder-image-estompe)), transparent);
mask-image:
linear-gradient(to right, transparent, #000 var(--fond-estompe-cote), #000 calc(100% - var(--fond-estompe-cote)), transparent),
linear-gradient(to bottom, transparent, #000 var(--fond-estompe-haut), #000 calc(100% - var(--fond-estompe-bas)), transparent),
linear-gradient(to right, transparent, #000 var(--fond-ladder-image-estompe), #000 calc(100% - var(--fond-ladder-image-estompe)), transparent);
-webkit-mask-size:100% 100%, 100% 100%, var(--fond-ladder-l) 100%;
mask-size:100% 100%, 100% 100%, var(--fond-ladder-l) 100%;
-webkit-mask-position:0 0, 0 0, var(--fond-ladder-x) 0;
mask-position:0 0, 0 0, var(--fond-ladder-x) 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-composite:source-in, source-in;
mask-composite:intersect;
}
/* la variante DUEL (Fond.pose([gauche, droite], {nette, variante:'duel'})) : le
cadre part du bord gauche de l'écran et s'arrête à 84 % (le tracé vert du
user, 9 sept.), sur 39 % de la hauteur ; deux moitiés côte à côte, chacune
estompée sur son bord EXTÉRIEUR, en haut et en bas — elles se touchent net
au milieu — sous un voile noir (--fond-voile) */
.fond.duel{
--fond-voile: rgba(0,0,0,.6); /* 0,2 -> 0,4 -> 0,6 le 9 sept. (user) */
--fond-duel-gauche: 0; /* le bord gauche du cadre */
--fond-duel-droite: 16%; /* la marge à droite (le cadre s'arrête à 84 %) */
--fond-duel-haut: 39%; /* la hauteur du cadre */
--fond-duel-cote: 12%; /* l'estompe du bord extérieur de chaque moitié */
--fond-duel-bas: 35%;
--fond-duel-sommet: 6%;
}
.fond.duel .fond-image{
inset:0 var(--fond-duel-droite) auto var(--fond-duel-gauche);
height:var(--fond-duel-haut);
display:flex;
opacity:1;
-webkit-mask-image:none;mask-image:none;
}
.fond-moitie{flex:1;min-width:0;background-size:cover;background-repeat:no-repeat;-webkit-mask-composite:source-in;mask-composite:intersect}
.fond-moitie-gauche{
background-position:center, right center; /* le bord coupé vers le milieu */
-webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fond-duel-cote), #000), linear-gradient(to bottom, transparent, #000 var(--fond-duel-sommet), #000 calc(100% - var(--fond-duel-bas)), transparent);
mask-image:linear-gradient(to right, transparent, #000 var(--fond-duel-cote), #000), linear-gradient(to bottom, transparent, #000 var(--fond-duel-sommet), #000 calc(100% - var(--fond-duel-bas)), transparent);
}
.fond-moitie-droite{
background-position:center, left center;
-webkit-mask-image:linear-gradient(to right, #000, #000 calc(100% - var(--fond-duel-cote)), transparent), linear-gradient(to bottom, transparent, #000 var(--fond-duel-sommet), #000 calc(100% - var(--fond-duel-bas)), transparent);
mask-image:linear-gradient(to right, #000, #000 calc(100% - var(--fond-duel-cote)), transparent), linear-gradient(to bottom, transparent, #000 var(--fond-duel-sommet), #000 calc(100% - var(--fond-duel-bas)), transparent);
}
/* ==== Fonction/Defileur/defileur.css ==== */
/* ------------------------------------------------------------------
DÉFILEUR — le trait doré contre le bord droit de l'écran : 2 px de
large (3 jusqu'au 10 sept., user), estompé aux deux bouts, dans la même
veine que les lignes dorées du site. Aucun rail, aucun fond.
------------------------------------------------------------------ */
:root{
--defileur-largeur: 2px;
}
.defileur{
position:fixed;
right:0; /* le bord de l'écran ; posé sur le bord d'un conteneur (defileur-gauche / -droite), c'est `left` que le script règle */
width:var(--defileur-largeur);
z-index:95; /* au-dessus des bandeaux, sous le bandeau haut */
pointer-events:none;
opacity:0;
transition:opacity .2s ease;
}
.defileur.on{opacity:1}
.defileur-curseur{
display:block;
width:100%;
border-radius:2px;
background:linear-gradient(180deg, transparent 0%, var(--or) 28%, var(--or) 72%, transparent 100%);
pointer-events:auto;
cursor:grab;
will-change:transform;
}
.defileur.tenu .defileur-curseur{cursor:grabbing}
/* la prise est plus large que le trait, pour l'attraper sans viser */
.defileur-curseur::before{content:"";position:absolute;left:-8px;right:0;top:0;bottom:0}
.defileur-gauche,.defileur-droite{right:auto}
.defileur-gauche .defileur-curseur::before{left:0;right:-8px} /* sur un bord gauche, la prise déborde vers la droite */
.defileur-curseur{position:relative}
/* ==== Fonction/Rang/rang.css ==== */
/* RANG — l'écusson d'une ligue ou la médaille d'une place : une image nette, sans cadre ;
les teintes d'un Elo par ligue, celles de l'ancien site */
:root{
--rang-conquerant: #E0A95A; /* l'orange doré des conquérants, celui de la capture du user */
--rang-diamant: #63B4FF;
--rang-platine: #60D3DC;
--rang-or: #E2B45A;
--rang-argent: #A3B4CD;
--rang-bronze: #D49868;
}
.rang-icone{display:block;flex:none;object-fit:contain}
/* ==== Fonction/Filtre/filtre.css ==== */
/* FILTRE — le bouton de choix : une carte sombre de 32 px, le libellé en bleu,
la valeur en blanc, le chevron gris tourné vers le bas (vers le haut, ouvert) ;
liseré doré au survol et ouvert. Le style des filtres du Ladder, pour tous. */
.filtre{
display:inline-flex;align-items:center;gap:8px;
height:32px;padding:0 10px;
border:1px solid var(--ligne);border-radius:8px;
background:var(--carte);
color:var(--blanc);font-family:inherit;font-size:12.5px;
cursor:pointer;
transition:border-color .14s ease, background-color .14s ease;
}
.filtre:hover,.filtre.deroulant-ouvert{border-color:var(--or);background:var(--survol)}
.filtre[hidden]{display:none} /* un filtre caché (le Rang hors du solo classé) : « hidden » l'emporte sur le flex (10 sept.) */
.filtre-libelle{font-size:11.5px;font-weight:600;color:var(--bleu)}
.filtre-valeur{font-weight:600}
.filtre-chevron{width:11px;height:11px;color:var(--gris);transform:rotate(90deg)}
.filtre.deroulant-ouvert .filtre-chevron{transform:rotate(-90deg)}
/* ==== Fonction/Recherche/recherche.css ==== */
/* RECHERCHE — le champ : la carte sombre des filtres, la loupe grise, le texte
en blanc clair, la croix nue au bout ; liseré doré quand on y écrit */
.recherche{
display:inline-flex;align-items:center;gap:9px;
height:32px;padding:0 10px;min-width:0;
box-sizing:border-box;
border:1px solid var(--ligne);border-radius:8px;
background:var(--carte);
cursor:text;
}
.recherche:focus-within{border-color:var(--or)}
.recherche-loupe{width:14px;height:14px;color:var(--gris);flex:none}
.recherche input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--blanc);font-family:inherit;font-size:12.5px}
.recherche input::placeholder{color:var(--gris)}
.recherche input::-webkit-search-cancel-button{display:none}
.recherche-croix{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;padding:0;border:0;background:none;color:var(--blanc);cursor:pointer}
.recherche-croix[hidden]{display:none}
.recherche-croix > .icone{width:15px;height:15px}
.recherche-croix:hover{color:var(--or)}
/* ==== Fonction/Photo/photo.css ==== */
/* PHOTO — un rond sur le fond carte, liseré fin ; l'image le remplit, ou
l'icône d'unité au centre, dans la couleur des unités */
.photo{position:relative;display:block;flex:none;border-radius:50%;overflow:hidden;background:var(--carte);border:1px solid var(--ligne);box-sizing:border-box}
.photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.photo-vide{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58%;height:58%;color:var(--roux)}
/* ==== Corp/BandeauHaut/bandeau-haut.css ==== */
/* ------------------------------------------------------------------
BANDEAU HAUT
Le bleu nuit sombre du corps, uni, sans dégradé. Une seule ligne, en
bas, fine, dorée, qui s'estompe vers la droite jusqu'à disparaître.
Il est FIXE : la page défile sous lui, il ne bouge pas. Et il ne se
recharge jamais — le site est une seule page, changer d'écran remplace
ce qui est en dessous, pas lui.
------------------------------------------------------------------ */
:root{
--bandeau-haut: 56px; /* sa hauteur, que le corps doit lui laisser */
}
.bandeau-haut{
position:fixed;
top:0; left:0; right:0;
z-index:100;
height:var(--bandeau-haut);
background:var(--nuit);
gap:12px;
padding:0 16px;
box-sizing:border-box;
/* RÈGLE : tout ce que porte le bandeau — logo, titre, œil, onglets — est
centré sur SA hauteur, quelle qu'elle soit. Ce n'est pas un hasard de
tailles : c'est la ligne ci-dessous. Changez --bandeau-haut de 56 à
96 px, tout reste au milieu. */
display:flex;
align-items:center;
}
.bandeau-haut > *{
align-self:center; /* et aucun enfant ne peut s'en écarter */
}
/* la marque : logo et titre ensemble, cliquables, qui ramènent à l'accueil */
.bandeau-marque{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:inherit;
cursor:pointer;
}
.bandeau-marque:hover .bandeau-titre{color:var(--or)} /* comme un onglet survolé */
/* le logo, en haut à gauche, centré dans la hauteur du bandeau */
.bandeau-logo{
width:40px; height:40px;
flex:none;
display:block;
}
/* le titre, à côté du logo, aligné sur son centre, en blanc clair */
.bandeau-titre{
color:var(--blanc);
font-size:17px;
font-weight:700;
letter-spacing:.02em;
line-height:1;
white-space:nowrap;
}
/* la ligne du bas : un Trait, posé sur le bord, qui s'estompe vers la droite */
.bandeau-haut-trait{
position:absolute;
left:0; right:0; bottom:0;
}
/* les onglets, poussés à droite */
.bandeau-onglets{
margin-left:auto;
}
/* l'œil, sorti du groupe pour se poser à droite du drapeau des langues
(user, 10 sept.) : il garde la hauteur des boutons dynamiques */
.bandeau-haut > .bd-oeil{
height:var(--bd-hauteur, 36px);
margin-left:-4px; /* 6 px plus près du drapeau que l'écart du bandeau (user, 10 sept.) */
}
/* le corps commence sous le bandeau, pas derrière lui */
body{
padding-top:var(--bandeau-haut);
}
/* ==== Corp/BandeauHaut/Langue/langue.css ==== */
/* ------------------------------------------------------------------
LANGUE — le drapeau nu, à droite du titre. Rien ne change au survol :
ni fond, ni bordure ; seul le curseur dit qu'il se clique.
------------------------------------------------------------------ */
.langue{
display:flex;
align-items:center;
flex:none;
margin-left:2px;
padding:4px;
border:0;
background:none;
cursor:pointer;
}
.langue > img{
width:21.6px; /* 24 px moins 10 % */
height:14.4px;
border-radius:2px;
object-fit:cover;
}
/* ==== Corp/BandeauGauche/bandeau-gauche.css ==== */
/* ------------------------------------------------------------------
BANDEAU GAUCHE
Le frère vertical du bandeau haut : même fond bleu nuit uni, et une
seule ligne, fine, dorée, sur son bord droit. Elle part du haut — collée
à la ligne horizontale du bandeau haut — et s'estompe vers le bas.
Il est FIXE : le corps défile derrière lui, il ne bouge pas. Et il ne se
recharge jamais — le site est une seule page.
Il commence SOUS le bandeau haut, et va jusqu'en bas de la fenêtre.
------------------------------------------------------------------ */
:root{
--bandeau-gauche-reduit: 56px; /* la colonne des drapeaux : elle ne bouge JAMAIS */
--bandeau-gauche: var(--bandeau-gauche-reduit); /* toujours réduit : il ne s'ouvre plus (user, 15 sept.) */
--bandeau-gauche-vide: .3; /* sous le dernier drapeau : du vide, 30 % de la
hauteur de la liste, pour le remonter en défilant */
--bandeau-gauche-logo: 80px; /* le logo qui meuble ce vide */
}
.bandeau-gauche{
transition:width .3s cubic-bezier(.4,0,.2,1);
position:fixed;
top:var(--bandeau-haut); /* juste sous le bandeau haut */
bottom:0;
left:0;
z-index:90; /* sous le bandeau haut, au-dessus du corps */
width:var(--bandeau-gauche);
background:var(--nuit);
box-sizing:border-box;
/* RÈGLE : tout ce qu'il portera est centré sur SA largeur, quelle qu'elle
soit — la même règle que le bandeau haut, tournée d'un quart de tour. */
display:flex;
flex-direction:column;
align-items:center;
}
.bandeau-gauche > *{
align-self:center;
}
/* la liste des civilisations, dès le haut du bandeau : elle prend la place qui
reste et défile seule si elle est trop longue */
.bandeau-gauche-liste{
--bdr-colonne:var(--bandeau-gauche-reduit); /* les drapeaux restent dans la colonne */
flex:1;
min-height:0;
overflow-y:auto;
overscroll-behavior:contain;
align-self:stretch;
}
/* du vide après le dernier drapeau : on peut continuer à défiler et le
remonter même si rien ne suit — la hauteur de la liste, c'est l'écran
moins les deux bandeaux, fois la part de vide. Le logo le meuble, au
milieu, en filigrane. */
.bandeau-gauche-fin{
flex:none;
height:calc((100vh - var(--bandeau-haut)) * var(--bandeau-gauche-vide));
display:flex;
align-items:center;
justify-content:center;
}
/* réduit, la colonne est plus étroite que le logo : il se fait plus petit,
avec 8 px d'air de chaque côté, plutôt que d'être coupé */
.bandeau-gauche-fin > img{
width:min(var(--bandeau-gauche-logo), 100% - 16px);
height:auto;
aspect-ratio:1;
opacity:.55;
}
/* le Trait du bord droit : du haut vers le bas */
.bandeau-gauche-bord{
position:absolute;
top:0; bottom:0; right:0;
}
/* le corps commence à droite du bandeau, pas derrière lui */
body{
padding-left:var(--bandeau-gauche);
}
/* ==== Corp/BandeauDroit/bandeau-droit.css ==== */
/* ------------------------------------------------------------------
BANDEAU DROIT
La colonne de droite, sous le bandeau haut, jusqu'en bas. FIXE : le
corps défile derrière, elle ne bouge pas. Elle porte le Cadre Publicité
ou le Cadre Détails, avec de l'air autour.
------------------------------------------------------------------ */
:root{
--bandeau-droit: 387px; /* sa largeur, que le corps doit lui laisser (352 px + 10 %) */
--bandeau-droit-air: 24px; /* l'air entre son bord et le cadre */
}
.bandeau-droit{
position:fixed;
top:var(--bandeau-haut);
bottom:0;
right:0;
z-index:90;
width:var(--bandeau-droit);
box-sizing:border-box;
padding:var(--bandeau-droit-air) var(--bandeau-droit-air) var(--bandeau-droit-air) 0; /* pas d'air à gauche : c'est la marge du corps qui sépare les deux cadres */
background:none; /* le fond du site passe dessous */
}
.bandeau-droit > [hidden]{display:none} /* un seul cadre à la fois */
/* le corps s'arrête avant lui, pas derrière */
body{
padding-right:var(--bandeau-droit);
}
/* ==== Corp/Corps/corps.css ==== */
/* ------------------------------------------------------------------
CORPS — le cadre des pages. Il est FIXE, comme les bandeaux : un
rectangle entre le bandeau gauche et le bandeau droit, sous le bandeau
haut, avec le même air (24 px) que le cadre Publicité tout autour ; les
deux cadres sont alignés en haut et en bas, et l'air entre eux vaut
l'air autour d'eux. Ce sont les pages qui défilent DEDANS, pas le site.
Le cadre est invisible : rien ne le dessine, seul son contenu le montre.
------------------------------------------------------------------ */
:root{
--corps-marge: 24px; /* l'air entre le cadre et ce qui l'entoure */
--corps-air: 6px; /* l'air entre le bord du cadre et le contenu */
}
.corps{
position:fixed;
z-index:1; /* devant le Fond, derrière les bandeaux */
top:calc(var(--bandeau-haut) + var(--corps-marge));
bottom:var(--corps-marge);
left:calc(var(--bandeau-gauche) + var(--corps-marge));
right:calc(var(--bandeau-droit) + var(--corps-marge));
box-sizing:border-box;
padding:var(--corps-air);
overflow:auto;
scrollbar-width:none; /* pas de barre du navigateur : le Défileur la remplace */
transition:left .3s cubic-bezier(.4,0,.2,1); /* il suit le bandeau gauche qui s'ouvre */
}
.corps::-webkit-scrollbar{display:none}
/* le site lui-même ne défile plus : tout ce qui déborde défile dans le corps */
html, body{overflow:hidden}
/* une page remplit le cadre au moins jusqu'en bas */
.page{min-height:100%;box-sizing:border-box}
/* ==== Corp/Details/details.css ==== */
/* DÉTAILS — la pile des blocs, avec l'air entre eux ; la pile touche le haut
du cadre et ses deux bords : les blocs prennent toute la largeur */
.details{display:flex;flex-direction:column;gap:5px;padding:0 0 16px}
/* les cadres des détails sont plus sombres que les cartes du site */
.details .bloc{background:var(--carte-nuit)}
/* Identité reste collée en haut du cadre quand la pile défile ; les blocs
qui montent passent dessous, estompés (Estompe, dans details.js) */
.details-identite{position:sticky;top:0;z-index:2}
/* un bloc qui n'a rien à montrer le dit : c'est un trou dans les données */
.details-rien{margin:0;font-size:12px;font-style:italic;color:var(--gris)}
/* une grille d'icônes d'éléments : chacune dans son cadre, au liseré de sa famille */
.details-icones{display:flex;flex-wrap:wrap;gap:8px}
.details-icone{
--icone-couleur: var(--or);
width:38px;height:38px;
padding:0;
border:1px solid var(--icone-couleur);
border-radius:6px;
background:var(--carte-2);
overflow:hidden;
cursor:pointer;
transition:border-color .14s ease, transform .14s ease;
}
.details-icone > img{width:100%;height:100%;object-fit:cover;display:block}
.details-icone:hover{border-color:var(--blanc);transform:scale(1.06)}
/* la fenêtre du survol : la porte du site, le filet et le nom dans la couleur de la famille */
.infobulle.details-bulle{max-width:300px}
.details-fenetre{--fenetre-couleur: var(--or);display:flex;flex-direction:column;gap:4px}
.details-fenetre-nom{margin:0;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fenetre-couleur)}
.details-fenetre-sous{margin:0;font-size:12.5px;color:var(--gris-clair)}
.details-fenetre-texte{margin:8px 0 0;font-size:13.5px;line-height:1.5;font-weight:400;color:var(--blanc)}
/* ==== Corp/Details/Identite/identite.css ==== */
/* IDENTITÉ — l'illustration à gauche (72 px dans son cadre sombre), le nom
dans la couleur, la ligne « Unité · Âge I », la croix au coin */
.details-identite > .bloc-corps{display:flex;align-items:flex-start;gap:14px;padding-right:30px} /* la croix (24 px) et 6 px d'air */
.details-image{
flex:none;
width:72px;height:72px;
border-radius:6px;
background:var(--carte-2);
overflow:hidden;
}
.details-image > img{width:100%;height:100%;object-fit:cover;display:block}
.details-texte{flex:1;min-width:0}
/* le nom : la même taille que la ligne du type, en gras, sur autant de
lignes qu'il faut ; le haut de ses capitales sur le haut de l'image */
/* le nom, le type, unique : trois lignes au même interligne, le même écart entre chacune */
.details-nom{margin:-1px 0 0;font-size:14px;font-weight:700;line-height:1.25;color:var(--bloc-couleur)}
.details-sous{margin:4px 0 0;font-size:12px;line-height:1.25;font-weight:400;color:var(--gris-clair)}
.details-age{font-weight:700}
.details-classe{margin:4px 0 0;font-size:12px;line-height:1.25;font-weight:400;color:var(--gris-clair)} /* la classe, quand elle est demandée (Armurerie) */
.details-unique{display:flex;align-items:center;gap:4px;margin:4.5px 0 0;font-size:12px;line-height:1.25;font-weight:400;color:var(--or)}
.details-unique-etoile{width:11px;height:11px}
/* la croix d'AOE4 : rouge, nue, au coin haut droit ; blanche au survol */
.details-croix{
position:absolute;top:8px;right:8px;
width:24px;height:24px;
padding:0;border:0;background:none;
color:var(--cadre-rouge);
cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:color .14s ease;
}
.details-croix .icone{width:22px;height:22px}
.details-croix:hover{color:var(--blanc)}
/* un passif, une spécificité : le titre seul, sans image ni type */
.details-identite-sobre > .bloc-corps{align-items:center;min-height:0}
.details-identite-sobre .details-nom{margin:0}
/* ==== Corp/Details/Informations/informations.css ==== */
/* INFORMATIONS — le résumé en blanc clair, texte courant (400), puis les points, verts et rouges */
.details-info-texte{margin:0;font-size:13.5px;line-height:1.55;font-weight:400;color:var(--blanc)}
.details-info-point{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;font-size:13.5px;line-height:1.5;font-weight:400}
.details-info-point > b{flex:none;font-weight:700}
.details-info-texte + .details-info-point{margin-top:12px}
.details-info-suite{margin:8px 0 0;font-size:13.5px;line-height:1.55;font-weight:400;color:var(--gris)} /* la ligne que le jeu détache sous la description : un paragraphe gris, pas un point (user, 10 sept.) */
.details-info-plus{color:var(--pos)}
.details-info-moins{color:var(--neg)}
/* ==== Corp/Details/Cout/cout.css ==== */
/* COÛT — deux lignes serrées : pictogramme et chiffre, chacun dans la couleur de sa ressource */
.details-cout{display:flex;flex-direction:column;gap:9px}
.details-cout-ligne{display:flex;align-items:center;gap:14px}
.details-cout-ressource{
--cout-couleur: var(--gris-clair);
display:inline-flex;align-items:center;gap:6px;
font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;
color:var(--cout-couleur);
}
.details-cout-icone{width:18px;height:18px}
.details-cout-chiffre-temps{color:var(--blanc)} /* le temps : icône jaune, chiffre en blanc clair */
/* ==== Corp/Details/Amelioration/amelioration.css ==== */
/* AMÉLIORATION — rien de plus que la grille d'icônes commune (details.css) */
/* ==== Corp/Details/Origine/origine.css ==== */
/* ORIGINE — rien de plus que la grille d'icônes commune (details.css) */
/* ==== Corp/Details/Debloque/debloque.css ==== */
/* DÉBLOQUE — rien de plus que la grille d'icônes commune (details.css) */
/* ==== Corp/Details/Statistiques/statistiques.css ==== */
/* STATISTIQUES — la tête : le titre dans la couleur de l'élément, les âges à
droite (au repos gris ; survolé dans sa couleur ; retenu : fond dans sa
couleur, bordure et chiffre en blanc clair ; d'avant l'élément : absent, user 11 sept.) ;
puis une ligne par statistique : icône, nom, nombres à droite, la jauge dessous
sur toute la largeur (portée et vitesses n'en ont pas), et le détail
des dégâts qui s'ouvre au chevron */
:root{
--armure-melee: #55DC73;
--armure-distance:#55A0DC;
}
.details-stats-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.details-stats-titre{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--bloc-couleur)}
/* les âges : les BANNIÈRES du user (Asset/Icones/Ages, 10 sept.) — grise au repos, en
couleur une fois l'âge retenu ; survolée, la grise s'éclaire ; d'avant l'élément : éteinte */
:root{--stats-age:30px}
.details-stats-ages{display:flex;gap:6px}
.details-stats-age{
display:inline-flex;align-items:center;
height:var(--stats-age);padding:0;border:0;background:none;
cursor:pointer;
}
.details-stats-age-banniere{height:var(--stats-age);width:auto;display:block;transition:filter .14s ease}
.details-stats-age-coul{display:none}
.details-stats-age.on .details-stats-age-coul{display:block}
.details-stats-age.on .details-stats-age-gris{display:none}
.details-stats-age:hover:not(:disabled) .details-stats-age-gris{filter:brightness(1.35)}
.details-stats-age:disabled{opacity:.3;cursor:default} /* un âge d'avant l'élément : grisé, pas cliquable — le user a essayé sans, puis préféré ainsi (11 sept.) */
.details-stats-lignes{display:flex;flex-direction:column}
.details-stat{
display:grid;grid-template-columns:18px 1fr auto;align-items:center;column-gap:10px;row-gap:6px;
padding:7px 0;
/* plus de filet entre les lignes (user, 10 sept.) */
font-size:12px;color:var(--blanc);
}
.details-stat-ouvrable{cursor:pointer}
.details-stat-icone{width:18px;height:18px}
.details-stat-nom{display:inline-flex;align-items:center;gap:6px;font-weight:600;letter-spacing:.01em;white-space:nowrap} /* un libellé : 600, un peu d'air */
.details-stat-nombres{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
/* le chevron : à droite du mot, tourné vers le bas ; vers le haut une fois ouvert */
.details-stat-chevron{width:11px;height:11px;color:var(--gris);transform:rotate(90deg);transition:transform .14s ease}
.details-stat.ouvert .details-stat-chevron{transform:rotate(-90deg)}
/* une ligne obligatoire sans donnée : « – » en gris */
.details-stat-trou .details-stat-nombres{color:var(--gris)}
/* la jauge : seconde ligne, sur toute la largeur */
.details-stat-jauge{grid-column:1 / -1}
/* le détail : caché, ouvert par le chevron ; sans icône, nom en gris */
.details-stat-detail{display:none;flex-direction:column;padding:2px 0 6px 28px}
.details-stat.ouvert + .details-stat-detail{display:flex}
.details-stat-sous{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-size:12px;color:var(--gris-clair)}
.details-stat-sous + .details-stat-sous{border-top:1px solid rgba(255,255,255,.08)} /* un filet très fin et clair entre les lignes du détail (user, 11 sept.) */
.details-stat-sous-nom{white-space:nowrap}
.details-stat-sous .details-stat-nombres{color:inherit;font-weight:500} /* les chiffres du détail : gris comme leur nom, seul le dégât principal est coloré (user, 11 sept.) */
/* en duel : le bonus (ou la torche) qui joue contre l'élément d'en face, en blanc clair et gras */
.details-stat-sous-joue{color:var(--blanc);font-weight:600}
/* ==== Corp/Civilisation/civilisation.css ==== */
/* ------------------------------------------------------------------
CIVILISATION — la page : ses blocs l'un sous l'autre, avec l'air entre
eux. Chaque bloc a son style dans son dossier.
------------------------------------------------------------------ */
.civilisation{
display:flex;
flex-direction:column;
gap:22px;
}
/* en statistiques : les taux, les panneaux et les onglets s'effacent, l'en-tête reste */
.civilisation.civ-en-stats > :is(.civ-taux, .civ-panneaux, .civ-onglets){display:none}
/* ==== Corp/Civilisation/EnTete/en-tete.css ==== */
/* ------------------------------------------------------------------
EN-TÊTE — le drapeau dans son liseré doré, le nom en grand, le bouton
des statistiques dessous, et le texte en dessous, en gris clair.
L'identité (drapeau, nom, bouton) est COLLANTE : quand la page
défile dans le cadre du corps, elle s'arrête au haut du cadre et y
reste, quel que soit l'onglet ouvert en dessous. Elle n'a AUCUN fond :
c'est Estompe qui efface ce qui passerait derrière elle.
------------------------------------------------------------------ */
.civ-entete{display:contents} /* l'identité et le texte sont posés directement dans la page : c'est elle qui borne le collage */
.civ-identite{
position:sticky;
top:calc(-1 * var(--corps-air)); /* collée au bord du cadre */
z-index:30;
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
margin:calc(-1 * var(--corps-air)) calc(-1 * var(--corps-air)) 0;
padding:var(--corps-air) var(--corps-air) 7px; /* 7 px, puis 2 + 10 dans la tête des onglets : 19 px entre le drapeau et les onglets */
background:none; /* AUCUN fond : le voile passe, et ce qui défile passe derrière */
}
.civ-drapeau{
width:117px;height:70px;flex:none; /* plus grand (user, 15 sept.) : 80 × 48 → 96 × 58 → 106 × 64 → 117 × 70, mêmes proportions */
border-radius:3px;object-fit:cover;
box-shadow:0 0 0 1px rgba(201,162,39,.55), 0 6px 18px -10px #000;
}
/* le nom et le bouton : le bouton SOUS le nom, calé à gauche, et le bloc
centré verticalement sur le drapeau (user, 15 sept.) */
.civ-titre{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.civ-nom{margin:0;font-size:30px;font-weight:700;letter-spacing:.01em;line-height:1.1;color:var(--blanc)}
/* le bouton « Voir les statistiques » / « Voir la civilisation » : un petit
cadre sombre, le mot et la bordure dans la couleur de l'ONGLET RETENU
(--civ-onglet-couleur, posée par Onglets : cyan pour Passif, violet pour
Capacités… — user, 15 sept. ; cyan tant qu'aucun onglet n'est retenu), au
repos comme au survol ; rien ne bouge au survol ; au CLIC, il s'enfonce
(il rapetisse le temps du clic, puis revient) — règle du user, 8 sept. */
.civ-stats{
display:inline-flex;align-items:center;justify-content:center;
height:26px;min-width:134px;padding:0 11px;box-sizing:border-box; /* la même largeur pour « Voir les statistiques » (le plus long, 133 px) et « Voir la civilisation » (user, 8 sept.) */
border:1px solid var(--civ-onglet-couleur, var(--cyan));border-radius:7px;
/* un léger dégradé à l'INTÉRIEUR, dans la couleur de l'onglet (user, 15 sept.) :
la lueur part de la bordure et s'éteint vers le centre, un peu plus
claire en haut ; rien ne déborde à l'extérieur */
background-color:var(--carte);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--civ-onglet-couleur, var(--cyan)) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--civ-onglet-couleur, var(--cyan)) 38%, transparent);
color:var(--civ-onglet-couleur, var(--cyan));font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;
cursor:pointer;
transform-origin:center;
transition:border-color .14s ease, color .14s ease, background-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.civ-stats:hover{background:var(--survol)}
.civ-stats:active{transform:scale(.93)} /* l'effet de clic : le bouton s'enfonce, puis revient */
/* le détail de la civilisation, comme le jeu l'affiche sous le drapeau et le nom :
la période en capitales espacées, la devise en doré, puis le résumé */
.civ-detail{display:flex;flex-direction:column;gap:5px}
.civ-periode,.civ-devise{margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.3}
.civ-periode{color:var(--gris-clair)}
.civ-devise{color:var(--or)}
.civ-presentation{margin:0;max-width:92ch;font-size:var(--texte-info-taille);font-weight:var(--texte-info-graisse);line-height:1.6;color:var(--blanc)} /* le résumé en blanc clair : seule la période est grisée (user, 10 sept.) */
/* ==== Corp/Civilisation/Taux/taux.css ==== */
/* ------------------------------------------------------------------
TAUX — les deux compteurs côte à côte. (Le bouton « Global » et sa
liste ont été retirés le 8 sept. : les duels sont dans la page des
statistiques.)
------------------------------------------------------------------ */
.civ-taux{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:10px}
/* les deux compteurs : le « dégradé » (user, 15 sept.) dans la couleur de leur
barre — bordure pleine, léger dégradé et lueur à l'intérieur */
.civ-taux .taux{
border-color:var(--taux-couleur);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--taux-couleur) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--taux-couleur) 38%, transparent);
}
/* ==== Corp/Civilisation/Panneaux/panneaux.css ==== */
/* PANNEAUX — trois encadrés côte à côte, qui passent l'un sous l'autre si la place manque */
.civ-panneaux{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:10px}
/* Général, Point fort, Point faible : le « dégradé » (user, 15 sept.) dans la
couleur de leur titre — bordure pleine, léger dégradé et lueur à l'intérieur */
.civ-panneaux .panneau{
border-color:var(--panneau-couleur);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--panneau-couleur) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--panneau-couleur) 38%, transparent);
}
/* ==== Corp/Civilisation/Codex/codex.css ==== */
/* ------------------------------------------------------------------
CODEX DE CIVILISATION — l'arbre : quatre colonnes de la couleur de leur
âge, une ligne verticale à gauche de chacune, les barres de bâtiments
en bleu, les vignettes d'unités en roux et de technologies en vert,
chaque élément relié à la ligne de sa colonne par une courte branche.
------------------------------------------------------------------ */
.codex{display:flex;flex-direction:column;gap:9px;padding-top:0;margin-top:-14px;--codex-filtres-h: 37px} /* 9 px d'air + 28 px de boutons ; 9 px puis le haut des âges. -14 px : annule le haut du contenu (.civ-contenu), pour que les boutons soient à 9 px du trait des onglets au repos comme collés (user, 15 sept.) */
/* ---- les trois boutons : COLLANTS sous les onglets, au-dessus des âges ---- */
.codex-filtres{
position:sticky;
top:calc(var(--civ-identite-h, 66px) + var(--civ-tete-h, 90px) - var(--corps-air));
z-index:11;
display:flex;gap:8px;
height:var(--codex-filtres-h);
box-sizing:border-box;
padding-top:9px; /* 9 px sous la ligne des onglets, collés */
}
/* l'allure du bouton « Voir les statistiques » de l'en-tête, en trois temps
(user, 15 sept.) — les trois boutons à la même largeur :
au repos : le nom seul, dans la couleur de sa famille ;
survolé : la bordure de sa couleur apparaît ;
retenu : la bordure et le fond dégradé apparaissent (léger dégradé
et lueur à l'intérieur, dans sa couleur).
Au clic, il s'enfonce, puis revient. */
.codex-filtre{
--codex-famille: var(--or);
width:124px;height:28px;box-sizing:border-box; /* la même largeur pour les trois, « Technologies » compris */
display:inline-flex;align-items:center;justify-content:center;
padding:0 10px;
border:1px solid transparent;
border-radius:7px;
background:none;
box-shadow:none;
color:var(--codex-famille);
font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.02em;
cursor:pointer;
transform-origin:center;
transition:border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.codex-filtre-nom{white-space:nowrap}
.codex-filtre:hover{border-color:var(--codex-famille)}
.codex-filtre.on{
border-color:var(--codex-famille);
background-color:var(--carte);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--codex-famille) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--codex-famille) 38%, transparent);
}
.codex-filtre:active{transform:scale(.93)}
.codex-filtre-unites{--codex-famille: var(--roux)}
.codex-filtre-technologies{--codex-famille: var(--vert)}
.codex-filtre-uniques{--codex-famille: var(--or)} /* « Unique », en jaune (user, 15 sept.) */
/* l'œil (BoutonDynamique) : tout ouvrir / tout fermer, à la hauteur des boutons */
.codex-filtres .codex-oeil{height:28px;margin-left:4px;align-self:center}
/* ---- l'arbre ---- */
.codex-arbre{
--codex-branche: 14px; /* la branche entre la ligne d'un âge et un élément */
position:relative;
display:flex;flex-direction:column;gap:12px;
padding:0 0 12px;
}
/* les quatre lignes verticales, une par colonne */
.codex-ligne{position:absolute;top:0;bottom:0;width:1px;background:var(--codex-age);opacity:.75;pointer-events:none;z-index:2} /* devant les barres qu'elles coupent */
/* l'en-tête : le nom de chaque âge dans sa couleur — COLLANT sous les
onglets, comme les tris des autres onglets : on sait toujours où l'on est */
.codex-entete{
position:sticky;
top:calc(var(--civ-identite-h, 66px) + var(--civ-tete-h, 90px) - var(--corps-air) + var(--codex-filtres-h) + 9px); /* sous les trois boutons */
z-index:10;
display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));
background:none;
}
.codex-age{padding:12px 0 10px calc(var(--codex-branche) + 4px);font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--codex-age)}
/* un bâtiment : sa barre sur une grille de quatre, puis ses enfants sur la même grille */
/* la colonne de gauche porte le bâtiment ; à sa droite, sur la même rangée,
ce qu'il produit et recherche, chaque élément dans la colonne de son âge
(user, 15 sept.) */
.codex-batiment{display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:8px 0;align-items:start}
.codex-barre{
position:relative;
z-index:1;
display:flex;align-items:center;
grid-row:1;
margin-left:0; /* la colonne de gauche : pas de ligne d'âge à rejoindre */
margin-right:10px;
min-height:44px;
border:1px solid var(--bleu);
border-radius:5px;
background:var(--carte);
}
.codex-age-batiments{--codex-age: var(--blanc);padding-left:4px} /* le titre de la colonne de gauche */
.codex-barre-nom{border:0 !important;background:none !important;flex:1}
.codex-chevron{
width:40px;align-self:stretch;
border:0;border-left:1px solid var(--ligne);background:none;
color:var(--blanc);cursor:pointer; /* le chevron en blanc clair */
display:inline-flex;align-items:center;justify-content:center;
}
.codex-chevron .icone{width:11px;height:11px;transform:rotate(90deg);transition:transform .14s ease}
.codex-batiment.replie .codex-chevron .icone{transform:rotate(0deg)}
.codex-batiment.replie .codex-enfants{display:none}
/* « Unique » allumé : seuls restent les bâtiments uniques et ceux qui portent
un élément unique ; sous eux, seuls les éléments uniques */
.codex-uniques .codex-batiment:not(.codex-garde-unique){display:none}
.codex-uniques .codex-enfants .codex-item:not(.codex-item-unique){display:none}
/* GRISÉ tant qu'on n'a pas cliqué (user, 15 sept.) : la barre d'un bâtiment,
bordure et nom gris ; ses éléments, bordure et texte gris. Un clic sur le
bâtiment (codex-choisi) lui rend sa bordure bleue et son nom, et à ses
éléments leur bordure de couleur et leur texte. */
.codex-barre,.codex-item{transition:border-color .14s ease, color .14s ease, background-color .14s ease}
.codex-image > img{transition:filter .14s ease, opacity .14s ease}
/* tout, sauf le bâtiment choisi et ses enfants (user, 15 sept.) : les icônes
aussi (noir et blanc, atténuées), l'étoile « Unique » et le chevron */
.codex-batiment:not(.codex-choisi) .codex-image > img{filter:grayscale(1);opacity:.45}
.codex-batiment:not(.codex-choisi) .codex-unique,
.codex-batiment:not(.codex-choisi) .codex-chevron{color:var(--gris)}
/* le bâtiment CHOISI et ses éléments (user, 15 sept.) : les bordures en or,
avec le « dégradé » (léger dégradé et lueur à l'intérieur, en or) ; le nom
dans la couleur de son élément — bâtiment bleu, unité roux, technologie vert */
.codex-choisi .codex-barre,
.codex-choisi .codex-enfants .codex-item{
border-color:var(--or);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--or) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--or) 38%, transparent);
}
.codex-choisi .codex-item .codex-nom{color:var(--codex-famille)}
.codex-batiment:not(.codex-choisi) .codex-barre{border-color:var(--ligne)}
.codex-batiment:not(.codex-choisi) .codex-barre .codex-nom{color:var(--gris)}
.codex-batiment:not(.codex-choisi) .codex-enfants .codex-item{border-color:var(--ligne);color:var(--gris)}
/* les enfants : quatre colonnes, une pile dans chacune */
.codex-enfants{grid-column:2 / -1;grid-row:1;display:flex;flex-direction:column;gap:8px} /* les lignes (codex.js, lignesDe), à droite du bâtiment */
.codex-rangee{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr))} /* une ligne : une lignée d'unités ou des technologies, chacune dans la colonne de son âge */
/* les tris cachent des LIGNES entières : pas de ligne vide qui reste */
.codex-sans-unites .codex-rangee-unites:not(.codex-rangee-technologies),
.codex-sans-technologies .codex-rangee-technologies:not(.codex-rangee-unites),
.codex-sans-unites.codex-sans-technologies .codex-rangee,
.codex-uniques .codex-rangee:not(.codex-rangee-unique){display:none}
/* le LIEN entre deux éléments d'une même suite qui se suivent (user, 15 sept.) :
un trait or de 2 px, avec une lueur or autour (l'esprit du « dégradé »). Il va
de la fin d'un élément (sa colonne, moins les 10 px de marge droite) au début
du suivant (sa colonne, plus les 14 px de la branche), au milieu de la hauteur
de l'élément (46 px : 36 + 4 + 4 d'air + 2 de bordure, son centre à 23 px). Gris,
sans lueur, tant que le bâtiment n'est pas choisi. Il s'efface sous la tête
collante comme les éléments (Estompe, civilisation.js). */
.codex-rangee{position:relative}
.codex-lien{
position:absolute;
z-index:3; /* devant les lignes des âges qu'il traverse */
top:22px; /* 1 px de haut, sur le milieu de l'élément (23 px) */
height:1px; /* fin comme les lignes des âges (user, 15 sept.) */
left:calc(var(--de) * 25% - 10px);
width:calc((var(--a) - var(--de) - 1) * 25% + 24px);
background:var(--or);
box-shadow:0 0 4px color-mix(in srgb, var(--or) 55%, transparent); /* la lueur, plus légère pour un trait fin */
pointer-events:none;
transition:background-color .14s ease, box-shadow .14s ease;
}
.codex-batiment:not(.codex-choisi) .codex-lien{background:var(--ligne);box-shadow:none}
.codex-sans-unites .codex-lien-unites,
.codex-sans-technologies .codex-lien-technologies,
.codex-uniques .codex-lien-commun{display:none}
.codex-colonne{display:flex;flex-direction:column;gap:8px;padding-right:10px}
/* une vignette : illustration, nom, étoile d'unique ; bord de sa famille, branche de son âge */
.codex-item{
--codex-famille: var(--or);
position:relative;
z-index:1;
display:flex;align-items:center;gap:10px;
margin-left:var(--codex-branche);
min-height:36px;
padding:4px 10px 4px 6px;
border:1px solid var(--codex-famille);
border-radius:5px;
background:var(--carte);
color:var(--blanc);
font-size:12.5px;font-weight:700;
cursor:pointer;
transition:background-color .14s ease;
}
.codex-item:hover{background:var(--survol)}
.codex-item-unites{--codex-famille: var(--roux)}
.codex-item-technologies{--codex-famille: var(--vert)}
.codex-item-batiments{--codex-famille: var(--bleu)}
.codex-barre .codex-item{margin-left:0} /* …et déjà sa marge : l'icône et le nom d'un bâtiment s'alignent sur ceux des vignettes (user, 15 sept.) */
.codex-image{flex:none;width:26px;height:26px;border-radius:3px;overflow:hidden;background:var(--carte-2)}
.codex-image > img{width:100%;height:100%;object-fit:cover;display:block}
.codex-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.codex-unique{width:12px;height:12px;color:var(--or);flex:none}
.codex-sans-unites .codex-item-unites{display:none}
.codex-sans-technologies .codex-item-technologies{display:none}
/* ==== Corp/Civilisation/Onglets/onglets.css ==== */
/* ONGLETS — la rangée, puis le contenu de l'onglet retenu, en dessous :
les Cartes, une par ligne, sur toute la largeur — rangées par âge
(unités, bâtiments, technologies) ou par lanceur (capacités) dans des
groupes repliables (Pli), en jaune clair.
La tête (les onglets et, dessous, le tri de l'onglet ouvert) est
COLLANTE : quand on défile, elle s'arrête sous l'identité (elle-même
collée au haut du cadre) et y reste, pour passer d'un onglet ou d'un
tri à l'autre à tout moment. Elle n'a AUCUN fond : c'est Estompe qui
efface ce qui passerait derrière elle. */
.civ-onglets-tete{
position:sticky;
top:calc(var(--civ-identite-h, 66px) - var(--corps-air));
z-index:20;
margin:0 calc(-1 * var(--corps-air));
padding:2px var(--corps-air) 0; /* avec les 7 px de l'identité et les 10 px de la rangée : 19 px entre le drapeau et les onglets, 40 % de moins qu'avant */
background:none; /* AUCUN fond : le voile passe, et ce qui défile passe derrière */
}
.civ-tri[hidden]{display:none}
/* les tris (Unités, Bâtiments, Technologies) : l'allure des trois boutons du
Codex (user, 15 sept.) — tous à la même largeur, dans la couleur de l'onglet :
au repos : le nom seul, coloré ;
survolé : la bordure apparaît ;
retenu : la bordure et le fond dégradé apparaissent (léger dégradé et
lueur à l'intérieur).
Plus de loupe au survol ; au clic, il s'enfonce, puis revient. */
.onglets.civ-tri{padding-top:9px} /* 9 px sous le trait des onglets, comme les boutons du Codex (user, 15 sept.) */
.onglets.civ-tri .onglets-rangee{gap:6px;padding-bottom:4px}
.onglets.civ-tri .onglet{
width:100px;height:28px;box-sizing:border-box; /* la même largeur pour tous : « Technologique » (82 px), le plus long, y tient ; 9 boutons = 948 px */
justify-content:center;
padding:0 8px;
border:1px solid transparent;
border-radius:7px;
background:none;
box-shadow:none;
color:var(--onglet-couleur);
font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;
white-space:nowrap;
transform-origin:center;
transition:border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}
.onglets.civ-tri .onglet:hover{transform:none;border-color:var(--onglet-couleur)}
.onglets.civ-tri .onglet.on{
transform:none;
border-color:var(--onglet-couleur);
background-color:var(--carte);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--onglet-couleur) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--onglet-couleur) 38%, transparent);
}
.onglets.civ-tri .onglet:active{transform:scale(.93)}
.civ-contenu{padding:14px 0 0}
.civ-contenu-texte{margin:0;max-width:92ch;font-size:13.5px;line-height:1.5;color:var(--gris-clair)}
.civ-cartes{display:grid;grid-template-columns:1fr;gap:9px;padding-top:4px}
.civ-groupes{display:flex;flex-direction:column}
/* la ligne d'un âge est COLLANTE sous la tête : en défilant, « Âge I » reste
en haut tant qu'on est dans l'âge I ; quand la ligne « Âge II » arrive,
elle prend sa place — elles ne s'empilent pas, chacune ne colle que dans
son propre groupe. Sans fond : Estompe efface ce qui passerait derrière. */
.civ-groupes .pli > .pli-tete{
position:sticky;
top:calc(var(--civ-identite-h, 66px) + var(--civ-tete-h, 90px) - var(--corps-air));
z-index:10;
background:none; /* AUCUN fond : le voile passe, et ce qui défile passe derrière */
}
/* ==== Corp/Civilisation/StatCiv/stat-civ.css ==== */
/* ------------------------------------------------------------------
STATCIV — la vue : des rangées de cadres, comme la maquette du user
(8 sept.). Ici ce qui est commun aux quatre rangées : le cadre (fond
carte, liseré, pictogramme doré, titre, sous-titre), la ligne d'une
liste (image, nom, chiffres, barre). Chaque rangée a son style dans
son dossier.
------------------------------------------------------------------ */
.civ-statistiques{display:flex;flex-direction:column;gap:16px}
.civ-statistiques[hidden]{display:none}
.civ-stat-rangee{display:grid;gap:16px}
.civ-stat-bas{grid-template-columns:1.35fr 1.15fr .75fr .75fr;align-items:start} /* les cartes, plus larges ; les cinq meilleurs, plus étroits (maquette), et à leur hauteur */
/* le cadre */
.civ-stat-cadre{
display:flex;flex-direction:column;min-width:0;
padding:14px 16px 16px;
background:var(--carte-2);
border:1px solid var(--ligne);
border-radius:9px;
}
.civ-stat-tete{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.civ-stat-tete > div{min-width:0;flex:1}
.civ-stat-ico{width:22px;height:22px;flex:none;margin-top:1px;color:var(--or)}
.civ-stat-titre{margin:0;font-size:15px;font-weight:700;color:var(--blanc)}
.civ-stat-sous{margin:3px 0 0;font-size:12px;color:var(--gris-clair)}
.civ-stat-corps{display:flex;flex-direction:column;min-width:0}
.civ-stat-attente{margin:auto 0;padding:24px 0;text-align:center;font-size:12.5px;color:var(--gris)}
/* une ligne de liste : l'image, le nom, puis les cellules — chaque rangée
donne ses colonnes dans son propre style */
.civ-stat-ligne{display:grid;align-items:center;gap:12px;min-height:29px}
.civ-stat-ligne + .civ-stat-ligne{border-top:1px solid color-mix(in srgb, var(--ligne) 55%, transparent)}
.civ-stat-ligne.peu{opacity:.42} /* trop peu de parties pour juger : grisée (l'infobulle dit combien) */
.civ-stat-drapeau{width:24px;height:16px;border-radius:3px;object-fit:cover;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.civ-stat-vignette{display:inline-flex;align-items:center;justify-content:center;width:30px;height:22px;border-radius:4px;background:var(--carte);border:1px solid var(--ligne);color:var(--gris);flex:none}
.civ-stat-vignette > .icone{width:14px;height:14px}
.civ-stat-nom{font-size:12.5px;color:var(--blanc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.civ-stat-cellule{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.civ-stat-cellule.gauche{color:var(--bleu);text-align:right} /* les cinq meilleurs */
.civ-stat-cellule.valeur{text-align:right} /* une valeur colorée par sa place dans la liste (la couleur est posée par la rangée) */
/* ==== Corp/Civilisation/StatCiv/Global/global.css ==== */
/* GLOBAL — le bouton du rang (Fonction/Filtre) à GAUCHE, au-dessus du taux de
victoire (user, 15 sept.), puis les deux compteurs de la page de la
civilisation, côte à côte, avec le même air (10 px). */
.civ-stat-global{display:flex;flex-direction:column;gap:10px}
.civ-stat-global-haut{display:flex;justify-content:flex-start}
/* le bouton du rang, ICI seulement (le Ladder garde le sien) : l'allure des
autres boutons de la page — la bordure et un léger dégradé à l'intérieur —
dans le bleu du mot « Rang » (user, 15 sept.) ; au survol et ouvert, le
fond s'éclaire, la bordure reste bleue */
.civ-stat-global-haut .filtre{
border-color:var(--bleu);
background-color:var(--carte);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--bleu) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--bleu) 38%, transparent);
}
.civ-stat-global-haut .filtre:hover,
.civ-stat-global-haut .filtre.deroulant-ouvert{border-color:var(--bleu);background-color:var(--survol)}
/* …et l'apparence du bouton Rang du Ladder (user, 15 sept.) : sans libellé ni
flèche, la valeur centrée, une largeur fixe (celle du bouton Rang du Ladder,
« Tous les rangs » compris) ; ouvert, il perd ses coins du bas et la liste
(.ladder-deroulant, Corp/Ladder/Filtres/filtres.css) se colle dessous */
.civ-stat-global-haut .filtre{box-sizing:border-box;min-width:110px}
.civ-stat-global-haut .filtre-libelle:empty{display:none}
.civ-stat-global-haut .filtre-valeur{flex:1;text-align:center;white-space:nowrap}
.civ-stat-global-haut .filtre-chevron{display:none}
.civ-stat-global-haut .filtre.deroulant-ouvert{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-bottom-color:color-mix(in srgb, var(--bleu) 35%, transparent);
}
.civ-stat-compteurs{display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));gap:10px}
/* les deux compteurs : le « dégradé » (user, 15 sept.) dans la couleur de leur
barre — bordure pleine, léger dégradé et lueur à l'intérieur */
.civ-stat-compteurs .taux{
border-color:var(--taux-couleur);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--taux-couleur) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--taux-couleur) 38%, transparent);
}
/* ==== Corp/Civilisation/StatCiv/Duels/duels.css ==== */
/* DUELS — deux cadres côte à côte ; les colonnes drapeau, nom, valeur, barre. */
.civ-stat-duels{grid-template-columns:repeat(2, minmax(0, 1fr))}
.civ-stat-duels .victoire .civ-stat-ligne{grid-template-columns:24px minmax(90px, 150px) 52px minmax(0, 1fr)}
.civ-stat-duels .duree .civ-stat-ligne{grid-template-columns:24px minmax(90px, 150px) 44px minmax(0, 1fr)}
/* ==== Corp/Civilisation/StatCiv/Cartes/cartes.css ==== */
/* CARTES — les deux cadres des cartes, avec les deux cadres des Meilleurs
sur la même rangée (les quatre cadres du bas de la maquette) : cette
rangée s'étale sur deux colonnes de la grille du bas. */
.civ-stat-cartes{display:contents}
/* la rangée du bas est étroite : les colonnes se serrent, le nom garde le plus de place */
.civ-stat-cartes .civ-stat-ligne{gap:8px}
.civ-stat-cartes .victoire .civ-stat-ligne{grid-template-columns:30px minmax(0, 1fr) 44px minmax(40px, .9fr)}
.civ-stat-cartes .duree .civ-stat-ligne{grid-template-columns:30px minmax(0, 1fr) 40px minmax(40px, .9fr)}
/* ==== Corp/Civilisation/StatCiv/Meilleurs/meilleurs.css ==== */
/* MEILLEURS — les deux cadres des cinq meilleurs, sur la rangée du bas avec
les cartes ; un numéro dans un rond avant chaque ligne. */
.civ-stat-meilleurs{display:contents}
.civ-stat-meilleurs .civ-stat-ligne{grid-template-columns:22px 30px minmax(0, 1fr) 48px;gap:8px;min-height:34px}
.civ-stat-meilleurs .duels .civ-stat-ligne{grid-template-columns:22px 24px minmax(0, 1fr) 48px}
.civ-stat-numero{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;border-radius:50%;
background:var(--carte);border:1px solid var(--ligne);
font-size:11px;font-weight:700;color:var(--blanc);
}
/* ==== Corp/Accueil/accueil.css ==== */
/* Accueil — le style de la page. Rien encore. */
/* ==== Corp/Controle/controle.css ==== */
/* Contrôle — la page de relecture des données. Sobre : des boutons, des plis, des listes. */
.controle{display:flex;flex-direction:column;gap:14px;padding:4px 2px 24px}
.controle-mot{margin:0;font-size:var(--texte-info-taille);font-weight:var(--texte-info-graisse);color:var(--texte-info-couleur);max-width:900px}
.controle-mot b{color:var(--blanc);font-weight:600}
.controle-boutons{display:flex;flex-wrap:wrap;gap:6px}
.controle-bouton{
padding:6px 12px;
border:1px solid var(--ligne);
border-radius:5px;
background:var(--carte);
color:var(--gris-clair);
font-family:inherit;
font-size:12px;
font-weight:600;
cursor:pointer;
}
.controle-bouton:hover{background:var(--survol);border-color:var(--or-sombre);color:var(--blanc)}
.controle-bouton:first-child{color:var(--or)}
.controle-rapports{display:flex;flex-direction:column;gap:4px}
.controle-corps{padding:2px 4px 10px}
.controle-comptes{margin:0 0 8px;font-size:12px;color:var(--gris)}
.controle-section{
margin:12px 0 4px;
font-size:var(--intitule-taille);
font-weight:var(--intitule-graisse);
color:var(--intitule-couleur);
text-transform:uppercase;
letter-spacing:.06em;
}
.controle-section-douce{color:var(--gris)}
.controle-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.controle-ligne{
--controle-couleur: var(--or);
display:grid;
grid-template-columns:minmax(140px, 260px) 90px 1fr;
gap:12px;
align-items:baseline;
padding:4px 10px;
border-left:2px solid var(--controle-couleur);
background:var(--carte-2);
border-radius:0 4px 4px 0;
font-size:12.5px;
}
.controle-ligne b{color:var(--blanc);font-weight:600;overflow-wrap:anywhere}
.controle-famille{color:var(--controle-couleur);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.controle-texte{color:var(--gris-clair);overflow-wrap:anywhere}
/* ==== Corp/Ladder/ladder.css ==== */
/* LADDER — la page : la bande des filtres collée en haut (Filtres), puis la
liste qui défile dessous ; un peu d'air en bas pour finir. Plus de podium
(user, 15 sept.) : la liste commence à l'air sous la ligne jaune, là même où
l'indicateur des colonnes se bloque. */
:root{--ladder-air:16px} /* l'air sous la ligne jaune : avant la liste, et sous la ligne quand l'indicateur des colonnes est bloqué */
.ladder{display:flex;flex-direction:column;padding-bottom:24px}
.ladder-liste{margin-top:var(--ladder-air)}
/* ==== Corp/Ladder/Filtres/filtres.css ==== */
/* FILTRES — la bande fixe : collée en haut du corps, sans fond, devant ce qui défile ;
le titre doré derrière la couronne, les boutons de filtre (Fonction/Filtre),
la recherche, puis le trait doré */
.ladder-filtres{
position:sticky;top:0;z-index:5;
display:flex;flex-direction:column;gap:12px;
padding:4px 0 0;
/* pas de fond, comme toute bande collante du site : ce qui passe dessous s'estompe (Estompe) */
}
/* la couronne, plus grande que les deux lignes de texte : 68 × 69 px (+50 %, user,
15 sept.) ; le texte est centré verticalement sur elle */
.ladder-titre{display:flex;align-items:center;gap:12px}
.ladder-titre-icone{width:68px;height:69px;object-fit:contain;flex:none;transform:translateY(-5px)} /* remontée de 5 px (user, 15 sept. : 10 px, puis redescendue de 5) : un décalage visuel, la bande garde sa hauteur */
.ladder-titre-mot{margin:0;font-size:27px;font-weight:700;letter-spacing:.1em;line-height:1.1;color:var(--or)} /* « Classement », la première lettre seule en capitale (user, 11 sept.) */
.ladder-titre-sous{margin:3px 0 0;font-size:12px;color:var(--gris-clair)}
.ladder-filtres-rangee{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* les boutons de filtre : Fonction/Filtre (.filtre) — Saison, Match, Rang, Région.
Ici (le Ladder garde le style commun ailleurs) : le « dégradé » (user, 15 sept.),
dans le bleu du libellé — bordure, léger dégradé et lueur à l'intérieur ; au
survol et ouvert, le fond s'éclaire, la bordure reste bleue */
.ladder-filtres .filtre{
border-color:var(--bleu);
background-color:var(--carte);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--bleu) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--bleu) 38%, transparent);
}
.ladder-filtres .filtre:hover,
.ladder-filtres .filtre.deroulant-ouvert{border-color:var(--bleu);background-color:var(--survol)}
/* une largeur FIXE par bouton (user, 15 sept.) : filtres.js lui donne la largeur de
son choix le plus long ; la valeur prend la place, le chevron reste au bord droit */
.ladder-filtres .filtre{box-sizing:border-box}
.ladder-filtres .filtre-libelle:empty{display:none} /* plus de libellé (Match, Rang, Région) : la valeur seule (user, 15 sept.) */
.ladder-filtres .filtre-valeur{flex:1;text-align:center;white-space:nowrap} /* le texte centré sur tout le bouton, au-dessus du texte de la liste */
.ladder-filtres .filtre-chevron{display:none} /* plus de petite flèche dans les boutons du Ladder (user, 15 sept.) */
/* la liste qui s'ouvre sous un bouton du Ladder : son texte centré aussi */
/* …à la largeur du bouton (filtres.js : largeur 'bouton'), plus petite (user, 15 sept.) */
.deroulant.ladder-deroulant{min-width:0;padding:3px}
/* la liste FAIT PARTIE du bouton (user, 15 sept.) : ouverte, elle se colle dessous
(colle), à sa largeur ; le bouton perd ses coins du bas, la liste ses coins du
haut et sa bordure du haut ; un trait bleu clair les sépare. Le choix en cours
reste écrit dans le bouton, en haut du bloc : la liste ne le répète pas
(sansActif). La liste porte le « dégradé » bleu, comme le bouton. */
.ladder-filtres .filtre.deroulant-ouvert{
border-bottom-left-radius:0;
border-bottom-right-radius:0;
border-bottom-color:color-mix(in srgb, var(--bleu) 35%, transparent);
}
.deroulant.ladder-deroulant{
border:1px solid var(--bleu);
border-top:0;
border-radius:0 0 8px 8px;
background-color:var(--carte);
background-image:linear-gradient(180deg, color-mix(in srgb, var(--bleu) 16%, transparent) 0%, transparent 75%);
box-shadow:inset 0 0 7px color-mix(in srgb, var(--bleu) 38%, transparent), 0 14px 34px -14px #000;
}
.deroulant.ladder-deroulant .deroulant-ligne{justify-content:center;height:26px;padding:0 6px;font-size:12px}
.deroulant.ladder-deroulant .deroulant-texte{flex:1;text-align:center}
/* au survol d'une ligne : pas de surlignage, le texte seul devient or (user, 15 sept.) */
.deroulant.ladder-deroulant .deroulant-ligne:hover{background:none;color:var(--or)}
/* un filtre qui ne vaut pas pour ce tableau (Saison et Rang en rapide) : il reste
à sa place, GRISÉ et non cliquable, au lieu de disparaître (user, 15 sept.) */
.ladder-filtres .filtre.filtre-desactive{
pointer-events:none;
cursor:default;
border-color:var(--ligne);
background-image:none;
box-shadow:none;
opacity:.5;
}
.ladder-filtres .filtre.filtre-desactive .filtre-libelle,
.ladder-filtres .filtre.filtre-desactive .filtre-valeur,
.ladder-filtres .filtre.filtre-desactive .filtre-chevron{color:var(--gris)}
.ladder-recherche{
display:inline-flex;align-items:center;gap:9px;
height:32px;padding:0 10px;min-width:200px;flex:1;max-width:280px;
border:1px solid var(--ligne);border-radius:8px;
background:var(--carte);
cursor:text;
}
.ladder-recherche:focus-within{border-color:var(--or)}
.ladder-recherche-loupe{width:14px;height:14px;color:var(--gris);flex:none}
.ladder-recherche input{
flex:1;min-width:0;border:0;background:none;outline:none;
color:var(--blanc);font-family:inherit;font-size:12.5px;
}
.ladder-recherche input::placeholder{color:var(--gris)}
.ladder-recherche input::-webkit-search-cancel-button{display:none}
/* la croix qui efface, dès qu'il y a du texte */
.ladder-recherche-croix{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;padding:0;border:0;background:none;color:var(--blanc);cursor:pointer} /* blanc clair, sans fond ni bordure */
.ladder-recherche-croix[hidden]{display:none}
.ladder-recherche-croix > .icone{width:15px;height:15px}
.ladder-recherche-croix:hover{color:var(--or)}
.ladder-filtres-trait{margin-top:2px}
/* ==== Corp/Ladder/Liste/liste.css ==== */
/* LISTE — un cadre sombre arrondi, fait de l'indicateur, des lignes et du pied ; l'indicateur des colonnes en petites
capitales grises ; une grille par ligne, la même pour l'indicateur ; les
lignes séparées d'un trait fin, éclairées au survol ; « Voir plus » en bas */
.ladder-liste{
/* la grille de l'ancien site : les colonnes ont leur largeur, et trois vides
flexibles se partagent le reste à parts égales — Elo et rang tombent au
milieu de ce qui sépare le joueur du taux, parties et taux au milieu de ce
qui sépare le rang de l'activité. Le nom et le taux cèdent un peu sur un
corps étroit. */
--ladder-grille: 44px 36px minmax(180px,220px) minmax(0,1fr) 72px 34px minmax(0,1fr) 72px minmax(150px,270px) minmax(0,1fr) 118px 16px; /* 118 px : « Dernière activité » y tient entier, centré */
/* pas de fond ni de bord sur le cadre lui-même : quand l'indicateur des colonnes
se bloque, un fond monterait au-dessus de lui. Le fond et les bords sont
portés par l'indicateur, chaque ligne et le pied, qui font le cadre ensemble */
}
.ladder-colonnes,.ladder-ligne{
display:grid;grid-template-columns:var(--ladder-grille);align-items:center;column-gap:12px;
padding:0 16px;
}
/* l'indicateur des colonnes se bloque sous la bande des filtres (sa hauteur :
--ladder-bande-h, posée par ladder.js) ; sans fond, comme toute bande
collante : les lignes s'estompent avant de passer dessous */
.ladder-colonnes{
position:sticky;top:calc(var(--ladder-bande-h, 0px) + var(--ladder-air));z-index:4; /* le même air sous la ligne jaune, bloqué ou non */
height:38px;
font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);white-space:nowrap; /* la finesse de l'ancien site : 10 px, demi-gras */
background:var(--carte-nuit); /* le haut du cadre : c'est lui qui se bloque, le fond ne monte plus au-dessus */
border:1px solid var(--ligne);border-radius:12px 12px 0 0;
}
/* chaque intitulé se pose au-dessus de sa valeur */
.ladder-colonnes > span:nth-child(1),.ladder-colonnes > span:nth-child(5),.ladder-colonnes > span:nth-child(6),
.ladder-colonnes > span:nth-child(8),.ladder-colonnes > span:nth-child(9),.ladder-colonnes > span:nth-child(11){text-align:center}
.ladder-lignes{display:flex;flex-direction:column}
.ladder-ligne-bloc{background:var(--carte-nuit);border-left:1px solid var(--ligne);border-right:1px solid var(--ligne);border-bottom:1px solid color-mix(in srgb, var(--ligne) 70%, transparent)}
.ladder-ligne-bloc:last-child{border-bottom:0}
.ladder-ligne{
width:100%;height:60px;
border:0;background:none;
color:var(--blanc);font-family:inherit;font-size:13px;text-align:left;
cursor:pointer;
transition:background-color .14s ease;
}
.ladder-ligne:hover{background:var(--survol)}
/* la ligne dont la fiche est ouverte : un fond doré, sombre */
.ladder-ligne-bloc.ouvert > .ladder-ligne{background:color-mix(in srgb, var(--or) 14%, var(--carte-nuit))}
.ladder-cellule{min-width:0}
.ladder-rang{display:flex;justify-content:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gris-clair)}
/* la photo : ronde, sur le bleu sombre du site ; l'icône d'unité dessous, l'avatar par-dessus s'il existe */
/* la photo : Fonction/Photo (.photo) ; .ladder-photo n'est là que pour les cadres du podium */
.ladder-nom{display:flex;align-items:center;gap:8px;font-size:14px}
.ladder-nom > b{flex:0 1 auto;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ladder-pastille{
flex:none;display:inline-flex;align-items:center;height:17px;padding:0 5px;
border:1px solid;border-radius:4px;
font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
}
.ladder-pro{color:var(--or);border-color:color-mix(in srgb, var(--or) 55%, transparent)}
.ladder-twitch{color:var(--violet);border-color:color-mix(in srgb, var(--violet) 55%, transparent)}
.ladder-twitch.on{color:var(--blanc);background:var(--violet);border-color:var(--violet)}
.ladder-twitch:hover{border-color:var(--violet);background:color-mix(in srgb, var(--violet) 25%, transparent)}
.ladder-vieux{color:var(--gris);border-color:var(--ligne)}
.ladder-elo{text-align:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums} /* centré sous « Elo » */
.ladder-ecusson{display:flex;justify-content:center}
.ladder-parties{text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
/* le taux : le chiffre centré au-dessus de la barre */
.ladder-taux{display:flex;flex-direction:column;align-items:center;gap:5px}
.ladder-taux-pc{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.ladder-taux-barre{display:block;width:100%;height:5px;border-radius:3px;background:#1E293D;overflow:hidden}
.ladder-taux-barre > i{display:block;height:100%;border-radius:3px}
.ladder-activite{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:var(--gris-clair)} /* centrée sous son titre */
.ladder-point{width:7px;height:7px;flex:none;border-radius:50%;background:var(--gris)}
.ladder-point.on{background:var(--pos)}
.ladder-chevron{width:12px;height:12px;color:var(--gris);transform:rotate(90deg);transition:transform .14s ease;justify-self:end}
.ladder-ligne-bloc.ouvert .ladder-chevron{transform:rotate(-90deg)}
/* le pied : « Voir plus », ou le mot de la fin */
.ladder-pied{display:flex;flex-direction:column;align-items:center;background:var(--carte-nuit);border:1px solid var(--ligne);border-radius:0 0 12px 12px;overflow:hidden}
.ladder-plus{
width:100%;height:44px;
border:0;background:none;
color:var(--blanc);font-family:inherit;font-size:13px;font-weight:700;
cursor:pointer;
transition:background-color .14s ease, color .14s ease;
}
.ladder-plus:hover{background:var(--survol);color:var(--or)}
.ladder-message{margin:0;padding:14px;font-size:12.5px;color:var(--gris)}
/* pendant une lecture, la liste s'assourdit */
.ladder-liste.attend .ladder-lignes{opacity:.45;transition:opacity .2s ease}
/* ==== Corp/Ladder/Fiche/fiche.css ==== */
/* FICHE — les cadres du détail d'un joueur, aux tailles de l'ancien site :
trois rangées (trois cadres ; la courbe et une colonne de trois petits
cadres ; les barres et les cartes détestées) */
/* un seul air, 12 px, partout : entre la ligne du joueur et les cadres, entre les
cadres, et entre les cadres et le bord du cadre de la liste */
.fiche{--fiche-air:12px;display:flex;flex-direction:column;gap:var(--fiche-air);margin:var(--fiche-air);font-size:13px}
.fiche[hidden]{display:none} /* refermée par un second clic sur la ligne : « hidden » l'emporte sur le flex */
/* la fiche paraît en douceur : elle monte de quelques pixels en se dévoilant */
.fiche{animation:fiche-parait .45s ease-out both}
@keyframes fiche-parait{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.fiche{animation:none}}
.fiche-rangee{display:grid;gap:var(--fiche-air)}
.fiche-trois{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(150px,auto)} /* réduit : la fiche tient sur un écran (règle du user, 8 sept.) */
.fiche-deux{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-auto-rows:139px} /* plus de Meilleur rang (user, 15 sept.) : Parties récentes seul à droite, +40 % (99 -> 139 px), et la courbe à la même hauteur */
.fiche-bas{grid-template-columns:minmax(0,auto) minmax(280px,1fr);min-height:170px}
.fiche-colonne{display:flex;flex-direction:column;gap:var(--fiche-air)}
.fiche-colonne > div{flex:1;display:flex;flex-direction:column} /* les cadres de droite se partagent la hauteur de la courbe, à parts égales */
.fiche-colonne > div > .fiche-cadre{flex:1}
.fiche-rangee > div{min-width:0;display:flex;flex-direction:column}
.fiche-rangee > div > .fiche-cadre{flex:1}
.fiche-cadre{display:flex;flex-direction:column;min-width:0;padding:12px 14px;background:var(--carte-2);border:1px solid var(--or-sombre);border-radius:11px} /* le liseré doré, comme les cadres du site */
.fiche-cadre.mini{padding:12px 14px}
.fiche-titre{margin:0 0 11px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gris)}
.fiche-cadre.vert .fiche-titre{color:var(--pos)}
.fiche-cadre.rouge .fiche-titre{color:var(--neg)}
.fiche-titre-rangee{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.fiche-attente{margin:auto 0;padding:40px 0;text-align:center;font-size:13px;color:var(--gris)}
.fiche-roue{display:block;margin:0 auto;width:26px;height:26px;border-radius:50%;border:2.5px solid color-mix(in srgb, var(--gris) 32%, transparent);border-top-color:var(--or);animation:fiche-tourne .8s linear infinite}
@keyframes fiche-tourne{to{transform:rotate(360deg)}}
/* les trios de chiffres : un grand nombre, son intitulé dessous */
.fiche-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:12px}
.fiche-trio.bas{margin-top:8px;padding-top:8px;border-top:1px solid color-mix(in srgb, var(--ligne) 60%, transparent)}
.fiche-trio > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.fiche-trio b{font-size:19px;font-weight:700;color:var(--blanc);font-variant-numeric:tabular-nums}
.fiche-trio em{font-style:normal;font-size:11px;color:var(--gris)}
/* la civilisation principale : le drapeau et le nom */
.fiche-civ{display:flex;align-items:center;gap:10px;margin-bottom:13px;min-width:0;font-size:14px;font-weight:700;color:var(--blanc)}
.fiche-civ .fiche-drapeau{width:46px;height:29px;border-radius:4px;object-fit:cover;flex:none}
/* une carte : le nom, son taux, ses parties */
.fiche-carte{display:grid;grid-template-columns:minmax(0,1fr) 58px 42px;align-items:center;gap:10px;padding:5px 0}
.fiche-carte + .fiche-carte{border-top:1px solid color-mix(in srgb, var(--ligne) 55%, transparent)}
.fiche-carte-nom{font-size:12.5px;color:var(--blanc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fiche-carte b{font-size:12.5px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.fiche-carte-n{font-size:12.5px;font-weight:700;text-align:right;color:var(--blanc);font-variant-numeric:tabular-nums}
/* la courbe de l'Elo — comme dans le Duel (user, 10 sept. au soir) : la boîte du dessin prend
toute la place sous le titre et déborde des marges du cadre pour toucher ses bords bas, gauche
et droit, qui lui servent d'axes ; le dessin s'étire à la place (les traits gardent leur
finesse) et épouse l'arrondi des deux coins du bas ; le trait fin (1,2 px) en violet, sous lui
un dégradé de sa couleur, franc au trait et évanoui vers la ligne de base */
.fiche-cadre.historique{overflow:visible}
.fiche-courbe-boite{position:relative;flex:1;min-height:70px;display:flex;margin:6px -14px -12px;cursor:crosshair}
.fiche-courbe{display:block;width:100%;height:100%;clip-path:inset(0 round 0 0 10px 10px)}
.fiche-trace{fill:none;stroke:var(--violet);stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fiche-degrade-haut{stop-color:var(--violet);stop-opacity:.45}
.fiche-degrade-bas{stop-color:var(--violet);stop-opacity:.04}
/* le point du survol : un disque violet cerné du fond du cadre, centré sur la courbe ; l'Elo à sa
droite dans une petite fenêtre exactement comme l'Infobulle (même fond, bordure, police, ombre),
le filet de gauche en violet */
.fiche-point{position:absolute;z-index:2;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 2px var(--carte-2);pointer-events:none}
.fiche-point[hidden]{display:none}
.fiche-point-elo{position:absolute;left:14px;top:50%;transform:translateY(-50%);background:var(--carte);border:1px solid var(--ligne);border-left:2px solid var(--violet);border-radius:4px;padding:5px 11px;color:var(--blanc);font-size:12.5px;font-weight:600;letter-spacing:.05em;line-height:normal;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 12px 28px -16px #000}
.fiche-saisons{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.fiche-saison{display:flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 8px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:700;color:var(--gris);background:var(--carte);border:1px solid var(--ligne);border-radius:6px}
.fiche-saison.on{color:var(--violet);border-color:color-mix(in srgb, var(--violet) 55%, transparent)}
/* les dix derniers résultats */
.fiche-pastilles{display:flex;gap:5px;flex-wrap:wrap}
.fiche-pastille{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:6px;font-size:11px;font-weight:700}
.fiche-pastille.v{color:var(--pos);background:color-mix(in srgb, var(--pos) 16%, transparent);border:1px solid color-mix(in srgb, var(--pos) 40%, transparent)}
.fiche-pastille.d{color:var(--neg);background:color-mix(in srgb, var(--neg) 16%, transparent);border:1px solid color-mix(in srgb, var(--neg) 40%, transparent)}
.fiche-sous{margin:10px 0 0;font-size:11px;color:var(--gris)}
/* Parties récentes : les carrés centrés verticalement dans le cadre (user, 15 sept.) —
des marges automatiques au-dessus et au-dessous ; le résumé descend en bas */
.fiche-cadre.recents .fiche-pastilles{margin:auto 0}
/* les barres par civilisation : une colonne de 34 px par civilisation, le contour
à cent pour cent sur toutes, le pourcentage au survol */
.fiche-barres{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,34px);justify-content:start;gap:6px;align-items:end;height:118px}
.fiche-barre{display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.fiche-barre-tube{position:relative;flex:1 1 auto;width:100%;max-width:34px;border:1px solid color-mix(in srgb, var(--ligne) 85%, var(--gris));border-bottom:0;border-radius:4px 4px 0 0}
.fiche-barre-plein{position:absolute;left:0;right:0;bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(180deg, var(--tx, var(--bleu)), color-mix(in srgb, var(--tx, var(--bleu)) 45%, transparent))}
.fiche-barre-pc{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .12s ease;pointer-events:none;color:var(--blanc);text-shadow:0 0 5px var(--carte-2), 0 0 3px var(--carte-2), 0 1px 2px rgba(0,0,0,.9)}
.fiche-barre:hover .fiche-barre-pc{opacity:1}
.fiche-barre-drapeau{width:26px;height:17px;border-radius:3px;overflow:hidden;flex:none}
.fiche-barre-drapeau .fiche-drapeau{width:100%;height:100%;object-fit:cover;display:block}
.fiche-cadre.civs{overflow-x:auto;scrollbar-width:thin}
/* plus aucune image derrière les cadres (user, 15 sept.) : ni les anciens décors propres à
chaque cadre, ni l'image partagée — tous gardent leur fond de base, var(--carte-2) */
/* ==== Corp/Duel/duel.css ==== */
/* DUEL — la page fait exactement la hauteur visible du corps : un écran, pas
plus. Une grille de huit cadres aux proportions du user (9 sept.) : quatre
rangées de 25 / 35 / 20 / 20 % de la hauteur ; la troisième coupée en
30 / 40 / 30 % de la largeur (la grande case au milieu, user 10 sept.), la
quatrième en 40 / 30 / 30 — d'où quatre pistes de 30 / 10 / 30 / 30, les
cases larges en enjambant deux ; seul l'air entre elles (--duel-air) est
retiré des proportions. Chaque cadre : fond carte, le liseré des boutons
du bandeau (1 px, --ligne), rayon. Le camp de gauche
est bleu, celui de droite rouge : --duel-c, posée par les cadres. */
:root{
--duel-gauche: var(--bleu);
--duel-droite: var(--neg);
}
.duel{height:100%;box-sizing:border-box}
/* le décor de la tête n'est plus dans la page : c'est Fonction/Fond, variante duel */
.duel-grille{position:relative;z-index:1}
.duel-grille{
--duel-air:10px;
display:grid;
grid-template-columns:30fr 10fr 30fr 30fr;
grid-template-rows:25fr 35fr 20fr 20fr;
gap:var(--duel-air);
width:100%;height:100%;
box-sizing:border-box;
}
.duel-case{
min-width:0;min-height:0;
display:flex;flex-direction:column;
padding:10px 12px;
box-sizing:border-box;
background:var(--carte-2);
border:1px solid var(--ligne); /* le liseré des boutons du bandeau, sur tous les cadres (user, 10 sept. — un essai sans liseré a été repris) */
border-radius:var(--cadre-rayon);
overflow:hidden;
}
.duel-case-haut,.duel-case-milieu{grid-column:1 / -1} /* toute la largeur */
.duel-case-a1{grid-column:1}.duel-case-a2{grid-column:2 / 4}.duel-case-a3{grid-column:4} /* 30 / 40 / 30 */
.duel-case-b1{grid-column:1 / 3}.duel-case-b2{grid-column:3}.duel-case-b3{grid-column:4} /* 40 / 30 / 30 */
/* la Progression laisse sortir la fenêtre d'Elo du survol, par-dessus les cadres voisins
(user, 9 sept. : la valeur était rognée au bord) */
.duel-case.duel-progression{overflow:visible;position:relative;z-index:2} /* par sa classe, pas sa case : elle a changé de place */
/* la tête laisse voir le décor : ni fond ni liseré (après .duel-case, pour l'emporter) ;
et elle laisse déborder le halo du VS (3 px sous le cadre, placement du user
du 9 sept.) — au-dessus du cadre suivant */
.duel-case-haut{background:none;border-color:transparent;overflow:visible;position:relative;z-index:1}
.duel-gauche{--duel-c:var(--duel-gauche)}
.duel-droite{--duel-c:var(--duel-droite)}
/* le titre d'un cadre, centré en haut, au format du PARAGRAPHE des panneaux « Général /
Point fort / Point faible » de la page d'une civilisation (l'ancien site, .glance p :
13,5 px, interligne 1,5, gris clair #A6B0CC — en demi-gras 500 comme la Comparaison, user 10 sept.) : les deux
lignes de score, la saison précédente */
.duel-cadre-titre{margin:-5px 0 0;font-size:var(--intitule-taille);font-weight:var(--intitule-graisse);letter-spacing:.01em;line-height:1.5;color:var(--intitule-couleur);text-align:center;white-space:nowrap} /* remontés de 5 px, les trois ensemble ; au format de l'intitulé (user, 10 sept. au soir) */
/* le titre d'un cadre : petites capitales, dans la couleur du camp (ou doré) */
.duel-titre{margin:0 0 8px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--duel-c, var(--or));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duel-attente{margin:auto;font-size:12px;color:var(--gris);text-align:center}
/* une tuile (carte, civilisation) : l'image, le nom, le taux dans la couleur du camp, les parties */
.duel-tuiles{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px;flex:1;min-height:0}
.duel-tuile{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;text-align:center}
.duel-tuile-nom{font-size:11px;color:var(--blanc);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-tuile-taux{font-size:13px;font-weight:700;color:var(--duel-c);font-variant-numeric:tabular-nums}
.duel-tuile-n{font-size:10px;color:var(--gris)}
/* l'illustration d'une carte : pas d'image encore — un rectangle rouge qui le dit (user, 9 sept.) */
.duel-illustration{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16 / 10;max-height:56px;border:1px solid var(--cadre-rouge);border-radius:6px;box-sizing:border-box;color:var(--cadre-rouge);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.duel-drapeau{width:46px;height:29px;border-radius:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
/* le bloc « intitulé : valeur » du score (Duel.scoreBloc) : l'intitulé au format des lignes de
la Comparaison (11 px, demi-gras, blanc mêlé de gris), 7 px d'air, la valeur à la taille du
« #1 » de la tête (45 px, graisse 800) dans la couleur du camp, son « % » collé, moitié
moins grand, graisse 600 (user, 9 sept.) */
.duel-score-bloc{display:flex;flex-direction:column;align-items:center;gap:7px}
.duel-score-titre{font-size:11px;font-weight:500;color:color-mix(in srgb, var(--blanc) 72%, var(--gris))}
.duel-score-valeur{font-size:45px;font-weight:800;line-height:1;color:var(--duel-c);font-variant-numeric:tabular-nums}
.duel-score-valeur small{font-size:50%;font-weight:600}
/* ==== Corp/Duel/Tete/tete.css ==== */
/* TÊTE — deux camps aux deux bouts, l'image VS au milieu (les deux camps ont le
même poids, elle reste centrée). Un camp : la photo, puis un bloc de trois
lignes calées du côté du VS — le « #1 » en très gros, le nom à son pied,
l'écusson et l'Elo en gros. Le camp de droite est le miroir (paint du user,
9 sept. ; « retour à la ligne » du pseudo le même soir ; placement final
par la maquette interactive, voir LE PLACEMENT). */
/* LE PLACEMENT — celui du user, posé pièce par pièce dans la maquette « Tête du
Duel » (l'artifact, 9 sept.), à l'écran 1500 × 900 : en px depuis le coin
haut-gauche du cadre (997 × 188,5 ; 1 px de liseré et 10 px de marge en haut),
le VS à (405, 35), le « #1 » à (335, 68 — 72 avant, remonté de 4 pour égaliser les écarts), le pseudo à (282, 115), l'Elo à
(282, 143), la photo à (205, 113) — les valeurs rondes du user, puis « remonte
tout de 30 px » (le même jour). Reporté au plus
simple : tout part du haut du cadre, trois marges fixes et deux airs. Le VS
reste centré sur le cadre (sa règle) : le user l'avait glissé 10 px à gauche
de l'axe, tout le camp avec ; on garde ses airs (11 px au VS, 21 px photo-bloc)
autour du centre. Seul le halo du VS dépasse encore le bas du cadre (de 3 px, un
dégradé transparent) : le cadre le laisse voir (duel.css, .duel-case-haut). */
.duel-tete{flex-direction:row !important;align-items:flex-start;justify-content:space-between;gap:11px} /* l'air entre un camp et le VS : 405 - 394 */
.duel-tete-vs{margin-top:24px} /* le haut du VS à 35 px du haut du cadre (1 de liseré, 10 de marge) */
/* chaque camp garde le même poids (le VS reste au centre) mais range son contenu
contre le VS : flex-end pousse vers la fin — la droite pour la gauche, et, en
row-reverse, la gauche pour la droite (user, 9 sept.) */
.duel-tete-camp{display:flex;align-items:flex-start;justify-content:flex-end;gap:21px;min-width:0;flex:1 1 0;margin-top:57px} /* le haut du « #1 » à 68 px du haut du cadre (72 avant : remonté de 4 pour égaliser les écarts, user 9 sept.) ; 21 px entre la photo et le bloc */
.duel-tete-camp.duel-droite{flex-direction:row-reverse}
/* la photo (56 px) : son haut 41 px sous celui du bloc — elle se centre sur le
couple pseudo + Elo (user, maquette du 9 sept.), plus sur le pseudo seul */
.duel-tete-photo{display:block;flex:none;margin-top:45px} /* 41 + 4 : le « #1 » est remonté de 4, pas la photo */
.duel-tete-photo .photo{border:2px solid var(--duel-c);box-shadow:0 4px 14px rgba(0,0,0,.6)}
/* le bloc : trois lignes, calées vers le VS (à droite pour la gauche, à gauche pour la droite) */
.duel-tete-bloc{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
.duel-droite .duel-tete-bloc{align-items:flex-start}
/* le classement, en très gros (45 px, +50 % le 9 sept.) et au gras maximal (Inter 900 — un essai en 800 le soir, remis à 900 par le user) */
.duel-tete-rang{font-size:45px;font-weight:900;line-height:1;color:var(--duel-c);font-variant-numeric:tabular-nums;white-space:nowrap}
.duel-tete-rang small{font-size:50%;font-weight:inherit;text-shadow:none} /* le « # », moitié moins grand, sans le halo (user, 10 sept.) ; il prend le dégradé du chiffre */
/* le nom, au pied du classement (boîte de 24 px : 20 px, interligne normal). L'écart
VISIBLE entre les chiffres du « #1 » et le haut du nom doit valoir celui entre le nom
et l'Elo, 13 px (user, 9 sept.). Avec Inter (ligne de base à 0,8635 em quand
l'interligne vaut 1, capitales de 0,727 em) : les chiffres du « #1 » finissent 6,1 px
avant leur boîte, le nom commence 4,9 px après la sienne — d'où 2 px d'air de boîte
à boîte (la marge de -2 sur l'air de 4 du bloc) */
.duel-tete-nom{font-size:20px;font-weight:700;color:var(--blanc);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-2px}
/* l'écusson puis l'Elo (le miroir à droite : l'Elo puis l'écusson, vers l'extérieur) */
.duel-tete-elo{display:inline-flex;align-items:center;gap:8px;color:var(--blanc);white-space:nowrap}
.duel-droite .duel-tete-elo{flex-direction:row-reverse}
.duel-tete-elo b{font-size:27px;font-weight:900;line-height:1;color:var(--duel-c);font-variant-numeric:tabular-nums} /* 30 px moins 10 %, dans la couleur du camp, au gras du « #1 » — 900 (user, 9 sept.) */
.duel-tete-elo .rang-icone{width:28px;height:28px}
.duel-tete-vs{flex:none;height:88%;max-height:170px;width:auto;filter:drop-shadow(0 4px 14px rgba(0,0,0,.6))} /* l'image VS du user, à la hauteur du cadre */
/* sur le décor, les textes portent une ombre pour rester lisibles */
.duel-tete-nom,.duel-tete-elo{text-shadow:0 1px 4px rgba(0,0,0,.85), 0 0 12px rgba(0,0,0,.6)}
/* le « #1 » rayonne dans sa couleur, par le HAUT (user, 10 sept.) : le chiffre lui-même est un
dégradé de lumière — clair et lumineux au sommet, la couleur pleine vers le bas — et un halo
décalé vers le haut l'entoure. Le halo est porté par un ::before qui répète le chiffre (data-rang)
derrière lui : un halo de texte sur un texte dégradé le recouvrirait. Le « # » n'a ni l'un ni l'autre */
.duel-tete-rang{position:relative;text-shadow:none}
.duel-tete-rang[data-rang]::before{
content:attr(data-rang);position:absolute;right:0;top:0;z-index:-1;color:transparent;
/* très léger, vers le haut et la droite du chiffre : une couche, décalée d'autant qu'elle est floue (user, 10 sept.) */
text-shadow:4px -5px 6px color-mix(in srgb, var(--duel-c) 55%, transparent);
}
.duel-tete-rang[data-rang]{background:linear-gradient(to bottom, color-mix(in srgb, var(--duel-c) 45%, #fff) 0%, var(--duel-c) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* CHANGER DE JOUEUR (user, 10 sept. au soir) — un bouton « Chercher un joueur » dans chaque coin du
bas du cadre (paint du user), à l'apparence des onglets du bandeau haut (capture du user : la
porte BoutonDynamique, fond --carte, bordure fine, texte blanc — la loupe devant), au survol
dans la couleur du camp et non en doré, mais le filet épais dans la COULEUR DU CAMP, bleu ou rouge (user) ; le filet et la loupe
du côté du centre pour les deux (le bouton de gauche en miroir) ; les bords extérieurs des
boutons alignés sur les bordures du cadre du dessous ; à sa largeur, pas celle fixe des onglets ; au ras des bords et du bas. */
.duel-tete-bouton.bd{position:absolute;bottom:0;width:auto;padding:0 14px 0 12px;border-left-color:var(--duel-c)} /* le filet épais dans la couleur du camp, pas doré (user, 10 sept.) */
/* au survol, tout dans la couleur du camp — texte, bordure fine, loupe — et pas le doré des onglets (user, 10 sept.) */
.duel-tete-bouton.bd:hover,.duel-tete-bouton.bd:focus-visible{color:var(--duel-c);border-color:var(--duel-c);outline:none}
/* le filet épais et la loupe du CÔTÉ DU CENTRE, pour les deux (user, 10 sept.) : le bouton de droite
garde la porte telle quelle (filet et loupe à gauche), celui de gauche est en miroir — le filet
épais à droite, la loupe après le texte */
.duel-tete-bouton.bd.duel-gauche{flex-direction:row-reverse;padding:0 12px 0 14px;border-left:1px solid var(--ligne);border-right:2px solid var(--duel-c)}
.duel-tete-bouton.bd.duel-gauche > span{margin-left:0;margin-right:9px}
.duel-tete-bouton.bd.duel-gauche:hover,.duel-tete-bouton.bd.duel-gauche:focus-visible{border-left-color:var(--duel-c)} /* sa bordure fine de gauche aussi (la règle du miroir passe après celle du survol) */
.duel-tete-bouton.bd > span{max-width:none} /* le nom entier : plus long que ceux des onglets */
/* les filets colorés au ras des bordures du cadre du dessous (user, 10 sept.) : le cadre de la tête
a 1 px de liseré (transparent) que l'absolu ne compte pas — d'où -1 px pour poser le bord du
bouton exactement sur le bord extérieur du cadre, comme la comparaison dessous */
.duel-tete-bouton.duel-gauche{left:-1px}
.duel-tete-bouton.duel-droite{right:-1px}
/* ==== Corp/Duel/Recherche/recherche.css ==== */
/* RECHERCHE — le calque des deux panneaux : posé en absolu dans la grille du Duel, du haut de la
deuxième rangée (sous la tête : 25 % de la hauteur libre, plus l'air) jusqu'en bas, sur toute
la largeur ; il ne prend pas la souris, ses panneaux si. Un panneau : la moitié de la largeur
moins la moitié de l'air (5 px de chaque côté du centre), toute la hauteur, calé sur le bord
extérieur de son côté ; l'air des cadres (fond --carte-2, liseré --ligne, rayon des cadres),
par-dessus les cadres (z-index), avec une ombre pour se voir flotter. Il DÉFILE : sa bande
reste collée en haut ; pas de barre du navigateur (user, 10 sept.) — le trait doré du site
(Fonction/Defileur, 2 px) sur son bord extérieur en tient lieu (recherche.js). */
.duel-panneaux{position:absolute;left:0;right:0;bottom:0;top:calc((100% - 3 * var(--duel-air)) * .25 + var(--duel-air));z-index:20;pointer-events:none}
.duel-panneau{position:absolute;top:0;bottom:0;width:calc(50% - var(--duel-air) / 2);box-sizing:border-box;display:flex;flex-direction:column;padding:0 0 16px;overflow-y:auto;pointer-events:auto;background:var(--carte-2);border:0;border-radius:var(--cadre-rayon);box-shadow:inset 0 0 0 1px var(--ligne), 0 24px 60px -24px #000} /* le liseré en ombre interne, pas en bordure : Estompe mesure la bande collée au ras du haut du panneau (une bordure la décalerait d'1 px, et rien ne s'estomperait) */
.duel-panneau.duel-gauche{left:0}
.duel-panneau.duel-droite{right:0}
.duel-panneau{scrollbar-width:none}
.duel-panneau::-webkit-scrollbar{display:none}
.duel-panneau[hidden]{display:none}
/* ---- le mini ladder : l'apparence du Ladder (Corp/Ladder), allégée ---- */
/* la bande fixe : collée en haut du panneau, sans fond (ce qui passe dessous s'estompe, Estompe) ;
la rangée — la couronne et le titre doré, les filtres Rang et Région (sans libellé), la
recherche — puis le trait doré */
.duel-mini-bande{position:sticky;top:0;z-index:5;flex:none;display:flex;flex-direction:column;gap:10px;padding:10px 12px 0}
.duel-mini-rangee{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.duel-mini-titre{display:flex;align-items:center;gap:8px;flex:none}
.duel-mini-couronne{width:26px;height:26px;object-fit:contain;flex:none}
.duel-mini-mot{margin:0;font-size:14px;font-weight:700;letter-spacing:.1em;line-height:1;color:var(--or)} /* « Classement », la première lettre seule en capitale, comme au Ladder (user, 11 sept.) */
.duel-mini-recherche{display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 10px;min-width:150px;flex:1;max-width:240px;border:1px solid var(--ligne);border-radius:8px;background:var(--carte);cursor:text}
.duel-mini-recherche:focus-within{border-color:var(--or)}
.duel-mini-loupe{width:14px;height:14px;color:var(--gris);flex:none}
.duel-mini-recherche input{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--blanc);font-family:inherit;font-size:12.5px}
.duel-mini-recherche input::placeholder{color:var(--gris)}
.duel-mini-recherche input::-webkit-search-cancel-button{display:none}
.duel-mini-croix{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;padding:0;border:0;background:none;color:var(--blanc);cursor:pointer}
.duel-mini-croix[hidden]{display:none}
.duel-mini-croix > .icone{width:15px;height:15px}
.duel-mini-croix:hover{color:var(--or)}
.duel-mini-trait{margin-top:2px}
/* les filtres sans leur libellé (« Rang », « Région ») : la valeur seule se comprend (user, 10 sept.) */
.duel-mini-rangee .filtre-libelle{display:none}
/* le miroir : la rangée à l'envers — la recherche, Région, Rang, puis « Classement » et la couronne */
.duel-droite .duel-mini-rangee,.duel-droite .duel-mini-titre,.duel-droite .duel-mini-recherche{flex-direction:row-reverse}
.duel-droite .duel-mini-recherche input{text-align:right}
/* les lignes : le cadre sombre du Ladder, une grille par ligne — classement 44, photo 36, le pseudo
qui prend la place, un vide, l'Elo 72, l'écusson 34 — dans cet ordre à DROITE ; à l'envers à
GAUCHE (écusson, Elo, pseudo, photo, classement : user, 10 sept.). Le bloc va d'un bord à
l'autre du panneau, sans marge ni bord sur les côtés (la bande claire des marges retirée, user) */
.duel-mini-lignes{flex:none;display:flex;flex-direction:column;margin:16px 0 0;background:var(--carte-nuit);border-top:1px solid var(--ligne);border-bottom:0;overflow:hidden}
.duel-mini-ligne{
display:grid;grid-template-columns:44px 36px minmax(0,1fr) 12px 72px 34px;align-items:center;column-gap:12px;
width:100%;height:60px;padding:0 16px;box-sizing:border-box;
border:0;border-bottom:1px solid color-mix(in srgb, var(--ligne) 70%, transparent);background:none;
color:var(--blanc);font-family:inherit;font-size:13px;text-align:left;
cursor:pointer;transition:background-color .14s ease;
}
.duel-mini-ligne:last-child{border-bottom:0}
.duel-mini-ligne:hover{background:var(--survol)}
.duel-gauche .duel-mini-ligne{grid-template-columns:34px 72px 12px minmax(0,1fr) 36px 44px;text-align:right}
.duel-mini-rang{display:flex;justify-content:center;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--gris-clair);min-width:0}
.duel-mini-nom{display:flex;align-items:center;min-width:0;font-size:14px}
.duel-gauche .duel-mini-nom{justify-content:flex-end} /* le pseudo contre la photo */
.duel-mini-nom > b{min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-mini-elo{text-align:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.duel-mini-ecusson{display:flex;justify-content:center}
/* le pied : « Voir plus », ou le mot de la fin */
.duel-mini-pied{flex:none;display:flex;flex-direction:column;align-items:center;margin:0;background:var(--carte-nuit);border-bottom:1px solid var(--ligne);overflow:hidden}
.duel-mini-plus{width:100%;height:44px;border:0;background:none;color:var(--blanc);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .14s ease, color .14s ease}
.duel-mini-plus:hover{background:var(--survol);color:var(--or)}
.duel-mini-plus[hidden],.duel-mini-message[hidden]{display:none}
.duel-mini-message{margin:0;padding:14px;font-size:12.5px;color:var(--gris)}
/* pendant une lecture, les lignes s'assourdissent */
.duel-panneau.attend .duel-mini-lignes{opacity:.45;transition:opacity .2s ease}
/* ==== Corp/Duel/Comparaison/comparaison.css ==== */
/* COMPARAISON — sept lignes qui se partagent la hauteur du cadre ; une ligne est
une grille de deux rangées : l'intitulé seul en haut, au centre ; dessous, la
valeur de gauche (bleue, calée à droite), la barre, la valeur de droite (rouge,
calée à gauche) — les valeurs à la hauteur de la barre (user, 9 sept.). */
/* les lignes ne se répartissent plus sur la hauteur : un écart fixe de 15 px entre le bas
d'une barre et l'intitulé suivant (user, 9 sept.) — la barre finit 6,5 px avant sa
ligne, d'où 8,5 px d'air entre les lignes — et le tout centré dans le cadre */
/* le cadre (son liseré est celui de tous les cadres, duel.css) ; en fond, l'illustration du user
(Asset/Fonds/duel-comparaison.webp, 10 sept., 2875 × 547 : bleu à gauche, rouge à droite, nuit
au milieu), en couverture, centrée, sous un voile noir 0,7 */
.duel-comparaison{justify-content:center;gap:8.5px;padding-top:6px;padding-bottom:6px;background:var(--carte-2)} /* plus d'illustration ni de voile (user, 15 sept.) : le fond de base */
/* la colonne du milieu : 2,2 parts, puis raccourcie de 10 % (user) — 1,784 parts, pour que la barre garde
90 % de son ancienne largeur et que les valeurs restent à 18 px de ses bouts */
.duel-ligne{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1.784fr) minmax(0, 1fr);grid-template-rows:auto auto;align-items:center;column-gap:18px;row-gap:0;min-height:0}
/* pas de filet entre les lignes (user, 9 sept.) */
/* l'intitulé, un peu moins blanc et 3 px au-dessus de la barre (user, 9 sept.) : la barre
est centrée dans la rangée des valeurs (17 px partout, voir .duel-ligne-val), 6,5 px
sous son haut — la marge négative ramène l'intitulé à 3 */
/* l'intitulé et les valeurs : le format du paragraphe des panneaux civ (13,5 px, en demi-gras 500 « pour voir »,
gris clair — user, 10 sept.), l'interligne serré pour garder le rythme des lignes */
.duel-ligne-titre{grid-row:1;grid-column:2;justify-self:center;margin-bottom:-3.5px;font-size:var(--intitule-taille);font-weight:var(--intitule-graisse);letter-spacing:.01em;line-height:1;color:var(--intitule-couleur);white-space:nowrap} /* au format de l'intitulé (user, 10 sept. au soir) */
/* les valeurs : le format de l'intitulé — 11 px, demi-gras 500 (lisibilité, user 9 sept.), même gris ;
la rangée fait 17 px partout, la hauteur des pastilles de « Parties récentes », pour
que les sept lignes aient la même hauteur et le même écart (user) */
.duel-ligne-val{grid-row:2;display:flex;align-items:center;gap:4px;height:17px;font-size:13.5px;font-weight:500;line-height:1;color:var(--gris-clair);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.duel-ligne-val{color:var(--duel-c)} /* toutes les valeurs dans la couleur de leur camp (user, 10 sept.) */
.duel-ligne-val.mieux{font-weight:600} /* le meilleur des deux : un peu plus gras */
.duel-ligne-val.duel-gauche{grid-column:1;justify-content:flex-end}
.duel-ligne-val.duel-droite{grid-column:3;justify-content:flex-start}
/* la barre : 4 px de haut (6 avant). Chaque part est un dégradé (image du user,
9 sept.) : sa couleur assombrie de 20 % au bout extérieur — comme sous un voile
noir 0,2 —, éclaircie de 15 % là où les deux se rencontrent */
.duel-ligne > .barre{grid-row:2;grid-column:2;height:4px;overflow:visible} /* l'étincelle déborde de 2 px au-dessus et au-dessous */
.duel-ligne > .barre .barre-gauche{background:linear-gradient(to right, color-mix(in srgb, var(--bleu) 80%, #000), color-mix(in srgb, var(--bleu) 85%, #fff))}
.duel-ligne > .barre .barre-droite{background:linear-gradient(to right, color-mix(in srgb, var(--neg) 85%, #fff), color-mix(in srgb, var(--neg) 80%, #000))}
/* la part la plus petite s'efface, comme un fond : sous un voile noir 0,6 (brightness .4 —
user, 10 sept. ; 0,75 jugé trop sombre) ; la plus grande garde ses couleurs */
.duel-ligne > .barre .barre-petite{filter:brightness(.4)}
/* les dix derniers résultats */
.duel-pastilles{display:inline-flex;gap:4px;flex-wrap:nowrap}
.duel-pastille{display:inline-flex;width:14px;height:14px;border-radius:4px;font-size:0;font-style:normal} /* 19 px moins 20 %, puis moins 5 % (user, 10 sept.) ; sans lettre : une case verte ou rouge */
.duel-pastille.v{color:var(--pos);background:color-mix(in srgb, var(--pos) 16%, transparent);border:1px solid color-mix(in srgb, var(--pos) 40%, transparent)}
.duel-pastille.d{color:var(--neg);background:color-mix(in srgb, var(--neg) 16%, transparent);border:1px solid color-mix(in srgb, var(--neg) 40%, transparent)}
.duel-ligne-val.duel-gauche .duel-pastilles{justify-content:flex-end}
/* ==== Corp/Duel/Progression/progression.css ==== */
/* PROGRESSION — la courbe seule, qui prend tout le cadre (le dessin s'étire à la
place, les traits gardent leur finesse) ; bleu pour la gauche, rouge pour la
droite. Sans légende, dates ni graduations (user, 9 sept.) : au survol,
un point par courbe, avec son Elo. En fond, l'illustration du user
(Asset/Fonds/duel-graph.webp, 10 sept., 568 × 155 — la taille du cadre sur son
écran), en couverture, centrée, sous un voile noir 0,7. */
/* le dessin est collé aux bords bas, gauche et droit du cadre — les axes, et aujourd'hui à
droite (user, 10 sept.) : plus de marge intérieure de ces trois côtés ; la boîte de la courbe
s'étend jusqu'à eux */
.duel-progression{padding:0;background:var(--carte-2)} /* plus d'illustration ni de voile (user, 15 sept.) : le fond de base */
/* sans titre : la boîte du dessin prend les 85 % du bas du cadre, quelle que soit sa hauteur (user, 10 sept.) */
.duel-courbe-boite{position:relative;flex:0 0 85%;min-height:0;display:flex;margin-top:auto;cursor:crosshair}
.duel-courbe{clip-path:inset(0 round 0 0 calc(var(--cadre-rayon) - 1px) calc(var(--cadre-rayon) - 1px))} /* le dessin épouse l'arrondi des deux coins du bas du cadre (qui laisse déborder, pour le survol) */
.duel-grille-ligne{display:none}
.duel-courbe{display:block;width:100%;height:100%}
.duel-grille-ligne{stroke:color-mix(in srgb, var(--ligne) 65%, var(--gris));stroke-width:1;vector-effect:non-scaling-stroke}
/* le trait (1,2 px : 2,4 réduit de moitié, user 10 sept.), et sous lui un dégradé de sa couleur, franc au trait et
évanoui vers la ligne de base — l'effet de l'image du user (9 sept.), sans points sur la ligne */
.duel-trace{fill:none;stroke-width:1.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.duel-trace.gauche{stroke:var(--duel-gauche)}
.duel-trace.droite{stroke:var(--duel-droite)}
.duel-aire.gauche{fill:url(#duel-degrade-gauche)}
.duel-aire.droite{fill:url(#duel-degrade-droite)}
.duel-degrade-haut.gauche{stop-color:var(--duel-gauche);stop-opacity:.45}
.duel-degrade-bas.gauche{stop-color:var(--duel-gauche);stop-opacity:.04}
.duel-degrade-haut.droite{stop-color:var(--duel-droite);stop-opacity:.45}
.duel-degrade-bas.droite{stop-color:var(--duel-droite);stop-opacity:.04}
/* le point du survol : un disque de la couleur du camp, cerné du fond du cadre, centré sur la
courbe, au-dessus de tout le reste. L'Elo toujours à sa DROITE (user, 9 sept.), libre de dépasser le bord droit du cadre
(le cadre a1 laisse déborder, duel.css), dans
une petite fenêtre EXACTEMENT comme l'Infobulle du bandeau gauche (Fonction/Infobulle :
même fond, même bordure, même police, même ombre), le filet de gauche dans la couleur de la
courbe (user, 9 sept.) */
.duel-point{position:absolute;z-index:2;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--duel-c);box-shadow:0 0 0 2px var(--carte-2);pointer-events:none}
.duel-point-elo{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
background:var(--carte);
border:1px solid var(--ligne);
border-left:2px solid var(--duel-c);
border-radius:4px;
padding:5px 11px;
color:var(--blanc);
font-size:12.5px;font-weight:600;letter-spacing:.05em;line-height:normal;
font-variant-numeric:tabular-nums;white-space:nowrap;
box-shadow:0 12px 28px -16px #000;
}
/* ==== Corp/Duel/Cartes/cartes.css ==== */
/* CARTES — le titre du cadre centré en haut (duel.css, .duel-cadre-titre) ; dessous, la ligne
des deux valeurs (duel.css, .duel-score-bloc, sans intitulé), la bleue puis la rouge, côte à
côte, centrées et à égale distance, au milieu de la place qui reste */
.duel-cartes{align-items:stretch}
.duel-cartes-ligne{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-evenly}
.duel-cartes .duel-score-titre{display:none}
/* le cadre « Chance de gagner le duel » : l'illustration du user (Asset/Fonds/duel-chance.webp,
2102 × 748, GagneDuel.png du 10 sept., quatrième version) — le chevalier bleu et l'archer rouge
face à face, un ciel de fumée bleue et rouge entre eux, SANS épées et SANS arcs de jauge : les
deux COMPTEURS (Fonction/Compteur, calque SVG calé sur
l'image comme elle, meet centré) les dessinent par-dessus, dans la couleur du camp
— posée ENTIÈRE (contain) et centrée ; chaque valeur se pose au centre de son compteur
— le bleu à 28,6 % de la largeur, le rouge à 71,4 %, à 86 % de la hauteur. Quand le cadre
est moins allongé que l'image (2,8:1), le fond du cadre complète en haut et en bas. */
/* le voile noir : 0,3 partout (user, 10 sept., sur la nouvelle illustration sans arcs ; avant :
0,5 partout et 0,25 sur les épées) */
/* (un voile de plus sur les épées du centre — ellipse 11 % × 42 % à 50 %/52 %, essayé à 0,2, 0,5 et 0,75 — a été
retiré par le user le 10 sept.) */
/* plus d'illustration ni de voile (user, 15 sept.) : le fond de base du cadre */
.duel-cartes.duel-chance{position:relative;background:var(--carte-2)}
.duel-chance .duel-cartes-ligne{display:block}
/* chaque valeur au CENTRE de son compteur, comme l'aiguille d'un cadran : à mi-hauteur, sur l'axe de
l'arc (28,6 % / 71,4 % de la largeur), donc à l'intérieur de la courbe, à côté d'elle (user, 10 sept. ;
avant : sous l'arc, à 86 % de la hauteur) — et, comme le compteur (cartes.js), rapprochée du centre
de 30 px (user, 10 sept. au soir) */
.duel-chance .duel-score-bloc{position:absolute;top:50%;transform:translate(-50%, -50%)}
/* derrière chaque valeur, un DISQUE noir local qui assombrit le fond pour mieux lire le chiffre (user,
10 sept. au soir) : 64 px, plein (--chance-disque) jusqu'à 45 % du rayon puis fondu vers rien — il
reste à l'intérieur du compteur ; sous le chiffre et son halo (z-index -1 dans le bloc) */
.duel-chance .duel-score-bloc{--chance-disque:.75}
.duel-chance .duel-score-bloc::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%, -50%);border-radius:50%;background:radial-gradient(circle closest-side, rgba(0,0,0,var(--chance-disque)) 0 45%, rgba(0,0,0,0) 100%);z-index:-1;pointer-events:none}
.duel-chance .duel-score-bloc.duel-gauche{left:calc(28.6% + 30px)}
.duel-chance .duel-score-bloc.duel-droite{left:calc(71.4% - 30px)}
/* les valeurs ont l'apparence de celles du Score (dégradé et halo, ci-dessous), à MOITIÉ de leur
taille : 22,5 px au lieu de 45, pour tenir à l'intérieur du compteur (user, 10 sept. au soir) */
.duel-chance .duel-score-valeur{font-size:22.5px}
.duel-chance .duel-cadre-titre{position:relative} /* au-dessus de l'image */
.duel-chance .compteur-arc{--compteur-couleur:var(--duel-c)} /* les cases allumées dans la couleur du camp */
/* le cadre « Score » : l'illustration du user (Asset/Fonds/duel-score.webp, 10 sept., 2102 × 748 —
le cavalier bleu à gauche, l'aigle rouge à droite, sur une nuit étoilée), en couverture, centrée,
sous un voile noir 0,5. Les valeurs des DEUX cadres (Score, et Chance depuis le 10 sept. au
soir) ont la lumière du « #1 » de la tête — le chiffre en dégradé, clair au sommet et couleur
pleine vers le bas, et un halo très léger vers le haut et la droite, porté par un ::before qui
répète le chiffre (data-valeur, duel.js) ; le « % » prend le dégradé, pas le halo */
.duel-cartes.duel-score-cadre{background:var(--carte-2)} /* plus d'illustration ni de voile (user, 15 sept.) : le fond de base */
.duel-cartes .duel-score-valeur{position:relative}
.duel-cartes .duel-score-valeur[data-valeur]{background:linear-gradient(to bottom, color-mix(in srgb, var(--duel-c) 45%, #fff) 0%, var(--duel-c) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.duel-cartes .duel-score-valeur[data-valeur]::before{content:attr(data-valeur);position:absolute;left:0;top:0;z-index:-1;color:transparent;text-shadow:4px -5px 6px color-mix(in srgb, var(--duel-c) 55%, transparent)}
/* ==== Corp/Duel/Saison/saison.css ==== */
/* SAISON — les deux camps côte à côte, un filet entre eux ; dans chacun la
photo, puis trois lignes : le nom, la ligue, l'Elo. En fond, l'illustration du
user en couleur (Asset/Fonds/duel-saison.webp, 10 sept.), UNE image sur tout le
cadre, cadrée par le user dans la maquette « Fond de la saison précédente » :
141,9 % de la hauteur du cadre, calée à 62,8 % en largeur et en haut (0 %) —,
sous un voile noir 0,7 (--saison-voile ; 0,5 d'abord, user). Le titre est posé par-dessus, en
haut ; les camps prennent tout le cadre. */
.duel-saison{position:relative;padding:0;overflow:hidden;background:var(--carte-2)} /* plus d'illustration ni de voile (user, 15 sept.) : le fond de base */
.duel-saison > .duel-cadre-titre{position:absolute;top:10px;left:0;right:0;z-index:1}
/* le corps : les deux camps contre le petit VS, le tout centré dans le cadre (comme la tête) */
/* tout le contenu est agrandi de 10 % (user, 10 sept.) : les tailles ci-dessous, les airs, la photo (saison.js) */
.duel-saison-corps{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:13px;padding-top:44px;box-sizing:border-box} /* 24 + 20 : le contenu centré descend de 10 px (user, 10 sept.) */
.duel-saison-camp{display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 0;justify-content:flex-end} /* calé contre le VS */
.duel-saison-camp.duel-droite{flex-direction:row-reverse}
.duel-saison-camp .photo{border:2px solid var(--duel-c);box-shadow:0 2px 8px rgba(0,0,0,.6)}
.duel-saison-vs{flex:none;height:48px;width:auto;filter:brightness(.6) drop-shadow(0 2px 8px rgba(0,0,0,.6))} /* brightness .6 = un voile noir 0,4 sur l'image, qui a des transparences (user, 10 sept.) */
/* le bloc : le nom, puis l'écusson et l'Elo ; calé vers le VS (à droite pour la gauche, à gauche pour la droite) */
.duel-saison-mots{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:0}
.duel-droite .duel-saison-mots{align-items:flex-start}
.duel-saison-nom{font-size:14.3px;font-weight:700;color:var(--blanc);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.duel-saison-elo{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.85)}
.duel-droite .duel-saison-elo{flex-direction:row-reverse} /* l'Elo puis l'écusson, vers l'extérieur */
.duel-saison-elo b{font-size:16.5px;font-weight:900;line-height:1;color:var(--duel-c);font-variant-numeric:tabular-nums}
.duel-saison-elo .rang-icone{width:20px;height:20px}
/* ==== Corp/Duel/Civs/civs.css ==== */
/* CIVS — « Meilleurs », sans titre (user, 10 sept.) : deux tuiles
côte à côte, centrées — le drapeau et l'illustration à la MÊME taille (80 × 50, user 10 sept.),
le nom, le taux, les parties (styles communs de duel.css). En fond, le décor « Performance
globale » du Ladder (Asset/Fonds/performance.webp), calé en haut à droite, en couverture,
sous un voile de la couleur du camp. */
/* le décor et, par-dessus, un voile de la couleur du camp à 0,2 : bleu à gauche, rouge à droite
(user, 10 sept.). Ils sont portés par un ::before derrière le contenu : dans le cadre BLEU, ce
fond est RETOURNÉ en miroir (scaleX(-1)), pour que les deux décors se répondent (user) */
/* plus de décor ni de voile du camp (user, 15 sept.) : le fond de base du cadre */
.duel-civs{position:relative;background:var(--carte-2)}
/* les deux tuiles côte à côte, les textes sous l'image ; les trois espaces — bord, entre les
deux, bord — sont égaux : le cadre n'a plus de marge latérale, les tuiles ont la largeur de
leur image et se répartissent à espaces égaux (user, 10 sept.) */
.duel-civs{padding-left:0;padding-right:0}
.duel-civs-corps{flex:1;min-height:0;display:flex;align-items:center;justify-content:space-evenly}
.duel-civs-corps .duel-tuile{width:80px}
.duel-civs-corps .duel-drapeau,.duel-civs-corps .duel-illustration{width:80px;height:50px;max-height:none;aspect-ratio:auto;border-radius:6px;object-fit:cover}
/* les textes des tuiles : l'apparence des intitulés au-dessus des barres de la Comparaison
(13,5 px, demi-gras, gris clair), puis (user, 10 sept.) : le nom et les parties 2 px de moins,
le nom en blanc clair, le taux dans la couleur du camp ; le nom se coupe avec des points de suspension */
.duel-civs-corps .duel-tuile-nom,.duel-civs-corps .duel-tuile-taux,.duel-civs-corps .duel-tuile-n{font-size:13.5px;font-weight:500;color:var(--gris-clair);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duel-civs-corps .duel-tuile-nom{font-size:11.5px;color:var(--blanc)}
.duel-civs-corps .duel-tuile-n{font-size:11.5px}
.duel-civs-corps .duel-tuile-taux{color:var(--duel-c);font-weight:600} /* un peu plus gras (user, 10 sept.) */
/* ==== Corp/Builder/builder.css ==== */
/* Builder — le style de la page. Rien encore. */
/* ==== Corp/Loldle/loldle.css ==== */
/* Loldle — le style de la page. Rien encore. */
/* ==== Corp/Armurerie/armurerie.css ==== */
/* ARMURERIE — le style de la page. La page remplit le cadre ; ses blocs
portent leur propre style dans leur dossier. */
.armurerie{display:flex;flex-direction:column;height:100%;box-sizing:border-box} /* un écran exactement : la bande, puis la grille qui prend le reste */
/* ==== Corp/Armurerie/Bandeau/bandeau.css ==== */
/* BANDEAU — la bande collante du haut de l'Armurerie : la rangée de 32 px (le
drapeau) le plus haut possible — collée au haut du cadre du corps, soit 30 px sous
la ligne dorée du bandeau haut, l'air minimal du corps —, 15 px d'air dessous,
puis le trait : 48 px (user, 10 sept. ; elle a eu 108 puis 63) ; sans fond ;
au centre, le VS d'or (--armurerie-vs-h de haut) ; de chaque côté, les cinq
commandes d'un camp, rangées du VS vers l'extérieur */
:root{--armurerie-bandeau-air:15px; --armurerie-rangee-h:32px; --armurerie-bandeau-h:calc(var(--armurerie-bandeau-air) + var(--armurerie-rangee-h) + 1px); --armurerie-vs-h:28px; --armurerie-air:8px} /* 84 réduit de deux tiers (user, 10 sept.) */
.armurerie-bandeau{
position:sticky;top:0;z-index:5;
display:flex;flex-direction:column;
height:var(--armurerie-bandeau-h);
box-sizing:border-box;
/* pas de fond : ce qui passera dessous s'estompera (Estompe), comme ailleurs */
}
/* le corps : la rangée collée au haut de la bande, l'air seulement dessous ; les deux
camps de part et d'autre du VS */
.armurerie-bandeau-corps{flex:none;height:var(--armurerie-rangee-h);display:flex;align-items:center;justify-content:center;gap:16px}
.armurerie-bandeau-trait{margin-top:auto} /* le trait au bas de la bande, l'air entre les deux */
.armurerie-bandeau-vs{flex:none;height:var(--armurerie-vs-h);width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
/* un camp : même largeur des deux côtés, ses boutons serrés contre le VS, la recherche au bout */
.armurerie-bandeau-camp{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:var(--armurerie-air)}
.armurerie-gauche{justify-content:flex-end}
.armurerie-droite{justify-content:flex-start}
/* les boutons : le style des filtres (Fonction/Filtre), sans libellé, chacun à LARGEUR
FIXE (user, 10 sept.) : ils ne bougent pas avec le texte, le texte se rogne « … » s'il
dépasse. Les largeurs, à régler ici : */
:root{--armurerie-l-famille:116px; --armurerie-l-type:140px; --armurerie-l-element:140px; --armurerie-l-recherche:140px}
.armurerie-filtre{flex:none;box-sizing:border-box;width:var(--armurerie-l-famille)}
.armurerie-filtre .filtre-valeur{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.armurerie-type{width:var(--armurerie-l-type)}
.armurerie-element{width:var(--armurerie-l-element)}
/* plus de miroir (user, 10 sept. au soir) : des deux côtés, le texte à gauche du cadre et
le chevron à droite (un bouton centre son texte par défaut) */
.armurerie-bandeau .filtre-valeur{text-align:left}
/* la civilisation : le drapeau seul et le chevron — sans bordure ni fond, le drapeau
haut comme le bouton (32 px), là où étaient les bords (user, 10 sept.) */
.armurerie-civ{flex:none;width:auto;padding:0;border:0;background:none} /* plus de bord du tout : le drapeau prend les 32 px */
.armurerie-civ:hover,.armurerie-civ.deroulant-ouvert{border-color:transparent;background:none}
.armurerie-civ:hover .filtre-chevron,.armurerie-civ.deroulant-ouvert .filtre-chevron{color:var(--or)}
.armurerie-civ-drapeau{height:100%;width:auto;aspect-ratio:8 / 5;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
/* la recherche (Fonction/Recherche) : au bout du camp, à largeur fixe elle aussi */
.armurerie-recherche{flex:none;width:var(--armurerie-l-recherche)}
/* ==== Corp/Armurerie/Grille/grille.css ==== */
/* GRILLE — les dix cadres sous la bande, qui remplissent le reste de l'écran :
quatre lignes — petite / grande / coût / petite —, les trois premières coupées
35 / 30 / 35 % avec le cadre central à cheval sur les trois (dessin du user,
10 sept.), la dernière en trois parts égales. Les proportions sont en variables, à
régler ; seul l'air entre les cadres (--armurerie-grille-air) en est retiré. */
:root{
--armurerie-grille-air: 10px; /* l'air entre les cadres, et sous la bande */
--armurerie-ligne-haut: auto; /* la 1re ligne suit ses deux cadres de technologies : une ligne de vignettes, ou deux dès qu'un des deux en a besoin — les deux cadres ont toujours la même hauteur (user, 10 sept.) */
--armurerie-ligne-haut-min: calc(var(--armurerie-techno) + 22px); /* jamais moins qu'une ligne de vignettes, l'air du cadre (2 × 10) et ses bords */
--armurerie-ligne-cout: 92px; /* la 3e ligne : le coût */
--armurerie-ligne-bas: 96px; /* la 4e ligne, peu haute */
}
.armurerie-grille{
flex:1;min-height:0;
display:grid;
/* six pistes de 35 / 30 / 35 (la 2e ligne) et 3 × 33,3 (la 3e) — le plus petit commun :
20 fois 5 % ; a1 = 7 parts, a2 = 6, a3 = 7 ; b1/b2/b3 = 20 / 3 parts chacune */
grid-template-columns:repeat(60, minmax(0, 1fr));
grid-template-rows:var(--armurerie-ligne-haut) minmax(0, 1fr) var(--armurerie-ligne-cout) var(--armurerie-ligne-bas);
gap:var(--armurerie-grille-air);
margin-top:var(--armurerie-grille-air);
box-sizing:border-box;
}
.armurerie-case{
min-width:0;min-height:0;
display:flex;flex-direction:column;
padding:10px 12px;
box-sizing:border-box;
background:var(--carte-2);
border:1px solid var(--ligne);
border-radius:var(--cadre-rayon);
overflow:hidden;
}
.armurerie-case-h1{grid-column:1 / 22;grid-row:1;min-height:var(--armurerie-ligne-haut-min)} /* 21 pistes = 35 % */
.armurerie-case-h3{grid-column:40 / 61;grid-row:1;min-height:var(--armurerie-ligne-haut-min)}
.armurerie-case-a1{grid-column:1 / 22;grid-row:2}
.armurerie-case-a2{grid-column:22 / 40;grid-row:1 / 4} /* 18 pistes = 30 %, sur les trois lignes */
.armurerie-case-a3{grid-column:40 / 61;grid-row:2}
.armurerie-case-c1{grid-column:1 / 22;grid-row:3}
.armurerie-case-c3{grid-column:40 / 61;grid-row:3}
.armurerie-case-b1{grid-column:1 / 21;grid-row:4} /* 20 pistes chacune = un tiers */
.armurerie-case-b2{grid-column:21 / 41;grid-row:4}
.armurerie-case-b3{grid-column:41 / 61;grid-row:4}
/* ==== Corp/Armurerie/Camp/camp.css ==== */
/* CAMP — l'identité puis les statistiques, l'une sous l'autre, SANS leurs cadres :
les blocs perdent fond, bordure, filet et air ; le cadre du camp les porte */
.armurerie-camp{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:auto;scrollbar-width:none}
.armurerie-camp::-webkit-scrollbar{display:none}
.armurerie-camp .bloc{background:none;border:0;border-radius:0;padding:0}
.armurerie-camp .details-identite{position:static} /* pas collante ici */
.armurerie-camp .details-identite > .bloc-corps{padding-right:0;align-items:flex-end} /* plus de croix, plus de place à lui réserver ; les textes descendus : la classe au bas de l'image (user, 10 sept.) */
.armurerie-camp .details-nom{margin-top:0}
/* les statistiques : sans le mot « Statistiques », les âges à gauche (user, 10 sept.) */
.armurerie-camp .details-stats-titre{display:none}
.armurerie-camp .details-stats-tete{justify-content:flex-start}
/* l'illustration et le nom se cliquent : la page Détails ; le nom s'éclaircit au survol */
.armurerie-ouvre{cursor:pointer}
.details-nom.armurerie-ouvre:hover{color:var(--blanc)}
.details-image.armurerie-ouvre:hover{box-shadow:0 0 0 1px var(--bloc-couleur)}
/* ==== Corp/Armurerie/Cout/cout.css ==== */
/* COÛT — le titre au format de celui des statistiques (12 px, gras, couleur de
l'élément), puis le bloc Coût sans son cadre */
.armurerie-cout{display:flex;flex-direction:column;gap:10px;min-height:0}
.armurerie-cout-titre{margin:0;font-size:var(--intitule-taille);font-weight:var(--intitule-graisse);letter-spacing:.01em;line-height:1.2;color:var(--intitule-couleur)} /* « Coût » au format de l'intitulé (user, 10 sept. au soir) */
.armurerie-cout .bloc{background:none;border:0;border-radius:0;padding:0}
/* ==== Corp/Armurerie/Technos/technos.css ==== */
/* TECHNOS — une rangée de vignettes de 32 px (la capture du user, 10 sept.) :
éteinte, l'image est grisée dans un liseré fin ; allumée, liseré et lueur
verts, l'image en couleurs. Les vignettes vont à la ligne quand la rangée est
pleine ; la hauteur des deux cadres est commune et suit : une ligne, ou deux dès
qu'un des deux en a besoin (user, 10 sept. ; c'est la grille qui le règle). */
:root{--armurerie-techno:30px; --armurerie-techno-air:6px} /* 32 réduit de 5 % */
.armurerie-technos{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--armurerie-techno-air);min-width:0}
.armurerie-techno{
flex:none;
width:var(--armurerie-techno);height:var(--armurerie-techno);
padding:0;
border:1px solid var(--ligne);
border-radius:5px;
background:var(--carte);
overflow:hidden;
cursor:pointer;
transition:border-color .14s ease, box-shadow .14s ease;
}
.armurerie-techno > img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.75);transition:filter .14s ease}
.armurerie-techno:hover{border-color:var(--gris-clair)}
.armurerie-techno:hover > img{filter:grayscale(.5) brightness(.9)}
.armurerie-techno.on{border-color:var(--vert);box-shadow:0 0 0 1px color-mix(in srgb, var(--vert) 45%, transparent), 0 0 8px color-mix(in srgb, var(--vert) 55%, transparent)}
.armurerie-techno.on > img{filter:none}
/* ==== Corp/Armurerie/Combat/combat.css ==== */
/* COMBAT — le cadre du centre : gauche en bleu, droite en rouge (les couleurs du Duel) ;
les illustrations et le VS en tête, les coups pour tuer en grand, puis les lignes à
deux valeurs autour d'un intitulé, les sections dorées, les quantités en bas */
/* PLACEMENT du user (10 sept. au soir, maquette « Maquette du Combat », écran 1900 × 900,
cadre 412 × 620) rendu symétrique et centré : illustrations 116 px à 24 px des bords
intérieurs, 38 px sous le haut ; VS 41 px de haut au milieu ; coups pour tuer en 58 px,
à 64 px des bords ; les sections et lignes sur toute la largeur, lignes de 22 px au pas
de 25 ; les quantités 139 × 60 à 18 px des bords, 17 px au-dessus du bas */
.armurerie-combat{
--combat-gauche: var(--bleu);
--combat-droite: var(--neg);
display:flex;flex-direction:column;gap:3px;
flex:1;min-height:0;overflow:auto;scrollbar-width:none;
}
.armurerie-combat::-webkit-scrollbar{display:none}
.armurerie-combat .armurerie-gauche{--combat-c:var(--combat-gauche)}
.armurerie-combat .armurerie-droite{--combat-c:var(--combat-droite)}
/* la tête : deux illustrations de 72 px (le cadre de l'identité), le VS entre elles */
/* le vainqueur, en tête : « Gagnant » en petit gris, le nom dessous dans la couleur de son
camp (dessin du user, 10 sept.) ; tout ce qui suit descend d'autant */
.armurerie-combat-vainqueur{display:flex;flex-direction:column;align-items:center;gap:2px;margin:10px 0 0;min-width:0}
.armurerie-combat-vainqueur-etiquette{font-size:var(--intitule-taille);font-weight:var(--intitule-graisse);letter-spacing:.01em;line-height:1.2;color:var(--intitule-couleur)} /* « Gagnant » au format de l'intitulé (user, 10 sept. au soir) */
.armurerie-combat-vainqueur-nom{max-width:100%;font-size:24px;line-height:28px;font-weight:800;letter-spacing:.01em;color:var(--combat-c, var(--gris-clair));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.armurerie-combat-vainqueur.armurerie-egalite .armurerie-combat-vainqueur-nom{color:var(--gris-clair)}
.armurerie-combat-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 24px 0;margin-bottom:6px}
.armurerie-combat{--combat-image:116px;--combat-marge:24px} /* l'illustration et sa marge : les coups pour tuer se centrent dessous */
.armurerie-combat-tete{padding-left:var(--combat-marge);padding-right:var(--combat-marge)}
.armurerie-combat-image{flex:none;width:var(--combat-image);height:var(--combat-image);border-radius:6px;background:var(--carte);overflow:hidden;box-shadow:0 0 0 1px var(--combat-c)}
.armurerie-combat-image > img{width:100%;height:100%;object-fit:cover;display:block}
.armurerie-combat-vs{height:41px;width:auto;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
/* une ligne : la valeur de gauche, l'intitulé au milieu, la valeur de droite */
/* les deux colonnes de valeurs sont TOUJOURS égales (minmax(0, 1fr)) : un nombre long
n'élargit pas sa colonne, la symétrie tient. Dans une section, la colonne du milieu
prend la largeur du titre de la section (--combat-milieu, mesurée par combat.js) et
l'écart est celui du titre (8 px) : chaque colonne de côté a exactement la largeur du
trait doré, et son chiffre, centré, tombe sur le milieu du trait (user, 10 sept.) */
.armurerie-combat-ligne{display:grid;grid-template-columns:minmax(0, 1fr) var(--combat-milieu, auto) minmax(0, 1fr);align-items:center;column-gap:8px;height:22px;padding:0}
.armurerie-combat-titre{display:flex;justify-content:center;font-size:var(--intitule-taille);font-weight:var(--intitule-graisse);letter-spacing:.01em;color:var(--intitule-couleur);white-space:nowrap} /* L'intitulé du site (corp.css) ; centré même s'il déborde de sa colonne */
.armurerie-combat-val{display:flex;justify-content:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--combat-c)}
/* les coups pour tuer : les chiffres centrés dans leur colonne (sous l'image), le titre au milieu */
.armurerie-combat-coups{column-gap:0}
/* les coups pour tuer : en grand (48 px — 58 chez le user, réduit pour que trois chiffres
tiennent), chaque nombre CENTRÉ sous l'illustration de son camp (user, 10 sept.) : sa
colonne va du bord au double de la marge et de la demi-image ; 40 px avant la première
section ; quatre chiffres et plus : plus petit (.long, posé par combat.js) */
.armurerie-combat-coups{height:68px;padding:0;margin-bottom:37px;grid-template-columns:calc(2 * (var(--combat-marge) + var(--combat-image) / 2)) minmax(0, 1fr) calc(2 * (var(--combat-marge) + var(--combat-image) / 2))}
.armurerie-combat-coups .armurerie-combat-val{font-size:48px;font-weight:800;line-height:1}
.armurerie-combat-coups .armurerie-combat-val.long{font-size:38px}
.armurerie-combat-coups .armurerie-combat-titre{font-size:12px}
/* Dégâts reçus, Armure et Nombre de coups : le détail du calcul, en gris, texte et valeurs (user, 10 sept.) */
.armurerie-combat-gris .armurerie-combat-titre,.armurerie-combat-gris .armurerie-combat-val{color:var(--gris);font-weight:600}
/* les dégâts réels et le total : un peu plus grands ; 32 px entre les réels et la section suivante */
.armurerie-combat-reel,.armurerie-combat-total{height:24px}
.armurerie-combat-reel .armurerie-combat-val,.armurerie-combat-total .armurerie-combat-val{font-size:15px}
.armurerie-combat-reel{margin-bottom:29px}
/* un intertitre : petites capitales dorées, centrées, un trait de chaque côté qui s'estompe vers le bord */
.armurerie-combat-section{display:flex;align-items:center;gap:8px;height:16px;margin-bottom:6px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--or);white-space:nowrap}
.armurerie-combat-section .trait{flex:1 1 0;width:auto}
/* les quantités, au bas du cadre : − n + par camp, dans un cadre sombre liseré de la couleur du camp */
.armurerie-combat-bas{margin-top:auto;display:flex;justify-content:space-between;gap:10px;padding:39px 18px 17px}
.armurerie-combat-quantite{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:139px;height:60px}
.armurerie-combat-quantite-titre{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.armurerie-combat-quantite-rangee{display:inline-flex;align-items:stretch;width:100%;box-sizing:border-box;border:1px solid var(--combat-c);border-radius:6px;background:var(--carte);overflow:hidden}
.armurerie-combat-quantite-bouton{flex:1 1 0;height:34px;border:0;background:none;color:var(--combat-c);font-family:inherit;font-size:18px;font-weight:700;cursor:pointer;transition:background-color .14s ease}
.armurerie-combat-quantite-bouton:hover:not(:disabled){background:var(--survol)}
.armurerie-combat-quantite-bouton:disabled{opacity:.3;cursor:default}
.armurerie-combat-quantite-val{flex:1.4 1 0;min-width:0;width:0;padding:0;text-align:center;font-family:inherit;font-size:15px;font-weight:700;color:var(--blanc);font-variant-numeric:tabular-nums;background:none;border:0;border-left:1px solid var(--ligne);border-right:1px solid var(--ligne);outline:none;-moz-appearance:textfield} /* un champ : le nombre se tape (user, 10 sept.) */
.armurerie-combat-quantite-val::-webkit-outer-spin-button,.armurerie-combat-quantite-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.armurerie-combat-quantite-val:focus{background:var(--survol)}
.armurerie-combat-attente{margin:auto;font-size:12px;color:var(--gris);text-align:center}
/* ==== Corp/Armurerie/Echange/echange.css ==== */
/* ÉCHANGE — un cadre du bas : le titre au format du texte d'information, la
rangée des deux valeurs (bleue à gauche, rouge à droite, en grand), la barre double */
.armurerie-echange{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0;justify-content:space-between}
.armurerie-echange-titre{margin:0;font-size:var(--intitule-taille);font-weight:var(--intitule-graisse);letter-spacing:.01em;line-height:1.2;color:var(--intitule-couleur);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* au format de l'intitulé, sans icône (user, 10 sept. au soir) */
.armurerie-echange-rangee{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.armurerie-echange-cote{display:flex;align-items:baseline;gap:8px;min-width:0}
.armurerie-echange-cote.armurerie-gauche{--echange-c:var(--bleu)}
.armurerie-echange-cote.armurerie-droite{--echange-c:var(--neg);flex-direction:row;justify-content:flex-end}
.armurerie-echange-val{font-size:22px;font-weight:800;line-height:1;color:var(--echange-c);font-variant-numeric:tabular-nums;white-space:nowrap}
.armurerie-echange-milieu{width:16px;height:16px;color:var(--gris);flex:none}
.armurerie-echange-barre{height:5px;flex:none;overflow:visible}