/* =====================================================================
   GOUPI — Accueil : mise en scène au défilement
   ---------------------------------------------------------------------
   Chargé uniquement par index.html, après style.css.

   Règle d'or : tous les effets vivent sous `html.fx`, classe posée par
   accueil.js. Sans JavaScript, ou si le visiteur a demandé à réduire les
   animations, `html.fx` n'existe pas et la page est exactement celle de
   style.css : rien n'est jamais masqué d'office.

   On n'anime que `transform` et `opacity` (plus le scintillement du score,
   en `background-position`). Les réglages des scènes au défilement
   (hauteurs des zones, échelles) sont dans l'objet C en tête d'accueil.js.
   ===================================================================== */

:root{
  /* — Réglages — */
  --fx-reveal-dist: 28px;        /* glissement vertical d'une apparition */
  --fx-reveal-side: 32px;        /* glissement latéral (grilles) */
  --fx-reveal-fade: 650ms;
  --fx-reveal-move: 750ms;
  --fx-ease-out: cubic-bezier(.22,1,.36,1);
  --fx-ease-pop: cubic-bezier(.34,1.56,.64,1);
  --fx-screen-in: 520ms;         /* changement d'écran du téléphone */
  --fx-screen-fade: 420ms;
  --fx-sheet-in: 480ms;          /* volet de téléchargement */
  --fx-sheet-out: 320ms;
  --fx-veil: 260ms;
  --nav-h: 70px;                 /* recalculée par accueil.js */
}

/* — Socle : défilement horizontal coupé sans casser `position: sticky` — */
body{overflow-x:hidden}
@supports (overflow:clip){
  body{overflow-x:clip}
  /* `clip` sur chaque section : coupe ce qui dépasse (cartes qui arrivent de
     côté, éléments agrandis) sans créer de défilement horizontal, et sans
     casser `position: sticky`, contrairement à `hidden`. */
  body>section{overflow-x:clip}
  .journal-preview,.cta-final{overflow:clip}
}

/* — Hero mobile : le texte et les boutons des stores d'abord, le visuel
     ensuite, pour que le téléchargement tienne dans le premier écran — */
@media(max-width:968px){
  .hero{min-height:0;padding-top:96px}
  .hero-content{order:0}.hero-visual{order:1}
  .hero-grid{gap:28px}
}

/* =====================================================================
   0. Moins de cartes à bordure
   ---------------------------------------------------------------------
   Mêmes couleurs, mêmes polices, mêmes emojis. On retire seulement les
   cartes encadrées (bordure, liseré de couleur, ombre) et les survols qui
   font sauter les blocs : les fonctionnalités et les bénéfices deviennent
   des listes posées, séparées par un filet fin.
   ===================================================================== */
.feature-card{border:none}
.feature-card:hover,.cap-card:hover,.benefit-card:hover{transform:none;box-shadow:none}

.cap-grid{gap:0 56px}
.cap-card{background:none;border:none;border-top:1px solid rgba(45,62,80,.12);border-radius:0;padding:28px 0 40px}

.benefits-grid{gap:0 56px}
.benefit-card{background:none;box-shadow:none;border-radius:0;border-top:1px solid rgba(45,62,80,.14);text-align:left;padding:28px 0 8px;overflow:visible}
.benefit-card::before{display:none}
.benefit-card h3{font-size:1.3rem;letter-spacing:-.3px}

.recherche-card{box-shadow:none;border-radius:18px;padding:24px}

@media(max-width:968px){
  .cap-grid,.benefits-grid{gap:0}
  .cap-card{padding:24px 0 28px}
  .benefit-card{padding:24px 0 26px}
}

/* =====================================================================
   0 bis. « Une application vraiment complète » : symptômes, recettes
   ===================================================================== */
.more{padding:110px 0 120px;background:var(--surface)}
.more-head{margin-bottom:72px}
.more-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:88px;align-items:center;max-width:1020px;margin:0 auto}
.more-row+.more-row{margin-top:110px}
.more-row--flip{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.more-row--flip .more-visual{order:2}
.more-visual{position:relative;display:flex;justify-content:center}
.more-visual::before{content:'';position:absolute;top:50%;left:50%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(111,209,149,.16) 0%,rgba(91,159,237,.08) 40%,transparent 68%);pointer-events:none}
.more-row--flip .more-visual::before{background:radial-gradient(circle,rgba(249,199,79,.16) 0%,rgba(242,142,59,.07) 40%,transparent 68%)}
.device{position:relative;container-type:inline-size;width:min(290px,64vw);aspect-ratio:.4778;
  filter:drop-shadow(0 40px 50px rgba(45,62,80,.20)) drop-shadow(0 10px 16px rgba(45,62,80,.10))}
