/* Landing CSS refactorisé — compatible avec les classes HTML existantes.
   Base desktop fidèle au fichier original ; responsive consolidé. */

:root{--ink:#0f172a;--yellow:#f4b000;--yellow2:#ffd65a;--paper:#fbfbf9;--cream:#fffced;--card-border:#e7e2db;--shadow:0 8px 24px rgba(0,0,0,.125)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Poppins",Arial,sans-serif}.ff-page{padding:12px;background:linear-gradient(180deg,#fff 0%,#fbfbf9 100%)}.ff-surface{overflow:hidden;border-radius:10px 10px 0 0;background:#fff;box-shadow:var(--shadow)}.section{position:relative;width:100%;overflow:hidden}.section + .section{margin-top:100px}.eyebrow{margin:0;font-size:20px;line-height:1.2;font-weight:400}.lead{margin:0;font-size:22px;line-height:1.2;font-weight:400}.yellow-rule{display:block;width:80px;height:5px;margin:8px 0 10px;background:var(--yellow)}.section-copy h2,.actors-heading h2{margin:0;color:var(--ink);font-size:55px;line-height:1.1;letter-spacing:.6px;font-weight:700}.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 48}

/* ========= HERO — mesures recopiées du Dart ========= */
.hero{height:1100px;background:#fff}.hero-gradient{position:absolute;left:0;top:0;width:100%;height:400px;background:linear-gradient(184deg,#f4b000 0%,#ffd65a 35%,#fbfbf9 80%,#fff 100%)}.hero-city{position:absolute;right:0;top:0;width:75%;height:800px;object-fit:cover;border-radius:8px}.topbar{position:absolute;z-index:30;left:0;top:0;width:100%;height:100px;display:flex;align-items:center;justify-content:space-between;padding:0 50px 0 150px}.brand{font:400 45px/1 "Parisienne",cursive;letter-spacing:.4px;text-decoration:none;color:var(--ink)}.topnav{display:flex;align-items:center;gap:0}.topnav>a{padding:10px 20px;text-decoration:none;color:var(--ink);font-size:18px;font-weight:600}.contact-widget{margin-left:70px;min-width:250px;border-radius:999px;background:linear-gradient(180deg,#ffd65a 0%,#f4b000 100%);box-shadow:0 3px 8px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 22px!important;font-size:14px!important}.contact-widget span{font-size:24px;font-weight:400}.hero-copy{position:absolute;left:180px;top:200px;z-index:8}.hero-copy h1{margin:10px 0 0;font-size:55px;line-height:1.1;letter-spacing:.6px;font-weight:700}.hero-copy .lead{margin-top:5px}.download-row{position:absolute;left:140px;top:620px;z-index:12;display:flex;align-items:center;gap:50px}.store-badge{display:block;text-decoration:none;line-height:0}.store-badge.google,.store-badge.apple{width:190px}.store-badge img{display:block;width:100%;height:auto}.phone{position:absolute;width:220px;height:430px;object-fit:cover;border-radius:8px}.phone-left{right:400px;bottom:325px;transform:rotate(-11deg);z-index:10}.phone-right{right:60px;bottom:280px;transform:rotate(11deg);z-index:11}.phone-center{right:250px;bottom:305px;transform:rotate(2deg);z-index:14}.hero-benefits{position:absolute;left:80px;right:80px;bottom:0;height:300px;z-index:20;display:flex;align-items:center;justify-content:center;background:#fffced;border-radius:8px;padding:20px 50px}.hero-benefits article{width:245px;display:flex;flex-direction:column;align-items:center;text-align:center}.hero-benefits>i{width:2px;height:180px;background:#f5ebd7;margin:0 38px}.benefit-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:#ffe68a;color:var(--ink);font-size:40px;line-height:70px}.benefit-icon.seedling{font-family:Georgia,serif;font-size:44px;transform:rotate(-25deg)}.hero-benefits h3{margin:20px 0 14px;font-size:22px;line-height:1.1}.hero-benefits p{margin:0;font-size:20px;line-height:1.2}.hero-character{position:absolute;left:calc(50% + 30px);bottom:0;z-index:25;height:13vh;max-height:140px;width:auto;object-fit:contain;transform:translateX(-50%)}

/* ========= PRIORITÉS + DÉPLOIEMENT — section Dart = 1000 px ========= */
.priorities{height:1000px;background:#fff}.priority-gradient{position:absolute;left:0;right:0;top:260px;height:480px;background:linear-gradient(319deg,#fbfbf9 0%,#ffd65a 10%,#f4b000 30%,#f4b000 37%,#ffd65a 57%,#fbfbf9 100%)}.priorities-copy{position:absolute;left:180px;top:100px;z-index:5}.priorities-copy h2{margin-top:10px}.priority-cards{position:absolute;right:0;top:100px;z-index:10;width:40vw;display:grid;grid-template-columns:320px 320px;gap:20px}.priority-card{width:320px;min-height:120px;display:flex;align-items:center;justify-content:center;gap:30px;padding:5px 18px 10px;border:1px solid var(--card-border);border-radius:6px;background:linear-gradient(180deg,#fff 0%,#fdfcfa 45%,#f6f4f1 100%);box-shadow:0 4px 16px rgba(0,0,0,.094)}.priority-card img{width:80px;height:80px;object-fit:cover;border-radius:8px;flex:0 0 80px}.priority-card h3{margin:0 0 12px;font-size:16px;line-height:1.1}.priority-card p{margin:0;font-size:13px;line-height:1.2}.priority-character{position:absolute;right:0;bottom:250px;height:22vh;max-height:235px;width:auto;object-fit:contain;z-index:7}.deployment-copy{position:absolute;left:180px;top:575px;z-index:12}.deployment-copy h2{margin:10px 0 0;font-size:55px;line-height:1.1}.deployment-copy .lead{margin-top:5px}.deployment-steps{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:14;display:flex;align-items:flex-start;justify-content:center;gap:30px;width:calc(100% - 80px)}.deploy-step{width:230px;flex:0 0 230px}.step-head{display:flex;align-items:flex-end;gap:50px;height:80px}.step-number{width:30px;height:30px;flex:0 0 30px;margin-bottom:5px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ffd65a 0%,#f4b000 100%);border:1px solid #f4b000;box-shadow:0 0 8px rgba(0,0,0,.06);font-size:15px}.step-icon{width:80px;height:80px;flex:0 0 80px;border-radius:50%;display:grid;place-items:center;background:#fbfbf9;border:.3px solid #ffd65a;box-shadow:0 1px 4px rgba(0,0,0,.08);font-size:50px;color:var(--ink)}.deploy-step h3{margin:30px 0 18px;font-size:24px;line-height:1.1}.deploy-step p{margin:0;font-size:20px;line-height:1.2}.deploy-arrow{font-size:30px;margin-top:30px;color:var(--ink)}

/* ========= OUTILS / COMMENT ÇA MARCHE ========= */
.tools{height:1100px;background:#fff}.tools-copy{position:absolute;left:180px;top:50px;z-index:4}.tools-copy h2{margin:10px 0 0;font-size:55px;line-height:1.1}.tools-copy .lead{margin-top:5px}.tools-bg{position:absolute;left:0;top:100px;width:100%;height:100vh;min-height:850px;object-fit:cover;opacity:.30;z-index:1}.how-block{position:absolute;left:0;right:0;top:400px;z-index:5}.how-heading{display:flex;flex-direction:column;align-items:flex-start;width:1040px;margin:0 auto 70px}.how-heading h3{margin:0 0 10px;font-size:26px}.how-heading p{margin:0 0 0 100px;font-size:22px;font-weight:500}.screens-row{display:grid;grid-template-columns:160px 30px 160px 30px 160px 30px 160px;column-gap:40px;align-items:center;justify-content:center}.screens-row figure{margin:0}.screens-row img{display:block;width:160px;height:330px;object-fit:cover;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.2)}.screens-row>span{font-size:30px}.steps-row{display:grid;grid-template-columns:repeat(4,215px);column-gap:50px;justify-content:center;margin-top:28px}.steps-row article{display:flex;align-items:flex-start;gap:20px}.steps-row b{width:35px;height:35px;flex:0 0 35px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#f4b000 0%,#ffd65a 100%);border:1px solid #f4b000;box-shadow:0 0 16px rgba(0,0,0,.094);font-size:15px}.steps-row h4{margin:0 0 18px;font-size:16px;line-height:1.1}.steps-row p{margin:0;font-size:12px;line-height:1.2}

/* ========= ACTEURS + FOOTER ========= */
.actors{height:1200px;background:#fff}.actors-heading{position:absolute;left:0;right:0;top:100px;text-align:center;z-index:5}.actors-heading h2{margin-top:10px}.actors-heading .lead{font-size:22px}.centered{margin:18px auto 16px}.actor-cards{position:absolute;left:50%;top:330px;transform:translateX(-50%);z-index:7;display:flex;gap:30px;align-items:stretch}.actor-cards article{width:300px;border:1px solid var(--card-border);border-radius:6px;background:linear-gradient(180deg,#fff,#f8f6f2);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.094)}.actor-cards img{display:block;width:100%;height:220px;object-fit:cover}.actor-cards div{padding:10px}.actor-cards h3{margin:0 0 18px;font-size:22px;line-height:1.1}.actor-cards p{margin:0;font-size:20px;line-height:1.2}.actors-downloads{position:absolute;left:50%;top:745px;transform:translateX(-50%);z-index:8;display:flex;gap:50px;align-items:center}.actors-gradient{position:absolute;left:0;right:0;bottom:0;height:300px;background:linear-gradient(319deg,#fbfbf9 0%,#ffd65a 20%,#f4b000 50%,#f4b000 60%,#ffd65a 80%,#fbfbf9 100%)}.actors-town{position:absolute;right:0;bottom:120px;width:700px;height:18vh;max-height:195px;object-fit:contain;opacity:.3;z-index:2}.actors-people{position:absolute;left:0;bottom:80px;height:30vh;max-height:325px;width:auto;object-fit:contain;z-index:3}.footer{position:absolute;left:0;right:0;bottom:0;height:130px;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 80px 0 50px;background:#0f172a;color:#fbfbf9}.footer-signature{display:flex;flex-direction:column;gap:4px}.footer-signature strong{font:400 45px/1 "Parisienne",cursive}.footer-signature span{margin-left:100px;font-size:15px}.footer nav{display:flex;align-items:center;gap:40px}.footer nav a{padding:10px;color:#fbfbf9;text-decoration:none;font-size:15px}.footer .social{font-size:30px;padding:4px}


/* Ajustements desktop historiques, conservés pour fidélité */

/* Écrans desktop intermédiaires : réduction progressive, sans zoom global. */
@media (max-width: 1700px) and (min-width: 1401px){
  .ff-page{padding:10px}
  .section + .section{margin-top:88px}
  .topbar{padding-left:8vw;padding-right:3vw}
  .brand{font-size:clamp(38px,2.35vw,45px)}
  .topnav>a{font-size:clamp(15px,1vw,18px);padding:10px 14px}
  .contact-widget{margin-left:32px;min-width:220px}
  .hero{height:1000px}.hero-gradient{height:365px}.hero-city{height:720px;width:74%}
  .hero-copy{left:8.7vw;top:182px}.hero-copy h1{font-size:clamp(46px,2.9vw,55px)}
  .eyebrow{font-size:18px}.lead{font-size:19px}
  .download-row{left:7vw;top:555px;gap:38px}.store-badge.google,.store-badge.apple{width:172px}
  .phone{width:195px;height:381px}.phone-left{right:360px;bottom:298px}.phone-center{right:220px;bottom:282px}.phone-right{right:55px;bottom:260px}
  .hero-benefits{left:55px;right:55px;height:270px;padding:18px 34px}.hero-benefits article{width:220px}.hero-benefits>i{height:160px;margin:0 28px}.benefit-icon{width:62px;height:62px;font-size:35px}.hero-benefits h3{font-size:19px}.hero-benefits p{font-size:17px}
  .priorities{height:930px}.priorities-copy{left:8.7vw}.priority-cards{width:43vw;grid-template-columns:280px 280px}.priority-card{width:280px;gap:20px}.priority-card img{width:70px;height:70px;flex-basis:70px}.priority-gradient{top:245px;height:445px}.deployment-copy{left:8.7vw;top:540px}.deployment-copy h2{font-size:48px}.deployment-steps{gap:20px}.deploy-step{width:205px;flex-basis:205px}.step-head{gap:30px}.deploy-step h3{font-size:21px}.deploy-step p{font-size:17px}
  .tools{height:1020px}.tools-copy{left:8.7vw}.tools-copy h2{font-size:48px}.how-block{top:370px}.how-heading{width:900px;margin-bottom:55px}.how-heading p{font-size:19px}.screens-row{grid-template-columns:145px 26px 145px 26px 145px 26px 145px;column-gap:34px}.screens-row img{width:145px;height:299px}.steps-row{grid-template-columns:repeat(4,190px);column-gap:35px}
  .actors{height:1110px}.actors-heading{top:90px}.actor-cards{top:315px;gap:22px}.actor-cards article{width:265px}.actor-cards img{height:195px}.actor-cards h3{font-size:19px}.actor-cards p{font-size:17px}.actors-downloads{top:700px}.actors-town{width:610px}.footer{padding-left:38px;padding-right:55px}.footer-signature strong{font-size:39px}.footer nav{gap:24px}
}

/* Petit desktop / grande tablette paysage. */
@media (max-width: 1400px) and (min-width: 1101px){
  .ff-page{padding:8px}.section + .section{margin-top:76px}
  .section-copy h2,.actors-heading h2,.deployment-copy h2,.hero-copy h1{font-size:clamp(40px,3.5vw,49px)}
  .eyebrow{font-size:17px}.lead{font-size:18px}
  .topbar{height:84px;padding:0 24px 0 70px}.brand{font-size:36px}.topnav>a{font-size:14px;padding:8px 10px}.contact-widget{margin-left:18px;min-width:190px;padding:12px 16px!important;font-size:12px!important}
  .hero{height:980px}.hero-gradient{height:345px}.hero-city{width:70%;height:660px;opacity:.93}.hero-copy{left:7vw;top:155px}.download-row{left:7vw;top:520px;gap:26px}.store-badge.google,.store-badge.apple{width:155px}
  .phone{width:175px;height:342px}.phone-left{right:330px;bottom:325px}.phone-center{right:200px;bottom:306px}.phone-right{right:50px;bottom:288px}
  .hero-benefits{left:32px;right:32px;height:260px;padding:16px 22px}.hero-benefits article{width:205px}.hero-benefits>i{height:150px;margin:0 20px}.benefit-icon{width:58px;height:58px;font-size:32px}.hero-benefits h3{font-size:17px;margin:15px 0 11px}.hero-benefits p{font-size:15px}.hero-character{max-height:110px}
  .priorities{height:1040px}.priority-gradient{top:300px;height:440px}.priorities-copy{left:7vw;top:75px}.priority-cards{right:2vw;top:90px;width:520px;grid-template-columns:250px 250px}.priority-card{width:250px;min-height:115px;gap:14px;padding:8px 12px}.priority-card img{width:64px;height:64px;flex-basis:64px}.priority-card h3{font-size:15px}.priority-card p{font-size:11px}.priority-character{max-height:180px;bottom:280px}.deployment-copy{left:7vw;top:600px}.deployment-steps{bottom:35px;gap:10px;width:94%}.deploy-step{width:178px;flex-basis:178px}.step-head{height:65px;gap:20px}.step-icon{width:64px;height:64px;flex-basis:64px;font-size:38px}.deploy-step h3{font-size:18px;margin:20px 0 12px}.deploy-step p{font-size:15px}.deploy-arrow{font-size:24px;margin-top:24px}
  .tools{height:1030px}.tools-copy{left:7vw;right:5vw}.tools-copy br{display:none}.how-block{top:385px}.how-heading{width:78%;margin-bottom:45px}.how-heading h3{font-size:24px}.how-heading p{margin-left:6vw;font-size:18px}.screens-row{grid-template-columns:135px 22px 135px 22px 135px 22px 135px;column-gap:24px}.screens-row img{width:135px;height:278px}.steps-row{grid-template-columns:repeat(4,175px);column-gap:22px}.steps-row article{gap:12px}.steps-row h4{font-size:14px}.steps-row p{font-size:11px}
  .actors{height:1120px}.actors-heading{top:75px;padding:0 50px}.actors-heading .lead{font-size:18px}.actor-cards{top:310px;gap:18px}.actor-cards article{width:220px}.actor-cards img{height:162px}.actor-cards h3{font-size:17px;margin-bottom:10px}.actor-cards p{font-size:15px}.actors-downloads{top:650px}.actors-gradient{height:285px}.actors-town{width:540px}.actors-people{max-height:260px}.footer{height:140px;padding:0 35px}.footer-signature strong{font-size:34px}.footer-signature span{margin-left:45px;font-size:12px}.footer nav{gap:12px}.footer nav a{font-size:12px}
}


/* Parcours : chaque téléphone et sa légende forment un groupe */

/* ===== v4 — fidélité Dart : pictogrammes + parcours 4 téléphones responsive ===== */
.material-symbols-rounded{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;font-size:1em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-feature-settings:'liga'}
.benefit-icon{display:flex!important;align-items:center!important;justify-content:center!important;place-items:unset!important;line-height:1!important;padding:0!important;overflow:hidden}
.benefit-icon.material-symbols-outlined,.benefit-icon.material-symbols-rounded{font-size:40px!important;line-height:1!important}
.benefit-icon.seedling{transform:none!important;font-family:inherit!important;font-size:0!important}
.benefit-icon.seedling img{display:block;width:35px;height:35px;object-fit:contain;filter:brightness(0) saturate(100%) invert(7%) sepia(17%) saturate(3027%) hue-rotate(181deg) brightness(93%) contrast(96%)}

/* Chaque écran et son texte forment désormais une unité indivisible. */
.journey-grid{width:1010px;margin:0 auto;display:grid;grid-template-columns:repeat(4,215px);column-gap:50px;align-items:start;justify-content:center}
.journey-step{position:relative;min-width:0;text-align:left}
.journey-step figure{width:160px;height:330px;margin:0 auto 28px;position:relative}
.journey-step figure img{display:block;width:160px;height:330px;object-fit:cover;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.20)}
.journey-step:not(:last-child)::after{content:'→';position:absolute;top:145px;right:-39px;color:var(--ink);font:400 30px/1 Arial,sans-serif}
.journey-copy{display:flex;align-items:flex-start;gap:20px;width:100%}
.journey-copy>b{width:35px;height:35px;flex:0 0 35px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f4b000 0%,#ffd65a 100%);border:1px solid #f4b000;box-shadow:0 0 16px rgba(0,0,0,.094);font-size:15px;line-height:1;font-weight:500}
.journey-copy>div{min-width:0;flex:1}
.journey-copy h4{margin:0 0 18px;font-size:16px;line-height:1.1}
.journey-copy p{margin:0;font-size:12px;line-height:1.2}


/* Ajustements parcours desktop */

@media (max-width:1700px) and (min-width:1401px){
  .benefit-icon.material-symbols-outlined,.benefit-icon.material-symbols-rounded{font-size:35px!important}.benefit-icon.seedling img{width:31px;height:31px}
  .journey-grid{width:865px;grid-template-columns:repeat(4,190px);column-gap:35px}.journey-step figure{width:145px;height:299px;margin-bottom:24px}.journey-step figure img{width:145px;height:299px}.journey-step:not(:last-child)::after{top:133px;right:-27px;font-size:26px}.journey-copy{gap:16px}.journey-copy>b{width:33px;height:33px;flex-basis:33px}.journey-copy h4{font-size:15px;margin-bottom:14px}.journey-copy p{font-size:11.5px}
}
@media (max-width:1400px) and (min-width:1101px){
  .benefit-icon.material-symbols-outlined,.benefit-icon.material-symbols-rounded{font-size:32px!important}.benefit-icon.seedling img{width:29px;height:29px}
  .journey-grid{width:766px;grid-template-columns:repeat(4,175px);column-gap:22px}.journey-step figure{width:135px;height:278px;margin-bottom:22px}.journey-step figure img{width:135px;height:278px}.journey-step:not(:last-child)::after{top:124px;right:-17px;font-size:23px}.journey-copy{gap:12px}.journey-copy>b{width:31px;height:31px;flex-basis:31px;font-size:13px}.journey-copy h4{font-size:14px;margin-bottom:11px}.journey-copy p{font-size:11px}
}


/* Finition des icônes et réseaux sociaux */

/* Pictogrammes : centrage optique et géométrique strict. */
.benefit-icon,
.step-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:0!important;
  line-height:1!important;
  vertical-align:middle!important;
}
.benefit-icon.material-symbols-outlined,
.benefit-icon.material-symbols-rounded,
.step-icon.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-style:normal;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
  white-space:nowrap;
  word-wrap:normal;
  direction:ltr;
  font-feature-settings:'liga';
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  transform:none!important;
}
.benefit-icon.material-symbols-rounded{
  font-family:'Material Symbols Rounded';
}
.benefit-icon.seedling img{
  margin:0!important;
  transform:none!important;
}
.step-number{display:flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}

/* Footer : vrais pictogrammes, pas de caractères typographiques approximatifs. */
.footer .social{width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:6px}
.footer .social img{display:block;width:28px;height:28px;object-fit:contain}

/* Le personnage du premier Stack reste au bord inférieur sans masquer les textes. */
.hero-character{bottom:-10px;max-height:112px;z-index:26}
.hero-benefits article{position:relative;z-index:27}


/* Disposition desktop affinée : priorité aux zones sans collision */

/* ----- Desktop réduit : conserver les deux zones du Stack PRIORITES distinctes. ----- */
@media (max-width:1700px) and (min-width:1101px){
  .priorities{height:1100px}
  .priorities-copy{
    left:clamp(72px,7vw,150px);
    top:90px;
    width:46%;
    max-width:680px;
  }
  .priorities-copy h2{
    font-size:clamp(38px,3.05vw,50px);
    line-height:1.08;
  }
  .priorities-copy .lead{font-size:clamp(16px,1.25vw,20px)}
  .priority-cards{
    right:3.5vw;
    top:90px;
    width:45%;
    max-width:660px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .priority-card{
    width:100%;
    min-width:0;
    gap:clamp(10px,1.4vw,24px);
    padding:10px 12px;
  }
  .priority-card img{width:clamp(58px,4.3vw,76px);height:clamp(58px,4.3vw,76px);flex-basis:clamp(58px,4.3vw,76px)}
  .priority-card h3{font-size:clamp(14px,1vw,16px)}
  .priority-card p{font-size:clamp(10px,.82vw,13px)}
  .priority-gradient{top:300px;height:500px}
  .deployment-copy{left:clamp(72px,7vw,150px);top:650px;right:7vw}
  .deployment-copy h2{font-size:clamp(40px,3.1vw,52px)}
  .deployment-steps{bottom:42px;width:92%;gap:clamp(8px,1.4vw,28px)}
  .deploy-step{width:clamp(150px,13.5vw,220px);flex-basis:clamp(150px,13.5vw,220px)}
  .step-head{gap:clamp(10px,2.3vw,42px)}
  .deploy-step h3{font-size:clamp(17px,1.35vw,22px)}
  .deploy-step p{font-size:clamp(13px,1.05vw,18px)}
  .deploy-arrow{font-size:clamp(20px,1.7vw,28px)}
  .priority-character{bottom:285px;max-height:175px}
}


/* =====================================================================
   TABLETTE 769–1100 PX : blocs de contenu en flux normal
   ===================================================================== */
@media (min-width:769px) and (max-width:1100px) {
  .ff-page{padding:0}.ff-surface{border-radius:0}
  .section + .section{margin-top:64px}
  .eyebrow{font-size:18px}.lead{font-size:19px}
  .section-copy h2,.actors-heading h2,.deployment-copy h2{font-size:clamp(38px,5vw,46px)}

  .topbar{height:90px;padding:0 26px}.brand{font-size:34px}
  .topnav{gap:4px}.topnav>a{font-size:13px;padding:8px}
  .contact-widget{margin-left:8px;min-width:auto;padding:10px 13px!important}
  .contact-widget span{font-size:18px}
  .hero{height:1510px}.hero-gradient{height:420px}
  .hero-city{top:90px;width:100%;height:510px;opacity:.34}
  .hero-copy{left:6vw;right:6vw;top:155px}.hero-copy h1{font-size:46px}
  .download-row{left:6vw;top:545px;gap:24px}
  .store-badge.google,.store-badge.apple{width:165px}
  .phone{width:175px;height:342px}
  .phone-left{right:calc(50% + 110px);bottom:545px}
  .phone-center{right:calc(50% - 55px);bottom:525px}
  .phone-right{right:calc(50% - 235px);bottom:505px}
  .hero-benefits{left:28px;right:28px;height:440px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;padding:28px;align-items:start}
  .hero-benefits>i{display:none}.hero-benefits article{width:auto;min-width:0}
  .benefit-icon{width:60px;height:60px;font-size:34px}
  .hero-benefits h3{font-size:18px;margin:13px 0 8px}.hero-benefits p{font-size:15px}
  .hero-character{display:none}

  .priorities,.tools,.actors{height:auto;min-height:0}
  .priorities{padding:72px 6vw 90px}
  .priority-gradient{top:360px;bottom:0;height:auto}
  .priorities-copy,.deployment-copy,.tools-copy,.how-block,.actors-heading,.actor-cards,.actors-downloads,.actors-gradient,.footer,.priority-cards,.deployment-steps{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none}
  .priorities-copy{max-width:760px}
  .priority-cards{width:min(720px,100%);margin:64px auto 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .priority-card{width:100%;min-width:0}.priority-character{display:none}
  .deployment-copy{margin-top:110px}
  .deployment-steps{width:100%;margin:64px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 70px}
  .deploy-step{width:100%;flex-basis:auto}.step-head{height:80px;justify-content:flex-start;gap:28px}
  .deploy-step h3{margin:24px 0 12px}.deploy-step p{font-size:17px}
  .deploy-arrow{display:none}

  .tools{padding:64px 5vw 88px}.tools-copy{max-width:1050px;margin:0 auto}
  .tools-copy br{display:none}.tools-bg{top:220px;bottom:0;height:auto;min-height:0}
  .how-block{margin:86px auto 0}.how-heading{width:min(900px,100%);margin:0 auto 54px}
  .journey-grid{width:min(760px,100%);grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 64px}
  .journey-step::after{display:none}

  .actors{padding:64px 5vw 0}.actors-heading{padding:0}
  .actor-cards{width:min(900px,100%);margin:60px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
  .actor-cards article{width:100%;min-width:0}
  .actors-downloads{margin:58px auto 0;justify-content:center;gap:28px}
  .actors-gradient{width:calc(100% + 10vw);height:390px;margin:80px -5vw 0}
  .actors-town{bottom:150px}.actors-people{bottom:110px;max-height:260px}
  .footer{width:calc(100% + 10vw);height:170px;margin:0 -5vw;padding:0 30px}
  .footer-signature strong{font-size:34px}.footer-signature span{margin-left:0}
  .footer nav{gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .footer nav a{font-size:12px}
}

/* =====================================================================
   MOBILE <= 768 PX : mise en page fluide, décors maîtrisés
   ===================================================================== */
@media (max-width:768px) {
  .ff-page{padding:0}.ff-surface{border-radius:0;box-shadow:none}
  .section + .section{margin-top:64px}
  .eyebrow{font-size:13px}.lead{font-size:15px}
  .yellow-rule{width:58px;height:4px;margin:7px 0 10px}
  .section-copy h2,.actors-heading h2,.deployment-copy h2{font-size:clamp(31px,9vw,42px);line-height:1.07}

  /* Hero : montage conservé, mais bénéfices à hauteur de leur contenu */
  .topbar{height:auto;min-height:104px;padding:18px 18px 10px;align-items:flex-start;gap:12px}
  .brand{font-size:30px;white-space:nowrap}.topnav{justify-content:flex-end;flex-wrap:wrap;gap:2px}
  .topnav>a{font-size:11px;padding:7px 8px}
  .contact-widget{order:3;margin-left:0;min-width:0;padding:8px 10px!important;font-size:10px!important}
  .contact-widget span{font-size:16px}
  .hero{height:auto;min-height:0;padding-bottom:0}
  .hero-gradient{height:410px}.hero-city{top:110px;width:100%;height:420px;opacity:.26;object-position:65% center}
  .hero-copy{left:24px;right:24px;top:145px}.hero-copy h1{font-size:clamp(34px,10vw,45px);line-height:1.05}
  .hero-copy .lead{font-size:15px}.hero-copy .lead br{display:none}
  .download-row{left:24px;right:24px;top:520px;justify-content:center;gap:16px}
  .store-badge.google,.store-badge.apple{width:min(40vw,155px)}
  .phone{width:132px;height:258px;bottom:auto}
  .phone-left{right:calc(50% + 72px);top:665px}
  .phone-center{right:calc(50% - 58px);top:680px}
  .phone-right{right:calc(50% - 185px);top:695px}
  .hero-benefits{position:relative;left:auto;right:auto;bottom:auto;height:auto;min-height:0;margin:1000px 16px 0;padding:30px 18px 36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 20px;align-items:start}
  .hero-benefits>i{display:none}.hero-benefits article{width:auto;min-width:0;min-height:220px;justify-content:flex-start}
  .benefit-icon{width:54px;height:54px;font-size:30px;margin-bottom:2px}
  .benefit-icon.seedling{font-size:34px}.hero-benefits h3{font-size:16px;margin:16px 0 12px}
  .hero-benefits p{font-size:12px}.hero-character{display:none}

  /* Sections de contenu : ordre naturel, hauteurs automatiques */
  .priorities,.tools,.actors{height:auto;min-height:0}
  .priorities{padding:64px 24px 82px}
  .priority-gradient{top:390px;bottom:0;height:auto;pointer-events:none}
  .priorities-copy,.priority-cards,.deployment-copy,.deployment-steps,.tools-copy,.how-block,.actors-heading,.actor-cards,.actors-downloads,.actors-gradient,.footer{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none}
  .priorities-copy .lead br,.deployment-copy .lead br{display:none}
  .priority-cards{width:100%;margin:56px 0 0;grid-template-columns:1fr;gap:20px}
  .priority-card{width:100%;min-width:0;min-height:132px;justify-content:flex-start;gap:22px;padding:12px 18px}
  .priority-card img{width:72px;height:72px;flex-basis:72px}
  .priority-card h3{font-size:16px;margin-bottom:8px}.priority-card p{font-size:12px}
  .priority-character{display:none}
  .deployment-copy{margin-top:96px}.deployment-copy .lead{margin-top:10px}
  .deployment-steps{width:100%;margin:58px auto 0;display:grid;grid-template-columns:1fr;gap:34px}
  .deploy-step{width:100%;min-width:0;display:grid;grid-template-columns:108px minmax(0,1fr);grid-template-rows:auto auto;column-gap:22px;row-gap:8px;align-items:center}
  .step-head{grid-column:1;grid-row:1 / span 2;height:auto;align-items:center;gap:14px}
  .step-icon{width:64px;height:64px;flex-basis:64px;font-size:38px}
  .step-number{width:30px;height:30px;flex-basis:30px}
  .deploy-step h3{grid-column:2;grid-row:1;margin:0;align-self:end;font-size:19px}
  .deploy-step p{grid-column:2;grid-row:2;margin:0;align-self:start;font-size:14px;line-height:1.35}
  .deploy-arrow{display:none}

  .tools{padding:46px 24px 72px}.tools-copy br{display:none}
  .tools-copy .lead{font-size:14px}.tools-bg{top:190px;bottom:0;height:auto;min-height:0;opacity:.22}
  .how-block{margin-top:74px}.how-heading{width:auto;margin:0 0 42px;align-items:center;text-align:center}
  .how-heading h3{font-size:22px}.how-heading p{margin:0;font-size:14px}
  .journey-grid{width:min(560px,100%);grid-template-columns:repeat(2,minmax(0,1fr));gap:58px 34px}
  .journey-step::after{display:none}
  .journey-step figure{width:145px;height:auto;margin:0 auto 24px}
  .journey-step figure img{width:100%;height:auto;aspect-ratio:160/330}
  .journey-copy{gap:13px}.journey-copy h4{font-size:15px;margin-bottom:10px}.journey-copy p{font-size:12px}

  .actors{padding:48px 24px 0}.actors-heading{padding:0}
  .actors-heading .lead{font-size:15px}
  .actor-cards{width:100%;margin:48px 0 0;display:grid;grid-template-columns:1fr;gap:20px}
  .actor-cards article{width:100%;min-width:0;display:grid;grid-template-columns:42% minmax(0,1fr);min-height:180px}
  .actor-cards img{width:100%;height:100%;min-height:180px}
  .actor-cards div{min-width:0;padding:16px}.actor-cards h3{font-size:18px;margin-bottom:10px}.actor-cards p{font-size:14px}
  .actors-downloads{width:100%;margin:42px auto 0;display:flex;justify-content:center;flex-wrap:wrap;gap:16px}
  .actors-gradient{width:calc(100% + 48px);height:390px;margin:72px -24px 0}
  .actors-town{right:-100px;bottom:250px;width:520px;max-height:none;height:auto}
  .actors-people{left:-20px;bottom:215px;max-height:240px;height:230px}
  .footer{width:calc(100% + 48px);height:auto;min-height:250px;margin:0 -24px;padding:24px 18px;flex-direction:column;justify-content:center;gap:22px;text-align:center}
  .footer-signature{align-items:center}.footer-signature strong{font-size:34px}.footer-signature span{margin-left:0;font-size:11px}
  .footer nav{justify-content:center;flex-wrap:wrap;gap:4px 12px}.footer nav a{font-size:11px;padding:6px}
  .footer .social{width:38px;height:38px}.footer .social img{width:25px;height:25px}
}

/* Mobile étroit : une colonne pour les étapes illustrées */
@media (max-width:700px) {
  .journey-grid{width:min(430px,100%);grid-template-columns:1fr;gap:54px}
  .journey-step{display:grid;grid-template-columns:minmax(120px,145px) minmax(0,1fr);gap:18px;align-items:center}
  .journey-step figure{width:100%;margin:0}
  .journey-copy{margin:0}
}

@media (max-width:430px) {
  .section + .section{margin-top:56px}
  .topbar{padding:14px 14px 8px}.brand{font-size:27px}.topnav{max-width:210px}
  .topnav>a{font-size:10px;padding:6px}.contact-widget{padding:7px 9px!important}
  .hero-city{height:385px}.hero-copy{left:18px;right:18px;top:135px}
  .hero-copy h1{font-size:34px}.hero-copy .lead{font-size:13px}
  .download-row{left:14px;right:14px;top:490px;gap:10px}
  .store-badge.google,.store-badge.apple{width:min(145px,41vw)}
  .phone{width:112px;height:219px}
  .phone-left{right:calc(50% + 64px);top:640px}
  .phone-center{right:calc(50% - 48px);top:652px}
  .phone-right{right:calc(50% - 156px);top:665px}
  .hero-benefits{margin:900px 10px 0;padding:34px 12px 44px;gap:42px 16px}
  .hero-benefits article{min-height:220px}.benefit-icon{width:52px;height:52px}
  .benefit-icon.seedling img{width:29px;height:29px}
  .hero-benefits h3{font-size:14px}.hero-benefits p{font-size:11px}
  .priorities{padding:54px 18px 70px}.priority-cards{margin-top:46px;gap:14px}
  .priority-card{gap:14px;padding:10px 12px}.priority-card img{width:62px;height:62px;flex-basis:62px}
  .deployment-copy{margin-top:84px}.deployment-steps{margin-top:48px;gap:30px}
  .deploy-step{grid-template-columns:96px minmax(0,1fr);column-gap:16px}
  .step-icon{width:58px;height:58px;flex-basis:58px;font-size:34px}
  .step-number{width:28px;height:28px;flex-basis:28px;font-size:12px}
  .tools{padding:42px 18px 62px}.how-block{margin-top:64px}.how-heading{margin-bottom:36px}
  .journey-grid{width:min(308px,100%);gap:42px}
  .journey-step{grid-template-columns:122px minmax(0,1fr);column-gap:16px}
  .journey-copy{gap:10px}.journey-copy>b{width:28px;height:28px;flex-basis:28px;font-size:12px}
  .journey-copy h4{font-size:14px}.journey-copy p{font-size:10.8px}
  .actors{padding:42px 14px 0}.actor-cards{margin-top:40px}
  .actor-cards article{grid-template-columns:40% minmax(0,1fr);min-height:168px}
  .actor-cards img{min-height:168px}.actor-cards h3{font-size:16px}.actor-cards p{font-size:12px}
  .actors-downloads{margin-top:36px}.actors-gradient{width:calc(100% + 28px);margin:62px -14px 0;height:350px}
  .actors-town{right:-155px;bottom:235px}.actors-people{bottom:205px}
  .footer{width:calc(100% + 28px);margin:0 -14px;min-height:265px}.footer-signature strong{font-size:31px}
}

@media (max-width:360px) {
  .brand{font-size:24px}.topnav{max-width:180px}.topnav>a{font-size:9px}
  .hero-copy h1{font-size:31px}.store-badge.google,.store-badge.apple{width:min(132px,40vw)}
  .phone{width:104px;height:203px}.phone-left{right:calc(50% + 58px)}
  .phone-center{right:calc(50% - 44px)}.phone-right{right:calc(50% - 142px)}
  .deploy-step{grid-template-columns:88px minmax(0,1fr);column-gap:14px}
  .step-head{gap:9px}.step-icon{width:54px;height:54px;flex-basis:54px;font-size:31px}
  .journey-grid{width:min(300px,100%);gap:38px}
  .journey-step{grid-template-columns:112px minmax(0,1fr);column-gap:14px}
  .journey-copy h4{font-size:13px}.journey-copy p{font-size:10.2px}
  .actor-cards article{grid-template-columns:38% minmax(0,1fr)}
  .footer nav a{font-size:10px}
}


/* =========================================================
   Integration v1 : ajustements mobiles sans toucher au desktop.
   La mise en page originale src reste la reference graphique.
   ========================================================= */
@media (max-width: 768px) {
  /* Lisibilite sur petits ecrans et zoom navigateur. */
  .section-copy h2, .actors-heading h2, .deployment-copy h2,
  .hero-copy h1 { overflow-wrap:break-word; }
  .priority-card, .actor-cards article, .journey-step { min-width:0; }
  .priority-card h3, .priority-card p, .actor-cards h3,
  .actor-cards p, .journey-copy h4, .journey-copy p { overflow-wrap:anywhere; }
  .store-badge { flex-shrink:1; min-width:0; }
  .store-badge img { max-width:100%; }
  .topnav>a, .footer nav a { min-height:32px; }
}
@media (max-width: 380px) {
  /* Eviter des colonnes texte excessivement etroites a 320/360 px. */
  .actor-cards article { grid-template-columns:38% minmax(0,1fr); }
  .actor-cards div { padding:10px; }
  .priority-card { gap:10px; }
  .priority-card img { width:56px; height:56px; flex-basis:56px; }
  .journey-step { grid-template-columns:minmax(100px, 42%) minmax(0,1fr); column-gap:12px; }
  .journey-copy { gap:8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}

/* ===============================================================
   v2 — adaptation guidee par la maquette Flutter mobile (16/10/26)
   Desktop > 1100px : aucune modification.
   Mobile : dimensions de contenu, jamais de hauteur forcee aux tuiles.
   =============================================================== */
@media (max-width:1100px) {
  .priorities-copy .lead br,
  .deployment-copy .lead br,
  .tools-copy .lead br,
  .hero-copy .lead br {display:none}
  .priority-card, .actor-cards article {min-height:0}
}
@media (max-width:768px) {
  /* Deux rangs deliberes : marque puis les TROIS actions sur une ligne. */
  .topbar {
    display:flex; flex-direction:column; align-items:stretch;
    height:auto; min-height:0; gap:12px;
    padding:17px clamp(12px,4vw,24px) 8px;
  }
  .topbar .brand {align-self:flex-start; font-size:clamp(27px,7.5vw,35px);line-height:1.05}
  .topnav {
    width:100%;max-width:none;display:grid;
    grid-template-columns:max-content max-content minmax(0,1fr);
    justify-content:initial;align-items:center;gap:clamp(5px,1.5vw,12px);
    flex-wrap:nowrap;
  }
  .topnav > a:not(.contact-widget) {
    font-size:clamp(9px,2.5vw,12px); padding:7px 0;
    min-height:35px;white-space:nowrap;display:flex;align-items:center;
  }
  .topnav > .contact-widget {
    order:initial;min-width:0;width:100%;margin:0;
    padding:8px 9px!important;min-height:36px;
    justify-content:space-between;gap:4px;
    font-size:clamp(9px,2.3vw,11px)!important;line-height:1.15;
    text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.14);
  }
  .topnav > .contact-widget span {font-size:16px;flex:none}

  /* Hierarchie mobile derivee des polices de la maquette Dart (30 / 15). */
  .hero-copy {top:clamp(148px,36vw,174px)}
  .hero-copy h1 {font-size:clamp(27px,7.7vw,39px);line-height:1.08;letter-spacing:.35px}
  .hero-copy .eyebrow {font-size:clamp(11px,3vw,14px)}
  .hero-copy .lead {font-size:clamp(12px,3.2vw,15px);line-height:1.32;max-width:38ch}
  .section-copy h2,.deployment-copy h2,.actors-heading h2 {
    font-size:clamp(25px,6.8vw,36px);line-height:1.12;letter-spacing:.1px;
  }
  .eyebrow {font-size:clamp(10px,2.7vw,13px);line-height:1.3}
  .lead,.actors-heading .lead {font-size:clamp(12px,3.25vw,15px);line-height:1.36}
  .tools-copy .lead {font-size:clamp(12px,3.1vw,14px)}

  /* Section 2 : cartes compactes dont le contenu determine la hauteur. */
  .priorities {padding:clamp(32px,5vw,52px) clamp(14px,5vw,24px) 60px}
  .priority-cards {margin-top:32px;gap:12px}
  .priority-card {
    display:grid;grid-template-columns:clamp(52px,16vw,74px) minmax(0,1fr);
    align-items:center;justify-content:stretch;
    gap:clamp(12px,3.5vw,22px);width:100%;min-height:0;
    padding:12px 14px;overflow:visible;
  }
  .priority-card img {width:100%;height:auto;aspect-ratio:1;object-fit:contain;flex:none}
  .priority-card div {min-width:0}
  .priority-card h3 {font-size:clamp(13px,3.6vw,16px);line-height:1.2;margin:0 0 6px}
  .priority-card p {font-size:clamp(11px,2.9vw,13px);line-height:1.32;overflow-wrap:normal}
  .deployment-copy {margin-top:clamp(60px,12vw,90px)}

  /* Derniere section : les tuiles sont moins hautes et ne coupent pas les images. */
  .actors {padding:40px clamp(12px,4vw,24px) 0}
  .actors-heading {max-width:660px;margin-inline:auto}
  .actor-cards {margin:32px auto 0;gap:13px;max-width:560px}
  .actor-cards article {
    display:grid;grid-template-columns:34% minmax(0,1fr);
    width:100%;height:auto;min-height:0;align-items:stretch;
    overflow:hidden;border-radius:6px;
  }
  .actor-cards img {width:100%;height:100%;min-height:0;object-fit:cover}
  .actor-cards div {min-width:0;padding:clamp(10px,3vw,15px)}
  .actor-cards h3 {font-size:clamp(14px,3.8vw,17px);line-height:1.2;margin:0 0 7px}
  .actor-cards p {font-size:clamp(11px,2.95vw,13px);line-height:1.33;overflow-wrap:normal}
  .actors-downloads {margin-top:38px}
}
@media (max-width:430px) {
  .topbar {padding-top:13px;gap:10px}
  .hero-copy {top:148px;left:18px;right:18px}
  .hero-copy h1 {font-size:clamp(27px,7.7vw,33px)}
  .priority-card {padding:11px 12px;gap:12px}
  .actor-cards article {grid-template-columns:35% minmax(0,1fr)}
  .actor-cards div {padding:10px}
}
@media (max-width:350px) {
  .topnav {gap:5px}
  .topnav>a:not(.contact-widget) {font-size:8.5px}
  .topnav>.contact-widget {font-size:8.5px!important;padding:7px 6px!important}
  .topnav>.contact-widget span {font-size:13px}
}


/* ================================================================
   V3 — mobile : ordre de lecture + cartes acteurs uniformes
   Les regles desktop restent intouchees.
   Retirer ce bloc pour revenir immediatement a la V2.
   ================================================================ */
@media (max-width: 768px) {
  /* Meme section, ordre mobile : introduction -> 5 etapes -> 4 cartes. */
  .priorities {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .priorities-copy { order: 1; }
  .deployment-steps {
    order: 2;
    margin: 34px 0 0;
  }
  .priority-cards {
    order: 3;
    margin: 48px 0 0;
  }
  /* Titre + sous-titre du deploiement masques UNIQUEMENT sur mobile. */
  .deployment-copy { display: none; }
  .priority-gradient { pointer-events: none; }

  /* Les cinq cartes ont exactement la meme hauteur a largeur donnee.
     Les textes restent lisibles et l'image est recadree, pas deformee. */
  .actor-cards article {
    height: 94px;
    min-height: 94px;
    max-height: 94px;
    grid-template-columns: 34% minmax(0, 1fr);
    overflow: hidden;
  }
  .actor-cards img {
    width: 100%;
    height: 94px;
    min-height: 0;
    object-fit: cover;
  }
  .actor-cards article > div {
    min-width: 0;
    padding: 8px 9px;
    align-self: center;
  }
  .actor-cards h3 {
    font-size: clamp(13px, 3.7vw, 16px);
    line-height: 1.1;
    margin: 0 0 4px;
  }
  .actor-cards p {
    font-size: clamp(10px, 2.8vw, 12px);
    line-height: 1.2;
    margin: 0;
  }
}
@media (max-width: 380px) {
  .actor-cards article {
    height: 94px;
    min-height: 94px;
    max-height: 94px;
  }
  .actor-cards img { height: 94px; }
  .actor-cards article > div { padding: 6px 8px; }
  .actor-cards h3 { font-size: 13px; }
  .actor-cards p { font-size: 10px; line-height: 1.16; }
}


/* V4 — composition HERO mobile : texte > mairie > telephones > stores > avantages.
   Desktop inchange. La grille conserve l'ordre HTML pour le clavier/lecteur d'ecran. */
@media (max-width:768px) {
  .hero {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto auto clamp(215px,69vw,310px) auto auto;
    height:auto;
    min-height:0;
    padding:0 0 28px;
    align-items:stretch;
    overflow:hidden;
    background:white;
  }
  .hero-gradient {position:absolute;inset:0 0 auto;height:440px;z-index:0;pointer-events:none;}
  .hero .topbar {
    position:relative;left:auto;right:auto;top:auto;grid-row:1;grid-column:1;
    z-index:30;width:100%;margin:0;padding-bottom:16px;
  }
  .hero .hero-copy {
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    grid-row:2;grid-column:1;z-index:8;
    margin:clamp(48px,11vw,78px) clamp(18px,5vw,30px) 24px;
    max-width:none;
  }
  .hero .hero-copy .lead {max-width:50ch;}
  .hero .hero-city {
    position:relative;top:auto;left:auto;right:auto;bottom:auto;
    grid-row:3;grid-column:1;z-index:2;
    display:block;width:100%;height:clamp(210px,62vw,350px);
    opacity:1;object-fit:cover;object-position:center center;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 11%,black 80%,transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0%,black 11%,black 80%,transparent 100%);
    border-radius:0;
  }
  .hero .phone {
    position:relative;top:auto;bottom:auto;left:auto;right:auto;
    grid-row:4;grid-column:1;align-self:end;justify-self:center;
    width:clamp(102px,31vw,165px);height:clamp(204px,62vw,325px);
    object-fit:cover;margin:0;transform-origin:center bottom;
  }
  .hero .phone-left {z-index:10;transform:translateX(-93%) rotate(-11deg);}
  .hero .phone-center {z-index:14;transform:translateY(-8px) rotate(2deg);}
  .hero .phone-right {z-index:11;transform:translateX(93%) rotate(11deg);}
  .hero .download-row {
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    grid-row:5;grid-column:1;z-index:20;
    display:flex;align-items:center;justify-content:center;
    flex-wrap:nowrap;gap:clamp(10px,4vw,22px);
    margin:26px 16px 0;width:auto;
  }
  .hero .store-badge.google,.hero .store-badge.apple {
    width:min(42vw,155px);min-width:0;height:46px;
    display:flex;align-items:center;justify-content:center;line-height:0;
  }
  .hero .store-badge img {width:100%;height:42px;object-fit:contain;display:block;}
  .hero .hero-benefits {
    position:relative;left:auto;right:auto;top:auto;bottom:auto;
    grid-row:6;grid-column:1;z-index:20;
    width:auto;height:auto;min-height:0;
    margin:clamp(52px,13vw,95px) 12px 0;
  }
  .hero .hero-character {display:none;}
}
@media (max-width:380px){
  .hero .hero-copy {margin-top:40px;margin-bottom:18px;}
  .hero .hero-city {height:220px;}
  .hero .download-row {margin-top:24px;}
}

/* V5 — bouton de présentation compact, uniquement sur mobile */
@media (max-width:768px) {
  .topnav { grid-template-columns:max-content max-content max-content; justify-content:space-between; column-gap:clamp(5px,1.4vw,12px); }
  .topnav > .contact-widget {
    width:auto; min-width:0; min-height:30px;
    padding:6px 7px!important;
    display:inline-flex; justify-content:center; align-items:center;
    gap:5px!important;
    background:#fbfbf9!important;
    border:.25px solid #e7e2db;
    box-shadow:none;
    border-radius:999px;
    line-height:1.1;
  }
  .topnav > .contact-widget span {font-size:13px;line-height:1;flex:0 0 auto}
}
@media (max-width:380px) {
  .topnav {gap:4px;}
  .topnav > .contact-widget {padding:5px 5px!important;font-size:clamp(8px,2.25vw,9px)!important;gap:5px!important}
}

/* V6 — telephones solidaires : desktop strictement inchange.
   A 768 px et moins, un seul groupe occupe la cellule mobile deja prevue.
   Les proportions internes sont celles de la composition de reference
   (3 visuels de 220x430 dans un groupe de 560x430). */
.hero-phones-group { display:contents; }

@media (max-width:768px) {
  .hero {
    grid-template-rows:auto auto auto auto auto auto;
  }
  .hero .hero-phones-group {
    display:block;
    position:relative;
    grid-row:4;
    grid-column:1;
    justify-self:center;
    align-self:end;
    width:min(88%,560px);
    aspect-ratio:560 / 430;
    height:auto;
    min-width:0;
    z-index:14;
    overflow:visible;
  }
  .hero .hero-phones-group > .phone {
    position:absolute;
    display:block;
    top:auto;
    right:auto;
    bottom:0;
    width:39.285714%;
    height:100%;
    max-width:none;
    margin:0;
    object-fit:cover;
    transform-origin:center bottom;
    grid-row:auto;
    grid-column:auto;
    justify-self:auto;
    align-self:auto;
  }
  .hero .hero-phones-group > .phone-left {
    left:0;
    bottom:4.65%;
    transform:rotate(-11deg);
    z-index:10;
  }
  .hero .hero-phones-group > .phone-center {
    left:30.357143%;
    bottom:0;
    transform:rotate(2deg);
    z-index:14;
  }
  .hero .hero-phones-group > .phone-right {
    left:60.714286%;
    bottom:3.49%;
    transform:rotate(11deg);
    z-index:11;
  }
  .contact-widget {
    background: #fbfbf9 !important;
    border: 0.25px solid #e7e2db;
    gap: 5px;
    justify-content: center;
  }

  .contact-widget span {
    margin-left: 0;
  }
}
/* Bouton présentation : toutes tailles d'écran */

.topnav > .contact-widget {
    background: #fbfbf9 !important;
    background-image: none !important;
    border: 0.25px solid #e7e2db;
}
/* Masquer les numéros sans modifier leur emplacement */

.step-number {
    visibility: hidden !important;
}