/* ============================================================
   MODE SOMBRE — EXPERIMENT (réversible)
   ------------------------------------------------------------
   Pour TOUT désactiver : retirer dans index.html le <link> vers
   ce fichier, le <script src="js/dark-mode.js"> et le petit
   bloc inline « DARK MODE BOOT ». Aucun autre fichier n'est
   modifié de façon permanente.
   ------------------------------------------------------------
   Le thème sombre s'active via la classe html.site-dark.
   La révélation circulaire utilise l'élément .site-theme-reveal
   injecté par js/dark-mode.js.
   ============================================================ */

html.site-dark {
  --dm-bg: #100d12;
  --dm-surface: #191b21;
  --dm-surface-2: #20222a;
  --dm-ink: #f2f3f6;
  --dm-muted: #9aa0b2;
  --dm-border: rgba(255, 255, 255, 0.10);
  color-scheme: dark;
}

/* =========================================================
   1. Fond général + textes par défaut
   ========================================================= */
html.site-dark body {
  background: var(--dm-bg) !important;
  color: var(--dm-muted);
}

/* le hero / sections héritent du fond du body (transparents) */
html.site-dark .header-section,
html.site-dark .services,
html.site-dark .portfolio,
html.site-dark .contact,
html.site-dark section {
  background-color: transparent;
}

/* =========================================================
   2. Surfaces blanches -> surfaces sombres
   ========================================================= */
html.site-dark .bg-whit,
html.site-dark .site-menu,
html.site-dark .accordion-box .block,
html.site-dark .accordion-box .block.active-block,
html.site-dark .accordion-box .block .acc-btn.active,
html.site-dark .testimonials .testimonials-box,
html.site-dark .blog-sidebar .widget,
html.site-dark .site-footer-section,
html.site-dark .video-gallery-polygon:hover {
  background: var(--dm-surface) !important;
}

/* cartes "compétences / services" (fond #FFF) */
html.site-dark .services .item {
  background-color: var(--dm-surface) !important;
}
html.site-dark .services .item .icon {
  color: rgba(242, 243, 246, 0.55) !important;
}
html.site-dark .services .item h5 {
  color: var(--dm-ink) !important;
}
html.site-dark .services .item .numb {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.32) !important;
}

/* barre header blanche (scrollée) -> sombre, y compris la règle !important page-home */
html.site-dark .site-header.scrolled,
html.site-dark body.page-home .site-header.scrolled,
html.site-dark .site-header {
  background: var(--dm-bg) !important;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.45) !important;
}
html.site-dark .site-header:not(.scrolled) {
  background: transparent !important;
  box-shadow: none !important;
}

/* =========================================================
   3. Encres sombres (#18191d) -> claires
   ========================================================= */
html.site-dark a,
html.site-dark a:hover,
html.site-dark .site-header.scrolled h1,
html.site-dark .site-menu ul > li a,
html.site-dark .site-menu ul > li a:hover,
html.site-dark .site-menu ul > li.active a,
html.site-dark .site-menu ul > li.dropdown span,
html.site-dark .site-hero-titles-desktop h1,
html.site-dark .site-hero-titles-desktop h4,
html.site-dark .site-hero-titles-desktop p,
html.site-dark .site-hero-titles-mobile h1,
html.site-dark .site-hero-titles-mobile h4,
html.site-dark .header-cont-text p,
html.site-dark .header-hero-roles h6,
html.site-dark .contact h5,
html.site-dark .contact .item h5,
html.site-dark .contact .item p,
html.site-dark .site-footer-section h5,
html.site-dark .site-footer-social-link li i,
html.site-dark .nex-prv span.icon {
  color: var(--dm-ink) !important;
}

/* titres de section + intertitres : bien lumineux */
html.site-dark .section-padding h2.site-section-title,
html.site-dark .section-padding h6,
html.site-dark h1,
html.site-dark h2,
html.site-dark h3,
html.site-dark h4,
html.site-dark h5,
html.site-dark h6 {
  color: var(--dm-ink);
}

/* paragraphes / texte courant : gris clair lisible */
html.site-dark p,
html.site-dark .site-footer-section p {
  color: var(--dm-muted);
}

/* =========================================================
   4. Logo + burger : toujours visibles sur fond sombre
   ========================================================= */
/* logo en blanc par défaut quand on est en sombre (hors survol) */
html.site-dark .site-header .logo-wrap .logo img {
  filter: brightness(0) invert(1);
}
/* au survol en mode sombre : le rond clair se dessine, donc logo redevient sombre */
html.site-dark body.logo-cursor-hover .site-header .logo-wrap .logo img {
  filter: none;
}

