/* =========================================================================
   LES RETOUCHES DES THEMES CLAIRS — vitrine de la tour de controle.

   A QUOI SERT CE FICHIER. Les couleurs des six themes sont dans vitrine.css.
   Ici on ne repare qu une chose : les endroits ou une couleur avait ete
   ecrite en dur, du temps ou la vitrine etait toujours sombre. Sur les deux
   themes clairs — « Papier » et « Sable » — ces couleurs en dur rendaient du
   texte gris pale sur du blanc : illisible. On les repose une par une.

   CE QUI A DISPARU LE version de référence : l ancien interrupteur clair / sombre et
   tout son habillage. Il est remplace par UN ROND, dessine dans vitrine.css,
   sous le titre « LE ROND DES THEMES ».
   ========================================================================= */

/* --- Les en-tetes : de la meme couleur que les cartes, pas du fond ------- */
html[data-theme="papier"] header.tete,
html[data-theme="sable"] header.tete{background:var(--surface)}

/* --- Les survols : une bordure et une ombre douces, pas un trait noir ---- */
html[data-theme="papier"] .btn.fantome:hover,
html[data-theme="sable"] .btn.fantome:hover,
html[data-theme="papier"] .dd-btn:hover,
html[data-theme="sable"] .dd-btn:hover{border-color:var(--doux)}

html[data-theme="papier"] .carte:hover,
html[data-theme="papier"] .tete-equipe:hover,
html[data-theme="papier"] ol.etapes li:hover,
html[data-theme="sable"] .carte:hover,
html[data-theme="sable"] .tete-equipe:hover,
html[data-theme="sable"] ol.etapes li:hover{
  border-color:var(--doux);
  box-shadow:0 16px 30px -24px rgba(15,23,42,.25);
}
html[data-theme="papier"] .offre:hover,
html[data-theme="sable"] .offre:hover{
  border-color:var(--doux);
  box-shadow:0 18px 40px -28px rgba(15,23,42,.22);
}

/* --- Les menus deroulants : une ombre lisible sur un fond clair ---------- */
html[data-theme="papier"] .dd-menu,
html[data-theme="papier"] .nav-tour .dropdown-menu,
html[data-theme="sable"] .dd-menu,
html[data-theme="sable"] .nav-tour .dropdown-menu{
  box-shadow:0 18px 45px -22px rgba(15,23,42,.32);
}
html[data-theme="papier"] .dd-menu a:hover,
html[data-theme="papier"] .nav-tour .dropdown-item:hover,
html[data-theme="papier"] .nav-tour .dropdown-item:focus,
html[data-theme="sable"] .dd-menu a:hover,
html[data-theme="sable"] .nav-tour .dropdown-item:hover,
html[data-theme="sable"] .nav-tour .dropdown-item:focus{
  background:rgba(0,0,0,.06);
}

/* --- Les articles : le texte et les titres etaient ecrits en clair ------- */
html[data-theme="papier"] article p,
html[data-theme="papier"] article li,
html[data-theme="sable"] article p,
html[data-theme="sable"] article li{color:var(--texte)}
html[data-theme="papier"] article h2,
html[data-theme="sable"] article h2{color:var(--primaire)}

/* --- Les champs ou l on tape : la recherche des articles, le chat -------- */
html[data-theme="papier"] #tdc-cherche,
html[data-theme="papier"] .chatbr-pied input,
html[data-theme="papier"] input[type="text"],
html[data-theme="papier"] input[type="search"],
html[data-theme="papier"] input[type="email"],
html[data-theme="papier"] input[type="password"],
html[data-theme="papier"] textarea,
html[data-theme="papier"] select,
html[data-theme="sable"] #tdc-cherche,
html[data-theme="sable"] .chatbr-pied input,
html[data-theme="sable"] input[type="text"],
html[data-theme="sable"] input[type="search"],
html[data-theme="sable"] input[type="email"],
html[data-theme="sable"] input[type="password"],
html[data-theme="sable"] textarea,
html[data-theme="sable"] select{
  background:var(--surface);
  color:var(--texte);
  border:1px solid var(--surface2);
}
html[data-theme="papier"] #tdc-cherche::placeholder,
html[data-theme="papier"] .chatbr-pied input::placeholder,
html[data-theme="sable"] #tdc-cherche::placeholder,
html[data-theme="sable"] .chatbr-pied input::placeholder{color:var(--doux)}
html[data-theme="papier"] #tdc-cherche:focus,
html[data-theme="papier"] .chatbr-pied input:focus,
html[data-theme="sable"] #tdc-cherche:focus,
html[data-theme="sable"] .chatbr-pied input:focus{
  border-color:var(--primaire);
  box-shadow:0 0 0 3px rgba(26,115,232,.15);
}

