/* Thème « NextData » — alignement visuel de call.nextdata.ma sur ai.nextdata.ma
 * ===========================================================================
 *
 * POURQUOI CE FICHIER PLUTÔT QU'UNE RÉÉCRITURE DES PAGES
 * Chaque page porte son propre bloc `<style>` avec sa palette (`--bg`, `--panel`,
 * `--accent`…). Réécrire ces 18 blocs à la main, c'est 18 occasions de diverger,
 * et cela entrerait en collision avec les interventions concurrentes en cours sur
 * les pages légales et le tunnel d'achat. Cette feuille est donc chargée EN
 * DERNIER sur chaque page (après `legal.css` et `site.css`) et se contente de
 * REDÉFINIR les mêmes variables : à spécificité égale, la dernière déclaration
 * gagne. Les pages n'ont besoin que d'un `<link>` — posé par `deploy/nav.py`,
 * donc vérifiable par `--verifier` et par les tests.
 *
 * ⚠️ Conséquence à connaître : toute page qui déclarerait sa palette APRÈS ce
 * lien (style inline dans le `<body>`, attribut `style=`) reprendrait la main.
 * `tests/test_theme.py` vérifie l'ordre de chargement sur les 18 pages.
 *
 * SOURCE DES VALEURS — aucune n'est inventée : elles sont reprises de
 * `tailwind.config.ts` et `app/globals.css` du dépôt Next_Data_site_web_2026
 * (le site ai.nextdata.ma). Marque : orange #FF6B35, violet #8B5CF6, cyan
 * #00D9FF ; fond « deep space » #050810 ; surfaces #0C1021 / #151A2E ;
 * bordure #1E2440 ; accents néon (vert #30D158, orange #FF9F0A, rose #FF2D55).
 */

/* --- Police ---------------------------------------------------------------
 * Inter variable, sous-ensemble latin, AUTO-HÉBERGÉE (48 Ko). Pas de Google
 * Fonts : un appel à fonts.gstatic.com transmettrait l'IP du visiteur à un tiers
 * — inacceptable sur un site qui publie une politique de confidentialité
 * annonçant l'absence de traceur tiers, et discutable au regard du RGPD.
 * `font-display: swap` : le texte s'affiche immédiatement dans la police
 * système, puis bascule — jamais de page blanche si la fonte tarde. */
