/* ══════════════════════════════════════════════════════════
   ALBATROX — Jetons de couleur, mode sombre et mode clair

   Une seule source de vérité pour les deux systèmes du site :
   la page d'accueil (autonome) et le thème xfolio des autres
   pages mappent tous deux leurs variables sur ces jetons.

   Comportement : on suit prefers-color-scheme par défaut ;
   dès que le visiteur choisit, data-theme sur <html> l'emporte.

   À charger AVANT le <style> en ligne de chaque page.
   ══════════════════════════════════════════════════════════ */

/* ── Mode sombre : la valeur par défaut ─────────────────── */
:root {
   --fond:            #0A1220;   /* fond de page                    */
   --fond-2:          #0D1B2E;   /* surface posée (cartes, panneaux)*/
   --fond-3:          #12243C;   /* surface creusée                 */
   --fond-inverse:    #F7FAFC;   /* pour les éléments contrastés    */

   --texte:           #FFFFFF;
   --texte-doux:      rgba(234, 241, 247, 0.62);
   --texte-faible:    rgba(255, 255, 255, 0.48);
   --texte-inverse:   #0A1220;

   --bordure:         rgba(255, 255, 255, 0.10);
   --bordure-forte:   rgba(255, 255, 255, 0.18);
   --bordure-douce:   rgba(255, 255, 255, 0.07);

   --accent:          #055188;   /* cobalt de marque                */
   --accent-clair:    #5EB3E8;   /* ciel                            */
   --accent-fond:     rgba(5, 81, 136, 0.12);

   --verre:           rgba(13, 27, 46, 0.55);
   --ombre:           0 18px 50px rgba(0, 0, 0, 0.35);

   /* En-tête de l'accueil : il flotte au-dessus de la photo du
      hero. Au repos il reste transparent en mode sombre, où le
      texte clair se détache déjà de la photo.                  */
   --entete-repos:    transparent;
   --entete-defile:   rgba(10, 18, 32, 0.78);
   --menu-mobile:     rgba(10, 18, 32, 0.97);

   --alerte:          #F0616D;
   --succes:          #7ED3A8;
   --attention:       #E0A83A;

   /* Traitement des photographies : le thème assombrit les
      images pour les fondre dans le fond sombre.             */
   --filtre-image:    saturate(0.2) brightness(0.55);
   --voile-image:     linear-gradient(150deg, rgba(5,81,136,0.65) 0%, rgba(3,30,56,0.45) 100%);
}

/* ── Mode clair ─────────────────────────────────────────── */
/* Blanc cassé froid : prolonge la teinte bleutée du bleu nuit. */
@media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) {
      --fond:          #F7FAFC;
      --fond-2:        #FFFFFF;
      --fond-3:        #EDF3F8;
      --fond-inverse:  #0A1220;

      --texte:         #0A1220;
      --texte-doux:    rgba(10, 18, 32, 0.66);
      --texte-faible:  rgba(10, 18, 32, 0.62);
      --texte-inverse: #FFFFFF;

      --bordure:       rgba(10, 18, 32, 0.12);
      --bordure-forte: rgba(10, 18, 32, 0.22);
      --bordure-douce: rgba(10, 18, 32, 0.08);

      --accent:        #055188;
      --accent-clair:  #1770C8;   /* assombri : #5EB3E8 est illisible sur blanc */
      --accent-fond:   rgba(5, 81, 136, 0.08);

      --verre:         rgba(255, 255, 255, 0.72);
      --ombre:         0 18px 50px rgba(10, 18, 32, 0.10);

      /* Le texte du menu devient sombre : sans voile, il serait
         illisible sur la photographie du hero. */
      --entete-repos:  rgba(255, 255, 255, 0.72);
      --entete-defile: rgba(247, 250, 252, 0.88);
      --menu-mobile:   rgba(247, 250, 252, 0.97);

      --alerte:        #C43041;
      --succes:        #1F7A4D;
      --attention:     #9A6B10;

      --filtre-image:  none;
      --voile-image:   linear-gradient(150deg, rgba(5,81,136,0.20) 0%, rgba(23,112,200,0.10) 100%);
   }
}

