/* =====================================================================
   nsrstud. — design system (v2 : rouge, noir, blanc titane)
   À copier dans chaque site nsrstud. Les démos clients ont leur propre identité.
   Contrastes vérifiés (WCAG) :
     titane #E6E7E8 sur noir #0A0A0B ........ 16:1   (tout texte)
     rouge #C8102E sur noir ................. 3,4:1  (grands titres seulement, ≥ 24 px)
     blanc sur rouge #C8102E ................ 5,9:1  (boutons OK)
     rouge #C8102E sur titane ............... 4,7:1  (tout texte)
     variante #E10600 : 4,0:1 sur noir, 5,0:1 sous texte blanc, 4,0:1 sur titane
   ===================================================================== */

:root {
  /* --- Couleurs de marque --- */
  --noir: #0a0a0b;
  --titane: #e6e7e8;
  --rouge: #c8102e;            /* rouge luxe (par défaut) */
  --rouge-course: #e10600;     /* variante « course », à choisir à la place de --rouge */
  --rouge-press: #a50d26;      /* état appuyé / survol des boutons rouges */

  /* --- Surfaces sombres (du fond vers l'avant) --- */
  --surface-0: #0a0a0b;        /* fond de page */
  --surface-1: #111113;        /* bandes, sections alternées */
  --surface-2: #17171a;        /* cartes */
  --surface-3: #1f1f23;        /* cartes au survol, champs */

  /* --- Texte sur noir --- */
  --texte: #e6e7e8;
  --texte-2: rgba(230, 231, 232, .72);  /* paragraphes secondaires (8,3:1) */
  --texte-3: rgba(230, 231, 232, .54);  /* mentions, légendes (4,8:1) */

  /* --- Texte sur titane --- */
  --encre: #0a0a0b;
  --encre-2: rgba(10, 10, 11, .70);

  /* --- Filets et bords --- */
  --filet: rgba(230, 231, 232, .10);
  --filet-fort: rgba(230, 231, 232, .22);
  --bord-titane: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .04) 40%, rgba(255, 255, 255, .12));

  /* --- Titane : dégradé métallique (titres géants, logo) --- */
  --titane-degrade: linear-gradient(176deg, #fbfbfc 0%, #e6e7e8 34%, #b7bbc0 50%, #e9eaeb 66%, #c4c7cb 100%);
  --titane-brosse: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, .035) 1px 2px, transparent 2px 4px);

  /* --- Typographie --- */
  --font-display: "Instrument Serif", "Bodoni Moda", Georgia, serif;   /* option A ; option B : "Bodoni Moda" */
  --font-texte: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-chiffres: "Geist", "Helvetica Neue", Arial, sans-serif;      /* grands compteurs : Geist Light, chiffres à largeur fixe */
  --font-technique: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* petites mentions techniques */

  --t-geant: clamp(64px, 16vw, 240px);   /* slogan, noms de produit */
  --t-1: clamp(48px, 9vw, 128px);        /* titres de section */
  --t-2: clamp(36px, 5.6vw, 72px);
  --t-3: clamp(26px, 3.2vw, 40px);
  --t-chiffre: clamp(72px, 14vw, 200px); /* « 7 jours », « 24 h » */
  --t-lead: clamp(19px, 1.6vw, 23px);
  --t-texte: 17px;
  --t-petit: 14px;
  --t-micro: 12px;                       /* sur-titres en capitales */
  --interlettre-geant: -.035em;
  --interlettre-titre: -.02em;
  --interlettre-micro: .18em;

  /* --- Espacements (base 4 / 8) --- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px; --e-5: 24px;
  --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px; --e-10: 128px; --e-11: 192px;
  --gouttiere: clamp(20px, 5vw, 80px);
  --section: clamp(96px, 14vw, 200px);
  --largeur: 1280px;

  /* --- Rayons --- */
  --r-1: 10px; --r-2: 18px; --r-3: 28px; --r-pilule: 999px;

  /* --- Ombres (profondeur, jamais de lueur colorée) --- */
  --ombre-1: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 10px 30px -12px rgba(0, 0, 0, .7);
  --ombre-2: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 40px 80px -30px rgba(0, 0, 0, .85);
  --ombre-produit: 0 60px 120px -40px rgba(0, 0, 0, .9), 0 30px 60px -30px rgba(0, 0, 0, .6);

  /* --- Mouvement (premium = lent et doux) --- */
  --ease-sortie: cubic-bezier(.16, 1, .3, 1);
  --ease-douce: cubic-bezier(.65, 0, .35, 1);
  --d-1: 200ms; --d-2: 450ms; --d-3: 800ms; --d-4: 1200ms;
}

