/* Styles propres a services.html.
   Sorti du <style> interne pour que la version anglaise partage
   exactement la meme feuille : un correctif ne se fait qu'une fois.
   Charge APRES jade.css, comme l'etait le bloc interne, donc
   l'ordre de cascade est inchange.
   Les url() portent ../ : dans une feuille CSS elles sont
   resolues depuis ce fichier, pas depuis la page. */
/* ---------- page Services ---------- */
/* l'en-tête prend la couleur du hero de la page, pas l'or de l'accueil */
.header{background:#18C9D5;color:var(--navy)}

/* CTA : pastille blanche avec flèche, et bouton fantôme à côté */
.btn-blanc{background:#fff;color:var(--navy);box-shadow:0 8px 20px rgba(17,46,64,.14);padding:16px 28px}
.btn-blanc:hover{background:#fff;box-shadow:0 12px 26px rgba(17,46,64,.2)}
.btn .fleche{width:18px;height:18px;flex:none;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.btn-blanc:hover .fleche{transform:translateX(4px)}
.btn-fantome:hover .fleche{transform:translate(3px,-3px)}
.btn-fantome{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.55);color:var(--ink,var(--navy));padding:16px 28px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.btn-fantome:hover{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.8)}
.page-hero{background:var(--teal);color:var(--navy);padding-block:clamp(54px,7vw,92px)}
.page-hero .eyebrow{color:currentColor;opacity:.75}
.page-hero h1 .mot{display:inline-block;white-space:nowrap;color:#fff;will-change:transform,opacity;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)}
.page-hero h1 .mot.out{opacity:.4;transform:translateY(8px)}
.page-hero .media::before{background:var(--navy)}
.hero-grille{display:grid;align-items:stretch}
.hero-grille .texte{display:flex;align-items:center;flex-direction:column;justify-content:center;
  padding-block:clamp(54px,7vw,92px);
  padding-left:max(clamp(16px,4vw,40px), calc(50vw - var(--wrap)/2));
  padding-right:clamp(24px,3.4vw,56px)}
.hero-grille .texte > div{width:100%}
@media (max-width:1100px){.hero-grille .texte{padding-inline:clamp(16px,4vw,40px);padding-block:clamp(40px,6vw,70px)}}
.page-hero h1{font-size:var(--t2);font-weight:900}
.page-hero p{font-size:18px;max-width:48ch;margin-top:20px}
.page-hero.studio .scene{display:none}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:26px}
/* hero studio : la photo EST le fond, la section reprend la couleur du plateau */
.page-hero.studio{--plateau:#18C9D5;--plateau-img:url("../images/hero-studio-services.webp");--plateau-figure:url("../images/figures/st-services.webp");background:var(--plateau);color:var(--navy);padding:0;
  background-image:var(--plateau-img);background-repeat:no-repeat;background-position:right center;background-size:cover}
.page-hero.studio .hero-grille{grid-template-columns:minmax(0,1fr);min-height:clamp(460px,46vw,620px)}
.page-hero.studio .hero-grille .media{display:none}
.page-hero.studio .hero-grille .texte{max-width:none;padding-right:0;align-items:flex-start}
.page-hero.studio .hero-grille .texte > div{max-width:640px}
.page-hero.studio .eyebrow{color:var(--navy);opacity:.72}
.page-hero.studio h1{color:var(--navy)}
.page-hero.studio h1 .mot{color:var(--navy);--pastille:var(--lemon)}
.page-hero.studio p{color:var(--navy);opacity:.85}
.page-hero.studio .btn-blanc{background:#fff;color:var(--navy)}
.page-hero.studio .btn-fantome{color:var(--navy);border-color:var(--navy);background:transparent;box-shadow:none}
.page-hero.studio .btn-fantome:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
@media (max-width:1100px){
  .page-hero.studio{background-image:var(--plateau-figure);background-size:73% auto;background-position:right bottom;padding-bottom:48vw}
  .page-hero.studio .hero-grille .texte > div{max-width:none}
}
@media (max-width:640px){
  /* Deux boutons empiles de largeurs differentes, ca se voit tout de suite.
     Chaque groupe devient une colonne a la largeur du plus large, et toutes
     les rangees prennent la hauteur de la plus haute : meme reglage que
     l'en-tete de l'accueil, applique partout. */
  .ctas,.hero-ctas,.page-hero.studio .ctas,.service .ctas,.bande-fin .ctas{
    display:grid;grid-template-columns:minmax(0,max-content);grid-auto-rows:1fr;
    gap:12px;justify-content:start}
  .ctas .btn,.hero-ctas .btn,.page-hero.studio .ctas .btn,
  .service .ctas .btn,.bande-fin .ctas .btn{width:100%;justify-content:center}

  /* L'ordre demande au telephone : titre, photo, texte, bouton. La scene n'est
     plus un fond pose derriere la colonne de texte — a 375 px rien ne tient a
     cote de rien — elle prend sa propre bande entre le titre et le chapeau.
     Detouree, elle se pose sur l'aplat sans montrer son cadre, et la page
     retrouve la scene entiere, avec tout le monde dessus. */
  .page-hero.studio{padding-bottom:0;background-image:none}
  .page-hero.studio .hero-grille{min-height:0}
  .page-hero.studio .scene{display:block;width:100%;margin:26px 0 4px;
    aspect-ratio:1.32;
    background:var(--plateau-figure) center bottom/contain no-repeat}
  .page-hero.studio p:not(.eyebrow):not(.pastille){max-width:none}
}

section[id]{scroll-margin-top:92px}
.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.service.inverse .visuel{order:2}
.service .visuel{position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden}
.service .visuel img{width:100%;height:100%;object-fit:cover}
.service h2{font-size:var(--t3);font-weight:900}
.service .sur{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.service p{color:var(--text);margin-top:16px;max-width:52ch}
.service .liste{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.service .liste li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;font-weight:500}
.service .liste li::before{content:"";box-sizing:border-box;width:20px;height:20px;border-radius:50%;background:var(--c,var(--teal));margin-top:3px;padding:5px;background-clip:content-box}
.service .ctas{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
@media (max-width:900px){.service{grid-template-columns:1fr}.service.inverse .visuel{order:0}}

.sous-titre{font-size:clamp(26px,2.6vw,34px);font-weight:900;margin-bottom:26px}
.bande-prog{background:var(--navy);color:#fff;padding-block:clamp(52px,6vw,84px)}
.bande-prog .centre{text-align:center;max-width:56ch;margin:0 auto 34px}
.bande-prog .centre h2{font-size:var(--t4);font-weight:900}
.bande-prog .centre p{margin-top:12px;font-size:15px;color:rgba(255,255,255,.72)}
.bande-prog .moment{border-top:3px solid var(--c,var(--teal));padding-top:16px;gap:8px}
.bande-prog .moment p{color:rgba(255,255,255,.72)}
.bande-prog .steps::before{background:rgba(255,255,255,.3)}
.bande-prog .steps > li::before{background:var(--navy);border-color:rgba(255,255,255,.55)}
.bande-prog .steps > li:hover::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
/* Cette bande a ses propres pastilles, declarees ici : la regle tactile de la
   feuille commune ne les atteint pas, elle est moins specifique et plus haut
   dans la cascade. On la redit pour cette bande-la. */
@media (hover:none){
  .bande-prog .steps > li::before{background:var(--hc,var(--teal));border-color:var(--hc,var(--teal))}
}
.bande-prog .steps > li::after{color:rgba(255,255,255,.6)}
.bande-prog .steps p{color:rgba(255,255,255,.72)}
.moments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.moment{border-top:4px solid var(--c,var(--teal));padding-top:18px;display:grid;gap:8px;align-content:start}
.moment h3{font-size:clamp(19px,1.6vw,22px);font-weight:800}
.moment p{font-size:14px;line-height:1.5;color:var(--text)}
@media (max-width:900px){.moments{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}}
@media (max-width:560px){.moments{grid-template-columns:1fr}}
.bloc-plus{margin-top:clamp(38px,4.5vw,58px)}
/* Trois colonnes seulement quand il y a la place : sans la borne, cette regle
   battait celle de la feuille commune — plus specifique qu'un simple .steps —
   et les trois etapes restaient en colonnes jusque sur le telephone, ou les
   titres se chevauchaient. Sous 901 px, la feuille commune les empile le long
   de son filet vertical. */
@media (min-width:901px){
  .steps.trois{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Hors de la borne : entre 641 et 900 px la feuille commune remet nowrap sur
   les titres, et « Vos employés commandent » depasse sa colonne. */
.steps.trois h3{white-space:normal;line-height:var(--lh-titre)}