/*
 * FICHIER   : assets/css/base.css
 * RÔLE      : Fondation CSS — variables globales, reset, typographie,
 *             utilitaires partagés, boutons, mode clair/sombre.
 *             Chargé EN PREMIER dans layout.php.
 *
 * OÙ MODIFIER QUOI
 *   Couleurs de marque (vert, or, crème)   → bloc :root ci-dessous
 *   Couleur principale (brand color)       → layout.php injecte --g4/--g6
 *                                            depuis BDD (nf_settings.brand_color)
 *   Typographie (polices, tailles)         → bloc TYPOGRAPHIE
 *   Boutons globaux (btn-gold, btn-ghost)  → bloc BOUTONS
 *   Mode clair                             → bloc LIGHT MODE
 *   Utilitaires (reveal, cursor)           → bloc UTILITAIRES
 *
 * DÉPENDANCES
 *   Polices → Google Fonts chargées dans layout.php
 *   --g4 / --g5 / --g6 → injectés par layout.php (couleur BDD)
 *   Tous les autres fichiers CSS dépendent de ce fichier
 *   → Il doit toujours être chargé EN PREMIER
 */


/* ══════════════════════════════════════════════════════════════
   VARIABLES GLOBALES (MODE SOMBRE — défaut)
   Pour modifier une couleur globalement → changer ici.
   --g4, --g5, --g6 sont injectés dynamiquement par layout.php
   depuis nf_settings.brand_color (couleur de marque du client).
══════════════════════════════════════════════════════════════ */
:root {
  /* Fonds sombres (du plus sombre au plus clair) */
  --g1:         #060d0a;
  --g2:         #0d1f14;
  --g3:         #122a1b;

  /* Couleur de marque — INJECTÉE par layout.php depuis BDD
     Ne pas définir --g4/--g5/--g6 ici, layout.php le fait */

  /* Accent doré */
  --gold:       #c9a96e;
  --gold2:      #e8c98a;

  /* Textes */
  --cream:      #e8e2d5;    /* titres, texte principal */
  --text:       #d4cfc5;    /* texte courant */
  --muted:      #7a9182;    /* texte secondaire, labels */

  /* Séparateurs et bordures */
  --line:       rgba(57, 181, 74, .12);

  /* Alias blanc (utilisé pour les icônes sur fond vert) */
  --white:      #ffffff;

  /* Surfaces de cartes */
  --dark-card:  #0f1e16;
  --dark-card2: #0a1610;
  --surface:    #131f17;
  --surface2:   #0e1a12;
}


/* ══════════════════════════════════════════════════════════════
   MODE CLAIR
   Toutes les surcharges de variables pour le thème clair.
   Activé par theme.js → body.classList.add('light-mode')
   Pour ajuster une couleur en mode clair → modifier ici.
══════════════════════════════════════════════════════════════ */
body.light-mode {
  --g1:         #f7faf8;
  --g2:         #eef5f0;
  --g3:         #dfeee3;
  --gold:       #8a6a30;
  --gold2:      #7a5a20;
  --cream:      #1a2e1e;
  --text:       #2c3e30;
  --muted:      #4a6654;
  --line:       rgba(57, 181, 74, .15);
  --white:      #1a2e1e;
  --dark-card:  #ffffff;
  --dark-card2: #eef5f0;
  --surface:    #f7faf8;
  --surface2:   #eef5f0;
}

/* Surcharges spécifiques mode clair (éléments qui ne suivent pas
   les variables seules et ont besoin d'une règle explicite) */
