/* ===========================================================
   VUMA — Site web (composants partagés)
   Rythme : marine réservé aux moments forts (hero, CTA final,
   footer). Corps de page clair (blanc ↔ mist), coupes en biais
   aux jointures. Biseaux partout (cartes, boutons, images).
   =========================================================== */

/* ---- header ---- */
.sitebar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.sitebar .in{display:flex;align-items:center;gap:16px;height:76px;}
.sitebar .brand{display:flex;align-items:center;text-decoration:none;}
.sitebar .brand img{height:32px;width:auto;}
.sitenav{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none;}
.sitenav::-webkit-scrollbar{display:none;}
.sitenav a{position:relative;font-family:var(--font-s);font-size:15px;font-weight:500;color:var(--ink);padding:8px 14px;white-space:nowrap;text-decoration:none;transition:.15s;}
.sitenav a::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;}
.sitenav a:hover{color:var(--blue);}
.sitenav a:hover::after,.sitenav a.on::after{transform:scaleX(1);}
.sitenav a.on{color:var(--blue);font-weight:600;}
.sitebar .btn{margin-left:2px;}
.m-cta{display:none;}

/* menu mobile (burger) */
.navtoggle{display:none;width:44px;height:44px;border:1.5px solid var(--border);background:#fff;color:var(--navy);font-size:22px;cursor:pointer;place-items:center;padding:0;clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);}
@media(max-width:860px){
  .sitenav{display:none;}
  .sitebar .in>.btn{display:none;}
  .navtoggle{display:grid;margin-left:auto;}
  .sitebar.open .sitenav{display:flex;flex-direction:column;gap:0;position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);padding:6px var(--gutter) 20px;box-shadow:0 20px 40px rgba(4,6,51,.12);}
  .sitebar.open .sitenav a{padding:15px 0;font-size:16px;border-bottom:1px solid var(--line);}
  .sitebar.open .sitenav a::after{display:none;}
  .sitebar.open .sitenav .m-cta{display:inline-flex;justify-content:center;margin-top:16px;padding:14px 22px;background:var(--blue);color:#fff;font-weight:600;border-bottom:0;clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);}
}

/* ---- hero accueil (marine, moment signature) ---- */
.home-hero{position:relative;z-index:5;padding-block:clamp(70px,9vw,120px) calc(34px + var(--cut));}
.home-hero .bigv{position:absolute;right:-4%;top:-6%;width:min(600px,48vw);opacity:1;z-index:0;pointer-events:none;height:auto;}
.home-hero .cols{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;}
@media(max-width:860px){.home-hero .cols{grid-template-columns:1fr;}}
.home-hero h1{color:#fff;}
.home-hero .sub{color:#aeb9e6;font-size:clamp(17px,1.7vw,20px);line-height:1.5;margin:24px 0 34px;max-width:36ch;}
.home-hero .ctas{display:flex;gap:16px;flex-wrap:wrap;}
.hero-visual{position:relative;z-index:2;}
.hero-visual .imgbox{box-shadow:0 12px 24px rgba(0,0,0,.28), 0 48px 96px -32px rgba(0,0,0,.62);}
.hero-visual .accent{position:absolute;left:-13px;top:-13px;width:70px;height:70px;background:var(--blue);clip-path:polygon(0 0,100% 0,0 100%);z-index:3;}
@media(max-width:860px){.home-hero .bigv{opacity:.55;width:80vw;right:-20%;}}

/* masque du filigrane (le hero lui-même ne clippe plus, pour laisser passer le pont) */
.heromask{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;}

/* rangée Former · Conseiller · Développer */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:clamp(40px,5vw,60px);position:relative;z-index:2;}
@media(max-width:760px){.triad{grid-template-columns:1fr;}}
.triad .t{padding-top:18px;border-top:2px solid var(--blue);}
.triad .hd{display:flex;align-items:center;gap:10px;margin-bottom:7px;}
.triad .hd i{width:34px;height:34px;font-size:16px;flex:none;display:grid;place-items:center;background:rgba(91,155,255,.16);color:var(--blue-soft);clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);}
.triad .hd b{font-family:var(--font-d);font-weight:600;font-size:18px;color:#fff;}
.triad p{margin:0;font-size:14.5px;color:#aeb9e6;}

/* ---- page head (pages intérieures : marine + V, puis tout clair) ---- */
.pagehead{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,100px) calc(clamp(48px,6vw,80px) + var(--cut));}
.pagehead .bigv{position:absolute;right:-4%;top:-10%;width:min(430px,36vw);opacity:1;z-index:0;pointer-events:none;height:auto;}
.pagehead .in{position:relative;z-index:2;}
.pagehead .t-h1{max-width:22ch;color:#fff;}
.pagehead .lead{margin:18px 0 0;max-width:58ch;color:#aeb9e6;}
.pagehead .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px;}

/* ---- corps clair : sections blanc ↔ mist, coupes subtiles ---- */
.body-light{background:#fff;}
.cut-light{clip-path:polygon(0 0, 100% var(--cut), 100% 100%, 0 100%);margin-top:calc(-1 * var(--cut));padding-top:calc(var(--cut) + clamp(64px,8vw,104px));}
.cut-up{clip-path:polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);margin-top:calc(-1 * var(--cut));padding-top:calc(var(--cut) + clamp(64px,8vw,104px));}

/* ---- image encadrée (biseau + cover) ---- */
.imgbox{position:relative;overflow:hidden;}
.imgbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.imgbox.r43{aspect-ratio:4/3;}
.imgbox.r54{aspect-ratio:5/4;}
.imgbox.r11{aspect-ratio:1/1;}
.imgbox.r169{aspect-ratio:16/9;}
.imgbox.r1610{aspect-ratio:16/10;}

/* ---- split deux colonnes ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:start;}
.split.middle{align-items:center;}
@media(max-width:820px){.split{grid-template-columns:1fr;}}

.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;max-width:none;}

/* ---- cartes exemples avec visuel ---- */
.excard{position:relative;background:#fff;box-shadow:var(--sh-sm),0 0 0 1px var(--line);clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;text-decoration:none;color:inherit;display:block;}
.excard:hover{transform:translateY(-8px);box-shadow:var(--sh-lg),0 0 0 1px var(--line);}
.excard .img{position:relative;overflow:hidden;}
.excard .img.r1610{aspect-ratio:16/10;}
.excard .img.r169{aspect-ratio:16/9;}
.excard .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1);}
.excard:hover .img img{transform:scale(1.05);}
.excard .body{padding:24px 26px 26px;}
.excard .body h3{font-family:var(--font-d);font-weight:600;font-size:20px;letter-spacing:-0.01em;margin:0 0 8px;}
.excard .body .time{font-family:var(--font-s);font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--blue);margin:0;}
.excard .body .desc{font-size:14.5px;color:var(--ink-2);margin:0;}
.excard .minitag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-s);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;}
.excard .minitag .d{width:8px;height:8px;background:var(--blue);}
.excard .cardlink{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:600;font-size:14px;color:var(--blue);}
.excard .cardlink i{font-size:13px;transition:transform .2s ease;}
.excard:hover .cardlink i{transform:translateX(4px);}

