:root{
  --navy-deep:#060A13; --navy:#0C1322; --paper:#FBFAF6; --paper-dark:#F1EFE8; --white:#FFFFFF;
  --orange:#F89810; --orange-hi:#FFAB33; --blue-logo:#2088C8; --blue-dark-bg:#58B4EA; --blue-light-bg:#0F6094;
  --ok:#3FD08A;
  --on-dark:#FBFAF6; --on-dark-2:#C9D3E3; --on-dark-3:#9AA6BA; --on-dark-4:#6F7B90;
  --on-light:#0C1322; --on-light-2:#4A5263;
  --bd-d-08:rgba(255,255,255,.08); --bd-d-10:rgba(255,255,255,.1); --bd-d-12:rgba(255,255,255,.12); --bd-d-14:rgba(255,255,255,.14);
  --bd-l-10:rgba(12,19,34,.1); --bd-l-12:rgba(12,19,34,.12); --bd-l-14:rgba(12,19,34,.14); --bd-l-16:rgba(12,19,34,.16);
  --bd-l-18:rgba(12,19,34,.18); --bd-l-20:rgba(12,19,34,.2); --bd-l-25:rgba(12,19,34,.25);
  --gut:clamp(20px,5.5vw,80px); --secpad:clamp(72px,9vw,128px);
  --mono:"JetBrains Mono",monospace;
  --sans:"Instrument Sans",sans-serif;
  --disp:"Bricolage Grotesque",sans-serif;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--on-light);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--blue-light-bg);text-decoration:none;transition:color .2s}
a:hover{color:var(--orange)}
::selection{background:var(--orange);color:var(--navy-deep)}
h1,h2,h3{font-family:var(--disp);font-weight:800}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.sq{display:inline-block;flex:0 0 auto}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 28px;border-radius:999px;
  font-family:var(--sans);font-weight:600;font-size:16px;transition:background .2s,transform .2s,border-color .2s,color .2s}
.btn-sm{height:44px}
.btn-p{background:var(--orange);color:var(--navy-deep)}
.btn-p:hover{background:var(--orange-hi);color:var(--navy-deep);transform:translateY(-2px)}
.btn-s{background:transparent;border:1px solid rgba(255,255,255,.28);color:var(--on-dark)}
.btn-s:hover{border-color:var(--blue-dark-bg);color:var(--blue-dark-bg)}

/* ---------- en-tete de section ---------- */
.sec{padding-block:var(--secpad);padding-inline:var(--gut)}
.sechead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:32px 64px;margin-bottom:56px}
.eyebrow{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.08em;margin-bottom:20px;color:var(--blue-light-bg)}
.on-dark .eyebrow{color:var(--blue-dark-bg)}
.sechead h2{font-size:clamp(44px,5.4vw,80px);line-height:.95;letter-spacing:-.045em}
.sechead>p,#m-head-r>p{font-size:clamp(16px,1.2vw,18px);line-height:1.55;max-width:440px;color:var(--on-light-2)}
.on-dark .sechead>p,.on-dark #m-head-r>p{color:var(--on-dark-2)}
.on-dark{background:var(--navy-deep);color:var(--on-dark)}
.on-dark h2,.on-dark h3{color:var(--on-dark)}

/* ---------- en-tete ---------- */
header{position:sticky;top:0;z-index:50;height:80px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-inline:var(--gut);background:rgba(6,10,19,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--bd-d-10)}
header .logo{height:58px;width:auto}
nav.main{display:flex;gap:clamp(18px,2.2vw,34px);white-space:nowrap}
nav.main a{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--on-dark-2)}
nav.main a:hover{color:var(--on-dark)}
.noc{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--on-dark-3)}
.pulse{position:relative;width:7px;height:7px;background:var(--ok)}
.pulse::after{content:"";position:absolute;inset:0;background:inherit;animation:pulse 1.8s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}
#burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.2);border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:4px}
#burger span{display:block;width:16px;height:1.5px;background:var(--on-dark)}
#prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--orange);transform:scaleX(0);transform-origin:left}
#drawer{position:sticky;top:80px;z-index:49;background:var(--navy);border-bottom:1px solid var(--bd-d-10)}
#drawer a{display:block;padding:15px var(--gut);color:var(--on-dark-2);border-bottom:1px solid var(--bd-d-08);font-size:15px}
/* L'horloge NOC est decorative. Avec neuf entrees de navigation, elle poussait
   le bouton "Nous consulter" hors ecran entre 1041 et 1180 px. On sacrifie la
   decoration avant de sacrifier une entree de menu ou de passer prematurement
   au menu burger sur un portable. */
