/* ═══════════════════════════════════════════════
   TALKIFY - MODE JOUR
   Charge APRES style.css. Aucune ligne de style.css n'est modifiee.

   Pourquoi un fichier separe plutot qu'une refonte des jetons : le mode
   sombre doit rester identique au pixel. Ici il l'est par construction,
   puisque rien de ce qui le produit n'est touche. Retirer le mode jour se
   fait en supprimant une balise link.

   Aucune couleur n'est inventee. Tout vient de l'identite creme deja en
   production sur les emails et les pages de campagne :
     encre #14140F   attenue #6F6B65   attenue clair #A8A39C
     creme #FAF7F2   surface #FFFFFF   filet #ECE8E1
   Les deux accents gardent leur teinte (26 deg et 347 deg) et changent de
   luminosite, parce qu'ils avaient ete choisis pour etre PLUS CLAIRS que le
   fond. Sur creme, l'ambre d'origine tombe a 1,89 de contraste : il ne pose
   plus de lumiere, il pose de la salete.
   ═══════════════════════════════════════════════ */

:root[data-theme="light"] {
  --bg: #FAF7F2;          /* creme. Texte sur fond : 16,95 en sombre, 17,29 ici */
  --bg-mid: #FFFFFF;
  --text: #14140F;
  --muted: #6F6B65;       /* 4,95 sur creme, contre 4,74 pour l'attenue sombre */
  --accent-start: #CF6A1B;  /* meme teinte que #FEA062, 1,89 -> 3,43 */
  --accent-end: #E64265;    /* meme teinte que #F45E7C, 2,92 -> 3,69 */
  --gradient: linear-gradient(135deg, #CF6A1B, #E64265);
  /* Le mot au centre de la colonne du CTA gagne en presence en FONCANT, pas en
     eclaircissant. C'est le meme raisonnement que la gamme assombrie juste
     au-dessus : eclaircir un corail pose sur de la creme le rapproche du
     papier. Mesure sur les pixels rendus : 2,64 avec l'eclat de nuit,
     4,63 avec celui-ci, pour un plancher de 3 sur du tres gros texte. */
  --cta-eclat: 0.86;
  color-scheme: light;

  /* Jetons propres au mode jour */
  --surface: #FFFFFF;
  --rule: #ECE8E1;
  --rule-fort: #DCD6CB;
  /* Les ilots sombres ne sont pas reinterpretes : ce sont EXACTEMENT ceux du
     mode nuit. Le pied de page est noir pur, comme en sombre, et son
     filigrane garde sa valeur d'origine. Un noir encre a cote d'un noir pur
     ne se lit pas comme une nuance, il se lit comme une erreur. */
  --void: #000000;
  --void-filet: #1a1a1a;
  --creux: #F3F0EA;       /* bande en retrait : milieu exact de la creme et du filet */
  /* Deux ombres, parce que deux roles.
     La carte est POSEE sur la page : decalage court, flou court. C'etait le
     decalage de 30px qui donnait l'impression d'une grosse ombre, pas
     l'opacite : une tache qui tombe 30px plus bas se lit comme un objet qui
     flotte, meme tres pale.
     Le telephone, lui, est un OBJET pose sur une table : il garde sa chute. */
  --ombre: 0 4px 12px -6px rgba(20, 20, 15, .10), 0 1px 2px rgba(20, 20, 15, .04);
  --ombre-objet: 0 30px 70px -34px rgba(20, 20, 15, .30), 0 2px 6px rgba(20, 20, 15, .04);
}

/* ── Barre de navigation ──────────────────────── */
/* .78 et non .72 : sous un voile clair, le texte sombre de la page remonte
   davantage. Six points d'opacite en plus rendent la meme separation percue. */
:root[data-theme="light"] .nav--scrolled {
  background: rgba(250, 247, 242, .78);
  border-bottom: 1px solid rgba(20, 20, 15, .07);
}
:root[data-theme="light"] .nav__logo { color: var(--text); }

/* ── Boutons ──────────────────────────────────── */
/* Les peaux ne parlent qu'en jetons : l'encre s'inverse toute seule, creme sur
   noir la nuit et noir sur creme le jour, sans une regle de plus. L'ancienne
   surcharge figeait le degrade sur TOUS les boutons, y compris ceux qui n'ont
   plus le droit d'etre colores.

   Deux jetons changent de valeur ici.
   Le filet, qui a 37 % de creme serait invisible sur du creme.
   Et l'encre du bouton du hero, qui passe au blanc. Choix du proprietaire,
   pris en connaissance du chiffre : sur l'ambre le blanc tombe a 2,02, la ou
   l'encre sombre monte a 9,17. C'est le bouton d'origine du site, celui de
   toutes ses captures, et c'est la seule difference qui reste entre le bouton
   du jour et celui de la nuit.
   Le FOND, lui, ne bouge pas d'un mode a l'autre. Il ne suit pas --gradient,
   assombri plus haut pour que le degrade reste lisible en TEXTE sur la creme :
   il tient sa couleur de --cta-fond, declaree une seule fois dans style.css. */
:root[data-theme="light"] {
  --filet-btn: rgba(20, 20, 15, .37);
  --cta-encre: #FFFFFF;
}

/* ── Menu plein ecran : ilot sombre, inchange ─── */
:root[data-theme="light"] .mobile-menu { background: var(--void); }

/* ── Hero ─────────────────────────────────────── */
/* La physique s'inverse. Une lueur ambre a faible opacite sur du noir
   ECLAIRCIT le fond ; la meme recette sur creme l'ASSOMBRIT, parce que
   l'ambre est plus sombre que la creme. Le seul mecanisme qui monte encore
   sur creme est le blanc : il porte la lueur, l'ambre ne fait plus que la
   teinter. Geometrie strictement inchangee. */
:root[data-theme="light"] .hero__glow {
  background:
    radial-gradient(ellipse at center,
      #FFFFFF 0%,
      rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse at center,
      rgba(254, 160, 98, .16) 0%,
      rgba(244, 94, 124, .10) 45%,
      transparent 70%);
}

/* Le marquee reste en retrait : c'est un decor, pas un titre. A pleine
   opacite, le cote corail deviendrait un mot de 10vw juste sous le bouton,
   le seul objet qui a le droit d'etre le plus fort de la page. */
:root[data-theme="light"] .marquee__item { opacity: .55; }

/* ── Sur-titres ───────────────────────────────── */
/* Je les avais passes au gris en pretendant qu'aucune valeur d'accent ne
   tenait le seuil sur creme. C'est faux, et le recensement des teintes l'a
   montre : l'ambre passait de 47 occurrences en mode nuit a 11 en mode jour.
   La regle est de changer la LUMINOSITE, jamais la teinte.
     #FEA062 sur #0a0a0a   9,82   teinte 30
     #A8500F sur #FAF7F2   5,15   teinte 30, AA tenu a 12px
   Meme teinte, meme role, neuf sur-titres qui redeviennent la marque. */
:root[data-theme="light"] .step__label,
:root[data-theme="light"] .stats-section__eyebrow,
:root[data-theme="light"] .who__eyebrow,
:root[data-theme="light"] .features__eyebrow,
:root[data-theme="light"] .faq__eyebrow { color: #A8500F; }
/* Celui du pied de page n'est PAS dans cette liste : il vit sur l'ilot noir,
   ou l'ambre tient 10,42. C'est l'ilot qui lui rend l'accent, pas une regle. */

/* ── Section d'intro : la marche avant le bento ── */
/* Elle etait en blanc pur, comme les cartes du bento juste dessous. Trois
   blancs se suivaient sans frontiere et l'empilement demarrait dans le vide.
   En la creusant, la premiere carte se detache en arrivant : on voit le
   bento commencer. Meme valeur que la bande statistiques, pour que la page
   n'ait qu'un seul niveau de retrait et pas une collection de gris. */
:root[data-theme="light"] .intro { background: var(--creux); }

/* ── Cartes empilees, le mecanisme signature ──── */
/* Carte et section ont la meme couleur. En sombre, c'est le mouvement plus
   une ombre noire qui vendent l'empilement. Sur creme, une ombre noire n'est
   pas de la profondeur, c'est un hematome, et creme sur creme ne montre plus
   aucun bord. Sans la ligne dure d'un pixel, le mecanisme devient invisible. */
:root[data-theme="light"] .step--card {
  background: var(--surface);
  box-shadow: 0 -14px 40px rgba(20, 20, 15, .10), 0 -1px 0 var(--rule);
}

/* ── Chassis de telephone ─────────────────────── */
/* Il ne change pas de couleur : un telephone est un objet sombre pose sur une
   table claire, et c'est lui qui separe l'ecran blanc de la page creme.
   Du blanc sur creme donne 1,06 de contraste, c'est-a-dire rien. */
:root[data-theme="light"] .step__mockup {
  border: 1px solid var(--rule);
  box-shadow: var(--ombre-objet), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
/* Ce pseudo-element peint par-dessus l'ecran de l'application, et je l'avais
   supprime en pretendant qu'il teintait du blanc. C'est vrai, mais il le fait
   DEJA en mode nuit : l'ecran .tkp est blanc dans les deux modes. Le
   supprimer ici creait un ecart la ou il n'y en avait pas. Il reste. */

/* ── Section securite ─────────────────────────── */
:root[data-theme="light"] .step--safety::before {
  background: radial-gradient(ellipse 70% 55% at 50% 40%,
    rgba(254, 160, 98, .10) 0%,
    rgba(244, 94, 124, .07) 35%,
    transparent 70%);
}
:root[data-theme="light"] .step__lock {
  background: rgba(207, 106, 27, .07);
  border: 1px solid rgba(207, 106, 27, .22);
  box-shadow: 0 0 32px rgba(207, 106, 27, .16), 0 0 64px rgba(230, 66, 101, .10);
}
/* Les anneaux reviennent : c'est la seule animation permanente de la section
   et je l'avais effacee. Sur creme l'ambre plafonne a 1,89 a pleine opacite,
   donc on ne peut pas garder les memes alphas ; on transpose les RAPPORTS.
     anneau 1   3,56 en nuit  ->  3,43 en jour
     anneau 2   1,83          ->  1,68
     anneau 3   1,18          ->  1,29
   La geometrie, les delais et la pulsation ne bougent pas. */
:root[data-theme="light"] .lock-ring--1 {
  border-color: #CF6A1B;
  box-shadow: 0 0 14px rgba(207, 106, 27, .16);
}
:root[data-theme="light"] .lock-ring--2 {
  border-color: rgba(207, 106, 27, .45);
  box-shadow: 0 0 22px rgba(230, 66, 101, .10);
}
:root[data-theme="light"] .lock-ring--3 { border-color: rgba(230, 66, 101, .20); }

/* ── Bande statistiques ───────────────────────── */
/* Milieu exact de la creme et du filet : la bande se creuse sans devenir un
   troisieme ilot sombre, ce qui ferait de la page un damier. */
:root[data-theme="light"] .stats-section { background: var(--creux); }
:root[data-theme="light"] .stat { border-top: 1px solid var(--rule); }
:root[data-theme="light"] .stat__desc { color: var(--muted); }

/* ── Qui, cartes ──────────────────────────────── */
/* En mode nuit ces cartes n'ont aucune ombre : un fond #1a1a1a cercle d'un
   filet #333 suffit, parce que le fond est deja sombre. Sur creme, une carte
   blanche sur creme ne fait que 1,07 de contraste et le filet 1,22 : il faut
   un troisieme appui, mais tres faible, sinon la carte se met a flotter.
   Au survol c'est l'ambre qui s'allume, comme en nuit. */
:root[data-theme="light"] .who-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--ombre);
}
:root[data-theme="light"] .who-card:hover { border-color: rgba(207, 106, 27, .45); }
/* Le degrade revient. Je l'avais aplati en une couleur pleine, ce qui retirait
   le mecanisme du mode nuit. Un degrade CLIPPE DANS DU TEXTE doit tenir le
   seuil sur ses deux butees, donc il ne peut pas etre celui des surfaces :
     surfaces   #CF6A1B -> #E64265    3,43 et 3,69
     texte      #A8500F -> #C11B43    5,15 et 5,99
   Memes deux teintes, 30 et 360, comme en mode nuit. */
:root[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #A8500F, #C11B43);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ── Section d'appel ──────────────────────────── */
/* Je l'avais remplace par un aplat blanc, ce qui changeait le rythme de la
   page : la section passait de fond teinte a bloc plein. Le lavis revient,
   aux teintes reaccordees, meme geometrie et meme angle. */
:root[data-theme="light"] .cta-section::before {
  background: linear-gradient(135deg,
    rgba(207, 106, 27, .07) 0%,
    rgba(230, 66, 101, .07) 100%);
}

/* ── Carrousel ────────────────────────────────── */
:root[data-theme="light"] .feature-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  box-shadow: var(--ombre);
}
:root[data-theme="light"] .feature-card:hover { border-color: rgba(207, 106, 27, .4); }
:root[data-theme="light"] .carousel-nav__btn { border: 1px solid var(--rule-fort); }
:root[data-theme="light"] .carousel-nav__btn:hover { background: rgba(207, 106, 27, .08); }

/* ── FAQ ──────────────────────────────────────── */
:root[data-theme="light"] .faq-item { border-bottom: 1px solid var(--rule); }
:root[data-theme="light"] .faq-answer p { color: var(--muted); }

/* ── Pied de page : ilot sombre, il ne bouge pas ─ */
:root[data-theme="light"] .footer { background: var(--void); }
:root[data-theme="light"] .footer__top { border-bottom: 1px solid rgba(240, 237, 232, .08); }
:root[data-theme="light"] .footer-brand { color: var(--void-filet); }

/* Sur telephone, le filet est eteint dans la feuille de base. Cette surcharge
   du mode jour est plus specifique qu'une regle de media query : sans le
   rappel ci-dessous, elle le rallumait, et le pied etait d'un seul noir la
   nuit mais coupe en deux le jour. Les deux modes doivent tomber pareil. */
@media (max-width: 768px) {
  :root[data-theme="light"] .footer__top { border-bottom: none; }
}

/* ── LES ILOTS SOMBRES REDEFINISSENT LEURS JETONS ──
   Le menu plein ecran et le pied de page restent noirs en mode jour. Les
   surcharges ecrites pour la creme redescendaient dedans, et tout ce qui
   s'appuie sur --text ou --muted devenait de l'encre sur du noir :

     titre "Join Talkify today"   18,47 -> 1,07   illisible
     logo du menu                 21,00 -> 1,07   invisible
     bouton Fermer                 1,32 -> 1,07   invisible
     sur-titre du pied            10,42 -> 3,49   sous le seuil
     anneaux de focus                     1,07   invisibles

   Rustiner element par element ne tient pas : chaque ligne ajoutee au pied
   ou au menu rouvre le trou. On redefinit les JETONS sur l'ilot, une fois,
   et tous ses descendants retrouvent le mode nuit sans une regle de plus. */
:root[data-theme="light"] .footer,
:root[data-theme="light"] .mobile-menu {
  /* La couleur heritee est une valeur CALCULEE : body a resolu var(--text)
     en encre une fois pour toutes, et les titres du pied en heritaient sans
     jamais relire le jeton. Il faut la reposer sur l'ilot. */
  color: #F0EDE8;
  --bg: #0a0a0a;
  --bg-mid: #111111;
  --text: #F0EDE8;
  --muted: rgba(240, 237, 232, .5);
  --accent-start: #FEA062;
  --accent-end: #F45E7C;
  --gradient: linear-gradient(135deg, #FEA062, #F45E7C);
  --filet-btn: rgba(240, 237, 232, .37);
  /* L'ilot est noir : l'eclat y reprend le sens qu'il a la nuit. Aucune colonne
     n'y vit aujourd'hui, mais un jeton qui ment sur un ilot est une trappe. */
  --cta-eclat: 1.2;
}
/* Les trois valeurs ecrites en dur dans style.css, hors jetons. */
:root[data-theme="light"] .mobile-menu .nav__logo { color: #fff; }
/* Le bouton Fermer herite du filet de l'ilot : rien a surcharger. */
:root[data-theme="light"] .footer a:focus-visible,
:root[data-theme="light"] .footer button:focus-visible,
:root[data-theme="light"] .mobile-menu a:focus-visible,
:root[data-theme="light"] .mobile-menu button:focus-visible { outline-color: #F0EDE8; }

/* L'ombre du pied n'etait pas surchargee. Sur noir elle mesure 1,03, elle ne
   se voit pas et sert de fondu. Posee sur la creme de la section juste
   au-dessus, la meme valeur monte a 3,93 : une bavure grise de 60px au
   moment ou le noir arrive. */
:root[data-theme="light"] .footer { box-shadow: 0 -14px 40px rgba(20, 20, 15, .12); }

/* ── Details que personne ne regarde et qui se voient ── */
/* Sans cette regle, le bleu du systeme sort de la palette des qu'un visiteur
   selectionne un titre pour le lire. */
::selection { background: rgba(254, 160, 98, .28); color: #F0EDE8; }
:root[data-theme="light"] ::selection { background: rgba(244, 94, 124, .22); color: #14140F; }

/* L'anneau de focus des deux boutons du menu est aujourd'hui SUPPRIME par
   style.css. On le rend, dans les deux modes. */
.mobile-menu button:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid #F0EDE8;
  outline-offset: 2px;
}
:root[data-theme="light"] .mobile-menu button:focus-visible { outline-color: #F0EDE8; }
:root[data-theme="light"] a:focus-visible,
:root[data-theme="light"] button:focus-visible { outline-color: #14140F; }

/* Imprimer la landing aujourd'hui donne des pages blanches avec du texte
   invisible : les fonds ne s'impriment pas, la couleur du texte si. */
@media print {
  :root { --bg: #FFFFFF; --bg-mid: #FFFFFF; --text: #000000; --muted: #444444; }
  .nav, .hero__glow, .marquee-wrap, .footer-brand, .btn--menu { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
}

/* ── L'interrupteur ───────────────────────────── */
/* Discret, dans la barre de navigation a cote du menu, et nulle part ailleurs.
   Le pied de page et le menu plein ecran sont les deux elements que le
   proprietaire cite nommement : on n'y touche pas. */
.theme-toggle {
  position: relative;
  width: var(--btn-h3); height: var(--btn-h3); padding: 0;
  border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--filet-btn);
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: border-color .25s ease, background .25s ease;
}
/* La jupe deborde des quatre cotes : la boite ne fait que 32 de large. */
.theme-toggle::after { content: ''; position: absolute; inset: -8px; }
.theme-toggle:hover { border-color: rgba(255, 255, 255, .3); }

/* Un disque coupe en deux ne dit rien : il faut deja savoir que le bouton
   change le theme pour comprendre la moitie manquante. La lune et le soleil
   se lisent sans legende. Une seule forme se deforme, ce n'est pas un fondu
   entre deux icones : le disque se retracte, la morsure s'en va, les rayons
   sortent. Les deux astres portent le degrade de la marque, comme le point
   qu'ils remplacent. */
.theme-toggle__icon { width: 18px; height: 18px; display: block; overflow: visible; }
.theme-toggle__stop--a { stop-color: var(--accent-start); }
.theme-toggle__stop--b { stop-color: var(--accent-end); }

.theme-toggle__core {
  fill: url(#tk-theme-grad);
  transform-box: fill-box; transform-origin: center;
  transition: transform .34s cubic-bezier(.32, .72, 0, 1);
}
.theme-toggle__bite { transition: transform .34s cubic-bezier(.32, .72, 0, 1); }
.theme-toggle__rays {
  stroke: url(#tk-theme-grad);
  transform-box: fill-box; transform-origin: center;
  opacity: 0; transform: scale(.45) rotate(-55deg);
  transition: opacity .16s ease-out, transform .34s cubic-bezier(.32, .72, 0, 1);
}

/* La lune du menu plein ecran pointe sur SES PROPRES definitions. Le degrade
   n'est pas reclame dans le balisage mais ici, en CSS : tant que ces deux
   lignes visaient l'identifiant de la barre, la lune du menu dependait d'un SVG
   passe en display:none sous 620px. WebKit cesse alors de resoudre le url(#...)
   et l'icone devenait un cercle vide sur un vrai iPhone, alors que Chrome la
   peignait tres bien. Mesure : 0 pixel colore avant, 238 apres. */
.mobile-menu .theme-toggle__core { fill: url(#tk-theme-grad-menu); }
.mobile-menu .theme-toggle__rays { stroke: url(#tk-theme-grad-menu); }

/* Mode jour : le disque devient un soleil. */
/* Le filet vient du jeton, il n'y a plus rien a surcharger par mode. */
:root[data-theme="light"] .theme-toggle:hover { border-color: rgba(20, 20, 15, .34); }
/* Le menu plein ecran reste noir en mode jour (decision du proprietaire) :
   l'interrupteur qui y vit garde donc son filet clair, sinon il disparait. */

:root[data-theme="light"] .mobile-menu .theme-toggle:hover { border-color: rgba(255, 255, 255, .3); }
:root[data-theme="light"] .theme-toggle__core { transform: scale(.66); }
:root[data-theme="light"] .theme-toggle__bite { transform: translate(9px, -9px); }
:root[data-theme="light"] .theme-toggle__rays {
  opacity: 1; transform: none;
  transition: opacity .2s ease-out .1s, transform .34s cubic-bezier(.32, .72, 0, 1);
}

/* ── Le selecteur de langue ───────────────────── */
/* Memes valeurs que l'interrupteur a cote : les deux commandes de la barre
   doivent se lire comme une paire, pas comme deux objets differents. */
:root[data-theme="light"] .lang__btn:hover { border-color: rgba(20, 20, 15, .55); }
:root[data-theme="light"] .lang__menu {
  background: var(--surface);
  border-color: var(--rule);
  box-shadow: 0 18px 40px -22px rgba(20, 20, 15, .28);
}
:root[data-theme="light"] .lang__opt:hover { background: rgba(20, 20, 15, .05); }

@media (max-width: 900px) {
  /* Seule l'icone reste a 16 : c'est la taille de l'ensemble ferme, 18 n'y
     appartenait pas. La boite, elle, ne bouge plus. */
  .theme-toggle__icon { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle__core,
  .theme-toggle__bite,
  .theme-toggle__rays { transition: none; }
}

/* Le canevas sous la page porte le noir du pied en mode nuit (cf. style.css).
   En mode jour, le haut de page est creme : le rebond elastique du haut doit
   donc rester creme, sinon il flashe noir a chaque tire vers le bas. */
:root[data-theme="light"] { background-color: var(--bg); }