/

• /

/

• /

:root{

• -bg-main:#06333b;
• -bg-deep:#041f24;

• -text:#ffffff;
• -text-soft:rgba(230,244,246,.85);

• -accent:#ffd84d;

• -border:rgba(255,255,255,.16);
• -glass1:rgba(255,255,255,.08);
• -glass2:rgba(255,255,255,.05);

• -shadow:0 18px 46px rgba(0,0,0,.28);
• -shadow-soft:0 12px 26px rgba(0,0,0,.18);

• -radius:18px;
• -pill:999px;

• -focus:0 0 0 3px rgba(255,216,77,.35);

• -menu-hover-bg: rgba(255,216,77,.14);

}

/

• /

html,body{

• margin:0;
• min-height:100%;
• background:var(--bg-main) !important;
• color:var(--text) !important;

}

#yw-container,
#yw-header,#yw-main,#yw-footer,
.yw-header,.yw-main,.yw-footer,
.yw-main-content,
header,main,footer{

• background:var(--bg-main) !important;
• color:inherit;
• border:none !important;
• box-shadow:none !important;

}

/ Header / topbar / navbar /
#yw-header,
.yw-header,
header,
.yw-topbar,
.topbar,
.navbar,
#yw-header .navbar,
#yw-header .topbar,
#yw-header .yw-topbar{

• background:var(--bg-main) !important;
• background-color:var(--bg-main) !important;
• border:none !important;
• box-shadow:none !important;

}

/ Header : éviter les fonds hérités (ciblé) /
#yw-header a,
#yw-header .navbar a,
#yw-header ul.menu a{

• background: transparent !important;

}

/ Liens globaux (sans !important) /
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/ Conteneurs bootstrap-like /
.container,.wrapper,.content,.panel,.card,.well,.alert{

• background:transparent !important;

}

/

• /

#yw-header nav,
#yw-header ul,
#yw-header ul.menu,
#yw-header .navbar-nav,
#yw-header .nav{

• opacity: 1 !important;
• filter: none !important;

}

/ Liens du menu : jaune + no opacity /
#yw-header ul.menu a,
#yw-header .navbar-nav a,
#yw-header nav a{

• color: var(--accent) !important;
• webkit-text-fill-color: var(--accent) !important;
• opacity: 1 !important;
• filter: none !important;
• text-decoration: none !important;
• font-weight: 800 !important;

}

/ Si le thème colore un span interne /
#yw-header ul.menu a , #yw-header .navbar-nav a {

• color: var(--accent) !important;
• webkit-text-fill-color: var(--accent) !important;
• opacity: 1 !important;
• filter: none !important;

}

/ Hover / focus (menu) /
#yw-header ul.menu a:hover,
#yw-header .navbar-nav a:hover,
#yw-header ul.menu a:focus-visible,
#yw-header .navbar-nav a:focus-visible{

• background: var(--menu-hover-bg) !important;
• border-radius: .75rem !important;
• text-decoration: none !important;
• box-shadow: var(--focus) !important;
• outline: none !important;

}

/ Actif (YesWiki met souvent active sur li) /
#yw-header ul.menu li.active > a,
#yw-header .navbar-nav li.active > a,
#yw-header .navbar-nav a.active,
#yw-header ul.menu a.active{

• border-bottom: 3px solid var(--accent) !important;
• font-weight: 1000 !important;

}

/ Focus global (clavier) /
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{

• outline:none !important;
• box-shadow: var(--focus) !important;
• border-radius: .75rem;

}

/

• /

.s2s-wrap{ text-align:center; }

/

• /

.s2s-glitch{

• display:block;
• max-width:1150px;
• margin:0 auto;
• padding:2.2rem 1.2rem 3rem;
• position:relative;

}
.s2s-glitch::before{

• content:; position:fixed; inset:0; pointer-events:none; background: repeating-linear-gradient( to bottom, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px ); opacity:.10; mix-blend-mode:overlay; z-index:0; clip-path: inset(80px 0 0 0); /* hauteur header (ajuste 70–110px si besoin) */ } .s2s-glitch::after{ content:;
• position:fixed;
• inset:0;
• pointer-events:none;
• background:
  • radial-gradient(800px 420px at 50% 20%, rgba(255,216,77,.09), transparent 70%),
  • radial-gradient(900px 520px at 30% 65%, rgba(15,111,125,.12), transparent 70%),
  • radial-gradient(900px 520px at 70% 70%, rgba(15,111,125,.10), transparent 70%);
• opacity:.9;
• z-index:0;
• clip-path: inset(80px 0 0 0); / hauteur header /

}

