/* GÉNÉRÉ depuis pages/page-profonde/jobs/offres/data-engineer.html — fonts re-adressées */
/* Fontes embarquees : Mac garde SF (systeme) ; autres OS -> Geist (repli embarque, proche de SF). */
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/Geist.woff2') format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/GeistMono.woff2') format('woff2')}

/* ============================================================
   LIANEO - PAGE DÉDIÉE D'OFFRE  (gabarit single « Offre »)
   Sous-ensemble du style des pages profondes + spécifique offre.
   ============================================================ */
:root{
  --navy:#003B5D; --navy-deep:#002A43;
  --gold:#FCB600; --gold-soft:#FFD25E;
  --paper:#F7F4ED; --paper-2:#EFEAE0;
  --ink:#0A2E49; --ink-soft:#48617A; --hair:#D8D1C2;
  --mono:"SF Mono",Menlo,"Geist Mono","Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
  --sans:-apple-system,"Geist","Segoe UI",Roboto,Cantarell,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;
  background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:9px 9px}
body::before{content:"";position:fixed;inset:0;background:var(--paper);opacity:.80;pointer-events:none;z-index:0}
main,header.site,footer.site{position:relative;z-index:1}
a{color:var(--navy)}
::selection{background:var(--gold);color:var(--navy)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.bar-main:focus-visible,.term-end:focus-visible{outline:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
#top>.wrap{padding-top:32px}
.mono{font-family:var(--mono)}
#ruler{position:fixed;top:0;left:0;height:1.5px;width:100%;z-index:90;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
/* Navigateurs récents (Safari 26+, Chrome 115+) : la barre est animée PAR le défilement lui-même,
   côté compositeur — aucun JS, donc aucun à-coup pendant l'inertie tactile (retour interlocuteur). */
@supports (animation-timeline:scroll()){
  #ruler{animation:lianeo-ruler linear both;animation-timeline:scroll(root block)}
  @keyframes lianeo-ruler{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
/* ---------- RÉTICULE CURSEUR (site-wide) ---------- */
#xh-v,#xh-h{position:fixed;z-index:80;pointer-events:none;background:#fff;mix-blend-mode:difference;opacity:0;transition:opacity .25s}
#xh-v{top:0;bottom:0;width:1px}
#xh-h{left:0;right:0;height:1px}
#xh-l{position:fixed;z-index:80;pointer-events:none;font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--navy);background:var(--gold);padding:2px 7px;opacity:0;transition:opacity .3s;white-space:nowrap}
body.xh #xh-v,body.xh #xh-h{opacity:.22}
body.xh #xh-l{opacity:.5}body.xh-hot #xh-l{opacity:0}
#xh-v,#xh-h,#xh-l{display:none} /* réticule + coordonnées limités à la home (retour Laurent 26.06) */
@media (max-width:980px){#xh-v,#xh-h,#xh-l{display:none}}

header.site{position:sticky;top:0;z-index:50;background:rgba(247,244,237,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--hair)}
header.site.scrolled{box-shadow:0 1px 0 var(--navy)}
.nav{display:flex;align-items:center;gap:26px;height:72px;transition:height .25s;max-width:1080px;margin:0 auto;padding:0 28px}
header.site.scrolled .nav{height:58px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .mark{width:34px;height:34px;flex:none}
.brand b{font-family:var(--mono);font-size:20px;letter-spacing:.2em}
nav.menu{margin-left:auto;margin-right:18px;display:flex;gap:24px;align-items:center}
.menu>a.btn{margin-left:18px}
nav.menu>a{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;position:relative;padding:4px 0}
nav.menu>a.cur{color:var(--navy)} nav.menu>a.cur::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--gold)}
nav.menu>a:not(.cur)::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);transition:width .22s}
/* Le soulignement au survol SEULEMENT à la souris (B59, 13.08.2026) : au doigt, le :hover
   collait après le tap - un trait or coupé apparaissait sous l'entrée touchée du menu mobile.
   La règle maison depuis B53 : tout effet de survol vit sous @media (hover:hover).
   Le soulignement de la page COURANTE (.cur), lui, reste affiché partout - c'est un état. */
@media (hover:hover){nav.menu>a:hover::after{width:100%}}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:13px 22px;border:none;color:var(--navy);text-decoration:none;background:var(--gold);cursor:pointer;box-shadow:0 0 0 1.5px var(--navy),5px 5px 0 rgba(0,59,93,.5);transition:transform .14s,box-shadow .14s;font-weight:700}
.btn:hover{transform:translate(2px,2px);box-shadow:0 0 0 1.5px var(--navy),2px 2px 0 rgba(0,59,93,.5)}
.btn .ar{transition:transform .2s}.bic{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rec-note,.rec-lbl,.posted,.d-note{user-select:text;-webkit-user-select:text}.btn:hover .ar{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.btn.ghost:hover{box-shadow:0 0 0 1.5px var(--ink);background:var(--paper-2)}
.burger{display:none;margin-left:auto;background:none;border:1.5px solid var(--ink);font-family:var(--mono);padding:8px 12px;cursor:pointer}

.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:34px 0 10px}
.crumb a{color:var(--ink-soft);text-decoration:none}.crumb a:hover{color:var(--navy)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);margin:6px 0 16px;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:34px;height:2px;background:var(--gold)}
h1{font-family:var(--mono);font-size:clamp(27px,4vw,42px);line-height:1.14;letter-spacing:-.01em;text-transform:uppercase}

/* méta-barre offre */
.ometa{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 8px}
.badge{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px 3px;background:#fff;border:1px solid var(--hair);color:var(--navy);white-space:nowrap} /* padding asymétrique : centre optiquement les MAJUSCULES (pas de descendantes) sans changer la hauteur */
/* Domaine : UN SEUL style pour les deux branches - rectangle NAVY, flèche BLANCHE
   (déc. n°149, Johan). L'or de l'atelier pour le SI a été écarté : un seul langage,
   celui du rectangle « Domaine » des fiches référent. */
.badge.dom-si{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.badge.dom-emb{background:var(--navy);color:var(--paper);border-color:var(--navy)}
/* Le salaire a PERDU son cadre or (déc. n°149, demande Johan) : même cadre que les autres.
   La classe .sal reste posée dans le HTML - elle sert au garde « aucun badge de salaire
   vide » de l'étage 5, et permettrait de revenir en arrière d'une ligne. */
.badge.sal{font-weight:700;color:var(--navy)}
.rec-lbl{font-family:var(--mono);font-size:12px;font-weight:400;color:#A89F8C;letter-spacing:.04em;margin:26px 0 4px}
.rec-note{font-family:var(--mono);font-size:14px;font-weight:400;line-height:1.75;color:#A89F8C;max-width:62em;margin:0 0 6px}
.posted{font-family:var(--mono);font-size:12px;font-weight:400;color:#A89F8C;margin-top:6px}
.ofr-head{padding:24px 26px;margin:6px 0 16px}
.ofr-head .kicker{margin-top:0}
.ofr-head .lead{margin-bottom:2px}
.sec-tb{display:flex;align-items:baseline;gap:16px;margin:30px 0 8px}
.obody .sec-tb:first-child{margin-top:0}
.obody .sec-tb h2{margin:0;padding:0;border:none;font-family:var(--mono);font-size:clamp(19px,2.4vw,25px);text-transform:uppercase;letter-spacing:.01em;color:var(--navy)}
.sec-tb .rev{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-soft);text-align:right;white-space:nowrap}
.sec-rule{height:2px;background:var(--navy);position:relative;transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1);margin-bottom:24px}
.sec-rule::after{content:"";position:absolute;right:-8px;top:-4px;border:5px solid transparent;border-right:0;border-left:8px solid var(--navy)}
.sec-rule.in{transform:scaleX(1)}
.corners{background-image:linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink)),linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;background-position:top left,top left,top right,top right,bottom left,bottom left,bottom right,bottom right}

.lead{font-size:16px;color:var(--ink);max-width:60em;margin:40px 0 0;line-height:1.7}

.obody{margin-top:8px;padding:34px 0}
.obody h2{font-family:var(--mono);font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy);margin:26px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--hair)}
.obody h2:first-child{margin-top:0}
.obody ul{list-style:none}
.obody li{font-size:16px;color:var(--ink);padding:7px 0 7px 20px;position:relative}
.obody li::before{content:"\203A";position:absolute;left:0;color:var(--gold);font-weight:700}