/* effet miroir : en mode sombre, le rond du survol devient CLAIR (au lieu de noir) */
html.site-dark body.logo-cursor-hover .cursor.js-cursor:before,
html.site-dark body.logo-cursor-hover .site-header.scrolled .logo::before {
  background: var(--dm-ink) !important;
}

/* traits du burger sombres (état scrollé) -> clairs */
html.site-dark .site-nav-toggle i,
html.site-dark .site-nav-toggle i:before,
html.site-dark .site-nav-toggle i:after {
  background: var(--dm-ink) !important;
}

/* =========================================================
   5. Boutons / champs
   ========================================================= */
html.site-dark input[type="text"],
html.site-dark input[type="email"],
html.site-dark input[type="tel"],
html.site-dark textarea,
html.site-dark select {
  background: var(--dm-surface-2) !important;
  color: var(--dm-ink) !important;
  border-color: var(--dm-border) !important;
}
html.site-dark input::placeholder,
html.site-dark textarea::placeholder {
  color: var(--dm-muted) !important;
  opacity: 0.7;
}

/* Section contact : texte, liens, pictos et libellés (sinon en noir, invisibles) */
html.site-dark #contact .item .icon,
html.site-dark #contact .icon,
html.site-dark #contact .item h5,
html.site-dark #contact h5,
html.site-dark #contact a,
html.site-dark #contact .site-contact-label,
html.site-dark #contact .site-contact-phone-btn,
html.site-dark #contact .site-contact-welcome {
  color: var(--dm-ink) !important;
}
html.site-dark #contact .item p,
html.site-dark #contact p {
  color: var(--dm-muted) !important;
}
html.site-dark #contact a:hover,
html.site-dark #contact .site-contact-phone-btn:hover {
  color: #ffffff !important;
}

/* Flèche du menu déroulant : version claire sur fond sombre */
html.site-dark #contact select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23f2f3f6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* Champs : un peu d'air entre le libellé et le cadre, bordure plus nette */
html.site-dark #contact .site-contact-label {
  margin-bottom: 10px;
}
html.site-dark #contact input[type="text"],
html.site-dark #contact input[type="email"],
html.site-dark #contact input[type="tel"],
html.site-dark #contact textarea,
html.site-dark #contact select {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  padding: 12px 14px;
}
html.site-dark #contact .form-group {
  margin-bottom: 22px;
}
html.site-dark #contact input:focus,
html.site-dark #contact textarea:focus,
html.site-dark #contact select:focus {
  border-color: rgba(255, 255, 255, 0.40) !important;
  outline: none;
}

/* Contact en mode sombre : on retire le formulaire (colonne de droite) et on
   centre les coordonnées (colonne de gauche). */
html.site-dark #contact .site-contact-columns > .col-md-6 {
  display: none !important;
}
html.site-dark #contact .site-contact-columns {
  justify-content: center;
}
html.site-dark #contact .site-contact-columns > .col-md-5 {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}
html.site-dark #contact .site-contact-columns .item .wrap-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
html.site-dark #contact .site-contact-columns .site-contact-welcome {
  text-align: center;
}
/* note "Pas de secrétariat…" masquée en mode sombre */
html.site-dark #contact .site-contact-welcome-slot,
html.site-dark #contact .site-contact-welcome {
  display: none !important;
}

/* CTA ("Me contacter", "Envoyer mon message") : texte + cercle animé */
html.site-dark .btn-link.btn-link-cta > a,
html.site-dark .btn-link.btn-link-cta > .site-contact-submit-btn {
  color: var(--dm-ink) !important;
}
html.site-dark .btn-block.color1,
html.site-dark .btn-block.color2 {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

/* bordures génériques claires -> sombres */
html.site-dark .accordion-box .block,
html.site-dark .testimonials .testimonials-box,
html.site-dark .blog-sidebar .widget {
  border-color: var(--dm-border) !important;
}

/* =========================================================
   6. Reveal circulaire (overlay injecté par le JS)
   ========================================================= */
/* --- Voie idéale : View Transitions ---
   Le cercle dévoile le NOUVEAU thème par-dessus l'ancien pendant qu'il grandit
   (une lettre à cheval sur le bord est mi-claire / mi-sombre). On annule le
   fondu par défaut : le clip-path est piloté en JS (WAAPI). */
::view-transition-group(root) {
  animation-duration: 0.64s;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(root) {
  z-index: 1;
}
::view-transition-old(root) {
  z-index: 0;
}

/* --- Repli (navigateurs sans View Transitions) ---
   Disque centré sur le point cliqué, animé en transform:scale() (composité GPU,
   aucun repaint pendant la croissance). Le rayon final dépasse l'écran
   (overshoot) pour éviter tout ralenti dans le coin opposé en fin de course. */
.site-theme-reveal {
  position: fixed;
  border-radius: 50%;
  z-index: 9995;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity;
  transition: transform 0.62s cubic-bezier(0.45, 0, 0.2, 1);
}
.site-theme-reveal.is-fading {
  transition: opacity 0.32s ease;
  opacity: 0;
}

/* Respect des préférences d'accessibilité : pas d'animation lourde */
@media (prefers-reduced-motion: reduce) {
  .site-theme-reveal {
    transition: opacity 0.2s ease;
  }
}

/* =========================================================
   7. AURORE — la couleur qui se libère en mode sombre
   ---------------------------------------------------------
   Grandes nappes de couleur très diffuses (mix-blend: screen)
   qui dérivent lentement derrière le contenu. Visible uniquement
   en mode sombre ; révélée par le cercle (fait partie du snapshot)
   puis "ignition" (montée de saturation + léger zoom qui se pose).
   Élément #site-aurora injecté par js/dark-mode.js.
   ========================================================= */
#site-aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease;
  contain: strict;
}
html.site-dark #site-aurora {
  opacity: 1;
  visibility: visible;
}

