/* ==========================================================================
   Elevate · sites.css · pages de sites (vitrines, marchands, 3D premium), « Le sommet du moment »
   et module d'accueil du sommet. Chargé après css/pages.css.
   Même ambiance que le reste du site (blanc, or, Instrument Serif), trois mises en forme distinctes :
     1. Sites vitrines  : mosaïque de grandes cartes plein cadre (.vgrid / .vcard)
     2. Sites marchands : cartes qui s'empilent au défilement (.stack / .scard)
     3. Sites 3D premium : diptyque de panneaux qui s'ouvrent (.dip / .dpanel)
     4. Le sommet du moment : scène de navigation dans le site L'Odyssée (.stage)
     5. Module du sommet sur l'accueil (.summit)
     6. Bandeau d'appel au devis (.cta--quote)
   ========================================================================== */

/* ---------- Mots-clés communs ---------- */
.pbtn{white-space:normal;max-width:100%;min-width:0;height:auto;min-height:var(--h);padding-block:15px;line-height:1.35}
.sx-note{margin-top:clamp(18px,2vw,28px);font:400 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.sx-for{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:clamp(18px,2vw,26px)}
.sx-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,72px);align-items:end;padding-top:clamp(8px,2vw,28px);padding-bottom:clamp(28px,4vw,56px)}
.sx-intro__lead{font:400 clamp(24px,2.6vw,40px)/1.25 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.sx-intro__lead em{font-style:italic}
.sx-intro__side{color:var(--ink-2);font-size:clamp(15px,1.15vw,17px);line-height:1.75}
@media (max-width:860px){.sx-intro{grid-template-columns:1fr;align-items:start}}

/* ==========================================================================
   1. Sites vitrines : mosaïque plein cadre
   ========================================================================== */
.vgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.vcard{grid-column:span 4;min-width:0;display:flex}
.vcard--7{grid-column:span 7}
.vcard--5{grid-column:span 5}
.vcard--4{grid-column:span 4}
.vcard--6{grid-column:span 6}
.vcard__in{
  position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;flex:1;overflow:hidden;
  min-height:clamp(380px,40vw,600px);border-radius:26px;background:#0e1218;color:#fff;box-shadow:var(--shadow-s);
  transition:box-shadow .9s var(--ease),transform .9s var(--ease);
}
.vcard--7 .vcard__in,.vcard--5 .vcard__in{min-height:clamp(420px,44vw,640px)}
.vcard__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform 2s var(--ease),filter 1s var(--ease)}
.vcard__shade{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,10,14,.94) 0,rgba(8,10,14,.82) 30%,rgba(8,10,14,.4) 52%,rgba(8,10,14,.06) 70%,rgba(8,10,14,.34) 100%);
  transition:opacity .8s var(--ease);
}
@media (hover:hover){
  .vcard:hover .vcard__in{box-shadow:var(--shadow-m);transform:translateY(-4px)}
  .vcard:hover .vcard__img{transform:scale(1.05)}
}
.vcard__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 0;font:400 10.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.vcard__top span:last-child{text-align:right}
.vcard__body{padding:0 22px 22px}
.vcard__name{font:400 clamp(36px,3.6vw,60px)/1 var(--serif);letter-spacing:-.018em;text-wrap:balance}
.vcard--7 .vcard__name,.vcard--5 .vcard__name{font-size:clamp(40px,4.4vw,72px)}
.vcard__land{margin-top:10px;font:400 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.vcard__pitch{margin-top:14px;max-width:46ch;font-size:15px;line-height:1.65;color:rgba(255,255,255,.86)}
.vcard__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 22px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.26)}
.vcard__visit{
  display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 20px;border-radius:99px;background:#fff;color:var(--ink);
  font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;transition:background-color .5s var(--ease),transform .6s var(--ease);
}
.vcard__visit::after{content:"";position:absolute;inset:0;border-radius:26px;z-index:1}
.vcard__more{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;
  font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)) 0 100%/100% 1px no-repeat;
}
.vcard__more:hover,.vcard__more:focus-visible{background-image:linear-gradient(var(--gold),var(--gold))}
.vcard__tag{position:absolute;left:22px;top:60px;z-index:2;padding:7px 12px;border-radius:99px;background:var(--gold);color:var(--ink);font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
.vcard:has(.vcard__visit:focus-visible) .vcard__in{outline:2px solid var(--ink);outline-offset:4px}
.vcard__visit:focus-visible{outline:none}
/* Le pitch se révèle au survol sur bureau ; toujours visible au toucher et au clavier */
@media (hover:hover) and (min-width:900px){
  .vcard__pitch{max-height:0;margin-top:0;opacity:0;overflow:hidden;transition:max-height .9s var(--ease),opacity .7s var(--ease),margin-top .9s var(--ease)}
  .vcard:hover .vcard__pitch,.vcard:focus-within .vcard__pitch{max-height:12em;margin-top:14px;opacity:1}
}
@media (max-width:1100px){
  .vgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vcard,.vcard--7,.vcard--5,.vcard--4,.vcard--6{grid-column:auto}
  .vcard--7:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .vgrid{grid-template-columns:1fr}
  .vcard--7:first-child{grid-column:auto}
  .vcard__in,.vcard--7 .vcard__in,.vcard--5 .vcard__in{min-height:clamp(400px,112vw,520px)}
}

/* ==========================================================================
   2. Sites marchands : cartes qui s'empilent
   ========================================================================== */
.stack{display:grid;gap:clamp(24px,5vw,64px);padding-bottom:clamp(8px,2vw,24px)}
.scard{position:relative;min-width:0}
.scard__in{
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);align-items:center;
  padding:clamp(22px,3.2vw,52px);border-radius:clamp(26px,3vw,44px);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-m);
}
.scard__in::before{content:"";position:absolute;inset:auto -10% -45% 30%;height:80%;z-index:-1;background:radial-gradient(closest-side,var(--cloud-2),rgba(238,241,245,0));pointer-events:none}
.scard__media{grid-column:1/7;position:relative;min-width:0}
.scard:nth-child(even) .scard__media{grid-column:7/13;grid-row:1}
.scard:nth-child(even) .scard__text{grid-column:1/7;grid-row:1}
.scard__text{grid-column:8/13;position:relative;min-width:0}
.scard__win{aspect-ratio:16/11;border-radius:clamp(120px,14vw,200px) 26px clamp(120px,14vw,200px) 26px}
.scard:nth-child(even) .scard__win{border-radius:26px clamp(120px,14vw,200px) 26px clamp(120px,14vw,200px)}
.scard__win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.8s var(--ease)}
@media (hover:hover){.scard:hover .scard__win img{transform:scale(1.04)}}
.scard__ghost{position:absolute;z-index:-1;right:-.02em;top:-.28em;font:400 clamp(130px,15vw,240px)/1 var(--serif);letter-spacing:-.04em;color:var(--cloud-2);pointer-events:none;user-select:none}
.scard__no{display:inline-flex;align-items:center;gap:12px;font:400 11.5px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.scard__no::after{content:"";width:34px;height:1px;background:var(--gold)}
.scard__name{margin-top:clamp(14px,1.6vw,22px);font:400 clamp(42px,5.2vw,84px)/.98 var(--serif);letter-spacing:-.022em;text-wrap:balance}
.scard__meta{margin-top:12px;font:400 11px/1.55 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.scard__pitch{margin-top:clamp(16px,1.8vw,24px);max-width:44ch;font-size:clamp(16px,1.2vw,18px);line-height:1.75;color:var(--ink-2)}
.scard__steps{margin-top:clamp(18px,2vw,28px);display:grid;gap:0;border-top:1px solid var(--line-2)}
.scard__steps li{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.scard__steps li span{flex:none;min-width:2ch;font:400 11px/1.6 var(--mono);letter-spacing:.14em;color:var(--ink-2)}
.scard__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(22px,2.4vw,34px)}
@media (min-width:861px){
  .scard{position:sticky;top:calc(var(--nav-h) + 14px + var(--k,0)*20px)}
  .scard:nth-child(1){--k:0}.scard:nth-child(2){--k:1}.scard:nth-child(3){--k:2}.scard:nth-child(4){--k:3}
  .scard__in{min-height:min(620px,calc(100vh - var(--nav-h) - 80px))}
}
@media (max-width:860px){
  .scard__in{display:block}
  .scard__text{margin-top:clamp(24px,5vw,36px)}
  .scard__win{aspect-ratio:16/12}
  .scard__ghost{top:-.2em}
}

/* ==========================================================================
   3. Sites 3D premium : diptyque
   ========================================================================== */
.dip{display:flex;gap:clamp(12px,1.4vw,22px);height:clamp(560px,82vh,820px)}
.dpanel{
  position:relative;isolation:isolate;flex:1 1 0;min-width:0;overflow:hidden;border-radius:clamp(26px,3vw,44px);background:#0e1218;color:#fff;box-shadow:var(--shadow-m);
  transition:flex-grow 1.1s var(--ease);
}
@media (min-width:901px){
  .dip:hover .dpanel{flex-grow:.62}
  .dip .dpanel:hover,.dip .dpanel:focus-within{flex-grow:2.2}
}
.dpanel__img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transition:transform 2.2s var(--ease)}
.dpanel:hover .dpanel__img{transform:scale(1.05)}
.dpanel__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(8,10,14,.96) 0,rgba(8,10,14,.88) 34%,rgba(8,10,14,.5) 56%,rgba(8,10,14,.1) 74%,rgba(8,10,14,.4) 100%)}
.dpanel__top{position:absolute;left:clamp(20px,2.4vw,36px);right:clamp(20px,2.4vw,36px);top:clamp(18px,2vw,30px);display:flex;justify-content:space-between;gap:12px;font:400 10.5px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.dpanel__body{position:absolute;left:clamp(20px,2.4vw,36px);right:clamp(20px,2.4vw,36px);bottom:clamp(20px,2.4vw,36px)}
.dpanel__name{font:400 clamp(44px,5.6vw,96px)/.96 var(--serif);letter-spacing:-.022em;text-wrap:balance}
.dpanel__land{margin-top:12px;font:400 11px/1.5 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.dpanel__more{max-width:54ch}
.dpanel__pitch{margin-top:16px;font-size:clamp(15px,1.2vw,17.5px);line-height:1.7;color:rgba(255,255,255,.88)}
.dpanel__list{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.dpanel__list li{padding:8px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.dpanel__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.dpanel .btn--light{background:#fff;color:var(--ink);box-shadow:0 14px 34px -16px rgba(0,0,0,.6)}
.dpanel .btn--light::after{display:none}
@media (hover:hover){.dpanel .btn--light:hover{transform:translateY(-2px)}}
.dpanel__link{
  display:inline-flex;align-items:center;gap:8px;padding-bottom:5px;font:500 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)) 0 100%/100% 1px no-repeat;
}
.dpanel__link:hover,.dpanel__link:focus-visible{background-image:linear-gradient(var(--gold),var(--gold))}
.dpanel .dpanel__link:focus-visible,.dpanel .btn:focus-visible{outline-color:#fff}
/* Sur bureau, le texte long n'apparaît que sur le panneau ouvert */
@media (min-width:901px){
  .dpanel__more{max-height:0;opacity:0;overflow:hidden;transition:max-height 1s var(--ease),opacity .8s var(--ease)}
  .dip .dpanel:hover .dpanel__more,.dip .dpanel:focus-within .dpanel__more{max-height:22em;opacity:1}
  .dip:not(:hover):not(:focus-within) .dpanel:first-child .dpanel__more{max-height:22em;opacity:1}
  .dip:not(:hover):not(:focus-within) .dpanel:first-child{flex-grow:2.2}
}
@media (max-width:900px){
  .dip{flex-direction:column;height:auto}
  .dpanel{min-height:clamp(480px,120vw,640px)}
}
.dip-hint{margin-top:18px;text-align:center;font:400 11px/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:900px){.dip-hint{display:none}}
.dgain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,26px)}
@media (max-width:860px){.dgain{grid-template-columns:1fr}}

/* ==========================================================================
   4. Le sommet du moment : scène de navigation
   ========================================================================== */
.stagesec{position:relative;padding-block:clamp(40px,5vw,80px) var(--sec)}
.stagesec__head{max-width:62rem;margin:0 auto clamp(26px,3.4vw,48px);text-align:center;display:flex;flex-direction:column;align-items:center}
.stagesec .wrap{z-index:auto}
.stage{position:relative}
.stage__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-bottom:clamp(14px,1.8vw,24px);
}
.seg{display:inline-flex;padding:4px;border-radius:99px;background:var(--cloud-2);border:1px solid var(--line)}
.seg button{min-height:40px;padding:0 18px;border:0;border-radius:99px;background:transparent;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);transition:background-color .4s var(--ease),color .4s var(--ease)}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.stage__tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.tbtn{white-space:nowrap;display:inline-flex;align-items:center;gap:10px;min-height:42px;padding:0 18px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.tbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.tbtn:hover{border-color:var(--ink)}}
.chips2{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(14px,1.8vw,24px)}
.chips2 button{min-height:40px;padding:0 16px;border-radius:99px;border:1px solid var(--line-2);background:#fff;font:400 11.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:background-color .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
@media (hover:hover){.chips2 button:hover{border-color:var(--ink)}}
.chips2 button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips2__label{align-self:center;margin-right:6px;font:400 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

.stage__view{position:relative;display:grid;place-items:center;padding:clamp(18px,3vw,44px) 0;border-radius:clamp(26px,3vw,44px);overflow:hidden;isolation:isolate;background:var(--cloud)}
.stage__bg{position:absolute;inset:0;z-index:-1;background:url("../assets/img/m-lake.webp") center/cover;opacity:.55;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 100%)}
.stage__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.55),rgba(255,255,255,.2))}
.device{position:relative;background:#0b1017;box-shadow:0 40px 90px -34px rgba(20,30,50,.55),0 0 0 1px rgba(20,22,27,.14);overflow:hidden;transition:width .9s var(--ease),height .9s var(--ease),border-radius .9s var(--ease),padding .9s var(--ease)}
.device__chrome{display:none}
.device__screen{position:relative;width:100%;height:100%;background:#070b10;overflow:hidden}
.device iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#070b10}
.device__guard{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;border:0;padding:0;
  background:linear-gradient(to top,rgba(7,11,16,.55),rgba(7,11,16,.1) 60%);color:#fff;cursor:pointer;transition:opacity .6s var(--ease),visibility 0s linear .6s;
}
.stage.is-active .device__guard{opacity:0;visibility:hidden;pointer-events:none}
.device__guard span{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:99px;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);font:500 12px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.device__guard i{display:block;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(201,164,106,.6);animation:pulse 2.2s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(201,164,106,0)}100%{box-shadow:0 0 0 0 rgba(201,164,106,0)}}
.device__loading{position:absolute;inset:0;z-index:1;display:grid;place-items:center;background:#070b10 url("../assets/portfolio/odyssee-desktop.webp") center/cover;color:#fff}
.device__loading::after{content:"";position:absolute;inset:0;background:rgba(7,11,16,.5)}
.device__loading span{position:relative;z-index:1;font:400 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.device.is-loaded .device__loading{opacity:0;visibility:hidden;transition:opacity .8s var(--ease),visibility 0s linear .8s}

/* Ordinateur : fenêtre de navigateur */
.stage[data-mode="desktop"] .device{width:min(100%,1240px);height:clamp(520px,76vh,780px);border-radius:18px;padding-top:40px}
.stage[data-mode="desktop"] .device__chrome{display:flex;align-items:center;gap:8px;position:absolute;left:0;right:0;top:0;height:40px;padding:0 14px;background:#e9edf2;border-bottom:1px solid var(--line-2);z-index:4}
.device__chrome i{display:block;width:10px;height:10px;border-radius:50%;background:#c3cad4}
.device__url{flex:1;max-width:480px;margin:0 auto;padding:6px 14px;border-radius:99px;background:#fff;font:400 11px/1.2 var(--mono);letter-spacing:.06em;color:var(--ink-2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Téléphone : cadre et encoche */
.stage[data-mode="phone"] .device{width:min(100%,392px);height:clamp(620px,78vh,820px);border-radius:46px;padding:12px;background:#10141a;box-shadow:0 40px 90px -30px rgba(20,30,50,.6),0 0 0 2px #2a313b,inset 0 0 0 2px #1a2029}
.stage[data-mode="phone"] .device__screen{border-radius:34px}
.stage[data-mode="phone"] .device__screen::before{content:"";position:absolute;left:50%;top:10px;z-index:5;width:92px;height:24px;margin-left:-46px;border-radius:99px;background:#05070a;pointer-events:none}
.stage[data-mode="phone"] .device__guard{border-radius:34px}

/* Plein écran : la scène recouvre la page (même iframe, aucun rechargement) */
html.stage-full{overflow:hidden}
.stage.is-full{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#fff}
.stage.is-full .stage__bar{margin:0 0 10px}
.stage.is-full .chips2{margin:0 0 10px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.stage.is-full .chips2 button{flex:none}
.stage.is-full .stage__view{flex:1;min-height:0;padding:0;border-radius:18px;display:block;background:#070b10}
.stage.is-full .stage__bg{display:none}
.stage.is-full .device{width:100%!important;height:100%!important;border-radius:18px!important;padding:0!important;box-shadow:none}
.stage.is-full .device__chrome{display:none!important}
.stage.is-full .device__screen{border-radius:18px!important}
.stage.is-full .device__screen::before{display:none}
.stage__hint{margin-top:clamp(14px,1.8vw,22px);text-align:center;font:400 11px/1.6 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.stage.is-full .stage__hint{display:none}

@media (max-width:900px){
  .seg{display:none}
  .stage[data-mode="desktop"] .device{width:min(100%,392px);height:clamp(560px,76svh,780px);border-radius:46px;padding:12px}
}
@media (max-width:480px){
  .stage__view{padding:0;background:transparent;border-radius:0;overflow:visible}
  .stage__bg{display:none}
  .stage[data-mode="phone"] .device,.stage[data-mode="desktop"] .device{width:100%;height:min(76svh,720px);border-radius:30px;padding:8px}
  .stage[data-mode="phone"] .device__screen,.stage[data-mode="desktop"] .device__screen{border-radius:24px}
  .stage[data-mode="desktop"] .device__chrome{display:none}
  .stage__tools{width:100%}
  .stage__tools .tbtn{flex:1;justify-content:center}
}

/* Pourquoi ce sommet */
.why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
@media (max-width:1100px){.why{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.why{grid-template-columns:1fr}}
.sfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(30px,4vw,56px) 0 0;border-top:1px solid var(--line-2)}
.sfacts>div{padding:clamp(18px,2vw,28px) clamp(14px,2vw,28px);border-bottom:1px solid var(--line-2);border-left:1px solid var(--line)}
.sfacts>div:first-child{padding-left:0;border-left:0}
.sfacts dt{font:400 11px/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.sfacts dd{margin:8px 0 0;font:400 clamp(24px,2.4vw,36px)/1.1 var(--serif);letter-spacing:-.01em}
@media (max-width:860px){.sfacts{grid-template-columns:repeat(2,minmax(0,1fr))}.sfacts>div:nth-child(odd){padding-left:0;border-left:0}.sfacts>div:nth-child(even){border-left:1px solid var(--line)}}

/* ==========================================================================
   5. Module du sommet sur l'accueil
   ========================================================================== */
.summit{position:relative;overflow:hidden;isolation:isolate;padding-block:clamp(96px,12vw,190px);background:#fff}
.summit .mtn{top:0;bottom:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 26%,#000 74%,transparent 100%)}
.summit .mtn::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(100deg,#fff 0,rgba(255,255,255,.9) 36%,rgba(255,255,255,.42) 70%,rgba(255,255,255,.2) 100%)}
.summit__grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,6vw,110px);align-items:center}
.summit__title{margin-top:22px;font:400 clamp(46px,7vw,116px)/.98 var(--serif);letter-spacing:-.024em;text-wrap:balance}
.summit__title em{font-style:italic}
.summit__title-in{position:relative;display:inline-block;padding:.12em .3em}
.summit__lead{max-width:48ch}
.summit__actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:clamp(26px,3vw,42px)}
.summit__visual{position:relative;display:block;min-width:0;padding:0 0 clamp(20px,4vw,56px) 0}
.sdev{position:relative;border-radius:16px;overflow:hidden;background:#0b1017;box-shadow:0 40px 90px -34px rgba(20,30,50,.5),0 0 0 1px rgba(20,22,27,.14);transition:transform 1.2s var(--ease)}
.sdev--desk{padding-top:30px;transform:rotate(-1.4deg)}
.sdev--desk::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:#e9edf2 radial-gradient(circle at 16px 15px,#c3cad4 4px,transparent 5px),radial-gradient(circle at 32px 15px,#c3cad4 4px,transparent 5px)}
.sdev--desk img{width:100%;aspect-ratio:16/10;object-fit:cover}
.sdev--phone{position:absolute;right:-2%;bottom:0;width:30%;padding:5px;border-radius:26px;background:#10141a;transform:rotate(3deg);box-shadow:0 30px 60px -20px rgba(20,30,50,.6),0 0 0 1.5px #2a313b}
.sdev--phone img{width:100%;aspect-ratio:9/19.5;object-fit:cover;border-radius:21px}
@media (hover:hover){.summit__visual:hover .sdev--desk{transform:rotate(-.4deg) translateY(-6px)}.summit__visual:hover .sdev--phone{transform:rotate(1.5deg) translateY(-10px)}}
@media (max-width:900px){.summit__grid{grid-template-columns:1fr}.summit__visual{max-width:620px}}
@media (max-width:640px){.summit__actions .btn{width:100%}}

/* ==========================================================================
   6. Bandeau d'appel au devis
   ========================================================================== */
.cta__note{margin-top:clamp(16px,1.8vw,24px);font:400 11.5px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#3d4552}
.cta--quote .cta__phrase{max-width:15em}
.cta--quote .btn--primary{--h:64px;padding-inline:44px}

/* ---------- Animations réduites ---------- */
@media (prefers-reduced-motion:reduce){
  .vcard__in,.vcard__img,.dpanel,.dpanel__img,.scard__win img,.sdev,.device,.dpanel__more{transition:none!important;transform:none!important}
  .vcard__pitch{max-height:none!important;opacity:1!important;margin-top:14px!important}
  .dpanel__more{max-height:none!important;opacity:1!important}
  .device__guard i{animation:none}
}

/* Accueil : trois liens vers les pages de sites */
.creations__more{display:flex;flex-wrap:wrap;gap:14px 32px}