@media(max-width:1240px){ .noc{display:none} }
@media(max-width:1040px){
  nav.main,.noc{display:none}
  #burger{display:flex}
}

/* ---------- hero ---------- */
#top{position:relative;overflow:hidden;background:var(--navy-deep);color:var(--on-dark);cursor:crosshair}
#grid-bg{position:absolute;inset:0;
  background-image:linear-gradient(rgba(88,180,234,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(88,180,234,.07) 1px,transparent 1px);
  background-size:48px 48px}
#telem{position:absolute;top:0;left:0;width:100%;height:700px}
#telem path,#telem line{vector-effect:non-scaling-stroke}
#seuil-lbl{position:absolute;top:478px;right:var(--gut);font-family:var(--mono);font-weight:500;font-size:11px;color:var(--orange);letter-spacing:.06em}
#fade-l{position:absolute;top:0;left:0;bottom:0;width:min(900px,100%);background:linear-gradient(90deg,#060A13 50%,rgba(6,10,19,0))}
#livept{position:absolute;width:8px;height:8px;background:var(--blue-dark-bg)}
#livept::after{content:"";position:absolute;inset:0;background:inherit;animation:pulse 1.8s ease-out infinite}
.hero-in{position:relative;z-index:3;display:flex;flex-wrap:wrap;
  padding:clamp(56px,8vw,112px) var(--gut) clamp(48px,6vw,88px)}
.hero-col{flex:1 1 620px}
#hero-eyebrow{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.08em;color:var(--blue-dark-bg);margin-bottom:32px}
#hero-h1{font-size:clamp(56px,8.4vw,128px);line-height:.92;letter-spacing:-.05em}
#hero-h1 .w{display:inline-block}
#hero-h1 .or{color:var(--orange);position:relative}
#ubar{position:absolute;left:0;right:.08em;bottom:-.06em;height:.07em;background:var(--orange);transform:scaleX(0);transform-origin:left}
#hero-p{margin-top:40px;max-width:600px;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--on-dark-2)}
#hero-btns{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px}
#idstrip{position:relative;z-index:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border-top:1px solid var(--bd-d-12);background:var(--navy-deep)}
#idstrip div{padding:22px 24px;border-right:1px solid var(--bd-d-08)}
#idstrip dt{font-family:var(--mono);font-size:11px;color:var(--on-dark-3);letter-spacing:.1em;margin-bottom:9px}
#idstrip dd{font-family:var(--mono);font-weight:500;font-size:15px;color:var(--on-dark)}
/* reticule */
#xh{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .2s;pointer-events:none}
#xh-v{position:absolute;top:0;bottom:0;width:1px;background:rgba(88,180,234,.5)}
#xh-d{position:absolute;width:10px;height:10px;border:1.5px solid var(--on-dark);background:var(--navy-deep);margin:-5px 0 0 -5px}
#xh-l{position:absolute;background:var(--on-dark);color:var(--navy-deep);font-family:var(--mono);font-weight:500;font-size:11px;padding:6px 9px;white-space:nowrap;transform:translate(-50%,-26px)}
#xh-l.hot{background:var(--orange)}

/* ---------- poles ---------- */
#poles-wrap{display:flex;flex-wrap:wrap;gap:1px;background:var(--bd-l-16);border:1px solid var(--bd-l-16)}
.pole{flex:1 1 250px;min-height:470px;padding:32px 28px;display:flex;flex-direction:column;position:relative;
  background:var(--paper);color:var(--on-light);
  transition:flex-grow .7s cubic-bezier(.2,.8,.2,1),background .45s,color .45s}
.pole.on{flex:2.3 1 250px;background:var(--navy);color:var(--on-dark)}
.pole .mk{position:absolute;top:32px;right:28px;width:10px;height:10px;background:var(--blue-logo);transition:background .45s}
.pole.on .mk{background:var(--orange)}
.pole h3{margin-top:auto;font-size:clamp(28px,2.4vw,36px);letter-spacing:-.035em}
.pole .desc{margin-top:16px;font-size:16px;line-height:1.5;color:var(--on-light-2);transition:color .45s}
.pole.on .desc{color:var(--on-dark-2)}
.pole .skills{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px 18px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--bd-d-14);
  opacity:0;transform:translateY(10px);transition:opacity .5s .15s,transform .5s .15s}
.pole.on .skills{opacity:1;transform:none}
.pole .skills li{list-style:none;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;color:var(--on-dark-2)}
.pole .skills li::before{content:"";width:5px;height:5px;background:var(--blue-logo);flex:0 0 auto}
.pole .more{margin-top:24px;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--orange);opacity:0;transition:opacity .45s}
.pole.on .more{opacity:1}
.pole .more:hover{color:var(--orange-hi)}
@media(max-width:700px){.pole{min-height:0;flex:1 1 100%!important}}

