/* Kilometrik — site vitrine. Mêmes couleurs que l'app : sauge, crème, encre chaude. */
:root{
  --fond:#faf8f3; --blanc:#ffffff; --creux:#f2eee6; --bord:#e6e0d4; --bord-fort:#d6cdbd;
  --encre:#2a2724; --doux:#655d52; --discret:#756d60;
  --vert:#4f7355; --vert-doux:#6b8f71; --vert-teinte:#e8efe7; --vert-fort:#3f5c44;
  --terre:#a55c42; --terre-teinte:#f7e7df;
  --rayon:20px; --ombre:0 18px 50px rgba(52,64,54,.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{color-scheme:light;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth;} }
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.6;color:var(--encre);background:var(--fond);-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;height:auto;}
a{color:var(--vert-fort);}
:focus-visible{outline:3px solid var(--vert-doux);outline-offset:3px;border-radius:8px;}
h1,h2,h3{color:var(--encre);font-weight:800;letter-spacing:-.02em;line-height:1.15;}
[id]{scroll-margin-top:80px;}
.cadre{max-width:1120px;margin:0 auto;padding:0 20px;}
.etroit{max-width:760px;}

/* ---- En-tête ---- */
.entete{position:sticky;top:0;z-index:20;background:rgba(250,248,243,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--bord);}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:12px;}
.marque{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--encre);text-decoration:none;}
.marque img{width:34px;height:34px;border-radius:9px;}
.liens{display:flex;align-items:center;gap:22px;}
.liens > a:not(.btn-store){color:var(--doux);font-weight:600;font-size:15px;text-decoration:none;}
.liens > a:not(.btn-store):hover{color:var(--encre);}
@media(max-width:640px){ .liens > a:not(.btn-store){display:none;} }

