/*
================================================================================
Fichier        : static/css/vitrine-clair.css   (v5.202)
Fonctionnalité : Décor et thème clair de la page /decouvrir (blog), chargé par
                 templates/_vitrine_layout.html uniquement quand la page
                 déclare `vt_bg_photo`.
Contenu        : 1. calque fixe plein écran .vt-sky (étoiles filantes sur TOUTE
                    la hauteur, quel que soit le scroll) ;
                 2. bouton lune / soleil de l'en-tête (.vt-theme-toggle) ;
                 3. thème clair = classe `vt-light` sur <html> (posée par
                    static/js/vitrine-theme.js, mémorisée dans localStorage) :
                    photo de galaxie claire, soleil en haut à droite, et
                    « tuiles de fond » (.vt-tile, cartes, panneaux, FAQ…) en
                    verre dépoli gris clair translucide, éclairées côté soleil.
Thème sombre   : reste le thème par défaut, inchangé (v5.197).
================================================================================
*/

/* ---------- 1. Ciel fixe (étoiles filantes) ---------- */
.vt-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.vt-sky .stars-container { inset: -40%; width: auto; height: auto; opacity: .85; }
.vt-sun { display: none; }

/* v5.200 — lune (thème sombre) : même emplacement que le soleil, centrée
   derrière le bouton — disque blanc-bleuté, cratères discrets, halo froid. */
