/* ============================================================================
   NS DIGITAL SERVICES — Feuille de style principale
   ----------------------------------------------------------------------------
   Ordre du fichier :
     1. Variables (charte graphique officielle, espacements, typographie…)
     2. Reset et base
     3. Typographie
     4. Mise en page (conteneurs, grilles, sections)
     5. Composants (boutons, cartes, badges, formulaires, tableaux)
     6. En-tête et pied de page
     7. Utilitaires

   Le responsive vit dans responsive.css, l'administration dans admin.css.
   Toute couleur, tout espacement et tout rayon doivent passer par une variable :
   ne jamais écrire une valeur littérale dans un composant.
   ========================================================================== */

/* ── 1. Variables ────────────────────────────────────────────────────────── */
:root {
  /* Couleurs de marque — charte officielle NS Digital Services */
  --ns-blue:            #1878F8;   /* bleu principal, boutons et liens        */
  --ns-blue-dark:       #1156B3;   /* survol des boutons bleus                */
  --ns-blue-deep:       #16069B;   /* dégradés et fonds profonds              */
  --ns-blue-tint:       #E8F2FE;   /* fonds de badges bleus                   */
  --ns-red:             #F80000;   /* accent rouge de la charte               */
  --ns-red-dark:        #B30000;
  --ns-red-tint:        #FEE6E6;
  --ns-orange:          #F84000;   /* accent orange, sur-titres               */
  --ns-orange-dark:     #B32E00;
  --ns-orange-tint:     #FEECE6;

  /* Neutres */
  --ns-ink:             #111827;   /* texte principal et fonds sombres        */
  --ns-ink-soft:        #4B5563;   /* texte secondaire                        */
  --ns-ink-muted:       #8A93A3;   /* légendes, métadonnées                   */
  --ns-line:            #E7E8EC;   /* bordures                                */
  --ns-line-soft:       #F0F1F4;   /* séparateurs internes                    */
  --ns-paper:           #FFFFFF;   /* fond des cartes                         */
  --ns-paper-alt:       #F7F8FA;   /* fond des sections alternées             */
  --ns-night:           #0B1220;   /* réservé aux overlays                    */

  /* Surface d'accent — remplace l'ancien fond bleu nuit sur toutes les
     sections pleines (statistiques, magazine, formations, outils, connexion).
     Sur cette surface : titres en blanc, textes en --ns-on-flame.            */
  --ns-flame:           #FF624D;   /* rgb(255, 98, 77)                        */
  --ns-flame-soft:      #FF7C6A;   /* cartes internes                         */
  --ns-flame-deep:      #E8523E;   /* survols et fonds appuyés                */
  --ns-flame-line:      #FFA595;   /* bordures et séparateurs                 */
  --ns-on-flame:        #40100A;   /* tout le texte — contraste 5,7:1         */
  /* Le blanc ne passe qu'à 2,96:1 sur cette surface : le réserver aux éléments
     posés sur une pastille --ns-flame-deep (5,9:1) ou sur une photo.          */

  /* États */
  --ns-success:         #0F8A3F;
  --ns-success-tint:    #E9F7EF;
  --ns-warning:         #8A6A00;
  --ns-warning-tint:    #FEF6DC;
  --ns-whatsapp:        #25D366;

  /* Typographie */
  --ns-font-title: 'Poppins', system-ui, sans-serif;
  --ns-font-body:  'Inter', system-ui, sans-serif;
  --ns-font-mono:  'JetBrains Mono', ui-monospace, monospace;

  --ns-text-xs:   11px;
  --ns-text-sm:   13px;
  --ns-text-base: 15px;
  --ns-text-md:   17px;
  --ns-text-lg:   clamp(20px, 2.4vw, 26px);
  --ns-text-xl:   clamp(24px, 3vw, 36px);
  --ns-text-2xl:  clamp(30px, 4.6vw, 52px);

  --ns-leading-tight: 1.15;
  --ns-leading-body:  1.65;

  /* Espacements — échelle de 4 px */
  --ns-space-1: 4px;
  --ns-space-2: 8px;
  --ns-space-3: 12px;
  --ns-space-4: 16px;
  --ns-space-5: 22px;
  --ns-space-6: 30px;
  --ns-space-7: 40px;
  --ns-space-8: 56px;
  --ns-section-y: clamp(40px, 5vw, 84px);
  --ns-gutter:    clamp(18px, 5vw, 56px);
  --ns-container: 1240px;

  /* Rayons */
  --ns-radius-sm:   8px;
  --ns-radius-md:   12px;
  --ns-radius-lg:   18px;
  --ns-radius-xl:   26px;
  --ns-radius-pill: 999px;

  /* Ombres — discrètes, conformément à la direction artistique */
  --ns-shadow-sm: 0 2px 6px rgba(17, 24, 39, .05);
  --ns-shadow-md: 0 14px 34px rgba(17, 24, 39, .08);
  --ns-shadow-lg: 0 28px 56px rgba(17, 24, 39, .14);
  --ns-shadow-blue: 0 10px 26px rgba(24, 120, 248, .28);

  /* Transitions */
  --ns-ease:       cubic-bezier(.22, .61, .36, 1);
  --ns-transition: .22s var(--ns-ease);
  --ns-reveal:     .7s ease;

  /* Épaisseurs d'empilement */
  --ns-z-header:  40;
  --ns-z-overlay: 90;
  --ns-z-toast:   120;
}

