/* Système La Laverie Invest : fond profond, boîtes marine, accent rose sur sombre, aplats rouge et crème pour casser le rythme.
     Mise en page : un message par bloc, titres Poppins 800 en majuscules, photos réelles plein cadre sous voile profond. */
  :root{
    color-scheme:dark;
    --profond:#151726;
    --marine:#2c2e43;
    --rouge:#d70536;
    --rouge-fonce:#b0042c;
    --rose:#ff4d74;
    --creme:#fbf6f1;
    --creme-profond:#f1e6d5;
    --blanc:#ffffff;
    --texte-doux:#c9cad6;
    --texte-doux-clair:#5f6070;
    --filet:#3e4060;
    --filet-clair:#d8d3ce;
    --voile:rgba(21,23,38,.92);

    --font-display:"Poppins","Arial Black",sans-serif;
    --font-texte:"Inter",system-ui,-apple-system,sans-serif;

    --boite:28px;
    --pastille:999px;
    --photo-incrustee:34px;
    --ombre-incrustee:0 14px 50px rgba(0,0,0,.5);
    --gouttiere:max(20px, env(safe-area-inset-left,0px));
    --gouttiere-d:max(20px, env(safe-area-inset-right,0px));
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--profond); color:var(--blanc);
    font-family:var(--font-texte); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:120; background:var(--profond)}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important}
  }
  img{display:block; max-width:100%}
  a{color:inherit}
  p{margin:0; max-width:62ch}
  strong{font-weight:700}

  /* ---------- Typographie ---------- */
  .display, h1, h2, h3{
    font-family:var(--font-display); font-weight:800; text-transform:uppercase;
    line-height:1.02; letter-spacing:-.005em; margin:0; text-wrap:balance;
  }
  h1{font-size:clamp(2.4rem, 6.2vw, 4.9rem)}
  h2{font-size:clamp(1.9rem, 4.2vw, 3.2rem)}
  h3{font-size:clamp(1.15rem, 1.8vw, 1.4rem); line-height:1.15}
  .k{color:var(--rose)}
  .on-light .k{color:var(--rouge)}
  .lede{font-weight:300; font-size:clamp(1.08rem, 1.6vw, 1.25rem); line-height:1.55; color:rgba(255,255,255,.85)}
  .lede strong{color:var(--blanc); font-weight:700}
  .muted{color:var(--texte-doux)}

  .etiquette{
    display:inline-block; font-family:var(--font-texte); font-weight:700; font-size:.76rem;
    letter-spacing:.14em; text-transform:uppercase; color:var(--rose);
  }
  .etiquette::after{content:""; display:block; width:56px; height:4px; background:currentColor; margin-top:8px}
  .on-light .etiquette{color:var(--rouge)}
  .on-rouge .etiquette{color:var(--blanc)}

  .mention{font-size:.82rem; font-weight:600; color:var(--texte-doux)}
  .on-light .mention{color:var(--texte-doux-clair)}
  .num{font-variant-numeric:tabular-nums}

  /* ---------- Structure ---------- */
  .wrap{max-width:1180px; margin:0 auto; padding-left:var(--gouttiere); padding-right:var(--gouttiere-d)}
  .section{padding-block:clamp(44px, 5.5vw, 76px)}
  .section-tight{padding-block:clamp(40px, 5vw, 64px)}
  .head{display:grid; gap:22px; max-width:760px; margin-bottom:clamp(36px, 5vw, 56px)}
  .on-light{background:var(--creme); color:var(--marine)}
  .on-light .lede{color:var(--marine)}
  .on-light p{color:var(--texte-doux-clair)}
  .on-light .lede strong, .on-light p strong{color:var(--marine)}
  .on-rouge{background:var(--rouge); color:var(--blanc)}
  .on-rouge p{color:rgba(255,255,255,.88)}
  .rule-top{border-top:1px solid var(--filet)}

  /* ---------- Boutons et pastilles ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-family:var(--font-display); font-weight:800; font-size:.92rem; text-transform:uppercase; letter-spacing:.01em;
    padding:16px 28px; border-radius:var(--pastille); text-decoration:none; cursor:pointer;
    border:2px solid transparent; transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
    white-space:nowrap;
  }
  .btn:hover{transform:translateY(-2px)}
  .btn-rouge{background:var(--rouge); color:var(--blanc)}
  .btn-rouge:hover{background:var(--rouge-fonce)}
  .btn-blanc{background:var(--blanc); color:var(--rouge)}
  .btn-blanc:hover{background:var(--creme)}
  .btn-ligne{border-color:rgba(255,255,255,.35); color:var(--blanc); background:transparent}
  .btn-ligne:hover{border-color:var(--blanc)}
  .on-light .btn-ligne{border-color:var(--marine); color:var(--marine)}
  .on-light .btn-ligne:hover{background:var(--marine); color:var(--blanc)}
  .btn .fl{font-family:var(--font-texte); font-weight:700}
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{outline:3px solid var(--rose); outline-offset:3px; border-radius:6px}
  .on-light a:focus-visible, .on-light summary:focus-visible{outline-color:var(--rouge)}
  .on-rouge a:focus-visible{outline-color:var(--blanc)}

  .pill{
    display:inline-flex; align-items:center; gap:8px; background:var(--rouge); color:var(--blanc);
    font-weight:600; font-size:.88rem; padding:9px 18px; border-radius:var(--pastille);
  }
  .pill-ghost{background:rgba(255,255,255,.14)}

  .skip-link{position:absolute; left:-999px; top:0; background:var(--rouge); color:var(--blanc); padding:.6em 1em; z-index:200}
  .skip-link:focus{left:1rem; top:1rem}

  /* ---------- Bandeau promo ---------- */
  .promo-bar{background:var(--rouge); overflow:hidden; white-space:nowrap}
  .promo-track{display:flex; width:max-content; animation:promo 26s linear infinite}
  @keyframes promo{from{transform:translateX(0)} to{transform:translateX(-50%)}}
  .promo-item{display:flex; align-items:center; gap:18px; flex:none; padding:10px 40px}
  .promo-item span{font-size:.88rem; font-weight:600}
  .promo-item .was{text-decoration:line-through; opacity:.7; font-weight:400}
  .promo-item .now{font-family:var(--font-display); font-weight:800}
  .promo-item a{font-family:var(--font-display); font-weight:800; font-size:.74rem; text-transform:uppercase; text-decoration:none; background:var(--blanc); color:var(--rouge); padding:6px 14px; border-radius:var(--pastille)}

  /* ---------- Navigation ---------- */
  header.nav{
    position:sticky; top:env(safe-area-inset-top,0px); z-index:100;
    background:rgba(21,23,38,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--filet); transition:box-shadow .25s ease;
  }
  header.nav.is-scrolled{box-shadow:0 12px 30px -20px rgba(0,0,0,.8)}
  .nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:12px}
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none}
  .brand img{width:40px; height:40px; border-radius:10px; flex:none}
  .brand-name{font-family:var(--font-display); font-weight:800; font-size:1.02rem; text-transform:uppercase; line-height:1; letter-spacing:.01em}
  .brand-name small{display:block; font-family:var(--font-texte); font-weight:700; font-size:.62rem; letter-spacing:.24em; color:var(--rose); margin-top:4px}
  nav.links{display:flex; align-items:center; gap:2px}
  nav.links a{
    font-size:.86rem; font-weight:600; text-decoration:none; color:var(--texte-doux);
    padding:10px 13px; border-radius:var(--pastille); transition:color .18s ease, background .18s ease;
  }
  nav.links a:hover{color:var(--blanc); background:rgba(255,255,255,.07)}
  nav.links a.is-active{color:var(--blanc); background:rgba(255,255,255,.1)}
  nav.links a.btn{color:var(--blanc); background:var(--rouge); margin-left:10px; padding:11px 20px; font-size:.8rem}
  nav.links a.btn:hover{background:var(--rouge-fonce)}
  .burger{display:none; font-family:var(--font-display); font-weight:800; font-size:.78rem; text-transform:uppercase; background:none; color:var(--blanc); border:2px solid rgba(255,255,255,.3); padding:9px 16px; border-radius:var(--pastille); cursor:pointer}

  /* ---------- Pages ---------- */
  section.page{display:block}
  section.page.is-active{display:block; animation:fadein .45s ease}
  @keyframes fadein{from{opacity:.4; transform:translateY(8px)} to{opacity:1; transform:none}}

  /* ---------- Hero ---------- */
  .hero{position:relative; overflow:hidden; isolation:isolate}
  .hero-media{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 62%; animation:kenburns 28s ease-in-out infinite alternate}
  @keyframes kenburns{from{transform:scale(1)} to{transform:scale(1.08)}}
  .hero-voile{position:absolute; inset:0; z-index:-1;
    background:
      linear-gradient(90deg, rgba(21,23,38,.96) 0%, rgba(21,23,38,.86) 45%, rgba(21,23,38,.5) 100%),
      linear-gradient(0deg, rgba(21,23,38,1) 0%, rgba(21,23,38,0) 30%);
  }
  .hero-grid{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:48px; align-items:center; padding-block:clamp(48px, 6vw, 84px) clamp(32px, 4vw, 52px)}
  .hero-copy{display:grid; gap:26px; min-width:0}
  .hero-cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
  .hero-trust{display:flex; flex-wrap:wrap; gap:8px}
  .incrust{position:relative; justify-self:end; width:min(100%, 360px)}
  .incrust img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--photo-incrustee); box-shadow:var(--ombre-incrustee); transform:rotate(3deg); border:6px solid var(--blanc)}
  .incrust .pill{position:absolute; left:-18px; bottom:28px; transform:rotate(-2deg); box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}

  .stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--filet); padding-bottom:clamp(40px,6vw,64px)}
  .stat{padding:28px 28px 0 0; display:grid; gap:10px; align-content:start}
  .stat + .stat{padding-left:28px; border-left:1px solid var(--filet)}
  .stat .big{font-family:var(--font-display); font-weight:800; font-size:clamp(2.6rem, 5vw, 4rem); line-height:.9; color:var(--blanc); font-variant-numeric:tabular-nums; white-space:nowrap}
  .stat .big .u{color:var(--rose)}
  .stat .big .sm{font-size:.38em; color:var(--texte-doux); margin-left:4px}
  .stat p{font-size:.92rem; color:var(--texte-doux)}

  /* ---------- Piliers ---------- */
  .pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
  .box{background:var(--marine); border-radius:var(--boite); padding:32px; display:grid; gap:14px; align-content:start; transition:transform .2s ease}
  .box:hover{transform:translateY(-4px)}
  .box .etiquette{font-size:.7rem}
  .box p{font-size:.98rem; color:var(--texte-doux)}
  .box p strong{color:var(--blanc)}
  .pillar .mot{font-family:var(--font-display); font-weight:800; font-size:clamp(1.7rem, 2.6vw, 2.2rem); line-height:1; text-transform:uppercase}
  .pillar .mot span{color:var(--rose); display:block}

  /* ---------- Offre (aplat rouge) ---------- */
  .offer{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(32px,5vw,72px); align-items:start}
  .offer-copy{display:grid; gap:24px; min-width:0}
  .price{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap}
  .price .was{font-family:var(--font-display); font-weight:700; font-size:1.6rem; text-decoration:line-through; opacity:.65}
  .price .now{font-family:var(--font-display); font-weight:800; font-size:clamp(4.5rem, 10vw, 7.5rem); line-height:.85; font-variant-numeric:tabular-nums}
  .check{list-style:none; margin:0; padding:0; display:grid; gap:12px}
  .check li{display:flex; gap:14px; align-items:flex-start; font-size:.98rem; line-height:1.45}
  .check li::before{content:"✓"; flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:.8rem; font-weight:700; background:var(--rouge); color:var(--blanc); margin-top:-1px}
  .on-rouge .check li::before{background:var(--blanc); color:var(--rouge)}
  .offer-card{background:var(--profond); border-radius:var(--boite); padding:34px; display:grid; gap:26px}
  .offer-card .blk{display:grid; gap:12px}
  .offer-card .blk + .blk{padding-top:24px; border-top:1px solid var(--filet)}
  .offer-card p{color:var(--texte-doux); font-size:.96rem}
  .offer-card p strong{color:var(--blanc)}
  .lien{font-weight:700; font-size:.92rem; color:var(--rose); text-decoration:none}
  .lien:hover{text-decoration:underline; text-underline-offset:4px}
  .on-light .lien{color:var(--rouge)}

  /* ---------- FAQ ---------- */
  .faq{display:grid; gap:10px}
  .faq-item{background:var(--marine); border-radius:20px; overflow:hidden}
  .faq-item summary{cursor:pointer; list-style:none; padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-weight:700; font-size:1.02rem}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+"; flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); color:var(--rose); font-size:1.2rem; font-weight:700; transition:transform .2s ease}
  .faq-item[open] summary::after{content:"–"; background:var(--rouge); color:var(--blanc)}
  .faq-item .a{padding:0 26px 24px}
  .faq-item .a p{color:var(--texte-doux); font-size:.98rem}
  .faq-item .a p strong{color:var(--blanc)}
  .on-rouge .faq-item{background:rgba(21,23,38,.22)}
  .on-rouge .faq-item .a p{color:rgba(255,255,255,.9)}
  .on-light .faq-item{background:var(--creme-profond)}
  .on-light .faq-item summary{color:var(--marine)}
  .on-light .faq-item summary::after{background:var(--blanc); color:var(--rouge)}
  .on-light .faq-item .a p{color:var(--texte-doux-clair)}
  .on-light .faq-item .a p strong{color:var(--marine)}

  /* ---------- Simulateur ---------- */
  .sim{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:18px}
  .sim-controls{display:grid; gap:34px; align-content:center}
  .sim-row{display:grid; gap:14px}
  .sim-top{display:flex; justify-content:space-between; align-items:center; gap:16px}
  .sim-label{font-weight:700; font-size:1.05rem; display:block}
  .sim-hint{font-size:.84rem; color:var(--texte-doux)}
  .stepper{display:flex; align-items:center; gap:12px; flex:none}
  .step-btn{width:42px; height:42px; border-radius:50%; border:2px solid var(--filet); background:transparent; color:var(--blanc); font-size:1.2rem; font-weight:700; cursor:pointer; transition:border-color .18s ease, background .18s ease}
  .step-btn:hover{border-color:var(--rose); background:rgba(255,77,116,.1)}
  .step-value{font-family:var(--font-display); font-weight:800; font-size:1.7rem; min-width:2ch; text-align:center; font-variant-numeric:tabular-nums}
  .range{width:100%; appearance:none; -webkit-appearance:none; height:6px; border-radius:6px; background:var(--filet); outline:none; cursor:pointer}
  .range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--rose); border:4px solid var(--marine); box-shadow:0 0 0 2px var(--rose)}
  .range::-moz-range-thumb{width:18px; height:18px; border-radius:50%; background:var(--rose); border:4px solid var(--marine); box-shadow:0 0 0 2px var(--rose)}
  .sim-result{background:var(--rouge); border-radius:var(--boite); padding:36px; display:grid; gap:14px; align-content:center}
  .sim-total{font-family:var(--font-display); font-weight:800; font-size:clamp(3.2rem, 7vw, 5.2rem); line-height:.9; font-variant-numeric:tabular-nums; white-space:nowrap}
  .sim-total .sm{font-size:.32em; opacity:.85}
  .sim-result p{color:rgba(255,255,255,.9); font-size:.92rem}
  .sim-result .sim-ht{font-size:1rem; margin:0} .sim-result .sim-detail{font-size:.82rem; opacity:.85; margin:0; font-variant-numeric:tabular-nums}
  .sim-result .alerte{background:rgba(21,23,38,.25); border-radius:16px; padding:14px 16px; font-weight:600; font-size:.88rem}

  /* ---------- Semi-passif (crème) ---------- */
  .split{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(32px,6vw,80px); align-items:start}
  .split > div{display:grid; gap:22px; min-width:0}
  .citation{border-left:4px solid var(--rouge); padding-left:22px; font-family:var(--font-display); font-weight:700; font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.3; text-transform:uppercase; color:var(--marine); max-width:30ch}
  .tasks{list-style:none; margin:0; padding:0; display:grid; gap:12px}
  .tasks li{background:var(--blanc); border-radius:22px; padding:22px 24px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; color:var(--texte-doux-clair); transition:transform .2s ease}
  .tasks li:hover{transform:translateX(4px)}
  .tasks li strong{color:var(--marine); display:block; font-size:1.05rem; margin-bottom:2px}
  .tasks .n{font-family:var(--font-display); font-weight:800; font-size:1.7rem; color:var(--rouge); line-height:1}
  .heures{font-family:var(--font-display); font-weight:800; font-size:clamp(3rem,7vw,5rem); line-height:.9; color:var(--marine)}
  .heures span{color:var(--rouge)}

  /* ---------- Formateur ---------- */
  .duo{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,80px); align-items:center}
  .duo > div{display:grid; gap:22px; min-width:0}
  .photo-cadre img{width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--photo-incrustee); box-shadow:var(--ombre-incrustee)}
  .photo-cadre{position:relative}
  .photo-cadre .pill{position:absolute; right:18px; bottom:18px}

  .duo-vids{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
  .duo-vids figure{margin:0; position:relative; overflow:hidden; border-radius:22px; background:var(--marine); aspect-ratio:9/16; box-shadow:var(--ombre-incrustee)}
  .duo-vids img, .duo-vids video{display:block; width:100%; height:100%; object-fit:cover}
  .duo-vids .vid video{aspect-ratio:auto}
  .formateurs{display:grid; gap:4px}
  .pers{display:flex; gap:14px; align-items:center; padding-block:8px}
  .pers + .pers{border-top:1px solid var(--filet)}
  .pers h3{margin:0; font-size:1.05rem}
  .pers p{margin:2px 0 0}
  .ini{flex:none; width:46px; height:46px; border-radius:50%; background:var(--rouge); color:var(--blanc); display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.1rem}

  .laurent-carte{position:relative; aspect-ratio:1; border-radius:var(--photo-incrustee); background:var(--marine); box-shadow:var(--ombre-incrustee); display:grid; place-items:center; align-content:center; gap:22px; padding:32px; overflow:hidden}
  .ini-xl{width:140px; height:140px; font-size:3.6rem}
  .laurent-chiffre{display:flex; align-items:center; gap:14px; color:var(--blanc); font-weight:700; line-height:1.25}
  .laurent-chiffre .num{font-family:var(--font-display); font-weight:800; font-size:3.4rem; line-height:1; color:var(--rose)}
  .laurent-carte .pill{position:absolute; right:18px; bottom:18px}
  .solo{display:grid; gap:22px; max-width:780px}
  .kiosque-photo{position:relative; margin:0; border-radius:var(--photo-incrustee,22px); overflow:hidden; box-shadow:var(--ombre-incrustee); align-self:center}
  .kiosque-photo img{display:block; width:100%; height:auto}
  .kiosque-photo .pill{position:absolute; left:16px; top:16px}
  .kq-grid{display:grid; gap:16px; margin-top:8px}
  .kq-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kq-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .kq-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .kq-card,.kq-step{background:var(--marine); border-radius:22px; padding:24px; display:grid; gap:8px; align-content:start}
  .on-light .kq-card,.on-light .kq-step{background:var(--blanc)}
  .kq-card h3,.kq-step h3{margin:0; font-size:1.08rem}
  .kq-card p,.kq-step p{margin:0; font-size:.94rem; color:var(--texte-doux)}
  .on-light .kq-card p,.on-light .kq-step p{color:var(--texte-doux-clair)}
  .kq-step .n{width:40px; height:40px; border-radius:12px; background:var(--rouge); color:var(--blanc); display:grid; place-items:center; font-family:var(--font-display); font-weight:800}
  .kq-points{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
  .kq-lieux{display:flex; flex-wrap:wrap; gap:12px}
  .kq-lieux span{background:var(--blanc); border-radius:999px; padding:12px 20px; font-weight:700; color:var(--marine); display:inline-flex; align-items:center; gap:10px}
  .kq-lieux span::before{content:""; width:10px; height:10px; border-radius:50%; background:var(--rouge)}
  @media (max-width:980px){ .kq-4,.kq-5{grid-template-columns:repeat(2,minmax(0,1fr))} .kq-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:620px){ .kq-3,.kq-4,.kq-5{grid-template-columns:1fr} }
  .pack[id]{scroll-margin-top:110px}
  .sol-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px}
  .sol-card{background:var(--blanc); border-radius:24px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--marine); transition:transform .2s ease, box-shadow .2s ease}
  .sol-card:hover{transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(21,23,38,.45)}
  .sol-card img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
  .sol-txt{padding:20px 22px 24px; display:flex; flex-direction:column; gap:6px; flex:1}
  .sol-txt h3{margin:0; font-size:1.15rem; color:var(--marine)}
  .sol-txt p{margin:0; font-size:.94rem}
  .sol-txt .lien{margin-top:auto; padding-top:8px; font-weight:700; color:var(--rouge)}
  @media (max-width:1020px){ .sol-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:620px){ .sol-grid{grid-template-columns:1fr} }
  .ts-chips{display:flex; flex-wrap:wrap; gap:10px}
  .ts-chips a{text-decoration:none; font-weight:700; font-size:.9rem; padding:10px 18px; border-radius:999px; border:1.5px solid var(--filet); color:var(--blanc)}
  .ts-chips a:hover{border-color:var(--rose); color:var(--rose)}
  .ts-modele{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,64px); align-items:center}
  .ts-zero{list-style:none; margin:0; padding:0; display:grid; gap:12px}
  .ts-zero li{background:var(--marine); border-radius:20px; padding:18px 22px; display:grid; grid-template-columns:150px 1fr; gap:16px; align-items:center}
  .ts-zero .z{font-family:var(--font-display); font-weight:800; font-size:1.25rem; text-transform:uppercase; line-height:1.1}
  .ts-zero .z b{display:block; color:var(--rose)}
  .ts-zero p{margin:0; font-size:.94rem; color:var(--texte-doux)}
  .ts-list{display:grid; gap:14px}
  .ts-guide{display:grid; grid-template-columns:220px 1fr auto; align-items:center; gap:24px; background:var(--blanc); border-radius:22px; overflow:hidden; text-decoration:none; color:var(--marine); padding-right:28px; transition:transform .2s ease, box-shadow .2s ease}
  .ts-guide:hover{transform:translateY(-3px); box-shadow:0 16px 36px -20px rgba(21,23,38,.45)}
  .ts-img{align-self:stretch; min-height:140px; background-size:cover; background-position:center}
  .ts-body{padding-block:20px; display:grid; gap:4px}
  .ts-step{font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--rouge)}
  .ts-body h3{margin:0; font-size:1.3rem; color:var(--marine)}
  .ts-body p{margin:0}
  .ts-go{width:48px; height:48px; border-radius:50%; background:var(--rouge); color:var(--blanc); display:grid; place-items:center; font-weight:800; font-size:1.2rem}
  @media (max-width:820px){ .ts-modele{grid-template-columns:1fr} .ts-guide{grid-template-columns:110px 1fr; padding-right:18px} .ts-go{display:none} .ts-img{min-height:120px} .ts-zero li{grid-template-columns:1fr; gap:6px} }
  /* ---------- Appel final ---------- */
  .final{position:relative; overflow:hidden; text-align:center}
  .final .wrap{display:grid; gap:24px; justify-items:center}
  .final p{margin-inline:auto}
  .final .ghost{position:absolute; right:-2vw; top:50%; transform:translateY(-50%); font-family:var(--font-display); font-weight:800; font-size:clamp(14rem, 34vw, 30rem); line-height:.8; color:var(--blanc); opacity:.08; pointer-events:none; user-select:none}
  .cta-row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
  .price-inline .was{text-decoration:line-through; opacity:.7}
  .price-inline .now{font-family:var(--font-display); font-weight:800; color:var(--blanc)}

  /* ---------- Bandeaux page intérieure ---------- */
  .page-hero{position:relative; overflow:hidden; border-bottom:1px solid var(--filet)}
  .page-hero .wrap{display:grid; gap:22px; padding-block:clamp(40px,5.5vw,68px)}
  .page-hero .ghost{position:absolute; right:-1vw; top:-2vw; font-family:var(--font-display); font-weight:800; font-size:clamp(12rem,30vw,26rem); line-height:.8; color:var(--rose); opacity:.12; pointer-events:none; user-select:none}

  /* ---------- Programme ---------- */
  .phase{display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); padding-block:clamp(40px,5vw,60px); border-top:1px solid var(--filet)}
  .phase:first-child{border-top:none; padding-top:0}
  .phase-head{display:grid; gap:14px; align-content:start; position:sticky; top:calc(env(safe-area-inset-top,0px) + 90px)}
  .phase-head .p{font-family:var(--font-display); font-weight:800; font-size:clamp(3.4rem,6vw,5rem); line-height:.8; color:var(--rose)}
  .phase-head h3{font-size:clamp(1.3rem,2vw,1.6rem)}
  .modules{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .module{background:var(--marine); border-radius:22px; padding:26px; display:grid; gap:10px; align-content:start; transition:transform .2s ease}
  .module:hover{transform:translateY(-3px)}
  .module .n{font-family:var(--font-display); font-weight:800; font-size:.95rem; color:var(--rose); font-variant-numeric:tabular-nums}
  .module h4{margin:0; font-weight:700; font-size:1.06rem; line-height:1.3}
  .module p{font-size:.92rem; color:var(--texte-doux)}
  .module p strong{color:var(--blanc)}
  .module.bonus{background:transparent; border:2px dashed var(--filet)}

  .band-photo{position:relative; height:clamp(320px, 52vw, 560px); overflow:hidden; isolation:isolate}
  .band-photo .m{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 60%; animation:kenburns 26s ease-in-out infinite alternate}
  .band-photo::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg, rgba(21,23,38,.95) 0%, rgba(21,23,38,.2) 65%)}
  .band-photo .wrap{position:absolute; left:0; right:0; bottom:0; padding-block:40px; display:grid; gap:16px}
  .band-photo h2{max-width:20ch}

  /* ---------- À propos ---------- */
  .proofs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
  .proof{background:var(--marine); border-radius:var(--boite); padding:28px; display:grid; gap:12px; align-content:start}
  .proof .big{font-family:var(--font-display); font-weight:800; font-size:clamp(1.9rem,3.4vw,2.6rem); line-height:1; color:var(--rose); font-variant-numeric:tabular-nums}
  .proof .spec{font-family:var(--font-display); font-weight:800; font-size:1.1rem; line-height:1.25; text-transform:uppercase}
  .proof p{font-size:.94rem; color:var(--texte-doux)}
  .proof p strong{color:var(--blanc)}
  .socials{display:flex; gap:10px; flex-wrap:wrap}
  .socials a{font-weight:700; font-size:.88rem; text-decoration:none; padding:11px 20px; border-radius:var(--pastille); background:rgba(255,255,255,.1); transition:background .18s ease}
  .socials a:hover{background:rgba(255,255,255,.2)}
  .on-light .socials a{background:var(--creme-profond); color:var(--marine)}

  /* ---------- Tarifs ---------- */
  .packs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; align-items:stretch}
  @media (max-width:1100px){ .packs{grid-template-columns:repeat(2,minmax(0,1fr))} }
  .pack{background:var(--marine); border-radius:var(--boite); padding:30px 24px; display:flex; flex-direction:column; gap:18px; position:relative}
  .pack.vedette{box-shadow:0 0 0 3px var(--rose)}
  .pack.vedette .ruban{position:absolute; top:-15px; left:30px}
  .pack.rouge{background:var(--rouge)}
  .pack h3{font-size:1.35rem}
  .pack .pitch{font-size:.94rem; color:var(--texte-doux)}
  .pack.rouge .pitch{color:rgba(255,255,255,.88)}
  .pack .pitch strong{color:var(--blanc)}
  .pack .prix{display:grid; gap:2px; padding-block:6px; border-block:1px solid var(--filet)}
  .pack.rouge .prix{border-color:rgba(255,255,255,.3)}
  .pack .prix .was{font-family:var(--font-display); font-weight:700; text-decoration:line-through; color:var(--texte-doux); font-size:1.05rem}
  .pack .prix .now{font-family:var(--font-display); font-weight:800; font-size:2.8rem; line-height:1.05; font-variant-numeric:tabular-nums}
  .pack .prix .u{font-size:.82rem; color:var(--texte-doux)}
  .pack.rouge .prix .u{color:rgba(255,255,255,.85)}
  .pack .check{flex:1; align-content:start}
  .pack.rouge .etiquette{color:var(--blanc)}
  .pack .check li{font-size:.9rem; color:var(--texte-doux)}
  .pack.rouge .check li{color:rgba(255,255,255,.92)}
  .pack .note{font-size:.9rem; font-style:italic; color:var(--blanc)}
  .pack .btn{width:100%}

  /* ---------- Blog ---------- */
  .blog-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px}
  .blog-card{background:var(--marine); border-radius:var(--boite); overflow:hidden; text-decoration:none; display:grid; grid-template-rows:auto 1fr; transition:transform .2s ease}
  a.blog-card:hover{transform:translateY(-4px)}
  .blog-card .vis{aspect-ratio:16/9; background-size:cover; background-position:center 60%; position:relative}
  .blog-card .vis::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(44,46,67,.9), rgba(44,46,67,0) 60%)}
  .blog-card .vis .pill{position:absolute; left:22px; bottom:18px; z-index:1}
  .blog-card .txt{padding:26px 28px 30px; display:grid; gap:12px; align-content:start}
  .blog-card h3{font-size:1.3rem}
  .blog-card p{font-size:.95rem; color:var(--texte-doux)}
  .blog-card.soon{background:transparent; border:2px dashed var(--filet); display:grid; place-content:center; padding:40px; gap:14px}
  .blog-card.soon h3{color:var(--texte-doux)}

  .article{display:grid; gap:18px; max-width:70ch}
  .article .meta{font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-doux-clair)}
  .article .chapo{font-size:1.18rem; line-height:1.6; color:var(--marine); font-weight:400}
  .article h2{font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--marine); margin-top:22px}
  .article p{font-size:1.04rem; line-height:1.75; color:#44465a}
  .article p strong{color:var(--marine)}
  .article ul{margin:0; padding:0; list-style:none; display:grid; gap:12px}
  .article ul li{position:relative; padding-left:24px; line-height:1.65; color:#44465a}
  .article ul li strong{color:var(--marine)}
  .article ul li::before{content:""; position:absolute; left:0; top:.62em; width:10px; height:10px; border-radius:50%; background:var(--rouge)}
  .article .encadre{background:var(--marine); color:var(--blanc); border-radius:var(--boite); padding:32px; margin-block:14px}
  .article .encadre p{font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1.35; text-transform:uppercase; color:var(--blanc)}
  .retour{font-weight:700; font-size:.9rem; text-decoration:none; color:var(--texte-doux)}
  .retour:hover{color:var(--blanc)}

  /* ---------- Contact ---------- */
  .contact-card{background:var(--marine); border-radius:var(--boite); padding:34px; display:grid; gap:4px; align-content:start}
  .contact-card .row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px; border-bottom:1px solid var(--filet); flex-wrap:wrap}
  .contact-card .row:last-of-type{border-bottom:none}
  .contact-card .row .lbl{font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux)}
  .contact-card .row .val{font-weight:700; word-break:break-all}
  .copy{font:inherit; font-size:.78rem; font-weight:700; background:rgba(255,255,255,.1); color:var(--blanc); border:none; border-radius:var(--pastille); padding:7px 14px; cursor:pointer}
  .copy:hover{background:rgba(255,255,255,.2)}

  /* ---------- Pied de page ---------- */
  footer{background:var(--profond); border-top:1px solid var(--filet); padding-block:56px 32px}
  .foot-row{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start}
  .foot-sign{display:flex; align-items:center; gap:14px}
  .foot-sign img{width:46px; height:46px; border-radius:12px}
  .foot-links{display:flex; gap:6px 22px; flex-wrap:wrap}
  .foot-links a{text-decoration:none; color:var(--texte-doux); font-size:.9rem; font-weight:600}
  .foot-links a:hover{color:var(--blanc)}
  .foot-fine{margin-top:36px; padding-top:22px; border-top:1px solid var(--filet); font-size:.8rem; color:var(--texte-doux); display:flex; gap:10px 24px; flex-wrap:wrap; justify-content:space-between}



  /* ---------- Groupe WhatsApp (animé) ---------- */
  .wa{--wa:#25d366; position:relative; overflow:hidden; padding-block:96px 104px;
      background:radial-gradient(70% 80% at 85% 55%, rgba(37,211,102,.16), transparent 70%), radial-gradient(60% 60% at 10% 10%, rgba(44,46,67,.6), transparent 70%), var(--profond)}
  .wa-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
  .wa-free{display:table; margin-bottom:14px; background:var(--wa); color:#0b2b17; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1rem; letter-spacing:.06em; padding:8px 16px; border-radius:999px; transform:rotate(-2deg)}
  .wa-eyebrow{display:inline-block; font-weight:800; font-size:.84rem; letter-spacing:.22em; text-transform:uppercase; color:var(--wa); padding-bottom:14px; position:relative}
  .wa-eyebrow::after{content:""; position:absolute; left:0; bottom:0; height:4px; width:0; background:var(--wa); border-radius:2px; transition:width .9s .2s cubic-bezier(.2,.8,.2,1)}
  .wa.in .wa-eyebrow::after{width:84px}
  .wa h2{font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(2.1rem,5vw,3.6rem); line-height:1.02; margin:24px 0 22px; letter-spacing:-.01em}
  .wa h2 .vert{color:var(--wa)}
  .wa-lead{font-size:1.15rem; line-height:1.6; color:var(--texte-doux); margin:0 0 26px; max-width:46ch}
  .wa-lead strong{color:var(--blanc)}
  .wa-list{list-style:none; margin:0 0 34px; padding:0; display:grid; gap:18px}
  .wa-list li{display:flex; gap:16px; align-items:flex-start; font-size:1.08rem; line-height:1.5; color:#e4e5ee}
  .wa-check{flex:none; width:30px; height:30px; border-radius:50%; background:var(--wa); display:grid; place-items:center; transform:scale(0); transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
  .wa.in .wa-list li:nth-child(1) .wa-check{transition-delay:.5s; transform:scale(1)}
  .wa.in .wa-list li:nth-child(2) .wa-check{transition-delay:.7s; transform:scale(1)}
  .wa.in .wa-list li:nth-child(3) .wa-check{transition-delay:.9s; transform:scale(1)}
  .btn-wa{display:inline-flex; align-items:center; gap:14px; background:var(--wa); color:#0b2b17; font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:1.02rem; text-decoration:none; padding:22px 40px; border-radius:var(--pastille); position:relative; box-shadow:0 10px 30px rgba(37,211,102,.25); transition:transform .2s, box-shadow .2s}
  .btn-wa:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(37,211,102,.4)}
  .btn-wa::before{content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid var(--wa); animation:waPulse 2.4s ease-out infinite}
  @keyframes waPulse{0%{opacity:.8; transform:scale(1)} 100%{opacity:0; transform:scale(1.12,1.35)}}
  .wa-note{margin:18px 0 0; color:var(--texte-doux); font-size:.95rem}
  .wa-reveal{opacity:0; transform:translateY(24px); transition:opacity .8s, transform .8s cubic-bezier(.2,.8,.2,1)}
  .wa.in .wa-reveal{opacity:1; transform:none}
  .wa.in .wa-reveal.d1{transition-delay:.1s} .wa.in .wa-reveal.d2{transition-delay:.25s} .wa.in .wa-reveal.d3{transition-delay:.4s} .wa.in .wa-reveal.d4{transition-delay:.55s}

  /* scène téléphone */
  .wa-stage{position:relative; height:620px; max-width:470px; width:100%; margin-inline:auto}
  .wa-photo{position:absolute; width:46%; height:62%; border-radius:30px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.5); border:4px solid #2a2c3e}
  .wa-photo img{width:100%; height:100%; object-fit:cover}
  .wa-photo.p1{left:2%; top:4%; --r:-8deg; transform:rotate(-8deg); animation:waSway 7s ease-in-out infinite}
  .wa-photo.p2{right:0; bottom:4%; --r:7deg; transform:rotate(7deg); animation:waSway 8s ease-in-out -2s infinite}
  @keyframes waSway{0%,100%{transform:rotate(var(--r)) translateY(0)} 50%{transform:rotate(calc(var(--r) * 1.25)) translateY(-10px)}}
  .wa-phone{position:absolute; left:50%; top:50%; width:72%; height:94%; transform:translate(-50%,-50%); background:#14151f; border-radius:48px; padding:12px; box-shadow:0 30px 80px rgba(0,0,0,.6); animation:waFloat 6s ease-in-out infinite}
  @keyframes waFloat{0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,calc(-50% - 10px))}}
  .wa-screen{height:100%; background:#f3efe7; border-radius:38px; overflow:hidden; display:flex; flex-direction:column; color:#1b1c25}
  .wa-head{display:flex; gap:12px; align-items:center; padding:20px 18px 14px; background:#f6f2ea; border-bottom:1px solid #e4ddd0}
  .wa-avatar{width:46px; height:46px; border-radius:50%; overflow:hidden; flex:none}
  .wa-avatar img{width:100%; height:100%; object-fit:cover}
  .wa-head b{display:block; font-family:var(--font-texte); font-size:1rem; line-height:1.2}
  .wa-head small{color:#7a7b86; font-size:.8rem; white-space:nowrap}
  .wa-feed{flex:1; overflow:hidden; padding:14px 12px; display:flex; flex-direction:column; justify-content:flex-end; gap:10px}
  .wa-msg{background:#fff; border-radius:18px; border-top-left-radius:6px; padding:10px 12px 8px; box-shadow:0 1px 2px rgba(0,0,0,.08); max-width:90%; font-size:.9rem; line-height:1.4; transform-origin:0 100%; animation:waIn .5s cubic-bezier(.3,1.4,.5,1) both}
  .wa-msg time{display:block; text-align:right; color:#8a8b95; font-size:.72rem; margin-top:4px}
  .wa-msg .stats2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px}
  .wa-msg .stats2 div{background:#f1f3f0; border-radius:12px; padding:8px 10px; font-size:.78rem; color:#555}
  .wa-msg .stats2 b{display:block; font-family:var(--font-display); font-size:1.15rem; color:#1b1c25}
  .wa-msg img{display:block; width:100%; height:120px; object-fit:cover; border-radius:12px; margin-bottom:6px}
  .wa-typing{background:#fff; border-radius:18px; border-top-left-radius:6px; padding:12px 14px; display:inline-flex; gap:5px; align-self:flex-start; animation:waIn .3s both}
  .wa-typing i{width:7px; height:7px; border-radius:50%; background:#9a9ba5; animation:waDot 1s infinite}
  .wa-typing i:nth-child(2){animation-delay:.15s} .wa-typing i:nth-child(3){animation-delay:.3s}
  @keyframes waDot{0%,60%,100%{transform:none; opacity:.5} 30%{transform:translateY(-4px); opacity:1}}
  @keyframes waIn{from{opacity:0; transform:scale(.6) translateY(10px)} to{opacity:1; transform:none}}
  .wa-msg.out{animation:waOut .4s ease both}
  @keyframes waOut{to{opacity:0; transform:translateY(-14px)}}
  .wa-input{display:flex; gap:10px; align-items:center; padding:10px 12px 16px; background:#efebe3}
  .wa-input span{flex:1; height:40px; border-radius:20px; background:#fff}
  .wa-input i{width:40px; height:40px; border-radius:50%; background:var(--wa); display:grid; place-items:center}
  .wa-badge{position:absolute; background:#fff; color:#1b1c25; border-radius:22px; padding:12px 18px; box-shadow:0 14px 40px rgba(0,0,0,.35); z-index:3; opacity:0; transform:scale(.7)}
  .wa-badge b{display:block; font-family:var(--font-display); font-weight:800; color:var(--rouge); font-size:1.5rem; line-height:1.1}
  .wa-badge span{font-size:.85rem}
  .wa-badge.b1{right:-4%; top:20%}
  .wa-badge.b2{left:-6%; bottom:14%}
  .wa.in .wa-badge{animation:waPop .6s cubic-bezier(.3,1.6,.5,1) forwards, waBob 5s ease-in-out infinite}
  .wa.in .wa-badge.b1{animation-delay:1.4s, 2s}
  .wa.in .wa-badge.b2{animation-delay:2.2s, 2.8s}
  @keyframes waPop{to{opacity:1; transform:scale(1)}}
  @keyframes waBob{0%,100%{translate:0 0} 50%{translate:0 -8px}}

  @media (max-width:920px){
    .wa{padding-block:72px 80px}
    .wa-grid{grid-template-columns:1fr; gap:48px}
    .wa-stage{height:560px}
    .btn-wa{width:100%; justify-content:center; padding:20px 22px; font-size:.95rem}
  }
  @media (max-width:420px){ .wa-stage{height:500px} .wa-badge b{font-size:1.25rem} .wa-badge{padding:10px 14px} .wa-badge.b1{right:-2%} .wa-badge.b2{left:-2%} }
  @media (prefers-reduced-motion:reduce){
    .wa *, .wa *::before{animation:none !important; transition:none !important}
    .wa-reveal, .wa-badge{opacity:1 !important; transform:none !important} .wa-check{transform:none !important}
  }


  /* ---------- Pages légales ---------- */
  .legal h2{font-size:clamp(1.15rem,2vw,1.45rem)}
  .legal a{color:var(--rouge); font-weight:600}
  .todo{background:#ffe08a; color:#5a4300; border-radius:6px; padding:1px 6px; font-weight:600; font-size:.92em}
  .encadre-clair{background:#fff; border:1px solid var(--filet-clair); border-radius:20px; padding:22px 24px; display:grid; gap:10px}
  .legal-nav{margin-top:28px; padding-top:18px; border-top:1px solid var(--filet-clair); font-size:.92rem}
  .foot-legal{display:flex; gap:6px 18px; flex-wrap:wrap}
  .foot-legal a{color:var(--texte-doux); text-decoration:none} .foot-legal a:hover{color:var(--blanc)}
  .form-rgpd{font-size:.8rem; line-height:1.5; color:var(--texte-doux-clair); margin:0}
  .form-rgpd a{color:inherit}
  /* ---------- CTA mobile ---------- */
  .mobile-cta{display:none}

  /* ---------- Responsive ---------- */
  @media (max-width:920px){
    nav.links{display:none}
    .burger{display:inline-flex}
    header.nav.is-open nav.links{
      display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px;
      background:var(--profond); border-bottom:1px solid var(--filet);
      padding:12px var(--gouttiere-d) 20px var(--gouttiere);
    }
    header.nav.is-open nav.links a{padding:14px 16px}
    header.nav.is-open nav.links a.btn{margin:8px 0 0}
    .hero-grid{grid-template-columns:1fr}
    .incrust{display:none}
    .hero-voile{background:linear-gradient(180deg, rgba(21,23,38,.9) 0%, rgba(21,23,38,.82) 55%, rgba(21,23,38,1) 100%)}
    .stats{grid-template-columns:1fr}
    .stat, .stat + .stat{padding:24px 0; border-left:none}
    .stat + .stat{border-top:1px solid var(--filet)}
    .pillars, .offer, .sim, .split, .duo, .phase, .modules, .proofs, .packs, .blog-grid{grid-template-columns:1fr}
    .phase-head{position:static}
    .packs{gap:28px}
    .mobile-cta{
      display:flex; align-items:center; justify-content:space-between; gap:14px;
      position:fixed; left:0; right:0; bottom:0; z-index:90;
      background:rgba(21,23,38,.97); border-top:1px solid var(--filet);
      padding:12px var(--gouttiere-d) max(12px, env(safe-area-inset-bottom,0px)) var(--gouttiere);
      transform:translateY(110%); transition:transform .3s ease;
    }
    .mobile-cta.is-visible{transform:none}
    .mobile-cta .mp{line-height:1.1}
    .mobile-cta .mp .lbl{display:block; white-space:nowrap; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--rose); margin-bottom:2px}
    .mobile-cta .mp .was{display:block; font-size:.74rem; text-decoration:line-through; color:var(--texte-doux)}
    .mobile-cta .mp .now{font-family:var(--font-display); font-weight:800; font-size:1.4rem}
    .mobile-cta .btn{padding:13px 20px; font-size:.8rem}
    footer{padding-bottom:110px}
  }
  @media (max-width:480px){
    .btn{white-space:normal; text-align:center}
    .hero-cta .btn{width:100%}
    .box, .offer-card, .sim-result, .contact-card, .pack{padding:26px 22px}
  }

  /* ---------- À propos : sommaire, KPI, graphique, projets ---------- */
  .sommaire{display:flex; flex-wrap:wrap; gap:8px}
  .sommaire a{font-weight:700; font-size:.86rem; text-decoration:none; padding:10px 18px; border-radius:var(--pastille); background:rgba(255,255,255,.08); border:1px solid var(--filet); transition:background .18s ease}
  .sommaire a:hover{background:rgba(255,255,255,.16)}
  .kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:18px}
  .kpi{background:var(--marine); border-radius:var(--boite); padding:26px; display:grid; gap:10px; align-content:start}
  .kpi.vedette{background:var(--rouge)}
  .kpi.vedette .etiquette{color:var(--blanc)}
  .kpi .big{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,3.4vw,2.8rem); line-height:.95; white-space:nowrap}
  .kpi .big .u{color:var(--rose)}
  .kpi.vedette .big .u{color:var(--blanc); opacity:.8}
  .kpi p{font-size:.9rem; color:var(--texte-doux)}
  .kpi.vedette p{color:rgba(255,255,255,.9)}
  .kpi p strong{color:var(--blanc)}
  .chart-card{margin:0; background:var(--marine); border-radius:var(--boite); padding:28px; display:grid; gap:18px}
  .chart-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap}
  .chart-legend{display:flex; gap:16px; flex-wrap:wrap; font-size:.82rem; color:var(--texte-doux)}
  .chart-legend span{display:inline-flex; align-items:center; gap:8px}
  .sw{width:14px; height:14px; border-radius:4px; display:inline-block}
  .sw-full{background:var(--rose)}
  .sw-part{background:repeating-linear-gradient(135deg, var(--rose) 0 3px, transparent 3px 6px); box-shadow:inset 0 0 0 1.5px var(--rose)}
  .chart-wrap{position:relative; width:100%}
  #caChart{display:block; width:100%; height:auto; overflow:visible}
  .chart-tip{position:absolute; pointer-events:none; background:var(--profond); border:1px solid var(--filet); border-radius:12px; padding:10px 14px; font-size:.84rem; white-space:nowrap; transform:translate(-50%,-110%); box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
  .chart-tip b{font-family:var(--font-display); font-size:1.05rem; display:block}
  .chart-table summary{cursor:pointer; font-weight:700; font-size:.88rem; color:var(--texte-doux)}
  .chart-table table{margin-top:12px; border-collapse:collapse; font-size:.86rem; font-variant-numeric:tabular-nums; min-width:520px}
  .chart-table th,.chart-table td{padding:7px 12px; border-bottom:1px solid var(--filet); text-align:right}
  .chart-table th:first-child,.chart-table td:first-child{text-align:left}
  .projet-head{display:flex; gap:clamp(18px,3vw,32px); align-items:flex-end; margin-bottom:28px}
  .projet-head > div{display:grid; gap:18px; min-width:0}
  .proj-n{font-family:var(--font-display); font-weight:800; font-size:clamp(4.5rem,10vw,8rem); line-height:.78; color:var(--rose); opacity:.9; flex:none}
  .on-light .proj-n{color:var(--rouge)}
  .on-rouge .proj-n{color:var(--blanc); opacity:.35}
  .galerie{display:grid; gap:12px}
  .galerie figure, .angers-grid figure, .videos figure{margin:0; position:relative; overflow:hidden; border-radius:22px; background:var(--marine)}
  .galerie img, .angers-grid img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease}
  .galerie figure:hover img, .angers-grid figure:hover img{transform:scale(1.04)}
  figcaption{position:absolute; left:12px; bottom:12px; background:rgba(21,23,38,.82); color:var(--blanc); font-size:.78rem; font-weight:700; padding:7px 12px; border-radius:var(--pastille)}
  .g-bea{grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:260px 260px}
  .g-a{grid-row:1 / span 2}
  .g-d{grid-column:2 / span 2}
  .avant-apres{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:18px; align-items:start}
  .aa-col{display:grid; gap:14px; justify-items:start; min-width:0; width:100%}
  .aa-photos{display:grid; gap:12px; width:100%}
  .aa-photos img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:22px; filter:saturate(.75)}
  .videos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; width:100%}
  .vid video{display:block; width:100%; aspect-ratio:9/16; object-fit:cover; background:var(--profond)}
  .angers-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
  .angers-grid figure{aspect-ratio:9/14}
  .angers-grid .vid video{height:100%; aspect-ratio:auto}
  .vid .play{position:absolute; inset:0; display:grid; place-items:center; background:transparent; border:0; cursor:pointer; color:var(--blanc)}
  .vid .play span{width:58px; height:58px; border-radius:50%; background:rgba(215,5,54,.92); display:grid; place-items:center; font-size:1.2rem; box-shadow:0 10px 24px -8px rgba(0,0,0,.6); transition:transform .18s ease}
  .vid .play:hover span{transform:scale(1.08)}
  .vid.is-playing .play span{opacity:0}
  @media (max-width:920px){
    .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
    .g-bea{grid-template-columns:1fr 1fr; grid-template-rows:auto}
    .g-bea figure{aspect-ratio:4/3}
    .g-a{grid-row:auto; grid-column:1 / span 2}
    .g-d{grid-column:1 / span 2}
    .avant-apres{grid-template-columns:1fr}
    .aa-photos{grid-template-columns:1fr 1fr}
    .angers-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:480px){
    .kpis{grid-template-columns:1fr}
    .videos{grid-template-columns:1fr 1fr}
    .videos figure:last-child{grid-column:1 / span 2}
    .videos figure:last-child video{aspect-ratio:4/5}
  }

  /* ---------- Avis Google ---------- */
  .avis-band{background:var(--marine)}
  .avis-top{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:32px}
  .avis-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:14px}
  .avis-card{background:var(--profond); border-radius:var(--boite); padding:28px; display:grid; gap:10px; align-content:start; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
  .avis-card:hover{transform:translateY(-4px); box-shadow:0 0 0 2px var(--rose)}
  .avis-card .note{display:flex; align-items:baseline; gap:4px; margin-top:6px}
  .avis-card .note .num{font-family:var(--font-display); font-weight:800; font-size:clamp(3.4rem,6vw,4.6rem); line-height:.85}
  .avis-card .note .sur{font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:var(--texte-doux)}
  .avis-card p{color:var(--texte-doux); font-size:.94rem}
  .avis-card p strong{color:var(--blanc)}
  .stars{position:relative; display:inline-block; font-size:1.35rem; letter-spacing:3px; line-height:1}
  .stars::before{content:"★★★★★"; color:var(--filet)}
  .stars span{position:absolute; inset:0; overflow:hidden; width:calc(var(--n) / 5 * 100%); white-space:nowrap}
  .stars span::before{content:"★★★★★"; color:var(--rose)}
  .avis-themes{background:var(--rouge); border-radius:var(--boite); padding:28px; display:grid; gap:18px; align-content:start}
  .avis-themes .etiquette{color:var(--blanc)}
  .avis-themes .check li{color:rgba(255,255,255,.92)}
  .avis-themes .check li strong{color:var(--blanc)}
  .avis-themes .check li::before{background:var(--blanc); color:var(--rouge)}
  @media (max-width:920px){ .avis-grid{grid-template-columns:1fr 1fr} .avis-themes{grid-column:1 / span 2} }
  @media (max-width:480px){ .avis-grid{grid-template-columns:1fr} .avis-themes{grid-column:auto} }

  /* ---------- Contact ---------- */
  .contact-hero{position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--filet)}
  .contact-hero .m{position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 65%}
  .contact-hero::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(21,23,38,.96) 0%, rgba(21,23,38,.82) 55%, rgba(21,23,38,.55) 100%)}
  .contact-hero .wrap{display:grid; gap:22px; padding-block:clamp(44px,6vw,76px)}
  .profils{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
  .profil{background:var(--marine); border-radius:var(--boite); padding:30px; display:grid; gap:12px; align-content:start; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
  .profil:hover{transform:translateY(-4px); box-shadow:0 0 0 2px var(--rose)}
  .profil .proj-n{font-size:3.4rem}
  .profil h3{font-size:1.3rem}
  .profil p{color:var(--texte-doux); font-size:.95rem}
  .profil.rouge{background:var(--rouge)}
  .profil.rouge:hover{box-shadow:0 0 0 2px var(--blanc)}
  .profil.rouge .proj-n{color:var(--blanc); opacity:.4}
  .profil.rouge p{color:rgba(255,255,255,.9)}
  .profil.rouge .lien{color:var(--blanc)}
  .contact-main{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(24px,4vw,48px); align-items:start}
  .form-card{background:var(--blanc); border-radius:var(--boite); padding:clamp(24px,4vw,40px); display:grid; gap:18px; box-shadow:0 20px 50px -30px rgba(44,46,67,.35); min-width:0}
  .form-card form{display:grid; gap:18px}
  .row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
  .champ{display:grid; gap:8px; font-weight:700; font-size:.88rem; color:var(--marine); border:0; padding:0; margin:0; min-width:0}
  .champ legend{padding:0; margin-bottom:8px}
  .champ input[type=text], .champ textarea{font:inherit; font-weight:400; font-size:1rem; color:var(--marine); background:var(--creme); border:2px solid var(--filet-clair); border-radius:16px; padding:13px 16px; width:100%; transition:border-color .18s ease; resize:vertical}
  .champ input:focus, .champ textarea:focus{outline:none; border-color:var(--rouge)}
  .choix{display:flex; flex-wrap:wrap; gap:8px}
  .choix label{cursor:pointer}
  .choix input{position:absolute; opacity:0; pointer-events:none}
  .choix span{display:inline-block; padding:10px 16px; border-radius:var(--pastille); border:2px solid var(--filet-clair); font-weight:600; font-size:.88rem; color:var(--marine); transition:all .18s ease}
  .choix input:checked + span{background:var(--marine); border-color:var(--marine); color:var(--blanc)}
  .choix input:focus-visible + span{outline:3px solid var(--rouge); outline-offset:2px}
  .form-err{color:var(--rouge); font-weight:700; font-size:.9rem}
  .champ.is-err input, .champ.is-err textarea{border-color:var(--rouge); background:#fff1f3}
  fieldset.champ.is-err .choix span{border-color:var(--rouge)}
  .champ.is-err > legend, label.champ.is-err{color:var(--rouge)}
  [hidden]{display:none!important}
  .champ .opt{font-weight:400; color:var(--texte-doux-clair)}
  .champ input[type=email], .champ input[type=tel]{font:inherit; font-weight:400; font-size:1rem; color:var(--marine); background:var(--creme); border:2px solid var(--filet-clair); border-radius:16px; padding:13px 16px; width:100%; transition:border-color .18s ease}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
  .envoye{display:grid; gap:10px; padding:24px; border-radius:20px; background:var(--creme); border-left:4px solid var(--rouge)}
  .btn[disabled]{opacity:.6; cursor:wait; transform:none}
  .form-card .btn{justify-self:start}
  .apercu{display:grid; gap:14px; padding-top:20px; border-top:2px dashed var(--filet-clair)}
  .apercu pre{margin:0; white-space:pre-wrap; word-break:break-word; font-family:var(--font-texte); font-size:.92rem; line-height:1.55; background:var(--creme); border-radius:16px; padding:18px; color:var(--marine)}
  .coord{display:grid; gap:14px; min-width:0}
  .coord-card{background:var(--marine); color:var(--blanc); border-radius:var(--boite); padding:28px; display:grid; gap:4px}
  .coord-card .etiquette{color:var(--rose); margin-bottom:8px}
  .coord-card .row{display:grid; gap:6px; padding-block:14px; border-bottom:1px solid var(--filet)}
  .coord-card .row:last-child{border-bottom:none}
  .coord-card .lbl{font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux)}
  .coord-card .val{font-weight:700; word-break:break-all; text-decoration:none}
  .val-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .coord-card .socials a{background:rgba(255,255,255,.1); color:var(--blanc); padding:8px 14px; font-size:.82rem}
  .coord-photo img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--boite)}
  .lieux{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  .lieu{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); background:var(--marine); border-radius:var(--boite); overflow:hidden; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease}
  .lieu:hover{transform:translateY(-4px); box-shadow:0 0 0 2px var(--rose)}
  .lieu img{width:100%; height:100%; min-height:220px; object-fit:cover}
  .lieu-txt{padding:26px; display:grid; gap:10px; align-content:center}
  .lieu-txt p{color:var(--texte-doux); font-size:.92rem}
  @media (max-width:920px){
    .profils, .contact-main, .lieux{grid-template-columns:1fr}
    .contact-hero::after{background:linear-gradient(180deg, rgba(21,23,38,.88), rgba(21,23,38,.95))}
  }
  @media (max-width:480px){
    .row2{grid-template-columns:1fr}
    .lieu{grid-template-columns:1fr}
    .lieu img{min-height:0; aspect-ratio:16/10}
    .form-card .btn{justify-self:stretch}
  }

  /* Ancres : ne pas passer sous l'en-tete collant */
  [id]{scroll-margin-top:96px}