/* ============================================================
   Cinq sur Cinq : Launch Site 2
   Design language ported from reviewharvest.com:
   forest ink, single green accent, mint/cream tints, 10px radii,
   Instrument Sans, pill-highlighted headline, generous white space.
   ============================================================ */

:root{
  --ink:#002315;
  --ink-70:rgba(0,35,21,.70);
  --ink-55:rgba(0,35,21,.55);
  --ink-12:rgba(0,35,21,.12);
  --ink-08:rgba(0,35,21,.08);
  --green:#01b859;
  --green-light:#29792c;
  --green-bright:#019e4c;
  --green-ink:#15853a;
  --mint:#e8f1ec;
  --mint-bg:#f2fbf2;
  --cream:#fbf5e4;
  --sky:#d1e9ff;
  --gold:#ffc847;
  --white:#fff;
  --maxw:1216px;
  --r:10px;
  --r-lg:16px;
  --r-xl:24px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sec{padding:80px 0}
.sec-sm{padding:56px 0}
/* La bande des industries et la section qui suit se touchaient sur
   136 px de vide (56 dessous + 80 dessus). Resserre a 88, sans
   changer l'espacement des autres sections. */
.sec-bande{padding-bottom:32px}
.sec-bande + .sec{padding-top:56px}
.sec-mint{background:var(--mint-bg)}
.sec-cream{background:var(--cream)}
.center{text-align:center}
.balance{text-wrap:balance}

/* ---------- type ---------- */
h1,h2,h3,h4{letter-spacing:-.02em;line-height:1.08;font-weight:700}
h1{font-size:clamp(2.2rem,5.4vw,3.75rem)}
h2{font-size:clamp(1.75rem,3.8vw,2.75rem);line-height:1.12}
h3{font-size:1.2rem;line-height:1.25}
.lead{font-size:1.075rem;color:var(--ink-70);max-width:58ch}
.eyebrow{
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-ink);margin-bottom:14px;display:block
}
.pill-hl{
  display:inline-block;background:var(--green);color:#fff;
  border-radius:10px;padding:4px 12px
}
/* Une seule ligne des que la colonne est assez large. En dessous, la
   colonne prend toute la largeur et la pastille tient d'elle-meme
   jusqu'a environ 480 px, apres quoi elle revient a la ligne : l'y
   forcer imposerait un titre minuscule sur telephone. */
.pill-hl{white-space:nowrap}
.muted{color:var(--ink-55)}
.small{font-size:.9rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r);padding:13px 24px;font-size:1rem;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-bright)}
.btn-mint{background:var(--mint);color:var(--ink)}
/* Au survol le bouton menthe devient vert : son texte suit le bouton
   principal et passe au blanc, sinon les deux ne se ressembleraient
   plus une fois survoles. */