/* encart postuler */
.apply{margin:26px 0 36px;background:var(--paper-2);border-left:4px solid var(--navy);padding:26px 30px;box-shadow:none;color:var(--ink)}
.apply .eyebrow{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px}
.apply .eyebrow svg{stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.apply .q{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--navy);line-height:1.5;margin:2px 0 12px;max-width:46em}
.apply p{font-size:16px;color:var(--ink-soft);line-height:1.7;margin:0 0 20px;max-width:60em}
.apply .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.apply .share{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#fff;border:none;color:var(--navy);padding:12px 18px;cursor:pointer;box-shadow:0 0 0 1.5px var(--navy),5px 5px 0 rgba(0,59,93,.5);transition:transform .14s,box-shadow .14s}
.apply .share:hover{transform:translate(2px,2px);box-shadow:0 0 0 1.5px var(--navy),2px 2px 0 rgba(0,59,93,.5)}
.apply .back{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;display:inline-block;margin-top:46px}
.apply .back:hover{color:var(--navy)}
.note{font-family:var(--mono);font-size:11px;color:#A89F8C;border-top:1px dashed var(--hair);padding-top:14px;margin-top:6px}

footer.site{background:var(--navy-deep);color:#B9CBD9;padding:48px 0 60px;margin-top:10px}
.fcols{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:40px;font-size:14px;max-width:1080px;margin:0 auto;padding:0 28px}
.fcols .mark{width:50px;height:50px}
.fcols h2{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;margin-bottom:14px;color:#7B95AB}
.fcols a{display:block;color:#D7E2EB;text-decoration:none;padding:4px 0;width:max-content}
.fcols a:hover{color:var(--gold)}
.fcols a[aria-current]{color:var(--gold)}
.fline{font-family:var(--mono);font-size:10px;color:#7B95AB;margin:34px auto 0;max-width:1080px;padding:18px 28px 0;border-top:1px solid rgba(255,255,255,.12);letter-spacing:.04em}

.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
#toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,20px);background:var(--navy);color:var(--paper);font-family:var(--mono);font-size:12px;padding:11px 18px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:95;box-shadow:none}
#toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:980px){
  nav.menu{display:none}
  nav.menu.open{display:flex;position:absolute;top:72px;left:0;right:0;background:var(--paper);border-bottom:2px solid var(--navy);flex-direction:column;align-items:flex-start;padding:20px 28px;gap:16px}
  .burger{display:block}
  .fcols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .fcols{grid-template-columns:1fr}
  .apply .back{margin-left:0}
}
/* PRODUCTION : préférence « animations réduites » du visiteur respectée */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

/* LinkedIn dans le menu : icône poussée tout à droite (bord de l'écran), sans séparateur */
.menu .li-ic{display:inline-flex;align-items:center;margin-left:34px;color:var(--ink);transition:color .15s}
.menu .li-ic+.li-ic{margin-left:-4px}
@media (hover:hover){.menu .li-ic:hover{color:var(--gold)}}
.menu .li-ic::after{content:none!important}
.menu .li-ic svg{width:21px;height:21px;display:block}
.li-ic img{width:21px;height:21px;display:block;object-fit:contain}
@media(max-width:980px){.menu .li-ic,.menu .li-ic+.li-ic{margin-left:0}}

/* ===== CONSOLE tail -f (injectée sur toutes les pages) ===== */
.term{display:none!important}  /* console retirée de cette page (déc. 25.06) */
:root{--term-bg:#021A2B;--term-green:#54D78C;--term-dim:#6E87A0;--term-fg:#C8D6E4}
/* ---------- CONSOLE (bas-droite) ---------- */
/* largeur : 460 -> 387 (ajustements successifs) */
.term{position:fixed;right:18px;bottom:18px;z-index:60;width:min(387px,calc(100vw - 40px));font-family:var(--mono)}
.term-bar{display:flex;align-items:stretch;background:var(--term-bg);border:1px solid #15364E;box-shadow:0 8px 24px rgba(0,20,35,.35)}
.bar-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--term-green);font-family:var(--mono);font-size:12px;padding:11px 12px 11px 15px;cursor:pointer;text-align:left}
.bar-main .dots i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:#1E4159}
.bar-main .dots i:first-child{background:var(--gold)}
.bar-main .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-main .chev{margin-left:auto;color:var(--term-dim);transition:transform .25s}
.term.open .bar-main .chev{transform:rotate(180deg)}
/* curseur clignotant en fin de titre : signale qu'on peut ouvrir la console (visible seulement fermée) */
.bar-main .caret{color:var(--term-green);margin-left:1px;animation:cblink 1.1s step-end infinite}
.term.open .bar-main .caret{display:none}
@keyframes cblink{50%{opacity:0}}
/* bouton d'agrandissement : visible seulement quand la console est ouverte */
.bar-btn{background:none;border:none;border-left:1px solid #15364E;color:var(--term-dim);font-family:var(--mono);font-size:16px;padding:0 13px;cursor:pointer;transition:color .15s}
.bar-btn:hover{color:var(--gold)}
.bar-exp{display:none}
.term.open .bar-exp{display:block}
.term.expanded .bar-exp{color:var(--gold)}

.term-body{display:none;flex-direction:column;max-height:min(66vh,480px);background:var(--term-bg);border:1px solid #15364E;border-top:none;box-shadow:0 8px 24px rgba(0,20,35,.35)}
.term.open .term-body{display:flex}
.term.expanded .term-body{height:min(72vh,608px);max-height:72vh}   /* AGRANDI (hauteur -20 %) */

/* zone FEED (tail -f) - défile */
.term-actus{flex:1;overflow:auto;padding:12px 15px}
.term-actus .feedhdr{color:var(--term-green)}
/* prompt figé en bas = repère visuel de fin ("on est revenu au prompt") */
.term-end{flex:none;border-top:1px solid #15364E;background:var(--term-bg);padding:9px 15px;font-size:12px;color:var(--term-dim);letter-spacing:.02em;cursor:text}
.term-end .ps{color:var(--term-green)} .term-end .typed{color:var(--term-fg)}
.term-end .cur{display:inline-block;width:7px;height:1em;vertical-align:-2px;margin-left:4px;background:var(--term-green);animation:cblink 1.1s step-end infinite}
/* invite verrouillée (easter egg, après 2 envois) : grisée + curseur figé (ne clignote plus) */
.term.term-locked .term-end{color:#33485B;cursor:not-allowed}
.term.term-locked .term-end .ps,.term.term-locked .term-end .typed{color:#33485B}
.term.term-locked .term-end .cur{animation:none;background:#33485B}

/* lignes */
.line{font-size:12px;line-height:1.85;color:var(--term-fg);opacity:0;transform:translateY(5px);transition:opacity .3s,transform .3s;word-wrap:break-word}
.line.show{opacity:1;transform:none}
.line .dt{color:var(--term-dim)}
.t-offre{color:var(--term-green)} .t-news{color:#7FB4EE} .t-li{color:var(--gold)} .t-article{color:#F7F4ED;font-weight:700}
.term-actus a{color:inherit;text-decoration:none}
/* lignes cliquables (OFFRE / LinkedIn) : surlignage au survol */
.line.clk{cursor:pointer}
.term-actus a.feedlink{display:block;color:inherit;text-decoration:none;cursor:pointer}
.term-actus a.feedlink .ftxt{transition:background .14s;border-radius:2px}
.term-actus a.feedlink:hover .ftxt,.term-actus a.feedlink:focus-visible .ftxt{background:rgba(84,215,140,.20)}
/* easter egg : réponse humoristique quand on tape dans le faux prompt */
.line.jest{color:var(--gold-soft)}
/* fermeture auto en douceur (~0,9 s) - 1re visite du jour */
.term-body{overflow:hidden;transition:opacity .35s ease,max-height .5s cubic-bezier(.4,0,.2,1)}
.term.closing .term-body{opacity:0}

/* ============ VUES DU PROJET (standard) - ≤980 / ≤720 / ≤560 ============ */
@media (max-width:560px){
  .term{left:10px;right:10px;bottom:10px;width:auto}
  .term-body{max-height:72vh}
  .term.expanded .term-body{height:70vh;max-height:70vh}
}
/* ===== Candidature : panneau latéral + effet ===== */
.req{color:var(--gold)}
.bitlayer{position:fixed;inset:0;pointer-events:none;z-index:400}
.bitlayer .bit{position:fixed;font-family:var(--mono);font-weight:700;color:var(--navy);font-size:16px;line-height:1;opacity:1;transition:transform 1.7s cubic-bezier(.2,.6,.2,1),opacity 1.8s ease;will-change:transform,opacity}
.btn.sent{background:none!important;border:none!important;box-shadow:none!important;color:#A89F8C;font-family:var(--mono);font-weight:400;font-size:14px;letter-spacing:.04em;cursor:default;padding:10px 0;text-transform:none;transform:none!important}
.veil{position:fixed;inset:0;background:rgba(0,42,67,.45);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:300}
.veil.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:310;background:var(--paper);transform:translateX(102%);transition:transform .42s cubic-bezier(.2,.85,.25,1);display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,42,67,.3)} /* fond uni (quadrillage retiré sur ce panneau — retour interlocuteur 16.07) */
.sheet.open{transform:translateX(0)}
.sh-grab{display:none}
@media(max-width:720px){.sheet{top:auto;height:88vh;width:100vw;transform:translateY(104%);box-shadow:0 -12px 40px rgba(0,42,67,.3)}.sheet.open{transform:translateY(0)}.sh-grab{display:block;width:52px;height:5px;border-radius:3px;background:var(--hair);margin:10px auto 2px}}
.sh-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:2px solid var(--navy);background:var(--paper)}
.sh-head .tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;background:var(--navy);color:#fff;padding:5px 10px;text-transform:uppercase;white-space:nowrap}
.sh-head .nm{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.sh-head button{margin-left:auto;background:none;border:1.5px solid var(--navy);font-family:var(--mono);font-size:14px;width:36px;height:36px;cursor:pointer;color:var(--navy);flex:none;transition:background .15s}
.sh-head button:hover{background:var(--gold)}
.sh-body{flex:1;overflow:auto;padding:22px 22px 28px}
/* Formulaire sur carte blanche (motif charte : carte + liseré hair sur papier quadrillé),
   labels renforcés — lisibilité (retour interlocuteur 16.07) */
.aform{display:flex;flex-direction:column;gap:16px;background:#fff;box-shadow:0 0 0 1px var(--hair);padding:22px 20px}
.aform .field{min-width:0}.aform input{max-width:100%;min-width:0}   /* idem : type=file */
.aform .field{display:flex;flex-direction:column;gap:6px}
.aform label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);font-weight:700}
.aform input,.aform textarea{font-family:var(--sans);font-size:16px;padding:11px 12px;border:1px solid #C9C1B0;background:var(--paper);color:var(--ink);width:100%;transition:border-color .15s,background .15s}
.aform input:focus,.aform textarea:focus{outline:none;border-color:var(--navy);background:#fff}
.aform .btn{margin-top:8px;justify-content:center;width:100%}
.aform .d-note{font-family:var(--mono);font-size:12px;color:#A89F8C;margin:2px 0 0}
/* badge « Recrutement client » (repris de la liste /jobs/) */
.badge.t-recrut{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.mark-round{border-radius:50%}

/* opt-out de la peau commune : le panneau candidature reste SANS quadrillage (retour interlocuteur 16.07) */
aside.sheet{background-image:none}
aside.sheet::before{display:none}

/* ── Le domaine dans la ligne d'annotation (déc. n°147) : gris comme le commentaire, souligné d'or. */
.posted a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:1px}
@media (hover:hover){.posted a:hover{color:var(--navy)}}

/* ── Menu de partage (déc. n°148) - la peau des boutons du site : blanc, cerné navy, ombre décalée.
      Position posée par partage.js (sous le bouton, ou au-dessus si la place manque). */
.pmenu{position:absolute;z-index:80;min-width:252px;background:#fff;box-shadow:0 0 0 1.5px var(--navy),5px 5px 0 rgba(0,59,93,.5)}
.pm-item{display:flex;gap:11px;align-items:center;padding:12px 17px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);text-decoration:none;cursor:pointer}
.pm-item+.pm-item{border-top:1px solid var(--hair)}
.pm-item svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.pm-item svg.pm-in{fill:currentColor;stroke:none}
@media (hover:hover){.pm-item:hover{background:var(--paper-2, #EFEAE0)}}
/* Le badge de domaine est un LIEN sur la fiche (déc. n°149) : trois signaux de clic - seul badge
   plein de la rangée, une flèche (blanche : elle hérite de la couleur du texte), la couleur de sa
   destination. Pas de soulignement : le badge est déjà un objet cliquable à l'œil. */
a.badge{text-decoration:none;cursor:pointer}
a.badge .fl{margin-left:2px;display:inline-block;transform:translateY(-1.5px)}
  /* ↑ la flèche flottait 1-2 px trop bas dans le rectangle (retour Johan 13.08.2026) : les
     MAJUSCULES n'ont pas de descendantes, la ligne de base optique est plus haute que la
     géométrique - même famille de réglage que le padding asymétrique des badges. */
@media (hover:hover){a.badge.dom-emb:hover,a.badge.dom-si:hover{box-shadow:0 0 0 1.5px var(--navy)}}
/* ── Fil d'Ariane (déc. n°152) : le cartouche est un chemin. Segments couleur du cartouche,
      séparateurs or, la page courante en navy. */
.kicker a{color:inherit;text-decoration:none}
/* Fil d'Ariane : la référence complète sur PC, la référence courte (mots-clés du titre) sur le téléphone tenu
   droit, sur la même ligne que « Lianeo / Blog / », comme les fiches d'offre (déc. n°182). */
.kicker .ref-c{display:none}
@media (hover:hover){.kicker a:hover{color:var(--navy)}}
.kicker .sep{color:var(--gold);margin:0 7px}
.kicker .ici{color:var(--navy)}

/* Le trait de défilement s'efface quand une feuille est ouverte (généralise la déc. n°155 aux
   sept feuilles du site, demande Johan 13.08.2026) : figé au-dessus de la feuille, il mentait -
   plus de défilement à mesurer. Il revient à la fermeture, au bon endroit. */
#ruler{transition:opacity .25s}
body.sheet-open #ruler{opacity:0}


/* ======================================================================
   BLOG - la fiche d'article /blog/<slug>/ (thème 1.1.0, déc. n°168, n°170)
   Base : offre.css (chrome, console, cartouches, badges, bouton Partager). Aperçus validés le 08.10.2026.
   ====================================================================== */
.enbref{margin:30px 0 8px;padding:18px 22px 10px;border:1.5px solid var(--navy);background:rgba(0,59,93,.03);position:relative}
.enbref::before{content:"/* TL;DR */";position:absolute;top:-9px;left:16px;background:var(--paper);padding:0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--gold);font-weight:700}
.enbref ul{list-style:none;margin:6px 0 0;padding:0}
.enbref li{position:relative;padding:5px 0 5px 22px;font-size:15px;color:var(--ink);line-height:1.55}
.enbref li::before{content:">";position:absolute;left:0;font-family:var(--mono);color:var(--navy);font-weight:700}
.obody h3{font-family:var(--mono);font-size:16px;color:var(--navy);margin:26px 0 8px;letter-spacing:.02em}
.obody p,.obody li{font-size:16px;line-height:1.7;color:var(--ink)}
.obody p{margin:0 0 16px}              /* les offres n'espacent pas deux <p> : un article long en a besoin */
.obody img{max-width:100%;height:auto;display:block;margin:20px auto}
/* Image avec légende de l'éditeur classique : WordPress écrit sa largeur en dur (style="width:1034px"),
   l'image débordait de l'écran du téléphone (relecture du 08.10.2026). */
.obody .wp-caption{max-width:100%;margin:20px 0}
.obody .wp-caption-text{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:8px 0 0}
/* Liste numérotée : offre.css pose un chevron or sur TOUT li et ne retire la puce que des <ul> ; un <ol>
   montrait « 1. › » avec le numéro hors de la colonne. Numéro or en mono à la place du chevron. */
.obody ol{list-style:none;padding:0;counter-reset:n}
.obody ol>li{counter-increment:n;padding-left:28px}
.obody ol>li::before{content:counter(n) ".";font-family:var(--mono);font-size:13px;top:9px}
/* Formulaire d'un article protégé par mot de passe */
.obody.protege form p{margin:0 0 12px}.obody.protege input[type=password]{font:inherit;padding:8px 10px;border:1.5px solid var(--navy);background:#fff}
.obody.protege input[type=submit]{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;border:none;background:var(--navy);color:#fff;cursor:pointer}
.obody figure{margin:20px 0}.obody figcaption{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}
/* Schémas SVG du corps (section 17 bis de functions.php, 16.10.2026). La figure garde le papier de la
   charte EN DUR (#F7F4ED, pas la variable) : si un mode sombre arrivait un jour, le trait navy resterait
   lisible. Le dessin suit la largeur du texte, ses width et height fixes sont neutralisés, son viewBox
   fait l'échelle. Police : Geist Mono D'ABORD (déclarée en tête de cette feuille), puis la pile mono du
   thème : le générateur dessine avec ses métriques, et la pile seule donnait Menlo sur Mac et iPhone
   (SF Mono n'y est pas joignable par son nom), d'où deux fontes dans un même dessin. Écart à tokens.md
   assumé pour les seuls schémas. Un font-family écrit dans le SVG reste prioritaire. Repères de coin :
   la classe .corners. */
.obody .aschema{width:90%;margin:28px auto;padding:22px 20px 16px;background-color:#F7F4ED;color-scheme:light}
.obody .aschema svg{display:block;width:100%;max-width:100%;height:auto;font-family:"Geist Mono",var(--mono)}
.obody .aschema figcaption{margin-top:12px;overflow-wrap:anywhere;text-align:center}
.obody .aschema-manque{margin:20px 0;padding:12px 16px;border:2px dashed #B3261E;background:#fff;color:#B3261E;font-family:var(--mono);font-size:12px;line-height:1.5}
.obody .aschema-manque span{color:var(--ink-soft)}
/* Taille et position (déc. n°189). 90 % au plus de la colonne : le schéma se lit intégré au texte, jamais
   exactement à sa largeur. Sous 90 %, centré, ou aligné à gauche ou à droite ; aligné AVEC un paragraphe
   juste après, les deux forment un .aschema-duo : le texte dans une colonne de largeur fixe, aligné en
   haut, qui ne passe jamais sous le schéma. Côte à côte seulement quand la colonne a sa pleine largeur
   (1 024 px dès 1 100 px d'écran) : c'est sur elle qu'est calculée la place du texte
   (lianeo_schema_place_texte). En dessous, empilé et centré ; au téléphone, toujours 90 %. */
.obody .aschema.t70{width:70%}.obody .aschema.t50{width:50%}.obody .aschema.t40{width:40%}
.obody .aschema-duo{margin:28px 0}
.obody .aschema-duo>.aschema{margin:0 auto}
.obody .aschema-duo>.aschema-texte{margin-top:22px}
.obody .aschema-duo>.aschema-texte>p:last-child{margin-bottom:0}
/* Une adresse ou un identifiant insécable se coupe dans la colonne au lieu de passer sous le schéma ou
   hors de l'écran (relecture du 16.10.2026) ; dans tout le corps, au téléphone, il en va de même. */
.obody p,.obody li,.obody h2,.obody h3{overflow-wrap:break-word}
.obody .aschema-texte,.obody .aschema-texte p{overflow-wrap:anywhere}
/* Empilé sur tablette (721 à 1 099 px), un schéma à 40 % serait plus étroit qu'au téléphone : 50 %. */
@media (min-width:721px) and (max-width:1099px){.obody .aschema.t40{width:50%}}
@media (min-width:1100px){
  .obody .aschema.gauche{margin-left:0}.obody .aschema.droite{margin-right:0}
  .obody .aschema-duo{display:flex;align-items:flex-start;gap:32px}
  .obody .aschema-duo.droite{flex-direction:row-reverse}
  .obody .aschema-duo>.aschema{flex:0 0 auto;margin:0}
  .obody .aschema-duo>.aschema-texte{flex:1 1 0;min-width:0;margin-top:0}
}
@media (max-width:720px){.obody .aschema.t70,.obody .aschema.t50,.obody .aschema.t40{width:90%}}
@media (max-width:560px){.obody .aschema{margin:22px auto;padding:14px 12px 12px}.obody .aschema-duo{margin:22px 0}.obody .aschema-duo>.aschema-texte{margin-top:18px}
  .obody .aschema figcaption{font-size:9px;letter-spacing:.06em;margin-top:8px}}   /* téléphone : légende à la mesure du dessin réduit (9 px, le plancher de la charte pour les légendes de schéma) */
.obody blockquote p{margin:0}
.obody blockquote{margin:22px 0;padding:4px 0 4px 20px;border-left:3px solid var(--gold);font-family:var(--mono);font-size:14px;color:#48617A;line-height:1.7}
/* Bloc de code au style de la console : <pre class="code"> (ou le format « Préformaté » de l'éditeur) */
.obody pre{margin:20px 0;padding:16px 18px;background:var(--term-bg);color:var(--term-fg);font-family:var(--mono);font-size:13px;line-height:1.6;overflow-x:auto;border:1px solid #15364E;white-space:pre}
.obody pre .c{color:#6E87A0}.obody pre .k{color:var(--term-green)}
.obody code{font-family:var(--mono);font-size:.92em}
.obody :not(pre)>code{background:rgba(0,59,93,.07);padding:1px 5px}
/* Les titres de section HORS du corps (FAQ, Sources, Lire aussi) prennent le même cartouche que
   ceux du corps : offre.css ne style que « .obody .sec-tb h2 » (vu le 08.10.2026). */
.afaq .sec-tb h2,.asrc .sec-tb h2,.lire .sec-tb h2{margin:0;padding:0;border:none;font-family:var(--mono);font-size:clamp(19px,2.4vw,25px);font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:var(--navy)}
.asrc{margin-top:36px}
/* Un lien dans le texte d'un article : le trait or de la maison (.lien-emb, .posted a). */
.obody a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:1px}
@media (hover:hover){.obody a:hover{color:var(--navy)}}
/* La FAQ au gabarit des pages métiers (logiciel-embarque.css, déc. n°09, repris déc. n°178) : « + » or à
   droite qui tourne en croix, question en gras quand ouverte. Dernier bloc de la page : pas de trait sous
   la dernière question. */
.afaq{margin-top:44px}
.faq details{border-bottom:1px solid var(--hair)}
.faq details:last-of-type{border-bottom:none}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 4px;font-family:var(--mono);font-size:16px;color:var(--navy);position:relative;letter-spacing:.01em}
.faq details[open] summary{font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:20px;color:var(--gold);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 36px 20px 4px;margin:0;color:var(--ink-soft);max-width:60em;font-size:16px;line-height:1.7}
.asrc ol{margin:0;padding-left:22px}
.asrc li{font-size:14px;color:var(--ink-soft);line-height:1.7}
.asrc a{color:var(--navy);text-decoration:none;border-bottom:1.5px solid var(--gold)}
/* ===== La fiche de l'auteur : la carte de l'équipe de /contact/, telle quelle (déc. n°174) ===== */
/* Règles reprises de contact.css (validées le 10.08.2026) : photo ronde à l'anneau navy, nom, rail
   Domaine / Périmètre, description, « Lui écrire ». Même balisage, même fonction PHP. */
/* La ligne de fin (déc. n°178) : auteur à gauche, Partager / Retour à droite sur PC ; empilés sur téléphone. */
.fin{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin:56px 0 0;padding-top:56px;border-top:1px dashed var(--hair)}   /* dernier bloc, sous la FAQ ; 56 px de part et d'autre du pointillé, le rythme des sections de /job/ (déc. n°181) */
.auteur{flex:1;min-width:0}
.auteur .rec-fiche{align-items:center}   /* sans le rail ni la description (déc. n°185), le nom et « Lui écrire » se centrent sur la photo */
.auteur .kicker{margin:0 0 10px}   /* « Publié le … et écrit par », trait or en tête (déc. n°175) */
.rec-fiche{display:flex;gap:12px;align-items:flex-start;padding:14px 0 12px}
.rec-pp{width:94px;height:94px;border-radius:50%;flex:none;object-fit:cover;box-shadow:0 0 0 1.5px var(--navy)}
.rec-mono{display:grid;place-items:center;background:var(--paper-2);color:var(--navy);font-family:var(--mono);font-size:24px}
.rec-txt{min-width:0;flex:1}
.rec-nom{font-family:var(--mono);font-size:13.5px;color:var(--navy);font-weight:700;margin:0}
.rec-specs{display:grid;grid-template-columns:max-content 1fr;gap:5px 12px;margin:5px 0 2px;align-items:baseline}
.rec-specs dt{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.rec-specs dd{margin:0;min-width:0;justify-self:start}
.rec-plein{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--navy);padding:4px 8px 2px}
.rec-gras{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-weight:700}
.rec-txt .rec-li{margin-top:9px}
.rec-desc{font-size:12.5px;line-height:1.5;margin:3px 0 5px;color:var(--ink)}
.rec-li{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px;transition:border-color .15s}
.rec-li svg{flex:none;opacity:.75;transition:opacity .15s}
@media (hover:hover){.rec-li:hover{border-bottom-color:var(--gold)}.rec-li:hover svg{opacity:1}}
/* ===== Partager, puis le retour au format « ← Retour aux offres » des fiches d'offre (déc. n°175, n°176) ===== */
.ashare{display:flex;flex-direction:column;align-items:flex-end;flex:none;margin:26px 0 0}   /* à hauteur de la fiche, sous la ligne « Publié le » */
.ashare .share{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:198px;font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:#fff;border:none;color:var(--navy);padding:12px 18px;cursor:pointer;touch-action:manipulation;box-shadow:0 0 0 1.5px var(--navy),5px 5px 0 rgba(0,59,93,.5);transition:transform .14s,box-shadow .14s}
@media (hover:hover){.ashare .share:hover{transform:translate(2px,2px);box-shadow:0 0 0 1.5px var(--navy),2px 2px 0 rgba(0,59,93,.5)}}
.ashare .back{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;display:inline-block;margin-top:23px}   /* 46 → 23 px (déc. n°177) */
@media (hover:hover){.ashare .back:hover{color:var(--navy)}}
/* De l'air avant le pied de page : 178 px entre le retour et le pied de page, ramenés à ~53 (déc. n°177) */
main{padding-bottom:40px}   /* de l'air entre le bloc de l'auteur, désormais dernier, et le pied de page (déc. n°180) */
/* ===== La pluie de bits (déc. n°176, réglée n°177) : une bande au ras du pied de page ; des 0 et des 1 en
   sortent sans cesse, un par un, et s'effacent lentement en montant (5 à 7,5 s), tant que la bande est à
   l'écran. La bande est basse, les chiffres la dépassent vers le haut (overflow visible), à faible opacité. ===== */
.bits{position:relative;height:45px;overflow:visible;pointer-events:none}
.bits span{position:absolute;bottom:-16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--navy);opacity:0;white-space:nowrap;will-change:transform,opacity}
.bits.on span{animation:bitrise var(--d,6s) cubic-bezier(.25,.6,.35,1) forwards}
@keyframes bitrise{0%{transform:translateY(0);opacity:0}15%{opacity:var(--o,.45)}75%{opacity:calc(var(--o,.45)*.5)}100%{transform:translateY(var(--monte,-77px));opacity:0}}   /* PC : 110 → 77 px, −30 % (déc. n°183) ; portrait : 58 px */
@media (prefers-reduced-motion:reduce){.bits{display:none}}
.lire{margin:44px 0 0}
.lire .lgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.lire a.lcard{display:block;padding:14px 16px;border:1px solid var(--hair);text-decoration:none;color:inherit;transition:border-color .15s}
.lire a.lcard:hover{border-color:var(--navy)}
.lire .lk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700;display:block;margin-bottom:6px}
.lire h3{margin:0 0 4px;font-family:var(--mono);font-size:14px;color:var(--navy);line-height:1.4}
.lire p{margin:0;font-size:13px;color:var(--ink-soft)}

/* ===== maillage vers une page métier (déc. n°166) ===== */
.posted a{color:inherit;text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:1px}
.posted.maille{margin-top:28px}
.badge.cat{text-decoration:none}
.badge.cat:hover{border-color:var(--navy);color:var(--navy)}

@media (max-width:720px){
  /* Téléphone en portrait : le bloc auteur en CARTOUCHE DE PLAN (déc. n°184, remplace le centrage de la n°182).
     Un cadre navy ; un bandeau « Publié le … et écrit par » ; la photo, le nom et « Lui écrire » ; le domaine et
     le périmètre dans une petite table à filets ; la description sur toute la largeur. Même balisage que la fiche
     de /contact/ (lianeo_rec_fiche_html), remis en grille ici seulement. Partager prend la largeur du cartouche,
     le retour est centré dessous. */
  .fin{flex-direction:column;align-items:stretch;gap:0}
  .auteur{border:1.5px solid var(--navy);background:#fff}
  .auteur .kicker{margin:0;padding:9px 14px;border-bottom:1px solid var(--hair);background:var(--paper-2);font-size:10px;letter-spacing:.16em;justify-content:flex-start}
  .auteur .kicker:last-child{border-bottom:0}   /* article signé « Lianeo » : le bandeau seul */
  .auteur .kicker::before{display:none}
  .auteur .rec-fiche{display:grid;grid-template-columns:84px 1fr;grid-template-areas:"pp nom" "pp li" "sp sp" "de de";align-items:center;gap:0;padding:0}
  .auteur .rec-txt{display:contents}
  .auteur .rec-pp{grid-area:pp;width:58px;height:58px;margin:12px 0 12px 14px}
  .auteur .rec-mono{font-size:17px}
  .auteur .rec-nom{grid-area:nom;align-self:end;padding:14px 14px 0 0;overflow-wrap:anywhere}
  .auteur .rec-li{grid-area:li;align-self:start;justify-self:start;margin:6px 0 12px}
  .auteur .rec-fiche:not(:has(.rec-li)) .rec-nom{grid-row:1 / span 2;align-self:center;padding-top:0}   /* sans LinkedIn : le nom au milieu de la photo */
  .auteur .rec-specs{grid-area:sp;margin:0;border-top:1px solid var(--hair);grid-template-columns:100px 1fr;gap:0}
  .auteur .rec-specs dt,.auteur .rec-specs dd{padding:9px 14px;border-bottom:1px solid var(--hair);margin:0;justify-self:stretch}
  .auteur .rec-specs dt{border-right:1px solid var(--hair)}
  .auteur .rec-fiche:not(:has(.rec-desc)) .rec-specs > :nth-last-child(-n+2){border-bottom:0}   /* pas de double filet contre le cadre */
  .auteur .rec-desc{grid-area:de;padding:10px 14px 12px;margin:0}
  .auteur .rec-fiche:not(:has(.rec-specs)) .rec-desc{border-top:1px solid var(--hair)}
  .ashare{align-items:stretch;margin-top:18px}
  .ashare .share{justify-content:center}
  .ashare .back{align-self:center;margin-top:22px}
  /* Fil d'Ariane : la référence courte, sur la même ligne, espacement de lettres resserré sur ce seul segment */
  .kicker .ref-l{display:none}
  .kicker .ref-c{display:inline}
  .kicker{gap:8px}   /* 12 → 8 px entre les segments du fil : 20 px gagnés, la référence de 12 caractères tient dès 375 px (mesuré) */
  .kicker .ici{min-width:0;letter-spacing:.16em;overflow-wrap:anywhere}
  /* La pluie de bits monte moins haut : elle ne doit pas passer sur « Retour aux autres articles » */
  .bits{--monte:-58px}
  .lire .lgrid{grid-template-columns:1fr}
  .rec-pp{width:72px;height:72px}.rec-mono{font-size:19px}.rec-fiche{padding:2px 0}
}
@media (max-width:560px){
  .enbref{padding:16px 16px 8px}.enbref li{font-size:14.5px}
  .obody pre{font-size:12px}

}