/* ---------- methode ---------- */
#methode{background:var(--navy)}
#m-head-r{display:flex;flex-direction:column;align-items:flex-start;gap:22px;max-width:440px}
#m-bar{height:2px;background:rgba(255,255,255,.1);margin-bottom:0}
#m-bar i{display:block;height:100%;background:var(--blue-dark-bg);width:20%;transition:width .9s cubic-bezier(.2,.8,.2,1)}
#m-box{display:flex;flex-wrap:wrap;border:1px solid var(--bd-d-12);border-top:0}
#m-steps{flex:1 1 440px;padding:8px 32px}
.step{display:grid;grid-template-columns:18px 88px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--bd-d-08);
  cursor:pointer;transition:opacity .4s}
.step:last-child{border-bottom:0}
.step .sq{width:10px;height:10px;margin-top:7px}
.step .hh{font-family:var(--mono);font-size:13px;padding-top:4px}
.step .lb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--on-dark-3);margin-bottom:6px}
.step h3{font-size:24px;letter-spacing:-.02em}
.step .de{font-size:15px;line-height:1.5;color:var(--on-dark-2);margin-top:10px;display:none}
.step.now .de{display:block}
.step.now .sq,.step.now .hh{background:var(--orange)}
.step.now .hh{background:none;color:var(--orange)}
.step.past .sq{background:var(--blue-dark-bg)}
.step.past .hh{color:var(--blue-dark-bg)}
.step.next{opacity:.4}
.step.next .sq{background:none;border:1px solid rgba(255,255,255,.3)}
.step.next .hh,.step.next h3{color:var(--on-dark-3)}
#m-con{flex:1 1 440px;background:var(--navy-deep);border-left:1px solid var(--bd-d-12);font-family:var(--mono);display:flex;flex-direction:column}
#m-con-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--bd-d-08);font-size:12px;color:var(--on-dark-3)}
#m-badge{border:1px solid currentColor;padding:4px 10px;font-size:11px;letter-spacing:.08em;color:var(--orange)}
#m-badge.ok{color:var(--ok)}
#m-count{padding:26px 24px;border-bottom:1px solid var(--bd-d-08)}
#m-count span{display:block;font-size:11px;letter-spacing:.1em;color:var(--on-dark-3);margin-bottom:12px}
#m-count b{font-weight:500;font-size:clamp(36px,4vw,56px);font-variant-numeric:tabular-nums;color:var(--on-dark);letter-spacing:-.02em}
#m-log{padding:20px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
#m-log div{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:12.5px;color:var(--on-dark-2);line-height:1.45}
#m-log div em{font-style:normal;color:var(--on-dark-4)}
#m-log .c-o{color:var(--orange)}
#m-log .c-b{color:var(--blue-dark-bg)}
#m-log .c-g{color:var(--ok)}
#m-cur{width:8px;height:15px;background:var(--blue-dark-bg);animation:blink 1s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}
@media(max-width:700px){#m-con{border-left:0;border-top:1px solid var(--bd-d-12)}}

/* ---------- socle ---------- */
.fam{display:flex;flex-wrap:wrap;gap:12px 0;padding:18px 0;border-bottom:1px solid var(--bd-l-12)}
.fam:first-of-type{border-top:1px solid var(--bd-l-12)}
.fam>b{flex:0 0 200px;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--blue-light-bg);letter-spacing:.06em;padding-top:10px}
.fam ul{flex:1 1 320px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.fam li{height:40px;padding:0 14px;display:flex;align-items:center;gap:9px;border:1px solid var(--bd-l-14);background:var(--white);
  font-family:var(--sans);font-weight:500;font-size:14px;color:var(--on-light)}
.fam li img{height:20px;max-width:60px;width:auto;object-fit:contain}
@media(max-width:700px){.fam>b{flex:1 1 100%;padding-top:0}}
#certs-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px;margin:72px 0 22px}
#certs-head b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--blue-light-bg);letter-spacing:.08em}
#certs-head span{font-size:13px;color:var(--on-light-2)}
#certs{display:flex;flex-wrap:wrap;gap:1px;background:var(--bd-l-14);border:1px solid var(--bd-l-14)}
.cert{flex:1 1 150px;background:var(--white);padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.cert .lg{height:56px;width:120px;display:flex;align-items:center;justify-content:center}
.cert .lg img{max-height:56px;max-width:120px;width:auto;object-fit:contain}
.cert b{font-family:var(--mono);font-weight:600;font-size:12px;color:var(--navy)}
.cert span{font-size:12px;line-height:1.35;color:var(--on-light-2)}

/* ---------- references ---------- */
#references{background:var(--navy-deep)}
#refs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:20px}
.ref{background:var(--navy);border:1px solid var(--bd-d-12);display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.ref:hover{border-color:var(--blue-dark-bg);transform:translateY(-4px)}
.ref .rt{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--bd-d-08);font-family:var(--mono);font-size:12px}
.ref .rt b{font-weight:400;color:var(--blue-dark-bg)}
.ref .rt span{color:var(--on-dark-3)}
.ref .rb{padding:28px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.ref .cl{font-family:var(--mono);font-size:13px;color:var(--on-dark-3)}
.ref h3{font-size:28px;letter-spacing:-.03em;line-height:1.1}
.ref .de{font-size:15px;line-height:1.55;color:var(--on-dark-2)}
.ref .rf{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));border-top:1px solid var(--bd-d-08)}
.ref .rf div{padding:16px clamp(14px,4vw,24px);min-width:0}
.ref .rf b,.ref .rf span{overflow-wrap:anywhere}
.ref .rf b{display:block;font-family:var(--mono);font-weight:500;font-size:20px;color:var(--on-dark);margin-bottom:5px}
.ref .rf span{font-family:var(--mono);font-size:11px;color:var(--on-dark-3);letter-spacing:.06em}

/* ---------- carrieres ---------- */
#carrieres{background:var(--paper-dark);border-top:1px solid var(--bd-l-10)}
#carrieres .sechead a{font-weight:600;font-size:16px}
#jobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:20px}
.job{background:var(--paper);border:1px solid var(--bd-l-18);display:flex;flex-direction:column;transition:border-color .3s,transform .3s}
.job:hover{border-color:var(--orange);transform:translateY(-4px)}
.job .jt{display:flex;justify-content:space-between;gap:12px;padding:16px 24px;border-bottom:1px solid var(--bd-l-10);font-family:var(--mono);font-size:12px}
.job .jt b{font-weight:400;color:var(--blue-light-bg)}
.job .jt span{color:var(--on-light-2)}
.job .jb{padding:28px 24px;display:flex;flex-direction:column;gap:18px;flex:1}
.job h3{font-size:28px;letter-spacing:-.03em;line-height:1.1}
.job .lo{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13px;color:var(--on-light-2)}
.job .lo::before{content:"";width:7px;height:7px;background:var(--blue-logo);flex:0 0 auto}
.job .tags{display:flex;flex-wrap:wrap;gap:7px}
.job .tags span{border:1px solid var(--bd-l-20);padding:5px 9px;font-family:var(--mono);font-size:12px;color:var(--on-light-2)}
.job .jf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;border-top:1px solid var(--bd-l-10)}
.job .jf b{display:block;font-family:var(--mono);font-weight:600;font-size:20px;color:var(--on-light)}
.job .jf small{font-family:var(--mono);font-size:11px;color:var(--on-light-2);letter-spacing:.06em}
#spont{margin-top:32px;font-size:15px;color:var(--on-light-2)}

