/* /Theme/theme.css — THEME SOMBRE / CLAIR  [17/09/2026] ////////////////////////////////////////////////////////////////////////////////////////
   Le dossier /Theme/ regroupe tout ce qui tient au theme : theme.js (mecanisme et bouton), theme.css (variables, bouton,
   clair de la barre), puis un fichier par feuille passee en variables (theme-home.css, theme-admin.css...).
   Meme construction que theme.css de Polyglot Songs : les couleurs du site vivent dans des variables posees sur :root,
   redefinies sous [data-theme="light"]. Le sombre EST l'ecran actuel : ses valeurs sont recopiees des feuilles telles
   qu'elles sont (header.css : #292929, rgb(59,59,59), .log #3f3f3f / #6b6b6b), rien ne change tant que le bouton n'est
   pas presse.

   PERIMETRE — phase 1, 17/09 : le bouton, le mecanisme, et le clair sur ce que voit le public : la barre du haut
   (header.css) et le fond des pages. Les autres feuilles (home, modales d'authentification, administration, activite,
   comptabilite, messagerie) ecrivent encore leurs couleurs en dur et passent en variables feuille par feuille ; jusque-la
   elles restent sombres sous le theme clair, ce qui se voit et se corrige chantier apres chantier.
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

:root{
  color-scheme: dark;

  /* fonds */
  --bg:         #181818;          /* fond general des pages */
  --hd-bg:      #292929;          /* barre du haut (header.css) */
  --hd-line:    rgb(59, 59, 59);  /* filet sous la barre */
  --hd-shadow:  #000000c2;        /* ombre sous la barre */
  --hd-soft:    #303030;

  /* boutons de la barre (.log) */
  --bar-btn:    #3f3f3f;
  --bar-hover:  #6b6b6b;
  --bar-line:   transparent;

  /* textes */
  --text:       #ffffff;
  --text-dim:   #8a8a8a;
  --hd-text:    #ffffff;
  --hd-text-dim:#e6e6e6;

  /* accents */
  --accent:     #1f74b5;
  --accent-2:   #5ea3d6;
  --accent-ink: #ffffff;

  /* menu des langues (header.css) */
  --lang-menu-bg:    #292929;
  --lang-opt-hover:  #ffffff14;
  --lang-badge-hover:#ffffff1a;
}

[data-theme="light"]{
  color-scheme: light;

  --bg:         #f4f4f5;
  --hd-bg:      rgb(120 120 120 / 20%);     /* VERRE TEINTE  [18/09] : voile discret, la barre prend la couleur de ce qui passe dessous, video de papier peint comprise */
  --hd-line:    #6f6f6f;
  --hd-shadow:  rgba(0, 0, 0, .18);
  --hd-soft:    #f2f2f4;

  --bar-btn:    rgba(255, 255, 255, .92);    /* boutons : voile blanc au survol */
  --bar-hover:  rgb(255 255 255 / 55%);      /* au repos : blanc translucide, comme les tuiles vues au travers du verre  [18/09] */
  --bar-line:   rgba(0, 0, 0, .10);
  --veil:       rgba(255, 255, 255, .60);    /* le voile blanc commun aux tuiles et au pied de page */

  --text:       #1a1a1a;
  --text-dim:   #6a6a6a;
  --hd-text:    #ffffff;          /* sur #838383 le texte reste blanc */
  --hd-text-dim:#f0f0f0;

  --accent:     #1f74b5;
  --accent-2:   #175b90;
  --accent-ink: #ffffff;

  --lang-menu-bg:    #ffffff;
  --lang-opt-hover:  rgba(0, 0, 0, .06);
  --lang-badge-hover:rgba(0, 0, 0, .06);
}

/* LE BOUTON — recopie de .theme-toggle de Polyglot Songs : 38 x 38, coins 8, fond du bouton de barre, filet de la barre.
   Il se place en dernier a droite de #container-on (ordinateur) et de #link-home3 (telephone). */
.theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-left: 8px; padding: 0; flex: none;
  background: var(--bar-btn); color: var(--hd-text);
  border: 1px solid var(--hd-line); border-radius: 8px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .1s ease, border-color .1s ease;
}
.theme-toggle svg{ display: block; }
@media (hover: hover){ .theme-toggle:hover{ background: var(--bar-hover); border-color: var(--accent-2); } }   /* pas de survol sur ecran tactile : l'etat restait colle apres le toucher  [18/09] */
.theme-toggle{ -webkit-tap-highlight-color: transparent; }   /* pas de voile bleu au toucher  [19/09] */
.theme-toggle:focus{ outline: none; }
@media (hover: hover){ .theme-toggle:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 1px; } }   /* anneau de focus au clavier, ecran non tactile seulement  [19/09] */
[data-theme="light"] .theme-toggle{
  color: #1a1a1a; background: var(--bar-hover);
  box-shadow: rgba(0,0,0,.06) 0 .0625em .0625em,
              rgba(0,0,0,.06) 0 .125em .35em,
              rgba(0,0,0,.03) 0 0 0 2px inset;
}
@media (hover: hover){ [data-theme="light"] .theme-toggle:hover{ background: var(--bar-btn); } }
/* les boutons de la barre (.log) et le bouton du theme ont la meme hauteur : 38 px, comme .theme-toggle de Polyglot Songs.
   .log tirait la sienne de son remplissage (10 px + une ligne), soit un cran de moins ; on la fixe, dans les deux themes. */
#container-on .log{ height: 38px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.theme-toggle{ margin-top: 1px; }   /* .log a 1 px de marge haute : meme ligne de base */
/* ESPACEMENT  [17/09] : Boutique gardait sa marge droite de 8 px (header.css) et le bouton du theme sa marge gauche de 8 px,
   plus l'espace blanc entre elements : un ecart double. Une seule regle : chaque .log a 8 px a sa droite, le bouton du
   theme aucune marge a sa gauche. */
#container-on .log{ margin-right: 8px; }
#container-on .theme-toggle{ margin-left: 0; }

/* TELEPHONE  [18/09] : le bouton du theme est aussi dans la rangee #link-home3 (header.php, .theme-toggle-ph). Il prend le
   gabarit des boutons de cette rangee (40 x 36, header.css) et reste cache au-dessus de 1000 px, ou #link-home3 est vide. */
#link-home3 .theme-toggle{ display: none; }
@media (max-width: 1000px){
    #link-home3 .theme-toggle{ display: flex; align-items: center; justify-content: center; width: 40px; height: 36px; margin: 0; flex: none; box-sizing: border-box; }
}

/* LE CLAIR SUR LA BARRE DU HAUT ET LE FOND DES PAGES. Ces regles n'existent QUE sous [data-theme="light"] : le sombre
   reste ecrit dans header.css, ligne pour ligne, et n'en depend pas. Quand header.css passera en variables, ce bloc
   se videra de lui-meme. */
[data-theme="light"] body{ background-color: var(--bg); color: var(--text); }

[data-theme="light"] header,
[data-theme="light"] nav#header{
  background: var(--hd-bg); color: var(--hd-text);
  /* PAS DE backdrop-filter  [18/09]. Il remplace ce qui est derriere par une copie filtree du fond, et cette copie
     n'inclut pas les videos de papier peint, composees a part par le navigateur : la barre restait alors grise sur le
     beton de .classic pendant que la video bleue defilait dessous. Sans lui, le voile laisse passer ce qui est
     reellement derriere, video comprise. */
  /* Aucun liseré clair : sur un papier peint sombre il tirait une ligne blanche en travers de l'image. Une ombre courte
     et tres douce suffit a poser la barre, et disparait sur un fond clair. */
  box-shadow: 0 1px 4px rgb(0 0 0 / 13%);
  border-bottom: none;
}
/* LA MARQUE, ENTRE MAIGRE ET GRAS  [17/09]. Cambria est une police du systeme : elle n'existe qu'en 400 et en 700, et
   le navigateur ramene tout poids intermediaire a l'un des deux — 500 rend donc le maigre, 600 le gras. Pour obtenir
   l'entre-deux, on garde le 400 et on epaissit le trait lui-meme : text-stroke ajoute un contour de la couleur du
   texte, en fractions de pixel. C'est la valeur a regler (0.2 a peine appuye, 0.5 proche du gras). */
