/* ============================================================
   ALIONSY — site vitrine une page
   Charte v1.1 · Vert Feu Vert #80EE98 · Bleu Route #225779
   Titres Baloo 2 · Texte Nunito Sans
   ============================================================ */

:root{
  --paper:#FAFCFA;
  --card:#FFFFFF;
  --ink:#12232E;
  --ink2:#5C7482;
  --line:#E6EEE8;
  --bleu:#225779;
  --nuit:#0E2A3D;
  --vert:#80EE98;
  --vert-pale:#EDFBF1;
  --vert-ink:#177A3E;
  --shadow:0 18px 44px rgba(14,42,61,.09);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Nunito Sans','Segoe UI',system-ui,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:'Baloo 2','Nunito Sans',sans-serif;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0;
  text-wrap:balance;
}
p{margin:0}

.wrap{max-width:1060px;margin:0 auto;padding:0 26px}
.narrow{max-width:720px}

.eyebrow{
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.7rem;
  color:var(--vert-ink);
}
.lead{color:var(--ink2);font-size:1.1rem}
.small{font-size:.86rem;color:var(--ink2)}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Nunito Sans',sans-serif;font-weight:800;font-size:1.02rem;
  padding:15px 30px;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.btn svg{flex:none}
.btn-vert{background:var(--vert);color:var(--nuit)}
.btn-vert:hover{background:#6FE68A;transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-ghost{background:transparent;color:var(--bleu);border:2px solid var(--line);padding:13px 28px}
.btn-ghost:hover{border-color:var(--bleu);transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btns{display:flex;flex-wrap:wrap;gap:14px}

/* ---------- header ---------- */
.hd{
  position:sticky;top:0;z-index:50;
  background:rgba(250,252,250,0);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,border-color .3s ease,backdrop-filter .3s ease;
}
.hd.stuck{
  background:rgba(250,252,250,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:78px}
.hd-in img{height:38px;width:auto}
.hd-tel{
  font-weight:800;color:var(--bleu);text-decoration:none;font-size:1rem;
  display:inline-flex;align-items:center;gap:9px;font-variant-numeric:tabular-nums;
}
.hd-tel:hover{color:var(--vert-ink)}
.brand-link{display:inline-flex;align-items:center}

/* ---------- sections ---------- */
/* le header est collant : on décale les cibles d'ancre pour qu'il ne
   recouvre pas le titre de la section visée */
#top,section[id]{scroll-margin-top:96px}
@media (max-width:760px){#top,section[id]{scroll-margin-top:80px}}

.sec{padding:108px 0}
@media (max-width:760px){.sec{padding:74px 0}}
.sec-line{border-top:1px solid var(--line)}

.hero{padding:76px 0 0;text-align:center}
.hero h1{font-size:clamp(2.7rem,7vw,5rem);color:var(--bleu);margin:20px 0 0}
.hero h1 em{font-style:normal;color:var(--vert-ink)}
.hero .lead{margin:22px auto 0;max-width:46ch}
.hero .btns{justify-content:center;margin-top:34px}
.hero-car{margin:52px auto 0;max-width:880px}
.hero-car img{width:100%;filter:drop-shadow(0 16px 20px rgba(14,42,61,.07))}
.hero-note{margin-top:14px}

.facts{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:26px;
}
.fact{
  border:1px solid var(--line);background:var(--card);border-radius:999px;
  padding:7px 16px;font-size:.84rem;font-weight:700;color:var(--ink2);
}
.fact b{color:var(--bleu)}

/* ---------- deux colonnes ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
@media (max-width:860px){.duo{grid-template-columns:1fr;gap:36px}}
.duo-flip .duo-img{order:-1}
@media (max-width:860px){.duo-flip .duo-img{order:0}}
.duo-img img{border-radius:22px;width:100%}
.duo h2{font-size:clamp(1.9rem,3.6vw,2.6rem);color:var(--bleu)}
.duo .lead{margin-top:16px}

/* ---------- les 3 atouts ---------- */
.atouts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:22px}
.atout{display:flex;gap:16px;align-items:flex-start}
.atout .ic{
  flex:none;width:44px;height:44px;border-radius:14px;background:var(--vert-pale);
  display:flex;align-items:center;justify-content:center;
}
.atout .ic svg{width:22px;height:22px}
.atout h3{font-size:1.12rem;color:var(--ink)}
.atout p{color:var(--ink2);font-size:.96rem;margin-top:3px}

/* ---------- prix ---------- */
.prix{text-align:center}
.prix h2{font-size:clamp(1.9rem,3.8vw,2.7rem);color:var(--bleu);margin-top:8px}
.prix .lead{margin:18px auto 0;max-width:50ch}
.prix .btns{justify-content:center;margin-top:30px}

.tarifs{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
@media (max-width:760px){.tarifs{grid-template-columns:1fr;gap:18px}}
.tcard{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:30px 30px 24px;text-align:left;
}
.tcard-hd{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.tcard-hd .ic{
  flex:none;width:40px;height:40px;border-radius:13px;background:var(--vert-pale);
  display:flex;align-items:center;justify-content:center;
}
.tcard-hd .ic svg{width:21px;height:21px}
.tcard h3{font-size:1.18rem;color:var(--bleu)}
.trow{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.trow:last-child{border-bottom:0;padding-bottom:4px}
.trow span{font-weight:700;color:var(--ink)}
.trow b{
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.3rem;
  color:var(--bleu);background:var(--vert-pale);border-radius:999px;
  padding:6px 18px;font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tnote{margin-top:26px;text-align:center}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
@media (max-width:860px){.contact{grid-template-columns:1fr;gap:38px}}
.contact h2{font-size:clamp(1.9rem,3.6vw,2.6rem);color:var(--bleu)}
.infos{margin-top:26px;display:grid;gap:18px}
.info{display:flex;gap:14px;align-items:flex-start}
.info .ic{flex:none;width:38px;height:38px;border-radius:12px;background:var(--vert-pale);display:flex;align-items:center;justify-content:center}
.info .ic svg{width:19px;height:19px}
.info b{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink2)}
.info a{color:var(--bleu);text-decoration:none;font-weight:700}
.info a:hover{text-decoration:underline}
.info .num{font-variant-numeric:tabular-nums}

.form-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--shadow)}
.form-card h3{font-size:1.35rem;color:var(--bleu)}
.form-card .small{margin-top:6px}
label{display:block;font-weight:800;font-size:.78rem;letter-spacing:.04em;margin:20px 0 7px;color:var(--ink)}
input{
  width:100%;font:inherit;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;outline:none;
  transition:border-color .16s ease,background-color .16s ease;
}
input:focus{border-color:var(--vert-ink);background:var(--card)}
.form-card .btn{width:100%;margin-top:22px}
.form-ok{display:none;background:var(--vert-pale);color:var(--vert-ink);font-weight:800;
  border-radius:14px;padding:13px 16px;margin-top:14px;font-size:.92rem}

/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);padding:36px 0 46px}
.ft-in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center}
.ft img{height:34px}
.ft .small a{color:var(--ink2)}

/* ---------- animations ---------- */
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero>.wrap>*{animation:rise .7s cubic-bezier(.2,.7,.3,1) both}
.hero>.wrap>*:nth-child(1){animation-delay:.05s}
.hero>.wrap>*:nth-child(2){animation-delay:.15s}
.hero>.wrap>*:nth-child(3){animation-delay:.27s}
.hero>.wrap>*:nth-child(4){animation-delay:.39s}
.hero>.wrap>*:nth-child(5){animation-delay:.5s}
.hero-car{animation:rise .9s cubic-bezier(.2,.7,.3,1) .6s both}

.rv{opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hero>.wrap>*,.hero-car{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .btn{transition:none}
}

/* ---------- barre d'action fixe sur mobile ---------- */
.ctab{display:none}
@media (max-width:760px){
  .ctab{
    display:flex;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(250,252,250,.94);
    backdrop-filter:blur(14px) saturate(1.2);
    border-top:1px solid var(--line);
  }
  .ctab .btn{flex:1;padding:14px 8px;font-size:.97rem}
  .ctab .btn-ghost{background:var(--card)}
  body{padding-bottom:92px}
  /* le num\00E9ro du header ferait doublon avec la barre */
  .hd-tel{display:none}
  .hd-in{height:64px}
  .hd-in img{height:34px}
  .brand-link{min-height:44px}
}

/* ---------- petits écrans ---------- */
@media (max-width:520px){
  .wrap{padding:0 20px}
  .sec{padding:60px 0}
  .hero{padding-top:50px}
  .eyebrow{letter-spacing:.15em;font-size:.66rem}
  .hero h1{font-size:clamp(2.15rem,9.5vw,2.9rem)}
  .hero .lead{font-size:1.02rem}
  .hero .btns{margin-top:28px}
  .btns .btn{width:100%}
  .facts{gap:8px}
  .hero-car{margin-top:40px}
  .duo{gap:30px}
  .tcard{padding:24px 22px 20px}
  .trow b{font-size:1.2rem;padding:5px 15px}
  .form-card{padding:26px 22px;border-radius:22px}
  .info a,.ft .small a{display:inline-flex;align-items:center;min-height:44px}
  .ft-in{justify-content:center;text-align:center}
}

:focus-visible{outline:3px solid var(--vert-ink);outline-offset:3px;border-radius:8px}