/* Styles propres a faq.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 FAQ ---------- */
/* l'en-tête prend la couleur du hero de la page, pas l'or de l'accueil */
.header{background:#00353A;color:#fff}
.header .logo{color:#fff}

/* 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:#00353A;--plateau-figure:url("../images/figures/st-faq.webp");--plateau-img:url("../images/hero-studio-faq.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(360px,30vw,440px)}
.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:560px}
.page-hero.studio .eyebrow{color:#fff;opacity:.78}
.page-hero.studio h1{color:#fff}
.page-hero.studio h1 .mot{color:var(--navy);--pastille:var(--lemon)}
.page-hero.studio p{color:#fff;opacity:.86}
.page-hero.studio .btn-blanc{background:#fff;color:var(--navy)}
.page-hero.studio .btn-fantome{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.14)}
.page-hero.studio .btn-fantome:hover{background:rgba(255,255,255,.26);border-color:#fff}
@media (max-width:1100px){
  .page-hero.studio{background-image:var(--plateau-figure);background-size:73% auto;background-position:right bottom;padding-bottom:56vw}
  .page-hero.studio .hero-grille .texte{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.36;
    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}

section[id]{scroll-margin-top:92px}
.sec-head .sur{display:block;font:700 13px/1.4 var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin-bottom:12px}

/* postes : des lignes, pas des cartes. Filet épais, titre en display, conditions en texte */
.postes{list-style:none;margin:0;padding:0;display:grid;gap:clamp(36px,4vw,56px)}
.poste{border-top:5px solid var(--c,var(--teal));padding-top:clamp(20px,2.2vw,28px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px clamp(24px,4vw,56px);align-items:start}
.poste .lieu{grid-column:1;font-size:12.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--navy)}
.poste h3{grid-column:1;font-size:clamp(28px,3.4vw,48px);font-weight:900;line-height:var(--lh-titre);margin-top:10px;
  text-transform:uppercase;transition:color .25s cubic-bezier(.2,.7,.3,1)}
.poste:hover h3{color:var(--c,var(--teal))}
.poste .res{grid-column:1;margin-top:14px;color:var(--text);max-width:58ch}
.poste .meta{grid-column:1;list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;
  font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy)}
.poste .meta li + li::before{content:"·";margin:0 11px;color:var(--c,var(--teal));font-weight:900}
.poste .lien{grid-column:2;grid-row:1/4;align-self:center;display:inline-flex;align-items:center;gap:12px;
  font:800 15px var(--body);color:var(--navy);text-decoration:none;white-space:nowrap;
  border-bottom:2px solid var(--c,var(--teal));padding-bottom:5px}
.poste .lien svg{width:18px;height:18px;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.poste:hover .lien svg{transform:translateX(5px)}
@media (max-width:820px){
  .poste{grid-template-columns:1fr}
  .poste .lien{grid-column:1;grid-row:auto;margin-top:22px;justify-self:start}
}

/* bande citron : envoyer son CV */
.bande-citron{background:var(--lemon);color:var(--navy)}
.postuler{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:start}
.mot-cv h2{font-size:var(--t3);font-weight:900;max-width:14ch}
.mot-cv p{margin-top:16px;max-width:46ch;font-size:17px}
.mot-cv .aussi{margin-top:26px;font-size:15px;line-height:1.7}
.mot-cv .aussi a{font-weight:800;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.carte-cv{background:#fff;border-radius:var(--radius);padding:clamp(26px,3vw,40px);box-shadow:0 24px 50px rgba(17,46,64,.14)}
.carte-cv .field input,.carte-cv .field select{background:var(--off);border-color:var(--line)}
.carte-cv .field input:focus,.carte-cv .field select:focus{border-color:var(--navy);background:#fff}
.depot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;cursor:pointer;
  border:2px dashed var(--line);border-radius:20px;padding:18px 20px;color:var(--text);
  transition:border-color .25s cubic-bezier(.2,.7,.3,1),background-color .25s cubic-bezier(.2,.7,.3,1)}
.depot:hover{border-color:var(--navy);background:var(--off)}
.depot svg{width:26px;height:26px;color:var(--navy)}
.depot b{color:var(--navy)}
.depot small{font-size:12.5px;opacity:.8}
.carte-cv input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.carte-cv input[type=file]:focus-visible + .depot,.depot:focus-within{border-color:var(--navy)}
@media (max-width:900px){.postuler{grid-template-columns:1fr}}
@media (max-width:560px){.form{grid-template-columns:1fr}}

/* nous joindre : le formulaire a un message, pas de dépôt de fichier */
#ecrire .sur-forme{display:block;font:700 13px/1.4 var(--body);letter-spacing:2px;text-transform:uppercase;color:var(--navy);margin-bottom:12px}
.mot-cv h2{font-size:var(--t3);font-weight:900;max-width:18ch}
.carte-cv textarea{width:100%;font:500 15px var(--body);color:var(--navy);background:var(--off);
  border:2px solid var(--line);border-radius:20px;padding:12px 14px;resize:vertical;min-height:120px}
.carte-cv textarea:focus{border-color:var(--navy);background:#fff;outline:none}
.carte-cv textarea:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
/* succursales, repris de À propos */
.succ{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.succ li{border-top:4px solid var(--c,var(--teal));padding-top:18px;display:grid;gap:8px;align-content:start}
.succ h3{font-size:clamp(20px,1.8vw,24px);font-weight:800}
.succ address{font-style:normal;font-size:15px;color:var(--text);line-height:1.5}
.succ .region{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--navy)}
@media (max-width:900px){.succ{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.succ{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 .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}