/* ═══════════════════════════════════════════════════════════════════════
   VARIANTE « MODERNE »  (+ mode sombre)

   Proposition de direction, à soumettre. Comme les autres directions, elle se
   pose en surcouche de tokens sur styles.css et ne touche ni au balisage ni à
   la typographie ; elle n'ajoute que des regles d'interaction et de detail,
   toutes portees par html[data-da="moderne"].

   Ce qu'elle fait, du plus visible au plus fin :
   1. Angle tres franc : grand rayon (28/22 px), pastilles et boutons en pleine
      pilule.
   2. Carte sans bord : plus de filet (--rule-carte transparent), la carte ne
      tient que sur l'ombre.
   3. Ombre teintee d'accent : relief « designe » plutot qu'une simple elevation.
   4. Air : gouttiere a 26 px, fond en leger degrade, surfaces refroidies.
   5. Verre : en-tete collant translucide, floute et sature.
   6. Tetes de section soulignees d'un trait degrade.
   7. Mouvement retenu au survol ; coupe sous prefers-reduced-motion.

   Le rouge et le vert de marche ne bougent pas : ce sont des donnees. Les
   styles de focus restent ceux de la reference.

   MODE SOMBRE — html[data-da="moderne"][data-theme="dark"]. Explicite (pas
   branche sur prefers-color-scheme) pour ne pas basculer le site sans decision.
   Un seul point demande un asset avant la prod : le logo est un SVG a encre
   foncee ; faute de version claire il est ici inverse par un filtre CSS, ce qui
   suffit a la demo mais decale la pastille rouge « LE REVENU ». A remplacer par
   un logo clair dedie avant toute mise en ligne du mode sombre.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-da="moderne"]{
  /* Surfaces refroidies, papier des cartes blanc pur */
  --bg:#eaeef7;--paper:#ffffff;--paper-dispositif:#f5f8fe;
  --soft:#e6edfc;--line:#e9ecf2;--line-strong:#d4d9e2;
  /* Encre : gris froids */
  --body:#394150;--muted:#687084;
  /* Accent : bleu vif, lavis assorti */
  --accent:#2a5bff;--accent-deep:#1838cf;--accent-soft:#e8efff;
  /* Angle tres franc */
  --radius:28px;--radius-sm:22px;--radius-dispositif:24px;--radius-dispositif-lg:30px;
  /* Air */
  --gap:26px;
  /* Carte sans bord, ombre teintee d'accent */
  --rule-carte:1px solid transparent;
  --ombre-carte:0 4px 10px rgba(42,91,255,.08),0 24px 50px -16px rgba(29,52,120,.30);
  --shadow:0 6px 14px rgba(42,91,255,.10),0 36px 70px -20px rgba(29,52,120,.36);
}

