/* Styles propres a produits.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:#FCBF37;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(--gold);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)}
.page-hero{padding-block:0}
.hero-grille{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:stretch}
.hero-grille .texte{display:flex;align-items: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 .media{position:relative;min-height:460px}
.hero-grille .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 10%,rgba(0,0,0,.8) 26%,#000 40%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 10%,rgba(0,0,0,.8) 26%,#000 40%)}
@media (max-width:900px){
  .hero-grille{grid-template-columns:1fr}
  .hero-grille .media{order:-1;min-height:300px}
  .hero-grille .media img{-webkit-mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.4) 14%,#000 38%);
    mask-image:linear-gradient(0deg,transparent 0%,rgba(0,0,0,.4) 14%,#000 38%)}
  .hero-grille .texte{padding-inline:clamp(16px,4vw,40px);padding-block:clamp(38px,6vw,64px)}
}
.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}
.page-hero .btn-line{border-color:var(--navy);color:var(--navy)}
.page-hero .btn-line:hover{background:var(--navy);color:var(--teal)}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr;gap:24px;align-items:start}}

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))}
.bande-prog .steps > li::after{color:rgba(255,255,255,.6)}
.bande-prog .steps p{color:rgba(255,255,255,.72)}
.bande-prog .cta-centre{display:flex;justify-content:center;margin-top:34px}
.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)}


/* ---------- page Produits ---------- */
.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)}}
/* hero studio : la photo EST le fond, la section reprend la couleur du plateau */
.page-hero.studio{--plateau:#FCBF37;--plateau-figure:url("../images/figures/st-or.webp");background:var(--plateau);color:var(--navy);padding:0;
  background-image:url("../images/hero-studio-or.webp");
  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:620px}
.page-hero.studio .pastille{border-color:var(--navy);color:var(--navy)}
.page-hero.studio .pastille i{background:var(--navy)}
.page-hero.studio h1 .mot{color:var(--navy);--pastille:#fff}
.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);text-decoration-color:var(--navy)}
@media (max-width:1100px){
  .page-hero.studio{background-image:var(--plateau-figure);background-size:66% 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}

  /* Meme logique que le sur-titre de l'accueil : deux lignes de pastille
     avant meme que le titre commence, c'est une ligne de trop sur un
     telephone. Le titre juste dessous parle deja de ce qu'on porte. */
  .page-hero .pastille .suite{display:none}
  /* 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.18;
    background:var(--plateau-figure) center bottom/contain no-repeat}
  .page-hero.studio p:not(.eyebrow):not(.pastille){max-width:none}
}

/* variante claire du hero : aplat blanc, composition détourée */
.page-hero.clair{background:#fff;color:var(--navy);border-bottom:1px solid var(--line)}
.page-hero.clair .hero-grille .media{min-height:520px;display:grid;place-items:center;padding:clamp(20px,3vw,44px) clamp(16px,3vw,40px) clamp(20px,3vw,44px) 0}
.page-hero.clair .hero-grille .media img{position:static;width:100%;height:auto;object-fit:contain;mask-image:none;-webkit-mask-image:none;
  filter:drop-shadow(0 26px 38px rgba(17,46,64,.22))}
.page-hero.clair .pastille{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--teal);color:var(--navy);
  border-radius:30px;padding:7px 16px;font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:18px}
.page-hero.clair .pastille i{width:8px;height:8px;border-radius:50%;background:var(--teal);display:block}
.page-hero.clair h1 .mot{color:var(--magenta)}
.page-hero.clair p{color:var(--text)}
.page-hero.clair .btn-blanc{background:var(--navy);color:#fff;box-shadow:0 10px 24px rgba(17,46,64,.22)}
.page-hero.clair .btn-blanc:hover{background:var(--navy)}
.page-hero.clair .btn-fantome{background:transparent;border-color:transparent;color:var(--navy);box-shadow:none;padding-inline:8px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px;text-decoration-color:var(--teal)}
.page-hero.clair .btn-fantome:hover{background:transparent;text-decoration-color:var(--navy)}
@media (max-width:900px){.page-hero.clair .hero-grille .media{min-height:0;padding:24px 16px 0}}
.page-hero h1 .mot{display:inline-block;white-space:nowrap;color:#fff;will-change:transform,opacity;
  transition: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 img{transition:opacity .45s cubic-bezier(.2,.7,.3,1),transform .45s cubic-bezier(.2,.7,.3,1)}
.page-hero .media img.out{opacity:0;transform:translateY(16px) scale(.985)}
/* grille asymétrique : une grande fiche et quatre petites */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px}
.ptile{display:grid;gap:12px;align-content:start}
.ptile.grande{grid-column:span 2;grid-row:span 2;grid-template-rows:minmax(0,1fr) auto}
.ptile .panneau{background:var(--off);border-radius:20px;overflow:hidden;aspect-ratio:1;display:grid;place-items:center}
.ptile.grande .panneau{aspect-ratio:auto;height:100%;min-height:360px}
.ptile .panneau img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
/* Chaque fiche porte sa demande de prix : c'est d'ici qu'on arrive depuis
   l'accueil, et le formulaire repart avec le produit et sa famille. */
.ptile .pdemande{justify-self:start;margin-top:6px;font:700 14px/1 var(--body);
  color:var(--navy);text-decoration:none;border-bottom:3px solid var(--c);padding-bottom:5px}
.ptile{scroll-margin-top:110px}
/* La tuile entiere est cliquable, comme les fiches de l'accueil : on cliquait
   la photo d'un polo et il ne se passait rien. Le lien etire reprend la
   demande de prix de la tuile, seule destination honnete tant qu'on n'a pas
   l'adresse de chaque produit dans le catalogue du fournisseur. */
.ptile{position:relative}
.ptile .pdemande::after{content:"";position:absolute;inset:0;border-radius:20px}
.ptile .pdemande:focus-visible{outline:none}
.ptile:has(.pdemande:focus-visible){outline:3px solid var(--navy);outline-offset:3px}
.ptile:hover .panneau img{transform:scale(1.04)}
.ptile .marque{font:700 12px/1 var(--body);letter-spacing:1.6px;text-transform:uppercase;color:var(--navy)}
.ptile h3{font-size:clamp(19px,1.7vw,24px);font-weight:800}
.ptile.grande h3{font-size:clamp(24px,2.4vw,34px)}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ptile.grande{grid-row:span 1}.ptile.grande .panneau{aspect-ratio:1;height:auto;min-height:0}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}.ptile.grande{grid-column:span 1}}