[data-theme="light"] #m3dd{
  color: #000000;
  -webkit-text-stroke: 0.38px currentColor;
  paint-order: stroke fill;   /* le contour passe sous le remplissage : les contre-formes ne se bouchent pas */
}

/* la maison du survol est calee 1 px trop bas. Elle est centree en absolu (header.css : top 50%, left 50%,
   translate(-50%, -50%)) : on ne touche ni a sa position ni a son centrage, on ajoute juste 1 px au deplacement. */
[data-theme="light"] #link-home2 #home-hover{ transform: translate(-50%, calc(-50% - 1px)); }

/* le logo et la maison du survol sont des dessins blancs a trait fin : en clair on affiche un SECOND FICHIER, dessine plus
   epais, deja noir — /Theme/logo-m3dd-clair.png et /Theme/home-clair.png (a produire, memes dimensions que les originaux).
   Le <img> garde son src dans header.php : la propriete content remplace l image affichee sous le theme clair. */
[data-theme="light"] #logo-wrap img#home{ content: url("/Theme/logo-m3dd-clair.png"); }
[data-theme="light"] #logo-wrap img#home-hover{ content: url("/Theme/home-clair.png"); }

/* en clair, base et survol s'echangent : le bouton est gris au repos et blanc sous le pointeur */
[data-theme="light"] .log{
  background-color: var(--bar-hover); color: #1a1a1a; border: 1px solid var(--bar-line);
  box-shadow: rgba(0,0,0,.06) 0 .0625em .0625em, rgba(0,0,0,.06) 0 .125em .35em;
}
[data-theme="light"] .log:hover{ background-color: var(--bar-btn); }
/* les icones des .log sont des SVG remplis en #fff dans header.php ($ico) : sur un bouton blanc elles disparaissent */
[data-theme="light"] .log .log-ico{ fill: #1a1a1a; }

/* SELECTEUR DE LANGUE  [18/09] — variante « encre ». Le resserrement du menu et les arrondis sont passes dans header.css :
   ils valent pour les DEUX themes. Ne restent ici que les couleurs du clair ; le cerne des drapeaux y prend l'encre du
   texte a 28 %, la ou le sombre prend le blanc a 18 %. */
[data-theme="light"] #lang-badge:hover{ background-color: var(--lang-badge-hover); }
[data-theme="light"] #lang-menu{
  background-color: var(--lang-menu-bg); border-color: rgba(0, 0, 0, 0.12);
  box-shadow: rgba(0,0,0,.20) 0 5px 14px;
}
[data-theme="light"] .lang-opt{ color: #3a3a3a; }
[data-theme="light"] .lang-opt:hover{ background-color: var(--lang-opt-hover); color: #1a1a1a; }
[data-theme="light"] .lang-opt.lang-opt-on{ color: var(--accent); background-color: rgba(31, 116, 181, 0.10); }
/* le cerne des drapeaux : l'encre du texte, a 28 % */
[data-theme="light"] .lang-opt-flag{ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28); }
[data-theme="light"] #lang-badge .lang-opt-flag{ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28); }

/* boutons de la barre telephone (#btn-*) : voiles blancs en dur dans header.css, icones SVG en #fff et un PNG blanc */
[data-theme="light"] #link-home3 > a > div{ background-color: rgba(0, 0, 0, .10); border-color: rgba(0, 0, 0, .30); }
[data-theme="light"] #link-home3 > a > div:hover{ background-color: rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .18); }
[data-theme="light"] .svg-icon{ color: var(--hd-text); }   /* barre telephone, icones blanches sur #838383 */


/* LE PIED DE PAGE (footer.css) : memes couleurs que la barre du haut */
[data-theme="light"] .grid-footer,
[data-theme="light"] .grid-footer-mentions{ background: var(--veil); color: #1a1a1a; }   /* pas de flou ici non plus : meme raison que la barre du haut */
[data-theme="light"] .grid-footer{ border-top: solid 1px rgba(0, 0, 0, .08); }
/* les liens gardent leur couleur au survol, seule une ligne de soulignement apparait */
[data-theme="light"] .titre-mentions:hover{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] .footer-hr{ border-color: var(--hd-line); }