/* Socle commun Créations Jade.
   Partagé par Services, Produits, Techniques, À propos, Carrières et Nous joindre.
   L'accueil garde son CSS en ligne : son hero est le seul du site à être un carrousel
   et ses règles ne recoupent pas ce socle.
   Toute correction de base se fait ICI, une seule fois. */

/* Palette globale Elementor de creationsjade.com */
:root{
  --navy:#112E40; --teal:#2BBBAD; --magenta:#D9127A; --gold:#F1B71C; --lemon:#FFE11B; --mauve:#B43694;
  --teal-txt:#1D7F76; --teal-f:#1B8278; --gold-f:#916B05; --off:#F7F8F9; --text:#565657; --line:#E3E8E8; --white:#FFFFFF;
  --radius:30px;
  /* échelle typographique : un seul jeu pour tout le site */
  --t1:clamp(40px,5.4vw,78px);   /* titre de l'accueil */
  --t2:clamp(34px,4.6vw,68px);   /* titre de page */
  /* Sous 380 px le plancher de 34 px ne cede plus, alors que les titres
     de page portent un complement qui change tout seul. Le plus long de
     ces complements debordait : « demande chaque semaine » reclame 328 px
     pour une colonne de 312. Le plancher devient donc un peu souple, sur
     la seule plage ou il mord, et rejoint 34 px juste avant 380. */
  --t3:clamp(32px,4.2vw,56px);   /* titre de section */
  --t4:clamp(26px,3vw,44px);     /* titre de bande */
  /* Interlignage des titres. Big Shoulders 900 pose la capitale a 0.800 em
     et l'accent de capitale a 0.979 em au-dessus de la ligne de base. En
     dessous de 0.979 l'accent du bas passe par-dessus la ligne de base du
     haut : c'est ce qui se voyait sur VOS EQUIPES / FIEREMENT. */
  --lh-titre:1.06;
  /* Les titres de hero portent la pastille de couleur. Une pastille qui
     contient un accent mesure 1.15 em de haut : elle ne tient pas dans une
     ligne de 1.06 sans mordre l'accent de la ligne suivante, ce qui se
     voyait sur IDENTIFIEES. Eux seuls sont donc plus aeres. */
  --lh-titre-hero:1.16;
  /* Les deux seuls textes ecrits dans le CSS. Ils vivent dans des
     pseudo-elements, donc ils ne peuvent pas etre traduits dans le HTML :
     on les sort en variables, surchargees par la langue de la page. */
  --mot-etape:"\00c9tape ";
  --mot-pilier:"Pilier ";
  --t5:clamp(20px,2vw,24px);     /* titre de fiche */
  /* rayons : trois échelons */
  --r-s:8px; --r-m:20px; --r-pill:999px; --wrap:1200px; --wrap-large:1360px;
  --display:"Big Shoulders Display","Norline rounded","Arial Narrow",sans-serif;
  --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --c:var(--gold); --b:var(--magenta); --ink:var(--navy); --hl:var(--magenta);
  /* --c-on : couleur du texte POSE SUR --c. Navy par defaut ; les fiches dont
     l'accent est sombre (navy, magenta, mauve) la passent a blanc en ligne. */
}
*{box-sizing:border-box}
html{background:var(--white);scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--white);color:var(--navy);font-family:var(--body);font-size:16px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
/* Un mot seul sur la derniere ligne, le client n'en veut pas. Les deux
   derniers mots de chaque bloc sont deja lies par une espace insecable
   dans le HTML ; ceci rattrape les largeurs qu'on n'a pas mesurees, la
   ou le navigateur sait equilibrer lui-meme. */
p,li,figcaption,dd,dt,blockquote,summary{text-wrap:pretty}
.eyebrow,.logos p,figcaption{text-wrap:balance}
html[lang^="en"]{--mot-etape:"Step ";--mot-pilier:"Pillar "}

/* Un nom propre a trait d'union que le navigateur couperait en deux. */
.insecable{white-space:nowrap}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;margin:0;line-height:var(--lh-titre);letter-spacing:0;text-wrap:balance}

/* ---------- la pastille de couleur des gros titres ----------
   Elle etait un fond + du rembourrage sur un inline-block. Deux defauts :
   un inline-block rembourre grandit sa propre ligne, donc les renflements
   d'un titre a trois lignes n'etaient pas egalement espaces ; et le
   rembourrage du haut, a .02em, ne pouvait pas contenir un accent.
   Dessinee en arriere-plan elle ne compte plus dans la hauteur de ligne.
   Le line-height:1 sur le mot detache la geometrie de la pastille de
   l'interlignage du titre : changer --lh-titre ne la deforme plus. */
