/* Identité NOVA : même sanctuaire, deux lumières. Cette feuille termine la
   cascade ; elle habille les composants existants sans déplacer leurs actions.
   Les couleurs fonctionnelles (éléments, raretés, disponibilités) restent distinctes. */
:root{
  color-scheme:dark;
  --obsidian:#100d18;
  --obsidian-2:#181320;
  --panel:#201a2a;
  --panel-2:#292134;
  --line:#493b52;
  --line-soft:#362c40;
  --gold:#d0ad70;
  --gold-bright:#edcf99;
  --gold-deep:#907447;
  --parchment:#f1e9df;
  --muted:#b6a9bc;
  --muted-2:#a091a7;
  --accent:#c2a0ee;
  --accent-soft:rgba(171,119,228,.12);
  --header-bg:rgba(19,15,27,.96);
  --header-glass:rgba(19,15,27,.72);
  --panel-wash:linear-gradient(145deg,#251d31,#18131f);
  --inset-bg:rgba(9,6,15,.32);
  /* Le fond des vignettes. Toutes les illustrations du jeu — portraits, armes,
     armures, bijoux — sont TRANSPARENTES : ce fond est le seul décor derrière
     elles. Il était écrit en dur seize fois dans six feuilles, ce qui posait
     des carrés noirs au milieu du thème clair. */
  --vignette-fond:#0b0910;
  --banner-image:url("../assets/ambiance/nova-tenebres-v2.webp");
  /* Meliodas se tient a DROITE, comme Elizabeth en Lumiere : les deux
     ambiances partagent la meme composition, texte a gauche. L'ancrage vise
     son visage, qui occupe 77 a 90 % de la largeur de l'image. */
  --banner-ancre:100%;
  --banner-ancre-petite:88%;
  --banner-veil:linear-gradient(90deg,rgba(16,13,24,.65),rgba(16,13,24,.12) 55%,transparent 80%);
  --banner-scrim:rgba(16,13,24,.52);
  --shadow:0 16px 44px rgba(0,0,0,.32);
}
:root[data-theme="light"]{
  color-scheme:light;
  --obsidian:#f4eee2;
  --obsidian-2:#eee5d6;
  --panel:#fffaf1;
  --panel-2:#f3eadc;
  --line:#cbb99e;
  --line-soft:#ded1be;
  --gold:#896127;
  --gold-bright:#78501c;
  --gold-deep:#aa8753;
  --parchment:#392d26;
  --muted:#6d5d4c;
  --muted-2:#6f5e48;
  --ink:#fff9eb;
  --ok:#287045;
  --accent:#795f99;
  --accent-soft:rgba(171,133,62,.09);
  --header-bg:rgba(250,246,236,.97);
  --header-glass:rgba(250,246,236,.74);
  --panel-wash:linear-gradient(145deg,#fffaf2,#f0e6d6);
  --inset-bg:rgba(163,132,86,.08);
  /* Un creux de parchemin, pas du blanc : les illustrations sont d'une
     luminance médiane de 91 à 107 sur 255, elles se détachent nettement.
     Les plus claires gardent leur cerne pour ne pas s'y dissoudre. */
  --vignette-fond:#eadfcc;
  --banner-image:url("../assets/ambiance/nova-lumiere-v2.webp");
  /* Meme composition qu'en Tenebres : personnage a droite, texte a gauche. */
  --banner-ancre:100%;
  --banner-ancre-petite:88%;
  --banner-veil:linear-gradient(90deg,rgba(255,246,227,.8),rgba(255,246,227,.23) 55%,transparent 80%);
  --banner-scrim:rgba(255,246,227,.6);
  --shadow:0 16px 44px rgba(85,60,29,.13);
}
body{
  background:radial-gradient(ellipse at 0 420px,var(--accent-soft),transparent 600px),var(--obsidian);
}
/* En haut de page, l'en-tête est ENTIÈREMENT transparent : le panorama passe
   dessous et se voit sans voile ni flou. Plus rien ne sépare la navigation du
   décor — ils sont la même image.

   Dès qu'on a défilé, il reprend son verre et son flou. Ce n'est pas une
   demi-mesure : sous la bannière, ce qui passe derrière l'en-tête n'est plus
   le panorama mais le contenu du site, et des onglets posés sur des cartes de
   héros en défilement seraient illisibles. La transparence sert le décor là
   où il y a du décor.

   Le filet du bas reste présent mais transparent, pour que la hauteur de
   l'en-tête ne bouge pas d'un pixel entre les deux états. */
.topbar{
  background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  transition:background .22s ease, backdrop-filter .22s ease;
}
:root[data-defile="non"] .topbar{
  text-shadow:0 1px 4px rgba(8,5,14,.62);
}
:root[data-theme="light"][data-defile="non"] .topbar{
  text-shadow:0 1px 4px rgba(255,251,242,.9);
}
:root[data-defile="oui"] .topbar{
  background:var(--header-glass);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  backdrop-filter:blur(16px) saturate(1.15);
}
@media(prefers-reduced-motion:reduce){
  .topbar{transition:none}
}
.brand{gap:12px}
.crest{border:0;background:none;box-shadow:none;width:42px;height:42px}
.crest svg{width:100%;height:100%;stroke-width:1.25}
.brand-title{font-size:28px;font-weight:500;letter-spacing:.2em}
.brand-sub{margin-top:5px;font-size:9px;letter-spacing:.16em}
.tabs{border-radius:5px;background:transparent;border-color:var(--line-soft);padding:3px;gap:3px}
.tab{border-radius:3px;font-weight:500}
.tab.active{
  background:var(--accent-soft);color:var(--gold-bright);
  box-shadow:inset 0 -2px var(--gold);
}
.subtab.active{background:transparent;box-shadow:none}
/* Le bloc du compte. Le bouton s'y logeait avec 6 px de marge et des angles à
   4 px : là où la capsule s'arrondit, sa courbe vient au contact du coin carré
   et le rectangle semble en sortir. Il devient donc une capsule lui aussi,
   emboîtée dans la première, et perd sa bordure — deux liserés concentriques
   faisaient du bruit pour rien. Sa teinte suffit à le désigner comme bouton. */
.account-connected{background:var(--inset-bg);gap:10px;padding:5px 5px 5px 14px}
.account-connected .btn{
  border-radius:999px;border-color:transparent;padding:7px 14px;
  background:rgba(217,164,65,.12);color:var(--gold-bright);
}
.account-connected .btn:hover{
  border-color:transparent;background:rgba(217,164,65,.22);color:var(--parchment);
}
/* Plus soutenu qu'en Ténèbres : sur l'ivoire, une teinte faible ne se lit plus
   comme un bouton une fois la bordure retirée. */
:root[data-theme="light"] .account-connected .btn{
  background:rgba(137,97,39,.17);color:#5d400f;
}
:root[data-theme="light"] .account-connected .btn:hover{
  background:rgba(137,97,39,.2);color:#3d2c12;
}
.section-title{font-weight:500;letter-spacing:.015em}
.section-eyebrow{color:var(--muted);font-family:var(--ui);letter-spacing:.1em;font-size:11px}
.section-lead{line-height:1.65}

/* Le paysage porte l'identité ; les outils gardent toute leur surface utile.

   Il n'a plus aucun bord. Le panorama remonte SOUS l'en-tête de verre grâce à
   la marge négative, que le padding rend au contenu pour qu'aucun texte ne
   passe derrière la navigation. Vers le bas, il s'éteint dans un long fondu.

   Le fondu est un MASQUE, pas un dégradé de couleur : il va vers la
   transparence réelle. Il suit donc le halo radial du body et les deux
   ambiances sans qu'on ait à dupliquer la moindre teinte, là où un dégradé
   vers `--obsidian` aurait laissé une trace là où le halo passe. */
:root{--banner-fondu:linear-gradient(to bottom,#000 0,#000 calc(100% - 170px),transparent 100%)}
/* Hauteur totale de la bannière, en-tête compris. Mesurée, pas choisie :
   419 px au plus haut (texte 298 px + en-tête 121 px, atteint entre 561 et
   820 px de large), auxquels s'ajoutent les 40 px de la seconde ligne
   d'onglets du groupe « Boss de Guilde », soit 459 px.

   480 et non 460 : à 1 px près, le moindre pixel de texte en plus faisait
   déborder la bannière et l'ancrage bas lâchait — le titre redescendait avec
   l'en-tête. Ces 21 px de ciel sont la marge qui rend l'invariant vrai. */
:root{--banner-hauteur:480px}
.guild-banner{
  position:relative;isolation:isolate;
  margin-top:calc(-1 * var(--topbar-h,0px));
  padding-top:var(--topbar-h,0px);
}
.guild-banner::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--banner-image);
  /* Ancre a DROITE, la ou se tient le personnage. Le panorama fait 3:1 ; des
     que la banniere est plus etroite que ca, `cover` n'en montre qu'une
     tranche. Centree, cette tranche s'arretait a 79 % de la largeur en mobile
     et coupait Meliodas comme Elizabeth, qui occupent les 22 derniers pour
     cent. Ancree a droite, elle va de 61 % a 100 % : le personnage entier, et
     le chateau tient encore dans le cadre.
     Au-dela de 3:1 l'image se cale sur la largeur et se recadre en hauteur :
     cet ancrage n'y change rien. */
  background-position:var(--banner-ancre) center;background-size:cover;
  -webkit-mask-image:var(--banner-fondu);
  mask-image:var(--banner-fondu);
}
/* Le voile est une couche à part de l'image, et non un calque de sa pile :
   un petit écran recadre le panorama, et le voile ne doit PAS se décaler
   avec lui, sinon le titre perd le fond qui le rend lisible. */
.guild-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* Le voile HAUT ne densifie que la bande occupee par l'en-tete transparent,
     puis s'eteint. Sans lui, les derniers onglets tombaient dans le halo de
     l'eclipse et « Connexion » disparaissait dans le soleil du theme clair.
     Il est cale sur `--topbar-h` : il suit l'en-tete quand celui-ci grandit. */
  background:
    linear-gradient(to bottom,
      var(--banner-scrim) 0,
      var(--banner-scrim) calc(var(--topbar-h,0px) * .74),
      transparent calc(var(--topbar-h,0px) + 44px)),
    var(--banner-veil);
  -webkit-mask-image:var(--banner-fondu);
  mask-image:var(--banner-fondu);
}
.guild-banner-inner{position:relative;width:100%;max-width:1180px;margin:0 auto;padding:36px 40px 42px;min-height:280px}
.guild-banner-copy{position:relative;max-width:610px}
/* Une seule phrase paraît : celle de la vue active. Le `:has()` lit l'état que
   la navigation pose déjà sur les sections — rien à câbler, et la bonne phrase
   est là avant même que l'application démarre.

   Le repli sur l'Accueil couvre le cas où aucune vue n'est encore active, le
   temps du premier rendu : sans lui la bannière serait muette. */
.guild-banner-texte{display:none}
body:has(#view-dashboard.active) .guild-banner-texte[data-vue="dashboard"],
body:has(#view-builder.active) .guild-banner-texte[data-vue="builder"],
body:has(#view-roster.active) .guild-banner-texte[data-vue="roster"],
body:has(#view-boss.active) .guild-banner-texte[data-vue="boss"],
body:has(#view-training.active) .guild-banner-texte[data-vue="training"],
body:has(#view-availability.active) .guild-banner-texte[data-vue="availability"],
body:has(#view-member-roster.active) .guild-banner-texte[data-vue="member-roster"],
body:has(#view-analyse.active) .guild-banner-texte[data-vue="analyse"],
body:has(#view-wiki.active) .guild-banner-texte[data-vue="wiki"],
body:has(#view-collection.active) .guild-banner-texte[data-vue="collection"],
body:has(#view-calculateur.active) .guild-banner-texte[data-vue="calculateur"],
body:has(#view-admin.active) .guild-banner-texte[data-vue="admin"],
body:not(:has(.view.active)) .guild-banner-texte[data-vue="dashboard"]{display:block}
.guild-banner-title{
  margin:0;font-family:Constantia,"Palatino Linotype",Georgia,serif;
  font-size:clamp(34px,4vw,52px);font-weight:400;line-height:1.06;letter-spacing:-.025em;
  text-wrap:balance;
}
.guild-banner-lead{margin:17px 0 20px;font-size:14px;line-height:1.6;color:var(--parchment)}
.guild-banner-link{
  display:inline-flex;align-items:center;gap:22px;min-height:44px;
  padding:0 0 4px;text-decoration:none;color:var(--gold-bright);
  border-bottom:1px solid var(--gold-deep);font-size:13px;font-weight:600;
}
.guild-banner-link:hover{color:var(--parchment);border-color:var(--parchment)}
 /* Le blason, posé comme un sceau au bas du décor. Il remplace le simple mot
   « NOVA » qui y figurait : la confrérie a une marque, pas seulement un nom.
   Le champ de l'écu est un voile sombre et non une couleur pleine, pour que
   le décor transparaisse au lieu d'être découpé. */
.guild-crest{
  position:absolute;right:42px;bottom:22px;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:#f0d9a4;filter:drop-shadow(0 2px 7px rgba(18,11,26,.6));
}
.guild-crest-ecu{display:block;width:56px;height:auto}
.guild-crest-champ{fill:rgba(14,9,22,.34)}
/* `text-indent` rattrape l'espacement de la dernière lettre, sans quoi le mot
   se poserait de travers sous l'écu. */
.guild-crest-nom{
  font:500 12px var(--display);letter-spacing:.4em;text-indent:.4em;color:inherit;
}
/* Le sélecteur vit dans l'EN-TÊTE, plus sur la bannière. C'est une préférence
   qu'on règle une fois : elle n'a pas à occuper la meilleure surface de chaque
   page, ni à chercher un coin de l'illustration où ne masquer aucun visage.
   Il est simplement l'élément du milieu de la première ligne — les deux
   moitiés égales de la marque et du compte le centrent.
   Plus d'ombre portée : elle servait à le détacher d'un décor, il est
   maintenant dans le châssis du site. */
.ambiance-switch-mobile{display:none}
.ambiance-switch{
  flex:0 0 auto;display:flex;padding:3px;
  border:1px solid var(--gold-deep);border-radius:30px;background:var(--inset-bg);
}
.ambiance-switch button{
  display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;
  border:1px solid transparent;border-radius:24px;padding:8px 12px;
  background:transparent;color:var(--muted);font:500 12px var(--ui);cursor:pointer;
}
.ambiance-switch svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ambiance-switch button[aria-pressed="true"]{color:var(--gold-bright);background:var(--accent-soft);border-color:var(--line)}
/* La bannière est IDENTIQUE dans toutes les vues. Elle n'a plus de version
   courte : même titre, même taille, même accroche, même lien d'appel. Un jeu
   de règles la raccourcissait auparavant dans les catalogues — titre à 36 px,
   lien masqué — et c'est ce qui la faisait changer d'aspect d'une page à
   l'autre.

   Le texte est ancré au BAS d'une hauteur constante, et non calé sous
   l'en-tête. Les vues du groupe « Boss de Guilde » portent une seconde ligne
   d'onglets : l'en-tête y gagne une cinquantaine de pixels, et un texte calé
   sous lui descendait d'autant. Ancré en bas, il se pose au même endroit
   partout ; c'est l'en-tête plus haut qui recouvre un peu plus de ciel.

   Le `padding-top` reste la garantie qu'aucun texte ne passe derrière la
   navigation si l'en-tête dépasse ce que la constante prévoit.
   Hors de ce palier, l'en-tête mobile ne porte pas de sous-onglets : sa
   hauteur ne change pas, il n'y a rien à stabiliser. */
@media(min-width:561px){
  .guild-banner{
    display:flex;flex-direction:column;justify-content:flex-end;
    min-height:var(--banner-hauteur);
  }
  .guild-banner-inner{min-height:0}
}

/* Des tranches de grimoire : angles fins et métal patiné, sans cadres d'image
   autour des formulaires. Tous les ornements laissent passer les clics. */
.metabar{background:var(--panel-wash);border-radius:5px;border-top-color:var(--gold-deep);box-shadow:0 4px 18px var(--inset-bg)}
.field label{text-transform:none;letter-spacing:.02em;font-size:12px}
.field input{border-radius:4px}
.btn{border-radius:4px}
.btn-primary{
  background:linear-gradient(135deg,#ecd4a0,#c49a54);color:#251b10;
  border-color:#d3af70;box-shadow:inset 0 0 0 2px rgba(255,242,205,.2),0 3px 12px rgba(0,0,0,.12);
}
.btn-primary:hover{color:#251b10}
:root[data-theme="light"] .btn-primary{background:linear-gradient(135deg,#a77c3c,#7c531e);color:#fff9eb;border-color:#93692f}
.hero{
  border-radius:7px;padding:15px;background:var(--panel-wash);
  border-color:var(--line);border-top:2px solid var(--gold-deep);box-shadow:var(--shadow);
}
.hero::before,.hero::after{
  content:"";position:absolute;width:18px;height:18px;bottom:5px;pointer-events:none;
  border-bottom:1px solid var(--gold-deep);
}
.hero::before{left:5px;border-left:1px solid var(--gold-deep)}
.hero::after{right:5px;border-right:1px solid var(--gold-deep)}
.portrait{border-radius:4px;border-color:var(--gold-deep);background-color:var(--obsidian-2)}
.portrait:has(.ph){background:radial-gradient(ellipse at 50% 40%,var(--accent-soft),transparent 65%),var(--obsidian-2)}
.portrait .ph .plus{
  width:56px;height:56px;display:grid;place-items:center;border:1px solid var(--gold-deep);
  border-radius:50%;font:300 30px var(--display);margin-bottom:10px;
}
.gear-slot{border-radius:4px}
.gear-thumb{border-radius:3px}
.gear-config-open,.weapon-config-control,.weapon-enchantment{background:var(--inset-bg)}
.dashboard-summary,.dashboard-actions-panel,.dashboard-section,.dashboard-deadline{
  background:var(--panel-wash);border-radius:7px;
}
.dashboard-summary{border-top:2px solid var(--gold-deep)}
.dashboard-progress-cell{background:var(--inset-bg);border-color:var(--line-soft);border-radius:4px}
.dashboard-progress-cell strong{font-family:var(--display);font-weight:500;font-size:30px}
.team-card,.member-roster-card,.boss-card{border-radius:7px;box-shadow:0 6px 24px var(--inset-bg)}
.modal{border-color:var(--gold-deep);box-shadow:var(--shadow)}
#weaponConfigPreview,#gearConfigPreview{background:var(--inset-bg)}

/* Surfaces historiques à couleur fixe : le texte doit rester lisible en clair.
   Les fonds sombres sous les icônes d'objets restent volontaires : certaines
   images du jeu contiennent déjà un fond noir. */
:root[data-theme="light"] .mobile-nav,
:root[data-theme="light"] .mobile-boss-subnav:not([hidden]),
:root[data-theme="light"] .mobile-more-panel:not([hidden]){background:var(--header-bg)}
:root[data-theme="light"] .boss-report-participant,
:root[data-theme="light"] .boss-member,
:root[data-theme="light"] .boss-reco-group{background:var(--inset-bg)}
:root[data-theme="light"] .seal,
:root[data-theme="light"] .auth-mark,
:root[data-theme="light"] .import-captures-depot-icone{background:var(--panel-2)}
/* Ces cinq sélecteurs étaient éclaircis un par un. Ils passent désormais par
   `--vignette-fond`, comme les onze autres : deux mécanismes pour une seule
   chose, c'était la garantie d'en oublier un — et il en manquait bien onze. */
:root[data-theme="light"] .avail-cell[data-tier="1"]{background:#e6dfd1;color:#5c5041}
:root[data-theme="light"] .avail-cell[data-tier="2"]{background:#d5c49d;color:#433725}
:root[data-theme="light"] .avail-cell[aria-pressed="true"],
:root[data-theme="light"] .avail-cell[data-tier="3"]{color:#251b10}
:root[data-theme="light"] .auth-status.err,
:root[data-theme="light"] .live-status[data-state="offline"],
:root[data-theme="light"] .member-roster-error,
:root[data-theme="light"] .boss-reco-error,
:root[data-theme="light"] .boss-reco-warning,
:root[data-theme="light"] .boss-over-capacity,
:root[data-theme="light"] .boss-report-member-state.missing,
:root[data-theme="light"] #bossReportError,
:root[data-theme="light"] #weaponConfigError,
:root[data-theme="light"] #gearConfigError,
:root[data-theme="light"] .analyse-group-error,
:root[data-theme="light"] .avail-save[data-state="error"],
:root[data-theme="light"] .import-captures-depot-message,
:root[data-theme="light"] .import-captures-ligne[data-statut="echec"] .import-captures-etat{color:#a12c2c}
:root[data-theme="light"] .analyse-group-warning,
:root[data-theme="light"] .import-captures-conflit,
:root[data-theme="light"] .import-captures-ligne[data-statut="ambigu"] .import-captures-etat{color:#78501c}
:root[data-theme="light"] .import-captures-ligne[data-statut="unique"] .import-captures-etat{color:var(--ok)}
:root[data-theme="light"] .gear-config-open.is-valid{background:rgba(137,97,39,.07)}
/* Le pied de page reste un socle SOMBRE dans les deux ambiances. Ce n'est pas
   un thème clair oublié : il porte la silhouette de la citadelle, et une
   silhouette n'existe pas sur un fond clair. La page s'ouvre sur le panorama
   en pleine lumière et se ferme sur son contre-jour.
   Le socle change donc de matière, pas de nature : brun chaud en Lumière au
   lieu d'obsidienne, mais sombre dans les deux cas. Les ors du thème clair
   sont des bronzes, trop éteints sur un fond sombre : le pied reprend donc
   les ors du thème Ténèbres pour ses accents. */
/* Les glyphes d'arme et de compétence sont des images du jeu : du BLANC PUR
   sur transparence, sans un seul pixel sombre — mesuré à luminance 255 et
   saturation 0 sur les 12 icônes de maîtrise comme sur les 325 de compétence.
   Sur l'ivoire du thème clair, ils deviennent invisibles. `brightness(0)` les
   passe en noir en gardant exactement leur découpe.

   Le filtre vise le CHEMIN et non une classe : il couvre donc tous les
   endroits où ces images apparaissent, y compris ceux qu'on ajoutera. Les
   icônes de `role-elements/` en sont volontairement exclues — ce sont des
   illustrations en couleur, les noircir les détruirait. */
:root[data-theme="light"] img[src*="7ds-ui/mastery/"],
:root[data-theme="light"] img[src*="7ds-ui/skills/"]{filter:brightness(0)}
/* Un filtre s'applique à TOUT l'élément, son fond et sa bordure compris. Les
   deux cas doivent donc être traités différemment.

   `.wiki-skill-icon` est l'image ELLE-MÊME, et portait son fond sombre : le
   noircir peignait un carré noir plein. Son fond et sa bordure passent donc en
   transparent, et le glyphe noir se pose directement sur la carte claire.

   `.wslot`, lui, est le PARENT de son image : le filtre ne l'atteint pas, et
   son fond sombre écrit en dur s'éclaircit simplement avec le thème. */
:root[data-theme="light"] .wiki-skill-icon{background:transparent;border-color:transparent}
:root[data-theme="light"] .wslot{background:radial-gradient(circle at 50% 32%,#fffaf1,#ebdfcb)}

/* Sur le ciel pâle du couchant, l'or clair du blason s'effacerait : il passe
   au bronze, et son ombre portée devient un halo clair. */
:root[data-theme="light"] .guild-crest{
  color:#6d4d17;filter:drop-shadow(0 1px 5px rgba(255,251,243,.9));
}
:root[data-theme="light"] .guild-crest-champ{fill:rgba(255,250,240,.34)}

:root[data-theme="light"] .site-footer{background:#261c14}
/* Le socle clair est moins dense que l'obsidienne : à opacité égale la
   silhouette y ressort trop et vient bavarder derrière le texte. */
:root[data-theme="light"] .site-footer::before{opacity:.11}
:root[data-theme="light"] .site-footer::after{
  background:linear-gradient(90deg,#a5762c,rgba(214,168,96,.14) 46%,transparent 82%);
}
:root[data-theme="light"] .site-footer-crest{color:#e0b56a}
:root[data-theme="light"] .site-footer-titre{color:#f6efe3}
:root[data-theme="light"] .site-footer-sous,
:root[data-theme="light"] .site-footer-legal{color:#b09c86}
:root[data-theme="light"] .site-footer-liens a,
:root[data-theme="light"] .site-footer-haut{color:#d2c4b2}
:root[data-theme="light"] .site-footer-liens a:hover,
:root[data-theme="light"] .site-footer-haut:hover{color:#efc37e}
:root[data-theme="light"] .site-footer-liens a:hover{border-bottom-color:#8a6428}
:root[data-theme="light"] .site-footer-bas{border-top-color:rgba(224,181,106,.13)}

@media(min-width:561px){
  .topbar{padding-top:12px;padding-bottom:10px;row-gap:10px}
}
@media(max-width:820px){
  /* La marque se resserre pour laisser respirer la colonne des liens. */
  .site-footer-inner{grid-template-columns:minmax(170px,auto) 1fr;gap:30px 40px}
  .guild-banner-inner{padding:80px 28px 30px;min-height:290px}
  .guild-banner-title{font-size:40px}
  .guild-banner-copy{max-width:480px}
}
@media(max-width:560px){
  .brand-title{font-size:23px;letter-spacing:.16em}
  .crest{width:32px;height:32px}
  /* En mobile la tranche visible ne fait que 39 % de la largeur : le chateau
     ET le personnage entier n'y tiennent pas ensemble. On vise donc sa TETE,
     qui occupe 77 a 90 % de l'image. A 88 %, la fenetre va de 54 a 93 % : le
     visage est dans le cadre, un pan de chateau reste derriere le texte, et
     le titre ne lui passe plus dessus. */
  .guild-banner::before{background-position:var(--banner-ancre-petite) center}
  /* Sous 560 px, le bloc de texte prend toute la largeur : la marge
     automatique n'a plus d'espace a prendre et il reste a GAUCHE, dans les
     deux ambiances. Le voile doit donc y revenir aussi. Sans cette regle il
     protegeait la droite pendant que le texte s'appuyait a gauche — lisible
     par hasard, parce que le corps de Meliodas y est sombre, pas par
     construction. */
  .guild-banner-inner{min-height:288px;padding:78px 22px 26px}
  .guild-banner-title{font-size:35px;line-height:1.1}
  .guild-banner-lead{max-width:250px;font-size:12px;margin:12px 0 8px}
  .guild-crest{display:none}
  /* L'en-tête mobile doit rester sous 64 px : le sélecteur n'y tient pas. Il
     passe dans le panneau « Plus », avec le compte, et l'exemplaire de
     l'en-tête s'efface. Un seul est visible à la fois. */
  .topbar .ambiance-switch{display:none}
  .ambiance-switch-mobile{display:flex;align-self:stretch;justify-content:center}
  .ambiance-switch-mobile button{flex:1 1 0}
  /* « Ambiance » ouvre un second groupe : sans marge haute, son libellé doré
     venait au contact de la bordure dorée du sélecteur, et les deux se
     lisaient comme un seul élément accidenté. */
  .mobile-more-title:has(+ .ambiance-switch-mobile){margin-top:20px}
  /* Et la bordure s'aligne sur les cartes du panneau : l'or est réservé à
     l'ambiance choisie, sinon tout crie en même temps. */
  .ambiance-switch-mobile{border-color:var(--line-soft)}
  .guild-banner-link{font-size:12px}
  /* La barre au pouce est fixe, et c'est `main` qui lui réservait sa place.
     Le pied de page est désormais le dernier bloc de la page : la garde lui
     revient, sinon la barre le recouvrirait. `main` ne garde qu'un écart,
     faute de quoi un vide de 90 px s'ouvrait entre le contenu et le pied.
     Les deux cas de responsive.css sont repris : avec et sans sous-menu. */
  main{padding-bottom:22px}
  .site-footer-bas{padding-bottom:calc(90px + env(safe-area-inset-bottom))}
  html.has-mobile-subnav main{padding-bottom:22px}
  html.has-mobile-subnav .site-footer-bas{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
  /* Une seule colonne : les deux blocs s'empilent dans l'ordre de lecture. */
  .site-footer{margin-top:48px}
  .site-footer-inner{grid-template-columns:1fr;gap:26px;padding-top:34px}
  .hero{padding:14px}
  .metabar .field{width:100%}
  .metabar .grow{display:grid;grid-template-columns:1fr 1fr;width:100%;margin-left:0}
  .metabar .grow .btn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .view{animation:none}
  .tab,.btn,.portrait{transition:none}
}