@font-face {
  font-family: "InterVar";
  src: url("/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;              /* fonte variable : une seule requête */
  font-style: normal;
  font-display: swap;
  /* Latin + Latin-1 Supplement + ponctuation : tout le français. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette ai.nextdata.ma, branchée sur les NOMS DE VARIABLES DÉJÀ UTILISÉS
     par les pages : le thème se propage sans toucher une seule règle existante. */
  --bg: #050810;              /* dark.bg        */
  --panel: #0C1021;           /* dark.surface   */
  --panel-2: #151A2E;         /* dark.elevated  */
  --line: #1E2440;            /* dark.border    */
  --txt: #F2F4F8;
  --muted: #B0B7C3;           /* dark.text.secondary */
  --dim: #6B7280;             /* dark.text.muted     */

  /* Interactif = cyan de marque. L'ancien bleu #7aa2f7 n'existe plus nulle part. */
  --accent: #00D9FF;

  /* Rôles sémantiques : mêmes noms qu'avant, teintes néon de la plateforme.
     `--sarah` (accueil), `--agent` (espace acheteur) et `--ok` (page de vente)
     désignent la même chose selon la page — les trois sont redéfinis. */
  --sarah: #30D158;
  --agent: #30D158;
  --ok: #30D158;
  --warn: #FF9F0A;
  --stop: #FF2D55;

  /* Marque — utilisés par les dégradés ci-dessous. */
  --brand-orange: #FF6B35;
  --brand-violet: #8B5CF6;
  --brand-cyan: #00D9FF;
  --grad-brand: linear-gradient(135deg, #FF6B35 0%, #8B5CF6 100%);
  --grad-full: linear-gradient(135deg, #FF6B35 0%, #8B5CF6 50%, #00D9FF 100%);

  /* Rayon unique (--radius: .75rem chez ai.nextdata.ma). Les pages déclarent des
     rayons en dur (.5rem à .75rem) ; ils sont réalignés bloc par bloc plus bas. */
  --radius: .75rem;
  --glass-line: rgba(255, 255, 255, .06);
  --glass-top: rgba(255, 255, 255, .08);
}

/* --- Fond « deep space » --------------------------------------------------
 * Trois halos radiaux fixes (orange, violet, cyan) posés derrière tout le
 * contenu. `position: fixed` : le fond ne défile pas, la page garde sa
 * profondeur sur toute sa hauteur sans multiplier le coût de peinture.
 * `pointer-events: none` : la couche ne doit jamais intercepter un clic. */
body {
  font-family: "InterVar", Inter, system-ui, -apple-system, "Segoe UI", Roboto,
               sans-serif;
  background: var(--bg);
  color: var(--txt);
  position: relative;
  z-index: 0;                        /* crée le contexte d'empilement */
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%, rgba(255, 107, 53, .10), transparent 70%),
    radial-gradient(ellipse 60% 40% at 88% 8%, rgba(139, 92, 246, .12), transparent 70%),
    radial-gradient(ellipse 90% 55% at 50% 105%, rgba(0, 217, 255, .07), transparent 70%);
}

/* --- Typographie ----------------------------------------------------------
 * Les pages fixent taille et interligne dans un raccourci `font:` ; seul le
 * dessin des titres est repris ici. Le dégradé de texte est posé SOUS
 * `@supports` : sans découpe d'arrière-plan, `color: transparent` rendrait le
 * titre INVISIBLE — un titre absent est pire qu'un titre monochrome. */
h1 {
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--txt);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1 {
    background: var(--grad-full);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    /* Le dégradé traverse les descendantes ; sans cela un `<span>` coloré
       dans un h1 reprendrait sa propre couleur au milieu du dégradé. */
    width: fit-content;
    max-width: 100%;
  }
}

h2, h3 { font-weight: 650; letter-spacing: -.01em; color: var(--txt); }

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { color: #7CE9FF; }

/* --- Surfaces vitrées -----------------------------------------------------
 * `.glass-panel` d'ai.nextdata.ma, appliqué aux conteneurs déjà nommés par les
 * pages. Le `backdrop-filter` est un ENRICHISSEMENT : les navigateurs qui ne le
 * gèrent pas conservent le fond opaque `--panel`, parfaitement lisible. */
.note, .card, .phone, .chat, .bar, .msg, .garantie, .sous, .badge, .pill,
input[type=text], .grid > div {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, .035) 0%,
                                            rgba(255, 255, 255, .008) 100%);
  border-color: var(--glass-line);
}

.note, .card, .phone, .chat, .bar, .msg, .garantie {
  border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .35),
              inset 0 1px 0 var(--glass-top);
}

/* Les cartes de chiffres (accueil) et de formules (page de vente) réagissent au
   survol : c'est le seul mouvement de la plateforme sur un élément non
   cliquable, il signale qu'une carte est une unité de lecture. */
.card {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 217, 255, .28);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45),
              0 0 30px rgba(0, 217, 255, .10),
              inset 0 1px 0 var(--glass-top);
}

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover { transition: none; transform: none; }
}

/* Valeur chiffrée d'une carte (« ≈ 335 ms », « 209 ») en dégradé de marque :
   c'est l'information que l'œil doit trouver en premier. */