.device .phone-screen img{display:block;width:100%;height:100%;object-fit:cover}
.more-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.78rem;letter-spacing:1.8px;text-transform:uppercase;color:var(--link-blue)}
.more-new{background:var(--text-primary);color:#fff;border-radius:999px;padding:4px 10px 3px;font-size:.66rem;letter-spacing:1.2px}
.more-text h3{font-family:'Fredoka',sans-serif;font-weight:700;font-size:clamp(1.55rem,2.6vw,2.15rem);line-height:1.18;letter-spacing:-.6px;color:var(--text-primary);margin-bottom:16px}
.more-text>p{color:var(--text-secondary);font-size:1.06rem;line-height:1.7;font-weight:500}
.more-list{list-style:none;margin:26px 0 0;display:grid;gap:14px}
.more-list li{display:flex;gap:12px;align-items:flex-start;font-weight:600;line-height:1.5;color:var(--text-primary)}
.more-list .ok{flex-shrink:0;width:22px;height:22px;margin-top:1px;padding:4px;border-radius:50%;color:#fff;background:var(--score-green)}
.more-list a{font-weight:700}
.more-text>.more-note{margin-top:20px;font-size:.86rem;color:var(--text-tertiary)}
@media(max-width:968px){
  .more{padding:80px 0 90px}
  .more-head{margin-bottom:44px}
  .more-row,.more-row--flip{grid-template-columns:1fr;gap:40px}
  .more-row--flip .more-visual{order:0}
  .more-row+.more-row{margin-top:80px}
  .device{width:min(330px,80vw)}
}

/* =====================================================================
   0 ter. Inspirations Duolingo, à la sauce Goupi
   ===================================================================== */

/* — Boutons « épais » : une couleur pleine posée sur une tranche plus
     foncée, qui s'enfonce au clic — */
.btn-appstore,.btn-gplay{border-radius:18px;transition:transform .12s ease,box-shadow .12s ease}
.btn-appstore{box-shadow:0 5px 0 #18222d}
.btn-appstore:hover{transform:translateY(-2px);box-shadow:0 7px 0 #18222d}
.btn-appstore:active{transform:translateY(4px);box-shadow:0 1px 0 #18222d}
.btn-gplay{border:2px solid #DFE5EC;box-shadow:0 5px 0 #DFE5EC}
.btn-gplay:hover{transform:translateY(-2px);box-shadow:0 7px 0 #DFE5EC}
.btn-gplay:active{transform:translateY(4px);box-shadow:0 1px 0 #DFE5EC}
.nav-cta{border-radius:14px;box-shadow:0 4px 0 #18222d;transition:transform .12s ease,box-shadow .12s ease}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 5px 0 #18222d}
.nav-cta:active{transform:translateY(3px);box-shadow:0 1px 0 #18222d}
.dl-pill{box-shadow:0 5px 0 #18222d,0 14px 30px rgba(45,62,80,.3)}
.dl-pill:active{box-shadow:0 1px 0 #18222d,0 8px 20px rgba(45,62,80,.25)}

/* — Aliments qui flottent (emojis), en parallaxe au défilement — */
.floaties{position:absolute;inset:0;pointer-events:none;z-index:1}
.floaties span{position:absolute;left:var(--x);top:var(--y);font-size:calc(var(--s) * clamp(2rem,3.4vw,3.2rem));line-height:1;
  transform:translate3d(0,var(--py,0px),0) rotate(calc(var(--r) + var(--pr,0deg)));
  filter:drop-shadow(0 10px 12px rgba(45,62,80,.18));will-change:transform}
.hero-visual{isolation:isolate}
.hero-visual .floaties{inset:-6% -4%}
.hero-phone{z-index:2}
@media(max-width:968px){
  .hero-visual .floaties{inset:-4% 2%}
  .floaties span{font-size:calc(var(--s) * 2rem)}
}

/* — Appel final : un aplat vert Goupi, bord en vague, sans carte — */
.cta-final{position:relative;margin-top:90px;padding:40px 0 110px;color:#fff;
  background:linear-gradient(180deg,#6FD195 0,#6FD195 60px,#52BE86 60%,#3FAE8C 100%)}
@supports (overflow:clip){.cta-final{overflow:visible;overflow-x:clip}}
.cta-final::before{content:'';position:absolute;left:0;right:0;bottom:calc(100% - 2px);height:92px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 62C180 18 330 8 520 30s330 60 520 46 300-58 400-64v76H0z' fill='%236FD195'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.cta-final .cta-box{background:none;box-shadow:none;border-radius:0;padding:24px 0 0;overflow:visible;position:relative;z-index:2}
.cta-final .cta-box::before{display:none}
.cta-final .cta-box h2{color:#fff;font-size:clamp(2rem,4.2vw,3.2rem)}
.cta-final .cta-box .section-sub{color:rgba(255,255,255,.9)}
.cta-final .cta-mascot{width:150px;height:auto;filter:drop-shadow(0 14px 18px rgba(23,60,40,.25))}
.cta-final .btn-gplay{border-color:#fff;box-shadow:0 5px 0 #2f9a6c}
.cta-final .btn-gplay:hover{box-shadow:0 7px 0 #2f9a6c}
.cta-final .btn-appstore{box-shadow:0 5px 0 #13202b}
.cta-final .floaties span{filter:drop-shadow(0 12px 14px rgba(20,70,45,.28))}
@media(max-width:968px){.cta-final{margin-top:60px;padding:24px 0 80px}.cta-final::before{height:50px}}

/* — Le fond de page change de teinte selon la section (html.fx seulement) — */
html.fx body{transition:background-color .7s ease}
html.fx .ribbon,html.fx .features,html.fx .capabilities,html.fx .benefits,html.fx .journal-preview,
html.fx .more,html.fx .science,html.fx .recherche,html.fx .faq-home,html.fx .articles-home,html.fx .avis{background:transparent}

/* =====================================================================
   1. Apparition au défilement
   ===================================================================== */
html.fx [data-rv]:not(.rv-done){
  transition:opacity var(--fx-reveal-fade) ease,transform var(--fx-reveal-move) var(--fx-ease-out);
  transition-delay:var(--rv-delay,0ms);
}
html.fx .rv-armed{opacity:0;transform:translate3d(0,var(--fx-reveal-dist),0)}
html.fx .rv-armed[data-rv="left"]{transform:translate3d(calc(-1 * var(--fx-reveal-side)),0,0)}
html.fx .rv-armed[data-rv="right"]{transform:translate3d(var(--fx-reveal-side),0,0)}

/* Étiquettes de niveau de preuve : elles s'allument après leur carte */
html.fx .recherche-tag{transition:opacity .35s ease,transform .45s var(--fx-ease-pop)}
html.fx .recherche-tag.tag-armed{opacity:0;transform:scale(.7)}

/* =====================================================================
   2. Mascotte : un « pop » à l'apparition, jamais en boucle
   ===================================================================== */
@keyframes fx-pop{0%{opacity:0;transform:scale(.55) rotate(-6deg)}60%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:none}}
html.fx .hero-mascot{animation:fx-pop .7s var(--fx-ease-pop) .35s both}
html.fx .journal-mascot,html.fx .cta-mascot{animation:none}
html.fx .pop-armed{opacity:0}
html.fx .pop-armed.is-pop{animation:fx-pop .7s var(--fx-ease-pop) both}

/* =====================================================================
   3. Bandeau de mots piloté par le défilement
   ===================================================================== */
.ribbon{background:var(--surface);padding:56px 0 8px;overflow:hidden;user-select:none}
@supports (overflow:clip){.ribbon{overflow:clip}}
.ribbon-line{white-space:nowrap;font-family:'Fredoka',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.6rem,9vw,7.2rem);line-height:1.04;letter-spacing:-.02em;margin-left:-30%}
.ribbon-line span{display:inline-block;will-change:transform}
.ribbon-fill span{background:linear-gradient(135deg,var(--score-green),var(--link-blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ribbon-stroke span{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px rgba(45,62,80,.2)}
.ribbon-stroke{margin-left:-55%}
@media(max-width:600px){.ribbon{padding:36px 0 0}.ribbon-stroke span{-webkit-text-stroke-width:1px}}

/* =====================================================================
   4. « Comment ça marche » : la démonstration dans l'iPhone
   ---------------------------------------------------------------------
   Un enregistrement de la vraie app (fiche d'un produit scanné, repas qui
   se remplissent, journal), découpé en images : la position de défilement
   choisit l'image, comme une vidéo qu'on avance et recule.
   Sans JavaScript : la grille des trois étapes d'origine.
   ===================================================================== */
.story{display:none}
.features.is-story{padding:0;overflow:hidden}
@supports (overflow:clip){.features.is-story{overflow:clip}}
.features.is-story .story-head{padding:96px 0 0}
.features.is-story .story-head .section-title{margin-bottom:0}
.features.is-story .steps-zone{position:relative;height:calc((100 + var(--len,340)) * 1vh);height:calc((100 + var(--len,340)) * 1svh)}
.features.is-story .steps-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:var(--nav-h)}
.features.is-story .steps-stage>.container{width:100%;display:grid;grid-template-columns:minmax(0,420px) auto;justify-content:center;align-items:center;gap:90px;text-align:left}
.features.is-story .story-outro{padding:0 0 100px}
.features.is-story .features-grid{display:flex;flex-direction:column;gap:14px;margin:0;text-align:left}
.features.is-story .feature-card{text-align:left;background:transparent;padding:22px 24px;border-radius:22px;opacity:.32;transition:opacity .45s ease,background-color .45s ease,transform .5s var(--fx-ease-out)}
.features.is-story .feature-card.is-active{opacity:1;background:#fff;box-shadow:0 18px 40px rgba(45,62,80,.08)}
.features.is-story .feature-icon{width:52px;height:52px;font-size:1.5rem;margin:0 0 12px}
.features.is-story .feature-card h3{font-size:1.2rem}
.features.is-story .mini-score{justify-content:flex-start}
.features.is-story .story{display:block;position:relative}

.story-phone{width:auto;height:min(76vh,680px);height:min(76svh,680px)}
.story-flyers{position:absolute;inset:0;pointer-events:none;z-index:3}
.fly{position:absolute;left:50%;top:50%;font-size:3rem;line-height:1;opacity:0;
  filter:drop-shadow(0 10px 12px rgba(45,62,80,.2));transform:translate3d(-50%,-50%,0)}

/* — La vraie app, filmée : une image par position de défilement — */
.story-poster,.story-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.story-canvas{z-index:1}

/* Mobile d'abord : l'iPhone prend toute la hauteur de l'écran, la légende
   flotte en carte dépolie sur le bas du téléphone (barre d'onglets). */
@media(max-width:968px){
  .features.is-story .story-head{padding-top:64px}
  .features.is-story .steps-stage{align-items:flex-start;padding-top:calc(var(--nav-h) + 10px)}
  .features.is-story .steps-stage>.container{display:block;position:relative;height:100%;padding:0 14px}
  .features.is-story .story{display:flex;justify-content:center}
  .story-phone{height:min(calc(100vh - var(--nav-h) - 26px),720px);height:min(calc(100svh - var(--nav-h) - 26px),720px);max-width:none}
  .features.is-story .features-grid{position:absolute;left:14px;right:14px;bottom:16px;z-index:4;display:grid;margin:0}
  .features.is-story .feature-card{grid-area:1 / 1;opacity:0;padding:14px 16px 15px;border-radius:22px;
    background:rgba(255,255,255,.93)!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 16px 40px rgba(45,62,80,.18),0 2px 8px rgba(45,62,80,.08)!important;
    display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:start;transform:translate3d(0,10px,0)}
  .features.is-story .feature-card.is-active{opacity:1;transform:none}
  .features.is-story .feature-icon{width:42px;height:42px;font-size:1.2rem;margin:0;grid-row:1 / span 3}
  .features.is-story .feature-num{width:19px;height:19px;font-size:.62rem;top:-6px;right:-6px}
  .features.is-story .feature-card h3{font-size:1.02rem;margin-bottom:2px}
  .features.is-story .feature-card p{font-size:.86rem;line-height:1.48}
  .features.is-story .mini-score{margin-top:6px}
  .fly{font-size:2.3rem}
  .features.is-story .story-outro{padding:24px 0 70px}
}

/* =====================================================================
   6. « Un journal intelligent » : le téléphone épinglé qui change d'écran
   ===================================================================== */
.phone,.phone-dots{display:none}
.journal-preview.is-seq{padding:0}
.journal-preview.is-seq .journal-head{padding:100px 0 8px}
.journal-preview.is-seq .journal-head .section-sub{margin:0 auto!important}
.journal-preview.is-seq .journal-zone{position:relative;
  height:calc((100 + var(--len,210)) * 1vh);height:calc((100 + var(--len,210)) * 1svh)}
.journal-preview.is-seq .journal-stage{position:sticky;top:0;height:100vh;height:100svh;
  display:flex;align-items:center;padding-top:var(--nav-h)}
.journal-preview.is-seq .journal-stage>.container{width:100%}
.journal-preview.is-seq .journal-grid{margin-top:0;grid-template-columns:auto minmax(0,460px);justify-content:center;gap:80px}
.journal-preview.is-seq .journal-phone{display:none}
.journal-preview.is-seq .journal-mascot{bottom:-14px;right:-34px;width:92px;height:92px}
/* Téléphone : un iPhone dessiné en CSS. Toutes les proportions (coins,
   bordures, boutons) sont en cqw, relatives à la largeur du téléphone :
   il garde la même allure à toutes les tailles. L'écran a exactement le
   format des captures (1320 × 2868) : rien n'est rogné. */
.journal-preview.is-seq .phone{display:block;position:relative;z-index:1;container-type:inline-size;
  height:min(62vh,600px);height:min(62svh,600px);aspect-ratio:.4778;max-width:84vw;
  filter:drop-shadow(0 40px 50px rgba(45,62,80,.22)) drop-shadow(0 10px 16px rgba(45,62,80,.12))}
.phone-body{position:relative;width:100%;height:100%;padding:1cqw;border-radius:16.2cqw;
  background:linear-gradient(145deg,#e4e7eb 0%,#9aa2ac 18%,#eef0f3 42%,#a7aeb7 68%,#d6dadf 100%)}
.phone-body::before,.phone-body::after{content:'';position:absolute;width:1.3cqw;border-radius:1cqw;
  background:linear-gradient(90deg,#8e959e,#d9dde2 60%,#9aa1aa)}
.phone-body::before{left:-1cqw;top:24%;height:14%;box-shadow:0 -9cqw 0 -.05cqw #b8bec6}
.phone-body::after{right:-1cqw;top:30%;height:20%}
.phone-bezel{width:100%;height:100%;padding:2.4cqw;border-radius:15.2cqw;background:#0c0e11;
  box-shadow:inset 0 0 0 .35cqw #1d2127}
.phone-screen{position:relative;width:100%;height:100%;border-radius:12.6cqw;overflow:hidden;background:var(--bg);isolation:isolate}
.phone-screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%)}
.phone-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translate3d(0,6%,0);
  transition:opacity var(--fx-screen-fade) ease,transform var(--fx-screen-in) var(--fx-ease-out)}
.phone-shot.is-active{opacity:1;transform:none}
.phone-shot.is-out{opacity:0;transform:translate3d(0,-4%,0) scale(.96)}
.journal-preview.is-seq .journal-feat{opacity:.35;transition:opacity .45s ease,transform .5s var(--fx-ease-out)}
.journal-preview.is-seq .journal-feat.is-active{opacity:1}
.journal-preview.is-seq .phone-dots{display:flex;gap:16px;margin-top:28px;align-items:center}
.phone-dots i{display:block;width:8px;height:8px;border-radius:99px;background:rgba(45,62,80,.18);
  transition:transform .4s var(--fx-ease-out),background-color .3s}
.phone-dots i.is-active{transform:scaleX(2.6);background:var(--link-blue)}
/* Mobile d'abord : même formule que la démonstration. L'iPhone prend la
   hauteur de l'écran, la légende et ses points flottent en carte dépolie
   sur le bas du téléphone. La mascotte, sans place pour se poser, s'efface. */
@media(max-width:968px){
  .journal-preview.is-seq .journal-head{padding-top:64px}
  .journal-preview.is-seq .journal-stage{align-items:flex-start;padding-top:calc(var(--nav-h) + 10px)}
  .journal-preview.is-seq .journal-stage>.container{position:relative;height:100%;padding:0 14px}
  .journal-preview.is-seq .journal-grid{display:block;height:100%}
  .journal-preview.is-seq .journal-visual{display:flex;justify-content:center}
  .journal-preview.is-seq .journal-mascot{display:none}
  .journal-preview.is-seq .phone{height:min(calc(100vh - var(--nav-h) - 26px),720px);height:min(calc(100svh - var(--nav-h) - 26px),720px);max-width:none}
  .journal-preview.is-seq .journal-text{position:absolute;left:14px;right:14px;bottom:16px;z-index:4;padding:14px 16px 12px;border-radius:22px;
    background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:0 16px 40px rgba(45,62,80,.18),0 2px 8px rgba(45,62,80,.08)}
  .journal-preview.is-seq .journal-features{display:grid;width:100%}
  .journal-preview.is-seq .journal-feat{grid-area:1 / 1;gap:12px;opacity:0;transform:translate3d(0,8px,0)}
  .journal-preview.is-seq .journal-feat.is-active{opacity:1;transform:none;transition-delay:.1s}
  .journal-preview.is-seq .journal-feat-icon{width:42px;height:42px;font-size:1.2rem;border-radius:13px}
  .journal-preview.is-seq .journal-feat h3{font-size:1.02rem}
  .journal-preview.is-seq .journal-feat p{font-size:.86rem;line-height:1.48}
  .journal-preview.is-seq .phone-dots{justify-content:center;margin-top:10px}
}


/* =====================================================================
   7. Le score qui « se calcule » sous les yeux
   ===================================================================== */
.scale-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;
  border-radius:50%;background:var(--score-green);color:#fff;font-size:.8rem;vertical-align:2px}
@keyframes fx-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
html.fx .score-scale.sc-armed .scale-head>*{opacity:0;transition:opacity .4s ease}
html.fx .score-scale.sc-loading .scale-head>span{opacity:1}
html.fx .score-scale.sc-armed .scale-seg{position:relative;overflow:hidden}
html.fx .score-scale.sc-armed .scale-seg>span{opacity:0;transition:opacity .4s ease .1s}
html.fx .score-scale.sc-armed .scale-seg::before{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,#E6ECF2 35%,#F7F9FB 50%,#E6ECF2 65%);background-size:220% 100%;
  animation:fx-shimmer 1.2s linear infinite;transition:opacity .45s ease}
html.fx .score-scale.sc-armed .scale-seg.is-lit::before{opacity:0}
html.fx .score-scale.sc-armed .scale-seg.is-lit>span{opacity:1}
html.fx .score-scale.sc-armed .scale-head>strong.is-lit{opacity:1}
html.fx .score-scale.sc-armed .scale-head>strong.is-lit .scale-check{animation:fx-check .5s var(--fx-ease-pop) both}
@keyframes fx-check{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}

/* =====================================================================
   8. FAQ : accordéon fluide (amélioration progressive des <details>)
   ===================================================================== */
.faq-enh .faq-a{display:grid;grid-template-rows:0fr;margin-top:calc(-1 * var(--sp-sm));
  transition:grid-template-rows .4s var(--fx-ease-out)}
.faq-enh .faq-q.is-open .faq-a{grid-template-rows:1fr}
.faq-enh .faq-a-in{overflow:hidden;min-height:0}
.faq-enh .faq-a-in>p{margin-top:0;opacity:0;transform:translate3d(0,-6px,0);transition:opacity .3s ease,transform .4s var(--fx-ease-out)}
.faq-enh .faq-q.is-open .faq-a-in>p{opacity:1;transform:none}
.faq-enh .faq-q[open]:not(.is-open) summary::after{content:'+';color:var(--text-tertiary)}

/* =====================================================================
   9. Les boutons de l'appel final arrivent en grand et se posent
   ===================================================================== */
html.fx .cta-buttons>a{position:relative;transform-origin:50% 60%}
html.fx .cta-buttons>a::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 34px 10px rgba(111,209,149,.55),0 0 70px 18px rgba(91,159,237,.25);opacity:var(--halo,0)}

/* =====================================================================
   10. Pastille « Télécharger » flottante (mobile) et volet (ordinateur)
   ===================================================================== */
.dl-pill{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:150;
  display:inline-flex;align-items:center;gap:10px;padding:13px 22px 13px 16px;border-radius:999px;
  background:var(--text-primary);color:#fff!important;font-family:'Fredoka',sans-serif;font-weight:700;font-size:.95rem;
  box-shadow:0 12px 30px rgba(45,62,80,.32),0 2px 6px rgba(45,62,80,.2);
  transform:translate3d(-50%,160%,0);opacity:0;transition:transform .5s var(--fx-ease-out),opacity .3s ease;pointer-events:none}
.dl-pill.is-shown{transform:translate3d(-50%,0,0);opacity:1;pointer-events:auto}
html.fx-pinned .dl-pill.is-shown{transform:translate3d(-50%,160%,0);opacity:0;pointer-events:none}
.dl-pill img{width:28px;height:28px;border-radius:8px}
.dl-pill small{display:block;font-family:'M PLUS Rounded 1c',sans-serif;font-weight:600;font-size:.7rem;opacity:.7;line-height:1.1}
.dl-pill span{line-height:1.15}
.dl-pill[hidden]{display:none}
@media(min-width:969px){.dl-pill{display:none}}

.sheet{position:fixed;inset:0;z-index:300;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-veil{position:absolute;inset:0;background:rgba(23,33,45,.48);opacity:0;transition:opacity var(--fx-veil) ease}
.sheet.is-open .sheet-veil{opacity:1}
.sheet-panel{position:relative;width:min(600px,100%);background:var(--surface);border-radius:30px 30px 0 0;
  padding:30px 36px calc(34px + env(safe-area-inset-bottom));box-shadow:0 -24px 70px rgba(23,33,45,.22);transform:translate3d(0,100%,0)}
.sheet.is-open .sheet-panel{animation:fx-sheet-in var(--fx-sheet-in) var(--fx-ease-out) forwards}
.sheet.is-closing .sheet-veil{opacity:0}
.sheet.is-closing .sheet-panel{animation:fx-sheet-out var(--fx-sheet-out) cubic-bezier(.4,0,1,1) forwards}
@keyframes fx-sheet-in{0%{transform:translate3d(0,100%,0)}68%{transform:translate3d(0,-6px,0)}100%{transform:none}}
@keyframes fx-sheet-out{from{transform:none}to{transform:translate3d(0,100%,0)}}
.sheet-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border:none;border-radius:50%;cursor:pointer;
  background:var(--bg);color:var(--text-secondary);font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .2s}
.sheet-close:hover{background:#e3e9f0;color:var(--text-primary)}
.sheet-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;padding-right:44px}
.sheet-head img{width:56px;height:auto}
.sheet-panel .sheet-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.55rem;letter-spacing:-.5px;line-height:1.2}
.sheet-intro{color:var(--text-secondary);font-weight:500;margin-bottom:22px}
.sheet-body{display:flex;align-items:center;gap:28px}
.sheet-qr{flex-shrink:0;width:168px;height:168px;padding:10px;border-radius:20px;background:#fff;border:1px solid rgba(45,62,80,.1)}
.sheet-badges{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.sheet-badges a{justify-content:flex-start}
.sheet-qr-caption{margin-top:8px;font-size:.82rem;color:var(--text-tertiary);text-align:center}
@media(max-width:560px){.sheet-body{flex-direction:column}.sheet-qr-wrap{display:none}.sheet-badges{width:100%}}

/* =====================================================================
   11. Micro-transitions (inspirées de transitions.dev)
   ---------------------------------------------------------------------
   Une seule par endroit, courte, et jamais en boucle.
   ===================================================================== */

/* — La note 4,3 : chiffres qui basculent avec un flou, en décalé — */
@keyframes fx-digit{from{opacity:0;transform:translate3d(0,.55em,0);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
html.fx .digit{display:inline-block;animation:fx-digit .6s var(--fx-ease-out) both;animation-delay:calc(.55s + var(--i) * 70ms)}

/* — Un passage de lumière sur « Retrouvez votre énergie. » — */
@keyframes fx-shine{from{background-position:130% 0,0 0}to{background-position:-60% 0,0 0}}
html.fx .hero h1 .highlight{background-image:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.85) 50%,transparent 58%),linear-gradient(135deg,var(--score-green),var(--link-blue));
  background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:130% 0,0 0;animation:fx-shine 1.6s ease-in-out 1.1s 1 both}

/* — Légendes qui changent avec un flou (mobile) — */
@media(max-width:968px){
  .features.is-story .feature-card,.journal-preview.is-seq .journal-feat{filter:blur(5px);transition:opacity .4s ease,transform .45s var(--fx-ease-out),filter .45s ease}
  .features.is-story .feature-card.is-active,.journal-preview.is-seq .journal-feat.is-active{filter:blur(0)}
}

/* — FAQ : le + pivote en × — */
.faq-enh .faq-q summary::after{content:'+';transition:transform .4s var(--fx-ease-pop),color .2s}
.faq-enh .faq-q[open] summary::after,.faq-enh .faq-q[open]:not(.is-open) summary::after{content:'+'}
.faq-enh .faq-q.is-open summary::after{transform:translateY(-50%) rotate(135deg);color:var(--link-blue)}

/* — iPhone qui suit la souris (ordinateur) : inclinaison et reflet — */
.tilt-glare{position:absolute;inset:0;border-radius:16cqw;pointer-events:none;z-index:5;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.28),transparent 45%)}
.is-tilting .tilt-glare{opacity:1}

/* — Badge « Nouveau » qui rebondit, coches qui apparaissent — */
.more-new{display:inline-block}
html.fx .more-new{transition:transform .6s var(--fx-ease-pop) .35s,opacity .25s ease .35s}
html.fx .more-row.rv-armed .more-new{opacity:0;transform:translate3d(-10px,8px,0) scale(.4) rotate(-8deg)}
html.fx .more-list .ok{transition:transform .5s var(--fx-ease-pop),opacity .3s ease,filter .4s ease}
html.fx .more-list li:nth-child(1) .ok{transition-delay:.45s}
html.fx .more-list li:nth-child(2) .ok{transition-delay:.58s}
html.fx .more-list li:nth-child(3) .ok{transition-delay:.71s}
html.fx .more-row.rv-armed .ok{opacity:0;transform:scale(.3) rotate(-40deg);filter:blur(4px)}

/* — Emojis animés (Noto Emoji Animation, Google, CC BY 4.0) : ils jouent
     une fois à leur apparition, puis au survol. L'emoji fixe reste affiché
     tant que l'animation n'est pas prête, et sans JavaScript. — */
[data-lottie]{position:relative}
.lot{position:absolute;inset:14%;pointer-events:none}
.has-lottie>.emo{visibility:hidden}

/* =====================================================================
   12. Avis des utilisateurs (vrais avis App Store, reproduits tels quels)
   ===================================================================== */
.avis{padding:100px 0;background:var(--surface)}
.avis-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:52px;align-items:stretch}
.avis-card{position:relative;margin:0;padding:30px 28px 26px;border-radius:26px;background:#fff;box-shadow:0 14px 40px rgba(45,62,80,.07);display:flex;flex-direction:column}
.avis-card::before{content:'“';position:absolute;top:6px;right:22px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:5.5rem;line-height:1;color:rgba(111,209,149,.22)}
.avis-stars{color:#F5A623;letter-spacing:2px;font-size:1.05rem}
.avis-card blockquote{margin:14px 0 18px;flex:1}
.avis-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.15rem;color:var(--text-primary);margin-bottom:8px}
.avis-card blockquote p:not(.avis-title){color:var(--text-secondary);line-height:1.65;font-weight:500}
.avis-card figcaption{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid rgba(45,62,80,.08)}
.avis-card figcaption strong{font-family:'Fredoka',sans-serif;font-weight:700;color:var(--text-primary)}
.avis-card figcaption span{font-size:.85rem;color:var(--text-tertiary)}
.avis-score{align-items:center;justify-content:center;text-align:center;background:linear-gradient(160deg,#6FD195,#4FBD8F);color:#fff;box-shadow:0 18px 44px rgba(79,189,143,.3)}
.avis-score::before{display:none}
.avis-big{font-family:'Fredoka',sans-serif;font-weight:700;font-size:4.2rem;line-height:1}
.avis-big span{font-size:1.4rem;opacity:.8}
.avis-score .avis-stars{color:#fff;margin:8px 0 6px;font-size:1.3rem}
.avis-score p{font-weight:600}
.avis-score a{margin-top:16px;color:#fff!important;font-weight:700;padding:10px 18px;border-radius:14px;background:rgba(255,255,255,.18);box-shadow:0 4px 0 rgba(0,0,0,.08)}
.avis-note{margin-top:22px;text-align:center;font-size:.85rem;color:var(--text-tertiary)}
@media(max-width:968px){
  .avis{padding:70px 0}
  .avis-grid{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .avis-card{padding:26px 22px 22px}
}

/* — Mascotte du journal (ordinateur) : posée à gauche du téléphone, sans le chevaucher — */
@media(min-width:969px){
  .journal-preview.is-seq .journal-mascot{right:auto;left:-128px;bottom:36px;width:116px;height:auto}
}

/* =====================================================================
   13. Le guide gratuit, mis en avant dans « Pour aller plus loin »
   ===================================================================== */
.home-guide{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;max-width:840px;margin:48px auto 0;padding:26px 30px;border-radius:28px;
  background:linear-gradient(160deg,#6FD195,#4FBD8F);color:#fff;text-decoration:none;box-shadow:0 18px 44px rgba(79,189,143,.28);transition:transform .2s ease,box-shadow .2s ease}
.home-guide:hover{transform:translateY(-3px);box-shadow:0 24px 52px rgba(79,189,143,.34);color:#fff}
.home-guide img{width:150px;height:auto;border-radius:10px;box-shadow:0 12px 28px rgba(20,70,45,.3);transform:rotate(-3deg)}
.home-guide-text{display:flex;flex-direction:column;gap:6px}
.home-guide-kicker{font-family:'Fredoka',sans-serif;font-weight:700;font-size:.74rem;letter-spacing:1.6px;text-transform:uppercase;opacity:.9}
.home-guide-title{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.45rem;line-height:1.2}
.home-guide-sub{font-weight:500;opacity:.95;line-height:1.55}
.home-guide-cta{margin-top:6px;align-self:flex-start;padding:9px 16px;border-radius:14px;background:rgba(255,255,255,.2);font-weight:700}
.home-guide+.articles-list{margin-top:28px}
@media(max-width:768px){
  .home-guide{grid-template-columns:96px 1fr;gap:18px;padding:20px;margin-top:36px}
  .home-guide img{width:96px}
  .home-guide-title{font-size:1.15rem}
  .home-guide-sub{font-size:.9rem}
}

/* — Réduire les animations : tout revient à l'état posé — */
@media(prefers-reduced-motion:reduce){
  .sheet-panel,.sheet.is-open .sheet-panel,.sheet.is-closing .sheet-panel{animation:none!important;transform:none!important}
  .sheet-veil,.dl-pill{transition:none!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-phone,.hero-mascot,.journal-mascot,.cta-mascot,.hero-badge .dot{animation:none!important}
}