@media (max-width:380px){:root{--t2:clamp(30px,8.8vw,34px)}}
.hero h1,.page-hero h1{line-height:var(--lh-titre-hero)}
h1 .mot,h1 .hl{position:relative;isolation:isolate;line-height:1}
h1 .mot::before,h1 .hl::before{content:"";position:absolute;z-index:-1;
  top:-.155em;right:-.17em;bottom:-.03em;left:-.17em;
  background:var(--pastille,transparent);border-radius:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.wrap.large{max-width:var(--wrap-large)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:12px;border-radius:var(--radius);padding:15px 28px;font:700 15px/1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s cubic-bezier(.2,.7,.3,1),background-color .15s cubic-bezier(.2,.7,.3,1),color .15s cubic-bezier(.2,.7,.3,1)}
.btn:hover{transform:translateY(-1px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-teal{background:var(--teal);color:var(--navy)}
.btn-line{border-color:var(--navy);color:var(--navy);background:transparent}
@media (hover:hover){.btn-line:hover{background:var(--navy);color:#fff}}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px}

/* bandeau proposition */

/* en-tête */
.header{position:sticky;top:0;z-index:30;background:var(--c);color:var(--ink);border-bottom:1px solid transparent;transition:background-color .45s cubic-bezier(.2,.7,.3,1),color .45s cubic-bezier(.2,.7,.3,1),border-color .25s cubic-bezier(.2,.7,.3,1)}
.header.scrolled{background:rgba(255,255,255,.95);color:var(--navy);border-bottom-color:var(--line);backdrop-filter:blur(8px)}
.header .logo{color:#fff}
.header.scrolled{background:rgba(17,46,64,.97);color:#fff;border-bottom-color:transparent}
.header.scrolled .btn-navy{background:var(--teal);color:var(--navy)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:78px}
.logo{width:132px;color:var(--navy);display:block;flex:none}
.nav{display:flex;align-items:center;gap:20px}
.nav ul.main{list-style:none;display:flex;align-items:center;gap:24px;margin:0;padding:0}
.nav a{text-decoration:none;font-weight:600;font-size:15px;color:inherit}
.nav ul.main > li > a{display:inline-flex;align-items:center;gap:8px;padding:8px 0;position:relative}
.nav ul.main > li > a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.nav ul.main > li > a[aria-current]::after{transform:scaleX(1)}
.nav ul.main > li:hover > a::after,.nav ul.main > li:focus-within > a::after{transform:scaleX(1)}
.caret{width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;border-top:5px solid currentColor;margin-top:2px}
.has-menu{position:relative}
.submenu{position:absolute;top:100%;left:-18px;min-width:230px;background:#fff;border-radius:20px;padding:10px;display:grid;gap:4px;box-shadow:0 18px 40px rgba(17,46,64,.18);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s cubic-bezier(.2,.7,.3,1),transform .15s cubic-bezier(.2,.7,.3,1),visibility .15s cubic-bezier(.2,.7,.3,1);z-index:5}
.has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:block;padding:9px 14px;border-radius:8px;color:var(--navy);font-weight:600;font-size:14.5px}
.submenu a:hover{background:var(--off)}
.lang{font-size:13px;font-weight:700;letter-spacing:1px}
.tel{font-weight:700;white-space:nowrap;text-decoration:none;font-size:15px}
.nav .btn{padding:12px 20px;font-size:14px}

/* Sous 344 px, la barre du haut demande plus de place qu'il n'y en a : 32 de
   marges, 132 de logo, 24 de separation, 102 pour « Soumission » et 50 pour
   le bouton de menu, soit 348 pour un ecran de 320. La page se decalait donc
   de 24 px en horizontal et le bouton de menu sortait a moitie. Seules les
   pages francaises etaient touchees : « Get a quote » est plus etroit que
   « Soumission ».
   On reprend 32 px sur trois postes, sans rien retirer de la barre, pour un
   besoin de 28. La regle s'arrete a 343 px : a partir de 344, ou tout tenait
   deja, elle n'existe pas, et rien de ce qui fonctionne aujourd'hui ne peut
   changer. 344 px est plus etroit que tout telephone encore vendu ; cette
   regle ne sert qu'aux appareils d'avant 2017.
   Le selecteur du bouton porte .header volontairement : plus bas, une regle
   « .header .btn » de meme poids fixe le rembourrage a 16 px, et comme elle
   vient apres, un « .nav .btn » ici resterait lettre morte. */
@media (max-width:343px){
  .header .wrap{gap:10px}               /* 24 -> 10   : 14 px */
  .logo{width:120px}                    /* 132 -> 120 : 12 px */
  .header .nav .btn{padding:12px 13px}  /* 16 -> 13   :  6 px */
}
.nav .btn-navy{color:#fff}
.header.scrolled .nav .btn-navy{color:var(--navy)}
.menu-mobile{display:none;position:relative;margin-right:-12px}
.menu-mobile summary{list-style:none;cursor:pointer;display:grid;gap:4px;padding:13px 12px}
.menu-mobile summary::-webkit-details-marker{display:none}
.menu-mobile summary span{display:block;width:26px;height:3px;border-radius:8px;background:currentColor}
.menu-mobile .panel{position:absolute;right:0;top:calc(100% + 12px);width:min(84vw,300px);background:#fff;border-radius:20px;padding:12px;display:grid;gap:4px;box-shadow:0 20px 44px rgba(17,46,64,.22)}
.menu-mobile .panel a{display:block;padding:11px 14px;border-radius:8px;color:var(--navy);font-weight:600;font-size:15px}
.menu-mobile .panel .grp{margin:10px 0 2px;padding:0 14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#5E6A6E}
/* Les intitules de groupe menent a leur page, comme en grand ecran. Simple
   texte, ils faisaient 17 px de haut : trop peu pour un doigt. Le rembourrage
   les amene a 27, au-dessus des 24 de WCAG 2.2, sans changer le rythme. */
.menu-mobile .panel a.grp{display:block;margin:2px 0 0;padding:9px 14px 5px}
.menu-mobile .panel a:hover{background:var(--off)}

/* HERO */
.hero{padding-block:56px 0;background:var(--c);color:var(--ink);transition:background-color .45s cubic-bezier(.2,.7,.3,1),color .45s cubic-bezier(.2,.7,.3,1);overflow:hidden}
.hero .eyebrow{color:var(--ink);opacity:.85}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:40px;align-items:stretch}
.hero h1{font-size:clamp(50px,6.3vw,104px);white-space:nowrap;font-weight:900;margin-top:16px}
.hero h1 .hl{color:var(--hl);transition:color .45s cubic-bezier(.2,.7,.3,1);display:inline-block;will-change:transform,opacity}
.hero h1 .hl.out{opacity:.4;transform:translateY(8px)}
.hero h1 .hl{transition:color .45s cubic-bezier(.2,.7,.3,1),opacity .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.hero .lead{margin-top:22px;font-size:18px;max-width:46ch;color:var(--ink)}
.hero-ctas{margin-top:30px;display:flex;flex-wrap:wrap;gap:12px}
.hero-ctas .btn{padding:17px 30px;font-size:16px}
.slider-nav{display:flex;align-items:center;gap:20px;margin-top:34px;padding-bottom:48px}
.slider-nav button{width:44px;height:44px;border-radius:50%;border:2px solid var(--navy);background:#fff;color:var(--navy);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
/* Les deux fleches se lisent pareil, en tout temps : le survol agrandit
   l'anneau au lieu de le remplir. Un remplissage en faisait deux boutons
   differents, et en tactile l'etat restait colle sur le dernier touche. */
@media (hover:hover){.slider-nav button:hover{transform:scale(1.09)}}
.count{color:var(--ink);font-family:var(--display);font-weight:900;font-size:56px;line-height:.8;font-variant-numeric:tabular-nums;min-width:74px;text-align:center}
.slide-label{font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
.dots{display:flex;gap:8px;margin-left:auto}
.dots i{position:relative;width:22px;height:5px;border-radius:8px;background:rgba(255,255,255,.55);overflow:hidden;transition:width .45s cubic-bezier(.2,.7,.3,1),background-color .25s cubic-bezier(.2,.7,.3,1)}
.dots i.on{width:46px;background:rgba(255,255,255,.55)}
.dots i.on::after{content:"";position:absolute;inset:0;border-radius:8px;background:var(--ink);transform-origin:left;transform:scaleX(0);animation:jauge var(--duree,6s) linear forwards}
@keyframes jauge{to{transform:scaleX(1)}}
.dots i.on.fige::after{animation:none;transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.dots i.on::after{animation:none;transform:scaleX(1)}}
.stage .person.out{opacity:0;transform:translateX(-50%) translateY(26px) scale(.985)}

/* logos */
.logos{border-bottom:1px solid var(--line);padding-block:26px}
.logos .wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center}
.logos p{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.track{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:56px;width:max-content;animation:logos 38s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.track li{flex:none;color:#7E8B90;opacity:.85;transition:color .25s cubic-bezier(.2,.7,.3,1),opacity .25s cubic-bezier(.2,.7,.3,1)}
.track li:hover{color:var(--navy);opacity:1}
.track svg{height:40px;width:auto;display:block}
.track img{height:var(--lh,36px);width:auto;display:block;filter:grayscale(1);opacity:.62;transition:filter .25s cubic-bezier(.2,.7,.3,1),opacity .25s cubic-bezier(.2,.7,.3,1)}
.track li:hover img{filter:none;opacity:1}
@keyframes logos{to{transform:translateX(calc(-50% - 28px))}}
.stats.track{animation-name:chiffres;animation-duration:30s}
@keyframes chiffres{to{transform:translateX(calc(-50% - 36px))}}
@media (prefers-reduced-motion:reduce){.track{animation:none}}

section{padding-block:clamp(64px,8vw,110px)}
/* deux rythmes verticaux au lieu d'un seul : les sections d'appui respirent moins */
section.appui{padding-block:clamp(48px,5vw,72px)}

section[id]{scroll-margin-top:78px}
.sec-head{display:grid;grid-template-columns:120px minmax(0,1fr);gap:28px;align-items:center;margin-bottom:46px}
.sec-head.solo{grid-template-columns:1fr}
.sec-head.solo > div{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:end}
.sec-head .sur{display:block;font:700 13px/1.4 var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.sec-head.solo h2 .sur{max-width:none;white-space:nowrap}
.sec-head.solo h2{font-size:var(--t3);max-width:18ch}
.sec-head.solo p{margin-top:0;font-size:17px;max-width:46ch;justify-self:end}
/* Cuando el encabezado lleva un botón, las dos columnas dejan de tener la
   misma altura. Alineadas por abajo, el titular caía y se abría un vacío
   arriba a la izquierda. Con este caso se alinean por arriba: todo cuelga
   de la misma línea y el aire sobrante queda debajo, donde no molesta. */
.sec-head.solo:has(.col) > div{align-items:start}
.sec-head.solo .col{display:grid;justify-items:end;gap:24px}
.sec-head.solo .col p{justify-self:end}
/* Sur une seule colonne, l'alignement a droite n'a plus de sens : il laissait
   le bouton seul contre la marge droite pendant que le texte partait a gauche. */
@media (max-width:900px){.sec-head.solo > div{grid-template-columns:1fr;gap:16px}
  .sec-head.solo .col{justify-items:start}
  .sec-head.solo .col p,.sec-head.solo p{justify-self:start}}
.sec-head h2{font-size:var(--t3);font-weight:900}
.sec-head p{margin-top:16px;max-width:46ch;color:var(--text);font-size:17px}

/* services */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.svc{display:grid;gap:24px;align-content:start}
.frame{position:relative;aspect-ratio:4/5;max-width:100%}
.frame.photo img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:20px}
.frame.cut{border-radius:20px;background:var(--c);overflow:hidden}
.frame.cut img{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:94%;width:auto;max-width:none}
.svc h3{font-size:36px;font-weight:800;min-height:1.8em}
.svc p{color:var(--text)}
.svc a.more{justify-self:start;font-weight:700;text-decoration:none;border-bottom:3px solid var(--c);padding-bottom:4px}
.svc a.more::after{content:" →"}
.conseil .txt{padding-block:34px}
.conseil .btn{margin-bottom:34px}

/* section sombre */
.sombre{background:var(--navy);color:#fff}
.sombre .sec-head.solo p,.sombre .rail-head p{color:rgba(255,255,255,.72)}
.sombre .rail-nav button{border-color:rgba(255,255,255,.5);color:#fff}
@media (hover:hover){.sombre .rail-nav button:hover{background:#fff;color:var(--navy)}
.sombre .rail-nav button[disabled]:hover{background:transparent;color:#fff}}
.sombre .g figcaption{background:#fff;color:var(--navy)}
.sombre .stats-band .marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.sombre .stats-band{margin-top:64px;border:0;padding-top:0}
.sombre .stats-band .wrap{min-height:0;border-top:1px solid rgba(255,255,255,.22);padding-top:30px}
.sombre .stats-band p{color:rgba(255,255,255,.6)}
.sombre .stat{color:rgba(255,255,255,.62)}
.sombre .stat:hover{color:#fff;opacity:1}

/* chiffres */
.stats-band{padding-block:26px;border-bottom:1px solid var(--line)}
.stats-band .wrap{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center;min-height:82px}
.stats-band p{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.stats{gap:72px}
.stat{display:flex;flex-direction:column;gap:8px;list-style:none;color:#5E6A6E;transition:color .25s cubic-bezier(.2,.7,.3,1)}
.track li.stat{color:#5E6A6E;opacity:1}
.track li.stat:hover{color:var(--navy)}
.stat:hover{color:var(--navy);opacity:1}
.stat b{font:800 38px/1 var(--display);color:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat b small{font-size:.55em;font-weight:800;color:inherit}
.stat .lab{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:inherit;white-space:nowrap}
.rail-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;margin:-26px 0 22px}
.rail-head p{font-size:14px;color:var(--text)}
.rail-nav{display:flex;gap:12px;flex:none}
.rail-nav button{width:46px;height:46px;border-radius:50%;border:2px solid var(--navy);background:transparent;color:var(--navy);font:700 20px/1 var(--body);cursor:pointer;transition:background-color .15s cubic-bezier(.2,.7,.3,1),color .15s cubic-bezier(.2,.7,.3,1),opacity .15s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover){.rail-nav button:hover{background:var(--navy);color:#fff}}
.rail-nav button[disabled]{opacity:.3;cursor:default}
@media (hover:hover){.rail-nav button[disabled]:hover{background:transparent;color:var(--navy)}}
.rail-zone{margin:-10px calc(-1*clamp(16px,4vw,40px)) -26px 0;overflow:hidden}
.rail{display:flex;gap:16px;padding-right:clamp(16px,4vw,40px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-block:10px 26px;scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{flex:0 0 clamp(230px,24vw,300px);scroll-snap-align:start}
.g{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--off)}
.g img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.g:hover img{transform:scale(1.04)}
.g figcaption{position:absolute;left:12px;bottom:12px;background:var(--navy);color:#fff;font-weight:700;font-size:13px;padding:6px 12px;border-radius:var(--r-pill)}
figure{margin:0}

/* produits */
.prod-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin:-16px 0 30px}
.all{max-width:100%}
.bar-right{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.prod-note{font-size:15px;color:var(--text);max-width:46ch}
.all{text-decoration:none;font-weight:700;border-bottom:3px solid var(--teal);padding-bottom:3px;white-space:nowrap}

.prod{display:grid;grid-template-rows:auto auto;gap:12px;align-content:start;
  border:2px solid var(--line);border-radius:20px;padding:16px 18px 22px;background:#fff;
  transition:border-color .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.prod:hover{border-color:var(--c);box-shadow:0 18px 36px rgba(17,46,64,.13);transform:translateY(-4px)}
.shot{position:relative;border-radius:20px;overflow:hidden;background:#fff;aspect-ratio:1}
.shot img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.prod:hover .shot img{transform:scale(1.04)}
.tier{position:absolute;top:10px;left:10px;background:#fff;border:2px solid var(--c);color:var(--navy);font:700 11px/1 var(--body);letter-spacing:1.5px;text-transform:uppercase;padding:7px 12px;border-radius:var(--r-pill)}
.prod .meta{display:grid;gap:8px;align-content:start}
.prod .pcat{font:700 12px/1 var(--body);letter-spacing:1.6px;text-transform:uppercase;color:var(--c)}
.prod h3{font-size:26px;font-weight:800}
/* La fiche entiere mene au formulaire : le titre est le lien, et son
   ::after s'etire sur la carte. Pas de bouton pose sur la photo — il
   cachait le produit au telephone, et il n'y a pas de panier derriere :
   toute demande passe par la soumission. */
.prod{position:relative}
.prod h3 a{color:inherit;text-decoration:none}
.prod h3 a::after{content:"";position:absolute;inset:0;border-radius:20px}
.prod h3 a:focus-visible{outline:none}
.prod:has(h3 a:focus-visible){outline:3px solid var(--navy);outline-offset:3px}
/* La carte est un lien : sans repere visible, rien ne le dit. Meme
   traitement que les liens « en savoir plus » des services. */
.prod .pdemande{justify-self:start;font:700 14px/1 var(--body);color:var(--navy);
  border-bottom:3px solid var(--c);padding-bottom:5px;margin-top:4px}
.catalogue{margin-top:72px;background:var(--navy);color:#fff;border-radius:var(--radius);padding:36px 44px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.catalogue b{display:block;font:900 clamp(32px,3.9vw,56px)/.9 var(--display);text-transform:uppercase;letter-spacing:-.012em}
.catalogue p{margin-top:12px;color:rgba(255,255,255,.82);max-width:52ch}
@media (hover:hover){.catalogue .btn-teal:hover{background:var(--lemon)}}
/* Le bouton est la seule action d'une bande qui crie à 68 px. Avec le corps
   standard de 15 px, le rapport était de 4,5 pour 1 : la bande hurle et
   l'action chuchote. On met le bouton à l'échelle de sa bande. */
.catalogue .btn{font-size:15px;padding:15px 28px}


/* secteurs */
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:28px;margin-bottom:28px}
.band-head h2{font-size:var(--t4);font-weight:900}
.band-head p{font-size:15px;color:var(--text);max-width:48ch;text-align:right}
.sect-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sect{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/3;border-radius:20px;overflow:hidden;padding:18px;color:#fff}
.sect img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% var(--op,22%);transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.sect::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,46,64,.82),rgba(17,46,64,.05) 64%)}
.sect::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--c);z-index:2;transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.sect:hover::before{transform:scaleX(1)}
.sect:hover img{transform:scale(1.05)}
.sect figcaption{position:relative;z-index:1;font:800 22px/.95 var(--display);text-transform:uppercase}

/* processus */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--navy)}
.steps > li{counter-increment:s;position:relative;padding-top:34px;display:grid;gap:12px;align-content:start}
.steps > li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--navy)}
.steps > li::before{transition:background-color .25s cubic-bezier(.2,.7,.3,1),border-color .25s cubic-bezier(.2,.7,.3,1),transform .25s cubic-bezier(.2,.7,.3,1)}
.steps > li{cursor:default}
.steps > li:hover::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal));transform:scale(1.15)}
.steps > li h3{transition:color .25s cubic-bezier(.2,.7,.3,1)}
.steps > li:hover h3{color:var(--hc,var(--teal))}
.steps > li::after{content:var(--mot-etape,"Étape ") counter(s);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text);order:-1}
.steps h3{font-family:var(--display);text-transform:uppercase;font-size:28px;line-height:.95;font-weight:800;white-space:nowrap}
.steps p{font-size:15px;color:var(--text);max-width:30ch}

/* FAQ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.faq h2{font-size:var(--t3);font-weight:900}
.faq h2 span{color:var(--magenta)}
.faq .intro{margin-top:16px;color:var(--text)}
.faq-list{border-top:2px solid var(--navy)}
.faq-list details{border-bottom:1px solid var(--line);padding:22px 4px}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;font-weight:700;font-size:18px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font:900 34px/.7 var(--display);color:var(--navy)}
.faq-list details[open] summary::after{content:"–";color:var(--magenta)}
.faq-list details p{margin-top:12px;color:var(--text);max-width:64ch}
.faq-all{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-weight:700;text-decoration:none;border-bottom:3px solid var(--teal);padding-bottom:4px}
.quote .photo{grid-column:1;grid-row:1;border-radius:var(--radius);overflow:hidden;height:600px}
.quote .photo img{width:100%;height:100%;object-fit:cover}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:4px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:700}
.field input,.field select{width:100%;font:500 15px var(--body);color:var(--navy);background:#fff;border:2px solid transparent;border-radius:20px;padding:12px 14px}
.field input:focus,.field select:focus{border-color:var(--navy);outline:none}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.form .btn{grid-column:1/-1;justify-content:center;font-size:16px}
.form-msg{grid-column:1/-1;font-weight:700}

/* pied de page */
.stripe{display:grid;grid-template-columns:repeat(6,1fr);height:10px}
.stripe i:nth-child(1){background:var(--teal)} .stripe i:nth-child(2){background:var(--gold)} .stripe i:nth-child(3){background:var(--magenta)} .stripe i:nth-child(4){background:var(--lemon)} .stripe i:nth-child(5){background:var(--mauve)} .stripe i:nth-child(6){background:var(--navy)}
.footer{background:var(--magenta);color:#fff;padding-block:56px 24px}
.footer .haut{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 40px;align-items:end}
.footer .logo{width:150px;color:#fff;display:block}
.footer .tagline{margin-top:14px;max-width:36ch;font-size:15px}
.footer .joindre{display:grid;gap:4px;justify-items:end;text-align:right}
.footer .joindre a{font-size:19px;font-weight:700;text-decoration:none;color:#fff}
.footer .joindre a:hover{text-decoration:underline}
.footer .mid{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.32);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 28px;font-size:14.5px}
.footer .villes{margin:0}
.footer .mini{display:flex;flex-wrap:wrap;gap:8px 20px}
.footer a{text-decoration:none;color:#fff}
.footer a:hover{text-decoration:underline}
.footer .bottom{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;font-size:12.5px}

@media (max-width:1060px){
  .nav ul.main,.nav .lang,.nav .tel{display:none}
  .menu-mobile{display:block}
  .sect-band{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
  .steps::before{display:none}
}
@media (max-width:900px){
  .hero .wrap,.faq,.quote{grid-template-columns:1fr}
  .stage{height:520px;min-height:0;max-width:430px;margin-inline:auto;width:100%}
  .slider-nav{padding-bottom:0}
  .services{grid-template-columns:1fr;gap:56px;max-width:520px;margin-inline:auto}
  .conseil{grid-template-columns:1fr;padding:0 24px 28px;gap:12px}
  .conseil .media{min-height:220px;margin-inline:-24px}
  .conseil .txt{padding-block:10px 0}
  .conseil .btn{margin-bottom:0;justify-self:start}
  .logos .wrap,.stats-band .wrap{grid-template-columns:1fr}
  .track{gap:40px}
  .track svg{height:34px}
  .track img{height:calc(var(--lh,36px) * .82)}
  .quote .photo{height:340px}
  .quote .card{grid-column:1;grid-row:2;margin:-70px 14px 0;padding:32px 24px}
  .sec-head{grid-template-columns:1fr}
  .footer .top{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .header .btn{padding:12px 16px;font-size:13px}
  .faq-list details{padding:0 2px}
  .faq-list summary{padding:15px 0;font-size:16.5px;gap:16px}
  .faq-list summary::after{font-size:30px}
  .faq-list details p{margin-top:2px;padding-bottom:16px}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center}
  .builder{grid-template-columns:minmax(0,1fr) 104px}
  .builder select,.builder input{font-size:14.5px}
  .builder label:nth-child(2){border-right:0}
  .builder button{grid-column:1/-1;padding:16px}
  .builder label{border-bottom:2px solid var(--navy)}
  .stage{height:440px;min-height:0;max-width:360px}
  .explore{width:70px}
  .explore span{font-size:36px}
  .stats{gap:48px}
  .stat b{font-size:32px}
  .steps{grid-template-columns:1fr}
  .band-head{flex-direction:column;gap:8px}
  .band-head p{text-align:left}
  .catalogue{grid-template-columns:1fr;padding:32px 26px}
  .steps{gap:28px;padding-left:34px}
  .steps::before{display:block;left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  /* il redevient secable ici, donc l'interligne doit degager les accents */
  .steps h3{white-space:normal;line-height:var(--lh-titre)}
  .steps li{padding-top:0}
  .steps li::before{left:-34px}
  .form{grid-template-columns:1fr}
  .footer .haut{grid-template-columns:1fr;gap:24px;align-items:start}
  .footer .joindre{justify-items:start;text-align:left}
  .footer .mid{flex-direction:column;align-items:flex-start;gap:16px}
  .footer .mini a{padding-block:4px}
  .dots{display:none}
}

/* bande de clôture : pleine largeur, pour casser la suite de sections à 1200 */
.bande-fin{background:var(--navy);color:#fff}
.bande-fin .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center}
.bande-fin h2{font-size:var(--t3);font-weight:900;max-width:16ch}
.bande-fin p{margin-top:14px;color:rgba(255,255,255,.82);max-width:52ch;font-size:17px}
.bande-fin .ctas{display:flex;flex-wrap:wrap;gap:16px}
.bande-fin .btn-line{border-color:#fff;color:#fff}
@media (hover:hover){.bande-fin .btn-line:hover{background:#fff;color:var(--navy)}}
@media (max-width:900px){.bande-fin .wrap{grid-template-columns:1fr}}

/* bande sombre : n'importe quelle section peut la porter.
   Toutes les inversions de couleur sont réglées ici, une fois. */
.bande-sombre{background:var(--navy);color:#fff}
.bande-sombre h2,.bande-sombre h3,.bande-sombre h4{color:#fff}
.bande-sombre p,.bande-sombre li,.bande-sombre address{color:rgba(255,255,255,.78)}
.bande-sombre .sur,.bande-sombre .region,.bande-sombre .lieu,.bande-sombre .marque,
.bande-sombre .eyebrow{color:var(--lemon)}
.bande-sombre .btn-line{border-color:#fff;color:#fff}
@media (hover:hover){.bande-sombre .btn-line:hover{background:#fff;color:var(--navy)}}
.bande-sombre a:not(.btn){color:var(--lemon)}
.bande-sombre .succ li{border-top-color:var(--c,var(--teal))}
.bande-sombre .steps::before{background:rgba(255,255,255,.3)}
.bande-sombre .steps > li::before{background:var(--navy);border-color:rgba(255,255,255,.55)}
.bande-sombre .steps > li:hover::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
/* Sur un ecran tactile il n'y a pas de survol : la couleur de chaque etape ne
   vivait que la, et les pastilles restaient blanches pour toujours. Elles
   prennent d'emblee l'etat qu'elles avaient a la souris. Les trois listes
   d'etapes du site sont sur une bande marine, ou les cinq couleurs de la
   palette ressortent toutes. Le titre reste blanc : quatre titres de quatre
   couleurs, c'est une autre decision. */
@media (hover:none){
  .steps > li::before,.bande-sombre .steps > li::before{
    background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
}
.bande-sombre .steps > li::after{color:rgba(255,255,255,.6)}
/* dans une bande sombre, les cartes claires gardent leur encre d'origine */
.bande-sombre .face.avant h3{color:var(--navy)}
.bande-sombre .face.avant .n{color:var(--navy)}
.bande-sombre .face.avant .tags span{color:var(--text)}
.bande-sombre .carte-cv,.bande-sombre .carte-cv h3{color:var(--navy)}
.bande-sombre .carte-cv p,.bande-sombre .carte-cv label{color:var(--navy)}
/* les textes imbriqués doivent battre les règles de la page */
.bande-sombre .steps p,.bande-sombre .moment p,.bande-sombre .service p,
.bande-sombre .sec-head p,.bande-sombre .succ address{color:rgba(255,255,255,.78)}
.bande-sombre .steps h3,.bande-sombre .moment h3{color:#fff}
/* deux bandes foncées qui se suivent ne doivent pas laisser un trou :
   on resserre le contact, elles se lisent comme un seul mouvement de clôture */
.chiffres:not(.clair) + .bande-fin,.bande-sombre + .bande-fin,.bande-sombre + .bande-sombre{padding-top:clamp(26px,3vw,44px)}
.chiffres:not(.clair):has(+ .bande-fin),.bande-sombre:has(+ .bande-fin){padding-bottom:clamp(26px,3vw,44px)}

/* le volet de détail (comportement sur mesure) */
.volet{border:0;padding:0;max-width:min(520px,92vw);width:100%;border-radius:var(--r-m);
  background:#fff;color:var(--navy);box-shadow:0 40px 90px rgba(17,46,64,.3);overflow:hidden}
.volet::backdrop{background:rgba(17,46,64,.62)}
.volet .fermer{position:absolute;top:11px;right:11px;z-index:2;width:32px;height:32px;border-radius:50%;
  border:0;background:rgba(255,255,255,.94);color:var(--navy);font:400 21px/1 var(--body);cursor:pointer;
  box-shadow:0 4px 14px rgba(17,46,64,.22)}
@media (hover:hover){.volet .fermer:hover{background:var(--navy);color:#fff}}
.volet-visuel{aspect-ratio:16/9;overflow:hidden}
.volet-visuel img{width:100%;height:100%;object-fit:cover;display:block}
.volet-texte{padding:clamp(22px,2.4vw,30px)}
.volet .sur{font:700 11px/1.3 var(--body);letter-spacing:1.8px;text-transform:uppercase;color:var(--navy);
  padding-top:10px;border-top:3px solid var(--c,var(--teal));display:inline-block;margin-bottom:8px}
.volet h2{font-size:clamp(21px,1.9vw,26px);font-weight:900;line-height:1.08}
.volet .corps{margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--text)}
.volet .points{list-style:none;margin:15px 0 0;padding:0;display:grid}
.volet .points li{font-size:13.5px;line-height:1.4;color:var(--text);padding:8px 0;border-top:1px solid var(--line)}
.volet .points li:first-child{border-top:0;padding-top:0}
.volet .btn{margin-top:20px;padding:13px 22px;font-size:14px}
@media (max-width:600px){.volet-visuel{aspect-ratio:3/2}}
/* variante sans image : une tuile d'icône à la place de la photo */
.volet-sans-image{max-width:min(400px,92vw)}
.volet-sans-image .tuile{width:40px;height:40px;border-radius:12px;background:var(--c);color:#fff;
  display:grid;place-items:center;margin-bottom:18px}
.volet-sans-image .tuile .ico{width:21px;height:21px}
.volet-sans-image .tuile{margin-bottom:14px}

/* Lien d'évitement : premier élément focalisable de la page, caché jusqu'à ce
   qu'on l'atteigne au clavier. Critère 2.4.1 (contourner des blocs). */
.saut{position:absolute;left:8px;top:-72px;z-index:999;background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:var(--r-s);font-weight:700;text-decoration:none;
  font-size:15px;transition:top .15s cubic-bezier(.2,.7,.3,1)}
.saut:focus{top:8px}

/* Mouvement réduit : une seule déclaration pour tout le site. Elle vivait
   recopiée dans huit feuilles de page et manquait dans la neuvième. */
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ------------------------------------------------------------------
   Lien vers les avis Google. Volontairement discret : ce n'est pas un
   appel à l'action, c'est une preuve. En forme de bouton il entrait en
   concurrence avec les deux vrais boutons et ressemblait à un troisième
   raté. Statique, aucune requête vers Google.
   ------------------------------------------------------------------ */
.avis{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit;
  font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:none;
  border-bottom:2px solid currentColor;padding-block:2px;margin-left:16px;
  opacity:.85;transition:opacity .25s cubic-bezier(.2,.7,.3,1)}
.avis b{font:900 15px/1 var(--display);letter-spacing:.5px}
.avis .fleche{width:12px;height:12px}
.avis:hover{opacity:1}
/* dans la bande de logos l'étiquette et le lien s'empilent : la colonne
   ne fait que 220 px, le lien tombe de toute façon à la ligne */
.preuve{margin-top:20px}
.preuve .avis{margin-left:0}
.bande-fin .avis,.bande-sombre .avis{color:#fff}
@media (max-width:640px){.avis{margin-left:0;margin-top:8px}}

/* astérisque des champs obligatoires, pour tous les formulaires du site */
.req{color:var(--magenta)}

/* Interlettrage : il se resserre quand le corps grandit. Une seule valeur
   pour tous les titres, du 28 px au 78 px, les laissait lâches en grand.
   Les petits restent à zéro, où le réglage par défaut est le bon. */
h2{letter-spacing:-.012em}
h1{letter-spacing:-.018em}
.hero h1,.page-hero h1{letter-spacing:-.022em}

/* Cibles tactiles au doigt : 44 px minimum.
   Deux techniques selon la place disponible.
   1) Les liens isoles recoivent un calque invisible centre sur eux : la zone
      sensible grandit, la mise en page ne bouge pas d'un pixel.
   2) Les liens serres — coordonnees et bas de page, 4 a 8 px d'ecart — ne
      peuvent pas s'etendre sans se recouvrir : ceux-la grandissent pour de
      vrai, avec du rembourrage vertical.
   Le tout sous pointer:coarse, donc rien ne change a la souris. */
@media (pointer:coarse){
  .svc a.more,a.all,.faq-all,.avis{position:relative}
  .svc a.more::after,a.all::after,.faq-all::after,.avis::after{
    content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .joindre a{padding-block:8px}
  .footer .mini a{padding-block:11px}
  .header .wrap > a:first-child{min-height:44px;display:flex;align-items:center}
  .nav .btn,.menu-mobile summary{min-height:44px}
}