/* 97-themes.css — deux réglages du studio, publiés pour tous les visiteurs (T20, 01/11/2026). Anthony : « dans le mode
   studio la possibilité de passer le site en mode light ou en mode dark » ; « un bouton indépendant pour pouvoir
   switcher les box en light ou en dark, indépendamment du mode de lumière choisi » ; « pour les box en mode dark, je veux
   le même coloris que la V2 ».

   Le studio écrit les réglages dans le HTML de chaque page, sur <html> : data-theme="sombre" (site sombre) et
   data-encadres="sombres" (encadrés sombres). Aucun script chez le visiteur, aucun éclair de la mauvaise couleur, CSP
   'self'. Sans attribut (valeurs par défaut : site clair, encadrés clairs), AUCUNE règle de cette feuille ne s'applique :
   la page rendue est identique à celle d'avant (preuve E/t20/a1/).

   Hors couche « ancien » (fichier 9x) : ces règles priment sur l'ancien CSS ; face aux autres feuilles 9x, elles ont la
   même spécificité que les règles qu'elles remplacent (html[…] = html:root) et passent après elles. */

/* ===================================================================================================================
   1. Site sombre — la « version sombre » proposée le 18/10 (thème sombre fini, choix d'Anthony), retirée de la V6 par
   la T16 (cca5dd1^:src/css/80-apercu-theme.css), adaptée à la V6 : trois nuances de bleu nuit qui gardent l'alternance
   des bandeaux (sombres #041426, clairs #0C2347, blancs #081D3D), barre de menu et pied presque noirs (#030C18), textes
   clairs, photos des sections claires assombries, pages légales sombres.
   =================================================================================================================== */