.btn-mint:hover{background:var(--green);color:#fff}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#00351f}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn-row.center{justify-content:center}

/* ---------- entete (reprise de reviewharvest.com) ----------
   Deux menus deroulants au survol et au clavier, deux boutons a droite,
   bascule vers un panneau plein ecran sous 1024 px. */
.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
/* Meme colonne que .wrap : sans quoi le logo pend 20 px a gauche du
   contenu de la page, ce qui se voit maintenant que c'est une image. */
.hdr-in{
  max-width:var(--maxw);margin:0 auto;padding:18px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:24px
}
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
/* Le logo est une image : on fixe la hauteur, la largeur suit le ratio 2.1:1. */
.logo img{display:block;width:auto;height:32px}
@media(min-width:1024px){.logo img{height:36px}}

/* --- navigation bureau --- */
.nav{display:none}
@media(min-width:1024px){.nav{display:flex;align-items:center;gap:28px}}
.nav-link,.drop-btn{
  display:inline-flex;align-items:center;gap:5px;min-height:44px;
  font-size:1rem;font-weight:300;color:#222;white-space:nowrap;
  transition:color .15s ease
}
.nav-link:hover,.drop-btn:hover,.drop[aria-expanded=true] .drop-btn{color:var(--green-ink)}
.drop-btn svg{width:12px;height:12px;transition:transform .15s ease}
.drop.open .drop-btn svg{transform:rotate(180deg)}

.drop{position:relative}
.drop-menu{
  position:absolute;left:0;top:100%;z-index:50;margin-top:8px;min-width:240px;
  border-radius:12px;border:1px solid rgba(0,0,0,.05);background:#fff;padding:8px;
  box-shadow:0 10px 15px -3px rgba(0,35,21,.12),0 4px 6px -4px rgba(0,35,21,.1);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s
}
.drop:hover .drop-menu,
.drop:focus-within .drop-menu,
.drop.open .drop-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.drop-menu a{display:block;border-radius:8px;padding:8px 12px}
.drop-menu a:hover{background:var(--mint)}
.drop-menu strong{display:block;font-size:.875rem;font-weight:500;color:var(--ink)}
.drop-menu em{display:block;margin-top:2px;font-size:.75rem;font-style:normal;color:var(--ink-55)}

/* --- boutons de droite --- */
.hdr-cta{display:none}
@media(min-width:1024px){.hdr-cta{display:flex;align-items:center;gap:12px}}
.btn-login,.btn-nav{
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  border-radius:10px;padding:9px 15px;font-size:1rem;font-weight:400;
  transition:background .15s ease,color .15s ease
}
.btn-login{border:1px solid rgba(0,0,0,.1);background:#fff;color:var(--ink)}
.btn-login:hover{background:var(--ink);color:#fff}
.btn-nav{background:#000;color:#fff}
.btn-nav:hover{background:var(--green);color:var(--ink)}

/* --- bascule mobile --- */
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:8px;color:var(--ink)
}
.burger svg{width:24px;height:24px}
@media(min-width:1024px){.burger{display:none}}

/* --- panneau mobile --- */
.mnav{display:none;border-top:1px solid rgba(0,0,0,.06);background:#fff}
.mnav.open{display:block}
@media(min-width:1024px){.mnav,.mnav.open{display:none}}
.mnav-in{padding:18px 20px 26px}
.mnav-t{
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-55);padding:10px 0 2px
}
.mnav a{display:block;padding:12px 0;font-size:1.05rem;color:var(--ink)}
.mnav a:hover{color:var(--green-ink)}
.mnav hr{border:0;border-top:1px solid rgba(0,0,0,.08);margin:10px 0}
.mnav-cta{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.mnav-cta a{
  display:flex;align-items:center;justify-content:center;
  border-radius:999px;padding:14px 20px;font-size:1rem;font-weight:500;text-align:center
}
.mnav-cta .m-login{border:1px solid rgba(0,0,0,.15);color:var(--ink)}
.mnav-cta .m-cta{background:#000;color:#fff}

/* ---------- hero ---------- */
/* Un telephone aux vraies proportions (9:19,5) fait 650 px de haut alors
   que la colonne de texte en fait 395 : le heros grimpait a 784 px et le
   titre flottait 143 px sous le haut du telephone. On reduit l'ensemble
   du carrousel a l'echelle plutot que de rogner le telephone, ce qui
   garde ses proportions, et la marge negative recupere la place laissee
   par la mise a l'echelle. */
.hero{padding:48px 0 32px}
@media(min-width:1000px){
  .carrousel{transform:scale(.8);transform-origin:top center;margin-bottom:-136px}
}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media(max-width:999px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.hero h1{margin-bottom:22px;font-size:clamp(2.2rem,calc(4.3vw - 6px),2.9rem)}
/* Sous 480 px le plancher de 2,2 rem ne rentre plus : « Avis Google
   automatises » fait 11,3 fois la taille de police, et la colonne ne
   vaut plus que la fenetre moins 40 px. On calque donc le titre sur la
   fenetre pour garder la pastille sur une seule ligne. */
@media(max-width:480px){.hero h1{font-size:calc(8.6vw - 6px)}}
.trust-line{display:flex;align-items:center;gap:10px;margin-top:30px;font-size:.95rem;font-weight:500}
/* --green (#01b859) : la meme etoile que le logo. */
.trust-line svg{width:20px;height:20px;color:var(--green);flex:0 0 20px}

/* ---------- maquette de telephone (fil de messages) ----------
   Reprise de la maquette fournie. La photo d'origine n'y est pas : c'est
   un cliche de personnes identifiables heberge sur le CDN de la
   reference, qui n'a rien a faire sur ce site. */
/* Proportions d'un vrai telephone (9:19,5, comme un iPhone recent). Le
   fil est court : on le colle en bas avec le champ de saisie, comme
   dans l'application, plutot que de laisser un vide sous les bulles. */
.np-frame{
  background:var(--ink);border-radius:44px;padding:11px;max-width:312px;margin:0 auto;
  box-shadow:0 30px 60px -20px rgba(0,35,21,.45)
}
.np-screen{
  position:relative;
  background:#fff;border-radius:34px;overflow:hidden;
  display:flex;flex-direction:column;aspect-ratio:9/19.5
}

.np-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 20px 6px;font-size:12px;font-weight:700;color:#111
}
/* Ile dynamique : detachee du bord et centree sur l'ecran, pas posee
   dans la rangee d'etat ou sa position depend de la largeur de l'heure. */
.np-notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:88px;height:25px;border-radius:999px;background:var(--ink);z-index:2
}
.np-signal{font-size:11px;letter-spacing:1px;color:#111}

.np-top{
  display:flex;align-items:center;gap:10px;padding:10px 16px 12px;
  border-bottom:1px solid #e6e6e8
}
.np-avatar{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:0 0 34px;border-radius:50%;
  /* Gris iOS, pas le vert de la marque : dans l'application le rond de
     contact est neutre. */
  background:#c7c7cc;color:#fff;font-size:14px;font-weight:700
}
.np-qui{display:flex;flex-direction:column;min-width:0}
.np-qui b{font-size:12px;font-weight:700;color:#111}
.np-qui span{font-size:11px;color:#6b7280}

.np-msgs{display:flex;flex-direction:column;gap:8px;padding:14px 14px 10px;background:#fff;margin-top:auto}
.np-bubble{background:#e9e9eb;border-radius:16px;padding:10px 13px;max-width:88%}
.np-bubble p{font-size:12px;line-height:1.55;color:#111;margin:0}
.np-bubble p + p{margin-top:8px}

.np-lien{background:#e9e9eb;border-radius:14px;overflow:hidden;max-width:88%}
.np-lien-haut{display:block;height:6px;background:#d0d0d4}
.np-lien-corps{display:flex;align-items:center;gap:10px;padding:10px 12px}
.np-lien-t{display:flex;flex-direction:column;flex:1;min-width:0}
.np-lien-t b{
  font-size:13px;font-weight:700;color:#000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.np-lien-t span{
  font-size:11px;color:#8e8e93;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.np-lien-rond{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#b8b8be
}
.np-lien-rond svg{width:14px;height:14px}

/* La mention ARRET fait partie du produit : la loi l'exige dans chaque
   envoi, et le site en fait un argument. Elle reste dans la maquette. */
.np-arret{font-size:11px;line-height:1.5;color:#8e8e93;margin:2px 2px 0}
.np-recu{font-size:10px;color:#8e8e93;text-align:right;margin:0 2px}

.np-bar{
  display:flex;align-items:center;gap:8px;padding:10px 12px 14px;
  border-top:1px solid #e6e6e8;background:#fff
}
.np-field{
  flex:1;border:1px solid #d8d8dc;border-radius:999px;
  padding:7px 14px;font-size:12px;color:#8e8e93
}
.np-send{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  /* Bleu iOS, comme dans l'application, pas le vert de la marque. */
  background:#007aff
}
.np-send svg{width:12px;height:12px}

/* ---------- marquee ---------- */
/* Les pastilles s'effacent aux deux bouts au lieu d'etre tranchees net
   par le bord : un degrade en masque, comme la reference. */
.marquee{
  overflow:hidden;position:relative;padding:14px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)
}
.marquee-track{display:flex;gap:14px;width:max-content;animation:slide 32s linear infinite}
.marquee.rev .marquee-track{animation-direction:reverse}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.chip{
  border:1px solid var(--ink-12);border-radius:999px;padding:9px 20px;
  font-size:.95rem;font-weight:600;white-space:nowrap;background:#fff
}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ---------- cards ---------- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--ink-12);border-radius:var(--r-xl);
  padding:28px;display:flex;flex-direction:column;gap:10px
}
.card-mint{background:var(--mint);border-color:transparent}
.card-cream{background:var(--cream);border-color:transparent}
.card p{color:var(--ink-70);font-size:.98rem}
.icon-sq{
  width:44px;height:44px;border-radius:12px;background:var(--mint);
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:6px
}

/* numbered feature rows */
.numrow{display:grid;grid-template-columns:72px 1fr;gap:22px;padding:30px 0;border-top:1px solid var(--ink-12)}
.numrow:last-child{border-bottom:1px solid var(--ink-12)}
.num{font-size:1.5rem;font-weight:700;color:var(--green-ink);letter-spacing:-.02em}
@media(max-width:620px){.numrow{grid-template-columns:1fr;gap:8px}}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.tl{grid-template-columns:1fr}}
.tl-card{background:#fff;border:1px solid var(--ink-12);border-radius:var(--r-xl);padding:28px}
.tl-tag{
  display:inline-block;background:var(--ink);color:#fff;border-radius:999px;
  padding:5px 14px;font-size:.8rem;font-weight:700;margin-bottom:14px
}

/* case cards */
.case{background:#fff;border:1px solid var(--ink-12);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;gap:14px}
.case-head{font-size:1.15rem;font-weight:700;color:var(--green-ink);letter-spacing:-.02em}
.case-who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--ink-08)}
.avatar{
  width:42px;height:42px;border-radius:999px;background:var(--mint);color:var(--green-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.95rem;flex:0 0 42px
}
.tag{display:inline-block;background:var(--mint);border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600}

/* stat band */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}
@media(max-width:820px){.stat-band{grid-template-columns:repeat(2,1fr)}}
.stat-n{font-size:clamp(1.9rem,4vw,2.6rem);font-weight:700;color:var(--green-ink);letter-spacing:-.03em;line-height:1}
.stat-l{font-size:.92rem;color:var(--ink-70);margin-top:8px}

/* pricing */
.toggle{display:inline-flex;background:var(--mint);border-radius:999px;padding:5px;gap:4px;margin:0 auto 34px}
.toggle button{border-radius:999px;padding:9px 22px;font-size:.94rem;font-weight:600;color:var(--ink-70)}
.toggle button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,35,21,.12)}
.plans{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:880px;margin:0 auto}
@media(max-width:800px){.plans{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--ink-12);border-radius:var(--r-xl);padding:32px;position:relative;display:flex;flex-direction:column}
.plan.pop{border:2px solid var(--green);box-shadow:0 20px 50px -30px rgba(1,184,89,.65)}
.badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green);color:var(--ink);border-radius:999px;padding:5px 16px;font-size:.78rem;font-weight:700
}
.price{font-size:2.9rem;font-weight:700;letter-spacing:-.03em;line-height:1;margin:16px 0 4px}
.price small{font-size:1rem;font-weight:500;color:var(--ink-55);letter-spacing:0}
.feat{list-style:none;display:flex;flex-direction:column;gap:11px;margin:24px 0 28px;font-size:.96rem}
.feat li{display:flex;gap:10px;align-items:flex-start}
.feat li::before{content:"\2713";color:var(--green-ink);font-weight:700;flex:0 0 auto}
.feat li.off{color:var(--ink-55)}
.feat li.off::before{content:"\2014";color:var(--ink-55)}
.plan .btn{margin-top:auto;width:100%}

/* faq : composant repris de reviewharvest.com :
   section blanche, titre a gauche, une carte bordee par question, chevron pivotant */
.faq-sec{background:#fff;padding:80px 0}
@media(min-width:1024px){.faq-sec{padding:112px 0}}
.faq-wrap{max-width:896px;margin:0 auto;padding:0 20px}
@media(min-width:1024px){.faq-wrap{padding:0 32px}}
.faq-wrap h2{
  font-size:clamp(1.875rem,4vw,3rem);font-weight:700;letter-spacing:-.025em;line-height:1.05
}
.faq{margin-top:48px}
.faq details{
  border:1px solid var(--ink-12);border-radius:12px;padding:0 24px;background:#fff
}
.faq details + details{margin-top:12px}
.faq summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:20px 0;font-size:1.125rem;font-weight:600;line-height:1.35
}
.faq summary::-webkit-details-marker{display:none}
.faq .chev{
  width:16px;height:16px;flex:0 0 16px;color:var(--ink-55);
  transition:transform .2s ease
}
.faq details[open] .chev{transform:rotate(180deg)}
.faq details p{padding:0 0 24px;color:var(--ink-70);max-width:70ch}
.faq details p a{color:var(--green-ink);text-decoration:underline}

/* cta band */
.cta-band{background:var(--ink);color:#fff;border-radius:32px;padding:64px 32px;text-align:center}
.cta-band h2{margin-bottom:14px}
.cta-band p{color:rgba(255,255,255,.72);max-width:52ch;margin:0 auto}
.cta-band .btn-primary{background:var(--gold);color:var(--ink)}
.cta-band .btn-primary:hover{background:#ffd775}

/* footer */
.ftr{background:var(--mint);color:var(--ink);padding:64px 0 28px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr;gap:32px}
@media(max-width:1080px){.ftr-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:760px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-55);margin-bottom:14px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:.95rem}
.ftr a:hover{color:var(--green-ink)}
.ftr-bot{
  border-top:1px solid rgba(0,35,21,.14);margin-top:44px;padding-top:20px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.87rem;color:var(--ink-55)
}
.news{display:flex;gap:8px;margin-top:12px}
.news input{
  flex:1;border:1px solid var(--ink-12);border-radius:var(--r);padding:11px 14px;
  font:inherit;font-size:.94rem;background:#fff;color:var(--ink)
}
.news input:focus{outline:2px solid var(--green-ink);outline-offset:1px}

/* misc */
.note{background:var(--cream);border-radius:var(--r-lg);padding:18px 22px;font-size:.94rem;color:var(--ink-70)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:28px}}
.quote{background:#fff;border:1px solid var(--ink-12);border-radius:var(--r-xl);padding:26px;font-size:1.02rem}
.quote::before{content:"\201C";display:block;font-size:2.4rem;line-height:.6;color:var(--green-ink);margin-bottom:12px}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}
.filters button{border:1px solid var(--ink-12);border-radius:999px;padding:8px 18px;font-size:.92rem;font-weight:600}
.filters button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.post{border-bottom:1px solid var(--ink-12);padding:26px 0;display:block}
.post:hover h3{color:var(--green-ink)}
.post .meta{font-size:.85rem;color:var(--ink-55);margin-top:10px}

/* ---------- apparition au défilement ----------
   Porté de reviewharvest.com : la section fond en opacité, puis chaque bloc
   monte de 2rem. Les enfants d'une grille ou d'un flex sont décalés de 120 ms,
   plafonnés à 8 (0,96 s). La classe reveal-on est posée en <head> uniquement
   si l'utilisateur ne demande pas de réduire les animations. */
html.reveal-on section{opacity:0}
html.reveal-on section.is-visible{opacity:1}
html.reveal-on .reveal-item{
  opacity:0;
  transform:translateY(2rem);
  will-change:opacity,transform;
  transition:opacity 1.2s cubic-bezier(.16,.6,.3,1),transform 1.2s cubic-bezier(.16,.6,.3,1);
}
html.reveal-on .reveal-item.reveal-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.reveal-on section,
  html.reveal-on .reveal-item{opacity:1;transform:none;transition:none}
}

/* ---------- cartes douleur (hautes, image en fond) ----------
   Repris de reviewharvest.com : min-height 450px, fond sombre, titre blanc
   28px, texte blanc/90, visuel qui remonte du bas de la carte. */
.pain{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:510px;display:flex;flex-direction:column;
  border-radius:var(--r-xl);padding:32px;
  background:var(--ink);color:#fff;
  background-size:cover;background-repeat:no-repeat;
}
.pain h3{font-size:28px;font-weight:600;letter-spacing:-.02em;color:#fff}
.pain p{margin-top:12px;max-width:30ch;color:rgba(255,255,255,.9);font-size:.98rem}


/* ---------- bloc "Comment on regle ca" ---------- */
.fix{margin-top:80px}
.fix-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:48px}
@media(max-width:940px){.fix-grid{grid-template-columns:1fr;gap:36px}}
.benefit{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--ink-12)}
.benefit:first-child{border-top:0;padding-top:0}
.benefit:last-child{padding-bottom:0}
.benefit svg{width:28px;height:28px;flex:0 0 28px;color:var(--green-light);margin-top:2px}
.benefit h4{font-size:1.3rem;font-weight:600;letter-spacing:-.02em}
.benefit p{margin-top:4px;font-size:.9rem;color:var(--ink-55)}

/* animation etagee des benefices, distincte du reveal general :
   0,7 s ease-out et retards explicites, comme .rh-stagger chez eux */
html.reveal-on .stagger{
  opacity:0;transform:translateY(24px);will-change:opacity,transform;
  transition:opacity .7s ease-out,transform .7s ease-out;
  transition-delay:var(--stagger-delay,0s);
}
html.reveal-on .stagger.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html.reveal-on .stagger{opacity:1;transform:none;transition:none}
}

.fix-media{
  aspect-ratio:16/9;overflow:hidden;border-radius:12px;
  box-shadow:0 25px 50px -12px rgba(0,35,21,.35);
  outline:1px solid rgba(0,0,0,.05);outline-offset:-1px;
  background:var(--mint-bg);display:flex;align-items:center;justify-content:center;padding:28px
}
.fix-media iframe{width:100%;height:100%;border:0}

/* replique de la fiche Google, etat "apres" */
.gcard{
  background:#fff;border-radius:14px;padding:22px 24px;width:100%;max-width:380px;
  box-shadow:0 10px 30px -12px rgba(0,35,21,.3);
  font-family:Roboto,Arial,system-ui,sans-serif
}
.gcard-name{font-size:1.6rem;color:#3c4043;letter-spacing:-.01em;line-height:1.15}
.gcard-meta{margin-top:6px;font-size:1rem;color:#5f6368;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard-meta .gnote{color:#202124;font-weight:500}
.gcard-meta .st{color:#fbbc04;letter-spacing:1px}
.gcard-sub{font-size:1rem;color:#5f6368;margin-top:2px}
.gcard-sub .open{color:#188038}
.gcard-acts{display:flex;gap:34px;margin-top:16px;padding-top:14px;border-top:1px solid #e8eaed}
.gcard-act{color:#1a73e8;font-size:.8rem;letter-spacing:.04em;text-align:center}
.gcard-act svg{width:22px;height:22px;display:block;margin:0 auto 5px}

/* deux CTA pleine largeur */
.cta-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
@media(max-width:620px){.cta-duo{grid-template-columns:1fr}}
.cta-duo .btn{width:100%;padding:16px 24px;font-weight:600}

/* ---------- carrousel d'exemples ----------
   Les fleches flanquent le telephone quand la colonne est assez large,
   et redescendent sous lui avec les points sur petit ecran. */
.carrousel{position:relative}
.carr-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:22px}
.carr-fleche{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;flex:0 0 46px;border-radius:50%;
  background:var(--green);color:#fff;cursor:pointer;
  transition:background .15s ease,transform .15s ease
}
.carr-fleche:hover{background:var(--green-bright)}
.carr-fleche:active{transform:scale(.94)}
.carr-fleche:focus-visible{outline:3px solid var(--green-ink);outline-offset:3px}
.carr-fleche svg{width:22px;height:22px}

.carr-points{display:flex;align-items:center;gap:7px}
.carr-point{
  width:8px;height:8px;border-radius:999px;background:var(--ink-12);
  cursor:pointer;transition:width .2s ease,background .2s ease
}
.carr-point[aria-selected=true]{width:22px;background:var(--green)}
.carr-point:focus-visible{outline:2px solid var(--green-ink);outline-offset:2px}

@media(min-width:1000px){
  /* Calees sur le telephone, pas sur la colonne : 156 px de demi-cadre,
     46 px de fleche et 18 px d'ecart. Le decalage vertical compense la
     rangee de points, qui reste dans le flux sous le telephone. */
  .carr-fleche{position:absolute;top:50%;transform:translateY(-50%);margin-top:-15px}
  .carr-fleche:active{transform:translateY(-50%) scale(.94)}
  .carr-prec{left:calc(50% - 220px)}
  .carr-suiv{right:calc(50% - 220px)}
}
@media(prefers-reduced-motion:reduce){
  .carr-fleche,.carr-point{transition:none}
}

/* ---------- bandeau de consentement aux temoins ----------
   En bas, sans voile ni blocage : la personne peut lire la page avant de
   decider. Les deux boutons ont le meme poids, sinon le refus ne serait
   qu'une figure de style. */
.temoins{
  position:fixed;right:20px;bottom:20px;left:auto;z-index:80;
  display:flex;flex-direction:column;gap:14px;
  width:min(390px,calc(100vw - 40px));padding:18px 20px;
  background:#fff;border:1px solid var(--ink-12);border-radius:var(--r-lg);
  box-shadow:0 18px 44px -16px rgba(0,35,21,.32);
  transform:translateY(14px);opacity:0;transition:transform .26s ease,opacity .26s ease
}
.temoins.on{transform:none;opacity:1}
.temoins-t{min-width:0}
.temoins-t b{display:block;font-size:1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:5px}
.temoins-t p{font-size:.88rem;line-height:1.55;color:var(--ink-70)}
.temoins-t a{color:var(--green-ink);font-weight:600;text-decoration:underline}
.temoins-btns{display:flex;gap:10px}
.temoins-btn{
  flex:1 1 0;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 20px;border-radius:var(--r);
  border:1px solid var(--ink-12);background:#fff;
  font:inherit;font-size:.95rem;font-weight:600;color:var(--ink);cursor:pointer;
  transition:background .15s ease,border-color .15s ease
}
.temoins-btn:hover{background:var(--mint);border-color:var(--green)}
.temoins-oui{background:var(--green);border-color:var(--green);color:#fff}
.temoins-oui:hover{background:var(--green-bright);border-color:var(--green-bright)}
.temoins-btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media(max-width:560px){
  /* Sur telephone le coin n'a plus de sens : la carte prend la largeur. */
  .temoins{left:12px;right:12px;bottom:12px;width:auto;padding:16px}
}
@media(prefers-reduced-motion:reduce){.temoins{transition:none}}

/* ---------- Sept premiers jours : colonne texte + frise ----------
   Meme ossature que la section « split » : deux colonnes qui retombent
   l'une sous l'autre. La frise garde son trait vertical seulement en
   deux colonnes, sinon il pend dans le vide sous le dernier jour. */
.duo-frise{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media(max-width:900px){.duo-frise{grid-template-columns:1fr;gap:28px}}
.duo-frise h2{max-width:22ch}
.duo-frise .lead{margin-top:20px;max-width:34ch}

.chiffre-carte{margin-top:44px;background:var(--mint);border-radius:var(--r-xl);padding:26px}
.chiffre-haut{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.chiffre-haut b{font-size:clamp(2.4rem,5vw,3rem);line-height:1;color:var(--green-ink);font-weight:700}
.chiffre-haut span{max-width:21ch;padding-top:6px;text-align:right;font-size:.88rem;color:var(--ink-55)}
.chiffre-bas{margin-top:22px;padding-top:22px;border-top:1px solid var(--ink-12);font-size:.95rem;color:var(--ink-70)}

.frise{border:1px solid var(--ink-12);border-radius:var(--r-xl);padding:30px}
@media(min-width:1000px){.frise{padding:40px}}
.frise-jour{display:grid;grid-template-columns:1fr;gap:12px}
/* 104px suffisait a « Today ». « Aujourd'hui » fait pres du double, et
   avec white-space:nowrap il debordait sur le titre voisin. */
@media(min-width:600px){.frise-jour{grid-template-columns:152px 1fr;gap:20px}}
.frise-quand{display:flex;flex-direction:column;align-items:flex-start}
.frise-quand b{white-space:nowrap;font-size:1.5rem;font-weight:500;line-height:1;color:var(--ink-55)}
@media(min-width:600px){.frise-quand b{font-size:1.6rem}}
.frise-trait{display:none}
@media(min-width:600px){.frise-trait{display:block;flex:1;width:1px;margin-top:12px;background:var(--green)}}
.frise-quoi{padding-bottom:34px}
.frise-jour:last-child .frise-quoi{padding-bottom:0}
.frise-quoi h3{font-size:1.5rem;font-weight:600;line-height:1.15;color:var(--green-ink)}
@media(min-width:600px){.frise-quoi h3{font-size:1.9rem;line-height:1}}
.frise-quoi p{margin-top:12px;color:var(--ink-70)}