/* ---- cartes offre (fond clair par défaut, hot = marine) ---- */
.offer{position:relative;padding:34px 30px 30px;background:#fff;box-shadow:var(--sh-sm),0 0 0 1px var(--line);clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;text-decoration:none;color:inherit;display:block;}
.offer:hover{transform:translateY(-8px);box-shadow:var(--sh-lg),0 0 0 1px var(--line);}
.offer .oi{width:52px;height:52px;font-size:25px;line-height:1;display:grid;place-items:center;margin-bottom:20px;background:var(--blue-light);color:var(--blue);clip-path:polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);}
.offer h3{font-family:var(--font-d);font-weight:600;font-size:23px;margin:0 0 9px;letter-spacing:-0.01em;color:var(--navy);}
.offer p{font-size:15px;margin:0 0 22px;line-height:1.5;color:var(--ink-2);}
.offer .more{font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;gap:7px;color:var(--blue);}
.offer .more .chev{width:14px;height:14px;flex:none;transition:transform .2s ease;}
.offer:hover .more .chev{transform:translateX(4px);}
.offer .core{position:absolute;top:0;left:0;font-family:var(--font-s);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;background:var(--blue);color:#fff;}
.offer.hot{background:var(--navy);}
.offer.hot h3{color:#fff;}
.offer.hot p{color:#c7ccdb;}
.offer.hot .more{color:var(--blue-light);}
.offer.hot .oi{background:rgba(255,255,255,.14);color:#fff;}

/* ---- listes à marqueur ---- */
.mklist{display:flex;flex-direction:column;}
.mklist .row{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);transition:padding-left .2s ease;}
.mklist .row:last-child{border-bottom:0;}
.mklist .row:hover{padding-left:6px;}
.mklist .row i{width:38px;height:38px;font-size:18px;flex:none;display:grid;place-items:center;background:var(--blue-light);color:var(--blue);clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);}
.mklist .row .tx b{display:block;font-weight:700;font-size:15.5px;}
.mklist .row .tx span{font-size:14.5px;color:var(--ink-2);}

/* ---- étapes numérotées ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:820px){.steps{grid-template-columns:1fr;}}
.step{position:relative;padding:30px 26px;background:#fff;box-shadow:var(--sh-sm),0 0 0 1px var(--line);clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;}
.step:hover{transform:translateY(-8px);box-shadow:var(--sh-lg),0 0 0 1px var(--line);}
.step .n{font-family:var(--font-d);font-weight:700;font-size:15px;color:var(--blue);letter-spacing:.05em;}
.step h3{font-family:var(--font-d);font-weight:600;font-size:21px;margin:10px 0 8px;letter-spacing:-0.01em;}
.step p{font-size:14.5px;margin:0;color:var(--ink-2);}

/* ---- timeline verticale (déroulé) ---- */
.vtimeline{position:relative;margin-top:8px;}
.vtimeline .vstep{position:relative;padding:0 0 26px 62px;}
.vtimeline .vstep:last-child{padding-bottom:0;}
.vtimeline .vstep::before{content:"";position:absolute;left:22px;top:48px;bottom:-2px;width:1.5px;background:var(--line);}
.vtimeline .vstep:last-child::before{display:none;}
.vtimeline .vmk{position:absolute;left:0;top:0;width:44px;height:44px;background:var(--blue);color:#fff;display:grid;place-items:center;font-family:var(--font-d);font-weight:700;font-size:17px;clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);}
.vtimeline .vhd{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;min-height:44px;align-content:center;}
.vtimeline .vhd h3{margin:0;font-size:20px;}
.vtimeline .vdur{font-family:var(--font-s);font-weight:700;font-size:12px;letter-spacing:.04em;color:var(--blue);}
.vtimeline .vstep>p{margin:6px 0 0;color:var(--ink-2);font-size:14.5px;max-width:70ch;}

/* ---- tags ---- */
.tags{display:flex;flex-wrap:wrap;gap:10px;}
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-s);font-weight:600;font-size:14px;padding:8px 15px;background:#fff;box-shadow:inset 0 0 0 1px var(--border);clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);}
.tag .d{width:9px;height:9px;background:var(--blue);flex:none;}

/* ---- KPI ---- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:680px){.stats{grid-template-columns:1fr;}}
.kpi{padding:clamp(24px,3.5vw,36px) clamp(22px,3vw,30px);background:#fff;box-shadow:var(--sh-sm),0 0 0 1px var(--line);clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);}
.kpi .n{font-family:var(--font-d);font-weight:700;font-size:clamp(40px,5vw,56px);letter-spacing:-0.03em;line-height:1;color:var(--blue);}
.kpi .d{font-size:14.5px;margin-top:10px;color:var(--ink-2);}

/* ---- témoignages ---- */
.quote{padding:28px 30px;background:#fff;box-shadow:var(--sh-sm),0 0 0 1px var(--line);clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;}
.quote:hover{transform:translateY(-8px);box-shadow:var(--sh-lg),0 0 0 1px var(--line);}
.quote blockquote{margin:0;font-family:var(--font-d);font-weight:500;font-size:17px;line-height:1.42;letter-spacing:-0.01em;color:var(--navy);}
.quote .who{margin-top:20px;display:flex;align-items:center;gap:12px;}
.quote .who .av{width:40px;height:40px;flex:none;overflow:hidden;background:var(--mist);clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);}
.quote .who .av img{width:100%;height:100%;object-fit:cover;}
.quote .who .nm{font-weight:700;font-size:14.5px;}
.quote .who .rl{font-size:13px;color:var(--ink-2);}

/* ---- bandeau logos ---- */
.logoband{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.logoband .cell{aspect-ratio:8/3;display:grid;place-items:center;background:#fff;transition:background .2s ease;}
.logoband .cell:hover{background:var(--mist);}
.logoband .cell img{max-height:30px;max-width:64%;filter:grayscale(1);opacity:.7;transition:.2s;}
.logoband .cell:hover img{filter:none;opacity:1;}
@media(max-width:820px){.logoband{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.logoband{grid-template-columns:repeat(2,1fr);}}

/* ---- mur d'outils ---- */
.toolwall{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.toolwall .tool{background:#fff;aspect-ratio:1/1;display:grid;place-items:center;padding:14px;transition:background .2s ease;}
.toolwall .tool:hover{background:var(--mist);}
.toolwall .tool img{max-width:42px;max-height:42px;width:auto;height:auto;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.toolwall .tool:hover img{transform:scale(1.12);}
@media(max-width:880px){.toolwall{grid-template-columns:repeat(5,1fr);}}
@media(max-width:560px){.toolwall{grid-template-columns:repeat(4,1fr);}}
@media(max-width:380px){.toolwall{grid-template-columns:repeat(3,1fr);}}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:20px 0;font-family:var(--font-d);font-weight:600;font-size:18px;letter-spacing:-0.01em;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .pm{margin-left:auto;flex:none;width:28px;height:28px;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--border);color:var(--ink-2);font-size:16px;transition:.15s;clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);}
.faq details[open] summary .pm{background:var(--blue);color:#fff;box-shadow:none;}
.faq .a{padding:0 0 22px;color:var(--ink-2);max-width:72ch;margin:0;animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

/* ---- bloc tarif ---- */
.pricebox{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 22px;padding:clamp(22px,3.5vw,30px);background:#fff;box-shadow:var(--sh-sm),0 0 0 1px var(--line);clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);}
.pricebox .from{display:block;font-family:var(--font-s);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
.pricebox .amount{font-family:var(--font-d);font-weight:700;font-size:clamp(26px,3vw,34px);letter-spacing:-0.02em;line-height:1;color:var(--navy);}
.pricebox .note{font-size:14px;color:var(--ink-2);padding-bottom:3px;}

/* ---- ligne tarif + CTA (page Offres) ---- */
.offercta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);}
.offercta .priceline{font-size:16px;color:var(--ink-2);}
.offercta .priceline b{font-family:var(--font-d);font-weight:700;font-size:20px;letter-spacing:-0.01em;color:var(--navy);}
.offercta .priceline .from{font-family:var(--font-s);font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);}
.offercta .btn{margin-left:auto;}
@media(max-width:560px){.offercta .btn{margin-left:0;}}

/* ---- encart ---- */
.callout{padding:clamp(22px,3.5vw,30px);background:#fff;box-shadow:var(--sh-sm),0 0 0 1px var(--line);border-left:3px solid var(--blue);clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);}
.callout h3{margin:0 0 8px;}
.callout p{margin:0;color:var(--ink-2);max-width:74ch;}
.callout p+p{margin-top:10px;}

/* ---- formulaire ---- */
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-family:var(--font-s);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);}
.field input,.field textarea{font-family:var(--font-s);font-size:15.5px;color:var(--navy);background:var(--mist);border:0;padding:13px 14px;outline:none;transition:.15s;width:100%;clip-path:polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);}
.field input:focus,.field textarea:focus{background:var(--blue-light);}
.field textarea{resize:vertical;min-height:120px;}

/* ---- bandeau CTA (marine, coupé des deux côtés) ---- */
.ctaband{position:relative;overflow:hidden;}
.ctaband .bigv{position:absolute;left:-60px;bottom:-70px;width:300px;opacity:1;z-index:0;height:auto;}
.ctafinal{max-width:38ch;margin-inline:auto;text-align:center;position:relative;z-index:2;}
.ctafinal h2{color:#fff;}
.ctafinal .lead{margin:18px auto 30px;color:#aeb9e6;}
.ctafinal .btn{margin-inline:auto;}
.ground-dark .eyebrow{color:var(--blue-soft);}

/* ---- lien retour ---- */
.backlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-s);font-size:13px;letter-spacing:.02em;color:var(--ink-2);text-decoration:none;}
.backlink:hover{color:var(--blue);}
.backlink i{font-size:13px;}

/* ---- footer (marine, continuité du CTA) ---- */
.foot{padding-block:clamp(50px,6vw,72px) 32px;position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08);}
.foot .top{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;}
.foot .lockup img{height:28px;width:auto;}
.foot .base{font-size:14px;color:#aeb9e6;margin-top:16px;max-width:34ch;}
.foot nav{display:flex;flex-direction:column;gap:9px;}
.foot nav a{color:#aeb9e6;text-decoration:none;font-size:14px;}
.foot nav a:hover{color:#fff;}
.foot .ttl{font-family:var(--font-s);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#5b6699;margin-bottom:13px;}
.foot .legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:#5b6699;}
.foot .legal a{color:inherit;text-decoration:none;}

/* ===========================================================
   MOUVEMENT
   =========================================================== */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}
.home-hero h1,.home-hero .sub,.home-hero .ctas,.hero-visual,.triad>.t{opacity:0;transform:translateY(20px);}
body.loaded .home-hero h1{animation:rise .7s cubic-bezier(.22,.61,.36,1) .05s forwards;}
body.loaded .home-hero .sub{animation:rise .7s cubic-bezier(.22,.61,.36,1) .16s forwards;}
body.loaded .home-hero .ctas{animation:rise .7s cubic-bezier(.22,.61,.36,1) .27s forwards;}
body.loaded .hero-visual{animation:rise .8s cubic-bezier(.22,.61,.36,1) .3s forwards;}
body.loaded .triad>.t:nth-child(1){animation:rise .7s cubic-bezier(.22,.61,.36,1) .45s forwards;}
body.loaded .triad>.t:nth-child(2){animation:rise .7s cubic-bezier(.22,.61,.36,1) .55s forwards;}
body.loaded .triad>.t:nth-child(3){animation:rise .7s cubic-bezier(.22,.61,.36,1) .65s forwards;}
@keyframes rise{to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
  .reveal,.home-hero h1,.home-hero .sub,.home-hero .ctas,.hero-visual,.triad>.t{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;}
  .btn:hover,.excard:hover,.step:hover,.quote:hover{transform:none!important;}
}


/* ===========================================================
   PREMIUM — nouveaux motifs éditoriaux
   =========================================================== */

/* pont : cartes qui chevauchent la coupe entre deux sections */
.bridge{position:relative;z-index:6;margin-top:clamp(46px,6vw,68px);margin-bottom:calc(-1 * (var(--cut) + 96px));}
.after-bridge{padding-top:calc(var(--cut) + 150px);}
@media(max-width:820px){.bridge{margin-bottom:0;}.after-bridge{padding-top:calc(var(--cut) + clamp(56px,7vw,80px));}}
.bridge .bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:820px){.bridge .bcards{grid-template-columns:1fr;}}
.bcard{display:flex;align-items:flex-start;gap:16px;padding:24px 26px;background:#fff;box-shadow:var(--sh-md),0 0 0 1px var(--line);clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease;}
.bcard:hover{transform:translateY(-6px);box-shadow:var(--sh-lg),0 0 0 1px var(--line);}
.bcard i{width:44px;height:44px;font-size:20px;flex:none;display:grid;place-items:center;background:var(--blue-light);color:var(--blue);clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);}
.bcard b{font-family:var(--font-d);font-weight:600;font-size:17.5px;display:block;margin-bottom:3px;color:var(--navy);}
.bcard p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2);}

/* bandeau logos épuré (sans grille) */
.logostrip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:26px 34px;}
.logostrip img{max-height:31px;width:auto;filter:grayscale(1);opacity:.55;transition:.25s;}
.logostrip img:hover{filter:none;opacity:1;}
/* PC : tous les logos sur une seule ligne */
@media(min-width:1001px){
  .logostrip{flex-wrap:nowrap;gap:clamp(14px,2vw,30px);justify-content:space-between;}
}
/* tablette : deux lignes équilibrées */
@media(max-width:1000px) and (min-width:601px){
  .logostrip{max-width:640px;margin-inline:auto;gap:24px 40px;}
}

/* KPI éditorial : grands chiffres, filets fins */
.kpiband{display:grid;grid-template-columns:repeat(3,1fr);}
@media(max-width:680px){.kpiband{grid-template-columns:1fr;}}
.kpiband .k{padding:8px clamp(24px,4vw,48px);border-left:1px solid var(--line);}
.kpiband .k:first-child{border-left:0;padding-left:0;}
@media(max-width:680px){.kpiband .k{border-left:0;padding:18px 0;border-top:1px solid var(--line);}.kpiband .k:first-child{border-top:0;}}
.kpiband .n{font-family:var(--font-d);font-weight:600;font-size:clamp(52px,6.5vw,80px);letter-spacing:-0.035em;line-height:1;color:var(--blue);}
.kpiband .d{font-size:15px;margin-top:10px;color:var(--ink-2);}

/* méthode éditoriale : numéros fantômes */
.steps-ed{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,48px);}
@media(max-width:820px){.steps-ed{grid-template-columns:1fr;gap:36px;}}
.se{position:relative;padding-top:clamp(52px,6vw,72px);}
.se .ghost{position:absolute;top:0;left:-4px;font-family:var(--font-d);font-weight:600;font-size:clamp(72px,9vw,110px);line-height:1;letter-spacing:-0.04em;color:transparent;-webkit-text-stroke:1.5px rgba(1,101,255,.35);pointer-events:none;}
.se h3{font-family:var(--font-d);font-weight:600;font-size:23px;letter-spacing:-0.01em;margin:0 0 10px;position:relative;}
.se p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);}