html[data-theme="papier"] .btn-lien,
html[data-theme="sable"] .btn-lien{
  border-color:var(--surface2);
  background:var(--surface);
  color:var(--primaire);
}

/* ===== COPIE EXACTE DU BLOC DE vitrine.css ================================
   POURQUOI CETTE COPIE. Des pages (les jeux, l entrainement, le plan du
   site) ne chargent PAS vitrine.css : elles ont leur propre habillage. Sans
   cette copie, leur rond serait un rectangle nu. Les regles sont identiques
   mot pour mot a celles de vitrine.css ; le controle test-rond-theme.sh
   verifie que les deux copies restent identiques.
   ======================================================================= */

/* ═══════════════════════════════════════════════════════════════════════
   LES SIX THEMES DE LA VITRINE (version de référence, demande de Patrick)
   « le theming de dive sur la vitrine a la place du switch »

   D'OU ILS VIENNENT. Les six palettes sont celles de dive.matourdecontrole.fr,
   ou elles servent depuis le 08/09. Ce sont des PALETTES, rien d'autre :
   aucun logo, aucun nom de maison, aucun lien avec qui que ce soit.

   CE QUI CHANGE ICI. Dive nomme ses couleurs --ink, --cyan, --champ. La
   vitrine nomme les siennes --texte, --primaire, --surface. On ne renomme
   rien des deux cotes : on TRADUIT, une fois, ici.

   L'ORDRE, choisi par Patrick : Papier d'abord (c'est le theme principal),
   Sable ensuite. Les quatre autres suivent.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. PAPIER — le theme principal de la vitrine. Clair, bleu franc. */
html[data-theme="papier"]{
  --fond:#ffffff; --surface:#f8f9fa; --surface2:#dadce0;
  --primaire:#1a73e8; --texte:#202124; --doux:#5f6368;
  --ink3:#80868b; --encre-bouton:#ffffff;
  --effet-haut:#e8f0fe; --effet-milieu:#f8f9fa; --effet-bas:#ffffff;
}
/* 2. SABLE — chaud, terre cuite. */
html[data-theme="sable"]{
  --fond:#faf9f5; --surface:#f0eee6; --surface2:#e3ded1;
  --primaire:#d97757; --texte:#141413; --doux:#6b6862;
  --ink3:#8c8880; --encre-bouton:#ffffff;
  --effet-haut:#f5ede4; --effet-milieu:#f0eee6; --effet-bas:#faf9f5;
}
/* 3. ARDOISE — sombre, vert profond. */
html[data-theme="ardoise"]{
  --fond:#08090b; --surface:#111316; --surface2:#252a31;
  --primaire:#10a37f; --texte:#ececf1; --doux:#a9adba;
  --ink3:#787e8c; --encre-bouton:#04231c;
  --effet-haut:#1d2b28; --effet-milieu:#111316; --effet-bas:#08090b;
}
/* 4. TOUR DE CONTROLE — le notre. Nuit et cyan. */
:root,
html[data-theme="tour"]{
  --fond:#03080e; --surface:#061620; --surface2:#123040;
  --primaire:#3fd0e0; --texte:#e9eef6; --doux:#9fb0c4;
  --ink3:#6b7e94; --encre-bouton:#02222a;
  --effet-haut:#0e4053; --effet-milieu:#061620; --effet-bas:#03080e;
}
/* 5. BRAISE — nuit et feu. */
html[data-theme="braise"]{
  --fond:#0b0602; --surface:#1c1004; --surface2:#3a2409;
  --primaire:#ff7000; --texte:#f5efe6; --doux:#c2b4a2;
  --ink3:#8d8171; --encre-bouton:#1a0e00;
  --effet-haut:#3a1f05; --effet-milieu:#1c1004; --effet-bas:#0b0602;
}
/* 6. AZUR — nuit et bleu clair. */
html[data-theme="azur"]{
  --fond:#03101c; --surface:#082741; --surface2:#12456e;
  --primaire:#50b0ff; --texte:#eaf1fb; --doux:#9db4d2;
  --ink3:#6f88a8; --encre-bouton:#04203a;
  --effet-haut:#0f3f6d; --effet-milieu:#082741; --effet-bas:#03101c;
}

