/* Recrutement — la page publique d’un poste (agence-de-com.com). Allure « page carrière » moderne (Hector, 15/10) :
   bandeau photo, logo en tuile, étiquettes, blocs en cartes, carte « Postuler » qui suit la lecture.
------------------------------------------------ */
:root{--pu-encre:#0b0b14;--pu-doux:#5b5b66;--pu-trait:#e8e8ed;--pu-fond:#f5f5f7;--pu-accent:#4f46e5;--pu-jaune:#ffcd00}

.pu{max-width:1120px;margin:0 auto;padding:16px 16px 96px;box-sizing:border-box;color:var(--pu-encre)}
.pu h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.1;letter-spacing:-.02em;font-weight:800;margin:2px 0 10px}
.pu h2{font-size:1.35rem;letter-spacing:-.01em;font-weight:800;margin:0 0 10px}
.pu-soc{margin:0;color:var(--pu-accent);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em}
.pu-lieu{display:inline-block;color:var(--pu-doux);margin:0 0 14px}
.pu a:not(.pu-btn){color:var(--pu-encre);text-decoration:underline;text-decoration-color:var(--pu-jaune);text-decoration-thickness:2px;text-underline-offset:4px}
.pu-petit{font-size:.85rem;color:var(--pu-doux)}

/* Bandeau : photo, logo en tuile, titre, étiquettes
------------------------------------------------ */
.pu-hero{position:relative;margin:0 0 24px}
.pu-cover{display:block;width:100%;height:clamp(180px,30vw,320px);object-fit:cover;object-position:50% 30%;border-radius:24px}
.pu-tete{position:relative;margin:-44px 24px 0}
.pu-logo{display:block;box-sizing:border-box;width:72px;height:72px;border-radius:18px;background:#fff;padding:6px;box-shadow:0 8px 24px rgba(11,11,20,.12)}
.pu-tete>div{padding-top:14px}
.pu-tags{display:flex;flex-wrap:wrap;gap:4px 0;list-style:none;margin:0;padding:0;color:var(--pu-doux);font-size:.92rem}
.pu-tags li:not(:last-child)::after{content:'·';margin:0 10px;color:#b8b8c0}

/* Deux colonnes : l’annonce en cartes, la carte « Postuler » qui suit
------------------------------------------------ */
.pu-grille{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.pu-corps{display:grid;gap:16px;min-width:0}
.pu-annonce{display:grid;gap:16px}
.pu-bloc{background:#fff;border:1px solid var(--pu-trait);border-radius:20px;padding:22px 24px;line-height:1.6}
.pu-bloc:first-child{background:var(--pu-fond);border-color:transparent;font-size:1.05rem}
.pu-bloc p{margin:8px 0}
.pu-bloc ul{list-style:none;padding:0;margin:8px 0}
.pu-bloc li{position:relative;margin:8px 0;padding-left:24px}
.pu-bloc li::before{content:'';position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--pu-jaune)}
.pu-aside{position:sticky;top:90px}
.pu-carte{border-radius:20px;padding:22px;background:#fff;border:1px solid var(--pu-trait);box-shadow:0 12px 32px rgba(11,11,20,.08)}
.pu-carte-t{font-weight:800;font-size:1.1rem;line-height:1.25;margin:4px 0 6px}
.pu-carte .pu-btn{display:block;text-align:center}
a.pu-barre{display:none}

/* Les pôles d’un poste, en accordéons
------------------------------------------------ */
.pu-pole{--c:#4f46e5;margin:12px 0;padding:12px 14px;border-radius:14px;background:var(--pu-fond)}
.pu-pole:nth-of-type(2){--c:#0d9488}
.pu-pole:nth-of-type(3){--c:#7c3aed}
.pu-pole:nth-of-type(4){--c:#ea580c}
.pu-pole:nth-of-type(5){--c:#db2777}
.pu-pole>summary{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;cursor:pointer;list-style:none}
.pu-pole>summary::-webkit-details-marker{display:none}
.pu-pole>summary::after{content:'+';margin-left:auto;color:var(--pu-doux);font-weight:400;font-size:1.3rem}
.pu-pole[open]>summary{margin:0 0 6px}
.pu-pole[open]>summary::after{content:'−'}
.pu-num{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:9px;background:var(--c);color:#fff;font-size:.85rem}
.pu-avec{padding:6px 10px;border-radius:8px;background:#fff;color:#3730a3;font-size:.88rem}

/* Le formulaire
------------------------------------------------ */
.pu-form{display:grid;gap:12px;background:#fff;border:1px solid var(--pu-trait);border-radius:20px;padding:22px 24px;scroll-margin-top:90px}
.pu-form label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:var(--pu-doux)}
.pu-form input,.pu-form textarea{font:inherit;color:var(--pu-encre);padding:11px 12px;border:1px solid var(--pu-trait);border-radius:12px;width:100%;box-sizing:border-box;background:var(--pu-fond)}
.pu-form input:focus,.pu-form textarea:focus{outline:2px solid var(--pu-accent);outline-offset:1px;background:#fff}
.pu-piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pu-err{background:#fdecea;color:#b42318;padding:10px;border-radius:12px;margin:0}
.pu-creneaux{border:1px solid var(--pu-trait);border-radius:14px;padding:12px;display:flex;flex-wrap:wrap;gap:6px}
.pu-creneaux legend{font-weight:700;padding:0 6px;color:var(--pu-encre)}
.pu-jour{width:100%;margin:8px 0 0;font-weight:600}
.pu-form .pu-cr{flex-direction:row;align-items:center;gap:0}
.pu-cr input{position:absolute;opacity:0;width:1px}
.pu-cr span{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--pu-fond);color:var(--pu-encre);font-weight:600;cursor:pointer}
.pu-cr input:checked+span{background:var(--pu-accent);color:#fff}
.pu-cr input:focus-visible+span{outline:2px solid var(--pu-accent);outline-offset:2px}
.pu-aucun{width:100%}
.pu-quiz{display:grid;gap:10px}
.pu-quiz h3{margin:6px 0 0}
.pu-quiz .pu-petit{margin:0}
.pu-quiz fieldset{border:0;border-radius:14px;padding:12px 14px;display:grid;gap:8px;margin:0;background:var(--pu-fond)}
.pu-quiz legend{float:left;width:100%;font-weight:700;padding:0;margin-bottom:4px;color:var(--pu-encre)}
.pu-form .pu-choix{flex-direction:row;align-items:flex-start;gap:8px;color:var(--pu-encre);cursor:pointer}
.pu-choix input{width:auto;margin-top:4px}
.pu-form .pu-accord{flex-direction:row;align-items:flex-start;gap:8px;font-size:.85rem}
.pu-accord input{width:auto;margin-top:4px}
.pu-btn{display:inline-block;padding:14px 22px;border-radius:999px;border:0;background:var(--pu-encre);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.pu-btn:hover{background:#2a2a35}
.pu-ok{background:var(--pu-fond);border-radius:20px;padding:22px}

/* Téléphone : une colonne, le bouton « Postuler » reste sous le pouce
------------------------------------------------ */
@media (max-width:860px){
.pu-grille{grid-template-columns:1fr}
.pu-aside{display:none}
.pu-tete{margin:-36px 12px 0}
.pu-logo{width:60px;height:60px;border-radius:16px}
.pu-bloc,.pu-form{padding:18px 16px}
.pu-btn.pu-barre{display:block;position:fixed;left:16px;right:16px;bottom:16px;z-index:50;text-align:center}
}