/* photo à double cadre décalé */
.frame-accent{position:relative;}
.frame-accent::before{content:"";position:absolute;top:18px;right:-18px;bottom:-18px;left:18px;background:var(--blue);z-index:0;clip-path:polygon(evenodd, 0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%, 0 0, 2px 2px, calc(100% - var(--bevel-card) - 1px) 2px, calc(100% - 2px) calc(var(--bevel-card) + 1px), calc(100% - 2px) calc(100% - 2px), 2px calc(100% - 2px), 2px 2px);}
.frame-accent .imgbox{position:relative;z-index:1;}
.frame-accent .tri{position:absolute;left:-13px;top:-13px;width:64px;height:64px;background:var(--blue);clip-path:polygon(0 0,100% 0,0 100%);z-index:3;}

/* témoignage vedette + secondaires */
.quotes-ed{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch;}
@media(max-width:820px){.quotes-ed{grid-template-columns:1fr;}}
.quote-hero{position:relative;padding:clamp(34px,4.5vw,52px);background:var(--navy);color:#fff;clip-path:polygon(0 0, calc(100% - var(--bevel-card)) 0, 100% var(--bevel-card), 100% 100%, 0 100%);box-shadow:var(--sh-md);}
.quote-hero .gq{position:absolute;top:10px;left:22px;font-family:var(--font-d);font-weight:700;font-size:120px;line-height:1;color:var(--blue);opacity:.5;pointer-events:none;}
.quote-hero blockquote{position:relative;margin:0;font-family:var(--font-d);font-weight:500;font-size:clamp(19px,2.2vw,24px);line-height:1.42;letter-spacing:-0.01em;}
.quote-hero .who{margin-top:26px;display:flex;align-items:center;gap:13px;position:relative;}
.quote-hero .who .av{width:44px;height:44px;flex:none;overflow:hidden;clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);}
.quote-hero .who .av img{width:100%;height:100%;object-fit:cover;}
.quote-hero .who .nm{font-weight:700;font-size:15px;}
.quote-hero .who .rl{font-size:13px;color:#8ea2e8;}
.quotes-ed .side{display:flex;flex-direction:column;gap:22px;}
.quotes-ed .side .quote{flex:1;}

/* ===========================================================
   Bordures qui suivent le biseau (même technique que .btn-ghost :
   fond de l'élément = couleur de bordure, ::before intérieur = remplissage)
   =========================================================== */
.offer,.excard,.step,.kpi,.quote,.pricebox,.callout,.bcard,.tag,.navtoggle{
  position:relative;z-index:0;
  background:var(--fill);   /* fond = remplissage : blocs plats, sans bordure */
  --bv:var(--bevel-card);
  --fill:#fff;
}
.offer::before,.excard::before,.step::before,.kpi::before,.quote::before,.pricebox::before,.callout::before,.bcard::before,.tag::before,.navtoggle::before{
  content:"";position:absolute;inset:1px;z-index:-1;
  background:var(--fill);
  clip-path:polygon(0 0, calc(100% - var(--bv) + 0.5px) 0, 100% calc(var(--bv) - 0.5px), 100% 100%, 0 100%);
}
/* biseaux spécifiques */
.bcard{--bv:18px;}
.tag{--bv:9px;box-shadow:none;}
.navtoggle{--bv:9px;border:0;background:var(--border);}   /* seul élément qui garde sa bordure */
/* le callout garde son filet bleu à gauche */
.callout::before{left:3px;}
/* remplissages selon le fond de section */
/* sur fond blanc : blocs plats couleur mist (même gris que les sections claires) */
.ground-white .offer:not(.hot),.ground-white .quote,.ground-white .step,.ground-white .bcard,.ground-white .kpi,.ground-white .excard,.ground-white .callout,.ground-white .tag{--fill:var(--mist);}
.ground-light .offer{background:var(--fill);}
.offer.hot,.ground-light .offer.hot{background:var(--navy);--fill:var(--navy);}
.ground-dark .offer,.ground-blue .offer{background:rgba(255,255,255,.14);--fill:var(--navy-2);box-shadow:none;}
.ground-dark .offer.hot,.ground-blue .offer.hot{background:var(--blue);--fill:var(--blue);}

/* ---- footer mobile : colonnes empilées ---- */
@media(max-width:680px){
  .foot .top{flex-direction:column;gap:38px;justify-content:flex-start;}
}

/* ---- filigrane V des heros : plus discret, fondu dans le marine ---- */
.home-hero .bigv,.pagehead .bigv,.ctaband .bigv{opacity:.4;}