html[data-theme="sombre"] :is(.section--clair, .section--blanc, .section--legal) {
  --fond-clair: #0c2347;
  --fond-blanc: #081d3d;
  --titre-sur-clair: #ffffff;
  --texte-sur-clair: #e7ebf5;
  --texte-discret-sur-clair: #b7c4d8;
  --surtitre-sur-clair: #e7ebf5;
  --sous-titre-sur-clair: #00c8ff;
  --degrade-accent-clair: linear-gradient(90deg, #00c8ff 0%, #7776ff 50%, #c34bee 100%);
  --b-couleur-legende-sur-clair: var(--b-couleur-legende-sur-sombre);
  --b-couleur-carte-sur-clair: var(--b-couleur-carte-sur-sombre);
}

html[data-theme="sombre"] .section--clair {
  --fond-section: #0c2347;
  background-color: #0c2347;
}

html[data-theme="sombre"] .section--blanc {
  --fond-section: #081d3d;
  background-color: #081d3d;
}

html[data-theme="sombre"] .section--legal {
  --fond-section: #041426;
  background-color: #041426;
}

/* Texture claire des sections claires : presque effacée sur le bleu nuit. */
html[data-theme="sombre"] .section--clair::before {
  opacity: 0.04;
}

/* Photos de fond des sections claires (montagnes dans la brume) : assombries pour que le texte clair se lise. */
html[data-theme="sombre"] :is(.section--clair, .section--blanc) > .section__fond {
  filter: brightness(0.4) saturate(1.15);
}

/* Titres bleus sur clair : blancs sur le bleu nuit (« IA NOVATION ? » de l'Accueil à 3,1:1 en bleu, audit du 18/10). */
html[data-theme="sombre"] :is(.titre--bleu, .section .titre--bleu) {
  color: #ffffff;
}

html[data-theme="sombre"] .titre__suite--bleu {
  color: #5b9bff;
}

/* Nos solutions, surtitre « IA générative » : gris bleu foncé posé pour le fond lavande → texte clair. */
html[data-theme="sombre"] body[data-page="nos-solutions"] [data-section="generative"] .surtitre {
  color: #e7ebf5;
}

/* À propos : filets entre les piliers de la mission, adoucis sur le bleu nuit. */
html[data-theme="sombre"] body[data-page="a-propos"] .mission__point + .mission__point::before {
  background-color: rgba(255, 255, 255, 0.16);
}

/* Tuiles des logos clients : les fichiers sont sur fond blanc, les tuiles restent blanches (règle du 18/10). La teinte
   « moins éblouissante » #E4E8F2 de la fin du 18/10 n'est pas reprise : sur la V6, chaque logo y laissait un rectangle
   blanc dans sa tuile grise (relevé T20, mesures/regard/sc-1440-logos.jpg). */
html[data-theme="sombre"] .logo-client {
  background-color: #ffffff;
}

/* Barre de menu presque noire mais bleutée (« toute noire en version sombre », demande d'Anthony du 18/10), sans la
   couture avec le bleu nuit de la page ; la bande sous la barre (fond du body) suit. */
html[data-theme="sombre"] :is(.entete, .entete--defile) {
  border-bottom: 1px solid rgba(119, 118, 255, 0.18);
  background-color: #030c18;
  box-shadow: none;
}

html[data-theme="sombre"] .entete::before {
  background-image: linear-gradient(90deg, rgba(3, 12, 24, 0.9), rgba(3, 12, 24, 0.8) 50%, rgba(3, 12, 24, 0.9)), url("/assets/img/clair-texture-1920.webp");
}

html[data-theme="sombre"] body {
  background-image: linear-gradient(#030c18, #030c18);
}

/* Logo posé sur le noir (barre, pied, titre « Pourquoi choisir » de l'Accueil) : éclairci, comme le pied de page sombre
   d'avant le 21/10. */
html[data-theme="sombre"] :is(.entete__logo img, .pied__logo img, .titre__logo) {
  filter: brightness(1.7) saturate(1.1);
}

html[data-theme="sombre"] .entete__lien {
  color: #c9d3e3;
}

html[data-theme="sombre"] :is(.entete__lien:hover, .entete__lien[aria-current="page"], .entete__menu) {
  color: #ffffff;
}

@media (max-width: 1199px) {
  html[data-theme="sombre"] :is(.entete__panneau, .entete--ouvert) {
    background-color: #030c18;
  }
}

/* Pied de page sombre (même noir bleuté que la barre). */
html[data-theme="sombre"] .pied {
  --fond-section: #030c18;
  --titre-sur-clair: #ffffff;
  --texte-sur-clair: #c9d3e3;
  background-color: #030c18;
}

html[data-theme="sombre"] .pied__colonne + .pied__colonne {
  border-left-color: rgba(255, 255, 255, 0.1);
}

html[data-theme="sombre"] .pied__barre {
  border-top-color: rgba(255, 255, 255, 0.1);
}

/* Agenda de Contact, en site sombre et encadrés clairs : la carte reste claire (voir § 3). */

/* ===================================================================================================================
   2. Encadrés clairs dans un site sombre : les encadrés clairs gardent leurs couleurs claires (titres et textes
   sombres), y compris ceux qui lisent les variables « sur clair » de leur section devenue sombre. Les encadrés
   translucides de Contact deviennent opaques : leur blanc à 60 % sur le bleu nuit donnerait un gris bleu terne.
   =================================================================================================================== */
html[data-theme="sombre"]:not([data-encadres="sombres"]) :is(.carte--engagement, .carte--solution, .carte--agent,
  .carte--generative, .chiffre-bloc, .contact__carte, .rdv__agenda) {
  --titre-sur-clair: #0b1450;
  --texte-sur-clair: #3a4466;
  --texte-discret-sur-clair: #5b6683;
  --surtitre-sur-clair: #3b3f8c;
  --sous-titre-sur-clair: #075bff;
  --degrade-accent-clair: linear-gradient(90deg, #0a6cff 0%, #6a4bff 50%, #b03ce0 100%);
  --b-couleur-legende-sur-clair: #36435f;
  --b-couleur-carte-sur-clair: #3d4a63;
}

html[data-theme="sombre"]:not([data-encadres="sombres"]) body[data-page="contact"] .contact__carte--formulaire {
  background-color: #f9fdff;
}

html[data-theme="sombre"]:not([data-encadres="sombres"]) body[data-page="contact"] .contact__carte--coordonnees {
  background-color: #edf8ff;
}

html[data-theme="sombre"]:not([data-encadres="sombres"]) body[data-page="contact"] .coordonnee {
  background-color: #f6fbff;
}

/* ===================================================================================================================
   3. Encadrés sombres — le coloris de la V2 servie (archive du VPS, 22/10, relevé E/t20/mesures/), quel que soit le
   thème du site :
   - blocs à picto (solutions, engagements, agents, création générative, chiffres) : fond uni #071331 et liseré en
     dégradé qui tourne, titres en dégradé clair, textes #E2E9F4 — exactement les blocs sombres de la V2 (solutions de
     l'Accueil, valeurs, outils), déjà ceux de la V6 pour les valeurs et les outils ;
   - Contact : cartes rgba(7, 27, 60, 0.72) cerclées rgba(119, 118, 255, 0.4) ; coordonnées rgba(4, 20, 38, 0.6)
     cerclées rgba(119, 118, 255, 0.35) ; agenda #0A2140 cerclé rgba(0, 200, 255, 0.22). Posées opaques, à la teinte
     rendue en V2 (sur sa section #0C2347) : #081D3F, #061830 ;
   - Formations et conférences : cerclées rgba(119, 118, 255, 0.4) avec une lueur, comme en V2 sombre ;
   - membres de l'équipe et exemples de Nos solutions : déjà sombres, identiques en V2 et en V6.
   =================================================================================================================== */
html[data-encadres="sombres"] :is(.section--clair, .section--blanc) :is(.carte--engagement, .carte--solution, .carte--agent,
  .carte--generative, .benefice, .chiffre-bloc) {
  --b-fond-bloc: #071331;
  --fond-section: #071331;
  color: #e2e9f4;
}

html[data-encadres="sombres"] :is(.section--clair, .section--blanc) :is(.carte--engagement, .carte--solution, .carte--agent,
  .carte--generative, .benefice, .chiffre-bloc) :is(p, .texte-carte, .leger, li) {
  color: #e2e9f4;
}

html[data-encadres="sombres"] :is(.section--clair, .section--blanc) :is(.carte--engagement, .carte--solution, .carte--agent,
  .carte--generative, .benefice, .chiffre-bloc) .sous-titre-carte {
  color: #00c8ff;
}

html[data-encadres="sombres"] :is(.section--clair, .section--blanc) :is(.carte--engagement, .carte--solution, .carte--agent,
  .carte--generative, .benefice, .chiffre-bloc) :is(h3, h4, .h4) {
  background-image: var(--degrade-accent);
}

html[data-encadres="sombres"] :is(.section--clair, .section--blanc) .carte--solution > .fleche {
  --fond-section: #071331;
  color: #ffffff;
}

/* Contact. */
html[data-encadres="sombres"] body[data-page="contact"] :is(.contact__carte, .contact__carte--coordonnees) {
  --titre-sur-clair: #ffffff;
  --texte-sur-clair: #e7ebf5;
  --texte-discret-sur-clair: #b7c4d8;
  --surtitre-sur-clair: #e7ebf5;
  --sous-titre-sur-clair: #00c8ff;
  --degrade-accent-clair: linear-gradient(90deg, #00c8ff 0%, #7776ff 50%, #c34bee 100%);
  --b-couleur-legende-sur-clair: var(--b-couleur-legende-sur-sombre);
  --b-couleur-carte-sur-clair: var(--b-couleur-carte-sur-sombre);
  --fond-section: #081d3f;
  border-color: rgba(119, 118, 255, 0.4);
  background-color: #081d3f;
}

html[data-encadres="sombres"] body[data-page="contact"] .coordonnee {
  border-color: rgba(119, 118, 255, 0.35);
  background-color: #061830;
  box-shadow: none;
}

html[data-encadres="sombres"] body[data-page="contact"] .champ__controle {
  border-color: rgba(119, 118, 255, 0.45);
  background-color: rgba(4, 20, 38, 0.85);
  color: #ffffff;
}

html[data-encadres="sombres"] body[data-page="contact"] :is(.champ__controle::placeholder, select.champ__controle:invalid) {
  color: #8fa0bd;
}

html[data-encadres="sombres"] body[data-page="contact"] select.champ__controle option {
  background-color: #071b3c;
  color: #ffffff;
}

html[data-encadres="sombres"] body[data-page="contact"] .champ__requis {
  color: #ff8a80;
}

html[data-encadres="sombres"] body[data-page="contact"] .rdv__agenda {
  border-color: rgba(0, 200, 255, 0.22);
  background: #0a2140;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

/* Formations et conférences : cerclées, avec une lueur (V2 sombre ; aussi en site sombre, « thème sombre fini »). */
html:is([data-encadres="sombres"], [data-theme="sombre"]) body[data-page="formations"] :is(.carte--formation, .carte--conference) {
  border: 1px solid rgba(119, 118, 255, 0.4);
  box-shadow: 0 0 28px rgba(119, 118, 255, 0.14);
}