:root{
    --accent:#0A84FF; --accent-ink:#0864c8; --ink:#3A4652; --sec:#6B7A90; --net:#2E9E63;
    --title:#1B3A5C;
    --card:rgba(255,255,255,0.66); --card-border:rgba(255,255,255,0.85);
    --card-solid:#FFFFFF; --line:rgba(20,40,80,0.08);
    --gradient:linear-gradient(165deg,#E9F0F9 0%,#EFECF7 50%,#F5F0EA 100%);
    --shadow-sm:0 1px 2px rgba(16,24,40,0.04),0 10px 30px rgba(16,24,40,0.08);
    --shadow-lg:0 24px 60px rgba(20,40,80,0.16);
    --maxw:1120px; --gap:64px;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{ font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif; color:var(--ink);
    background:transparent; line-height:1.55; -webkit-font-smoothing:antialiased; }
  /* ⚠️ NE PAS repasser le degrade sur body avec background-attachment:fixed : les navigateurs mobiles
     l'ignorent en pratique. Le degrade s'etirait alors sur toute la HAUTEUR DU DOCUMENT au lieu de la
     fenetre, et on n'en voyait qu'une tranche, d'ou un aplat de couleur variable selon le defilement.
     Un calque fixe donne le meme rendu partout. La couleur sur html evite un flash blanc au chargement. */
  html{ background:#EFECF7; }
  /* Fond unique, IDENTIQUE sur ordinateur et sur telephone.
     Le flou d'origine (filter:blur(80px) sur un calque fixe de 150% de l'ecran) etait abandonne en
     silence par les telephones, d'ou le fond terne. Il est donc CUIT UNE FOIS POUR TOUTES dans
     bg.jpg (11 Ko), calcule pour reproduire le rendu d'origine. Une image s'affiche pareil partout
     et ne demande aucun calcul a l'appareil.
     ⚠️ Porte par le DIV .bg-glow, pas par un pseudo-element en z-index negatif : cette derniere
     construction ne se peignait pas, alors que le div fixe en z-index:0 sous .wrap (z-index:1) est
     exactement le montage d'origine, qui lui fonctionnait.
     background-size:100% 100% et non 'cover' : l'image est etiree, ce qui garde la MEME composition
     quel que soit le format d'ecran. L'etirement est invisible sur une image aussi douce, alors que
     'cover' recadrerait et ferait disparaitre des halos sur les ecrans etroits.
     Ne pas reintroduire de filter:blur ici. */
  .bg-glow{ position:fixed; inset:0; z-index:0; pointer-events:none;
    background:url('/bg.jpg?v=2') center center / 100% 100% no-repeat; }

  /* ⚠️ NE JAMAIS remettre overflow-x:hidden sur html ou body : sur les navigateurs mobiles cette
     combinaison casse position:fixed, et le fond (degrade + halos) disparaissait purement et
     simplement, d'ou un aplat terne sur telephone. Le debordement horizontal est contenu ICI,
     au niveau du contenu qui le provoque (le clip du hero, agrandi au dela de la fenetre).
     'clip' et non 'hidden' : hidden forcerait aussi un conteneur de defilement vertical. */
  .wrap{ position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 22px; overflow-x:clip; }
  a{ color:inherit; text-decoration:none; }
  .tt-wordmark{ font-family:'Montserrat',sans-serif; font-weight:800; letter-spacing:-0.03em; display:inline-block;
    background:linear-gradient(90deg,#0A84FF 0%,#6E8BE6 50%,#2E9E63 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }

  /* ---------- Boutons ---------- */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; cursor:pointer;
    font-family:inherit; font-size:1rem; font-weight:600; border-radius:100px; padding:14px 28px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; }
  .btn-primary{ background:var(--accent); color:#fff; box-shadow:0 10px 24px rgba(10,132,255,0.32), inset 0 1px 0 rgba(255,255,255,0.25); }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 16px 30px rgba(10,132,255,0.38); background:#0b78e6; }
  .btn-ghost{ background:rgba(255,255,255,0.7); color:var(--ink); border:1px solid var(--card-border); box-shadow:var(--shadow-sm); }
  .btn-ghost:hover{ transform:translateY(-1px); background:#fff; }
  .btn-sm{ padding:10px 18px; font-size:0.92rem; }

  /* ---------- Header ---------- */
  header{ position:sticky; top:0; z-index:50; }
  .nav{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin:12px auto; padding:10px 18px;
    max-width:var(--maxw); background:rgba(255,255,255,0.6); border:1px solid var(--card-border); border-radius:20px;
    -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6); box-shadow:var(--shadow-sm); }
  .nav .brand{ font-size:1.4rem; }
  .nav-links{ display:flex; align-items:center; gap:24px; }
  .nav-links a{ font-size:0.95rem; font-weight:500; color:var(--sec); transition:color .15s; }
  .nav-links a:hover{ color:var(--ink); }
  .nav-cta{ display:flex; align-items:center; gap:10px; }
  .menu-btn{ display:none; background:none; border:none; cursor:pointer; padding:6px; color:var(--ink); }

  /* ---------- Hero ---------- */
  .hero{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; padding:28px 0 0; }
  .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:0.84rem; font-weight:600; color:var(--accent-ink);
    background:rgba(10,132,255,0.10); border:1px solid rgba(10,132,255,0.18); padding:7px 15px; border-radius:100px; margin-bottom:22px; }
  h1{ font-size:clamp(2.1rem, 4.6vw, 3.5rem); line-height:1.08; letter-spacing:-1.4px; font-weight:700; margin-bottom:18px; }
  h1 .grad{ background:linear-gradient(90deg,#0A84FF,#6E8BE6,#2E9E63); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
  .hero-eyebrow{ font-weight:600; font-size:0.98rem; letter-spacing:0.01em; color:var(--sec); margin-bottom:12px; }
  /* Phrase d'accroche : c'est une VOIX, pas une legende. En Inter gris elle portait exactement
     l'habillage du texte courant et se lisait comme un commentaire. Literata et bleu encre la
     rattachent au systeme des titres, et elle descend d'un cran sous le degrade du titre au
     lieu de tomber d'un coup dans le gris. ⚠️ Ne s'applique qu'au hero : les .lead des pages
     de guides restent du texte d'introduction ordinaire. */
  .lead{ font-size:1.16rem; color:var(--sec); max-width:520px; margin-bottom:26px; }
  .hero .lead{ color:var(--title); font-weight:500; font-size:1.2rem; }
  .hero-list{ list-style:none; display:flex; flex-direction:column; gap:13px; max-width:470px; margin:0 0 26px; }
  .hero-list li{ display:flex; align-items:center; gap:11px; font-size:1.06rem; font-weight:500; color:var(--ink); }
  .hero-list li svg{ width:20px; height:20px; color:var(--net); flex:none; }
  .hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
  .hero-price{ margin-top:14px; font-size:0.9rem; color:var(--sec); font-weight:500; }
  .qr-cta{ display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); max-width:470px; }
  .qr-cta img{ width:84px; height:84px; border-radius:10px; border:1px solid var(--card-border); background:#fff; flex:none; }
  .qr-cta .qr-txt{ font-size:0.9rem; color:var(--sec); line-height:1.45; }
  .qr-cta .qr-txt b{ color:var(--ink); font-weight:700; }
  .qr-cta.center{ margin-left:auto; margin-right:auto; justify-content:center; }
  @media (max-width:900px){ .qr-cta{ display:none; } }
  .rights-stat{ font-size:1.12rem; font-weight:700; color:var(--ink); margin-bottom:14px; }
  .price-note{ font-size:0.85rem; color:var(--net); font-weight:600; margin:2px 0 20px; }
  .trust{ display:flex; align-items:center; gap:8px 18px; flex-wrap:wrap; margin-top:24px; font-size:0.88rem; color:var(--sec); }
  .trust span{ display:inline-flex; align-items:center; gap:7px; }
  .trust svg{ width:16px; height:16px; color:var(--net); flex:none; }

  /* ---------- Phone mock ---------- */
  .phone-wrap{ display:flex; justify-content:center; }
  .phone{ width:300px; max-width:100%; background:var(--gradient); border:9px solid #0b0f1a; border-radius:44px;
    padding:26px 16px 22px; position:relative; box-shadow:var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,0.06); }
  .phone::before{ content:''; position:absolute; top:12px; left:50%; transform:translateX(-50%); width:74px; height:20px; background:#0b0f1a; border-radius:12px; }
  .m-card{ background:var(--card); border:1px solid var(--card-border); border-radius:22px; padding:16px;
    -webkit-backdrop-filter:blur(20px) saturate(1.7); backdrop-filter:blur(20px) saturate(1.7); box-shadow:0 8px 22px rgba(20,40,80,0.10); margin-bottom:12px; }
  .m-top{ display:flex; align-items:center; justify-content:space-between; margin:6px 4px 14px; }
  .m-top .brand{ font-size:1.25rem; }
  .m-hamb{ width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.6); border:1px solid var(--card-border); display:flex; align-items:center; justify-content:center; color:var(--sec); font-size:16px; }
  .m-hero{ text-align:center; }
  .m-date{ font-size:0.74rem; color:var(--sec); }
  .m-timer{ font-size:2.5rem; font-weight:300; letter-spacing:-1.5px; font-variant-numeric:tabular-nums; margin:2px 0; }
  .m-status{ font-size:0.82rem; color:var(--net); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
  .m-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--net); }
  .m-row{ display:flex; gap:10px; }
  .m-stat{ flex:1; text-align:center; background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:12px 8px;
    -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); box-shadow:0 6px 16px rgba(20,40,80,0.08); }
  .m-stat .v{ font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:-0.3px; }
  .m-stat .v.net{ color:var(--net); }
  .m-stat .l{ font-size:0.72rem; color:var(--sec); margin-top:2px; }
  .m-line{ display:flex; justify-content:space-between; align-items:center; font-size:0.86rem; }
  .m-line + .m-line{ margin-top:8px; padding-top:8px; border-top:1px solid var(--line); }
  .m-line .pos{ color:var(--net); font-weight:600; }
  .m-badge{ display:inline-block; font-size:0.7rem; font-weight:600; padding:4px 10px; border-radius:100px; background:rgba(232,148,58,0.16); color:#B26A1B; }

  /* ---------- Hero clip ---------- */
  .hero-clip{ position:relative; width:100%; max-width:510px; margin:0 auto; }
  .hero-clip video{ width:100%; height:auto; aspect-ratio:1040 / 1680; display:block; border:none; background:transparent;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 11%, #000 89%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-composite: intersect; }
  .sound-btn{ position:absolute; right:3%; bottom:3%; width:44px; height:44px; border-radius:50%;
    border:1px solid var(--card-border); background:rgba(255,255,255,0.8); color:var(--ink);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 6px 16px rgba(20,40,80,0.16);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .15s ease, background .15s ease; }
  .sound-btn:hover{ transform:translateY(-1px); background:#fff; }
  .sound-btn svg{ width:20px; height:20px; }
  .sound-btn .icon-on{ display:none; }
  .sound-btn.on .icon-on{ display:block; }
  .sound-btn.on .icon-off{ display:none; }

  /* ---------- Sections ---------- */
  main{ display:flex; flex-direction:column; gap:var(--gap); }
  main.subpage-top{ padding-top:34px; }
  section{ padding:0; }
  .sec-head{ text-align:center; max-width:720px; margin:0 auto 44px; }
  .sec-head:last-child{ margin-bottom:0; }
  /* Titres de SECTION en Literata (serif de lecture, chaleureuse mais sobre), pour trancher
     avec Inter. Fraunces a ete ecartee : ses descendantes en boucle sur le j et le f, qui sont son
     dessin par defaut et non une option, ne plaisaient pas.
     Volontairement PAS applique a .article h2 : dans les guides ce sont des titres de paragraphe,
     pas des titres de section. Le crenage negatif d'Inter est relache : une serif large a besoin
     de respirer, sinon les empattements se touchent. */
  .sec-head h2, .rights .txt h2{
    font-family:'Literata',Georgia,serif; font-weight:700; color:var(--title); }

  .sec-head h2{ font-size:clamp(2.2rem, 4.6vw, 3.1rem); letter-spacing:-0.3px; line-height:1.1; margin-bottom:16px; }
  .sec-head p{ color:var(--sec); font-size:1.14rem; }
  /* Surtitre en pilule : pose le surtitre au lieu de le laisser flotter, et le soude au titre.
     Teinte a 10% et non couleur pleine : le bleu plein reste la propriete des boutons. */
  .kicker{ display:inline-block; font-size:0.82rem; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
    color:var(--accent-ink); background:rgba(10,132,255,0.10); border-radius:100px; padding:7px 16px; margin-bottom:16px; }

  /* Features grid */
  .feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .feat{ background:var(--card); border:1px solid var(--card-border); border-radius:22px; padding:28px 26px;
    -webkit-backdrop-filter:blur(20px) saturate(1.6); backdrop-filter:blur(20px) saturate(1.6); box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
  .feat:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
  .feat .ico{ width:50px; height:50px; border-radius:15px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
    background:rgba(10,132,255,0.10); color:var(--accent); }
  .feat .ico svg{ width:26px; height:26px; }
  .feat h3{ font-size:1.22rem; margin-bottom:9px; letter-spacing:-0.3px; }
  .feat p{ color:var(--sec); font-size:0.97rem; }

  /* Rights section */
  .rights{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
  .rights .txt h2{ font-size:clamp(2rem,4vw,2.8rem); letter-spacing:-0.3px; line-height:1.12; margin-bottom:16px; }
  .rights .txt p{ color:var(--sec); font-size:1.08rem; margin-bottom:16px; }
  .alert{ background:rgba(46,158,99,0.05); border:1px solid rgba(46,158,99,0.28); border-radius:20px; padding:24px; box-shadow:var(--shadow-sm); }
  .alert .h{ font-weight:700; color:#B26A1B; display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:1.08rem; }
  .alert .h svg{ width:22px; height:22px; flex:none; }
  .alert .li{ font-size:0.98rem; margin-bottom:14px; }
  .alert details{ border-top:1px solid rgba(20,40,80,0.1); padding-top:12px; }
  .alert summary{ cursor:pointer; font-size:0.92rem; font-weight:600; color:var(--accent-ink); list-style:none; }
  .alert summary::-webkit-details-marker{ display:none; }
  .alert summary::before{ content:'▸ '; }
  .alert details[open] summary::before{ content:'▾ '; }
  .alert .why{ font-size:0.92rem; color:var(--sec); margin-top:10px; line-height:1.65; }

  /* How it works */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
  .step{ text-align:center; padding:10px; }
  .step .num{ width:52px; height:52px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:1.2rem; color:#fff; background:linear-gradient(135deg,#0A84FF,#2E9E63); box-shadow:0 8px 20px rgba(10,132,255,0.28); }
  .step h3{ font-size:1.2rem; margin-bottom:8px; }
  .step p{ color:var(--sec); font-size:0.97rem; }

  /* Pricing */
  .price-wrap{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; align-items:stretch; }
  .price-card{ width:100%; max-width:400px; background:var(--card); border:1px solid var(--card-border); border-radius:28px; padding:38px 32px; text-align:center;
    -webkit-backdrop-filter:blur(22px) saturate(1.7); backdrop-filter:blur(22px) saturate(1.7); box-shadow:var(--shadow-lg); position:relative; display:flex; flex-direction:column; }
  .price-card.featured{ border:2px solid var(--accent); box-shadow:0 20px 50px rgba(10,132,255,0.18); }
  .price-badge{ display:inline-block; font-size:0.76rem; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#fff;
    background:linear-gradient(135deg,#0A84FF,#2E9E63); padding:7px 18px; border-radius:100px; margin-bottom:20px; box-shadow:0 8px 20px rgba(10,132,255,0.28); }
  .price-badge.soft{ color:#0A84FF; border:3px solid transparent;
    background:linear-gradient(var(--card-solid,#fff),var(--card-solid,#fff)) padding-box, linear-gradient(135deg,#0A84FF,#2E9E63) border-box; box-shadow:none; }
  .price-amount{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
  .price-amount .amt{ font-size:3.6rem; font-weight:700; letter-spacing:-2px; }
  .price-amount .per{ font-size:1.15rem; color:var(--sec); font-weight:500; }
  .price-sub{ color:var(--sec); font-size:0.96rem; margin:8px 0 24px; }
  .price-list{ list-style:none; text-align:left; margin:0 auto 26px; max-width:320px; display:flex; flex-direction:column; gap:13px; }
  .price-list li{ display:flex; align-items:flex-start; gap:11px; font-size:1rem; }
  .price-list li svg{ width:21px; height:21px; color:var(--net); flex:none; margin-top:2px; }
  /* Ligne d'OPTION payante : surtout PAS la coche verte, qui signifie "compris dans l'abonnement".
     Un "+" discret et un texte en retrait, pour qu'on voie d'un coup d'oeil que c'est un ajout. */
  .price-list li.opt{ padding-top:13px; border-top:1px solid var(--card-border); color:var(--sec); font-size:0.94rem; }
  .price-list li.opt .opt-plus{ width:21px; flex:none; text-align:center; font-weight:700; color:var(--sec); margin-top:1px; }
  .price-list li.opt i{ display:block; font-style:normal; font-size:0.84rem; opacity:0.85; margin-top:2px; }
  .price-card .btn{ width:100%; margin-top:auto; }
  .price-list{ flex:1; }
  .price-note{ font-size:0.84rem; color:var(--sec); margin-top:14px; }


  /* FAQ */
  .faq{ max-width:780px; margin:0 auto; }
  .faq details{ background:var(--card); border:1px solid var(--card-border); border-radius:16px; padding:4px 22px; margin-bottom:14px;
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); }
  .faq summary{ cursor:pointer; font-weight:600; font-size:1.06rem; padding:18px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .faq summary::-webkit-details-marker{ display:none; }
  .faq summary::after{ content:'+'; font-size:1.5rem; color:var(--accent); font-weight:400; }
  .faq details[open] summary::after{ content:'–'; }
  .faq details p{ color:var(--sec); padding:0 0 18px; font-size:0.99rem; }
  @media(min-width:760px){ .faq{ max-width:960px; display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; align-items:start; } .faq details{ margin-bottom:0; } }
  /* ⚠️ Le bouton « Plus de questions » et le repli .faq.collapsed ont ete retires le 27/07/2026 :
     la FAQ a quitte la page d'accueil pour sa propre page /faq/, ou les 12 questions sont
     toutes visibles. Il n'y a donc plus rien a replier. */

  /* Final CTA */

  /* Footer */
  footer{ padding:52px 0 44px; border-top:1px solid var(--line); margin-top:var(--gap); }
  .foot{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
  .foot .brand{ font-size:1.4rem; margin-bottom:8px; }
  .foot .tagline{ color:var(--sec); font-size:0.92rem; max-width:320px; }
  .foot-links{ display:flex; gap:44px; flex-wrap:wrap; }
  .foot-col h4{ font-size:0.78rem; text-transform:uppercase; letter-spacing:1px; color:var(--sec); margin-bottom:12px; }
  .foot-col a{ display:block; font-size:0.92rem; color:var(--ink); margin-bottom:8px; opacity:0.85; }
  .foot-col a:hover{ opacity:1; color:var(--accent-ink); }
  .foot-bottom{ margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-size:0.82rem; color:var(--sec); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }

  /* Reveal on scroll */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:none; }

  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .hero{ grid-template-columns:1fr; gap:36px; text-align:center; padding:20px 0 0; }
    .hero .lead{ margin-left:auto; margin-right:auto; }
    .hero .hero-list{ width:fit-content; margin-left:auto; margin-right:auto; text-align:left; }
    .hero-cta, .trust{ justify-content:center; }
    .rights{ grid-template-columns:1fr; gap:30px; }
    .feat-grid{ grid-template-columns:repeat(2,1fr); }
    .nav-links{ display:none; }
    .menu-btn{ display:flex; }
    .nav.open{ position:relative; }
    .nav.open .nav-links{ display:flex; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:flex-start; gap:4px;
      background:rgba(255,255,255,0.97); border:1px solid var(--card-border); border-radius:18px; padding:14px 18px; box-shadow:var(--shadow-lg); }
    .nav.open .nav-links a{ padding:9px 0; width:100%; }
  }
  @media (max-width:600px){
    :root{ --gap:44px; }
    .hero{ padding:16px 0 0; }
    /* Le clip a ~21% de marge vide sur les cotes mais seulement ~10% en haut et en bas : on ne peut
       donc PAS le recadrer dans son cadre a 1,4, le telephone serait tranche. Il deborde, et pour que
       ce debordement opaque ne recouvre plus le titre suivant on le passe EN ARRIERE-PLAN (z-index:-1).
       L'agrandissement est porte par la video et non par .hero-clip : sinon le conteneur creerait un
       contexte d'empilement et le bouton du son partirait derriere avec elle.
       Plafond lateral : 1,65, au dela les bords du telephone sont coupes. */
    .hero-clip{ margin:26px auto; }
    .hero-clip video{ transform:scale(1.4); transform-origin:center; position:relative; z-index:-1; }
    /* Le bouton n'est plus emporte par l'agrandissement (celui-ci est passe sur la video seule),
       il faut donc le repousser a la main hors du telephone. Repere : la video est agrandie a
       1,4 depuis le centre, le telephone occupe la bande 21%-79% de l'image, ses bords visibles
       tombent donc a 9,4% et 90,6% du cadre. Le bouton doit commencer APRES 90,6%. */
    .sound-btn{ right:-5%; bottom:-6%; }
    .trust{ flex-direction:column; align-items:flex-start; width:fit-content; margin:24px auto 0; text-align:left; gap:12px; }
    .trust span{ align-items:flex-start; }
    .sec-head{ margin-bottom:36px; }
    .feat-grid{ grid-template-columns:1fr; }
    .steps{ grid-template-columns:1fr; gap:30px; }
    .price-card{ padding:32px 24px; }
    .nav .brand{ font-size:1.25rem; }
    h1{ letter-spacing:-1.2px; }
    .foot{ flex-direction:column; gap:28px; }
    .foot-bottom{ flex-direction:column; gap:8px; }
  }
  @media (prefers-reduced-motion:reduce){ *{ scroll-behavior:auto; } .reveal{ transition:none; opacity:1; transform:none; } }


  /* ---------- Guides / Articles ---------- */
  .breadcrumb{ font-size:0.85rem; color:var(--sec); margin-bottom:20px; }
  .breadcrumb a{ color:var(--sec); text-decoration:none; }
  .breadcrumb a:hover{ color:var(--accent-ink); }
  .article{ max-width:760px; margin:0 auto; }
  .article h1{ font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.14; letter-spacing:-1px; margin-bottom:14px; }
  .article > .lead{ font-size:1.18rem; color:var(--sec); margin-bottom:22px; max-width:none; }
  .article-meta{ font-size:0.85rem; color:var(--sec); margin-bottom:30px; padding-bottom:22px; border-bottom:1px solid var(--line); display:flex; gap:16px; flex-wrap:wrap; }
  .article h2{ font-size:1.55rem; letter-spacing:-0.5px; margin:38px 0 12px; }
  .article h3{ font-size:1.18rem; margin:26px 0 8px; }
  .article p{ font-size:1.05rem; line-height:1.72; color:var(--ink); margin-bottom:16px; }
  .article ul, .article ol{ margin:0 0 18px; padding-left:24px; }
  .article li{ font-size:1.05rem; line-height:1.7; color:var(--ink); margin-bottom:9px; }
  .article a.inline{ color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; }
  .article .src{ font-size:0.85rem; color:var(--sec); }
  .article .src a{ color:var(--sec); }
  .callout{ background:rgba(46,158,99,0.05); border:1px solid rgba(46,158,99,0.28); border-radius:18px; padding:20px 22px; margin:26px 0; }
  .callout.warn{ background:rgba(232,148,58,0.06); border-color:rgba(232,148,58,0.30); }
  .callout .h{ font-weight:700; margin-bottom:8px; display:flex; align-items:center; gap:9px; font-size:1.05rem; }
  .callout .h svg{ width:20px; height:20px; flex:none; color:var(--net); }
  .callout.warn .h svg{ color:#B26A1B; }
  .callout p:last-child{ margin-bottom:0; }
  .cta-inline{ text-align:center; background:var(--card); border:1px solid var(--card-border); border-radius:24px; padding:34px 28px; margin:44px 0 8px; box-shadow:var(--shadow-sm); }
  .cta-inline h3{ font-size:1.35rem; margin-bottom:8px; }
  .cta-inline p{ color:var(--sec); margin-bottom:18px; }
  .guides-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto; }
  .guide-card{ background:var(--card); border:1px solid var(--card-border); border-radius:22px; padding:28px 26px; text-decoration:none; color:inherit; box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease; display:block; }
  .guide-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
  .guide-card h3{ margin-bottom:8px; font-size:1.18rem; }
  .guide-card p{ color:var(--sec); font-size:0.96rem; line-height:1.5; }
  /* « Pour aller plus loin » en bas d'un guide (07/08/2026). Mesure ce jour-la :
     SEPT guides sur neuf n'envoyaient AUCUN lien vers un autre guide. Or Google
     decouvre et hierarchise les pages par les liens : neuf pages isolees valent
     bien moins que neuf pages qui se soutiennent. Discret, apres le texte et
     AVANT l'appel a l'app — on prolonge la lecture, on ne detourne pas. */
  .guides-liens{ margin:38px 0 8px; padding:22px 24px; background:var(--card);
    border:1px solid var(--card-border); border-radius:20px; }
  .guides-liens h3{ font-size:0.92rem; font-weight:700; letter-spacing:1.4px;
    text-transform:uppercase; color:var(--sec); margin-bottom:12px; }
  .guides-liens ul{ margin:0; padding:0; list-style:none; }
  .guides-liens li{ margin:0 0 8px; padding-left:16px; position:relative; }
  .guides-liens li:last-child{ margin-bottom:0; }
  .guides-liens li::before{ content:"›"; position:absolute; left:0; color:var(--accent); font-weight:700; }
  .guides-liens a{ color:var(--accent-ink); text-decoration:none; font-weight:600; }
  .guides-liens a:hover{ text-decoration:underline; }

  /* Titre de FAMILLE dans la liste des guides (07/08/2026). A huit guides une
     liste plate passait encore ; en ajoutant les suivants elle devenait un
     fourre-tout. Volontairement discret : il classe, il ne doit pas rivaliser
     avec le titre des cartes. Meme graisse et meme lettrage que `.kicker`,
     mais aligne a gauche sur la grille et non centre. */
  .guides-fam{ max-width:900px; margin:38px auto 16px; font-size:0.92rem; font-weight:700;
    letter-spacing:1.4px; text-transform:uppercase; color:var(--sec); }
  .guides-grid + .guides-fam{ margin-top:46px; }
  @media(max-width:720px){ .guides-grid{ grid-template-columns:1fr; } }