/* Calque interne plus grand que l'écran : la parallaxe peut le déplacer
   sans jamais découvrir de bord (corrige la bande sombre côté scrollbar) */
.site-aurora__field {
  position: absolute;
  inset: -10vmax;
  will-change: transform;
}

.site-aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(62px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-play-state: paused;
}
html.site-dark .site-aurora__blob {
  animation-play-state: running;
}

/* Prune / aubergine sourd — haut gauche (tourne en continu) */
.site-aurora__b1 {
  width: 66vmax;
  height: 66vmax;
  top: -6vmax;
  left: -4vmax;
  border-radius: 58% 42% 55% 45% / 55% 52% 48% 45%;
  background: radial-gradient(ellipse 85% 62% at 42% 38%, rgba(126, 84, 120, 0.46) 0%, rgba(126, 84, 120, 0) 70%);
  animation-name: site-aurora-drift-1, site-aurora-morph-1;
  animation-duration: 22s, 16s;
  animation-delay: 0s, -6s;
}
/* Taupe / sable chaud — bas droite (oscille) */
.site-aurora__b2 {
  width: 60vmax;
  height: 60vmax;
  right: -6vmax;
  bottom: -8vmax;
  border-radius: 45% 55% 48% 52% / 52% 45% 55% 48%;
  background: radial-gradient(ellipse 70% 90% at 55% 60%, rgba(170, 150, 128, 0.4) 0%, rgba(170, 150, 128, 0) 70%);
  animation-name: site-aurora-drift-2, site-aurora-morph-2;
  animation-duration: 20s, 15s;
  animation-delay: -9s, -3s;
}
/* Mauve poudré (transition prune↔taupe) — centre droite (contre-rotation) */
.site-aurora__b3 {
  width: 52vmax;
  height: 52vmax;
  top: 6vmax;
  right: 2vmax;
  border-radius: 52% 48% 42% 58% / 48% 55% 45% 52%;
  background: radial-gradient(ellipse 90% 68% at 48% 45%, rgba(150, 108, 126, 0.38) 0%, rgba(150, 108, 126, 0) 68%);
  animation-name: site-aurora-drift-3, site-aurora-morph-3;
  animation-duration: 26s, 21s;
  animation-delay: -5s, -11s;
}
/* Champagne / sable clair — bas gauche, très discret (oscille) */
.site-aurora__b4 {
  width: 46vmax;
  height: 46vmax;
  left: 4vmax;
  bottom: 0vmax;
  border-radius: 48% 52% 55% 45% / 55% 48% 52% 45%;
  background: radial-gradient(ellipse 78% 82% at 45% 55%, rgba(190, 168, 142, 0.32) 0%, rgba(190, 168, 142, 0) 68%);
  animation-name: site-aurora-drift-4, site-aurora-morph-4;
  animation-duration: 24s, 17s;
  animation-delay: -14s, -8s;
}

/* Grain fin par-dessus pour la texture premium */
#site-aurora::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
}