/* ── 2. Reset et base ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;              /* empêche le thème sombre du navigateur
                                       d'inverser le fond des champs          */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ns-paper);
  color: var(--ns-ink);
  font-family: var(--ns-font-body);
  font-size: var(--ns-text-base);
  line-height: var(--ns-leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;               /* garantit l'absence de débordement      */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
img { object-fit: cover; }

a { color: var(--ns-blue-dark); text-decoration: none; transition: color var(--ns-transition); }
a:hover { color: var(--ns-blue); }

button { font: inherit; }

:focus-visible { outline: 2px solid var(--ns-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 3. Typographie ──────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--ns-font-title);
  letter-spacing: -.02em;
  line-height: var(--ns-leading-tight);
  color: var(--ns-ink);
  margin: 0 0 var(--ns-space-4);
  text-wrap: pretty;
}
h1 { font-size: var(--ns-text-2xl); font-weight: 800; letter-spacing: -.025em; }
h2 { font-size: var(--ns-text-xl);  font-weight: 800; }
h3 { font-size: var(--ns-text-md);  font-weight: 700; }
p  { margin: 0 0 var(--ns-space-4); }

/* Sur-titre orange présent au-dessus de chaque titre de section */
.ns-eyebrow {
  font-family: var(--ns-font-mono);
  font-size: var(--ns-text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ns-orange);
  margin-bottom: var(--ns-space-3);
}
.ns-lead { font-size: var(--ns-text-md); color: var(--ns-ink-soft); }
.ns-meta { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-ink-muted); }

/* ── 4. Mise en page ─────────────────────────────────────────────────────── */
.ns-container { width: 100%; max-width: var(--ns-container); margin-inline: auto; padding-inline: var(--ns-gutter); }
.ns-section   { padding-block: var(--ns-section-y); }
.ns-section--alt  { background: var(--ns-paper-alt); border-block: 1px solid var(--ns-line); }
/* Section pleine couleur. Les titres restent blancs (gros et gras : contraste
   suffisant), le texte courant passe en brun profond pour rester lisible. */
