/* Carrières : /carrieres et /carrieres/<offre>. Chargée seulement sur ces pages, après style.css. */

.carrieres-actions{display:flex;flex-wrap:wrap;gap:var(--s-md);margin-top:var(--s-2xl)}
.carrieres-avis{margin:0 0 var(--s-xl);padding:14px 18px;border-radius:var(--r-sm);background:var(--bleu-clair);color:var(--encre);font-size:15px;max-width:72ch}
.lien-souligne{color:var(--bleu);text-decoration:underline;text-underline-offset:3px}

/* sections */
.carrieres-bloc{margin-top:clamp(56px,8vw,104px);scroll-margin-top:96px}
.carrieres-tete{max-width:62ch}
.carrieres-tete h2{font-size:clamp(26px,3.3vw,40px);font-weight:700;margin-top:var(--s-md);max-width:24ch}
.carrieres-tete p{margin-top:var(--s-lg);color:var(--encre-2);font-size:clamp(16px,1.3vw,17px)}

/* ce que fait l'équipe : quatre métiers, en liste éditoriale */
.metiers{list-style:none;margin-top:var(--s-3xl);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2xl) var(--s-3xl)}
.metiers li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:4px var(--s-lg);padding-top:var(--s-xl);border-top:1px solid var(--trait);transition:border-color .35s var(--ease)}
.metiers li:hover{border-color:var(--bleu)}
.metier-picto{grid-row:span 2;width:48px;height:48px;border-radius:14px;background:var(--bleu-clair);color:var(--bleu);display:flex;align-items:center;justify-content:center}
.metiers b{font:600 19px/1.25 Geologica,sans-serif;align-self:center}
.metiers p{color:var(--encre-2);font-size:15px;max-width:48ch}

/* façon de travailler : des principes courts, à gauche, leur explication à droite */
.principes{list-style:none;margin-top:var(--s-2xl);counter-reset:p;border-bottom:1px solid var(--trait)}
.principes li{counter-increment:p;display:grid;grid-template-columns:56px minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-lg) var(--s-xl);align-items:baseline;padding:var(--s-xl) 0;border-top:1px solid var(--trait)}
.principes li::before{content:"0" counter(p);font:600 13px/1 Geologica,sans-serif;letter-spacing:.06em;color:var(--bleu)}
.principes b{font:600 clamp(19px,2vw,24px)/1.2 Geologica,sans-serif;letter-spacing:-.015em}
.principes span{color:var(--encre-2);font-size:15px;max-width:52ch}

/* recrutement : la frise du site, en quatre temps */
.frise.recrutement{margin-top:var(--s-2xl)}