/* ---------- formation ---------- */
#formation{background:var(--navy-deep)}
#qual{display:flex;flex-wrap:wrap;border:1px solid var(--bd-d-14)}
#qual-l{flex:0 1 440px;min-width:0;max-width:100%;background:var(--white);padding:24px 28px;display:flex;align-items:center;justify-content:center}
#qual-l img{max-width:100%;width:384px;max-height:170px;width:auto;object-fit:contain}
#qual-r{flex:1 1 320px;min-width:0;padding:28px 32px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
#qual-r>b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--on-dark-3);letter-spacing:.08em}
#qpills{display:flex;flex-wrap:wrap;gap:16px}
.qpill{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border:1px solid var(--blue-dark-bg);border-radius:999px;font-size:15px;color:var(--on-dark)}
.qpill::before{content:"";width:7px;height:7px;background:var(--blue-dark-bg);flex:0 0 auto}
#qual-r a{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--blue-dark-bg)}
#qual-r a i{font-style:normal;border:1px solid currentColor;padding:2px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.08em}
#part-lbl{margin:56px 0 20px;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--on-dark-3);letter-spacing:.08em}
#parts{display:flex;flex-wrap:wrap;gap:1px}
.part{flex:1 1 260px;background:var(--paper);padding:22px;display:flex;align-items:center;gap:20px}
.part .lg{flex:0 0 120px;height:72px;display:flex;align-items:center;justify-content:center}
.part .lg img{max-width:120px;max-height:72px;width:auto;object-fit:contain}
.part b{display:block;font-family:var(--sans);font-weight:600;font-size:17px;color:var(--navy);margin-bottom:6px}
.part span{font-family:var(--mono);font-size:12px;color:var(--on-light-2)}