/* LE VERRE LIQUIDE SUIT LE THEME (corrige le version de référence).
   Le premier jet ecrivait le fond en dur : le verre restait bleu nuit meme
   en theme clair. Il prend maintenant les couleurs du theme choisi. */
body.verre{ background:var(--fond) !important; }
body.verre::before{
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  color-mix(in srgb, var(--primaire) 40%, transparent), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 22%, color-mix(in srgb, var(--primaire) 24%, transparent), transparent 62%),
    radial-gradient(40vmax 40vmax at 50% 92%, color-mix(in srgb, var(--primaire) 18%, transparent), transparent 62%),
    radial-gradient(30vmax 30vmax at 76% 68%, color-mix(in srgb, var(--surface2) 65%, transparent), transparent 62%);
}

/* ═══ LE ROND DES THEMES DANS LE MENU ═══════════════════════════════════════
   Intégré directement dans le menu d en-tête (dans la barre de navigation).
   Au survol, clic ou focus, il déroule les six pastilles sous le bouton. */
.tour-rond, #tour-rond, [data-theme-toggle] {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  z-index: 1050;
  margin-left: 0.5rem;
}
.tour-rond-bouton {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: var(--primaire);
  border: 2px solid var(--surface2);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
  display: block;
}
.tour-rond-bouton:hover { transform: scale(1.1); }
.tour-rond-bouton:focus-visible { outline: 2px solid var(--primaire); outline-offset: 3px; }

.tour-rond-liste {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1060;
}

/* trois façons d ouvrir : la souris, le clic, le clavier */
.tour-rond:hover .tour-rond-liste,
.tour-rond:focus-within .tour-rond-liste,
.tour-rond.ouvert .tour-rond-liste {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.tour-rond-choix {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  border: 2px solid rgba(255,255,255,.28);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .15s ease, border-color .15s ease;
  position: relative;
}
.tour-rond-choix:hover { transform: scale(1.2); border-color: #fff; }
.tour-rond-choix:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tour-rond-choix[aria-pressed="true"] { border-color: #fff; transform: scale(1.15); }

.tour-rond-choix::after {
  content: attr(data-nom);
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font: 600 12px/1 system-ui, sans-serif;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--surface2);
  border-radius: .5rem;
  padding: 5px 9px;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}
.tour-rond-choix:hover::after,
.tour-rond-choix:focus-visible::after { opacity: 1; }

@media print { .tour-rond, #tour-rond { display: none !important; } }
@media print{ .tour-rond, #tour-rond{ display:none !important; } }


/* Bouton flottant WhatsApp officiel */
.whatsapp-fab {
  position: fixed !important;
  right: 1.25rem !important;
  bottom: 5.5rem !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
  z-index: 9999 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.whatsapp-fab:hover {
  transform: scale(1.08) !important;
  background: #1ebe5d !important;
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45) !important;
}
.whatsapp-fab svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  fill: #ffffff !important;
  display: block !important;
  pointer-events: none !important;
}