/ Tout le contenu au-dessus de l’overlay /
.s2s-glitch > { position:relative; z-index:1; } / Renforcer le header au-dessus de tout

• Responsive : header plus haut sur mobile

• =
  • Titre glitch

=

• =
  • HUD + boutons

=

• Compteur trouvé (affichage "X/total")
• Live region invisible mais accessible

• =
  • Grid + cards

=

• Flip cards
• Faces
• Liens du verso
• Focus carte
• Drag
• Verso sélectionnable, liens non
• (par défaut on évite la sélection sur le reste) / .flip-card {
• webkit-user-select:none !important;
• moz-user-select:none !important;
• user-select:none !important;

}

/

• /

.dropdown-menu,
.navbar .dropdown-menu,
.yw-topbar .dropdown-menu,
.topbar .dropdown-menu,
header .dropdown-menu,
#yw-header .dropdown-menu{

• background: var(--bg-main) !important;
• background-color: var(--bg-main) !important;
• border: 1px solid rgba(255,255,255,.18) !important;
• box-shadow: 0 18px 46px rgba(0,0,0,.35) !important;

}
.dropdown-menu a,
.dropdown-menu .dropdown-item,
.dropdown-menu li a,
.navbar .dropdown-menu a{

• color: var(--accent) !important;
• font-weight: 900 !important;
• background: transparent !important;

}
.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{

• background: rgba(255,216,77,.12) !important;
• color: var(--accent) !important;

}
.dropdown-menu .divider,
.dropdown-menu .dropdown-divider{

• background: rgba(255,255,255,.12) !important;
• border: 0 !important;

}
.dropdown-menu i,
.dropdown-menu svg{

• color: var(--accent) !important;
• fill: var(--accent) !important;

}

/

• /

.s2s-footer{

• margin-top:1.8rem;
• text-align:center;
• font-size:1.1rem;
• font-weight:900;
• color:var(--text);

}
.s2s-footer .sep{ margin:0 .55rem; color:var(--text-soft); }

/

• /

@media(prefers-reduced-motion:reduce){

• .flip-card{animation:none;opacity:1;transform:none}
• .flip-card-inner{transition:none}
• .flip-card:hover .flip-card-inner{transform:none;filter:none}
• .s2s-title[data-text]::before,
• .s2s-title[data-text]::after{animation:none}

}

/

• /

#yw-main hr,
.yw-main hr,
.yw-main-content hr,
#yw-header hr,
.yw-header hr,
.yw-topbar hr,
.topbar hr,
header hr{

• display:none !important;
• border:0 !important;
• height:0 !important;
• margin:0 !important;
• padding:0 !important;

}

/ Certains thèmes utilisent des classes de séparateur /
#yw-main .yw-separator,
#yw-main .separator,
#yw-main .divider,
.yw-main .yw-separator,
.yw-main .separator,
.yw-main .divider,
.yw-main-content .yw-separator,
.yw-main-content .separator,
.yw-main-content .divider{

• display:none !important;

}

/

• /

/ Le menu texte YesWiki /
#yw-header .yw-menu,
#yw-header .menuhaut,
#yw-header nav{

• display:flex !important;
• justify-content:center !important;

}

/ Ligne contenant "Accueil - Agenda - ..." /
#yw-header .yw-menu p,
#yw-header .menuhaut p,
#yw-header nav p{

• display:flex !important;
• flex-wrap:wrap !important;
• gap:.9rem !important;
• margin:0 !important;
• padding:.4rem 0 !important;

}

/ Liens du menu /
#yw-header .yw-menu a,
#yw-header .menuhaut a,
#yw-header nav a{

• padding:.35rem .75rem !important;
• border-radius:.75rem !important;
• font-weight:900 !important;

}

/ Supprimer les tirets entre liens /
#yw-header .yw-menu p::before,
#yw-header .menuhaut p::before{