/* ---------- qualifier ---------- */
#qualifier{background:var(--paper);border-top:1px solid var(--bd-l-10)}
#qbox{display:flex;flex-wrap:wrap;border:1px solid var(--bd-l-18)}
#qleft{flex:1 1 520px}
.qrow{padding:34px 40px;border-bottom:1px solid var(--bd-l-12)}
.qrow>b{display:block;font-family:var(--mono);font-weight:500;font-size:12px;color:var(--on-light-2);letter-spacing:.1em;margin-bottom:18px}
.qopts{display:flex;flex-wrap:wrap;gap:10px}
.qp{height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--bd-l-25);background:transparent;
  font-family:var(--sans);font-weight:500;font-size:15px;color:var(--on-light);transition:background .2s,border-color .2s,color .2s}
.qp:hover{border-color:var(--blue-light-bg)}
.qp[aria-pressed="true"]{background:var(--blue-light-bg);border-color:var(--blue-light-bg);color:var(--paper)}
#qnote{padding:22px 40px;font-family:var(--mono);font-size:12px;color:var(--on-light-2)}
#qright{flex:1 1 420px;background:var(--navy-deep);color:var(--on-dark);display:flex;flex-direction:column}
#qr-top{display:flex;justify-content:space-between;gap:12px;padding:16px 28px;border-bottom:1px solid var(--bd-d-08);font-family:var(--mono);font-size:12px}
#qr-top span{color:var(--on-dark-3);letter-spacing:.08em}
#qr-top b{font-weight:400;color:var(--blue-dark-bg)}
#qr-body{padding:28px 28px 0}
#qr-title{font-size:36px;letter-spacing:-.035em;line-height:1.05;margin-bottom:8px}
.qr-line{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--bd-d-08)}
.qr-line b{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--on-dark-3);letter-spacing:.08em;padding-top:3px}
.qr-line span{font-size:15px;line-height:1.5;color:#E4E9F1}
#qr-foot{padding:28px}
.slidein{animation:slidein .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes slidein{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- modale ---------- */
#ov{position:fixed;inset:0;z-index:100;background:rgba(6,10,19,.74);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px}
#ov.on{display:flex}
#mdl{width:100%;max-width:680px;max-height:92vh;overflow:auto;background:var(--paper);border:1px solid var(--bd-l-18);color:var(--on-light)}
#mdl-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px 16px 28px;background:var(--navy-deep);color:var(--on-dark)}
#mdl-top b{font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--on-dark-3)}
#mdl-ref{color:var(--blue-dark-bg)}
#mdl-x{width:40px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--on-dark)}
#mdl-x:hover{border-color:var(--orange);color:var(--orange)}
#frm{padding:28px;display:flex;flex-direction:column;gap:24px}
#frm h3{font-size:32px;letter-spacing:-.035em;line-height:1.05}
#frm-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
#frm-tags span{border:1px solid var(--bd-l-20);padding:5px 10px;font-family:var(--mono);font-size:12px;color:var(--on-light-2)}
.frow{display:flex;flex-wrap:wrap;gap:16px}
.fld{flex:1 1 240px;display:flex;flex-direction:column;gap:8px}
.fld.w{flex:1 1 100%}
.fld label{font-family:var(--mono);font-size:11px;color:var(--on-light-2);letter-spacing:.06em}
.fld input,.fld textarea{height:48px;padding:0 14px;border:1px solid var(--bd-l-25);background:var(--white);border-radius:0;
  font-family:var(--sans);font-size:15px;color:var(--on-light)}
.fld textarea{height:auto;padding:13px 14px;resize:vertical;line-height:1.5}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--blue-light-bg)}
#optin{display:flex;gap:12px;font-size:14px;line-height:1.5;color:var(--on-light-2)}
#optin input{width:18px;height:18px;flex:0 0 auto;margin-top:2px;accent-color:var(--blue-light-bg)}
#frm-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding-top:20px;border-top:1px solid var(--bd-l-12);
  font-family:var(--mono);font-size:12px;color:var(--on-light-2)}
#send{height:52px}
#done{display:none;padding:40px 28px;flex-direction:column;align-items:flex-start;gap:18px}
#done.on{display:flex}
#done .ck{width:48px;height:48px;background:var(--blue-light-bg);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:22px}
#done h3{font-size:36px;letter-spacing:-.035em}
#done p{font-size:15px;line-height:1.6;color:var(--on-light-2);max-width:480px}
#done button{height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--bd-l-25);font-weight:600}
#done button:hover{border-color:var(--orange);color:var(--orange)}