.vt-moon {
  position: absolute; top: -415px; right: -412px; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(190,210,255,.30) 0 14%, rgba(120,150,255,.16) 24%, rgba(90,120,230,.07) 46%, rgba(90,120,230,0) 100%);
}
.vt-moon::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%;
  /* v5.202 — relief réaliste en niveaux de gris (calque SVG) sur un disque gris neutre */
  background:
    url("../img/moon.svg") center / 100% 100% no-repeat,
    radial-gradient(circle at 36% 34%, #f4f4f5, #d9d9dc 55%, #a9a9ae);
  box-shadow: 0 0 40px 12px rgba(180,200,255,.35), 0 0 120px 40px rgba(120,150,255,.18);
}
html.vt-light .vt-moon { display: none; }
/* bandeau plus transparent et sans flou en thème sombre : la lune reste visible derrière le bouton */
html:not(.vt-light) body.vt-bg-photo .vt-header { background: rgba(7,11,22,.30); backdrop-filter: none; -webkit-backdrop-filter: none; }
@media (max-width: 640px) {
  .vt-moon { width: 620px; height: 620px; top: -275px; right: -280px; }
  .vt-moon::before { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
}

/* Éclairage froid de la lune sur les tuiles (thème sombre) : liseré lumineux côté lune */
html:not(.vt-light) body.vt-bg-photo .vt-card,
html:not(.vt-light) body.vt-bg-photo .vt-window,
html:not(.vt-light) body.vt-bg-photo .vt-panel,
html:not(.vt-light) body.vt-bg-photo .vt-faq details {
  background-image: linear-gradient(225deg, rgba(170,195,255,.10), rgba(170,195,255,0) 42%);
  box-shadow: inset 1px 1px 0 rgba(180,200,255,.18), 0 20px 50px -30px rgba(0,0,0,.8);
}
@media (prefers-reduced-motion: reduce) { .vt-sky .stars-container { display: none; } }

/* ---------- 2. Bouton lune / soleil ---------- */
/* v5.199 — le bouton est collé à l'extrême droite du bandeau, au centre du soleil */
.vt-has-toggle .vt-nav { padding-right: 56px; }
.vt-theme-toggle {
  position: absolute; right: 18px; top: 15px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.45); color: #26324f;
  transition: transform .35s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.vt-theme-toggle:hover { border-color: #fff; background: rgba(255,255,255,.6); transform: rotate(-14deg); }
.vt-theme-toggle svg { width: 21px; height: 21px; }
.vt-theme-toggle .vt-ico-sun { display: none; }
html.vt-light .vt-theme-toggle .vt-ico-moon { display: none; }
html.vt-light .vt-theme-toggle .vt-ico-sun { display: block; }
html.vt-light .vt-theme-toggle { color: #e39a00; background: rgba(255,255,255,.55); border-color: rgba(60,70,90,.25); }
html.vt-light .vt-theme-toggle:hover { background: rgba(255,244,214,.9); border-color: #e39a00; transform: rotate(14deg); }

/* ---------- 3. Thème clair ---------- */
html.vt-light { background: #cfd3dc; }
html.vt-light body.vt-page {
  --vt-surface: rgba(255,255,255,.5);
  --vt-surface-solid: rgba(255,255,255,.78);
  --vt-line: rgba(40,52,78,.14);
  --vt-line-strong: rgba(40,52,78,.26);
  --vt-violet: #7a45c9;
  --text-primary: #172033;
  --text-secondary: #3f4a63;
  --text-muted: #46506a;   /* v7.82 : contraste >= 4,5 sur le fond gris de la photo */
  --accent-soft: rgba(242,190,10,.2);
  --accent-strong: #704F00;
  --border: rgba(40,52,78,.2);
  --ja-logo-page-color: #d99200 !important;
  color: #172033;
}

/* Photo claire + lumière chaude venant du soleil (haut droite) */
html.vt-light body.vt-bg-photo::before {
  background-image: var(--bg-galaxie-claire, url("../img/background_decouvrir_clair.jpg"));
  filter: blur(3px) brightness(1.02) saturate(1.05);
}
html.vt-light body.vt-bg-photo::after {
  background:
    radial-gradient(70% 55% at 92% 0%, rgba(255,214,140,.55), rgba(255,214,140,0) 70%),
    linear-gradient(180deg, rgba(235,238,245,.10), rgba(210,215,226,.22));
}

/* Soleil proche : disque lumineux + halo, haut droite, derrière les tuiles (aucun bord net) */
html.vt-light .vt-sun {
  display: block; position: absolute; top: -415px; right: -412px; width: 900px; height: 900px; border-radius: 50%;
  background: radial-gradient(closest-side, #fffef6 0 15%, #ffeaa6 20%, rgba(255,205,100,.72) 27%, rgba(255,180,70,.32) 43%, rgba(255,170,60,.10) 66%, rgba(255,170,60,0) 100%);
  animation: vt-sun-pulse 7s ease-in-out infinite alternate;
}
@keyframes vt-sun-pulse { from { filter: brightness(1); } to { filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { html.vt-light .vt-sun { animation: none; } }

html.vt-light .vt-sky .stars-container { opacity: 1; }
html.vt-light .vt-sky .shooting-star { background: linear-gradient(90deg, rgba(255,255,255,.95), transparent); }
html.vt-light .vt-sky .shooting-star::before { box-shadow: 0 0 10px 2px rgba(255,255,255,.95); }

/* Titres, liens et textes en dur (blanc) → encre sombre */
html.vt-light .vt-page h1, html.vt-light .vt-page h2, html.vt-light .vt-page h3,
html.vt-light .vt-brand, html.vt-light .vt-faq summary, html.vt-light .vt-offer-head b,
html.vt-light .vt-score strong, html.vt-light .vt-option h4 { color: var(--text-primary); }
html.vt-light .vt-brand span { color: var(--accent-strong); }
html.vt-light .vt-links a:hover, html.vt-light .vt-links a.is-active,
html.vt-light .vt-footer a.vt-flink:hover, html.vt-light .vt-social a:hover,
html.vt-light .vt-modal-close:hover { color: #0b1224; }
html.vt-light .vt-grad { background: linear-gradient(100deg, #B07E00 10%, #7a45c9 90%); -webkit-background-clip: text; background-clip: text; }

/* En-tête et pied de page : verre dépoli gris clair */
html.vt-light .vt-header { background: rgba(236,239,245,.72); border-bottom-color: rgba(255,255,255,.6); box-shadow: 0 8px 30px -18px rgba(30,40,70,.45); }
html.vt-light .vt-footer { background: rgba(232,236,243,.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top-color: rgba(255,255,255,.6); }
html.vt-light .vt-section.vt-alt { background: none; }

/* Boutons */
html.vt-light .vt-btn-ghost { background: rgba(255,255,255,.55); color: var(--text-primary); border-color: rgba(40,52,78,.28); }
html.vt-light .vt-btn-ghost:hover { background: rgba(255,255,255,.85); border-color: var(--accent-strong); }
html.vt-light .vt-eyebrow { background: rgba(255,255,255,.55); }

/* ---------- Tuiles de fond : verre dépoli gris clair, éclairé côté soleil ---------- */
html.vt-light .vt-tile, html.vt-light .vt-card, html.vt-light .vt-window, html.vt-light .vt-panel,
html.vt-light .vt-final, html.vt-light .vt-faq details {
  background: linear-gradient(225deg, rgba(255,251,240,.78) 0%, rgba(232,236,242,.66) 48%, rgba(212,217,227,.62) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.75), -16px 18px 44px -22px rgba(20,28,50,.6);
}
html.vt-light .vt-tile { border-radius: var(--vt-radius); padding: 30px 32px; }
html.vt-light .vt-feature-text.vt-tile { padding: 34px 36px; }
html.vt-light .vt-head.vt-tile { width: fit-content; max-width: 100%; padding: 26px 32px 14px; }
html.vt-light .vt-head.vt-tile .vt-h2 { margin-top: 10px; }
html.vt-light .vt-head.vt-tile .vt-lead { margin-bottom: 8px; }
html.vt-light .vt-faq-wrap, html.vt-light #faq .vt-head.vt-tile { margin-left: auto; margin-right: auto; }
html.vt-light .vt-hero-copy.vt-tile { max-width: 980px; margin: 0 auto; padding: 44px 32px 36px; }
html.vt-light .vt-hero-copy h1 { margin-top: 20px; }
html.vt-light .vt-hero-copy .vt-hero-proof { margin-bottom: 0; }
html.vt-light .vt-final.vt-tile { padding: 72px 28px; border-radius: 28px; }
html.vt-light .vt-faq details[open] { background: linear-gradient(225deg, rgba(255,252,243,.88), rgba(236,239,245,.74)); }
html.vt-light .vt-window, html.vt-light .vt-panel { background: linear-gradient(225deg, rgba(255,251,240,.8), rgba(228,232,240,.7)); }

/* v7.82 — pages de texte (blog, légal, à propos, contact…) : le texte repose sur une tuile de verre, jamais directement sur la photo */
html.vt-light .vt-doc .vt-container, html.vt-light .vt-post-card, html.vt-light .vt-blog-head {
  background: linear-gradient(225deg, rgba(255,251,240,.9) 0%, rgba(238,241,246,.86) 55%, rgba(226,230,238,.84) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--vt-radius);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.75), -16px 18px 44px -22px rgba(20,28,50,.55);
}
html.vt-light .vt-doc .vt-container { padding: 34px 36px; }
html.vt-light .vt-doc .vt-container .vt-card, html.vt-light .vt-doc .vt-container .vt-note { box-shadow: none; }
html.vt-light .vt-blog-head { padding: 26px 30px 22px; width: fit-content; max-width: 100%; }
@media (max-width: 640px) {
  html.vt-light .vt-doc .vt-container { padding: 22px 18px; }
  html.vt-light .vt-blog-head { padding: 20px 18px 16px; }
}

/* Contenu des maquettes (kanban, listes, scores) */
html.vt-light .vt-col { background: rgba(255,255,255,.4); }
html.vt-light .vt-dots i { background: rgba(40,52,78,.28); }
html.vt-light .vt-kw { background: rgba(255,255,255,.6); }
html.vt-light .vt-bar { background: rgba(40,52,78,.12); }
html.vt-light .vt-offer-text mark { background: rgba(45,99,201,.16); }
html.vt-light .vt-pill-ok { color: #12804c; background: rgba(18,128,76,.12); }
html.vt-light .vt-pill-ko { color: #c0392b; background: rgba(192,57,43,.12); }
html.vt-light .vt-checks li::before { background-color: rgba(45,99,201,.12); }
html.vt-light .vt-cv { border-color: rgba(40,52,78,.18); box-shadow: 0 20px 40px -20px rgba(20,28,50,.55); }
html.vt-light .vt-todo { color: #6f4100; background: rgba(245,165,36,.16); }

/* Modale */
html.vt-light .vt-modal-overlay { background: rgba(150,158,176,.55); }
html.vt-light .vt-modal { background: #eef0f5; box-shadow: 0 30px 80px rgba(30,40,70,.35); }
html.vt-light .vt-option { background: rgba(255,255,255,.6); }
html.vt-light .vt-option.is-highlight { background: linear-gradient(160deg, rgba(255,240,205,.8), rgba(255,255,255,.6)); }
html.vt-light .vt-badge { color: #9a5b00; }

@media (max-width: 640px) {
  .vt-theme-toggle { right: 10px; }
  html.vt-light .vt-sun { width: 620px; height: 620px; top: -275px; right: -280px; }
  html.vt-light .vt-tile, html.vt-light .vt-feature-text.vt-tile { padding: 22px 18px; }
  html.vt-light .vt-hero-copy.vt-tile { padding: 32px 18px 26px; }
  html.vt-light .vt-final.vt-tile { padding: 52px 18px; }
}
html.vt-light a.vt-post-meta[href$="rss.xml"] { color: #172033; font-weight: 600; }