/* ============================================================
   Nauxilia — feuille de style
   Une seule échelle typographique fluide, une seule palette,
   un seul rythme d'espacement. Les règles sont classées par
   composant : rien n'est réécrit plus bas dans le fichier.
   ============================================================ */

:root{
  /* palette */
  --ink:#0B1220;          /* titres, aplats sombres */
  --body:#4A5361;         /* texte courant */
  --muted:#78818E;        /* mentions, légendes */
  --line:#E4E9EF;         /* filets */
  --line-soft:#EEF1F5;
  --surface:#F7F9FB;      /* sections alternées */
  --white:#fff;
  --accent:#1A56DB;
  --accent-dark:#1345B0;
  --accent-soft:#EFF4FE;
  --accent-line:#CBDAF9;
  --ok:#0E7C5A;

  /* ombres — discrètes, jamais colorées */
  --sh-1:0 1px 2px rgba(11,18,32,.05);
  --sh-2:0 2px 4px -2px rgba(11,18,32,.06), 0 6px 20px -8px rgba(11,18,32,.10);
  --sh-3:0 10px 40px -16px rgba(11,18,32,.24);

  /* typographie fluide : une taille par niveau, interpolée */
  --h1:clamp(2.3rem, 1.45rem + 3.4vw, 3.6rem);
  --h2:clamp(1.65rem, 1.25rem + 1.6vw, 2.35rem);
  --h3:clamp(1.05rem, .98rem + .3vw, 1.2rem);
  --lead:clamp(1.02rem, .96rem + .34vw, 1.2rem);
  --text:1rem;
  --small:.875rem;

  /* rythme */
  --sec:clamp(64px, 7vw, 104px);
  --max:1140px;
  --radius:12px;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{font-family:var(--font); background:var(--white); color:var(--body);
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--ink); line-height:1.14; letter-spacing:-.022em; font-weight:700}
h1{font-size:var(--h1); letter-spacing:-.03em}
h2{font-size:var(--h2)}
h3{font-size:var(--h3); letter-spacing:-.015em}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
::selection{background:var(--accent-soft); color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.narrow{max-width:820px; margin-left:auto; margin-right:auto}

/* ---------------- boutons ---------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:inherit; font-weight:600; font-size:15px; line-height:1; letter-spacing:-.01em;
  padding:13px 22px; border-radius:9px; border:1px solid transparent; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 1px 2px rgba(26,86,219,.28)}
.btn-primary:hover{background:var(--accent-dark); box-shadow:0 4px 14px -4px rgba(26,86,219,.45)}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line); box-shadow:var(--sh-1)}
.btn-ghost:hover{border-color:#C4CCD7; background:#FCFDFE}
.btn-dark{background:var(--ink); color:#fff}
.btn-dark:hover{background:#1A2536}
.btn-lg{padding:15px 28px; font-size:16px}
.btn-full{width:100%}
.btn:active{transform:translateY(1px)}

/* ---------------- en-tête ---------------- */
header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:32px; height:68px}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:18px;
  color:var(--ink); letter-spacing:-.03em}
.logo-mark{width:28px; height:28px; flex:none; display:block}
.nav-links{display:flex; gap:28px}
.nav-links a{font-size:15px; color:var(--body); font-weight:500; padding:4px 0; position:relative}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink); font-weight:600}
.nav-links a.on::after{content:""; position:absolute; left:0; right:0; bottom:-24px;
  height:2px; background:var(--accent)}
.nav-cta{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav-cta .btn{padding:10px 17px; font-size:14.5px}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; cursor:pointer}

/* ---------------- sections ---------------- */
section{padding:var(--sec) 0}
.alt{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.sec-head{max-width:680px; margin:0 auto clamp(38px,4vw,56px); text-align:center}
.sec-head h2{margin-bottom:14px}
.sec-head p{font-size:var(--lead); color:var(--body)}
.sec-head.left{margin-left:0; text-align:left}

.kicker{font-size:12.5px; font-weight:700; color:var(--accent); text-transform:uppercase;
  letter-spacing:.1em; margin-bottom:14px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line);
  padding:6px 13px; border-radius:100px; margin-bottom:22px; letter-spacing:-.01em}

/* ---------------- hero ---------------- */
.hero{position:relative; padding:clamp(72px,8vw,116px) 0 clamp(60px,6vw,88px);
  border-bottom:1px solid var(--line); text-align:center; overflow:hidden}
.hero::before{content:""; position:absolute; inset:-200px 0 auto; height:520px; z-index:0;
  background:radial-gradient(620px 300px at 50% 200px, rgba(26,86,219,.09), transparent 70%)}
