:root {
  --terracotta:#C0563E; --terracotta-dark:#9E4A34; --terracotta-light:#E8B090;
  --ivory:#F2E6D0; --ivory-soft:#F7EEDC; --surface-alt:#FAF3E6;
  --orange:#E8461F; --orange-text:#B23516;
  --ink:#1A1612; --sepia:#7A4936; --grey-soft:#E8DDCD; --on-terracotta:#FFFFFF;
  --serif:'Playfair Display',Didot,Georgia,serif;
  --sans:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --italic:'Crimson Pro',Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--ivory);color:var(--ink);font:16px/1.6 var(--sans)}
.wrap{max-width:760px;margin:0 auto;padding:0 20px 72px}

/* Meme fond que .page-hero du site : le motif est servi par acces-ia.pro, en
   chemin absolu — ce service vit sous /emploi-btp/ du meme domaine. Le gate
   verifie que les deux fichiers repondent, sinon un fond muet passerait
   inapercu : une image de fond qui manque ne leve aucune erreur. */
header.hero{background-color:var(--terracotta);
  background-image:url('/assets/blueprint-bg.svg');
  background-size:cover;background-position:center;
  color:var(--on-terracotta);padding:34px 0 28px}
header.hero .wrap{padding-bottom:0}

/* Le retour au site : logo et nom, cible tactile pleine. */
.retour{display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  color:inherit;margin:0 0 14px}
.retour img{width:52px;height:52px;display:block;flex:none}
.retour span{font-family:var(--serif);font-size:22px;letter-spacing:.06em}
.retour:hover span{text-decoration:underline;text-underline-offset:4px}
.retour:focus-visible{outline:2px solid #FFD9A8;outline-offset:4px}
@media (max-width:560px){
  .retour img{width:44px;height:44px}
  .retour span{font-size:19px}
}
/* Le sur-titre tient sur une ligne a toutes les largeurs : version courte sous 560 px
   plutot que de rogner la taille jusqu'a l'illisible. */
.marque{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.92;
  margin:0 0 10px;white-space:nowrap}
/* Le sur-titre est un lien vers l'accueil : c'est donc une cible tactile,
   44 px de haut minimum meme si le texte n'en fait que 14. */
.marque a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;margin:-12px 0}
.marque a:hover{opacity:.82}
.marque a:focus-visible{outline:2px solid #FFD9A8;outline-offset:3px}
.marque .court{display:none}
@media (max-width:560px){
  .marque{font-size:10px;letter-spacing:.1em}
  .marque .long{display:none}
  .marque .court{display:inline}
}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(25px,4.6vw,32px);
  line-height:1.2;margin:0}
h1 em{font-family:var(--italic);font-style:italic;color:#FFD9A8}

.partenaire{background:#fff;border-bottom:1px solid var(--grey-soft);padding:12px 0}
.partenaire .wrap{padding-bottom:0;display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.partenaire a{display:flex;align-items:center;gap:13px;color:inherit;text-decoration:none}
.partenaire a:hover b{color:var(--terracotta-dark)}
.part-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sepia);flex:none}
.part-logo{height:30px;width:auto;display:block}
.partenaire span{font-size:14px}
.partenaire b{display:block}

.barre{background:var(--surface-alt);border-bottom:1px solid var(--grey-soft);padding:18px 0}
.barre .wrap{padding-bottom:0;display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.champ{flex:1;min-width:210px}
label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sepia);margin-bottom:5px;font-weight:600}
select{width:100%;font:15px var(--sans);color:var(--ink);background:#fff;
  border:1px solid var(--grey-soft);border-radius:2px;padding:11px 12px;min-height:44px}
select:focus{outline:2px solid var(--terracotta);outline-offset:1px}

.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:30px 0 6px}
.chiffre{background:#fff;border:1px solid var(--grey-soft);border-left:3px solid var(--terracotta);padding:15px 16px}
.chiffre b{display:block;font-family:var(--serif);font-size:34px;line-height:1.1;color:var(--terracotta-dark)}
.chiffre span{font-size:13px;color:var(--sepia);display:block;margin-top:3px}
/* Le territoire de chaque chiffre, sous le chiffre : les quatre tuiles n'ont pas la
   meme maille, et un bandeau unique au-dessus les faisait toutes passer pour locales. */
.chiffre i{display:block;font-style:normal;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sepia);opacity:.78;margin-top:5px}
/* Un chiffre absent reste lisible. Il etait peint en #E8DDCD sur blanc, soit 1,34:1
   quand le seuil WCAG du grand texte est de 3:1 : le « – » de 107 pages et les zeros
   de 78 autres etaient invisibles. #8A7B66 mesure 4,11:1 sur blanc et 3,57:1 sur
   l'ivoire, donc conforme sur les deux fonds reellement peints. */
.chiffre.muet b{color:#8A7B66}
p.legal{margin-top:6px;font-size:13px}
p.legal a{color:var(--sepia);display:inline-flex;align-items:center;min-height:44px}

/* Fil d'Ariane : la seule navigation de la page metier qui marche sans JavaScript, les
   deux listes deroulantes reposant sur onchange. Il donne aussi au moteur le chemin
   entre l'accueil, le bassin et le metier, que rien ne reliait auparavant. */
nav.fil{font-size:13px;color:var(--sepia);margin:22px 0 0}
/* 44 px de haut minimum, marge negative pour que la cible ne desequilibre pas le rythme
   vertical : un lien de 13 px de texte fait 17 px de haut, soit une cible inatteignable
   au doigt. */
nav.fil a{color:var(--sepia);text-decoration:none;border-bottom:1px solid var(--grey-soft);
  display:inline-flex;align-items:center;min-height:44px;margin:-13px 0;line-height:1.1}
nav.fil a:hover{color:var(--terracotta-dark);border-bottom-color:var(--terracotta)}
nav.fil a:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}