/* Le choix explicite du visiteur prime dans les deux sens. */
:root[data-theme="light"] {
   --fond:          #F7FAFC;
   --fond-2:        #FFFFFF;
   --fond-3:        #EDF3F8;
   --fond-inverse:  #0A1220;

   --texte:         #0A1220;
   --texte-doux:    rgba(10, 18, 32, 0.66);
   --texte-faible:  rgba(10, 18, 32, 0.62);
   --texte-inverse: #FFFFFF;

   --bordure:       rgba(10, 18, 32, 0.12);
   --bordure-forte: rgba(10, 18, 32, 0.22);
   --bordure-douce: rgba(10, 18, 32, 0.08);

   --accent:        #055188;
   --accent-clair:  #1770C8;
   --accent-fond:   rgba(5, 81, 136, 0.08);

   --verre:      rgba(255, 255, 255, 0.72);
   --ombre:      0 18px 50px rgba(10, 18, 32, 0.10);

   /* Le texte du menu devient sombre : sans voile, il serait
      illisible sur la photographie du hero. */
   --entete-repos:  rgba(255, 255, 255, 0.72);
   --entete-defile: rgba(247, 250, 252, 0.88);
   --menu-mobile:   rgba(247, 250, 252, 0.97);

   --alerte:        #C43041;
   --succes:        #1F7A4D;
   --attention:     #9A6B10;

   --filtre-image:  none;
   --voile-image:   linear-gradient(150deg, rgba(5,81,136,0.20) 0%, rgba(23,112,200,0.10) 100%);
}

/* ══ Raccordement du thème xfolio ═══════════════════════════
   main.css pilote 460 déclarations via ces 19 variables.
   On les branche sur les jetons ci-dessus.                   */
:root {
   --template-bg:      var(--fond);
   --template-color:   var(--texte);
   --white:            var(--texte);
   --black:            var(--fond);
   --primary-color:    var(--texte-doux);
   --secondary-color:  var(--accent);
   --tertiary-color:   var(--accent-clair);
   --quaternary-color: var(--fond-2);
   --quinary-color:    var(--fond-2);
   --senary-color:     var(--fond-3);
   --septenary-color:  var(--accent);
   --octonary-color:   var(--accent);
   --shadow:           var(--ombre);
}

/* ══ Rattrapages du thème ═══════════════════════════════════
   Les quelques valeurs que main.css écrit en dur et qui
   resteraient sombres en mode clair.                         */
body { background-color: var(--fond); color: var(--texte); }

.header,
.mobile-menu__wrapper { background-color: var(--fond); }

.mobile-menu__backdrop { background-color: rgba(10, 18, 32, 0.6); }

:root[data-theme="light"] .preloader,
:root:not([data-theme="dark"]) .preloader { background-color: var(--fond); }

/* Le thème pose un fond sombre fixe sur certaines sections. */
.cta__inner,
.footer__inner { background-color: transparent; }

/* Lien de menu de la page courante. Auparavant écrit en dur en
   #5EB3E8, qui tombe à 2,2:1 sur fond clair — illisible. */
.navbar__list a.est-actif,
.main-nav a.est-actif { color: var(--accent-clair); }

/* La sélection se fait sur fond cobalt dans les deux modes :
   son texte doit rester blanc, pas suivre --texte. */