body.light-mode .hero-photo          { filter: brightness(.75); }
body.light-mode .hero-photo-mask     { background: linear-gradient(to right, var(--g1) 0%, rgba(247,250,248,.55) 45%, transparent 72%); }
body.light-mode nav a                { color: rgba(26,46,30,.75); }
body.light-mode .hero h1             { color: #1a2e1e; }
body.light-mode .hero-p              { color: rgba(26,46,30,.65); }
body.light-mode .btn-ghost           { color: #1a2e1e; border-color: rgba(26,46,30,.3); }
body.light-mode .srv-t               { color: #1a2e1e; }
body.light-mode .srv-d               { color: #4a6654; }
body.light-mode .foot-col a,
body.light-mode .foot-col span       { color: rgba(26,46,30,.65); }
body.light-mode footer               { border-top: 1px solid rgba(57,181,74,.2); }
body.light-mode .modal-title         { color: #1a2e1e; }
body.light-mode .modal-sub           { color: rgba(26,46,30,.55); }
body.light-mode .modal-close         { color: rgba(26,46,30,.45); }
body.light-mode .modal-hd            { background: var(--g2); }
body.light-mode input,
body.light-mode select,
body.light-mode textarea             { background: #fff; color: #1a2e1e; border-color: rgba(57,181,74,.25); }
body.light-mode label                { color: #4a6654; }
body.light-mode .chk-label           { color: #2c3e30; }
body.light-mode .foot-p              { color: rgba(26,46,30,.6); }
body.light-mode .sp-hero-overlay     { background: linear-gradient(to bottom, rgba(247,250,248,.2) 0%, var(--g1) 100%); }
body.light-mode .sp-hero-title       { color: #1a2e1e; }
body.light-mode .sp-back             { background: rgba(247,250,248,.92); color: #2c3e30; border-color: rgba(57,181,74,.3); }
body.light-mode .sp-section-title    { color: #1a2e1e; }
body.light-mode .sp-section p        { color: #4a6654; }
body.light-mode .sp-list li          { background: #fff; color: #2c3e30; }
body.light-mode .sp-stat             { background: #fff; }
body.light-mode .sp-stat-l           { color: #4a6654; }
body.light-mode .sp-cta              { background: #fff; border-color: rgba(57,181,74,.2); }
body.light-mode .sp-cta h3           { color: #1a2e1e; }
body.light-mode .sp-cta p            { color: #4a6654; }
body.light-mode .suc-t               { color: #1a2e1e; }
body.light-mode .test-q              { color: #2c3e30; }
body.light-mode .test-auth           { color: #4a6654; }
body.light-mode .c-link-val          { color: #1a2e1e; }
body.light-mode .cta-final h2        { color: #fff; }
body.light-mode .foot-copy,
body.light-mode .foot-made           { color: rgba(26,46,30,.45); }
body.light-mode .pt-quote            { color: #2c3e30; }
body.light-mode .pt-name             { color: #1a2e1e; }
body.light-mode .pt-role             { color: #4a6654; }
body.light-mode .sec-p               { color: #4a6654; }
body.light-mode .about-text,
body.light-mode .step-d              { color: #4a6654; }
body.light-mode .pillar-d            { color: #4a6654; }
body.light-mode .pillar-t            { color: #1a2e1e; }
body.light-mode .equipe-name         { color: #1a2e1e; }
body.light-mode .equipe-role         { color: #4a6654; }
body.light-mode .trust-bar           { background: var(--g2); border-color: rgba(57,181,74,.15); }
body.light-mode .trust-label         { color: #4a6654; }
body.light-mode .trust-val           { color: #1a2e1e; }
body.light-mode .mobile-menu         { background: var(--g1); }
body.light-mode .mobile-menu a       { color: #2c3e30; }
body.light-mode .hamburger span      { background: #2c3e30; }
body.light-mode nav.scrolled         { background: rgba(247,250,248,.97); }
body.light-mode .step-t              { color: #1a2e1e; }
body.light-mode .step-d              { color: #4a6654; }


/* ══════════════════════════════════════════════════════════════
   RESET & BASE
   Supprime les marges/paddings navigateur, normalise box-model.
══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size:       16px;
}

body {
  font-family: 'Jost', sans-serif;
  background:  var(--g1);
  color:       var(--text);
  overflow-x:  hidden;
}


/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHIE COMMUNE
   Modifier la police globale → font-family sur body ci-dessus
   Modifier la police des titres → font-family sur .sec-h, h1, h2
══════════════════════════════════════════════════════════════ */

/* Titres de section partagés */
.sec-h {
  font-family: 'Playfair Display', serif;
  font-size:   clamp(2rem, 3.2vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  color:       var(--cream);
  margin-bottom: 1.4rem;
}
.sec-h em {
  font-style: italic;
  color:      var(--g4);
}

/* Paragraphes de section */
.sec-p {
  font-size:   .95rem;
  line-height: 1.9;
  color:       var(--muted);
  font-weight: 300;
  margin-bottom: 1.1rem;
}

/* Eyebrow (petit label vert au-dessus des titres) */
.sec-eyebrow {
  display:     flex;
  align-items: center;
  gap:         .6rem;
  margin-bottom: 1rem;
}
.sec-dot {
  width:         6px;
  height:        6px;
  background:    var(--g4);
  border-radius: 50%;
}
.sec-tag {
  font-size:   .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color:       var(--g4);
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════
   BOUTONS GLOBAUX
   Utilisés dans hero, services, cta, modals, etc.
   Modifier l'apparence d'un bouton → ici, impacte tout le site.
   Pour modifier un seul bouton → surcharger dans la section CSS concernée.
══════════════════════════════════════════════════════════════ */

/* Bouton vert principal */
.btn-gold {
  background:      var(--g4);
  color:           white;
  padding:         1rem 2.5rem;
  font-size:       .8rem;
  font-weight:     600;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  text-decoration: none;
  display:         inline-block;
  border:          none;
  cursor:          pointer;
  transition:      all .25s;
  font-family:     'Jost', sans-serif;
  position:        relative;
  overflow:        hidden;
}
.btn-gold::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--g5);
  transform:  translateX(-105%);
  transition: transform .3s ease;
}
.btn-gold:hover::before { transform: translateX(0); }
.btn-gold span           { position: relative; z-index: 1; }

/* Bouton ghost (contour transparent) */
.btn-ghost {
  background:      transparent;
  color:           white;
  padding:         1rem 2.5rem;
  font-size:       .8rem;
  font-weight:     400;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             .6rem;
  border:          1px solid rgba(255,255,255,.18);
  transition:      all .25s;
}
.btn-ghost:hover {
  border-color: var(--g4);
  color:        var(--g4);
}

/* Bouton sombre (utilisé dans cta_final) */
.btn-dark {
  background:      rgba(0,0,0,.25);
  color:           white;
  padding:         1.1rem 2.8rem;
  font-size:       .8rem;
  font-weight:     600;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  text-decoration: none;
  display:         inline-block;
  border:          1px solid rgba(255,255,255,.3);
  cursor:          pointer;
  transition:      background .3s;
  font-family:     'Jost', sans-serif;
}
.btn-dark:hover { background: rgba(0,0,0,.45); }


/* ══════════════════════════════════════════════════════════════
   CURSOR PERSONNALISÉ
   Visible uniquement sur les appareils avec souris (hover:hover).
   Masqué automatiquement sur mobile/tactile.
   Modifier la taille/couleur → variables dans cursor.js
══════════════════════════════════════════════════════════════ */
.cursor {
  width:            8px;
  height:           8px;
  background:       var(--gold);
  border-radius:    50%;
  position:         fixed;
  pointer-events:   none;
  z-index:          9998;
  transform:        translate(-50%, -50%);
  transition:       width .3s, height .3s, background .3s;
}
.cursor-ring {
  width:          32px;
  height:         32px;
  border:         1px solid rgba(57,181,74,.45);
  border-radius:  50%;
  position:       fixed;
  pointer-events: none;
  z-index:        9997;
  transform:      translate(-50%, -50%);
  transition:     width .3s, height .3s, border-color .3s;
}
/* Masqué sur tactile */
@media (hover: none) {
  .cursor, .cursor-ring { display: none; }
}


/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL
   Classes ajoutées par app.js via IntersectionObserver.
   .reveal   → apparition de bas en haut
   .rev-l    → apparition de gauche
   .rev-r    → apparition de droite
   Modifier la durée/distance → transition et transform ci-dessous
══════════════════════════════════════════════════════════════ */
.reveal {
  opacity:    0;
  transform:  translateY(38px);
  transition: opacity .85s ease, transform .85s ease;
}
.reveal.up { opacity: 1; transform: translateY(0); }

.rev-l {
  opacity:    0;
  transform:  translateX(-38px);
  transition: opacity .85s ease, transform .85s ease;
}
.rev-l.up { opacity: 1; transform: translateX(0); }

.rev-r {
  opacity:    0;
  transform:  translateX(38px);
  transition: opacity .85s ease, transform .85s ease;
}
.rev-r.up { opacity: 1; transform: translateX(0); }


/* ══════════════════════════════════════════════════════════════
   ANIMATIONS GLOBALES
   Utilisées par plusieurs composants à travers le site.
   Modifier une animation → changer les keyframes ici.
══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes slideUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes spinRing {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}