/* ---------- footer ---------- */
footer{background:var(--navy-deep);color:var(--on-dark);padding:72px var(--gut) 32px}
#fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;padding-bottom:40px;border-bottom:1px solid var(--bd-d-08)}
#fgrid img{height:92px;width:auto}
#fgrid b{display:block;font-family:var(--mono);font-weight:400;font-size:11px;color:var(--on-dark-3);letter-spacing:.1em;margin-bottom:14px}
#fgrid p,#fgrid a{font-size:15px;line-height:1.7;color:var(--on-dark-2);display:block}
#fgrid a{color:var(--blue-dark-bg)}
#fgrid a:hover{color:var(--orange)}
#legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding-top:28px;
  font-family:var(--mono);font-size:12px;color:var(--on-dark-3);line-height:1.6}
#legal a{color:var(--on-dark-3)}
#legal a:hover{color:var(--orange)}
#legal .lk{display:flex;gap:20px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .95s cubic-bezier(.2,.8,.2,1),transform .95s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  #ubar{transform:scaleX(1)}
}

/* ---------- pages internes ---------- */
.page{background:var(--paper);color:var(--on-light)}
.fil{padding:28px var(--gut) 0;font-family:var(--mono);font-size:12px;color:var(--on-light-2);letter-spacing:.04em}
.fil a{color:var(--blue-light-bg)}
.hero2{padding:clamp(40px,5vw,72px) var(--gut) clamp(48px,6vw,80px);border-bottom:1px solid var(--bd-l-12)}
.hero2 h1{font-size:clamp(40px,5vw,72px);line-height:1.02;letter-spacing:-.045em;max-width:16ch}
.hero2 .chapo{margin-top:28px;max-width:680px;font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:var(--on-light-2)}
.hero2 .cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px}
.btn-o{background:transparent;border:1px solid var(--bd-l-25);color:var(--on-light)}
.btn-o:hover{border-color:var(--blue-light-bg);color:var(--blue-light-bg)}
.corps{padding:clamp(56px,7vw,96px) var(--gut);display:flex;flex-wrap:wrap;gap:56px 72px;align-items:flex-start}
.corps main{flex:1 1 620px;max-width:820px;min-width:0}
.corps aside{flex:1 1 260px;position:sticky;top:104px}
.corps h2{font-size:clamp(28px,3vw,40px);letter-spacing:-.035em;line-height:1.1;margin:56px 0 20px}
.corps h2:first-child{margin-top:0}
.corps h3{font-family:var(--sans);font-weight:600;font-size:19px;margin:32px 0 10px}
.corps p{font-size:17px;line-height:1.7;color:var(--on-light-2);margin-bottom:18px}
.corps ul{margin:0 0 20px 0;padding:0;list-style:none}
.corps ul li{position:relative;padding-left:20px;font-size:17px;line-height:1.7;color:var(--on-light-2);margin-bottom:10px}
.corps ul li::before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--blue-logo)}
.corps strong{color:var(--on-light);font-weight:600}
.encart{border:1px solid var(--bd-l-18);padding:28px;margin:40px 0}
.encart b{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--blue-light-bg);margin-bottom:14px}
.encart p:last-child{margin-bottom:0}
aside .bloc{border:1px solid var(--bd-l-18);padding:24px;margin-bottom:20px}
aside .bloc b{display:block;font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--blue-light-bg);margin-bottom:16px}
aside .bloc a{display:block;font-size:15px;line-height:1.5;padding:7px 0;color:var(--on-light)}
aside .bloc a:hover{color:var(--orange)}
aside .bloc p{font-size:15px;line-height:1.6;color:var(--on-light-2);margin-bottom:12px}
.faq{border-top:1px solid var(--bd-l-12);margin-top:56px;padding-top:8px}
.faq details{border-bottom:1px solid var(--bd-l-12);padding:20px 0}
.faq summary{cursor:pointer;font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.4;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--blue-light-bg);font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:14px 0 0}
.bandeau{background:var(--navy-deep);color:var(--on-dark);padding:clamp(56px,7vw,88px) var(--gut);text-align:left}
.bandeau h2{font-size:clamp(32px,3.6vw,52px);letter-spacing:-.04em;line-height:1.05;max-width:18ch;color:var(--on-dark)}
.bandeau p{margin-top:20px;max-width:560px;font-size:17px;line-height:1.6;color:var(--on-dark-2)}
.bandeau .cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0;background:var(--paper);border-top:1px solid var(--bd-l-16);border-left:1px solid var(--bd-l-16);margin:32px 0}
.grid2 div{background:var(--paper);padding:26px 24px;border-right:1px solid var(--bd-l-16);border-bottom:1px solid var(--bd-l-16)}
.grid2 b{display:block;font-family:var(--sans);font-weight:600;font-size:17px;margin-bottom:8px}
.grid2 span{font-size:15px;line-height:1.6;color:var(--on-light-2)}
@media(max-width:900px){.corps aside{position:static}}