.hero .wrap{position:relative; z-index:1}
.hero-solo{max-width:860px; margin:0 auto}
.hero h1{margin-bottom:22px; text-wrap:balance}
.hero .lead{font-size:var(--lead); color:var(--body); max-width:660px; margin:0 auto 32px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.hero-note{margin-top:22px; font-size:var(--small); color:var(--muted);
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.hero-note span{display:inline-flex; align-items:center; gap:7px}
.hero-note span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.55}

/* hero des pages produit : titre, une phrase, rien d'autre */
.phero{padding:clamp(60px,7vw,96px) 0 clamp(44px,5vw,64px); text-align:center;
  border-bottom:1px solid var(--line); position:relative; overflow:hidden}
.phero::before{content:""; position:absolute; inset:-220px 0 auto; height:520px; z-index:0;
  background:radial-gradient(560px 280px at 50% 220px, rgba(26,86,219,.08), transparent 70%)}
.phero .wrap{position:relative; z-index:1}
.phero h1{margin:0 auto; max-width:900px; text-wrap:balance}
.phero-sub{font-size:var(--lead); color:var(--body); max-width:620px; margin:20px auto 0;
  text-wrap:balance}
.phero .hero-actions{margin-top:30px}

/* bandeau secteurs */
.strip{padding:24px 0; border-bottom:1px solid var(--line); background:var(--white)}
.strip-in{display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; justify-content:center}
.strip small{font-size:11.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:.12em; font-weight:700}
.strip ul{display:flex; gap:12px 26px; flex-wrap:wrap; list-style:none; justify-content:center}
.strip li{font-size:14.5px; color:var(--ink); font-weight:600; opacity:.62}

/* ---------------- cartes ---------------- */
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.cards-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px;
  box-shadow:var(--sh-1)}
.card h3{margin-bottom:10px}
.card p{font-size:15.5px}
.card-ico{width:38px; height:38px; border-radius:10px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; margin-bottom:16px;
  border:1px solid var(--accent-line)}

/* les deux offres de l'accueil */
.offer{background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px;
  display:flex; flex-direction:column; box-shadow:var(--sh-1);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease}
