/* Styles propres a carrieres.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 Carrières ---------- */
/* l'en-tête prend la couleur du hero de la page, pas l'or de l'accueil */
.header{background:#0B2548;color:#fff}
.header .btn-navy{background:var(--lemon);color:var(--navy)}
.header .btn-navy:hover{background:#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:#0B2548;--plateau-figure:url("../images/figures/st-carrieres.webp");--plateau-img:url("../images/hero-studio-carrieres.webp");background:var(--plateau);color:#fff;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:520px}
.page-hero.studio .eyebrow{color:#fff;opacity:.72}
.page-hero.studio h1{color:#fff}
.page-hero.studio h1 .mot{color:var(--navy);--pastille:var(--lemon)}
.page-hero.studio p{color:#fff;opacity:.84}
.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:76% 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.4;
    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{position:relative;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)}
/* Le territoire du poste passe sur sa propre ligne, plus petit. Dans le
   titre il tombait seul en fin de ligne sous 375 px et aussi a 1680, et le
   lier par un espace insecable rendait le bloc plus large que l'ecran. En
   ligne separee, la deuxieme ligne devient voulue au lieu de subie. */
.poste h3 .region{display:block;margin-top:7px;font-family:var(--body);
  font-size:clamp(14px,1.5vw,17px);font-weight:600;text-transform:none;
  letter-spacing:0;line-height:1.3;color:var(--text);white-space:nowrap}
.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:700}
.poste .lien{grid-column:2;grid-row:1/4;align-self:center;display:inline-flex;align-items:center;gap:12px;
  font:700 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::after{content:"";position:absolute;inset:0}
.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:700;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);font-weight:700}
.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}}


/* Cibles tactiles au doigt, suite : meme principe que dans jade.css.
   Calque invisible quand le voisinage le permet, rembourrage reel sinon. */
@media (pointer:coarse){
  .postes .poste a.lien{position:relative}
  .postes .poste a.lien::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  /* deux liens sur deux lignes, 6 px d'ecart : un calque les ferait se recouvrir,
     on ecarte donc les lignes pour de vrai avant de rembourrer */
  .mot-cv .aussi{line-height:2.95}
  .mot-cv .aussi a{padding-block:12px}
}