/* ---------- formulaire de candidature (page carrieres) ---------- */
.fld select{height:48px;padding:0 14px;border:1px solid var(--bd-l-25);background:var(--white);border-radius:0;
  font:inherit;font-size:15px;color:var(--on-light);appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23444' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;padding-right:38px}
.fld select:focus{outline:0;border-color:var(--blue-light-bg)}
.fld input[type=file]{height:auto;padding:12px 14px;font-size:14px;cursor:pointer}
.fld input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid var(--bd-l-25);
  background:var(--paper);font:inherit;font-size:13px;cursor:pointer}
.fld .aide{font-size:12px;line-height:1.5;color:var(--on-light-2)}
.choix{display:flex;flex-wrap:wrap;gap:8px}
.choix label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--bd-l-25);padding:9px 14px;
  font-size:14px;cursor:pointer;background:var(--white);color:var(--on-light)}
.choix label:has(input:checked){border-color:var(--blue-light-bg);box-shadow:inset 0 0 0 1px var(--blue-light-bg)}
.choix input{width:16px;height:16px;accent-color:var(--blue-light-bg)}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#frm-err{border-left:3px solid #c0392b;background:#fdf0ee;padding:12px 14px;font-size:14px;line-height:1.5;color:#7d2418}
.job .jf .btn{cursor:pointer}

/* ---------- offre de proximite (accueil) ---------- */
#tpe-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;
  background:var(--bd-d-10);border:1px solid var(--bd-d-10)}
.tpecard{background:var(--navy);padding:30px 28px;display:flex;flex-direction:column}
.tpecard b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--blue-dark-bg)}
.tpecard .prix{margin-top:18px;font-family:var(--disp);font-weight:800;font-size:clamp(36px,3.4vw,48px);
  line-height:1;letter-spacing:-.04em;color:var(--on-dark)}
.tpecard .prix span{margin-left:8px;font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:0;color:var(--on-dark-2)}
.tpecard .sans{margin-top:10px;font-size:14px;color:var(--on-dark-3)}
.tpecard p{margin-top:16px;font-size:15px;line-height:1.55;color:var(--on-dark-2)}
#tpe-note{margin-top:28px;font-size:15px;line-height:1.6;color:var(--on-dark-2);max-width:720px}
#tpe-cta{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- schema d'exploitation (page infogerance TPE) ---------- */
.schema{margin:36px 0;border:1px solid var(--bd-l-16);background:var(--white);padding:24px 20px}
.schema svg{width:100%;height:auto;display:block}
.schema figcaption{margin-top:16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--on-light-2)}
.schema .sch-etroit{display:none}
@media(max-width:760px){
  .schema .sch-large{display:none}
  .schema .sch-etroit{display:block}
}

/* ---------- ressources ---------- */
#arts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px;margin-top:8px}
.art{border:1px solid var(--bd-l-16);background:var(--white);padding:26px 24px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .3s,transform .3s}
.art:hover{border-color:var(--orange);transform:translateY(-3px)}
.art-d{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--on-light-2)}
.art h3{font-size:24px;line-height:1.2;letter-spacing:-.02em}
.art h3 a{color:var(--on-light)}
.art h3 a:hover{color:var(--blue-light-bg)}
.art-c{font-size:15px;line-height:1.6;color:var(--on-light-2)}
.art-l{margin-top:auto;font-weight:600;font-size:15px;color:var(--orange)}
.maj-note{margin-top:28px;padding-top:16px;border-top:1px solid var(--bd-l-12);font-size:14px;color:var(--on-light-2)}

/* ---------------------------------------------- signature et dates d'article */
.sign{margin:14px 0 0;font-size:13px;color:var(--on-light-2)}
.sign b{font-weight:600;color:var(--on-light)}

/* --------------------------------------------------- horaires sous le hero */
.horaires{margin:14px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--on-light-2)}

/* ------------------------------------------------- formulaire court de rappel */
/* Encadre plein pour que le formulaire ne se lise pas comme un paragraphe de
   plus : sur cette page c'est l'action principale, pas un complement. */
.rappel{position:relative;margin:44px 0 0;padding:30px 28px;background:var(--paper);
  border:1px solid var(--bd-l-18)}