/* en-tête de bloc : surtitre, titre à gauche, lien à droite */
.bloc-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.bloc-tete .sur{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.bloc-tete h2{font-size:var(--t4);font-weight:900;margin-top:8px}


/* comment choisir : carte à étapes */
.choix{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:2px solid var(--line);border-radius:var(--radius);overflow:hidden}
.choix .liste-etapes{display:grid;align-content:start}
.choix .etape{padding:24px 30px;border-bottom:1px solid var(--line);border-left:4px solid transparent;transition:border-color .25s cubic-bezier(.2,.7,.3,1),background-color .25s cubic-bezier(.2,.7,.3,1)}
.choix .etape:last-child{border-bottom:0}
.choix .etape:hover,.choix .etape.actif{border-left-color:var(--c,var(--teal));background:var(--off)}
.choix .etape{cursor:default;outline-offset:-3px}
.choix .visuel img{transition:opacity .25s cubic-bezier(.2,.7,.3,1)}
.choix .visuel img.out{opacity:0}
.choix .etape small{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text)}
.choix .etape h3{font-size:22px;font-weight:800;margin-top:6px}
.choix .etape p{margin-top:8px;font-size:14.5px;color:var(--text);max-width:46ch}
.choix .visuel{position:relative;min-height:320px}
.choix .visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.choix{grid-template-columns:1fr}.choix .visuel{order:-1;min-height:240px}}

/* clôture centrée + mosaïque */
.centre-bloc{text-align:center;max-width:56ch;margin:0 auto 34px}
.centre-bloc h2{font-size:var(--t3);font-weight:900}
.centre-bloc p{margin-top:14px;color:var(--text)}
.centre-bloc .btn{margin-top:24px}
.mosaique{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mosaique figure{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.mosaique img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
@media (max-width:760px){.mosaique{grid-template-columns:1fr 1fr}.mosaique figure:last-child{display:none}}

/* 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 .sec-head.solo > div{border-bottom:0;padding-bottom:0}
.bande-sombre .btn-line{border-color:#fff;color:#fff}
.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))}
.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}
/* Le composant .choix a été dessiné pour un fond clair, mais il vit dans une bande
   sombre : ces règles arrivent après celles de jade.css, donc elles doivent être ici,
   à la fin, pour gagner. Tout reste sombre : l'étape ouverte se signale par son filet
   de couleur et une légère montée du fond, pas par un panneau blanc qui troue la
   composition. */
.bande-sombre .choix{border-color:rgba(255,255,255,.2)}
.bande-sombre .choix .etape{border-bottom-color:rgba(255,255,255,.14);border-left-width:5px}
.bande-sombre .choix .etape small{color:rgba(255,255,255,.72)}
.bande-sombre .choix .etape h3{color:rgba(255,255,255,.72);transition:color .25s cubic-bezier(.2,.7,.3,1)}
.bande-sombre .choix .etape p{color:rgba(255,255,255,.72)}
.bande-sombre .choix .etape:hover,.bande-sombre .choix .etape.actif{background:rgba(255,255,255,.07)}
.bande-sombre .choix .etape:hover h3,.bande-sombre .choix .etape.actif h3,
.bande-sombre .choix .etape:hover p,.bande-sombre .choix .etape.actif p{color:#fff}
.bande-sombre .choix .etape:hover small,.bande-sombre .choix .etape.actif small{color:rgba(255,255,255,.88)}