.ns-section--flame { background: var(--ns-flame); color: var(--ns-on-flame); }
.ns-section--flame h2, .ns-section--flame h3 { color: var(--ns-on-flame); }
.ns-section--flame .ns-eyebrow { color: var(--ns-on-flame); }
.ns-section--flame .ns-meta { color: var(--ns-on-flame); }
.ns-section--flame .ns-card { background: var(--ns-flame-soft); border-color: var(--ns-flame-line); }
.ns-section--flame .ns-btn--ghost { background: transparent; color: var(--ns-on-flame); border-color: var(--ns-on-flame); }

.ns-section--dark { background: var(--ns-ink); color: #FFFFFF; }
.ns-section--dark h2, .ns-section--dark h3 { color: #FFFFFF; }

/* Grille auto-adaptative : le nombre de colonnes suit la largeur disponible,
   ce qui évite d'écrire des points de rupture pour chaque grille du site. */
.ns-grid { display: grid; gap: var(--ns-space-5); }
.ns-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ns-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ns-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ns-cluster { display: flex; flex-wrap: wrap; gap: var(--ns-space-3); }
.ns-stack > * + * { margin-top: var(--ns-space-4); }

/* ── 5. Composants ───────────────────────────────────────────────────────── */

/* Boutons */
.ns-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ns-space-2);
  font-family: var(--ns-font-body); font-size: var(--ns-text-base); font-weight: 600;
  border: 1px solid transparent; border-radius: var(--ns-radius-md);
  padding: 15px 26px; min-height: 48px;          /* cible tactile confortable */
  cursor: pointer; white-space: nowrap;
  transition: background var(--ns-transition), transform var(--ns-transition), border-color var(--ns-transition);
}
.ns-btn:disabled { opacity: .65; cursor: default; }
.ns-btn--primary { background: var(--ns-blue); color: #FFFFFF; box-shadow: var(--ns-shadow-blue); }
.ns-btn--primary:hover:not(:disabled) { background: var(--ns-blue-dark); transform: translateY(-2px); color: #FFFFFF; }
.ns-btn--ghost { background: var(--ns-paper); color: var(--ns-ink); border-color: var(--ns-line); }
.ns-btn--ghost:hover { border-color: var(--ns-blue); color: var(--ns-blue-dark); }
.ns-btn--accent { background: var(--ns-red); color: #FFFFFF; }
.ns-btn--accent:hover { background: var(--ns-red-dark); color: #FFFFFF; }
.ns-btn--whatsapp { background: var(--ns-whatsapp); color: #FFFFFF; }
.ns-btn--block { width: 100%; }

/* Cartes */
.ns-card {
  background: var(--ns-paper); border: 1px solid var(--ns-line);
  border-radius: var(--ns-radius-lg); overflow: hidden;
  box-shadow: var(--ns-shadow-sm);
  transition: transform var(--ns-transition), box-shadow var(--ns-transition), border-color var(--ns-transition);
}
.ns-card--link:hover { transform: translateY(-4px); box-shadow: var(--ns-shadow-lg); border-color: #D5D8DF; }
.ns-card__media { position: relative; overflow: hidden; background: var(--ns-ink); }
.ns-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ns-card__body { padding: var(--ns-space-5); }

/* Badges et pastilles */
.ns-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ns-font-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--ns-radius-pill);
  background: var(--ns-blue-tint); color: var(--ns-blue-dark);
}
.ns-badge--warn    { background: var(--ns-warning-tint); color: var(--ns-warning); }
.ns-badge--success { background: var(--ns-success-tint); color: var(--ns-success); }
.ns-badge--accent  { background: var(--ns-orange-tint);  color: var(--ns-orange-dark); }

/* Formulaires — background explicite obligatoire (thème sombre navigateur) */
.ns-field { margin-bottom: var(--ns-space-4); }
.ns-label { display: block; font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-ink-soft); margin-bottom: 7px; }
.ns-input, .ns-textarea, .ns-select {
  width: 100%;
  font-family: var(--ns-font-body); font-size: 14.5px; color: var(--ns-ink);
  background: var(--ns-paper);
  border: 1px solid var(--ns-line); border-radius: var(--ns-radius-md);
  padding: 13px 15px; outline: none;
  transition: border-color var(--ns-transition), box-shadow var(--ns-transition);
}
.ns-input:focus, .ns-textarea:focus, .ns-select:focus {
  border-color: var(--ns-blue); box-shadow: 0 0 0 3px rgba(24, 120, 248, .12);
}
.ns-textarea { resize: vertical; min-height: 120px; line-height: var(--ns-leading-body); }
.ns-help { font-size: 12px; color: var(--ns-ink-muted); margin-top: var(--ns-space-2); }

/* Pot de miel anti-robot : jamais visible, jamais supprimé (voir forms.js) */
.ns-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Retour d'envoi affiché sous le formulaire */
.ns-feedback { display: none; margin-top: var(--ns-space-4); border-radius: var(--ns-radius-md); padding: 14px 16px; font-size: 13.5px; }
.ns-feedback--ok  { display: block; background: var(--ns-success-tint); color: var(--ns-success); border: 1px solid #BFE7CE; }
.ns-feedback--ko  { display: block; background: var(--ns-red-tint);     color: var(--ns-red-dark); border: 1px solid #F8C7C7; }

/* Tableaux — défilement horizontal plutôt que compression illisible */
.ns-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ns-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ns-table th {
  text-align: left; background: var(--ns-paper-alt);
  font-family: var(--ns-font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500; color: var(--ns-ink-muted);
  padding: 14px 24px; border-bottom: 1px solid var(--ns-line); white-space: nowrap;
}
.ns-table td { padding: 16px 24px; border-bottom: 1px solid var(--ns-line); font-size: 13.5px; }
.ns-table tbody tr:hover { background: #F7FAFF; }

/* Apparition au défilement — pilotée par js/animations.js */
.ns-reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--ns-reveal), transform var(--ns-reveal); }
.ns-reveal.is-visible { opacity: 1; transform: none; }

/* ── 6. En-tête et pied de page ──────────────────────────────────────────── */
.ns-header {
  position: sticky; top: 0; z-index: var(--ns-z-header);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ns-line);
}
.ns-header__inner { display: flex; align-items: center; gap: var(--ns-space-6); padding-block: 14px; }
.ns-logo { display: flex; align-items: center; gap: var(--ns-space-3); flex-shrink: 0; }
.ns-logo img { height: 38px; width: auto; }
.ns-nav { display: flex; gap: var(--ns-space-5); flex: 1; flex-wrap: wrap; }
.ns-nav a { font-size: 14px; font-weight: 500; color: var(--ns-ink-soft); }
.ns-nav a[aria-current="page"] { font-weight: 700; color: var(--ns-ink); }
.ns-burger { display: none; width: 44px; height: 44px; border: 1px solid var(--ns-line); border-radius: var(--ns-radius-md); background: var(--ns-paper); cursor: pointer; }

.ns-footer { background: var(--ns-flame); color: var(--ns-on-flame); padding-block: var(--ns-section-y) var(--ns-space-6); }
.ns-footer a { color: var(--ns-on-flame); }
.ns-footer a:hover { color: #FFFFFF; }
.ns-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--ns-space-7); padding-bottom: var(--ns-space-7); border-bottom: 1px solid var(--ns-flame-line); }
.ns-footer__legal { display: flex; justify-content: space-between; gap: var(--ns-space-4); flex-wrap: wrap; padding-top: var(--ns-space-5); font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-on-flame); }

/* Bouton WhatsApp flottant */
.ns-whatsapp-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: var(--ns-z-toast);
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--ns-whatsapp); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 28px rgba(37, 211, 102, .4);
}

/* ── 7. Utilitaires ──────────────────────────────────────────────────────── */
.ns-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ns-text-center { text-align: center; }
.ns-mt-0 { margin-top: 0; }
.ns-mb-0 { margin-bottom: 0; }