@keyframes site-aurora-drift-1 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg);          opacity: 0.62; }
  33%  { transform: translate3d(16vmax, 12vmax, 0) scale(1.2) rotate(120deg); opacity: 0.95; }
  66%  { transform: translate3d(8vmax, 20vmax, 0) scale(1.08) rotate(240deg);  opacity: 0.8; }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(360deg);        opacity: 0.62; }
}
@keyframes site-aurora-drift-2 {
  0%   { transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg);       opacity: 0.6; }
  33%  { transform: translate3d(-18vmax, -10vmax, 0) scale(1) rotate(-14deg);   opacity: 0.92; }
  66%  { transform: translate3d(-9vmax, -19vmax, 0) scale(1.16) rotate(-22deg); opacity: 0.74; }
  100% { transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg);       opacity: 0.6; }
}
@keyframes site-aurora-drift-3 {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg);          opacity: 0.55; }
  33%  { transform: translate3d(-15vmax, 15vmax, 0) scale(1.22) rotate(-130deg); opacity: 0.9; }
  66%  { transform: translate3d(-21vmax, 4vmax, 0) scale(1.05) rotate(-250deg);  opacity: 0.7; }
  100% { transform: translate3d(0, 0, 0) scale(1) rotate(-360deg);       opacity: 0.55; }
}
@keyframes site-aurora-drift-4 {
  0%   { transform: translate3d(0, 0, 0) scale(0.95) rotate(0deg);       opacity: 0.5; }
  33%  { transform: translate3d(15vmax, -13vmax, 0) scale(1.14) rotate(16deg); opacity: 0.85; }
  66%  { transform: translate3d(21vmax, -4vmax, 0) scale(1.02) rotate(24deg);  opacity: 0.66; }
  100% { transform: translate3d(0, 0, 0) scale(0.95) rotate(0deg);       opacity: 0.5; }
}

/* Morphing de silhouette — durées distinctes des dérives → jamais de répétition */
@keyframes site-aurora-morph-1 {
  0%, 100% { border-radius: 58% 42% 55% 45% / 55% 52% 48% 45%; }
  50%      { border-radius: 42% 58% 45% 55% / 48% 45% 55% 52%; }
}
@keyframes site-aurora-morph-2 {
  0%, 100% { border-radius: 45% 55% 48% 52% / 52% 45% 55% 48%; }
  50%      { border-radius: 58% 42% 55% 45% / 45% 55% 45% 55%; }
}
@keyframes site-aurora-morph-3 {
  0%, 100% { border-radius: 52% 48% 42% 58% / 48% 55% 45% 52%; }
  50%      { border-radius: 45% 55% 58% 42% / 55% 48% 52% 45%; }
}
@keyframes site-aurora-morph-4 {
  0%, 100% { border-radius: 48% 52% 55% 45% / 55% 48% 52% 45%; }
  50%      { border-radius: 55% 45% 42% 58% / 45% 55% 48% 52%; }
}

/* "Ignition" : au passage en sombre, la couleur éclot puis se pose */
#site-aurora.is-igniting {
  animation: site-aurora-ignite 1.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes site-aurora-ignite {
  0% {
    transform: scale(1.14);
    filter: saturate(1.75) brightness(1.4);
  }
  100% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-aurora__blob { animation: none !important; }
  #site-aurora.is-igniting { animation: none !important; }
}

/* Fond statique (mode lite) — dégradés CSS, sans blobs animés ni grain */
html.site-dark #site-aurora.site-aurora--lite {
  background:
    radial-gradient(ellipse 85% 65% at 18% 12%, rgba(126, 84, 120, 0.38) 0%, transparent 58%),
    radial-gradient(ellipse 75% 60% at 88% 78%, rgba(170, 150, 128, 0.3) 0%, transparent 55%),
    radial-gradient(ellipse 65% 55% at 72% 28%, rgba(150, 108, 126, 0.24) 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 12% 72%, rgba(190, 168, 142, 0.18) 0%, transparent 50%);
}
html.site-dark #site-aurora.site-aurora--lite::after {
  display: none;
}
html.site-dark #site-aurora.site-aurora--lite.is-igniting {
  animation: none !important;
  filter: none;
}

/* =========================================================
   8. Clin d'œil au survol du logo (mode clair)
   ========================================================= */
#site-logo-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1200;
  pointer-events: none;
  transform-origin: 0 0;
  transform: translate(16px, 16px) scale(0.55) rotate(-4deg);
  opacity: 0;
  transition: opacity 0.24s ease,
    transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--site-font-heading, "Oswald"), sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: #111317;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
#site-logo-tip.is-on {
  opacity: 1;
  transform: translate(18px, 18px) scale(1) rotate(-4deg);
}
#site-logo-tip span {
  display: inline-block;
  will-change: transform;
  animation: site-logo-tip-bob 1.15s ease-in-out infinite;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes site-logo-tip-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* en mode sombre, on ne montre jamais ce clin d'œil */
html.site-dark #site-logo-tip {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #site-logo-tip span { animation: none !important; }
}

@media (hover: none) {
  #site-logo-tip { display: none !important; }
}