.offer:hover{box-shadow:var(--sh-2); border-color:#D5DCE6; transform:translateY(-2px)}
.offer-tag{font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px}
.offer h3{font-size:clamp(1.15rem,1rem + .5vw,1.4rem); margin-bottom:12px}
.offer>p{font-size:15.5px; margin-bottom:20px}
.offer-hook{border-left:3px solid var(--accent); background:var(--accent-soft);
  padding:14px 18px; border-radius:0 10px 10px 0; margin-bottom:22px}
.offer-hook p{font-size:15px; color:var(--ink); font-weight:600; line-height:1.5}
.offer ul{list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:26px}
.offer li{font-size:15px; display:flex; gap:10px; align-items:flex-start; line-height:1.5}
.offer li svg{flex:0 0 16px; margin-top:4px; color:var(--accent)}
.offer-foot{margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.offer-price{font-size:13.5px; color:var(--muted)}
.offer-price b{display:block; font-size:26px; color:var(--ink); font-weight:700; letter-spacing:-.03em}

/* étapes numérotées */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; background:#fff; box-shadow:var(--sh-1)}
.steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{padding:30px; border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step-n{font-size:12px; font-weight:700; color:var(--accent); margin-bottom:12px; letter-spacing:.06em}
.step h3{margin-bottom:9px}
.step p{font-size:15px}

/* atouts */
.split{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
.feat{display:flex; gap:15px; padding:24px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--sh-1)}
.feat-ico{flex:0 0 34px; height:34px; border-radius:9px; background:var(--accent-soft);
  color:var(--accent); display:grid; place-items:center; border:1px solid var(--accent-line)}
.feat h3{font-size:16px; margin-bottom:6px}
.feat p{font-size:15px}

/* ---------------- démonstration ---------------- */
.demo-shell{max-width:760px; margin:0 auto}
.demo-side{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
  max-width:900px; margin:36px auto 0}
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; justify-content:center}
.tab{font:inherit; font-size:14px; font-weight:600; padding:8px 16px; border-radius:100px;
  border:1px solid var(--line); background:#fff; color:var(--body); cursor:pointer;
  transition:.16s ease; box-shadow:var(--sh-1)}
.tab:hover{border-color:#C4CCD7; color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.chat{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  box-shadow:var(--sh-3)}
.chat-head{background:var(--ink); padding:14px 18px; display:flex; align-items:center;
  justify-content:space-between}
.chat-head span{color:#fff; font-weight:600; font-size:14.5px}
.chat-live{display:flex; align-items:center; gap:7px; color:#9DB8FF; font-size:11px;
  font-weight:700; letter-spacing:.08em}
.chat-live i{width:6px; height:6px; border-radius:50%; background:#4ADE80; display:block;
  box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.chat-body{padding:20px; display:flex; flex-direction:column; gap:12px; height:318px;
  overflow-y:auto; background:#FCFDFE}
.chat-foot{border-top:1px solid var(--line); padding:13px 18px; display:flex; gap:8px;
  flex-wrap:wrap; background:#fff}
.bub{max-width:86%; padding:11px 14px; border-radius:12px; font-size:14.5px; line-height:1.55}
.bub-bot{background:#fff; color:var(--ink); align-self:flex-start; border:1px solid var(--line);
  border-bottom-left-radius:4px; box-shadow:var(--sh-1)}
.bub-usr{background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px}
.qr{font:inherit; font-size:13.5px; padding:7px 13px; border-radius:100px;
  border:1px solid var(--accent-line); background:var(--white); color:var(--accent);
  cursor:pointer; font-weight:600; transition:.16s ease}
.qr:hover{background:var(--accent-soft)}
.typing{display:flex; gap:4px; padding:13px 15px}
.typing span{width:6px; height:6px; border-radius:50%; background:#B9C1CC; animation:bounce 1.3s infinite}
.typing span:nth-child(2){animation-delay:.16s}
.typing span:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,62%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-5px); opacity:1}}

/* fiche produit dans le chat */
.pcard{display:flex; gap:12px; background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:11px; align-items:center; align-self:flex-start; width:100%; box-shadow:var(--sh-1)}
.pcard-img{flex:0 0 54px; height:54px; border-radius:8px;
  background:linear-gradient(135deg,#E9EEF5,#D8E0EC); display:grid; place-items:center;
  color:#93A0B2; font-size:9.5px; font-weight:700; letter-spacing:.06em}
.pcard-in{flex:1; min-width:0}
.pcard-in b{display:block; font-size:13.5px; color:var(--ink); font-weight:600; margin-bottom:2px}
.pcard-in span{font-size:12.5px; color:var(--muted)}
.pcard-price{font-size:14.5px; font-weight:700; color:var(--ink); white-space:nowrap}

/* ---------------- texte long ---------------- */
.prose{max-width:740px; margin:0 auto}
.prose p{font-size:17px; line-height:1.75; margin-bottom:22px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink); font-weight:600}
.prose h3{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem); margin:42px 0 14px}
.prose h3:first-child{margin-top:0}
.prose .pull{border-left:3px solid var(--accent); padding:6px 0 6px 22px; margin:32px 0}
.prose .pull p{font-size:19px; line-height:1.5; color:var(--ink); font-weight:600; margin:0}

/* ---------------- tarifs ---------------- */
.switch{display:flex; width:max-content; background:var(--surface); border:1px solid var(--line);
  border-radius:100px; padding:4px; gap:4px; margin:0 auto 12px}
.switch button{font:inherit; font-size:14.5px; font-weight:600; padding:9px 20px; border-radius:100px;
  border:none; background:none; color:var(--body); cursor:pointer; transition:.16s ease}
.switch button.on{background:var(--ink); color:#fff; box-shadow:var(--sh-1)}
.switch-note{text-align:center; font-size:14px; color:var(--ok); font-weight:600;
  margin-bottom:40px; min-height:21px}

.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch}
.plan{background:#fff; border:1px solid var(--line); border-radius:14px; padding:30px;
  display:flex; flex-direction:column; position:relative; box-shadow:var(--sh-1)}
.plan.best{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft), var(--sh-2)}
.plan-badge{position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:5px 13px; border-radius:100px; white-space:nowrap}
.plan h3{font-size:17.5px; margin-bottom:6px}
.plan .plan-for{font-size:14px; color:var(--muted); margin-bottom:22px; min-height:42px; line-height:1.5}
.plan-price{display:flex; align-items:baseline; gap:5px; margin-bottom:5px}
.plan-price b{font-size:40px; color:var(--ink); font-weight:700; letter-spacing:-.04em}
.plan-price span{font-size:15px; color:var(--muted)}
.plan-install{font-size:13.5px; margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--line)}
.plan-install .free{color:var(--ok); font-weight:600}
.plan-install .paid{color:var(--body)}
.plan-install s{color:var(--muted); margin-right:6px}
.plan ul{list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:28px}
.plan li{font-size:14.5px; display:flex; gap:10px; align-items:flex-start; color:var(--body); line-height:1.5}
.plan li svg{flex:0 0 16px; margin-top:4px; color:var(--accent)}
.plan li b{color:var(--ink); font-weight:600}
.plan .btn{margin-top:auto}

/* tableau comparatif */
.tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; box-shadow:var(--sh-1)}
table.cmp{width:100%; border-collapse:collapse; min-width:680px}
table.cmp th,table.cmp td{padding:15px 20px; text-align:left; font-size:14.5px;
  border-bottom:1px solid var(--line-soft)}
table.cmp thead th{background:var(--surface); color:var(--ink); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line)}
table.cmp tbody tr:last-child td{border-bottom:none}
table.cmp td:first-child{color:var(--ink); font-weight:600}
table.cmp .yes{color:var(--ok); font-weight:700}
table.cmp .no{color:var(--muted)}

/* ---------------- FAQ ---------------- */
.faq{max-width:780px; margin:0 auto; border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line); padding:20px 0}
details summary{font-weight:600; color:var(--ink); font-size:16.5px; cursor:pointer;
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; font-size:22px; color:var(--muted); font-weight:400;
  flex:0 0 auto; line-height:1; transition:transform .18s ease}