• content:none !important;

}

/ Masquer les séparateurs texte "-" /
#yw-header .yw-menu p{

• word-spacing:0 !important;

}
#yw-header .yw-menu p::after{

• content:"" !important;

}

/

• /

@-moz-document url-prefix() {

• / Cible le cas où le menu est un paragraphe (mode texte) /
• #yw-header nav p,
• #yw-header .yw-topbar nav p,
• #yw-header .topbar nav p,
• #yw-header .navbar nav p{
  • display:flex !important;
  • flex-wrap:wrap !important;
  • justify-content:center !important;
  • align-items:center !important;
  • gap:.9rem !important;

• margin:0 !important;
• padding:.45rem .6rem !important;
• }

• / Liens du menu dans ce paragraphe /
• #yw-header nav p a,
• #yw-header .yw-topbar nav p a,
• #yw-header .topbar nav p a,
• #yw-header .navbar nav p a{
  • display:inline-flex !important;
  • padding:.35rem .75rem !important;
  • border-radius:.75rem !important;
  • font-weight:900 !important;
  • text-decoration:none !important;
• }

• /
  • /
• #yw-header nav:has(ul.menu) p{
  • display:none !important;
• }

}

/

• /

@-moz-document url-prefix() {

• / 1) Stopper toute opacité/filtre sur les conteneurs du menu /
• #yw-header nav,
• #yw-header .navbar,
• #yw-header .navbar-nav,
• #yw-header .nav,
• #yw-header ul,
• #yw-header ul.menu,
• #yw-header ul.menu > li{
  • opacity: 1 !important;
  • filter: none !important;
• }

• / 2) Forcer la couleur JAUNE sur les liens (toutes variantes) /
• #yw-header a,
• #yw-header nav a,
• #yw-header ul.menu a,
• #yw-header .navbar-nav > li > a,
• #yw-header .navbar-nav a,
• #yw-header .nav > li > a{
  • color: var(--accent) !important;
  • opacity: 1 !important;
  • filter: none !important;
  • text-decoration: none !important;
• }

• / 3) Si le thème met la couleur sur un span interne /
• #yw-header a
• ,
• #yw-header ul.menu a
• {
  • color: var(--accent) !important;
  • opacity: 1 !important;
  • filter: none !important;
• }

• / 4) Hover / focus /
• #yw-header a:hover,
• #yw-header a:focus-visible{
  • background: var(--menu-hover-bg) !important;
  • border-radius: .75rem !important;
  • box-shadow: var(--focus) !important;
  • outline: none !important;
• }

• / 5) Icônes (svg / i) en jaune aussi /
• #yw-header svg,
• #yw-header i,
• #yw-header button,
• #yw-header [role="button"]{
  • color: var(--accent) !important;
  • fill: var(--accent) !important;
  • opacity: 1 !important;
  • filter: none !important;
• }

}

/

• /

@-moz-document url-prefix() {

• / Lien menu (toutes structures connues YesWiki/Bootstrap) /
• #yw-header ul.menu > li > a,
• #yw-header ul.menu > li > a:link,
• #yw-header ul.menu > li > a:visited,
• #yw-header .navbar-nav > li > a,
• #yw-header .navbar-nav .nav-link,
• #yw-header .nav > li > a,
• #yw-header nav a{
  • color: #ffd84d !important;
  • webkit-text-fill-color: #ffd84d !important;
  • text-shadow: none !important;
  • opacity: 1 !important;
  • filter: none !important;
• }

• / Si un span interne porte la couleur /
• #yw-header ul.menu > li > a
• ,
• #yw-header .nav > li > a
  • Parent qui “impose” une couleur grise via inherit
• Hover/focus */
• #yw-header ul.menu > li > a:hover,
• #yw-header .navbar-nav .nav-link:hover,
• #yw-header .nav > li > a:hover,
• #yw-header ul.menu > li > a:focus-visible,
• #yw-header .navbar-nav .nav-link:focus-visible,
• #yw-header .nav > li > a:focus-visible{
  • background: rgba(255,216,77,.14) !important;
  • border-radius: .75rem !important;
  • box-shadow: 0 0 0 3px rgba(255,216,77,.35) !important;
  • outline: none !important;
• }

}

---