/* offres : filtres, liste groupée par métier */
.offres-filtres{margin-top:var(--s-2xl);display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr)) auto;gap:var(--s-md);align-items:end;background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:var(--s-lg);box-shadow:var(--ombre)}
.offres-filtres label{display:grid;gap:6px;font:600 12px/1 Geologica,sans-serif;letter-spacing:.04em;color:var(--encre-2);min-width:0}
.offres-filtres input,.offres-filtres select{width:100%;min-width:0;font:400 15px/1.3 Onest,sans-serif;color:var(--encre);padding:11px 12px;border:1px solid var(--trait);border-radius:12px;background:var(--blanc);transition:border-color .2s,box-shadow .2s}
.offres-filtres input:focus,.offres-filtres select:focus{outline:0;border-color:var(--bleu);box-shadow:0 0 0 4px var(--bleu-10)}
.offres-filtres .offres-appliquer{padding:12px 18px}
.js-carrieres .offres-appliquer{display:none}
.js-carrieres .offres-filtres{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}
.offres-compte{margin-top:var(--s-lg);font-size:13px;color:var(--encre-2)}
.offres-groupe{margin-top:var(--s-xl)}
.offres-groupe h3{font:600 12px/1 Geologica,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--encre-2);padding-bottom:var(--s-md)}
.offres-liste{list-style:none;border-top:1px solid var(--trait)}
.offre{border-bottom:1px solid var(--trait)}
.offre a{display:grid;grid-template-columns:minmax(0,1fr) auto 28px;gap:6px var(--s-xl);align-items:center;padding:var(--s-lg) var(--s-sm);border-radius:14px;transition:background .25s,padding-left .35s var(--ease)}
.offre a:hover{background:var(--blanc-2);padding-left:var(--s-lg)}
.offre-titre{font:600 clamp(17px,1.6vw,20px)/1.25 Geologica,sans-serif;color:var(--encre);transition:color .2s}
.offre a:hover .offre-titre{color:var(--bleu)}
.offre-resume{grid-column:1;color:var(--encre-2);font-size:14px;max-width:70ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.offre-meta{grid-column:2;grid-row:1 / span 2;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:320px}
.offre-meta span,.offre-etiquettes li{display:inline-block;font:600 12px/1 Geologica,sans-serif;color:var(--bleu);background:var(--bleu-clair);padding:7px 11px;border-radius:999px;white-space:nowrap}
.offre-meta span+span{color:var(--encre-2);background:var(--blanc-2);border:1px solid var(--trait)}
.offre-fleche{grid-column:3;grid-row:1 / span 2;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bleu);border:1.5px solid var(--bleu-clair);transition:background .25s,color .25s,transform .35s var(--ease)}
.offre a:hover .offre-fleche{background:var(--bleu);color:#fff;transform:translateX(3px)}
.offres-aucune{margin-top:var(--s-xl);padding:var(--s-xl);border:1px dashed var(--trait);border-radius:var(--r);color:var(--encre-2);display:flex;flex-wrap:wrap;gap:var(--s-md);align-items:center;justify-content:space-between}
.offres-vide{margin-top:var(--s-2xl);display:grid;gap:var(--s-md);justify-items:start;background:#fff;border:1px solid var(--trait);border-radius:var(--r);padding:clamp(24px,4vw,40px);box-shadow:var(--ombre);max-width:760px}
.offres-vide-titre{font:700 clamp(20px,2.2vw,26px)/1.2 Geologica,sans-serif;color:var(--encre)}
.offres-vide p{color:var(--encre-2);max-width:60ch}
.offres-vide .pil{margin-top:var(--s-sm)}

/* formulaire de candidature */
#candidature .contact-grille{margin-top:0}
#candidature .carrieres-tete{margin-bottom:var(--s-xl)}
.candidature-form{position:relative}
.candidature-form .hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.formulaire .facultatif{font-weight:400;letter-spacing:0;color:var(--encre-2);opacity:.8}
.formulaire input[type=file]{padding:10px 12px;background:var(--blanc-2);cursor:pointer}
.formulaire input[type=file]::file-selector-button{font:600 13px/1 Geologica,sans-serif;color:var(--bleu);background:#fff;border:1.5px solid var(--bleu);border-radius:10px;padding:9px 14px;margin-right:12px;cursor:pointer}
.formulaire label.consentement{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font:400 14px/1.5 Onest,sans-serif;color:var(--encre-2);cursor:pointer}
.formulaire label.consentement input{width:20px;height:20px;margin:2px 0 0;padding:0;accent-color:var(--bleu)}
.consentement a{color:var(--bleu);text-decoration:underline}
.formulaire textarea:user-invalid,.formulaire input[type=file]:user-invalid{border-color:oklch(60% 0.2 25)}
.candidature-merci{display:grid;gap:var(--s-md);padding:var(--s-lg) 0}
.candidature-merci h3{font:700 clamp(20px,2.4vw,28px)/1.2 Geologica,sans-serif}
.candidature-merci p{color:var(--encre-2);max-width:56ch}

/* fiche d'une offre */
.offre-page h1{max-width:22ch;margin-top:var(--s-md)}
.offre-grille{margin-top:var(--s-lg)}
.offre-etiquettes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-lg)}
.offre-etiquettes li+li{color:var(--encre-2);background:var(--blanc-2);border:1px solid var(--trait)}
.offre-page .chapeau{margin-bottom:var(--s-xl)}
.offre-page #postuler .formulaire{margin-top:var(--s-lg)}

@media (max-width:980px){
  .offres-filtres,.js-carrieres .offres-filtres{grid-template-columns:1fr 1fr}
  .offres-recherche{grid-column:1 / -1}
  .principes li{grid-template-columns:40px minmax(0,1fr)}
  .principes span{grid-column:2}
}
@media (max-width:760px){
  .metiers{grid-template-columns:1fr}
  .offre a{grid-template-columns:minmax(0,1fr) 28px}
  .offre-meta{grid-column:1;grid-row:auto;justify-content:flex-start;max-width:none}
  .offre-fleche{grid-column:2;grid-row:1 / span 3}
}
@media (max-width:520px){
  .offres-filtres,.js-carrieres .offres-filtres{grid-template-columns:1fr}
  .carrieres-actions .pil{flex:1 1 auto}
}
.carrieres .contact-cote p a{font:inherit;color:var(--bleu);text-decoration:underline;text-underline-offset:3px}