/* /Theme/theme-home.css — LE THEME CLAIR DE LA PAGE D'ACCUEIL  [17/09/2026] /////////////////////////////////////////////////
   Chargee apres home.css. Le sombre reste ecrit dans home.css tel quel ; ce fichier ne pose que ce qui change sous
   [data-theme="light"], plus les deux arriere-plans qui vivent desormais dans /Theme/ (wall-min.webp sombre,
   wall-min-clair.webp clair) — home.css peut oublier son ancien chemin /Img/Backgrounds/Statiques/ quand on y passera.

   Les tuiles du menu (.li) sont des voiles gris translucides sur la photo, texte blanc ombre. En clair : voile blanc,
   texte sombre sans ombre, survol legerement plus dense ; la carte de connexion garde son bleu (--accent).
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/* arriere-plans : les deux fichiers du dossier Theme ; la position et la taille restent celles de home.css */
.classic,
.classic2{ background-image: url("/Theme/wall-min.webp"); }
[data-theme="light"] .classic,
[data-theme="light"] .classic2{ background-image: url("/Theme/wall-min-clair.webp"); }

/* LE PAPIER PEINT FIXE MONTE JUSQU'EN HAUT  [18/09]. Il vit sur #body, dont la boite commence sous la barre : le haut de
   l'ecran restait donc au fond uni de la page, et la barre translucide y paraissait trop claire. On redonne la meme
   image a #wallp — la boite fixe qui couvre tout l'ecran, barre comprise — avec le cadrage de home.css. Les deux images
   etant identiques et calees pareil, le raccord ne se voit pas. Sur telephone #wallp est masque : rien ne change. */
#wallp{
  background-image: url("/Theme/wall-min.webp");
  background-position: 100% 57%;
  background-size: cover;
  background-repeat: repeat;
}
[data-theme="light"] #wallp{ background-image: url("/Theme/wall-min-clair.webp"); }

/* le degrade de fond derriere les videos */
[data-theme="light"] #backgr{ background: linear-gradient(to bottom, #f4f4f5, #e6e6e9); }

/* tuiles du menu */
/* memes couleurs que les boutons de la barre : gris (--bar-hover) au repos, blanc (--bar-btn) sous le pointeur */
[data-theme="light"] .li{
  background-color: rgb(239 239 239 / 53%);
  box-shadow: 0 6px 6px -5px rgb(0 0 0 / 46%);
  text-shadow: none;
}
[data-theme="light"] .li a,
[data-theme="light"] .li a span,
[data-theme="light"] .li .go{ color: #141414; }   /* tres sombre des le repos : sur un papier peint clair et charge, #1a1a1a flottait */
[data-theme="light"] .grid-a:hover{ background-color: rgba(255, 255, 255, .85); box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.12); }
/* le survol ne change plus que le fond : icones et mots sont deja sombres au repos  [17/09] */

/* LES ICONES, TOUTES DE LA MEME ENCRE  [17/09]. invert() seul conserve les nuances de chaque dessin : une icone pleine
   (TikTok, Youtube) devenait un bloc sombre, une icone au trait restait ajouree, et sur un papier peint clair elles
   paraissaient de couleurs differentes. brightness(0) ecrase d'abord TOUTES les nuances a du noir pur, en gardant la
   transparence ; invert(.14) releve ensuite ce noir a ~#242424. Deux icones de densites opposees sortent donc
   exactement de la meme teinte. (Le pochoir mask-image, essaye avant, remplissait le cadre entier : ecarte.) */
[data-theme="light"] .grid-a img{ filter: brightness(0) invert(0.14); }
/* la carte de connexion / deconnexion reste bleue, texte et icone blancs */
[data-theme="light"] #connect,
[data-theme="light"] #connect-li{ background-color: var(--accent); }
[data-theme="light"] #connect span,
[data-theme="light"] #connect .go{ color: var(--accent-ink); }
[data-theme="light"] #connect img{ filter: none; }

/* filets et etoiles entre les groupes */
[data-theme="light"] .home-hr{ border-bottom-color: rgba(0, 0, 0, 0.18); box-shadow: 0 4px 4px -4px rgba(0, 0, 0, 0.25); }
[data-theme="light"] .star-top1,
[data-theme="light"] .star-top2{ color: rgba(0, 0, 0, 0.55); }

/* le petit cadre du logo en haut a droite (telephone) */
[data-theme="light"] #homlog-div{ background-color: var(--veil); }

/* telephone portrait : home.css eclaircit les tuiles a #7a7a7a6e et redit l'image de fond ; meme traitement en clair */
@media (max-width: 600px) and (orientation: portrait)
{
  [data-theme="light"] .li{ background-color: rgb(239 239 239 / 53%); }
  [data-theme="light"] .grid-a:hover{ background-color: transparent; box-shadow: none; }
}

/* BANDE D'ICONES DU TELEPHONE  [17/09] : memes voiles et memes icones que les tuiles */
[data-theme="light"] #bande-liens .li{ background-color: rgb(239 239 239 / 53%); box-shadow: 0 4px 6px -5px rgba(0, 0, 0, 0.20); }
[data-theme="light"] #bande-liens .grid-a img{ filter: brightness(0) invert(0.14); }