*::selection { background-color: var(--accent); color: #FFFFFF; }
*::-moz-selection { background-color: var(--accent); color: #FFFFFF; }

/* main.css écrit color:#ffffff en dur sur les liens du menu
   mobile : blanc sur blanc en mode clair. */
.mobile-menu .navbar__item a,
.mobile-menu .navbar__sub-menu a,
.mobile-menu .navbar__sub-menu button { color: var(--texte); }
.mobile-menu .navbar__item a.est-actif { color: var(--accent-clair); }
.mobile-menu .navbar__sub-menu a { border-bottom-color: var(--bordure); }

/* Le thème découpe le libellé des boutons en un span par lettre
   pour l'animation au survol. Chaque lettre devenant sécable, le
   texte se coupe en plein mot sur écran étroit — « PROJ / ET ». */
.btn-primary .btn-animated-text,
.btn-quaternary .btn-animated-text { white-space: nowrap; }

/* Le bouton principal est rempli en cobalt dans les deux modes.
   Son libellé passait par var(--white), donc sombre sur cobalt
   en mode clair : on le fixe au blanc, seul contraste correct
   sur ce fond (8,6:1). En mode sombre, valeur inchangée.       */
.btn-primary .btn-animated-text span,
.btn-primary .btn-icon,
.btn-primary .btn-icon i { color: #FFFFFF; }

:root[data-theme="light"] .btn-primary:hover .btn-animated-text span,
:root[data-theme="light"] .btn-primary:hover .btn-icon,
:root[data-theme="light"] .btn-primary:hover .btn-icon i { color: #FFFFFF; }
@media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) .btn-primary:hover .btn-animated-text span,
   :root:not([data-theme="dark"]) .btn-primary:hover .btn-icon,
   :root:not([data-theme="dark"]) .btn-primary:hover .btn-icon i { color: #FFFFFF; }
}

/* ══ Sections posées sur une photographie sombre ════════════
   Leur fond ne change pas avec le thème : le texte doit donc
   rester clair dans les deux modes. On y rétablit localement
   le jeu de jetons sombre — en mode nuit, c'est un non-événement. */
.hero,
.services,
.contact,
[data-fond="sombre"] {
   --texte:         #FFFFFF;
   --texte-doux:    rgba(234, 241, 247, 0.62);
   --texte-faible:  rgba(255, 255, 255, 0.48);
   --texte-inverse: #0A1220;

   --fond-2:        rgba(255, 255, 255, 0.04);
   --fond-3:        rgba(255, 255, 255, 0.07);

   --bordure:       rgba(255, 255, 255, 0.10);
   --bordure-forte: rgba(255, 255, 255, 0.18);
   --bordure-douce: rgba(255, 255, 255, 0.07);

   --accent-clair:  #5EB3E8;
   --accent-fond:   rgba(5, 81, 136, 0.22);
   --verre:         rgba(13, 27, 46, 0.55);

   /* Une propriété personnalisée est calculée là où elle est
      déclarée : redéfinir les jetons ci-dessus ne suffit pas,
      il faut aussi redéclarer ce qui en dérive sur :root.     */
   --paper:            #FFFFFF;
   --muted:            rgba(234, 241, 247, 0.62);
   --line:             rgba(255, 255, 255, 0.10);
   --glass:            rgba(13, 27, 46, 0.55);
   --cobalt-hi:        #5EB3E8;

   --template-color:   #FFFFFF;
   --white:            #FFFFFF;
   --primary-color:    rgba(234, 241, 247, 0.62);
   --tertiary-color:   #5EB3E8;

   /* color s'hérite en valeur déjà calculée depuis body : on la
      réaffirme ici pour que tout le sous-arbre reparte du clair. */
   color: var(--texte);
}

/* ══ Photographies en mode clair ════════════════════════════
   Le thème assombrit les images pour les fondre dans le fond
   sombre. Sur fond clair, elles deviennent ternes : on relève
   luminosité et saturation.

   On ne touche PAS aux images qui portent du texte — hero,
   cartes travaux, fonds des sections services et contact :
   elles doivent rester sombres pour que le texte reste lisible. */
:root[data-theme="light"] .studio-img,
:root[data-theme="light"] .service__single img,
:root[data-theme="light"] .tl-step__thumb img {
   filter: saturate(0.92) brightness(1);
}
:root[data-theme="light"] .studio-img-wrap::after {
   background: var(--voile-image);
   mix-blend-mode: normal;
}

@media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) .studio-img,
   :root:not([data-theme="dark"]) .service__single img,
   :root:not([data-theme="dark"]) .tl-step__thumb img {
      filter: saturate(0.92) brightness(1);
   }
   :root:not([data-theme="dark"]) .studio-img-wrap::after {
      background: var(--voile-image);
      mix-blend-mode: normal;
   }
}

/* ══ Bouton de bascule ══════════════════════════════════════ */
.theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 42px;
   height: 42px;
   flex: 0 0 42px;
   padding: 0;
   border-radius: 50%;
   border: 1px solid var(--bordure-forte);
   background: transparent;
   color: var(--texte);
   cursor: pointer;
   transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.theme-toggle:hover {
   border-color: var(--accent-clair);
   background: var(--accent-fond);
   color: var(--accent-clair);
}
.theme-toggle:focus-visible {
   outline: 2px solid var(--accent-clair);
   outline-offset: 3px;
}
.theme-toggle svg {
   width: 18px;
   height: 18px;
   display: block;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round;
}
/* On n'affiche que l'icône du thème vers lequel on peut basculer. */
.theme-toggle .icone-lune { display: none; }
.theme-toggle .icone-soleil { display: block; }
:root[data-theme="light"] .theme-toggle .icone-lune { display: block; }
:root[data-theme="light"] .theme-toggle .icone-soleil { display: none; }
@media (prefers-color-scheme: light) {
   :root:not([data-theme="dark"]) .theme-toggle .icone-lune { display: block; }
   :root:not([data-theme="dark"]) .theme-toggle .icone-soleil { display: none; }
}

/* Dans le menu mobile, le bouton s'aligne avec les réseaux. */
.mobile-menu__social .theme-toggle { margin-left: 8px; }

/* Transition douce au changement, sans animer au chargement. */
:root.theme-pret body,
:root.theme-pret .header,
:root.theme-pret .mobile-menu__wrapper {
   transition: background-color 0.35s ease, color 0.35s ease;
}