h2.section{font-family:var(--serif);font-size:22px;font-weight:600;margin:42px 0 14px}
.zone-active{margin:26px 0 0;font-size:14px;color:var(--sepia)}
.zone-active b{color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:12px 24px;border-radius:999px;border:1.5px solid var(--terracotta);
  background:var(--terracotta);color:#fff;font:600 14.5px var(--sans);
  text-decoration:none;cursor:pointer;
  box-shadow:0 2px 6px rgba(26,22,18,.13);transition:background .15s,box-shadow .15s}
.btn:hover{background:var(--terracotta-dark);border-color:var(--terracotta-dark);
  box-shadow:0 3px 10px rgba(26,22,18,.2)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.clair{background:#fff;color:var(--terracotta-dark);border-color:var(--terracotta-light)}
.btn.clair:hover{background:var(--ivory-soft);border-color:var(--terracotta);color:var(--terracotta-dark)}
.btn.sur-fonce{background:#FFD9A8;color:#6B2E1E;border-color:#FFD9A8}
.btn.sur-fonce:hover{background:#fff;border-color:#fff;color:#6B2E1E}
.btns{display:flex;flex-wrap:wrap;gap:11px;margin-top:16px}

details{background:#fff;border:1px solid var(--grey-soft);margin-bottom:10px}
details[open]{border-color:var(--terracotta-light)}
/* Un mot par panneau : il porte seul, donc il se traite comme un titre. */
summary{list-style:none;cursor:pointer;padding:16px 19px;display:flex;align-items:center;
  gap:15px;min-height:44px;font-family:var(--serif);font-weight:600;font-size:20px;
  letter-spacing:-.01em;color:var(--ink)}
summary:hover{color:var(--terracotta-dark)}
summary::-webkit-details-marker{display:none}
summary::after{content:'';margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--terracotta);border-bottom:2px solid var(--terracotta);
  transform:rotate(45deg);transition:transform .18s ease}
details[open] summary::after{transform:rotate(-135deg)}
summary:focus-visible{outline:2px solid var(--terracotta);outline-offset:-2px}
.pastille{background:var(--terracotta);color:#fff;font:600 13px var(--sans);
  min-width:30px;height:24px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;padding:0 9px;flex:none}
.pastille.vide{background:var(--grey-soft);color:var(--sepia)}
.corps{padding:2px 19px 20px;border-top:1px solid var(--surface-alt)}
.corps p{margin:14px 0 0;font-size:15px}
.note{font-size:13px;color:var(--sepia);margin-top:14px}
.sous-titre{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sepia);
  font-weight:600;margin:18px 0 7px!important}
ul.puces{list-style:none;margin:0;padding:0;columns:2;column-gap:26px}
ul.puces li{font-size:14px;padding:3px 0 3px 14px;position:relative;break-inside:avoid}
ul.puces li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;
  background:var(--terracotta-light)}
@media (max-width:640px){ul.puces{columns:1}}

ul.evts,ul.agences{list-style:none;margin:14px 0 0;padding:0}
.evt{display:flex;gap:15px;padding:11px 0;border-bottom:1px solid var(--surface-alt);font-size:14px}
.evt:last-child,.agence:last-child{border-bottom:0}
.evt-date{flex:none;width:86px;color:var(--terracotta-dark)}
.evt-titre{display:block;color:var(--sepia);font-size:13px;margin-top:2px}
.agence{padding:9px 0;border-bottom:1px solid var(--surface-alt);font-size:14px}
.agence b{display:block}
.agence span{color:var(--sepia);font-size:13px}
@media (max-width:600px){.evt{flex-direction:column;gap:2px}.evt-date{width:auto}}

.jauge{height:8px;background:var(--surface-alt);margin:16px 0 8px;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--terracotta)}

.orientation{background:var(--ivory-soft);border-left:3px solid var(--terracotta-light);
  padding:14px 16px;margin-top:18px}
.orientation p{margin:0;font-size:14px}

textarea{width:100%;font:13.5px/1.55 ui-monospace,'Cascadia Mono',Consolas,monospace;
  color:var(--ink);background:var(--surface-alt);border:1px solid var(--grey-soft);
  border-radius:2px;padding:13px;resize:vertical}
textarea:focus{outline:2px solid var(--terracotta);outline-offset:1px}

.demande{background:var(--terracotta);color:var(--on-terracotta);padding:22px 24px;margin-top:34px}
.demande p{margin:0;font-size:14.5px;max-width:56ch}
.demande-titre{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:7px!important}

footer{border-top:1px solid var(--grey-soft);margin-top:46px;padding-top:18px;
  font-size:13px;color:var(--sepia)}
footer b{color:var(--ink)}
footer a{color:var(--terracotta-dark)}

.liste-liens{list-style:none;padding:0;margin:20px 0 0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px}
.liste-liens a{display:block;background:#fff;border:1px solid var(--grey-soft);
  padding:13px 15px;text-decoration:none;color:var(--ink);font-size:15px;min-height:44px}
.liste-liens a:hover{border-color:var(--terracotta);color:var(--terracotta-dark)}
.liste-liens small{display:block;color:var(--sepia);font-size:12.5px;margin-top:2px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}