/* ---- Boutons ---- */
.btn-store{display:inline-flex;align-items:center;gap:10px;background:var(--encre);color:#fff;text-decoration:none;border-radius:14px;padding:10px 20px 10px 14px;min-height:54px;font-weight:700;font-size:18px;line-height:1.1;transition:transform .15s ease,background .15s ease;}
.btn-store svg{width:26px;height:26px;flex:none;}
.btn-store span{display:flex;flex-direction:column;}
.btn-store small{font-size:11px;font-weight:600;opacity:.8;letter-spacing:.02em;}
.btn-store:hover{background:#000;}
.btn-store:active{transform:scale(.97);}
.btn-store-sm{min-height:0;padding:9px 16px;font-size:14px;border-radius:11px;}
.btn-store-clair{background:#fff;color:var(--encre);}
.btn-store-clair:hover{background:var(--fond);}
/* Badge officiel Apple : jamais recoloré ni déformé, 40 px de haut minimum */
.badge-store{display:inline-block;line-height:0;border-radius:9px;transition:transform .15s ease;}
.badge-store img{display:block;height:54px;width:auto;}
.badge-store:active{transform:scale(.97);}
.badge-store:focus-visible{outline:3px solid var(--vert);outline-offset:4px;}
.btn-sec{display:inline-flex;align-items:center;min-height:54px;padding:0 22px;border-radius:14px;border:1.5px solid var(--bord-fort);color:var(--encre);font-weight:700;font-size:16px;text-decoration:none;background:var(--blanc);transition:transform .15s ease,border-color .15s ease;}
.btn-sec:hover{border-color:var(--vert-doux);}
.btn-sec:active{transform:scale(.97);}

/* ---- Ouverture ---- */
.ouverture{padding:56px 0 64px;overflow:hidden;}
.ouverture-grille{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;}
.sur-titre{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-fort);background:var(--vert-teinte);padding:6px 14px;border-radius:999px;margin-bottom:18px;}
.ouverture h1{font-size:clamp(36px,5.4vw,60px);margin-bottom:18px;}
.chapeau{font-size:clamp(17px,2vw,20px);color:var(--doux);max-width:540px;margin-bottom:28px;}
.actions{display:flex;flex-wrap:wrap;gap:12px;}
.mention{margin-top:14px;font-size:14px;color:var(--discret);}
.ouverture-visuel{position:relative;display:flex;justify-content:center;isolation:isolate;}
.ouverture-visuel::before{content:"";position:absolute;inset:-12% -30%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(79,115,85,.2),rgba(79,115,85,0));}
.bulle{position:absolute;background:var(--blanc);border:1px solid var(--bord);border-radius:16px;box-shadow:var(--ombre);padding:12px 16px;display:flex;flex-direction:column;}
.bulle span{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--doux);}
.bulle b{font-size:26px;font-weight:800;color:var(--vert-fort);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.bulle-montant{left:0;bottom:16%;}
@media(max-width:860px){
  .ouverture{padding:36px 0 48px;}
  .ouverture-grille{grid-template-columns:1fr;gap:36px;}
  .bulle-montant{left:4%;}
}

/* ---- Cadre de téléphone autour des captures ---- */
.tel{position:relative;width:min(320px,78vw);aspect-ratio:1320/2868;border-radius:46px;padding:10px;background:#1c1a17;box-shadow:0 30px 70px rgba(30,40,32,.28),inset 0 0 0 2px #4a453e;}
.tel img{width:100%;height:100%;object-fit:cover;border-radius:37px;}
.tel::after{content:"";position:absolute;top:19px;left:50%;width:30%;height:4.2%;transform:translateX(-50%);border-radius:999px;background:#000;}
.tel-petit{width:min(260px,64vw);border-radius:40px;padding:9px;}
.tel-petit img{border-radius:32px;}
.tel-petit::after{top:17px;}

/* ---- Bande des trois étapes ---- */
.bande{background:var(--blanc);border-top:1px solid var(--bord);border-bottom:1px solid var(--bord);padding:48px 0;}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.trois h2{font-size:20px;margin:10px 0 6px;}
.trois p{color:var(--doux);font-size:16px;}
.num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--vert);color:#fff;font-weight:800;}
@media(max-width:760px){ .trois{grid-template-columns:1fr;gap:26px;} }

/* ---- Fonctions ----
   Téléphone et ordinateur sans script : une fonction sous l'autre.
   Ordinateur avec script : le téléphone reste au centre de l'écran et son écran suit le texte. */
.fonctions{padding:72px 0 24px;}
.titre-section{font-size:clamp(28px,3.6vw,40px);text-align:center;margin-bottom:44px;}
.titre-section.eclaire{font-size:clamp(34px,5.6vw,68px);line-height:1.08;letter-spacing:-.035em;max-width:940px;margin:0 auto 40px;padding:4vh 0;}
.eclaire .mot-e{color:#cfc7b9;transition:color .45s ease;}
.eclaire .mot-e.on{color:var(--encre);}
.fonction{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:26px;max-width:520px;margin:0 auto 64px;}
.fonction h3{font-size:clamp(22px,2.6vw,28px);margin-bottom:10px;}
.fonction p{color:var(--doux);}
.pastille-pro{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--terre);background:var(--terre-teinte);padding:5px 12px;border-radius:999px;margin-bottom:12px;}
.recit-scene{display:none;}
.recit-cadre{position:relative;isolation:isolate;}
.recit-cadre::before,.recit-cadre::after{content:"";position:absolute;inset:-16% -55%;z-index:-1;pointer-events:none;transition:opacity 1s ease;}
.recit-cadre::before{background:radial-gradient(closest-side,rgba(79,115,85,.22),rgba(79,115,85,0));}
.recit-cadre::after{background:radial-gradient(closest-side,rgba(165,92,66,.17),rgba(165,92,66,0));opacity:0;}
.recit-scene.pro .recit-cadre::before{opacity:0;}
.recit-scene.pro .recit-cadre::after{opacity:1;}
.tel-scene{width:min(310px,calc((100vh - 170px) * .4603));}
.tel-scene img{position:absolute;top:10px;left:10px;width:calc(100% - 20px);height:calc(100% - 20px);opacity:0;transform:scale(1.035);transition:opacity .7s ease,transform 1.1s cubic-bezier(.16,1,.3,1);}
.tel-scene img.on{opacity:1;transform:none;}
.recit-points{position:absolute;left:calc(100% + 30px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;}
.recit-points span{width:8px;height:8px;border-radius:99px;background:var(--bord-fort);transition:height .6s cubic-bezier(.16,1,.3,1),background-color .4s ease;}
.recit-points span.on{height:28px;background:var(--vert);}
@media(min-width:900px){
  .js .recit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;}
  .js .recit-scene{display:flex;position:sticky;top:66px;height:calc(100vh - 66px);align-items:center;justify-content:center;}
  .js .recit-etapes{padding:6vh 0 16vh;}
  .js .recit .fonction{display:flex;align-items:center;text-align:left;min-height:72vh;max-width:460px;margin:0;opacity:.2;transition:opacity .7s ease;}
  .js .recit .fonction.actif{opacity:1;}
  .js .recit .fonction figure{display:none;}
  .js .recit .fonction h3{font-size:clamp(28px,3vw,40px);letter-spacing:-.03em;margin-bottom:14px;}
  .js .recit .fonction p{font-size:19px;}
}

/* ---- Estimation ---- */
.estimation{background:var(--vert);color:#fff;padding:64px 0;}
.estimation-grille{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.estimation h2{color:#fff;font-size:clamp(28px,3.4vw,38px);margin-bottom:12px;}
.estimation p{color:rgba(255,255,255,.85);}
.estimation a{color:#fff;font-weight:700;}
.carte-calc{background:var(--blanc);color:var(--encre);border-radius:var(--rayon);padding:26px;box-shadow:0 20px 50px rgba(20,32,22,.25);display:flex;flex-direction:column;gap:8px;}
.carte-calc label{font-size:14px;font-weight:700;color:var(--doux);margin-top:6px;}
.carte-calc input,.carte-calc select{width:100%;min-height:50px;padding:10px 14px;border:1.5px solid var(--bord-fort);border-radius:12px;font:inherit;font-size:18px;color:var(--encre);background:var(--blanc);}
.carte-calc input:focus,.carte-calc select:focus{outline:none;border-color:var(--vert);box-shadow:0 0 0 3px var(--vert-teinte);}
.resultat{margin-top:14px;background:var(--vert-teinte);border-radius:14px;padding:16px;text-align:center;}
.resultat span{display:block;font-size:clamp(30px,4.6vw,40px);font-weight:800;color:var(--vert-fort);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.resultat small{font-size:14px;color:var(--doux);}
@media(max-width:760px){ .estimation-grille{grid-template-columns:1fr;} }

/* ---- Tarifs ---- */
.tarifs{padding:72px 0;}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:860px;margin:0 auto;}
.offre{background:var(--blanc);border:1px solid var(--bord);border-radius:var(--rayon);padding:28px;}
.offre h3{font-size:20px;}
.prix{font-size:36px;font-weight:800;letter-spacing:-.02em;margin:8px 0 2px;}
.prix small{font-size:16px;font-weight:600;color:var(--doux);}
.prix-alt{font-size:15px;color:var(--doux);}
.offre ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.offre li{position:relative;padding-left:28px;font-size:16px;}
.offre li::before{content:"";position:absolute;left:0;top:5px;width:18px;height:18px;border-radius:50%;background:var(--vert-teinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233f5c44' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat;}
.offre-pro{border:2px solid var(--vert);box-shadow:var(--ombre);}
.note{margin-top:18px;font-size:14px;color:var(--discret);}
@media(max-width:760px){ .deux{grid-template-columns:1fr;} }

/* ---- Questions ---- */
.faq{padding:24px 0 72px;}
details{background:var(--blanc);border:1px solid var(--bord);border-radius:16px;margin-bottom:12px;}
summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-weight:700;position:relative;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:500;color:var(--vert);}
summary::after{transition:transform .45s cubic-bezier(.16,1,.3,1);}
details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
details.se-ferme summary::after{transform:translateY(-50%);}
details p{padding:0 22px 20px;color:var(--doux);}

/* ---- Fin et pied de page ---- */
.final{background:var(--encre);color:#fff;text-align:center;padding:72px 0;}
.final h2{color:#fff;font-size:clamp(28px,3.6vw,40px);margin:20px 0 28px;}
.icone-finale{margin:0 auto;border-radius:22%;}
.pied{padding:32px 0;font-size:14px;color:var(--discret);text-align:center;}
.pied nav{margin-bottom:8px;}
.pied a{color:var(--doux);}

/* ---- Pages de contenu (calculateur, guide, pages légales) ---- */
.page-tete{padding:48px 0 28px;text-align:center;}
.page-tete h1{font-size:clamp(30px,4.4vw,46px);margin:14px 0 12px;}
.page-tete p{color:var(--doux);max-width:640px;margin:0 auto;}
.contenu{padding:8px 0 56px;}
.contenu h2{font-size:clamp(22px,2.6vw,28px);margin:36px 0 12px;}
.contenu h3{font-size:19px;margin:24px 0 8px;}
.contenu p,.contenu li{color:var(--doux);margin-bottom:12px;}
.contenu ul,.contenu ol{padding-left:22px;margin-bottom:14px;}
.contenu table{width:100%;border-collapse:collapse;margin:16px 0 24px;font-size:15px;background:var(--blanc);border-radius:12px;overflow:hidden;}
.contenu th,.contenu td{border:1px solid var(--bord);padding:10px 12px;text-align:left;}
.contenu th{background:var(--creux);color:var(--encre);}
.encart{background:var(--vert-teinte);border-radius:16px;padding:18px 20px;margin:24px 0;}
.encart p{margin:0;color:var(--encre);}
.appel{background:var(--encre);color:#fff;border-radius:var(--rayon);padding:32px 26px;text-align:center;margin:36px 0;}
.appel h2{color:#fff;margin:0 0 10px;font-size:clamp(22px,2.8vw,28px);}
.appel p{color:rgba(255,255,255,.8);max-width:520px;margin:0 auto 20px;}

/* ---- Mouvement ----
   Les états de départ n'existent que si le script d'animation tourne (classe .js)
   et si l'appareil accepte les animations. Sinon, tout s'affiche directement. */
.entete{transition:border-color .4s ease,background-color .4s ease;}
.js .entete:not(.defile){border-bottom-color:transparent;background:rgba(250,248,243,.7);}
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translate3d(0,40px,0);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 110ms);}
  .js [data-reveal="zoom"]{transform:translate3d(0,40px,0) scale(.9);}
  .js [data-reveal].vu{opacity:1;transform:none;}

  /* Ouverture : le titre monte mot par mot, le téléphone s'élève, la bulle arrive en dernier. */
  .js .ouverture .sur-titre,.js .ouverture .chapeau,.js .ouverture .actions,.js .ouverture .mention{opacity:0;transform:translate3d(0,24px,0);}
  .js .ouverture h1 .mot{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em 0 .12em;margin:-.06em 0 -.12em;}
  .js .ouverture h1 .mot > span{display:inline-block;transform:translate3d(0,110%,0);}
  .js .ouverture .tel{opacity:0;transform:translate3d(0,90px,0) scale(.93);}
  .js .ouverture .bulle-montant{opacity:0;transform:translate3d(-16px,24px,0) scale(.88);}
  .js .ouverture-visuel::before{opacity:0;}
  .charge .ouverture .sur-titre,.charge .ouverture .chapeau,.charge .ouverture .actions,.charge .ouverture .mention{opacity:1;transform:none;transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1);}
  .charge .ouverture .sur-titre{transition-delay:.05s;}
  .charge .ouverture h1 .mot > span{transform:none;transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(.12s + var(--i) * 70ms);}
  .charge .ouverture .chapeau{transition-delay:.55s;}
  .charge .ouverture .actions{transition-delay:.68s;}
  .charge .ouverture .mention{transition-delay:.8s;}
  .charge .ouverture .tel{opacity:1;transform:none;transition:opacity 1.1s ease .2s,transform 1.6s cubic-bezier(.16,1,.3,1) .2s;}
  .charge .ouverture .bulle-montant{opacity:1;transform:none;transition:opacity .7s ease .95s,transform 1s cubic-bezier(.34,1.56,.64,1) .95s;}
  .charge .ouverture-visuel::before{opacity:1;transition:opacity 2s ease .3s;}
  @media(min-width:861px){ .ouverture-texte,.ouverture-visuel{will-change:transform;} }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .offre{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s ease;}
  .offre:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(52,64,54,.16);}
  .badge-store:hover:not(:active){transform:translateY(-2px);}
}
@media (prefers-reduced-motion:reduce){
  .tel-scene img,.js .recit .fonction,.recit-points span,.recit-cadre::before,.recit-cadre::after{transition:none;}
}