/* Option B (Bodoni Moda) : <html data-logo="bodoni"> */
:root[data-logo="bodoni"] { --font-display: "Bodoni Moda", "Instrument Serif", Georgia, serif; }
/* Variante rouge course : <html data-rouge="course"> */
:root[data-rouge="course"] { --rouge: #e10600; --rouge-press: #b80500; }

/* =====================================================================
   Recettes
   ===================================================================== */

/* Noir jamais plat : lumière douce venue d'en haut + vignette + grain */
.fond-studio {
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(230, 231, 232, .10), transparent 60%),
    radial-gradient(80% 60% at 50% 120%, rgba(0, 0, 0, .9), transparent 70%),
    var(--surface-0);
}
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Titane brossé sur un texte (titres géants, logo) */
.titane {
  background-image: var(--titane-brosse), var(--titane-degrade);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Mot clé en rouge dans un titre (grands titres uniquement) */
.mot-rouge { color: var(--rouge); font-style: italic; }

/* Logo : seul le point est rouge */
.logo { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: -.01em; line-height: 1; }
.logo .point { color: var(--rouge); -webkit-text-fill-color: var(--rouge); }

/* Sur-titre */
.surtitre { font: 500 var(--t-micro)/1 var(--font-texte); letter-spacing: var(--interlettre-micro); text-transform: uppercase; color: var(--texte-3); }

/* Boutons */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--r-pilule); border: 0; cursor: pointer;
  font: 500 16px/1 var(--font-texte); letter-spacing: -.005em; text-decoration: none;
  transition: background-color var(--d-1) ease, transform var(--d-1) ease, box-shadow var(--d-2) var(--ease-sortie);
}
.bouton:active { transform: scale(.98); }
.bouton-rouge { background: var(--rouge); color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset, 0 12px 30px -14px rgba(0, 0, 0, .9); }
.bouton-rouge:hover { background: var(--rouge-press); }
.bouton-titane { background: var(--titane); color: var(--noir); box-shadow: 0 1px 0 #fff inset; }
.bouton-titane:hover { background: #fff; }
.bouton-contour { color: var(--texte); background: transparent; box-shadow: 0 0 0 1px var(--filet-fort) inset; }
.bouton-contour:hover { box-shadow: 0 0 0 1px var(--texte) inset; }
.bouton:focus-visible { outline: 2px solid var(--titane); outline-offset: 3px; }

/* Carte « surface métal » : bord titane de 1 px, lumière en haut */
.carte {
  position: relative; border-radius: var(--r-3); padding: var(--e-6);
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01) 40%), var(--surface-2);
  box-shadow: var(--ombre-1);
}
.carte::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--bord-titane);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Étiquette « Exemple » des démos */
.etiquette { display: inline-flex; padding: 4px 10px; border-radius: var(--r-pilule); font: 500 12px/1.4 var(--font-texte); letter-spacing: .12em; text-transform: uppercase; color: var(--texte); box-shadow: 0 0 0 1px var(--filet-fort) inset; }

/* Chiffres animés */
.chiffre { font-family: var(--font-chiffres); font-weight: 300; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: -.045em; }

/* Petits téléphones : boutons sur une ligne */
@media (max-width: 420px) {
  .bouton { padding: 0 18px; font-size: 15px; gap: 8px; }
  .carte { padding: var(--e-5); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; --d-4: 0ms; }
}