/* Zelsync : passage au thème sombre des pages intérieures (produits, métiers, blog, FAQ, pages légales).
   Ces pages gardent leur contenu et leurs styles propres ; ce fichier, chargé après eux,
   redéfinit leurs couleurs et harmonise titres, boutons et étiquettes avec la page d'accueil. */

:root {
  /* Anciennes variables, nouvelles valeurs (fond sombre) */
  --dark:    #eaf2ee;                 /* texte principal */
  --navy:    #0b1114;                 /* bandeaux sombres */
  --navy2:   #111b1f;
  --teal-d:  #2EE6A8;                 /* texte vert sur fond teinté */
  --teal-l:  rgba(46,230,168,.10);
  --teal-p:  #9FDEC9;
  --blue-l:  rgba(74,155,234,.12);
  --gray:    #93a29c;
  --gray-l:  #6f7d77;
  --border:  rgba(255,255,255,.10);
  --bg:      #05080a;
  --white:   #0c1215;                 /* cartes et sections « blanches » */
  --red:     #E8726E;
  --red-l:   rgba(232,114,110,.12);
  --amber:   #F5C97A;
  --amber-l: rgba(245,201,122,.10);
  --accent-l: rgba(74,155,234,.12);
  --blue:    #185FA5;                 /* couleur Zeltrack de la charte (fonds, pastilles) */
}

body { background: var(--bg); color: var(--text); padding-top: 0; }

/* Titres : même typographie que l'accueil */
/* (les pages produits ont des tailles et graisses en style en ligne : d'où les !important) */
h1 { font-family: var(--display) !important; font-weight: 800 !important; letter-spacing: -.04em !important; line-height: 1.05 !important; }
h2 { font-family: var(--display) !important; font-weight: 800 !important; letter-spacing: -.03em !important; line-height: 1.12 !important; }
h3, .post-title { font-family: var(--display) !important; font-weight: 700 !important; letter-spacing: -.02em !important; }
.post-title { font-size: 21px !important; line-height: 1.2 !important; }
/* Bannière cookies : reste en police de texte */
#zc-title { font-family: var(--font) !important; font-weight: 700 !important; letter-spacing: 0 !important; }
h1 em, h2 em { font-style: normal; color: var(--neon); }

/* Liens dans le texte */
p a, li a, td a { color: var(--neon); }

/* Anciens boutons */
.btn-primary {
  background: var(--neon) !important; color: #00170e !important; border: none !important;
  box-shadow: 0 0 0 1px rgba(46,230,168,.6), 0 10px 40px -10px rgba(46,230,168,.65);
}
.btn-primary svg path { stroke: #00170e; }
.btn-primary:hover { box-shadow: 0 0 0 1px var(--neon), 0 14px 50px -8px rgba(46,230,168,.9); }
.btn-secondary { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--line2) !important; }
.btn-secondary:hover { border-color: var(--neon) !important; color: var(--neon) !important; }

/* Anciennes étiquettes */
.tag { font-family: var(--mono); font-weight: 400; letter-spacing: .12em; background: rgba(46,230,168,.06) !important; color: var(--neon) !important; border: 1px solid rgba(46,230,168,.25); }

/* Cartes et blocs bordés : bordure discrète, léger halo au survol */
[style*="border:1px solid var(--border)"], [style*="border:1.5px solid var(--border)"] { border-color: var(--line) !important; }

/* Tableaux (pages légales, comparatifs) */
table { border-color: var(--line); }
th { background: var(--surface2) !important; color: var(--text) !important; }
td, th { border-color: var(--line) !important; }

/* Champs de formulaire des anciennes pages */
input, select, textarea { background: var(--surface2); color: var(--text); border-color: var(--line2); }

::selection { background: var(--neon); color: #001a10; }

/* Sélecteur Mensuel / Annuel des pages produits */
.period-toggle { background: var(--surface) !important; box-shadow: inset 0 0 0 1px var(--line); border: none !important; }
.period-toggle-thumb { background: var(--neon) !important; box-shadow: 0 0 24px -4px var(--neon); }
.period-toggle button { color: var(--muted) !important; }
.period-toggle button[aria-pressed="true"] { color: #00170e !important; }

/* Le premier bloc des pages produits passe sous le menu flottant */
#zelquote, #zeltrack { padding-top: 130px !important; }

/* Anciens boutons principaux : le reflet reste dans le bouton */
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }

/* En-tête des pages légales sous le menu flottant */
body > header:not(.nav-wrap) { padding-top: 130px !important; }

/* Articles du blog : l'en-tête passe sous le menu flottant */
article > header { padding-top: 130px !important; }

/* Tailles des titres : la police du site est plus large que l'ancienne, on recadre */
h1 { font-size: clamp(26px, 3.1vw, 42px) !important; overflow-wrap: break-word; }
#zelquote h1, #zeltrack h1 { font-size: clamp(26px, 2.2vw, 31px) !important; }
article h1 { font-size: clamp(26px, 2.6vw, 36px) !important; }
h2 { overflow-wrap: break-word; }
@media (max-width: 560px) {
  h1, #zelquote h1, #zeltrack h1 { font-size: 25px !important; letter-spacing: -.03em !important; }
  h2 { font-size: min(22px, 6vw) !important; }
}