/* ── Fond en leger degrade ──────────────────────────────────────────────── */
html[data-da="moderne"] body{background:linear-gradient(180deg,#eef2fb 0%,#e6ebf6 60%,#e3e9f5 100%)}

/* ── Mouvement : soulevement + echelle au survol, zoom de la photo ──────── */
html[data-da="moderne"] .story-card,
html[data-da="moderne"] .tile-figure,
html[data-da="moderne"] .small-card,
html[data-da="moderne"] .letter-card,
html[data-da="moderne"] .market-lead,
html[data-da="moderne"] .lead-card,
html[data-da="moderne"] .data-card,
html[data-da="moderne"] .related{
  transition:transform .2s ease,box-shadow .2s ease;
}
html[data-da="moderne"] .story-card:hover,
html[data-da="moderne"] .tile-figure:hover,
html[data-da="moderne"] .small-card:hover,
html[data-da="moderne"] .letter-card:hover,
html[data-da="moderne"] .lead-card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 14px rgba(42,91,255,.10),0 26px 52px -18px rgba(29,52,120,.32);
}
html[data-da="moderne"] .photo{transition:transform .6s ease}
html[data-da="moderne"] .story-card:hover .photo,
html[data-da="moderne"] .tile-figure:hover .photo,
html[data-da="moderne"] .hero-main:hover .photo,
html[data-da="moderne"] .lead-card:hover .photo{transform:scale(1.02)}

/* ── Etiquettes en pastilles ────────────────────────────────────────────── */
html[data-da="moderne"] .tag{
  background:var(--accent-soft);color:var(--accent-deep);
  padding:4px 11px;border-radius:999px;font-weight:700;letter-spacing:.01em;
}
html[data-da="moderne"] .kicker{letter-spacing:.08em}

/* ── Tete de section : trait degrade sous le titre ──────────────────────── */
html[data-da="moderne"] .section-header h2{position:relative}
html[data-da="moderne"] .section-header h2::after{
  content:"";display:block;width:52px;height:4px;margin-top:10px;
  border-radius:999px;background:linear-gradient(90deg,#2a5bff,#8ab0ff);
}
html[data-da="moderne"] .more,
html[data-da="moderne"] .section-header a{color:var(--accent-deep);font-weight:700}

/* ── Bouton d'abonnement : pilule degradee, halo d'accent ───────────────────
   Ciblage restreint aux VRAIS boutons (.btn.primary de l'entete, .offer-btn de
   l'offre). Pas de selecteur sur href : le menu « La Lettre » a un simple lien
   « S'abonner » sans classe que a[href*=subscription] transformait a tort en
   grosse pilule au texte noir illisible. */
html[data-da="moderne"] .btn.primary,
html[data-da="moderne"] .offer-btn{
  background:linear-gradient(135deg,#3a67ff,#1838cf);color:#fff;border:0;border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(42,91,255,.55);
}
/* Survol : garder le degrade (la base le remplacait par un bleu plat), un cran
   plus sombre et une ombre un peu plus presente. */
html[data-da="moderne"] .btn.primary:hover,
html[data-da="moderne"] .offer-btn:hover{
  background:linear-gradient(135deg,#2f5bff,#122bb0);
  box-shadow:0 10px 24px -6px rgba(42,91,255,.6);
}

/* ── En-tete collant : verre translucide, ombre longue ──────────────────── */
html[data-da="moderne"] .site-header{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.6) blur(18px);
  -webkit-backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid transparent;
  box-shadow:0 8px 30px -18px rgba(29,52,120,.35);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODE SOMBRE  (opt-in : data-theme="dark")
   ═══════════════════════════════════════════════════════════════════════ */
html[data-da="moderne"][data-theme="dark"]{
  --bg:#0c0f16;--paper:#161b24;--paper-dispositif:#1a2029;
  --soft:#1b2433;--line:#273040;--line-strong:#374255;
  --ink:#eef1f6;--body:#c2c9d6;--muted:#8a93a4;
  --accent:#5b86ff;--accent-deep:#7aa0ff;--accent-soft:#1d2a47;
  --ombre-carte:0 4px 10px rgba(0,0,0,.4),0 24px 50px -16px rgba(0,0,0,.6);
  --shadow:0 6px 14px rgba(0,0,0,.45),0 36px 70px -20px rgba(0,0,0,.7);
}
html[data-da="moderne"][data-theme="dark"] body{background:linear-gradient(180deg,#0c0f16,#0a0d13)}
html[data-da="moderne"][data-theme="dark"] .site-header{
  background:rgba(16,20,28,.72);box-shadow:0 8px 30px -18px rgba(0,0,0,.6);
}
html[data-da="moderne"][data-theme="dark"] .tag{background:var(--accent-soft);color:var(--accent-deep)}
/* Boutons secondaires de l'entete en sombre : le fond blanc code en dur dans
   styles.css en faisait des pilules blanches illisibles. Transparents a liseré
   discret ; .btn.primary (S'abonner) garde son degrade, d'ou le :not(.primary). */
html[data-da="moderne"][data-theme="dark"] .btn:not(.primary){background:transparent;color:var(--body);border-color:var(--line-strong)}
html[data-da="moderne"][data-theme="dark"] .btn:not(.primary):hover{color:#fff;border-color:var(--accent);background:rgba(90,134,255,.14)}
/* Provisoire : voir la note d'en-tete. A remplacer par un logo clair dedie. */
html[data-da="moderne"][data-theme="dark"] .brand img{filter:invert(1) hue-rotate(180deg) saturate(1.3)}

/* ── Mouvement reduit : on respecte le reglage systeme ──────────────────── */
@media (prefers-reduced-motion:reduce){
  html[data-da="moderne"] .story-card,
  html[data-da="moderne"] .tile-figure,
  html[data-da="moderne"] .small-card,
  html[data-da="moderne"] .letter-card,
  html[data-da="moderne"] .photo{transition:none}
  html[data-da="moderne"] .story-card:hover,
  html[data-da="moderne"] .tile-figure:hover,
  html[data-da="moderne"] .small-card:hover,
  html[data-da="moderne"] .letter-card:hover{transform:none}
  html[data-da="moderne"] .story-card:hover .photo,
  html[data-da="moderne"] .tile-figure:hover .photo,
  html[data-da="moderne"] .hero-main:hover .photo{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   BOUTON BASCULE CLAIR / SOMBRE

   Petit bouton icone dans l'entete (.actions). Soleil ou lune selon l'etat,
   discret, aligne sur les boutons voisins. Le choix est memorise cote
   visiteur (localStorage) ; par defaut le site reste clair.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-da="moderne"] .theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;padding:0;
  border:1px solid var(--line-strong);border-radius:999px;
  background:var(--paper);color:var(--body);cursor:pointer;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
html[data-da="moderne"] .theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
html[data-da="moderne"] .theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html[data-da="moderne"] .theme-toggle svg{display:block}
html[data-da="moderne"] .theme-toggle .icon-sun{display:none}
html[data-da="moderne"][data-theme="dark"] .theme-toggle .icon-moon{display:none}
html[data-da="moderne"][data-theme="dark"] .theme-toggle .icon-sun{display:block}

/* ═══════════════════════════════════════════════════════════════════════
   BOUTON SECONDAIRE DANS LE PAYWALL

   Le paywall a un fond sombre permanent (color:#fff). Le .btn secondaire
   « J'ai déjà un compte » y gardait le fond blanc de base + héritait du texte
   blanc : blanc sur blanc, illisible. On le passe en bouton fantôme clair.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-da="moderne"] .paywall .btn:not(.primary){
  background:transparent;color:#fff;border-color:rgba(255,255,255,.5);
}
html[data-da="moderne"] .paywall .btn:not(.primary):hover{
  background:rgba(255,255,255,.12);border-color:#fff;color:#fff;
}