/* 🔴 L'attribut `hidden` ne vaut `display:none` que dans la feuille du NAVIGATEUR,
     la moins prioritaire de toutes. La moindre regle d'auteur qui pose un `display`
     sur le meme element l'ecrase — en silence, sans erreur — et l'element reste
     visible alors que le balisage dit le contraire.

     Constate le 26/08 sur #ap-erreur, le conteneur des messages d'echec du
     formulaire de candidature : il porte `hidden`, mais aussi `class="field full"`,
     et `.field{display:flex}` (plus bas) gagnait. Resultat visible par le candidat :
     une boite vide a bordure jaune affichee EN PERMANENCE sous le widget anti-robot.
     Et un `z.hidden = true/false` dans candidature.js qui ne changeait rien du tout.

     Ce garde-fou vaut pour toute la page. Ne pas le retirer, et ne pas compter sur
     `hidden` seul dans un projet qui met des classes partout. */
  [hidden]{display:none !important}

  /* ---------- Tokens ---------- */
  :root{
    --bg:#0f1011;
    --bg-2:#0a0a0b;
    --bg-3:#161719;
    --line:#26272a;
    --text:#ffffff;
    --muted:#a7a8ab;
    --yellow:#FFF000;
    --yellow-ink:#0a0a0b;
    /* tweakable */
    --tw-cell:96px;
  }
  /* Day/light mood */
  :root[data-mood="day"]{
    --bg:#f4efe6;
    --bg-2:#ece5d6;
    --bg-3:#e2dac8;
    --line:#cfc6b1;
    --text:#0f1011;
    --muted:#5c5a52;
  }
  :root[data-mood="day"] .nav{background:rgba(244,239,230,0.85)}
  :root[data-mood="day"] .nav-links a{color:#1a1a1c}
  :root[data-mood="day"] .btn{color:var(--text)}
  :root[data-mood="day"] .btn:hover{background:#0f1011;color:#fff}
  :root[data-mood="day"] .lede{color:#3a3833}
  :root[data-mood="day"] .svc p, :root[data-mood="day"] .member .bio{color:#3a3833}
  :root[data-mood="day"] .meta-strip{color:#3a3833}
  :root[data-mood="day"] .footer{background:#e8e1d0;color:#1a1a1c}
  :root[data-mood="day"] .foot-row a, :root[data-mood="day"] .foot-row li{color:#3a3833}
  :root[data-mood="day"] .cta{background:#0f1011;color:#fff}
  :root[data-mood="day"] .modal-card{background:#1a1a1c;color:#fff}
  :root[data-mood="day"] .hero-grid{background-image:linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px)}
  :root[data-mood="day"] .member .avatar{background:#1c1d1f}
  :root[data-mood="day"] .member .avatar .contact-overlay .email{color:#fff}
  :root[data-mood="day"] .stats{color:#0a0a0b}
  /* Accent variants */
  :root[data-accent="electric"]{--yellow:#3DB7FF;--yellow-ink:#001120}
  :root[data-accent="safety"]{--yellow:#FF6A14;--yellow-ink:#1a0700}
  :root[data-accent="mono"]{--yellow:#FFFFFF;--yellow-ink:#0a0a0b}
  :root[data-mood="day"][data-accent="mono"]{--yellow:#0f1011;--yellow-ink:#f4efe6}
  /* ---------- Hero choice buttons ---------- */
  .hero-choice{display:flex;flex-direction:column;gap:24px;max-width:520px;margin-top:clamp(22px,3.4vh,38px);margin-bottom:36px}
  .hc-btn{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;text-align:left;padding:16px 22px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--text);font:inherit;cursor:pointer;backdrop-filter:blur(6px);transition:transform .22s,background .22s,border-color .22s}
  :root[data-mood="day"] .hc-btn{border-color:rgba(10,10,11,.16);background:rgba(255,255,255,.55);color:#0a0a0b}
  .hc-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
  .hc-txt strong{font-size:clamp(16px,1.6vw,19px);font-weight:600;letter-spacing:-.01em}
  .hc-txt small{font-size:13px;letter-spacing:.03em;color:var(--muted)}
  .hc-btn svg{width:24px;height:12px;flex:none;transition:transform .22s}
  .hc-btn:hover{transform:translateY(-2px)}
  .hc-btn:hover svg{transform:translateX(5px)}
  .hc-cand{background:var(--yellow);color:var(--yellow-ink);border-color:transparent}
  .hc-cand .hc-txt small{color:var(--yellow-ink)}
  .hc-cand:hover{filter:brightness(1.07);box-shadow:0 0 3px var(--yellow),0 0 8px var(--yellow),0 0 18px 3px rgba(255,240,0,.35)}
  .hc-cli:hover{background:rgba(0,0,0,.35);border-color:var(--yellow);color:var(--yellow);box-shadow:inset 0 0 16px 2px rgba(255,240,0,.28),0 0 4px var(--yellow),0 0 10px var(--yellow),0 0 26px 4px rgba(255,240,0,.35)}
  .hc-cli, .hc-cli *, .hc-cli .hc-txt small{color:var(--yellow) !important}
  :root[data-mood="day"] .hc-cli, :root[data-mood="day"] .hc-cli *, :root[data-mood="day"] .hc-cli .hc-txt small{color:#0a0a0b !important}
  .hc-cli{position:relative;overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .hc-cli > *{position:relative;z-index:1}
  :root[data-mood="day"] .hc-cli:hover{background:#fff;border-color:var(--yellow)}
  @media (max-width:760px){.hero-choice{max-width:none}}
  /* ---------- Localisation ---------- */
  .loca{position:relative;padding:0 0 56px}
  .loca-frame{position:relative;margin-top:34px;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.45)}
  :root[data-mood="day"] .loca-frame{border-color:rgba(10,10,11,.14);box-shadow:0 24px 60px rgba(0,0,0,.18)}
  .loca-map{height:clamp(320px,52vh,520px);cursor:pointer;background:var(--bg-2)}
  .loca-map:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
  .loca-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;background:rgba(10,10,11,0.55);border-top:1px solid rgba(255,255,255,.1)}
  :root[data-mood="day"] .loca-bar{background:#fff;border-top-color:rgba(10,10,11,.1)}
  .loca-bar .lb-adr{display:flex;flex-direction:column;gap:4px}
  .loca-bar .lb-adr strong{font-size:17px;font-weight:600;letter-spacing:-.01em}
  .loca-bar .lb-adr span{font-size:13px;color:var(--muted)}
  .lc-btn{display:inline-flex;white-space:nowrap;align-items:center;gap:12px;background:var(--yellow);color:var(--yellow-ink);border:0;border-radius:999px;padding:14px 24px;font:600 15px/1 inherit;cursor:pointer;transition:transform .2s,filter .2s}
  .lc-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}
  .lc-btn svg{width:22px;height:11px}
  .lc-note{display:block;margin-top:6px;font-size:11.5px;letter-spacing:.04em;color:var(--muted)}
  .loca-pin{position:relative;display:block;width:22px;height:22px}
  .loca-pin i{position:absolute;inset:0;border-radius:50%;background:var(--yellow);border:2px solid #0a0a0b}
  .loca-pin b{position:absolute;inset:0;border-radius:50%;border:2px solid var(--yellow);animation:locaPulse 2s ease-out infinite}
  .loca-pin em{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);white-space:nowrap;font-style:normal;font:700 11px/1 inherit;letter-spacing:.16em;text-transform:uppercase;padding:7px 11px;border-radius:6px;background:var(--yellow);color:var(--yellow-ink);box-shadow:0 6px 18px rgba(0,0,0,.4);animation:locaBlink 1.15s steps(1,end) infinite}
  .loca-pin em::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--yellow)}
  @keyframes locaBlink{0%,55%{opacity:1}56%,100%{opacity:.12}}
  @keyframes locaPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
  .leaflet-container{background:var(--bg-2)!important;font:inherit}
  .leaflet-control-attribution{font-size:11.5px!important;white-space:nowrap;max-width:none!important}
  @media (max-width:760px){.loca{padding:90px 0 100px}.loca-bar{padding:18px}.lc-btn{width:100%;justify-content:center}}
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--text);overflow-x:hidden}
  body{position:relative;}
  body{
    font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", system-ui, sans-serif;
    font-weight:500;
    line-height:1.35;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
  img,svg{display:block}

  .wrap{max-width:1320px;margin:0 auto;padding:0 32px}
  @media (max-width:640px){ .wrap{padding:0 20px} }

  /* ---------- Nav ---------- */
  .nav{
    position:sticky;top:0;z-index:40;
    background:var(--bg-2);
    border-bottom:1px solid var(--line);
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .brand{display:flex;flex-direction:column;gap:10px;line-height:1}
  .brand img{height:139px;width:218px;display:block;object-fit:contain}
  .brand .sub{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:0.22em;text-transform:uppercase}
  .nav-row{height:132px}
  footer .brand img{height:180px;width:180px}

  .nav-links{display:flex;align-items:center;gap:36px}
  .nav-links a{font-size:13px;letter-spacing:0.16em;text-transform:uppercase;font-weight:600;color:#dcdcdf}
  .nav-links a:hover{color:var(--yellow)}
  .nav-links a.nav-cta{
    background:var(--yellow);color:#000;
    padding:14px 22px;font-weight:900;font-size:13px;letter-spacing:0.18em;text-transform:uppercase;
    border:2px solid var(--yellow);
    transition:transform .15s ease, background .15s ease;
  }
  .nav-links a.nav-cta:hover{background:#fff;border-color:#fff;color:#000}
  @media (min-width:761px) and (max-width:1060px){
    header img[src="assets/logo-jaune.png"]{width:320px !important;height:auto !important}
  }
  @media (max-width:900px){
    .nav-links a:not(.nav-cta){display:none}
    .nav-row{flex-wrap:wrap;height:auto;padding:14px 0 22px;row-gap:14px;justify-content:center;text-align:center}
    .nav-links{display:flex;flex-wrap:wrap;gap:18px;width:100%;order:2;justify-content:center}
    .nav-links a{display:inline-flex !important;font-size:12px}
    .brand{width:100%;align-items:center;order:1}
  }
  @media (max-width:1180px){
    .brand img{height:96px;width:150px}
    .nav-row{height:92px}
    .nav-links{gap:20px}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:760px;
    overflow:hidden;
    background:transparent;
  }
  .hero-grid{display:none}

  .hero-inner{position:relative;z-index:2;padding-top:120px;padding-bottom:140px;}
  .hero-inner.has-offers{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
    gap:80px;
    align-items:center;
  }
  .hero-inner.has-offers .headline{ max-width:560px }
  @media (max-width:1100px){
    .hero-inner.has-offers{ grid-template-columns: 1fr; gap:64px }
  }

  /* ---------- Live offers card (hero right side) ---------- */
  .live-offers{
    position:relative;
    background:rgba(20,20,22,0.78);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 24px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
    padding:24px 24px 16px;
    overflow:hidden;
  }
  .live-offers::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(120% 80% at 0% 0%, rgba(255,240,0,0.06), transparent 50%);
    pointer-events:none;
  }

  .live-offers-hd{
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;
    padding-bottom:18px;
    margin-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,0.08);
    position:relative;
  }
  .live-offers-hd .lbl{
    display:inline-flex;align-items:center;gap:10px;
    font-size:13px;letter-spacing:0.2em;text-transform:uppercase;color:#fff;font-weight:700;
  }
  .live-offers-hd .lbl .live-dot{
    width:8px;height:8px;border-radius:50%;background:#22d36a;
    box-shadow:0 0 0 0 rgba(34,211,106,0.6);animation:pulse-dot 2s infinite;
  }
  @keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgba(34,211,106,0.5)}70%{box-shadow:0 0 0 10px rgba(34,211,106,0)}100%{box-shadow:0 0 0 0 rgba(34,211,106,0)}}
  .live-offers-hd .count{
    font-family:'Bebas Neue',Impact,sans-serif;
    font-size:32px;line-height:1;color:var(--yellow);letter-spacing:0.04em;
  }
  .live-offers-hd .count small{
    display:block;font-family:inherit;font-size:9px;letter-spacing:0.28em;color:var(--muted);font-weight:400;margin-top:2px;
  }
  .live-list{ position:relative; }
  .live-item{
    display:grid;
    grid-template-columns:44px minmax(0,1fr) auto;
    gap:14px;align-items:center;
    padding:14px 4px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    cursor:pointer;
    transition:background .15s ease, padding .15s ease;
  }
  .live-item:last-child{border-bottom:none}
  .live-item:hover{ background:rgba(255,240,0,0.05); padding-left:8px; padding-right:8px }
  .live-item .ic-wrap{
    display:none;
    width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    color:#fff;
  }
  .live-item:hover .ic-wrap{ background:var(--yellow); color:var(--yellow-ink); border-color:var(--yellow) }
  .live-item .ic-wrap svg{width:22px;height:22px}
  .live-item .info .ttl{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:14px;font-weight:600;color:#fff;line-height:1.3;
    margin-bottom:4px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .live-item .info .meta{
    font-size:12px;letter-spacing:0.06em;color:var(--muted);
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  }
  .live-item .info .meta .sep-dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}
  .live-item .age{
    white-space:nowrap;flex:none;
    font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);
    text-align:right;
    white-space:nowrap;
  }
  .live-item.fresh .age{ color:#22d36a }
  .badge-urgent{display:inline-block;background:var(--yellow);color:#0a0a0b;font-size:9.5px;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;padding:2px 6px;border-radius:3px;vertical-align:middle;margin-left:6px}
  .live-offers-ft{
    display:flex;align-items:center;justify-content:space-between;
    padding-top:14px;margin-top:8px;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .live-offers-ft .all-link{
    font-size:12px;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;color:#fff;
    display:inline-flex;align-items:center;gap:10px;
    transition:color .15s ease;
  }
  .live-offers-ft .all-link:hover{ color:var(--yellow) }
  .live-offers-ft .all-link .ar{width:16px;height:8px}
  .live-offers-ft .ttl-sm{font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}
  /* ---- Modal "toutes les offres" ---- */
  .modal.modal-offers{max-width:1000px;display:flex;flex-direction:column;max-height:calc(100vh - 120px)}
  .om-hd{
    display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
    padding:34px 34px 26px;border-bottom:1px solid var(--line);
  }
  .modal-offers .om-hd{align-items:flex-start;gap:10px;flex-direction:column;padding-right:90px}
  .modal-offers .om-hd-note{margin:0;max-width:none;letter-spacing:0.14em;font-size:11.5px;text-align:left;line-height:1.4;color:var(--muted);white-space:nowrap;order:2}
  .modal-offers .om-hd-left{flex:0 1 auto;order:1}
  .om-hd-left{display:flex;flex-direction:column;gap:10px}
  .om-eyebrow{
    display:inline-flex;align-items:center;gap:10px;
    font-size:11.5px;letter-spacing:0.26em;text-transform:uppercase;font-weight:800;color:var(--muted);
  }
  .om-hd h3{font-size:clamp(28px,3.4vw,44px);font-weight:900;letter-spacing:-0.035em;line-height:1}
  .om-hd h3 span{color:var(--yellow)}
  .om-hd p{font-size:13px;letter-spacing:0.04em;color:var(--muted)}
  .om-hd-note{font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);font-weight:700;max-width:190px;text-align:right;line-height:1.7}
  @media (max-width:700px){ .om-hd-note{text-align:left;max-width:none} }
  .om-list{overflow-y:auto;flex:1;min-height:0}
  .om-item{
    display:grid;grid-template-columns:48px 1fr auto auto;align-items:center;gap:18px;
    padding:16px 34px;border-bottom:1px solid var(--line);
    text-decoration:none;color:inherit;
    transition:background .18s ease,padding .18s ease;
  }
  .om-item:hover{background:rgba(255,240,0,0.06)}
  .om-ic{
    width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);color:var(--yellow);background:rgba(255,240,0,0.06);
    transition:background .2s ease,border-color .2s ease;
  }
  .om-item:hover .om-ic{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
  .om-ic svg{width:24px;height:24px;stroke-width:1.7}
  .om-ttl{font-size:17px;font-weight:800;letter-spacing:-0.015em;margin-bottom:5px}
  .om-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;letter-spacing:0.05em;color:var(--muted)}
  .om-meta .sep-dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}
  .om-age{font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);font-weight:700;white-space:nowrap;min-width:78px;text-align:right}
  .om-item.fresh .om-age{color:#22d36a}
  .om-go{
    font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:800;color:transparent;
    display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
    transform:translateX(-6px);transition:color .2s ease,transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .om-item:hover .om-go{color:var(--yellow);transform:translateX(0)}
  .om-go svg{width:14px;height:8px}
  @media (max-width:820px){
    .om-item{grid-template-columns:44px 1fr auto;gap:14px;padding:14px 22px}
    .om-go{display:none}
    .om-hd{padding:26px 22px 20px}
  }
  .om-ft{
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
    padding:22px 34px;border-top:1px solid var(--line);background:rgba(10,10,11,0.4);
  }
  .om-ft span{font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted);font-weight:700}
  @media (max-width:820px){ .om-ft{padding:18px 22px} }
  .om-ft .btn.primary:hover{background:#0a0a0b;color:var(--yellow);border-color:var(--yellow);box-shadow:0 0 22px rgba(255,240,0,0.35)}
  .om-ft .btn.primary:hover svg{stroke:var(--yellow)}

  .live-item.entering{
    animation:live-enter .55s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes live-enter{
    from{opacity:0;transform:translateY(-8px);background:rgba(255,240,0,0.18)}
    to{opacity:1;transform:none;background:transparent}
  }
  .eyebrow{
    display:inline-flex;align-items:center;gap:12px;
    font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:var(--muted);
    padding:8px 14px;border:1px solid var(--line);background:rgba(255,255,255,0.02);
    margin-bottom:32px;
  }
  .eyebrow .dot{width:8px;height:8px;background:var(--yellow);}
  .headline{margin-bottom:28px;max-width:760px}
  .headline img{width:100%;height:auto;display:block}
  .headline .sr{position:absolute;left:-9999px}

  .lede{
    max-width:560px;color:#cfd0d3;font-size:18px;line-height:1.5;
    margin-bottom:40px;
  }
  .lede strong{color:#fff;font-weight:700}

  .btns{display:flex;flex-wrap:wrap;gap:14px}
  .btn{
    display:inline-flex;align-items:center;gap:14px;
    padding:18px 24px;
    font-size:13px;letter-spacing:0.2em;text-transform:uppercase;font-weight:800;
    border:2px solid #fff;color:#fff;background:transparent;
    transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .btn:hover{background:#fff;color:var(--bg)}
  .btn .arrow{width:18px;height:10px}
  .btn.primary{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
  .btn.primary:hover{background:#fff;border-color:#fff}
  .btn.primary.hc-cand:hover{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink);filter:brightness(1.07)}

  /* Decorative meta strip */
  .meta-strip{
    position:absolute;left:0;right:0;bottom:0;z-index:3;
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:14px 32px;
    border-top:1px solid var(--line);
    font-size:12px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);
    background:rgba(10,10,11,0.5);
  }
  .meta-strip span{display:inline-flex;align-items:center;gap:10px}
  .meta-strip .pulse{width:8px;height:8px;background:var(--yellow);box-shadow:0 0 0 0 rgba(255,240,0,0.6);animation:pulse 2s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,240,0,0.5)}70%{box-shadow:0 0 0 12px rgba(255,240,0,0)}100%{box-shadow:0 0 0 0 rgba(255,240,0,0)}}

  /* ---------- Le fond d'icônes : une seule couche, `.static-icon-bg` ----------
     La couche PNG (`.icon-field`, planche `a11.png`) a été retirée le 31/08/2026 —
     backlog §8. Elle doublait celle qui reste, avec un autre pas de grille (96px
     contre 87px) et une autre origine (coin contre centre) : le décalage se cumulait
     d'une colonne à l'autre et se lisait comme un moiré, pas comme un doublon.

     🔴 LA RÈGLE CI-DESSOUS N'EST PAS UN RESTE DE LA COUCHE SUPPRIMÉE, ET LA SUPPRIMER
        ENTERRE TOUTE LA PAGE. Elle vivait dans le bloc `.icon-field`, mais elle sert
        le fond QUI RESTE : `.static-icon-bg` est en `position:fixed; z-index:0` (posé
        en style inline dans `index.html`). Sans ce `z-index:1`, les sections ne sont
        plus positionnées, et le motif se peint PAR-DESSUS leurs fonds. Mesuré le
        31/08 en la neutralisant sur la page servie : les icônes traversaient le bloc
        noir « Envoie-nous ta candidature ».

     ⚠️ Ne pas la déplacer ailleurs dans le fichier non plus : `section{position:
        relative}` (~l. 500) la suit sans porter de `z-index`, et c'est l'ordre de
        cascade actuel qui donne le bon résultat. */
  .nav, .hero, section, footer{ position:relative; z-index:1 }

  /* ⚠️ Ces deux règles n'ont RIEN à voir avec le fond d'icônes — elles habillaient
     seulement le même voisinage dans le fichier. Elles restent. */
  :root[data-mood="day"] .metier,:root[data-mood="day"] .svc,:root[data-mood="day"] .member,:root[data-mood="day"] .ent-layout{background:rgba(244,239,230,0.62)}
  :root[data-mood="day"] .svc.hl,:root[data-mood="day"] .member.yellow{background:var(--yellow)}

  /* ---- Hero entry animation ---- */
  .reveal{opacity:0;transform:translateY(28px) scale(0.96);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1), filter .9s ease;}
  .reveal.in{opacity:1;transform:none;filter:none}
  .reveal.reveal-2{transition-delay:.35s}
  .hero-scene{opacity:0;transition:opacity 1.6s ease}
  .hero-scene.in{opacity:1}

  /* Headline: clean fade + subtle lift, no rotation, no scan */
  .headline{position:relative}
  .headline img{
    transform:translateY(16px);
    opacity:0;
    transition:transform .8s cubic-bezier(.2,.7,.2,1), opacity .7s ease;
    will-change:transform,opacity;
  }
  .headline.reveal.in img{
    transform:none;opacity:1;
  }

  /* No idle highlight pulse — icons stay calm */

  /* Hero overall: tiny scale settle, no big zoom */
  .hero{transform:none;transition:none}
  .hero.in{transform:none}

  @media (prefers-reduced-motion:reduce){
    .reveal,.hero-scene,.headline img,.hero{opacity:1!important;transform:none!important;filter:none!important;transition:none!important;animation:none!important}
    .headline::after{display:none}
    [data-sr], [data-sr-child] > *{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  }

  /* ---- Scroll reveal ---- */
  [data-sr]{
    opacity:0;
    transform:translateY(34px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change:transform,opacity;
  }
  [data-sr="left"]{transform:translateX(-40px)}
  [data-sr="right"]{transform:translateX(40px)}
  [data-sr="fade"]{transform:none}
  [data-sr].in{opacity:1;transform:none;will-change:auto}

  /* Stagger children inside a container */
  [data-sr-child] > *{
    opacity:0;transform:translateY(30px);
    transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change:transform,opacity;
  }
  [data-sr-child].in > *{opacity:1;transform:none}
  [data-sr-child].in > *:nth-child(1){transition-delay:0s}
  [data-sr-child].in > *:nth-child(2){transition-delay:.12s}
  [data-sr-child].in > *:nth-child(3){transition-delay:.24s}
  [data-sr-child].in > *:nth-child(4){transition-delay:.36s}
  [data-sr-child].in > *:nth-child(5){transition-delay:.48s}
  [data-sr-child].in > *:nth-child(6){transition-delay:.60s}

  /* Headlines split: each line/word gets its own slide-up */
  .sr-words .word{
    display:inline-block;opacity:0;transform:translateY(40px);
    transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
  }
  .sr-words.in .word{opacity:1;transform:none}
  .sr-words.in .word:nth-child(1){transition-delay:0s}
  .sr-words.in .word:nth-child(2){transition-delay:.08s}
  .sr-words.in .word:nth-child(3){transition-delay:.16s}
  .sr-words.in .word:nth-child(4){transition-delay:.24s}
  .sr-words.in .word:nth-child(5){transition-delay:.32s}
  .sr-words.in .word:nth-child(6){transition-delay:.40s}
  .sr-words.in .word:nth-child(7){transition-delay:.48s}
  .sr-words.in .word:nth-child(8){transition-delay:.56s}
  }

  /* ---------- Stats ---------- */
  .stats{
    background:var(--yellow);color:var(--yellow-ink);
    border-top:1px solid var(--yellow);
    border-bottom:1px solid #d8bd00;
  }
  .stats-row{
    display:grid;grid-template-columns:repeat(4,1fr);
  }
  .stats-row > div{
    padding:48px 36px;
    border-right:1px solid rgba(0,0,0,0.18);
    display:flex;flex-direction:column;gap:8px;
  }
  .stats-row > div:last-child{border-right:0}
  .stat-num{font-weight:900;font-size:clamp(42px,5vw,68px);line-height:1;letter-spacing:-0.04em}
  .stat-lbl{font-size:12px;letter-spacing:0.24em;text-transform:uppercase;font-weight:700;opacity:.85}
  @media (max-width:900px){ .stats-row{grid-template-columns:repeat(2,1fr)} .stats-row > div:nth-child(2){border-right:0} .stats-row > div{border-bottom:1px solid rgba(0,0,0,0.18)} }

  /* ---------- Sections shared ---------- */
  section{position:relative}
  .section-hd{
    display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
    padding:40px 0 48px;
    border-bottom:1px solid var(--line);
    margin-bottom:0;
  }
  .section-hd h2{
    font-weight:900;font-size:clamp(40px,6vw,84px);line-height:0.95;letter-spacing:-0.04em;
    max-width:900px;
  }
  .section-hd h2 em{font-style:normal;color:var(--yellow)}
  .section-hd .num{
    font-weight:800;font-size:14px;letter-spacing:0.28em;color:var(--muted);
    white-space:nowrap;
  }

  /* ---------- Services ---------- */
  .services .section-hd{padding-top:40px}
  .services{padding-bottom:16px}
  .svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
  .svc-grid{align-items:stretch}
  .svc{
    background:rgba(10,10,11,0.55);
    padding:20px 32px 18px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;gap:22px;
    transition:background .3s ease,color .3s ease;
  }
  .svc:last-child{border-right:0}
  .svc h3{min-height:2.1em}
  .svc:hover{background:var(--yellow);color:var(--yellow-ink)}
  .svc .idx{font-size:12px;letter-spacing:0.28em;font-weight:800;color:var(--muted)}
  .svc:hover .idx{color:rgba(0,0,0,0.6)}
  .svc h3{font-size:38px;font-weight:900;letter-spacing:-0.03em;line-height:1}
  .svc p{color:#bcbdc0;font-size:14.5px;line-height:1.6}
  .svc:hover p{color:rgba(0,0,0,0.78)}
  .svc ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:auto}
  .svc li{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;display:flex;gap:14px;align-items:center;color:var(--yellow)}
  .svc:hover li{color:var(--yellow-ink)}
  .svc li::before{content:"";width:8px;height:8px;background:var(--yellow);flex:none}
  .svc:hover li::before{background:var(--yellow-ink)}
  @media (max-width:760px){ .svc-grid{grid-template-columns:1fr} .svc{border-right:0;min-height:auto} }

  @media (min-width:761px){
    .static-icon-bg{left:-10px !important;right:10px !important}
  }
  /* ---------- Mobile safety net ----------
     Several elements were drag-positioned with fixed px + position:absolute
     during editing. Those coordinates only make sense on the desktop layout
     they were set on, so on phones (iPhone/Samsung/etc.) they overlap or run
     off-screen. Reset them to normal flow ONLY below 760px; desktop is untouched. */
  @media (max-width:760px){
    .static-icon-bg{grid-template-columns:repeat(auto-fill,46px) !important;grid-auto-rows:46px !important;gap:9px !important;justify-content:center !important;left:-54px !important;right:-38px !important;width:calc(100% + 92px) !important}
    .static-icon-bg img{width:46px !important;height:46px !important}
    header img[src="assets/logo-jaune.png"], header img[src="assets/a2.png"]{
      position:static !important; left:auto !important; top:auto !important; margin:0 auto 8px !important;
      width:auto !important; height:52px !important; max-width:64vw !important; transform:none !important;
    }
    .hero-choice{position:relative !important; height:auto !important; margin-left:0 !important}
    .hero-choice .hc-btn.hc-cand, .hero-choice .hc-btn.hc-cli, a.hc-btn.hc-cand, button.hc-btn.hc-cli{
      position:static !important; left:auto !important; top:auto !important;
      width:100% !important; height:auto !important; display:flex !important; margin-bottom:12px !important;
    }
    img[alt="We love what we do"]{
      position:static !important; left:auto !important; top:auto !important;
      width:min(78vw,320px) !important; height:auto !important; display:block !important; margin:20px auto !important;
    }
    .bridge{ position:relative !important; padding:32px 0 !important }
    .bridge > div{ flex-direction:column !important; gap:22px !important; max-width:min(90vw,320px) !important; margin:0 auto !important }
    .bridge > div > div{ width:100% !important; max-width:320px !important }
    .cta-side ul li{ white-space:normal !important }
    .hero-choice .hc-btn, .cta-side .hc-btn{ border-radius:14px !important; padding:16px 22px !important }
    .hero-choice .hc-txt strong, .cta-side .hc-txt strong{ font-size:clamp(15px,1.5vw,18px) !important; font-weight:600 !important; letter-spacing:-.01em !important }
    .bridge img[src="assets/icone-fleche-arc.png"]{
      position:static !important; left:auto !important; top:auto !important;
      width:120px !important; display:block !important; margin:14px auto 0 !important; transform:none !important;
    }
    #equipe [style*="position: absolute"]{
      position:static !important; left:auto !important; top:auto !important; margin-left:0 !important;
    }
    #equipe .foot-row, #equipe > .wrap > div[style*="justify-content:center"]{
      flex-wrap:wrap !important; justify-content:center !important; row-gap:14px !important;
    }
  }


  /* ---------- Entreprises (demande de personnel) ---------- */
  .entreprises{padding-bottom:56px;position:relative;overflow:hidden;padding-top:0;margin-top:-8px}
  .entreprises .section-hd{padding-top:0}
  .ent-quote{
    max-width:760px;padding:8px 0 44px;font-size:clamp(15px,1.5vw,19px);line-height:1.6;color:var(--muted);text-wrap:pretty;
  }
  .ent-quote em{font-style:normal;color:var(--text)}
  .ent-layout{display:grid;grid-template-columns:minmax(280px,1fr) 1fr}
  @media (max-width:980px){ .ent-layout{grid-template-columns:1fr} }
  .ent-aside{
    padding:48px 48px;display:flex;flex-direction:column;gap:0;
    border-right:1px solid var(--line);
  }
  @media (max-width:980px){ .ent-aside{padding:40px 0;border-right:0;border-bottom:1px solid var(--line)} }
  .ent-promise{
    display:flex;gap:18px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line);
  }
  .ent-promise:last-of-type{border-bottom:0}
  .ent-promise .pnum{
    font-size:12px;font-weight:800;letter-spacing:0.24em;color:var(--yellow);
    font-variant-numeric:tabular-nums;padding-top:4px;flex:none;
  }
  .ent-promise .ptxt strong{display:block;font-size:19px;font-weight:900;letter-spacing:-0.02em;margin-bottom:6px}
  .ent-promise .ptxt span{font-size:13.5px;line-height:1.55;color:var(--muted)}
  .ent-direct{
    margin-top:32px;padding-top:26px;border-top:1px solid var(--line);
    display:flex;flex-direction:column;gap:7px;font-size:13.5px;letter-spacing:0.04em;color:#cfd0d3;
  }
  .ent-direct .lbl{font-size:11.5px;letter-spacing:0.24em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-bottom:5px}
  .ent-direct a{color:var(--text);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease}
  .ent-direct a:hover{color:var(--yellow);border-bottom-color:var(--yellow)}

  /* Panneau d'invitation (section Entreprises) */
  .ent-invite{
    padding:16px 48px 16px;
    display:flex;flex-direction:column;align-items:flex-start;gap:22px;
    justify-content:flex-start;
  }
  @media (max-width:980px){ .ent-invite{padding:40px 0 8px} }
  .ent-invite .ei-eyebrow{
    font-size:11.5px;letter-spacing:0.28em;text-transform:uppercase;font-weight:800;color:var(--yellow);
  }
  .ent-invite h3{
    font-size:clamp(30px,3.6vw,50px);font-weight:900;line-height:0.98;letter-spacing:-0.035em;
  }
  .ent-invite h3 em{font-style:normal;color:var(--yellow)}
  .ent-invite p{font-size:15.5px;line-height:1.6;color:var(--muted);max-width:440px;text-wrap:pretty}
  .ent-invite .ei-btn{
    display:inline-flex;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;font:inherit;
    margin-top:6px;padding:16px 22px;border-radius:14px;
    background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);color:var(--text);
    font-size:clamp(16px,1.6vw,19px);font-weight:600;letter-spacing:-.01em;text-transform:none;
    backdrop-filter:blur(6px);
    transition:transform .22s,background .22s,border-color .22s;
    position:relative;
  }
  .ent-invite .ei-btn{overflow:hidden;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .ent-invite .ei-btn > *{position:relative;z-index:1}
  .ent-invite .ei-btn, .ent-invite .ei-btn *{color:var(--yellow) !important}
  .ent-invite .ei-btn:hover{transform:translateY(-2px);background:rgba(0,0,0,.35);border-color:var(--yellow);box-shadow:inset 0 0 16px 2px rgba(255,240,0,.28),0 0 4px var(--yellow),0 0 10px var(--yellow),0 0 26px 4px rgba(255,240,0,.35)}
  :root[data-mood="day"] .ent-invite .ei-btn, :root[data-mood="day"] .ent-invite .ei-btn *{color:#0a0a0b !important}
  :root[data-mood="day"] .ent-invite .ei-btn{border-color:rgba(10,10,11,.16);background:rgba(255,255,255,.55)}
  :root[data-mood="day"] .ent-invite .ei-btn:hover{background:#fff;border-color:var(--yellow)}
  .ent-invite .ei-btn svg{width:24px;height:12px;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .ent-invite .ei-btn:hover svg{transform:translateX(5px)}
  .ent-invite .ei-note{font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);font-weight:700}

  .ent-form-wrap{padding:32px 40px 36px;position:relative}
  @media (max-width:980px){ .ent-form-wrap{padding:26px 22px 30px} }
  .ent-progress{position:relative;height:2px;background:var(--yellow);margin-bottom:34px;overflow:visible;box-shadow:0 0 10px 1px rgba(255,240,0,0.7)}
  .ent-progress i{
    position:absolute;inset:0 auto 0 0;width:0%;background:var(--yellow);
    transition:width .5s cubic-bezier(.2,.7,.2,1);
  }
  .ent-progress b{
    position:absolute;right:0;top:-24px;font-size:11.5px;letter-spacing:0.22em;font-weight:800;
    text-transform:uppercase;color:var(--muted);
  }
  .ent-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
  @media (max-width:640px){ .ent-grid{grid-template-columns:1fr} }
  .ent-grid .wide{grid-column:1/-1}
  /* Floating-label field with animated underline */
  .ef{position:relative;padding:22px 0 0;margin-bottom:26px}
  .ef input,.ef textarea{
    width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
    color:var(--text);font:inherit;font-size:16px;padding:10px 0 12px;
    transition:border-color .25s ease;
  }
  .ef textarea{resize:vertical;min-height:120px;font-family:inherit;line-height:1.5;background:rgba(255,255,255,0.03);border:1px solid var(--line) !important;border-radius:10px;padding:16px}
  .ef textarea:focus{border-color:var(--yellow) !important}
  .ef input:focus,.ef textarea:focus{outline:none}
  .ef label{
    position:absolute;left:0;top:32px;pointer-events:none;
    font-size:15px;color:var(--muted);letter-spacing:0.01em;
    transition:transform .28s cubic-bezier(.2,.7,.2,1), font-size .28s cubic-bezier(.2,.7,.2,1), color .2s ease, letter-spacing .28s ease;
    transform-origin:left top;
  }
  .ef input:focus + label,.ef textarea:focus + label,
  .ef input:not(:placeholder-shown) + label,.ef textarea:not(:placeholder-shown) + label{
    transform:translateY(-30px);font-size:11.5px;letter-spacing:0.24em;text-transform:uppercase;font-weight:800;color:var(--muted);
  }
  .ef input:focus + label,.ef textarea:focus + label{color:var(--yellow)}
  .ef .bar{position:absolute;left:0;right:0;bottom:0;height:1px;overflow:hidden}
  .ef .bar::after{
    content:"";position:absolute;inset:0;background:var(--yellow);
    transform:scaleX(0);transform-origin:left;transition:transform .38s cubic-bezier(.2,.7,.2,1);
  }
  .ef input:focus ~ .bar::after,.ef textarea:focus ~ .bar::after{transform:scaleX(1)}
  .ef.filled input,.ef.filled textarea{border-bottom-color:rgba(255,240,0,0.35)}
  /* Choice chips */
  .ent-choice{grid-column:1/-1;margin:6px 0 30px}
  .ent-choice > .lbl{
    display:block;font-size:11.5px;letter-spacing:0.24em;text-transform:uppercase;
    font-weight:800;color:var(--muted);margin-bottom:14px;
  }
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{position:relative}
  .chip input{position:absolute;opacity:0;width:0;height:0}
  .chip span{
    display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    padding:11px 17px;border:1px solid var(--line);background:transparent;
    font-size:12px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:#cfd0d3;
    transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s cubic-bezier(.2,.7,.2,1);
  }
  .chip span::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--line);
    transition:background .2s ease,box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);
  }
  .chip span:hover{border-color:#4a4b50;transform:translateY(-1px)}
  .chip input:checked + span{border-color:var(--yellow);color:var(--text)}
  .chip input:checked + span::before{background:var(--yellow);transform:scale(1.35);box-shadow:0 0 0 4px rgba(255,240,0,0.14)}
  .chip input:focus-visible + span{outline:2px solid var(--yellow);outline-offset:2px}
  /* Submit row */
  .ent-submit{
    grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
    padding-top:28px;border-top:1px solid var(--line);
  }
  .ent-alt{
    display:inline-flex;align-items:center;gap:12px;cursor:pointer;font:inherit;
    padding:16px 22px;background:transparent;border:1px solid var(--yellow);color:var(--yellow);
    font-size:11.5px;font-weight:900;letter-spacing:0.18em;text-transform:uppercase;
    transition:background .2s ease,color .2s ease,transform .2s cubic-bezier(.2,.7,.2,1);
  }
  .ent-alt:hover{background:var(--yellow);color:var(--yellow-ink);transform:translateY(-2px)}
  .ent-alt svg{width:16px;height:16px}
  .ent-send{
    display:inline-flex;align-items:center;gap:14px;cursor:pointer;
    padding:17px 26px;border:1px solid var(--yellow);background:var(--yellow);color:var(--yellow-ink);
    font:inherit;font-size:12px;font-weight:900;letter-spacing:0.2em;text-transform:uppercase;
    transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease,opacity .2s ease;
  }
  .ent-send:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,240,0,0.18)}
  .ent-send svg{width:20px;height:11px;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
  .ent-send:hover svg{transform:translateX(5px)}
  .ent-send[disabled]{opacity:.45;pointer-events:none}
  /* Success state */
  .ent-ok{display:none;padding:56px 0 40px;flex-direction:column;gap:20px;align-items:flex-start}
  .ent-ok.show{display:flex;animation:ent-ok-in .55s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ent-ok-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .ent-ok svg{width:56px;height:56px;color:var(--yellow)}
  .ent-ok svg path{stroke-dasharray:60;stroke-dashoffset:60;animation:ent-check .7s .18s cubic-bezier(.2,.7,.2,1) forwards}
  .ent-ok svg circle{stroke-dasharray:150;stroke-dashoffset:150;animation:ent-check-c .8s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes ent-check{to{stroke-dashoffset:0}}
  @keyframes ent-check-c{to{stroke-dashoffset:0}}
  .ent-ok h3{font-size:34px;font-weight:900;letter-spacing:-0.03em;line-height:1.05}
  .ent-ok p{font-size:15px;line-height:1.6;color:var(--muted);max-width:460px}
  :root[data-mood="day"] .chip span{color:#3a3833}
  :root[data-mood="day"] .ent-direct{color:#3a3833}
  @media (prefers-reduced-motion:reduce){
    .ent-ok svg path,.ent-ok svg circle{animation:none;stroke-dashoffset:0}
  }

  /* ---------- Emplois (Mur de métiers vivant) ---------- */
  .emplois{padding-bottom:0;position:relative;scroll-margin-top:10px}
  .emplois .section-hd{align-items:flex-end;padding-top:0;padding-bottom:16px;margin-top:-80px}
  .emplois .live-strip{
    display:flex;align-items:center;gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
    font-size:12px;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;
    color:var(--muted);
    flex-wrap:wrap;
  }
  .emplois .live-strip .dot{
    width:8px;height:8px;border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,0.6);
    animation:emp-pulse 2s infinite;
  }
  @keyframes emp-pulse{
    0%{box-shadow:0 0 0 0 rgba(34,197,94,0.6)}
    70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
    100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
  }
  .emplois .live-strip .live-count{color:var(--text);font-weight:900;font-size:13px}
  .emplois .live-strip .live-count em{font-style:normal;color:var(--yellow);font-size:18px;letter-spacing:-0.02em;margin-right:2px}
  .emplois .live-strip .sep{width:1px;height:14px;background:var(--line)}

  /* Filters */
  .emp-filters{
    display:flex;flex-wrap:wrap;gap:8px;
    padding:24px 0;
    border-bottom:1px solid var(--line);
  }
  .emp-filters button{
    padding:10px 16px;
    background:transparent;color:#cfd0d3;
    border:1px solid var(--line);
    font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
    cursor:pointer;
    transition:background .15s ease,color .15s ease,border-color .15s ease;
    display:inline-flex;align-items:center;gap:8px;
  }
  .emp-filters button .count{
    font-size:11.5px;color:var(--muted);font-weight:700;
    padding:2px 6px;background:rgba(255,255,255,0.06);
    letter-spacing:0.08em;
  }
  .emp-filters button:hover{border-color:var(--text);color:var(--text)}
  .emp-filters button.active{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
  .emp-filters button.active .count{background:rgba(0,0,0,0.18);color:rgba(0,0,0,0.78)}

  /* Métiers wall — typographic grid */
  .metier-wall{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    width:100%;
  }
  .metier-wall.fam-wall{grid-template-columns:repeat(3,1fr);width:100%}
  @media (max-width:1100px){ .metier-wall{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:760px){ .metier-wall{grid-template-columns:repeat(2,1fr)} .metier-wall.fam-wall{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:440px){ .metier-wall{grid-template-columns:1fr} .metier-wall.fam-wall{grid-template-columns:1fr} }

  .metier{
    position:relative;overflow:hidden;
    border-right:1px solid var(--line);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    aspect-ratio:1.2/1;
    padding:22px;
    display:flex;flex-direction:column;justify-content:space-between;
    cursor:pointer;
    background:rgba(10,10,11,0.55);
    transition:background .25s ease,color .25s ease,transform .35s ease;
    text-decoration:none;color:inherit;
  }
  .metier::before{
    content:"";position:absolute;inset:0;
    background:var(--yellow);
    transform:translateY(101%);
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
    z-index:0;
  }
  .metier:hover::before{transform:translateY(0)}
  .metier > *{position:relative;z-index:1}
  .metier .met-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .metier .met-idx{
    font-size:12px;letter-spacing:0.24em;font-weight:800;
    color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .metier:hover .met-idx{color:rgba(0,0,0,0.6)}
  .metier .met-pill{display:none}
  .metier .met-name{
    font-weight:900;font-size:clamp(22px,2.4vw,30px);
    line-height:0.95;letter-spacing:-0.025em;
    text-transform:uppercase;
    word-break:break-word;
    color:var(--text);
    transition:color .25s ease;
  }
  .metier:hover .met-name{color:var(--yellow-ink)}
  .metier .met-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .metier .met-icon{
    width:64px;height:64px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    color:var(--yellow);
    background:rgba(255,240,0,0.10);
    border:1px solid rgba(255,240,0,0.30);
    border-radius:16px;
    transition:background .3s ease,color .3s ease,border-color .3s ease,transform .35s ease;
  }
  .metier:hover .met-icon{
    background:rgba(0,0,0,0.92);
    border-color:rgba(0,0,0,0.92);
    color:var(--yellow);
    transform:rotate(-4deg) scale(1.06);
  }
  .metier .met-icon svg{width:34px;height:34px;stroke-width:1.7}
  .metier .met-icon img{width:96px;height:96px;object-fit:contain;margin:-16px}
  .metier .met-cta{
    font-size:11.5px;font-weight:800;letter-spacing:0.2em;text-transform:uppercase;
    color:var(--muted);
    display:inline-flex;align-items:center;gap:6px;
  }
  .metier:hover .met-cta{color:var(--yellow-ink)}
  .metier .met-cta svg{width:12px;height:8px}
  .metier.hidden{display:none}

  /* Cartes de catégories (vue "Tous") */
  .fam-card{
    position:relative;overflow:hidden;
    border-right:1px solid var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:30px 26px 26px;min-height:230px;
    display:flex;flex-direction:column;justify-content:space-between;gap:22px;
    background:rgba(10,10,11,0.55);cursor:pointer;text-align:left;font:inherit;color:inherit;
    transition:background .25s ease,color .25s ease;
  }
  .fam-card::before{
    content:"";position:absolute;inset:0;background:var(--yellow);
    transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.2,1);z-index:0;
  }
  .fam-card:hover::before{transform:translateY(0)}
  .fam-card > *{position:relative;z-index:1}
  .fam-card .fc-top{display:flex;align-items:flex-start;justify-content:flex-end;gap:14px;margin-bottom:36px}
  .fam-card .fc-icons{display:flex;gap:8px}
  .fam-card .fc-icons span{
    width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(255,240,0,0.28);background:rgba(255,240,0,0.08);color:var(--yellow);
    transition:border-color .3s ease,background .3s ease,color .3s ease,transform .4s cubic-bezier(.2,.7,.2,1);
  }
  .fam-card .fc-icons span:nth-child(2){transition-delay:.05s}
  .fam-card .fc-icons span:nth-child(3){transition-delay:.1s}
  .fam-card:hover .fc-icons span{background:rgba(0,0,0,0.9);border-color:rgba(0,0,0,0.9);color:var(--yellow);transform:translateY(-3px)}
  .fam-card .fc-icons svg{width:24px;height:24px;stroke-width:1.7}
  .fam-card .fc-idx{font-size:12px;letter-spacing:0.24em;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
  .fam-card:hover .fc-idx{color:rgba(0,0,0,0.6)}
  .fam-card .fc-name-band3{display:inline-block;background:var(--yellow);color:var(--yellow-ink);font-weight:900;font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-0.02em;text-transform:uppercase;padding:8px 16px 8px 14px;margin-bottom:auto;clip-path:polygon(0 0,100% 0,100% 50%,calc(100% - 1em) 100%,0 100%)}
  .fam-card .fc-name{font-weight:900;font-size:clamp(22px,2.2vw,30px);line-height:0.98;letter-spacing:-0.025em;text-transform:uppercase}
  .fam-card:hover .fc-name{color:var(--yellow-ink)}
  .fam-card .fc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase}
  .fam-card .fc-count{color:var(--muted)}
  .fam-card:hover .fc-count{color:rgba(0,0,0,0.6)}
  .fam-card .fc-cta{color:var(--yellow);display:inline-flex;align-items:center;gap:7px;transition:color .25s ease}
  .fam-card:hover .fc-cta{color:var(--yellow-ink)}
  .fam-card .fc-cta svg{width:14px;height:8px}

  /* Retour à la liste des catégories */
  .fam-back{
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
    padding:18px 0;border-bottom:1px solid var(--line);
  }
  .fam-back button{
    display:inline-flex;align-items:center;gap:10px;cursor:pointer;font:inherit;
    background:transparent;border:1px solid var(--line);color:#cfd0d3;
    padding:10px 16px;font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
    transition:border-color .2s ease,color .2s ease;
  }
  .fam-back button:hover{border-color:var(--yellow);color:var(--yellow)}
  .fam-back button svg{width:16px;height:8px;transform:rotate(180deg)}
  .fam-back .fb-title{font-size:12px;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--yellow);display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right}
  .fam-back .fb-title em{font-style:normal;color:#fff}
  .fam-back .fb-note{font-size:14px;font-weight:800;letter-spacing:0.04em;text-transform:none;color:#0a0a0b;background:var(--yellow);padding:4px 10px;border-radius:3px}

  /* Passerelle animée vers la candidature spontanée */
  .bridge{
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px;
    padding:40px 0 40px;
  }
  @media (max-width:800px){ .bridge{grid-template-columns:1fr;gap:22px} }
  .bridge p{
    font-size:clamp(17px,1.9vw,24px);line-height:1.45;letter-spacing:-0.01em;font-weight:500;
    color:#cfd0d3;text-wrap:pretty;max-width:760px;
  }
  .bridge p strong{color:var(--text);font-weight:900}
  .bridge p em{font-style:normal;color:var(--yellow);font-weight:900}
  .bridge .bw{display:inline-block;white-space:nowrap;opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
  .bridge.in .bw{opacity:1;transform:none}
  .bridge-arrow{
    width:190px;height:220px;color:var(--yellow);justify-self:end;overflow:visible;
    filter:drop-shadow(0 6px 22px rgba(255,240,0,0.22));
  }
  @media (max-width:800px){ .bridge-arrow{width:130px;height:150px;justify-self:start} }
  .bridge-arrow .ba-curve{
    fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;
    stroke-dasharray:100;stroke-dashoffset:100;
  }
  .bridge-arrow .ba-head{
    fill:currentColor;stroke:none;
    opacity:0;transform:scale(.5);transform-box:fill-box;transform-origin:top center;
  }
  .bridge-arrow .ba-dot{opacity:0}
  .bridge.in .bridge-arrow .ba-dot{opacity:1}
  .bridge.in .bridge-arrow .ba-curve{animation:bridge-draw 1.15s .3s cubic-bezier(.2,.7,.2,1) forwards}
  .bridge.in .bridge-arrow .ba-head{animation:ba-head .5s 1.2s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes ba-head{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
  .bridge.in .bridge-arrow .ba-dot{animation:ba-dot 2.4s 1.5s ease-in-out infinite}
  .bridge.in .bridge-arrow{animation:bridge-nudge 2.4s 1.5s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes bridge-draw{to{stroke-dashoffset:0}}
  @keyframes bridge-nudge{0%,100%{transform:translate(0,0)}55%{transform:translate(6px,14px)}}
  @keyframes ba-dot{0%{opacity:0}18%{opacity:1}78%{opacity:1}100%{opacity:0}}
  .cta-side .btn.primary.pulsing{animation:cta-pulse 2.6s 1.6s ease-in-out infinite}
  .cta-side .btn.primary.pulsing:hover{animation:none}
  @keyframes cta-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,240,0,0)}45%{box-shadow:0 0 0 14px rgba(255,240,0,0.08)}}

  /* ---------- Mise en evidence du CTA a l'arrivee (?postuler=1 / #postuler) ----------
     Posee et retiree par le bloc 14 de page-init.js. Elle ne fait que DESIGNER le
     formulaire : elle ne l'ouvre pas. Decision de Joao du 31/08/2026 — le lien est
     partageable, imposer une fenetre a qui arrive serait hostile.

     🔴 L'ANNEAU EST `inset`, ET CE N'EST PAS UN GOUT. `.cta` porte `overflow:hidden`
        (l. ~1123) : un `box-shadow` exterieur sur la section serait ROGNE et
        invisible. Le halo exterieur ne vaut que pour le bouton, qui est loin des
        bords. Ne pas « simplifier » en retirant `inset`. */
  @keyframes cta-appel-anneau{
    0%,100%{box-shadow:inset 0 0 0 0 rgba(255,240,0,0)}
    35%{box-shadow:inset 0 0 0 3px rgba(255,240,0,0.55)}
  }
  @keyframes cta-appel-halo{
    0%,100%{box-shadow:0 0 0 0 rgba(255,240,0,0)}
    40%{box-shadow:0 0 0 16px rgba(255,240,0,0.22)}
  }
  .cta.cta-appel{animation:cta-appel-anneau 1.15s ease-in-out 2}
  .cta.cta-appel .cta-side .btn.primary{animation:cta-appel-halo 1.15s ease-in-out 3}

  /* ⚠️ Sans mouvement, l'anneau reste POSE au lieu de clignoter — le bloc 14 retire
     la classe apres 3 s, donc il disparait quand meme. Une mise en evidence qui ne
     s'annonce que par une animation n'existe pas pour qui a desactive les animations. */
  @media (prefers-reduced-motion:reduce){
    .cta.cta-appel,.cta.cta-appel .cta-side .btn.primary{animation:none}
    .cta.cta-appel{box-shadow:inset 0 0 0 3px rgba(255,240,0,0.55)}
  }
  @media (prefers-reduced-motion:reduce){
    .bridge .bw{opacity:1;transform:none}
    .bridge .bridge-arrow .ba-curve{stroke-dashoffset:0;animation:none}
    .bridge .bridge-arrow .ba-head{opacity:1;transform:none;animation:none}
    .bridge.in .bridge-arrow,.bridge.in .bridge-arrow .ba-dot,.cta-side .btn.primary.pulsing{animation:none}
    .bridge-arrow .ba-dot{display:none}
  }
  :root[data-mood="day"] .fam-card{background:rgba(244,239,230,0.62)}
  :root[data-mood="day"] .fam-card .fc-name{color:#0f1011}
  :root[data-mood="day"] .fam-back button{color:#3a3833}
  :root[data-mood="day"] .bridge p{color:#3a3833}

  /* Vedettes — featured offers */
  .emp-vedettes{
    margin-top:80px;
    border-top:1px solid var(--line);
    padding-top:48px;
  }
  .emp-vedettes h3{
    font-size:14px;letter-spacing:0.28em;text-transform:uppercase;font-weight:800;
    color:var(--muted);margin-bottom:24px;
    display:flex;align-items:center;gap:14px;
  }
  .emp-vedettes h3::after{content:"";flex:1;height:1px;background:var(--line)}
  .vedettes-row{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  @media (max-width:1100px){ .vedettes-row{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:560px){ .vedettes-row{grid-template-columns:1fr} }
  .vedette{
    background:var(--bg);
    padding:24px;
    display:flex;flex-direction:column;gap:14px;
    transition:background .2s ease;
    cursor:pointer;
  }
  .vedette:hover{background:var(--bg-3)}
  .vedette .ved-tag{
    align-self:flex-start;
    padding:4px 8px;font-size:11.5px;font-weight:900;letter-spacing:0.18em;text-transform:uppercase;
    background:var(--yellow);color:var(--yellow-ink);
  }
  .vedette .ved-tag.urgent{background:#ff5a4e;color:#fff}
  .vedette .ved-tag.longue{background:#3DB7FF;color:#001120}
  .vedette .ved-title{font-weight:900;font-size:22px;line-height:1.05;letter-spacing:-0.025em}
  .vedette .ved-meta{display:flex;flex-direction:column;gap:6px;margin-top:auto;font-size:12px;color:var(--muted);letter-spacing:0.04em}
  .vedette .ved-meta span{display:flex;align-items:center;gap:8px}
  .vedette .ved-meta svg{width:13px;height:13px;color:var(--yellow)}
  .vedette .ved-foot{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding-top:14px;border-top:1px solid var(--line);
    font-size:12px;letter-spacing:0.18em;text-transform:uppercase;font-weight:800;
  }
  .vedette .ved-foot .ago{color:var(--muted)}
  .vedette .ved-foot .arrow{color:var(--yellow);display:inline-flex;align-items:center;gap:6px}
  .vedette .ved-foot .arrow svg{width:14px;height:8px}

  :root[data-mood="day"] .emp-filters button{color:#3a3833;border-color:var(--line)}
  :root[data-mood="day"] .emp-filters button .count{background:rgba(0,0,0,0.06);color:#5c5a52}
  :root[data-mood="day"] .metier .met-name{color:#0f1011}
  :root[data-mood="day"] .metier .met-icon{color:rgba(0,0,0,0.18)}
  :root[data-mood="day"] .vedette{background:var(--bg)}
  :root[data-mood="day"] .vedette:hover{background:var(--bg-3)}

  /* ---------- Team ---------- */
  .team{padding-bottom:56px}
  .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);max-width:1280px}
  .member{
    background:rgba(10,10,11,0.55);
    padding:32px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    display:flex;flex-direction:column;gap:16px;
    min-height:auto;
  }
  .member:last-child{border-right:0}
  .member.yellow{background:var(--yellow);color:var(--yellow-ink)}
  .member .avatar{
    aspect-ratio:1/1;width:100%;
    background:#1c1d1f;
    display:flex;align-items:center;justify-content:center;
    font-weight:900;font-size:120px;letter-spacing:-0.04em;
    color:#fff;
    overflow:hidden;
    position:relative;
    cursor:pointer;
  }
  .member .avatar img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;transition:filter .35s ease, transform .8s ease}
  .member .avatar:hover img:not(.avatar-hover-img){filter:blur(8px) brightness(0.55);transform:scale(1.04)}
  .member .avatar .contact-overlay{
    position:absolute;inset:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    padding:24px;
    opacity:0;transform:translateY(8px);
    transition:opacity .3s ease, transform .3s ease;
    pointer-events:none;
    text-align:center;
  }
  .member .avatar:hover .contact-overlay{opacity:1;transform:translateY(0);pointer-events:auto}
  .member .avatar .contact-overlay .email{
    font-size:14px;font-weight:700;letter-spacing:-0.01em;color:#fff;
    word-break:break-all;line-height:1.3;
  }
  .member .avatar .contact-overlay .contact-btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:10px 18px;
    background:var(--yellow);color:var(--yellow-ink);
    font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;
    text-decoration:none;
    border:0;cursor:pointer;
    transition:transform .2s ease;
  }
  .member .avatar .contact-overlay .contact-btn:hover{transform:translateY(-2px)}
  .member.yellow .avatar .contact-overlay .contact-btn{background:var(--yellow);color:var(--yellow-ink)}
  .member.yellow .avatar{background:#0a0a0b;color:var(--yellow)}
  .member.empty .avatar{
    background:repeating-linear-gradient(45deg, #141517 0 12px, #0f1011 12px 24px);
    color:#3a3b3e;font-size:64px;
  }
  .member .meta{display:flex;flex-direction:column;gap:6px}
  .member .role{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;font-weight:700;color:var(--muted);min-height:2.6em;display:flex;align-items:flex-end}
  .member.yellow .role{color:rgba(0,0,0,0.65)}
  .member .name{font-size:22px;font-weight:900;letter-spacing:-0.02em;line-height:1.25}
  .member .bio{font-size:14px;color:#bcbdc0;line-height:1.5}
  .member.yellow .bio{color:rgba(0,0,0,0.78)}
  @media (max-width:1100px){ .team-grid{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:900px){ .team-grid{grid-template-columns:1fr} .member{border-right:0;min-height:auto} }

  /* ---------- CTA ---------- */
  .cta{
    padding:0 0 56px;
    background:
      radial-gradient(700px 380px at 80% 30%, rgba(255,240,0,0.05), transparent 62%);
    position:relative;overflow:hidden;
  }
  .cta::before{
    content:"";position:absolute;inset:0;
    background-image:linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:80px 80px;
  }
  .cta-inner{position:relative;display:grid;grid-template-columns:auto minmax(0,1.3fr);gap:48px;align-items:center}
  .cta h2{font-weight:900;font-size:clamp(48px,8vw,112px);line-height:0.845;letter-spacing:-0.045em}
  .cta h2 .cta-last{display:inline-block;position:relative;top:-0.07em;margin-top:0}
  .cta h2 em{font-style:normal;background:var(--yellow);color:var(--yellow-ink);padding:.02em .12em .06em;display:inline-block;transform:skewX(-4deg);margin:0.20em 0 0}
  .cta h2 em > span{display:inline-block;transform:skewX(4deg)}
  .cta-side{display:flex;flex-direction:column;gap:14px;padding:0;box-sizing:border-box}
  .cta-side .btn{margin-bottom:0}
  .cta p{color:#cfd0d3;font-size:17px;line-height:1.55;max-width:42ch}
  .cta .btn.primary{align-self:flex-start;font-size:14px;padding:22px 28px}
  @media (max-width:900px){ .cta-inner{grid-template-columns:1fr} }

  /* ---------- Apply Modal ---------- */
  .modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:60px 24px;overflow-y:auto}
  .modal-overlay.open{display:flex}
  .modal{background:var(--bg-3);border:1px solid var(--line);max-width:980px;width:100%;color:var(--text);position:relative;animation:modal-in .25s ease}
  .modal.modal-narrow{max-width:560px}
  @keyframes modal-in{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}

  /* Split layout for apply modal */
  .modal-split{display:grid;grid-template-columns:280px 1fr}
  .modal-side{
    background:linear-gradient(180deg,#0d0d0f 0%, #18181a 100%);
    border-right:1px solid var(--line);
    padding:32px 16px 24px;
    display:flex;flex-direction:column;justify-content:space-between;gap:20px;
    position:sticky;top:0;align-self:stretch;
    min-height:600px;
  }
  .modal-side .ms-top{display:flex;flex-direction:column;gap:14px}
  .modal-side .ms-fam{order:2;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-top:4px}
  .modal-side .ms-name{order:3;font-size:34px;font-weight:900;letter-spacing:-0.03em;line-height:1.14;text-transform:uppercase;color:#fff;margin-top:0;overflow-wrap:anywhere;max-width:100%}
  .modal-side .ms-pitch{order:4;font-size:14px;line-height:1.55;color:#bcbdc0;margin:2px 0 0}
  .modal-side .ms-art{order:5;margin-top:18px}
  .modal-side .ms-eyebrow{font-size:12px;font-weight:800;letter-spacing:0.28em;text-transform:uppercase;color:var(--yellow);order:1}
  .modal-side .ms-eyebrow::before{content:"●";color:var(--yellow);margin-right:8px;font-size:8px;vertical-align:middle}
  .modal-side .ms-art{
    width:100%;aspect-ratio:1/1;max-width:none;margin:18px 0 0;
    display:flex;align-items:center;justify-content:center;
    background:none;
    border:3px solid rgba(255,240,0,0.72);
    border-radius:6px;
    color:var(--yellow);
    overflow:hidden;
    position:relative;
    box-shadow:none;
    isolation:isolate;
  }
  .modal-side .ms-art > img,
  .modal-side .ms-art > .ms-art-photo{border-radius:5px;overflow:hidden;width:100%;height:100%;margin:0}
  .modal-side .ms-art:has(> .ms-art-photo){padding:0;background:none}
  .modal-side .ms-art::before{ display:none }
  .modal-side .ms-art svg{width:62%;height:62%;overflow:visible;filter:drop-shadow(0 6px 18px rgba(255,240,0,0.20))}
  .modal-side .ms-art .ms-art-icon{width:90%;height:90%;display:flex;align-items:center;justify-content:center}
  .modal-side .ms-art .ms-art-icon svg{width:100%;height:100%;stroke-width:1.6;filter:drop-shadow(0 6px 18px rgba(255,240,0,0.30))}
  @keyframes ms-icon-float{
    0%,100%{transform:translateY(0) rotate(0deg)}
    50%{transform:translateY(-6px) rotate(2deg)}
  }
  .modal-side .ms-name{font-weight:900;letter-spacing:-0.03em;line-height:1.14;text-transform:uppercase;color:#fff}
  .modal-side .ms-fam{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--muted);font-weight:800;margin-top:8px}
  .modal-side .ms-pitch{font-size:14px;line-height:1.55;color:#bcbdc0}
  .modal-side .ms-foot{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:#6a6c70;font-weight:700;border-top:1px solid var(--line);padding-top:18px}
  .modal-side .ms-foot strong{color:var(--yellow);font-weight:800}
  .ms-job-details{margin-top:18px;padding-top:27px;border-top:1px solid var(--line);text-align:left;order:6}
  .ms-job-details .mjd-mission{font-size:15px;line-height:1.55;color:#fff;margin:0 0 26px}
  .ms-job-details .mjd-label{font-size:12px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;color:var(--yellow);margin:0 0 8px}
  .ms-job-details .mjd-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
  .ms-job-details .mjd-list li{font-size:14.5px;line-height:1.5;color:#fff;padding-left:14px;position:relative}
  .ms-job-details .mjd-list li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;background:var(--yellow)}
  .ms-job-details .mjd-label.mjd-req,
  .ms-job-details .mjd-label.mjd-plus{margin-top:22px}
  .ms-job-details .mjd-req-list li::before,
  .ms-job-details .mjd-plus-list li::before{background:rgba(255,240,0,0.55)}

  /* Animated SVG keyframes */
  @keyframes ms-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes ms-swing{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
  @keyframes ms-pulse{0%,100%{opacity:0.4;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}
  @keyframes ms-spin{to{transform:rotate(360deg)}}
  @keyframes ms-spark{0%,100%{opacity:0;transform:scale(0.6)}50%{opacity:1;transform:scale(1)}}
  @keyframes ms-drift{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  .ms-art .anim-bounce{transform-origin:center}
  .ms-art .anim-swing{transform-origin:center top}
  .ms-art .anim-pulse{transform-origin:center}
  .ms-art .anim-spin{transform-origin:center}
  .ms-art .anim-spark{}
  .ms-art .anim-drift{}

  .modal-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border:1px solid var(--line);background:#0a0a0b;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5};justify-content:center;font-weight:700}
  .modal-close:hover{background:var(--yellow);color:#000;border-color:var(--yellow)}
  .modal-hd{padding:40px 40px 24px;border-bottom:1px solid var(--line)}
  .modal-hd h3{font-size:32px;font-weight:900;letter-spacing:-0.03em;margin-bottom:8px}
  .modal-hd p{color:var(--muted);font-size:14px}
  .modal-body{padding:32px 40px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .form-grid .full{grid-column:1/-1}
  .field{display:flex;flex-direction:column;gap:10px}
  .field label{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;color:var(--muted)}
  .field input, .field textarea, .field select{
    background:var(--bg);border:1px solid var(--line);color:#fff;
    padding:14px 16px;font:inherit;font-size:15px;border-radius:10px;
    transition:border .15s ease;
  }
  .field input:focus, .field textarea:focus, .field select:focus{outline:none;border-color:var(--yellow)}
  .field textarea{resize:vertical;min-height:110px;font-family:inherit}
  /* ---- Carte suisse cliquable ---- */
  .chmap{border:1px solid var(--line);background:var(--bg);padding:14px 14px 12px}
  .chmap-hd{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:10px}
  .chmap-pick{font-size:12px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);transition:color .25s ease}
  .chmap-pick.on{color:var(--yellow)}
  .chmap-all{
    background:transparent;border:1px solid var(--line);color:#cfd0d3;cursor:pointer;font:inherit;
    font-size:11.5px;font-weight:800;letter-spacing:0.18em;text-transform:uppercase;padding:8px 12px;
    transition:border-color .2s ease,color .2s ease,background .2s ease;
  }
  .chmap-all:hover{border-color:var(--yellow);color:var(--yellow)}
  .chmap-all.on{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
  .chmap-stage{position:relative}
  .chmap svg{display:block;width:100%;height:auto}
  .chmap svg path{
    fill:rgba(255,255,255,0.035);stroke:var(--line);stroke-width:1.1;
    cursor:pointer;transition:fill .22s ease,stroke .22s ease,transform .3s cubic-bezier(.2,.7,.2,1);
    transform-box:fill-box;transform-origin:center;
  }
  .chmap svg path.core{fill:rgba(255,240,0,0.07);stroke:rgba(255,240,0,0.32)}
  .chmap svg path.locked{cursor:default;opacity:0.45}
  .chmap svg path.core:hover{fill:rgba(255,240,0,0.24);stroke:var(--yellow);stroke-width:1.6}
  .chmap svg path.sel{fill:var(--yellow);stroke:var(--yellow);stroke-width:1.6}
  .chmap svg path.sel{animation:ct-pop .42s cubic-bezier(.2,.7,.2,1)}
  @keyframes ct-pop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
  .chmap-tip{
    position:absolute;left:0;top:0;pointer-events:none;
    transform:translate(-50%,-140%);
    padding:5px 9px;background:var(--yellow);color:var(--yellow-ink);
    font-size:11.5px;font-weight:900;letter-spacing:0.14em;text-transform:uppercase;white-space:nowrap;
    opacity:0;transition:opacity .18s ease;
  }
  .chmap-tip.show{opacity:1}
  .chmap-note{margin-top:10px;font-size:12px;line-height:1.5;color:var(--muted);letter-spacing:0.03em}
  .chmap-sub{margin-top:14px;display:flex;flex-direction:column;gap:12px;padding:14px 16px;background:rgba(255,240,0,0.06);border:1px solid rgba(255,240,0,0.25);border-radius:8px}
  .chmap-sub:empty{display:none;padding:0;border:0;margin-top:0}
  .chmap-sub-group{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .chmap-sub-label{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--yellow);font-weight:800;margin-right:2px}
  .chmap-sub-chip{
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.35);color:#fff;cursor:pointer;font:inherit;
    font-size:12px;font-weight:700;letter-spacing:0.04em;padding:6px 12px;border-radius:999px;
    transition:border-color .15s ease,color .15s ease,background .15s ease;
  }
  .chmap-sub-chip:hover{border-color:var(--yellow);color:var(--yellow)}
  .chmap-sub-chip.sel{background:var(--yellow);border-color:var(--yellow);color:var(--yellow-ink)}
  :root[data-mood="day"] .chmap svg path{fill:rgba(0,0,0,0.04);stroke:var(--line)}
  .chmap svg .zone-divider-line{stroke:#fff;stroke-width:1;stroke-dasharray:3 3;mix-blend-mode:difference;pointer-events:none;opacity:.7}
  .chmap svg .zone-dot{fill:#0a0a0b;stroke:#fff;stroke-width:2;cursor:pointer;transition:fill .18s ease,r .18s ease,opacity .18s ease;filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}
  .chmap svg .zone-dot:hover{fill:var(--yellow);stroke:#0a0a0b;r:8}
  .chmap svg .zone-dot.sel{fill:var(--yellow);stroke:#0a0a0b;r:8}
  :root[data-mood="day"] .chmap-all{color:#3a3833}
  .field-file{
    border:1px dashed var(--line);padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px;
    cursor:pointer;transition:border .15s ease, background .15s ease;
  }
  .field-file:hover{border-color:var(--yellow);background:rgba(255,240,0,0.04)}
  .field-file input{display:none}
  .field-file .ph{font-size:13px;color:var(--muted)}
  .field-file .pick{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;font-weight:800;color:var(--yellow)}
  .field-file.has-file .ph{color:#fff}

  /* Consent checkbox */
  .consent{display:flex;align-items:center;gap:12px;cursor:pointer;padding:2px 0;font-size:13.5px;line-height:1.6;color:#fff;text-transform:none;letter-spacing:normal;font-weight:400;max-width:none}
  .consent > span{text-transform:none;letter-spacing:normal;font-weight:400;font-size:13.5px;line-height:1.6;text-wrap:pretty;color:#fff}
  .consent input{margin-top:0}
  .consent input{
    appearance:none;-webkit-appearance:none;
    width:24px;height:24px;flex:0 0 24px;margin-top:0;padding:0;
    border:2px solid rgba(255,255,255,0.55);background:var(--bg);
    border-radius:4px;box-sizing:border-box;
    cursor:pointer;display:grid;place-content:center;
    transition:border-color .15s ease, background .15s ease;
  }
  .consent input:checked{background:var(--yellow);border-color:var(--yellow)}
  .consent input:checked::after{
    content:"";width:12px;height:7px;border:2.5px solid #000;border-top:0;border-right:0;
    transform:rotate(-45deg) translate(1px,-1px);
  }
  .consent input:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
  .consent.invalid input{border-color:#e87171}
  .consent.invalid{color:#e87171}
  .consent a{color:var(--yellow);text-decoration:underline}
  .consent-err{display:none;color:#e87171;font-size:12.5px;line-height:1.5;margin:-6px 0 0 36px;font-weight:600}
  label.consent-optional input{border-color:rgba(255,255,255,0.32);width:18px;height:18px;flex:0 0 18px}
  .consent-optional input:checked::after{width:9px;height:5px;border-width:2px}
  .consent-optional{color:#a7a8ab}
  .modal-ft{padding:24px 40px 36px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  .modal-ft .small{font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
  .modal-ft .btn{padding:16px 22px}
  .modal-ok{padding:60px 40px;text-align:center;display:none}
  .poste-badge{
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    padding:14px 16px;
    background:rgba(255,240,0,0.08);
    border:1px solid rgba(255,240,0,0.30);
    border-radius:8px;
  }
  .poste-badge .pb-name{font-size:16px;font-weight:800;color:#fff;letter-spacing:-0.01em}
  .poste-badge .pb-fam{font-size:11.5px;font-weight:800;letter-spacing:0.22em;text-transform:uppercase;color:var(--yellow);padding:4px 8px;background:rgba(255,240,0,0.10);border:1px solid rgba(255,240,0,0.28)}
  .modal-ok.show{display:block}
  .modal-ok h3{font-size:36px;font-weight:900;letter-spacing:-0.03em;margin-bottom:12px;color:var(--yellow)}
  .modal-ok p{color:#cfd0d3;font-size:15px;max-width:420px;margin:0 auto}
  body.modal-open{overflow:hidden}
  @media (max-width:780px){
    .modal-split{grid-template-columns:minmax(0,1fr) !important}
    .modal-side{position:relative;min-height:auto;padding:36px 28px}
    .modal-side .ms-art{max-width:170px}
  }
  @media (max-width:640px){
    .form-grid{grid-template-columns:minmax(0,1fr)}
    .ml-file .pick, .ml-dropzone .pick{white-space:normal !important}
    .modal-hd, .modal-body, .modal-ft{padding-left:24px;padding-right:24px}
  }

  /* ---------- Footer ---------- */
  footer .foot-row small{font-size:12px}
  footer{background:#080809;color:#cfd0d3;padding:120px 0 32px}
  .foot-row{display:grid;grid-template-columns:max-content max-content max-content max-content;gap:40px;padding-bottom:64px;border-bottom:1px solid var(--line)}
  .foot-row h4{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:18px}
  .foot-row a, .foot-row li{font-size:14px;color:#cfd0d3}
  .foot-row ul{list-style:none;display:flex;flex-direction:column;gap:12px}
  .foot-row a:hover{color:var(--yellow)}
  .foot-row > div:last-child li{font-size:15px;color:var(--yellow);font-weight:600}
  .foot-row > div:last-child a{font-size:15px;color:var(--yellow);font-weight:700}
  .foot-row > div:last-child li[style*="color:var(--muted)"]{color:#9a9ba0 !important;font-weight:500}
  .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:28px;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted)}
  @media (max-width:900px){ .foot-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

  /* 🔴 EN DESSOUS DE 560 px, UNE SEULE COLONNE — et `minmax(0,1fr)`, pas `1fr`.
     Mesure du 27/08 sur iPhone (390 px de large) : la regle ci-dessus rendait
     `328px 108.9px`. La 1re colonne contient le logo, dont la largeur min-content
     est 328 px ; or `1fr` vaut `minmax(auto,1fr)`, et ce minimum `auto` INTERDIT a
     la colonne de descendre sous cette valeur. La 2e colonne etait donc poussee a
     droite jusqu'a 497 px, soit 107 px hors de l'ecran : « DOCUMENTS » et
     « CONTACT » se retrouvaient coupes, sans barre de defilement pour y acceder.
     `minmax(0,1fr)` remplace ce minimum par 0 et autorise la colonne a se reduire. */
  @media (max-width:560px){ .foot-row{grid-template-columns:minmax(0,1fr);gap:32px} }

  /* ---------- Hero responsive ---------- */
  @media (max-width:900px){
    .crane,.gear-stack,.wrench,.hammer{display:none}
    .floaters .ic{opacity:.1}
    .hero-inner{padding-top:80px;padding-bottom:100px}
    .emplois .section-hd{margin-top:-24px !important; margin-bottom:26px !important}
    .footer-follow{align-items:flex-start !important;gap:18px !important}
    .footer-follow .follow-txt{flex-direction:column !important;gap:8px !important}
    .footer-follow .follow-txt-l span{order:3}
    .footer-follow .follow-txt-l svg:not(.follow-arrow-extra):not(.follow-arrow-mid){order:1}
    .footer-follow .follow-txt-l svg.follow-arrow-mid{order:2}
    .footer-follow .follow-txt-l svg.follow-arrow-extra{order:4}
    .footer-follow .follow-arrow-extra{display:block !important}
    .footer-follow .follow-arrow-mid{display:block !important}
    .footer-follow .follow-txt-word{display:none}
    .footer-follow .follow-txt-r span.follow-txt-word{order:3}
    .footer-follow .follow-txt-r svg:not(.follow-arrow-extra):not(.follow-arrow-mid){order:1}
    .footer-follow .follow-txt-r svg.follow-arrow-mid{order:2}
    .footer-follow .follow-txt-r svg.follow-arrow-extra{order:4}
    .footer-follow .follow-icons{flex-direction:column !important;gap:8px !important;align-items:center}
    .footer-follow .follow-single-txt{display:block !important;margin-top:8px}
    .footer-follow .follow-txt-l svg, .footer-follow .follow-txt-r svg{height:42px !important;width:24px !important}
    .hero-inner.has-offers{ gap:48px }
    .live-offers{ padding:20px 18px 12px; width:100%; max-width:none }
  }


/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url("a8.png");
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url("a9.png");
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url("a10.png");
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}




  @keyframes follow-blink{0%,100%{opacity:1}50%{opacity:.15}}

  .member .avatar .avatar-hover-img{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;transition:opacity .35s ease;pointer-events:none;
  }
  .member .avatar:hover .avatar-hover-img{opacity:1;filter:brightness(.72);transform:scale(1.04)}

  /* Uniform team cards — yellow only on hover */
  .member{transition:background .3s ease,color .3s ease}
  .member:hover{background:var(--yellow);color:var(--yellow-ink)}
  .member:hover .role{color:rgba(0,0,0,0.65)}
  .member:hover .bio{color:rgba(0,0,0,0.78)}
  .member:hover .bio span[style*="box-shadow"], .member:hover .bio svg{box-shadow:0 0 0 1px rgba(0,0,0,.25)}
  .member:hover a[aria-label^="LinkedIn"],
  .member:hover a[aria-label^="LinkedIn"]:hover{background:#0a0a0b;color:#fff;border-color:#0a0a0b}

  /* Sébastien's LinkedIn button stays black on card hover */

  .gender-btn.active{background:var(--yellow) !important;color:var(--yellow-ink) !important;border-color:var(--yellow) !important}

  /* Mad-lib style apply form */
  .ml-sentence{font-family:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",system-ui,sans-serif;font-size:18px;line-height:2.6;font-weight:500;color:var(--text);margin:0 0 2px}
  .field .ml-in{background:#141416;border:2px solid var(--yellow);color:#fff;font-family:inherit;font-weight:500;font-size:16px;padding:1px 10px;line-height:1.4;transition:box-shadow .2s ease;border-radius:8px;outline:none;min-width:60px}
  .field .ml-in:focus{background:#141416;color:#fff;box-shadow:0 0 16px rgba(255,240,0,.5)}
  .ml-in::placeholder{color:#8a8b8f;font-weight:500}
  .req-star{color:var(--yellow);font-weight:800;font-size:1.3em;margin-left:2px}
  .consent .req-star{font-size:1.3em}
  select.ml-in.ml-select{padding-right:32px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:16px;min-width:110px;cursor:pointer}
  .ml-req{color:var(--yellow);margin-left:2px}
  select.ml-in.ml-select option{color:#111;background:#fff}
  select.ml-in.ml-select option[value=""]{color:#8a8b8f}
  select.ml-in.ml-select.placeholder-active{color:#8a8b8f}
  .ml-file{display:inline-flex;align-items:center;gap:6px;background:var(--yellow);border-bottom:2px solid var(--yellow);padding:12px 16px;cursor:pointer;font-weight:700;border-top:none;border-left:none;border-right:none;border-radius:10px;min-height:0}
  .ml-file .pick{font-weight:700;color:var(--text);font-size:15px;white-space:nowrap}
  .ml-file .ph{font-size:13px;color:var(--muted);font-weight:500}
  .ml-file.has-file .ph{color:var(--yellow)}

  .ent-consent-row{grid-column:1/-1;margin:4px 0 10px}

  .ml-dropzone{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px 16px;border:2px dashed var(--yellow);border-radius:10px;background:rgba(255,240,0,0.08)}
  .ml-dropzone.dragover{background:rgba(255,240,0,0.22)}
  .ml-dropzone .pick{font-size:14px}
  .ml-dropzone .ph{font-size:12px;letter-spacing:0.14em}
  .ml-dropzone .ph:empty{display:none}

  #contactForm .ef{padding-top:20px}
  #contactForm .ef input,#contactForm .ef textarea{
    background:rgba(255,255,255,0.04);border:1px solid var(--line) !important;border-radius:8px;
    padding:14px 16px !important;border-bottom-width:1px !important;
  }
  #contactForm .ef input:focus,#contactForm .ef textarea:focus{border-color:var(--yellow) !important}
  #contactForm .ef label{left:16px;top:34px}
  #contactForm .ef input:focus + label,#contactForm .ef textarea:focus + label,
  #contactForm .ef input:not(:placeholder-shown) + label,#contactForm .ef textarea:not(:placeholder-shown) + label{
    transform:translateY(-42px);left:0;
  }
  #contactForm .ef .bar{display:none}

  #entForm .ef{padding-top:20px}
  #entForm .ef input,#entForm .ef textarea{
    background:rgba(255,255,255,0.04);border:1px solid var(--line) !important;border-radius:8px;
    padding:14px 16px !important;border-bottom-width:1px !important;
  }
  #entForm .ef input:focus,#entForm .ef textarea:focus{border-color:var(--yellow) !important}
  #entForm .ef label{left:16px;top:34px}
  #entForm .ef input:focus + label,#entForm .ef textarea:focus + label,
  #entForm .ef input:not(:placeholder-shown) + label,#entForm .ef textarea:not(:placeholder-shown) + label{
    transform:translateY(-42px);left:0;
  }
  #entForm .ef .bar{display:none}

  .fb-note-only{display:none}

  .met-search-wrap{display:flex;align-items:center;gap:10px;margin:0 auto}
  .met-search{background:rgba(0,0,0,0.45);border:1px solid var(--line);color:#fff;font:inherit;font-size:14px;padding:10px 16px;border-radius:8px;min-width:220px}
  .met-search::placeholder{color:#c9cacd}
  .met-search:focus{outline:none;border-color:var(--yellow)}
  .met-search-count{font-size:12px;color:var(--muted);white-space:nowrap}
  @media (max-width:760px){ .met-search-wrap{margin-left:0;width:100%} .met-search{flex:1;min-width:0} }

  @keyframes bridge-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
  @keyframes bridge-arrow-up{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes bridge-arrow-down{0%,100%{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(-10px)}}

  @keyframes bridge-arrow-up-wide{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
  @keyframes bridge-arrow-down-wide{0%,100%{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(-14px)}}