details[open] summary::after{content:"–"}
details summary:hover{color:var(--accent)}
details p{margin-top:12px; font-size:16px; color:var(--body); max-width:70ch}
details p+p{margin-top:10px}

/* ---------------- appel à l'action ---------------- */
.cta{background:var(--ink); color:#fff; padding:clamp(64px,7vw,96px) 0; text-align:center;
  position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:auto 0 -320px; height:560px;
  background:radial-gradient(600px 280px at 50% 100%, rgba(76,125,255,.22), transparent 70%)}
.cta .wrap{position:relative; z-index:1}
.cta h2{color:#fff; margin-bottom:14px; text-wrap:balance}
.cta p{color:#A9B5C7; font-size:var(--lead); margin:0 auto 30px; max-width:600px}
.cta-form{display:flex; gap:10px; flex-wrap:wrap; max-width:620px; margin:0 auto}
.cta-form input,.cta-form select{flex:1; min-width:220px; font:inherit; font-size:15px;
  padding:14px 16px; border-radius:9px; border:1px solid #2C374A; background:#131C2C; color:#fff}
.cta-form input::placeholder{color:#6D7A8D}
.cta-form input:focus,.cta-form select:focus{outline:none; border-color:#4C7DFF;
  box-shadow:0 0 0 3px rgba(76,125,255,.2)}
.cta-form .btn{flex:1 0 100%}
@media (min-width:760px){.cta-form .btn{flex:0 0 auto}}
.cta-form .btn-primary{background:#fff; color:var(--ink); box-shadow:none}
.cta-form .btn-primary:hover{background:#E9EEF5}
.cta-ok{display:none; margin-top:16px; color:#6EE7B7; font-size:15px; font-weight:600}
.cta-legal{margin-top:16px; font-size:13px; color:#7C8899}

/* ---------------- formulaire clair (page contact) ---------------- */
.form-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:32px;
  box-shadow:var(--sh-2)}
.form-card h3{font-size:19px; margin-bottom:8px}
.form-card>p.form-intro{font-size:14.5px; color:var(--muted); margin-bottom:24px}
.field{margin-bottom:18px}
.field label{display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:7px}
.field input,.field select{width:100%; font:inherit; font-size:15px; padding:12px 14px;
  border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease}
.field input:focus,.field select:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.form-note{margin-top:16px; font-size:13px; color:var(--muted)}
.form-alt{margin-top:24px; padding-top:22px; border-top:1px solid var(--line); font-size:14.5px}
.form-alt a{color:var(--accent); font-weight:600}
.form-card .cta-ok{color:var(--ok)}

/* ---------------- pied de page ---------------- */
footer{background:#fff; border-top:1px solid var(--line); padding:56px 0 32px}
.foot-grid{display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:36px; margin-bottom:40px}
.foot-brand p{font-size:14.5px; color:var(--muted); margin-top:14px; max-width:290px}
.foot-col h4{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink);
  margin-bottom:14px; font-weight:700}
.foot-col ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.foot-col a{font-size:14.5px; color:var(--body)}
.foot-col a:hover{color:var(--accent)}
.foot-bot{border-top:1px solid var(--line); padding-top:24px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot-bot p{font-size:13.5px; color:var(--muted)}

/* ============================================================
   TABLETTE ET TÉLÉPHONE
   ============================================================ */
@media (max-width:940px){
  body{font-size:16px}
  .nav{gap:0}
  .nav-links{display:none}
  .nav-links.open{display:flex; position:absolute; top:68px; left:0; right:0; background:#fff;
    flex-direction:column; padding:18px 24px; gap:16px; border-bottom:1px solid var(--line);
    box-shadow:var(--sh-2)}
  .nav-links a.on::after{display:none}
  .nav-toggle{display:block; margin-left:auto}
  .nav-cta{display:none}

  .cards,.split,.demo-side,.steps,.steps-4{grid-template-columns:1fr}
  .step{border-right:none; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  .prose p{font-size:16px}
  .prose .pull p{font-size:17px}
  .chat-body{height:300px}
  details summary{font-size:15.5px}
  details p{font-size:15px}

  /* .cards-2 sert à DEUX choses : les offres de l'accueil, qu'on veut
     comparer côte à côte, et la page contact (déroulé + formulaire),
     qui doit s'empiler. Par défaut on empile ; les offres reprennent
     deux colonnes juste en dessous. */
  .cards-2{grid-template-columns:1fr; gap:28px}

  /* Les deux offres restent côte à côte : on les compare, on ne les
     lit pas l'une après l'autre. Corps de texte resserré en conséquence. */
  .cards-2.offers{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .offers .offer{padding:16px 13px; border-radius:11px}
  .offers .offer h3{font-size:15px}
  .offers .offer>p,.offers .offer-hook p,.offers .offer li{font-size:12px; line-height:1.45;
    overflow-wrap:break-word}
  .offers .offer-hook{padding:10px 12px; margin-bottom:16px}
  .offers .offer li svg{flex:0 0 13px; width:13px; height:13px; margin-top:3px}
  .offers .offer-price{font-size:11.5px}
  .offers .offer-price b{font-size:15px; white-space:nowrap}
  .offers .offer-foot{flex-direction:column; align-items:stretch; gap:10px}
  .offers .offer-foot .btn{width:100%; padding:10px 6px; font-size:12.5px}

  /* Trois formules côte à côte, y compris sur téléphone : comparer
     des cartes empilées oblige à mémoriser. D'où les corps réduits. */
  .plans{grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
  .plan{padding:15px 10px; border-radius:11px}
  .plan h3{font-size:13.5px; margin-bottom:4px}
  .plan .plan-for{font-size:11px; line-height:1.4; margin-bottom:14px; min-height:46px}
  .plan-price{flex-wrap:wrap; gap:0 4px}
  .plan-price b{font-size:22px; letter-spacing:-.03em; white-space:nowrap}
  .plan-price span{font-size:11px; white-space:nowrap}
  .plan-install{font-size:11px; line-height:1.4; margin-bottom:14px; padding-bottom:12px}
  .plan-install s{margin-right:0; white-space:nowrap; display:block}
  .plan-install .free,.plan-install .paid{display:block}
  .plan ul{gap:8px; margin-bottom:16px}
  .plan li{font-size:11px; line-height:1.4; gap:6px; overflow-wrap:break-word}
  .plan li svg{flex:0 0 11px; width:11px; height:11px; margin-top:3px}
  .plan .btn{padding:10px 4px; font-size:12px}
  .plan-badge{font-size:9px; padding:3px 7px; top:-10px; letter-spacing:.04em}

  table.cmp th,table.cmp td{padding:12px 14px; font-size:13px}
}

@media (max-width:560px){
  .wrap{padding:0 18px}
  .form-card{padding:22px 18px}
  .hero-actions{flex-direction:column; align-items:stretch}
  .hero-actions .btn{width:100%}
  .foot-grid{grid-template-columns:1fr}
  .foot-bot{flex-direction:column; gap:8px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
   PAGES PRODUIT — titre, une phrase, puis la démonstration.
   Rien entre les trois : c'est la démonstration qui convainc,
   pas le paragraphe qu'on lui met devant.
   ============================================================ */
.phero-bare{border-bottom:none; padding-bottom:clamp(28px,3vw,40px)}
.phero-bare .kicker{margin-bottom:16px}
.phero-bare h1{font-size:clamp(2.6rem,1.6rem + 4vw,4.2rem)}
.tight{padding-top:clamp(24px,3vw,36px)}
.demo-legend{margin-top:18px; text-align:center; font-size:14px; color:var(--muted);
  max-width:560px; margin-left:auto; margin-right:auto; line-height:1.55}