:root{
  --blue:#0164FD; --blue-deep:#0146B0; --red:#FD7A01; --red-deep:#D86500; --red-on-dark:#FF9A3D; --error:#C8102E;
  --ink:#0A1424; --paper:#fff; --band:#F1F4F9; --grey:#5A6678; --line:#E2E7EF;
  --sans:"Plus Jakarta Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,5vw,60px); --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.1;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.proof :focus-visible,.it-block :focus-visible,.hero :focus-visible,
.top :focus-visible,.skip:focus-visible{outline-color:#fff}
.skip{position:absolute;left:16px;top:-60px;z-index:9;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.wrap .wrap{max-width:none;padding-inline:0}
.tag{display:inline-block;background:var(--blue);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:7px 14px;border-radius:999px}
.tag.r{background:var(--red);color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:13px 24px;font-weight:700;font-size:15px;text-decoration:none;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s}
.btn-blue{background:var(--blue);color:#fff}.btn-blue:hover{background:var(--blue-deep)}
.btn-red{background:var(--red);color:var(--ink)}.btn-red:hover{background:var(--red-deep)}
.btn-ghost{white-space:nowrap;border-color:rgba(255,255,255,.6);color:#fff}.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}

/* header + hero photo */
[id]{scroll-margin-top:100px}
.top{position:fixed;inset:0 0 auto;z-index:9;border-bottom:1px solid transparent;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.top.solid{background:rgba(10,20,36,.95);border-bottom-color:rgba(255,255,255,.16);box-shadow:0 12px 34px -26px rgba(0,0,0,.9)}
.top-in{transition:padding-block .3s ease}
.top.solid .top-in{padding-block:12px}
.top-in{display:flex;align-items:center;gap:26px;padding-block:22px;color:#fff}
.brand{white-space:nowrap;flex:0 0 auto;display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;letter-spacing:-.02em;font-size:18px}
.brand .mark{width:46px;height:46px;display:grid;place-items:center}
.brand .mark img{width:46px;height:auto}
.mnav{display:flex;gap:clamp(22px,2.4vw,32px);margin-inline:auto;font-size:18px;font-weight:600}
.mnav a{white-space:nowrap;text-decoration:none;opacity:.9;padding-block:11px;display:inline-block}.mnav a:hover{opacity:1}
.hero{position:relative;min-height:min(88vh,720px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden}
.hero img{position:absolute;inset-block-start:-32%;inset-inline:0;width:100%;height:134%;
  object-fit:cover;will-change:transform}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,20,50,.78) 0%,rgba(1,20,50,.68) 45%,rgba(1,20,50,.86) 100%)}
.hero-in{position:relative;z-index:2;max-width:1000px;padding-block:120px 40px}
.hero h1{font-size:clamp(32px,4.6vw,58px)}
.hero p{margin:20px auto 0;max-width:50ch;color:#EDF2FA;font-size:clamp(15px,1.3vw,18px)}
.hero .btn{margin-top:28px}

/* a propos */
.about{padding-block:clamp(64px,9vw,120px);display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(32px,5vw,72px);align-items:center}
.about h2{font-size:clamp(28px,3.4vw,44px);margin-top:18px}
.about .lead{color:var(--grey);margin-top:18px;max-width:46ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.facts div{border-radius:14px;padding:16px 18px;background:var(--band);display:flex;flex-direction:column;gap:4px}
.facts b{font-size:23px;letter-spacing:-.03em;line-height:1.1}
.facts span{font-size:12.5px;color:var(--grey);line-height:1.35}
.facts .r{background:var(--red);color:var(--ink)}
.facts .r span{color:var(--ink)}
.facts .d{background:var(--ink);color:#fff}
.facts .d span{color:#9DB0C9}
.about .btn{margin-top:26px}
.shot{position:relative}
.shot img{width:100%;border-radius:20px;aspect-ratio:4/3;object-fit:cover}
.chip{position:absolute;background:#fff;border-radius:16px;padding:18px 20px;box-shadow:0 24px 48px -30px rgba(10,20,36,.5);max-width:260px}
.chip.one{top:-26px;right:-14px}
.chip.two{bottom:-26px;right:44px}
.chip b{font-size:30px;letter-spacing:-.03em;display:block}
.chip b em{display:block;font-style:normal;font-size:15px;color:var(--grey);font-weight:600;line-height:1.35;margin-top:2px}
.chip p{font-size:13.5px;color:var(--grey);margin-top:6px}


/* preuve : arc de cartes */
.proof{position:relative;background:var(--blue);color:#fff;overflow:hidden;padding-block:clamp(44px,6vw,72px) clamp(26px,3vw,42px)}
.proof .in{text-align:center;max-width:760px;margin:0 auto}
.proof .in p{max-width:68ch;margin-inline:auto;font-size:16px}
.proof h2{font-size:clamp(25px,2.9vw,36px)}
.proof p{color:#F5F9FF;margin-top:12px}
.stage{position:relative;margin-top:clamp(14px,1.8vw,22px);height:clamp(288px,24vw,362px)}
.stage>*{position:absolute;left:50%;top:50%;transform:var(--t);transform-origin:center;margin:0}
.stage .main{--t:translate(-50%,-50%);width:min(52vw,472px);border-radius:20px;overflow:hidden;z-index:3;isolation:isolate;
  box-shadow:0 44px 80px -38px rgba(1,26,72,.9)}
.stage .main img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.stage .side{width:clamp(104px,11.4vw,152px);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:0 26px 50px -30px rgba(1,26,72,.8)}
.stage .side img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.stage .s1{--t:translate(-50%,-50%) translateX(-274px) rotate(-11deg);z-index:1;animation-delay:-.4s}
.stage .s2{--t:translate(-50%,-50%) translateX(-206px) translateY(32px) rotate(-6deg);z-index:2;animation-delay:-2.4s}
.stage .s3{--t:translate(-50%,-50%) translateX(206px) translateY(32px) rotate(6deg);z-index:2;animation-delay:-4.4s}
.stage .s4{--t:translate(-50%,-50%) translateX(274px) rotate(11deg);z-index:1;animation-delay:-6.4s}
.stage .doc{--t:translate(-50%,-50%) translateX(150px) translateY(96px) rotate(3deg);z-index:5;
  width:clamp(186px,19vw,228px);background:#fff;border-radius:14px;padding:16px 18px;color:var(--ink);
  box-shadow:0 30px 56px -26px rgba(1,26,72,.85)}
.stage .doc i{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);font-weight:700}
.stage .doc b{display:block;font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:3px}
.stage .doc .rows{margin-top:10px;display:grid;gap:6px;font-size:12.5px;color:var(--grey)}
.stage .doc .rows span{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding-top:6px}
.stage .doc .rows em{font-style:normal;font-weight:700;color:var(--blue)}
.stage .badge{--t:translate(-50%,-50%) translateX(-172px) translateY(-110px) rotate(-4deg);z-index:5;
  background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 26px 50px -28px rgba(1,26,72,.85)}
.stage .badge i{font-style:normal;display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8FA3BF;font-weight:700}
.stage .badge b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
@keyframes entree{from{opacity:0;transform:var(--t) translateY(18px)}}
@keyframes entree-main{from{opacity:0;transform:translate(-50%,-50%) scale(.965)}}
/* entree jouee une fois, a l'arrivee de la bande. Etat par defaut : tout est visible. */
.proof.tamponne .in h2{animation:volet .7s var(--ease-out) backwards}
.proof.tamponne .in p{animation:monte .6s var(--ease-out) .12s backwards}
.proof.tamponne .stage .main{animation:entree-main .7s var(--ease-out) .18s backwards}
.proof.tamponne .stage .main img{animation:cadre 1.1s var(--ease-out) .18s backwards}
.proof.tamponne .stage .side,.proof.tamponne .stage .doc,.proof.tamponne .stage .badge{animation:pose .62s var(--ease-out) backwards}
.proof.tamponne .stage .s1{animation-delay:.3s}
.proof.tamponne .stage .s2{animation-delay:.38s}
.proof.tamponne .stage .s3{animation-delay:.46s}
.proof.tamponne .stage .s4{animation-delay:.54s}
.proof.tamponne .stage .badge{animation-delay:.66s}
.proof.tamponne .stage .doc{animation-delay:.78s}
@keyframes volet{from{opacity:0;clip-path:inset(0 0 102% 0)}to{opacity:1;clip-path:inset(0 0 -14% 0)}}
@keyframes monte{from{opacity:0;transform:translateY(12px)}}
@keyframes cadre{from{transform:scale(1.09)}}
@keyframes pose{from{opacity:0;transform:var(--t) translateY(26px) rotate(-4deg) scale(.94)}}

/* puis le mouvement s'installe en boucle, une fois l'entree terminee */
.proof.flotte .stage .side,.proof.flotte .stage .doc,.proof.flotte .stage .badge{animation:flotte 8s ease-in-out infinite}
.proof.flotte .stage .main img{animation:derive 20s ease-in-out infinite}
.proof.flotte .stage .s1{animation-delay:-.4s}
.proof.flotte .stage .s2{animation-delay:-2.4s}
.proof.flotte .stage .s3{animation-delay:-4.4s}
.proof.flotte .stage .s4{animation-delay:-6.4s}
.proof.flotte .stage .badge{animation-delay:-3.4s}
.proof.flotte .stage .doc{animation-delay:-1.2s;animation-duration:9s}
@keyframes flotte{0%,100%{transform:var(--t)}50%{transform:var(--t) translateY(-11px)}}
@keyframes derive{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.proof.flotte .stage .side:hover,.proof.flotte .stage .doc:hover,.proof.flotte .stage .badge:hover{animation-play-state:paused}

/* la lumiere passe une fois sur l'image principale, quand elle est en place */
.stage .main::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%);
  transform:translateX(-130%)}
.proof.tamponne .stage .main::after{animation:lueur 1.1s cubic-bezier(.4,0,.2,1) .9s 1 both}
@keyframes lueur{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* au survol, la carte se redresse et se detache : declenche par l'utilisateur, sans limite de duree */
.stage .side,.stage .doc,.stage .badge{transition:transform .34s var(--ease-out),box-shadow .34s ease}
.stage .side:hover{transform:var(--t) translateY(-8px) rotate(0deg) scale(1.04);box-shadow:0 34px 60px -28px rgba(1,26,72,.9);z-index:6}
.stage .doc:hover,.stage .badge:hover{transform:var(--t) translateY(-6px);box-shadow:0 36px 64px -26px rgba(1,26,72,.95)}

@media (prefers-reduced-motion:reduce){
  .proof.flotte .stage .side,.proof.flotte .stage .doc,
  .proof.flotte .stage .badge,.proof.flotte .stage .main img{animation:none}
  .proof.tamponne .in h2,.proof.tamponne .in p,.proof.tamponne .stage .main,
  .proof.tamponne .stage .main img,.proof.tamponne .stage .side,
  .proof.tamponne .stage .doc,.proof.tamponne .stage .badge{animation:none}
  .proof.tamponne .stage .main::after{animation:none}
  .stage .side:hover,.stage .doc:hover,.stage .badge:hover{transform:var(--t)}
}
@media (max-width:1080px){
  .s1,.s4{display:none}
  .s2{--t:translate(-50%,-50%) translateX(-232px) translateY(40px) rotate(-7deg)}
  .s3{--t:translate(-50%,-50%) translateX(232px) translateY(40px) rotate(7deg)}
  .stage .doc{--t:translate(-50%,-50%) translateX(150px) translateY(140px) rotate(3deg)}
  .stage .badge{--t:translate(-50%,-50%) translateX(-176px) translateY(-140px) rotate(-4deg)}
}
@media (max-width:720px){
  .stage{height:auto;display:grid;gap:14px;justify-items:center}
  .stage>*{position:static;transform:none!important;animation:none}
  .stage .main{width:100%}
  .s2,.s3{display:none}
  .stage .doc,.stage .badge{width:100%;max-width:340px}
}

/* services */
.svc{background:var(--band);padding-block:clamp(64px,9vw,120px)}
.svc-head{display:grid;grid-template-columns:1fr .8fr;gap:32px;align-items:end;margin-bottom:36px}
.svc-head h2{font-size:clamp(26px,3.2vw,40px);margin-top:16px}
.svc-head p{color:var(--grey)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;border-radius:20px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,16,38,.95) 0%,rgba(4,16,38,.9) 24%,rgba(4,16,38,.34) 46%,rgba(4,16,38,0) 64%)}
.card>div{position:relative;z-index:2;padding:22px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;width:100%}
.card h3{font-size:20px}
.card small{display:block;color:#fff;font-size:13.5px;margin-top:4px}
.split{display:flex;align-items:center;gap:18px;margin:44px 0 28px}
.split hr{flex:1;border:0;border-top:1px solid var(--line)}
.split span{font-size:14px;font-weight:700;color:var(--grey)}
.it-block{background:var(--ink);border-radius:22px;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;color:#fff}
.it-block .txt{padding:clamp(28px,4vw,46px)}
.it-block h3{font-size:clamp(24px,2.8vw,34px)}
.it-block h3 em{font-style:normal;color:var(--red-on-dark)}
.it-block p{color:#A9BAD1;margin-top:14px;max-width:42ch}
.it-list{list-style:none;margin:22px 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.it-list li{font-size:15px;padding-left:16px;position:relative}
.it-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--red)}
.it-block img{width:100%;height:100%;object-fit:cover;min-height:280px}
.mid{text-align:center;margin-top:34px}

/* devis */
.cta{padding-block:clamp(60px,8vw,110px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.cta h2{font-size:clamp(28px,3.4vw,44px);max-width:14ch}
.cta p{color:var(--grey);margin-top:16px;max-width:42ch}
.cta .tel{display:inline-block;margin-top:22px;font-weight:800;font-size:24px;letter-spacing:-.02em;text-decoration:none;border-bottom:3px solid var(--blue);padding-bottom:3px}
form{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,36px);display:grid;gap:18px}
form h3{font-size:20px;letter-spacing:-.02em}
form h3+p{color:var(--grey);font-size:14.5px;margin-top:7px}
.field{display:grid;gap:7px}
.field label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:16px;padding:14px 16px;padding-inline-end:44px;border-radius:12px;border:1px solid #78869C;background:#fff;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.field input::placeholder,.field textarea::placeholder{color:#69768A}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--error)}
.field textarea{padding-inline-end:16px;resize:vertical;min-height:96px;line-height:1.5}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
form .btn{justify-content:center;border:0;cursor:pointer;font-family:inherit;padding-block:16px;font-size:16px}
form .btn[disabled]{background:var(--band);color:var(--grey);cursor:default}
.req{color:var(--error);text-decoration:none;font-weight:800;border:0}
.cta .err-line{margin:0;font-size:13px;font-weight:600;color:var(--error);max-width:none}
.cta .err-line:empty{display:none}
.cta .msg{margin:0;font-size:14.5px;font-weight:700;color:var(--blue);max-width:none}
.cta .msg:empty{display:none}
.cta .msg.err{color:var(--error)}
form small{color:var(--grey);font-size:13px;line-height:1.5}
@media (max-width:720px){
  .facts{grid-template-columns:1fr}
  .it-list{grid-template-columns:1fr}
  .top{position:static;background:var(--ink);border-bottom:0;box-shadow:none}
  .top-in{gap:12px;padding-block:14px}
  .brand{white-space:nowrap;flex:0 0 auto;font-size:0;gap:0}
  .brand .mark{width:40px;height:40px}
  .brand .mark img{width:40px}
  .lang{margin-inline-start:auto}
  .lang a{padding:11px 12px;min-width:42px;font-size:12px}
  .top .btn{padding:12px 16px;font-size:14px}
  .mnav{font-size:15px;gap:18px}
  .hero{min-height:auto}
  .hero-in{padding-block:48px 36px}
      .split{margin:32px 0 24px}
  footer{flex-direction:column;gap:10px;align-items:flex-start}
}
@media (max-width:520px){.pair{grid-template-columns:1fr}}
/* ------------------------------------------------------------------
   Colonnes du pied de page. Trois colonnes comme sur la boutique : en
   bas d'une page, le visiteur doit avoir autre chose que des liens
   juridiques sous les yeux.
   ------------------------------------------------------------------ */
.pied-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding-block:clamp(34px,4vw,52px) 0}
.pied-col h2{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--grey);font-weight:700;margin:0}
.pied-col ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.pied-col a{font-size:15px;text-decoration:none;color:var(--ink)}
.pied-col a:hover{color:var(--blue)}
@media (max-width:680px){.pied-cols{grid-template-columns:1fr;gap:26px}}

footer{border-top:1px solid var(--line);padding-block:26px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--grey)}
footer a{text-decoration:none}
footer .lg{display:flex;gap:14px}
footer .lg a{display:inline-block;padding:11px 6px}
@media (max-width:960px){
  .about,.cta,.svc-head,.it-block{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .top-in{flex-wrap:wrap;row-gap:12px}
  .mnav{order:3;width:100%;margin-inline:0;gap:22px;font-size:16px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .mnav a{white-space:nowrap;padding-block:6px}
  .chip.one,.chip.two{position:static;margin-top:14px;max-width:none}
}

/* barre d'action collante : groupe flottant sur grand ecran, barre pleine largeur sur mobile */
.dock{position:fixed;inset-block-end:24px;inset-inline-end:24px;z-index:8;display:flex;gap:8px;
  background:rgba(10,20,36,.97);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:8px;
  box-shadow:0 26px 54px -26px rgba(1,20,50,.8);
  transform:translateY(150%);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.dock[hidden]{display:flex}
/* sans le lien d'appel, la barre n'a plus qu'un seul enfant : le fourreau
   sombre ferait un second contour autour du bouton rouge. */
.dock.seule{background:none;border:0;padding:0;box-shadow:none}
.dock.seule .dock-cta{min-height:52px;padding-inline:26px;
  box-shadow:0 20px 44px -18px rgba(253,122,1,.75)}
.dock.on{transform:none}
/* cachee hors ecran, la barre restait atteignable au clavier : on la retire de l'ordre de tabulation tant qu'elle n'est pas affichee */
.dock:not(.on){visibility:hidden;transition:transform .35s,visibility 0s .35s}
.dock.on{visibility:visible}
.dock.seule :focus-visible{outline-color:var(--blue)}
.dock.seule .dock-cta{border:1.5px solid var(--ink)}
.dock a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  border-radius:999px;font-weight:700;font-size:15px;text-decoration:none;padding-inline:20px;white-space:nowrap}
.dock-call{color:#fff;border:1.5px solid rgba(255,255,255,.5)}
.dock-call:hover{background:#fff;color:var(--ink)}
.dock-call span{font-size:17px}
.dock-cta{background:var(--red);color:var(--ink)}
.dock-cta:hover{background:var(--red-deep)}
.dock :focus-visible{outline-color:#fff}
@media (max-width:720px){
  .dock{inset-inline:0;inset-block-end:0;border-radius:0;border-inline:0;border-block-end:0;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:none;
    transform:translateY(105%)}
  .dock a{flex:1;min-height:50px;padding-inline:14px}
  .dock-cta{flex:1.15}
  main{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){.dock,.dock:not(.on){transition:none}}

/* selecteur de langue */
.lang{display:flex;gap:2px;padding:3px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(10,20,36,.35)}
.lang a{font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.06em;color:#fff;background:transparent;border:0;
  border-radius:999px;padding:13px 15px;min-width:46px;cursor:pointer;line-height:1;transition:background .18s,color .18s}
.lang a:hover{background:rgba(255,255,255,.18)}
.lang a[aria-current="true"]{background:#fff;color:var(--ink);background:#fff;color:var(--ink)}
.lang a:focus-visible{outline:3px solid #fff;outline-offset:2px}

.mnav a[aria-current]{opacity:1;box-shadow:inset 0 -2px 0 currentColor}
.phero{min-height:min(58vh,470px)}
.phero .hero-in{padding-block:150px 46px;max-width:900px}
.phero h1{font-size:clamp(30px,4vw,50px)}
.two-ways{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,28px);
  padding-block:clamp(44px,5.5vw,72px) clamp(56px,7vw,96px)}
.way{position:relative;border-radius:20px;overflow:hidden;min-height:330px;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;color:#fff;text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.way:hover{transform:translateY(-4px)}
.way img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.way::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(1,26,72,.95) 0%,rgba(1,26,72,.87) 52%,rgba(1,26,72,.48) 74%,rgba(1,26,72,.06) 100%)}
.way.it::after{background:linear-gradient(to top,rgba(74,34,0,.95) 0%,rgba(74,34,0,.87) 52%,rgba(74,34,0,.48) 74%,rgba(74,34,0,.06) 100%)}
.way>*:not(figure):not(img){position:relative;z-index:2}
.way h2,.way h3{font-size:clamp(22px,2.4vw,30px)}
.way p{margin-top:12px;max-width:34ch;color:#fff;font-size:15.5px}
.way .go{margin-top:20px;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.way .go i{font-style:normal;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.way:hover .go i{transform:translateX(5px)}
@media (max-width:960px){.two-ways{grid-template-columns:1fr}}
/* Le bandeau de titre gardait 58vh sur telephone : la regle .phero, plus
   bas dans le fichier que le @media qui remet .hero a auto, reprenait le
   dessus. Sur un ecran haut et etroit cela poussait le contenu de la page
   sous la ligne de flottaison pour un titre de deux mots. */
@media (max-width:720px){
  .phero{min-height:auto}
  .phero .hero-in{padding-block:36px 30px}
  .phero h1{font-size:clamp(26px,7vw,34px)}
}

.presta{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pcell{background:var(--paper);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.pcell h3{font-size:19px}
.pcell p{color:var(--grey);font-size:15px}
.pcell .tag{align-self:flex-start;margin-top:auto}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.mode{border-top:2px solid var(--red);padding-top:20px;display:flex;flex-direction:column;gap:10px}
.mode h3{font-size:21px}
.mode p{color:var(--grey)}
.phero.it h1 em,body.bls-it .phero h1 em{color:var(--red-on-dark)}
@media (max-width:960px){.presta{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.presta,.modes{grid-template-columns:1fr}}

/* bande d'appel en fin de page metier */
.band-act{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.band-act .btn{font-size:16px;padding:16px 28px}
.band-note{color:var(--grey);font-size:13.5px;max-width:34ch}

/* page contact */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,72px);align-items:start;padding-block:clamp(56px,8vw,110px)}
.coord h2{font-size:clamp(24px,2.8vw,34px)}
.coord dl{margin:26px 0 0;display:grid;gap:2px}
.coord dl>div{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.coord dt{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);padding-top:3px}
.coord dd{margin:0;font-size:16.5px;font-weight:600}
.coord dd a{text-decoration:none;border-bottom:2px solid var(--blue)}
.next{margin-top:34px;background:var(--band);border-radius:18px;padding:24px 26px}
.next h3{font-size:18px}
.next ol{margin:14px 0 0;padding-inline-start:20px;display:grid;gap:10px;color:var(--grey);font-size:15px}
.next li::marker{color:var(--blue-deep);font-weight:700}
@media (max-width:960px){.contact{grid-template-columns:1fr}
  .contact>form{order:-1}}
@media (max-width:520px){.coord dl>div{grid-template-columns:1fr;gap:2px}}

/* ---------- micro-interactions ---------- */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}

/* 1. accuse de reception au clic, sur tout ce qui se presse */
.btn,.dock a,.lang a{transition:background-color .12s ease-out,color .12s ease-out,border-color .12s ease-out,transform .12s var(--ease-out)}
.btn:active,.dock a:active,.lang a:active{transform:scale(.97)}
.way:active{transform:translateY(-2px) scale(.995)}

/* 2. le soulignement de navigation pousse depuis le bord, il ne clignote pas */
.mnav a{position:relative}
.mnav a::after{content:"";position:absolute;inset-inline-start:0;bottom:2px;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:inline-start;transition:transform .16s var(--ease-out)}
.mnav a:hover::after,.mnav a:focus-visible::after{transform:scaleX(1)}
.mnav a[aria-current]{box-shadow:none}
.mnav a[aria-current]::after{transform:scaleX(1)}

/* 3. le selecteur de langue : la pastille glisse au lieu de sauter */
.lang{position:relative}
.lang a{position:relative;z-index:1;background:transparent}
.lang a[aria-current="true"]{background:transparent;color:var(--ink)}
.lang a:hover{background:rgba(255,255,255,.16)}
.lang a[aria-current="true"]:hover{background:transparent}

/* 4. champs : la validite se voit des qu'elle est acquise */
.field{position:relative}
.field .ok-mark{position:absolute;inset-inline-end:14px;top:38px;width:20px;height:20px;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-items:center;font-size:12px;
  opacity:0;transform:scale(.6);transition:opacity .14s ease-out,transform .18s var(--ease-out)}
.field.valide .ok-mark{opacity:1;transform:none}
.field.invalide input{animation:secousse .2s ease-in-out}
@keyframes secousse{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* 5. moment signature : la fiche se tamponne quand la preuve entre a l'ecran */
.stage .doc .rows em{opacity:0;transform:translateY(4px);transition:opacity .18s ease-out,transform .24s var(--ease-out)}
.stage .doc .rows em::after{content:"\2713";margin-inline-start:6px;font-size:.85em}
.proof.tamponne .doc .rows em{opacity:1;transform:none}
.proof.tamponne .doc .rows span:nth-child(1) em{transition-delay:.15s}
.proof.tamponne .doc .rows span:nth-child(2) em{transition-delay:.42s}
.proof.tamponne .doc .rows span:nth-child(3) em{transition-delay:.69s}

/* 6. copie des coordonnees */
.coord dd a{position:relative}
.copie{margin-inline-start:10px;font-size:12px;font-weight:700;color:var(--blue-deep);border:0;background:transparent;
  cursor:pointer;padding:6px 8px;border-radius:8px;transition:opacity .12s ease-out,background-color .12s ease-out}
.copie:hover{opacity:1;background:var(--band)}
.copie[data-etat="fait"]{color:#0A7C3A;opacity:1}

/* 7. bouton d'envoi : etat de succes, sans fausse barre de progression */
form .btn.envoye,form .btn.envoye[disabled]{background:#0A7C3A;color:#fff;border-color:#0A7C3A}
form .btn[disabled]{transform:none}

@media (prefers-reduced-motion:reduce){
  .btn:active,.dock a:active,.lang a:active,.way:active{transform:none}
  .mnav a::after{transition:none}
    .field.invalide input{animation:none}
  .stage .doc .rows em{transition:opacity .01ms}
  .stage .doc .rows em,.proof.tamponne .doc .rows em{transform:none}
}

/* renvoi discret vers l'autre univers */
.cross-link{margin:0;padding:22px 0;border-top:1px solid var(--line);color:var(--grey);
  display:flex;gap:10px 22px;align-items:baseline;flex-wrap:wrap;font-size:15.5px}
.cross-link>span{max-width:62ch}
.cross-link a{margin-inline-start:auto;color:var(--blue);font-weight:700;text-decoration:none;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;padding-block:6px}
.cross-link a i{font-style:normal;transition:transform .16s var(--ease-out)}
.cross-link a:hover i{transform:translateX(4px)}

/* parcours en cinq etapes, page entreprise */
.etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.etapes li{counter-increment:e;background:var(--paper);padding:22px 26px;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:baseline}
.etapes li::before{content:counter(e,decimal-leading-zero);font-weight:800;font-size:14px;color:var(--blue);letter-spacing:.04em}
.etapes h3,.etapes p{grid-column:2}
.etapes h3{font-size:18.5px}
.etapes p{color:var(--grey);font-size:15.5px;margin-top:4px}
@media (max-width:600px){.etapes li{grid-template-columns:1fr;gap:4px}}

/* commande de mouvement, discrete */
.mctl{position:absolute;inset-block-end:14px;inset-inline-start:clamp(14px,3vw,32px);z-index:6;
  width:34px;height:34px;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.1);
  transition:background-color .16s ease-out,border-color .16s ease-out,transform .12s var(--ease-out)}
.mctl svg{width:14px;height:14px;fill:#fff;opacity:.85;transition:fill .16s ease-out}
.mctl:hover{background:#fff;border-color:#fff}
.mctl:hover svg{fill:var(--blue);opacity:1}
.mctl:active{transform:scale(.94)}
.mctl:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mctl .i-play{display:none}
.mctl[aria-pressed="true"] .i-pause{display:none}
.mctl[aria-pressed="true"] .i-play{display:block}
.proof.paused .stage .side,.proof.paused .stage .doc,
.proof.paused .stage .badge,.proof.paused .stage .main img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.mctl{display:none}}

/* reperes : une ligne de faits, sans boites */
.reperes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding-bottom:clamp(56px,7vw,96px)}
.reperes div{padding:0 clamp(16px,2vw,28px);border-inline-start:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.reperes div:first-child{padding-inline-start:0;border-inline-start:0}
.reperes b{font-size:clamp(19px,1.9vw,23px);letter-spacing:-.02em;line-height:1.15}
.reperes span{font-size:14px;color:var(--grey);line-height:1.45}
@media (max-width:900px){.reperes{grid-template-columns:1fr 1fr;gap:26px 0}
  .reperes div:nth-child(odd){padding-inline-start:0;border-inline-start:0}}
@media (max-width:560px){.reperes{grid-template-columns:1fr}
  .reperes div{padding-inline:0;border-inline-start:0;border-top:1px solid var(--line);padding-top:18px}
  .reperes div:first-child{border-top:0;padding-top:0}}

/* perimetre : trois lignes, pas trois cartes */

/* perimetre en grille composee */
.scope{background:var(--band);padding-block:clamp(56px,7vw,100px)}
.bento{display:grid;grid-template-columns:1fr 1.55fr 1fr;grid-template-rows:clamp(300px,26vw,360px) clamp(250px,22vw,300px);gap:clamp(14px,1.6vw,20px)}
.b{position:relative;border-radius:22px;overflow:hidden;background:var(--paper);min-height:250px;
  transition:transform .38s var(--ease-out),box-shadow .38s ease}
.b:hover{transform:translateY(-5px);box-shadow:0 30px 56px -34px rgba(10,20,36,.5)}
.b-a{grid-column:1;grid-row:1}
.b-titre{grid-column:2 / 4;grid-row:1;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px;overflow:hidden}
.b-c{grid-column:1;grid-row:2}
.b-d{grid-column:2;grid-row:2}
.b-accent{grid-column:3;grid-row:2}

.b-titre{padding-inline-end:clamp(158px,17vw,225px)}
.b-titre h2{font-size:clamp(26px,3.1vw,40px);max-width:13ch}
.b-titre p{color:var(--grey);max-width:44ch}
.b-titre .pied{margin-top:auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;
  padding-top:16px;border-top:1px solid var(--line)}
.b-titre .marque{font-size:13.5px;font-weight:700;color:var(--ink)}
.b-titre .demande{margin-inline-start:auto;font-size:14px;font-weight:700;color:var(--blue);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;min-height:24px}
.b-titre .demande i{font-style:normal;transition:transform .3s var(--ease-out)}
.b-titre .demande:hover{color:var(--blue-deep)}
.b-titre .demande:hover i{transform:translateX(4px)}
.b-titre .objet{position:absolute;inset-inline-end:clamp(18px,2.2vw,32px);inset-block-start:clamp(18px,2.2vw,30px);
  inset-block-end:clamp(18px,2.2vw,30px);width:clamp(120px,13vw,170px);height:auto;object-fit:cover;
  border-radius:999px;pointer-events:none;box-shadow:0 26px 44px -22px rgba(10,20,36,.42);
  transition:transform .5s var(--ease-out)}
.b-titre:hover .objet{transform:translateY(-7px)}

.b-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .6s var(--ease-out)}
.b-photo:hover img{transform:scale(1.05)}
.b-photo::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(4,16,38,.94) 0%,rgba(4,16,38,.86) 46%,rgba(4,16,38,.4) 72%,rgba(4,16,38,.05) 100%)}
.b-photo .cap{position:relative;z-index:2;margin-top:auto;padding:clamp(20px,2.2vw,26px);color:#fff;
  display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.b-photo h3{font-size:clamp(19px,2vw,24px)}
.b-photo p{margin-top:8px;font-size:14.5px;color:rgba(255,255,255,.94);max-width:32ch}
.b-photo .lien{margin-top:14px;align-self:flex-start;color:#fff;font-weight:700;font-size:14px;
  text-decoration:none;display:inline-flex;align-items:center;gap:9px;min-height:24px;
  border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:3px;
  transition:border-color .18s ease-out}
.b-photo .lien::after{content:"";position:absolute;inset:0}
.b-photo:hover .lien{border-bottom-color:#fff}
.b-photo .lien i{font-style:normal;transition:transform .3s var(--ease-out)}
.b-photo:hover .lien i{transform:translateX(4px)}

.b-accent{background:linear-gradient(150deg,var(--blue) 0%,var(--blue) 46%,var(--blue-deep) 100%);color:#fff;
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;gap:12px;justify-content:flex-end}
.b-accent b{font-size:clamp(21px,2.2vw,27px);letter-spacing:-.02em;line-height:1.15;position:relative;z-index:2}
.b-accent p{font-size:14.5px;color:#fff;position:relative;z-index:2}
.b-accent .pastille{margin-top:6px;align-self:flex-start;position:relative;z-index:2;background:#fff;color:var(--blue);
  border-radius:999px;padding:11px 18px;font-size:14px;font-weight:700;text-decoration:none;
  transition:background-color .16s ease-out,color .16s ease-out,transform .12s var(--ease-out)}
.b-accent .pastille:hover{background:var(--ink);color:#fff}
.b-accent .pastille:active{transform:scale(.97)}
.b-accent .halo{position:absolute;inset-block-start:-22%;inset-inline-end:-18%;width:min(72%,240px);aspect-ratio:1;z-index:1;pointer-events:none}
.b-accent .halo i{position:absolute;inset:0;border:1px solid rgba(255,255,255,.34);border-radius:50%;transform:scale(.2);opacity:0}
.b-accent .halo i:nth-child(2){inset:14%}
.b-accent .halo i:nth-child(3){inset:28%;background:rgba(255,255,255,.14);border-color:transparent}

@media (max-width:1000px){
  .bento{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto}
  .b{min-height:270px}
  .b-titre{padding-inline-end:clamp(26px,3vw,40px)}
  .b-titre .objet{position:static;width:100%;max-width:180px;height:120px;border-radius:16px;margin-top:6px}
  .b-a{grid-column:1;grid-row:1}
  .b-titre{grid-column:2;grid-row:1}
  .b-c{grid-column:1;grid-row:2}
  .b-d{grid-column:2;grid-row:2}
  .b-accent{grid-column:1 / 3;grid-row:3;min-height:200px}
}
@media (max-width:680px){
  .bento{grid-template-columns:1fr}
  .bento{grid-template-rows:auto}
  .b-a,.b-titre,.b-c,.b-d,.b-accent{grid-column:1;grid-row:auto}
}

/* entree en cascade, jouee une fois */
.scope.entre .b{animation:blocEntre .62s var(--ease-out) backwards}
.scope.entre .b-a{animation-delay:.04s}
.scope.entre .b-titre{animation-delay:.12s}
.scope.entre .b-c{animation-delay:.2s}
.scope.entre .b-d{animation-delay:.28s}
.scope.entre .b-accent{animation-delay:.36s}
@keyframes blocEntre{from{opacity:0;transform:translateY(22px) scale(.985)}}
.scope.entre .b-titre .objet{animation:objetEntre .8s var(--ease-out) .34s backwards}
@keyframes objetEntre{from{opacity:0;transform:translateY(40px) scale(.94)}}
.scope.entre .b-accent .halo i{animation:onde .9s var(--ease-out) forwards}
.scope.entre .b-accent .halo i:nth-child(1){animation-delay:.5s}
.scope.entre .b-accent .halo i:nth-child(2){animation-delay:.62s}
.scope.entre .b-accent .halo i:nth-child(3){animation-delay:.74s}
@keyframes onde{to{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .b:hover,.b-titre:hover .objet,.b-photo:hover img{transform:none}
  .scope.entre .b,.scope.entre .b-titre .objet{animation:none}
  .scope.entre .b-accent .halo i{animation:onde .01ms forwards}
  .b-photo .lien{opacity:1;transform:none}
}

/* pages de texte long : mentions, CGV, confidentialite, cookies */
.prose{max-width:70ch;padding-block:clamp(48px,6vw,80px) clamp(56px,7vw,96px)}
.prose h2{font-size:clamp(21px,2.2vw,27px);margin-top:clamp(34px,3.6vw,48px);padding-top:clamp(26px,2.8vw,34px);
  border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:clamp(16px,1.5vw,18.5px);margin-top:26px}
.prose p,.prose li{color:var(--grey);line-height:1.72;font-size:16px}
.prose p{margin-top:14px}
.prose ul,.prose ol{margin-top:14px;padding-inline-start:22px;display:grid;gap:8px}
.prose li::marker{color:var(--blue)}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--blue-deep)}
.prose .maj{margin-top:clamp(40px,4.4vw,56px);padding-top:22px;border-top:1px solid var(--line);
  font-size:14px;color:var(--grey)}
.prose dl{margin-top:16px;display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:10px 24px}
.prose dt{font-weight:700;color:var(--ink);font-size:15px}
.prose dd{margin:0;color:var(--grey);font-size:15px}
@media (max-width:560px){.prose dl{grid-template-columns:1fr;gap:2px 0}
  .prose dd{margin-bottom:12px}}

/* champ que le client doit encore fournir, volontairement voyant */
.afaire{background:#FFECA8;color:var(--ink);font-weight:700;padding:1px 6px;border-radius:4px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* le selecteur est rendu par Polylang : liens et non boutons */
.lang a{display:grid;place-items:center;min-width:44px;min-height:34px;padding:0 12px;border-radius:999px;
  text-decoration:none;font-size:13.5px;font-weight:700;color:inherit;
  transition:background-color .16s ease-out,color .16s ease-out}
.lang a[aria-current="true"]{background:#fff;color:var(--ink)}

/* ------------------------------------------------------------------
   Compatibilite avec les blocs natifs de WordPress.
   core/image rend une <figure class="wp-block-image"> autour de chaque
   <img>. display:contents la retire de la mise en page sans toucher au
   balisage, ce qui laisse les regles ci-dessus s'appliquer a l'image.
   ------------------------------------------------------------------ */
.hero .wp-block-image,
.way .wp-block-image,
.b-photo .wp-block-image,
.shot .wp-block-image,
.stage .wp-block-image{display:contents}

/* la vignette du bento garde sa figure, elle porte le positionnement */
.b-titre .wp-block-image.objet{display:block;margin:0}
.b-titre .wp-block-image.objet img{width:100%;height:100%;object-fit:cover;border-radius:999px}

/* core/group ajoute sa propre classe : on neutralise ses marges auto pour
   que .wrap continue de piloter la largeur */
.wp-block-group.wrap{margin-inline:auto}
/* meme traitement que core/image : la figure disparait de la mise en page,
   l'image reprend .hero comme cadre de reference et herite du parallaxe */
.hero .wp-block-post-featured-image{display:contents}

/* WordPress pose une gouttiere de 1rem entre les blocs racine. L'en-tete
   etant en position fixe, ce conteneur est vide et la marge du bloc suivant
   remonte par fusion jusqu'en haut de la page : une bande blanche apparait
   au-dessus du bandeau, sur toutes les pages. L'espacement vertical du site
   vient des sections elles-memes, on la retire donc a la racine. */
.wp-site-blocks > *{margin-block-start:0}

/* Bandeau au logo : le monogramme remplace la photo.
   Une image de fond est recadree en plein cadre, ce qui couperait le
   monogramme. On passe donc en fond uni, avec l'image contenue et non
   rognee, et le voile devient inutile. */
.hero.logo{background:var(--ink);align-items:flex-end}
/* Le monogramme et le titre se disputaient le centre : superposes, l'un des
   deux devenait illisible. On les separe donc verticalement, le logo occupe
   le haut du bandeau, le texte se pose dessous. */
.hero.logo img{position:absolute;
  /* l'en-tete est fixe et occupe 99 px : le logo doit commencer dessous,
     avec de l'air, sinon il passe derriere le menu */
  inset-block:clamp(128px,17vh,168px) auto;inset-inline:0;
  width:100%;height:clamp(132px,20vh,190px);
  object-fit:contain;object-position:center;
  opacity:1;transform:none!important}
.hero.logo::after{display:none}
.hero.logo .hero-in{padding-block:clamp(300px,42vh,400px) clamp(48px,7vh,72px)}

/* WordPress insere une gouttiere de 1rem entre blocs freres. Dans mes
   sections l'espacement vient deja des regles ci-dessus : on la neutralise
   pour retrouver la maquette au pixel pres. Les regles nommees, plus
   specifiques, continuent de s'appliquer. */
.hero-in > *, .way > *, .cta > *, .band-act > *{margin-block-start:0}

/* le hero centre tout son contenu : core/buttons est un conteneur flex
   aligne a gauche par defaut, il faut le lui dire. La marge passe sur le
   conteneur, pas sur le bouton, sinon elle gonfle la hauteur du groupe. */
.hero-in .wp-block-buttons{justify-content:center;margin-block-start:28px}
.hero-in .wp-block-button.btn{margin-block-start:0}

/* core/buttons met la classe sur l'enveloppe et le lien a l'interieur.
   Plutot que de tout remettre a zero, on rejoue les memes declarations sur
   l'ancre : un seul jeu de valeurs, celui du haut de ce fichier. */
.wp-block-button.btn{background:none;padding:0;border:0}
.btn>.wp-block-button__link{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:13px 24px;font-weight:700;font-size:15px;text-decoration:none;
  border:1.5px solid transparent;background:none;color:inherit;
  transition:background .2s,color .2s,border-color .2s}
.btn-blue>.wp-block-button__link{background:var(--blue);color:#fff}
.btn-blue>.wp-block-button__link:hover{background:var(--blue-deep)}
.btn-red>.wp-block-button__link{background:var(--red);color:var(--ink)}
.btn-red>.wp-block-button__link:hover{background:var(--red-deep)}
.btn-ghost>.wp-block-button__link{white-space:nowrap;border-color:rgba(255,255,255,.6);color:#fff}
.btn-ghost>.wp-block-button__link:hover{background:#fff;color:var(--ink);border-color:#fff}


/* ------------------------------------------------------------------
   Barre d'administration de WordPress.
   Elle occupe les premiers pixels de la fenetre et un en-tete fixe cale
   sur top:0 passerait dessous. Invisible pour un visiteur, genant pour
   l'administrateur : on decale l'en-tete de sa hauteur.
   ------------------------------------------------------------------ */
body.admin-bar .top{inset-block-start:32px}
@media screen and (max-width:782px){
  body.admin-bar .top{inset-block-start:46px}
}
/* sous 600px WordPress rend la barre non fixe : plus rien a compenser */
@media screen and (max-width:600px){
  body.admin-bar .top{inset-block-start:0}
}

/* ------------------------------------------------------------------
   Bande « Appareils en stock ».
   Cinq tuiles vers la boutique PrestaShop, posables sur l'accueil ou sur
   une page metier. La tuile entiere est cliquable : le lien est porte par
   le titre et son ::after couvre la tuile, ce qui laisse un seul element
   focalisable et fait annoncer le nom de l'appareil, pas « lien ».
   ------------------------------------------------------------------ */
.stock{background:var(--band);border-block:1px solid var(--line);padding-block:clamp(22px,2.6vw,36px)}
.stock-tete{align-items:baseline;gap:16px;margin-bottom:22px}
.stock-tete h2{font-size:clamp(22px,2.6vw,30px)}
.stock-tout{font-size:15px;font-weight:700;white-space:nowrap}
.stock-tout a{color:var(--blue);text-decoration:none}
.stock-tout a:hover{text-decoration:underline}
.rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
/* WordPress pose une gouttiere sur tout bloc frere sauf le premier : en
   grille, elle decalait les quatre dernieres tuiles vers le bas. */
.rail > *{margin-block-start:0}
/* Trois rangees fixes : photo, titre, detail. Sans elles, un titre sur
   deux lignes decale sa ligne de detail par rapport aux tuiles voisines. */
.tuile{position:relative;display:grid;gap:6px;grid-template-rows:auto 1fr auto}
/* meme gouttiere de bloc a neutraliser a l'interieur de la tuile :
   elle ajoutait 16 px entre la photo, le titre et la ligne de detail. */
.tuile > *{margin-block-start:0}
.tuile .wp-block-image + h3{margin-block-start:6px}
.tuile figure{margin:0}
.tuile .wp-block-image{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:12px;
  border:1px solid var(--line);background:var(--paper);
  transition:border-color .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.tuile .wp-block-image img{width:100%;height:100%;object-fit:cover;display:block}
.tuile:hover .wp-block-image{border-color:#C9D4E6;transform:translateY(-3px)}
.tuile h3{font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.tuile h3 a{text-decoration:none}
.tuile h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.tuile h3 a:focus-visible{outline:none}
.tuile:has(h3 a:focus-visible){outline:3px solid var(--blue);outline-offset:4px;border-radius:14px}
.tuile p{font-size:13.5px;color:var(--grey);font-variant-numeric:tabular-nums}
@media (max-width:960px){.rail{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.rail{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Plan du site */
.plan-du-site ul{margin:0;padding-inline-start:1.2em;display:grid;gap:10px}
.plan-du-site ul ul{margin-block-start:10px}
.plan-du-site a{font-weight:600}