.card .v {
  font-weight: 700;
  letter-spacing: -.02em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .card .v {
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Encadrés d'information : le liseré gauche devient un dégradé vertical. */
.note, .msg { border-left-width: 3px; }
.garantie { border-left: 3px solid var(--sarah); }

/* --- Boutons --------------------------------------------------------------
 * Deux niveaux, comme sur la plateforme : action principale en dégradé plein
 * (une seule par écran), tout le reste en verre bordé de cyan. */
.btn, button, .tab {
  border-radius: .6rem;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn:hover, button:hover:not(:disabled), .tab:hover {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(0, 217, 255, .22);
}

/* Action principale : le bouton d'abonnement des cartes de la page de vente.
   Ciblé finement — `[aria-disabled]` marque une formule NON vendable, qui doit
   rester visiblement éteinte (invariant de prix : ne jamais donner à cliquer ce
   qui ne facture rien). */
.card .btn:not([aria-disabled="true"]) {
  background: var(--grad-brand);
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 0 20px rgba(255, 107, 53, .25);
}

.card .btn:not([aria-disabled="true"]):hover {
  box-shadow: 0 0 30px rgba(255, 107, 53, .45), 0 0 60px rgba(139, 92, 246, .18);
}

.btn[aria-disabled="true"] { background: none; }

.tab[aria-selected="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(0, 217, 255, .35), 0 0 18px rgba(0, 217, 255, .12);
}

/* --- Conversation ---------------------------------------------------------
 * Les répliques de l'agent portent le vert néon de la plateforme ; la bordure
 * verte codée en dur (#28402f) dans les pages est neutralisée ici. */
.line.sarah .bubble, .line.agent .bubble {
  border-color: rgba(48, 209, 88, .32);
  background-image: linear-gradient(135deg, rgba(48, 209, 88, .06) 0%,
                                            rgba(48, 209, 88, .015) 100%);
}

.bubble { border-radius: .65rem; }

/* --- Barre de navigation --------------------------------------------------
 * Collante et floutée, comme l'en-tête d'ai.nextdata.ma. La marge de défilement
 * des ancres est augmentée d'autant : sans cela, `/#demo` amènerait le titre
 * SOUS la barre collante, invisible. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(5, 8, 16, .72);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--line);
  font-family: inherit;
}

:target { scroll-margin-top: 4.5rem; }

.site-nav .marque { color: var(--txt); font-weight: 700; }
.site-nav .marque .accent { color: var(--brand-cyan); }

/* Page courante : soulignement en dégradé de marque plutôt qu'un trait bleu. */
.site-nav .liens a[aria-current="page"],
.site-nav .groupe > summary.courant {
  color: var(--txt);
  box-shadow: none;
  background-image: var(--grad-brand);
  background-repeat: no-repeat;
  background-size: calc(100% - 1.1rem) 2px;
  background-position: bottom .1rem center;
}

.site-nav .liens a:hover,
.site-nav .liens a:focus-visible,
.site-nav .groupe > summary:hover,
.site-nav .groupe > summary:focus-visible { color: var(--accent); }

/* Appel à l'action de la barre : pastille en dégradé plein. */
.site-nav a.abo {
  background: var(--grad-brand);
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 600;
}

.site-nav a.abo:hover,
.site-nav a.abo:focus-visible {
  background: var(--grad-brand);
  box-shadow: 0 0 22px rgba(255, 107, 53, .35);
}

.site-nav a.abo[aria-current="page"] {
  background: var(--grad-brand);
  background-size: auto;
  color: #FFFFFF;
}

.site-nav .groupe[open] > summary { background: var(--panel-2); color: var(--txt); }
.site-nav .sous { background: rgba(12, 16, 33, .96); border-color: var(--line); }
.site-nav .sous a:hover, .site-nav .sous a:focus-visible { background: var(--panel-2); }

/* Dans le panneau compact, le soulignement dégradé traverserait la largeur :
   la page courante y est marquée sur le bord gauche (règle d'origine conservée,
   il faut donc neutraliser le fond dégradé hérité ci-dessus). */
@media (max-width: 46rem) {
  .site-nav.js .liens a[aria-current="page"] {
    background-image: none;
    box-shadow: inset 2px 0 0 var(--brand-orange);
  }
  .site-nav.js a.abo[aria-current="page"],
  .site-nav.js a.abo { background-image: var(--grad-brand); box-shadow: none; }
}

/* --- Focus ----------------------------------------------------------------
 * Un seul anneau, cyan, partout. Les pages en déclarent déjà — cette règle les
 * aligne sans les supprimer (une suppression d'`outline` casserait la
 * navigation au clavier). */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, .btn:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type=text]:focus { border-color: var(--accent); }

/* --- Séparateurs et pied de page ------------------------------------------ */
footer, .clause, .scenario-desc, nav.legal { border-color: var(--line); }

.clause { color: var(--muted); }
.clause h2 { color: var(--txt); }

/* Tableaux des pages légales. */
th { background: var(--panel); color: var(--muted); }
th, td { border-color: var(--line); }

/* --- Barre de défilement --------------------------------------------------
 * Reprise à l'identique d'`app/globals.css` : c'est un détail, mais c'est
 * exactement le genre de détail qui fait reconnaître un produit. */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00F0FF, #BF5AF2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #00F0FF, #FF2D55); }

/* Firefox — pas de dégradé possible, on prend la teinte médiane. */
* { scrollbar-color: #6FA8E8 var(--bg); scrollbar-width: thin; }

::selection { background: rgba(139, 92, 246, .45); color: #FFFFFF; }

/* --- Écriture de droite à gauche (arabe) -----------------------------------
 * Ajouté le 2026-07-31 avec la version arabe du site. Le reste de la feuille
 * est écrit en logique gauche-droite : plutôt que de la réécrire en propriétés
 * logiques — un remaniement qui toucherait toutes les pages et qu'aucun test
 * ne couvrirait — on retourne ici les quelques règles réellement directionnelles.
 *
 * ⚠️ La police Inter ne contient PAS l'arabe : sans pile de repli explicite, le
 * navigateur choisirait seul, et le rendu changerait d'une machine à l'autre. */
/* ⚠️ `[dir="rtl"] body` et pas `[dir="rtl"]` seul : la règle `body { font-family:
   "InterVar" … }` plus haut est plus spécifique qu'un sélecteur d'attribut posé
   sur `<html>`, et l'emportait. Le corps de page restait donc en Inter — une
   police SANS glyphes arabes, où chaque caractère tombait dans un repli choisi
   par le navigateur, donc différent d'une machine à l'autre. */
[dir="rtl"], [dir="rtl"] body {
  font-family: "Noto Naskh Arabic", "Noto Sans Arabic", "Amiri", "Geeza Pro",
               "Segoe UI", "Tahoma", sans-serif;
  /* L'arabe a besoin d'un peu d'air : ses hampes et ses points descendent
     plus bas que ceux de l'alphabet latin. */
  line-height: 1.85;
}

/* La marque et le nom de domaine restent en latin, donc en LTR : « call.
   nextdata.ma » lu de droite à gauche deviendrait illisible. */
[dir="rtl"] .site-nav .marque,
[dir="rtl"] code,
[dir="rtl"] .vsl-piste .meta,
[dir="rtl"] audio { direction: ltr; }

[dir="rtl"] .site-nav .marque { margin-right: 0; margin-left: auto; }

[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.15rem; }

/* Les encadrés portent leur liseré à gauche : à droite, il se retrouverait au
   milieu du texte pour un lecteur arabophone. */
[dir="rtl"] .note, [dir="rtl"] .msg, [dir="rtl"] .garantie, [dir="rtl"] .evt {
  border-left-width: 1px;
  border-right: 3px solid currentColor;
  padding-left: 1rem;
  padding-right: 1rem;
}
[dir="rtl"] .note, [dir="rtl"] .msg { border-right-color: var(--warn); }
[dir="rtl"] .garantie { border-right-color: var(--sarah); }

[dir="rtl"] .site-nav .sous { right: auto; left: 0; }
[dir="rtl"] .site-nav .groupe > summary::after { margin-left: 0; margin-right: auto; }

@media (max-width: 46rem) {
  [dir="rtl"] .site-nav.js .liens a[aria-current="page"] {
    box-shadow: inset -2px 0 0 var(--brand-orange);
  }
  [dir="rtl"] .site-nav.js .sous {
    border-left: 0;
    border-right: 1px solid var(--line);
    margin: .1rem .55rem .35rem 0;
    padding: .1rem .5rem .1rem 0;
  }
}

/* Tableaux et titres : l'alignement suit le sens d'écriture. */
[dir="rtl"] th, [dir="rtl"] td { text-align: right; }