.rappel h2{margin-top:0}
.rappel .fldr{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:16px;margin:22px 0 18px}
.rappel .fld{display:flex;flex-direction:column;gap:7px}
/* Chromium dimensionne un <select> sur son option la plus longue : sans
   width:100% + min-width:0 sur la cellule, "Cabinet medical, dentaire ou
   veterinaire" imposait une largeur plancher de 350 px a toute la colonne de
   contenu, et la page debordait de 10 px a 360 px de large. */
.rappel .fld{min-width:0}
.rappel select,.rappel input{width:100%;max-width:100%;box-sizing:border-box}
.rappel select{height:48px;padding:0 12px;border:1px solid var(--bd-l-25);background:var(--white);
  border-radius:0;font-family:var(--sans);font-size:15px;color:var(--on-light);
  text-overflow:ellipsis}
.rappel select:focus{outline:0;border-color:var(--blue-light-bg)}
.rappel button[type=submit]{cursor:pointer}
.rappel .rgpd{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:var(--on-light-2)}
/* Champ piege : invisible et hors du flux de tabulation, mais present dans le
   DOM. Pas de display:none, que certains robots detectent justement. */
.rappel .piege{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.rappel .rerr{display:none;margin:0 0 14px;padding:10px 14px;font-size:14px;
  background:#FDECEC;border-left:3px solid #C0392B;color:#7B241C}
.rappel .rerr.on{display:block}
.rok{display:none}
.rok.on{display:block}
.rok p{font-size:15px;line-height:1.65}

/* --------------------------------- barre d'action fixe, mobile uniquement */
#barmob{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;
  border-top:1px solid var(--bd-d-12);box-shadow:0 -6px 24px rgba(6,10,19,.18)}
#barmob a{flex:1 1 0;display:flex;align-items:center;justify-content:center;height:58px;
  font-family:var(--sans);font-weight:600;font-size:16px;text-decoration:none}
#barmob .bm-a{background:var(--orange);color:var(--navy-deep)}
#barmob .bm-b{background:var(--navy);color:var(--on-dark)}
/* Reserve la hauteur de la barre : sans ca elle masque la fin du contenu,
   typiquement le dernier champ du formulaire ou le pied de page. */
body.avec-barre{padding-bottom:58px}
@media (min-width:861px){#barmob{display:none}body.avec-barre{padding-bottom:0}}

/* ------------------------------------- tableau des communes (page geo) */
/* scroll horizontal plutot qu'un debordement de page : un tableau a quatre
   colonnes ne tient pas sous 400 px, et ecraser les colonnes le rend illisible. */
/* Le defilement doit porter sur un conteneur, pas sur la table elle-meme :
   un <table display:block> garde la largeur minimale de son contenu, width:100%
   ne la contraint pas, et c'est toute la colonne de contenu qui debordait
   — 200 px a 320 px de large. min-width:0 autorise l'element flex a se reduire. */
.tscroll{min-width:0;max-width:100%;overflow-x:auto;margin:24px 0}
.tcom{width:max-content;min-width:100%;border-collapse:collapse;font-size:15px}
.tcom th,.tcom td{padding:9px 16px 9px 0;text-align:left;border-bottom:1px solid var(--bd-l-16);white-space:nowrap}
.tcom th{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-light-2)}
.tcom td{color:var(--on-light-2)}
.tcom td:first-child,.tcom td:nth-child(3){color:var(--on-light);font-weight:500}

/* ------------------------- liens metier/territoire de la section Proximite */
#tpe-metiers{max-width:820px;margin:26px auto 0;font-size:15px;line-height:1.75;
  color:var(--on-dark-2);text-align:center}
#tpe-metiers a{color:var(--on-dark);border-bottom:1px solid rgba(255,255,255,.28)}
#tpe-metiers a:hover{color:var(--orange);border-bottom-color:var(--orange)}

/* -------------------------------- listes numerotees des articles */
/* .corps ul est en list-style:none avec une puce carree dessinee ; une liste
   ordonnee a besoin de son propre traitement, sinon les numeros disparaissent. */
.corps ol.num{margin:0 0 20px;padding:0;list-style:none;counter-reset:n}
.corps ol.num li{position:relative;padding-left:38px;font-size:17px;line-height:1.7;
  color:var(--on-light-2);margin-bottom:14px;counter-increment:n}
.corps ol.num li::before{content:counter(n);position:absolute;left:0;top:2px;
  width:25px;height:25px;display:flex;align-items:center;justify-content:center;
  background:var(--navy);color:var(--on-dark);font-family:var(--mono);
  font-size:12px;font-weight:600}