:root { --bleu:#014687; --encre:#12212e; --nuit:#0d1b2c; --jaune:#ffdd0c; --gris:#5f6d79; --gris-clair:#7d8b97; --bordure:#e2e8ee; }
* { box-sizing:border-box; }
body { margin:0; background:#f6f8fa; color:var(--encre); font-family:'Archivo',Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
a:hover { opacity:.85; }
.mono { font-family:'IBM Plex Mono',monospace; }
.label { font:600 12px 'IBM Plex Mono',monospace; color:var(--gris); letter-spacing:.14em; margin-bottom:14px; }
header { position:sticky; top:0; z-index:10; background:var(--nuit); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:16px 44px; }
.brand { display:flex; align-items:center; gap:10px; font:700 15px 'Archivo',sans-serif; letter-spacing:.06em; }
.brand span { width:8px; height:8px; background:var(--jaune); border-radius:2px; }
nav { display:flex; align-items:center; gap:26px; font:500 13px 'Archivo',sans-serif; letter-spacing:.03em; color:#c3ccd4; }
nav .pill { display:flex; align-items:center; color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); padding:8px 12px; border-radius:99px; }
.lang { display:flex; align-items:center; border:1px solid rgba(255,255,255,.22); border-radius:99px; overflow:hidden; font:600 11px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.lang a { color:#c3ccd4; padding:7px 11px; }
.lang a + a { border-left:1px solid rgba(255,255,255,.16); }
.lang a.actif { background:var(--jaune); color:var(--nuit); }
.lang a.actif:hover { opacity:1; }
.lang-menu { display:none; position:relative; font:600 11px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.lang-menu summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; color:var(--nuit); background:var(--jaune); border-radius:99px; padding:8px 0; min-width:64px; }
.lang-menu summary::-webkit-details-marker { display:none; }
.lang-menu summary::after { content:'▾'; font-size:9px; }
.lang-menu[open] summary { border-radius:14px 14px 0 0; }
.lang-menu[open] summary::after { content:'▴'; }
.lang-menu > div { position:absolute; left:0; right:0; top:100%; z-index:20; background:var(--nuit); border:1px solid rgba(255,255,255,.22); border-top:none; border-radius:0 0 14px 14px; overflow:hidden; display:flex; flex-direction:column; }
.lang-menu > div a { color:#c3ccd4; padding:11px 0; text-align:center; }
.lang-menu > div a:hover { background:rgba(255,255,255,.08); opacity:1; }
.hero { position:relative; height:min(52vh, 460px); min-height:340px; }
.hero img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(.72); }
.hero .voile { position:absolute; inset:0; background:linear-gradient(90deg, rgba(3,30,55,.9) 0%, rgba(3,30,55,.45) 45%, rgba(3,30,55,.12) 75%); }
.hero .titre { position:absolute; left:44px; right:44px; bottom:40px; color:#fff; }
.hero .sur { font:500 13px 'IBM Plex Mono',monospace; letter-spacing:.1em; color:#9cc4e8; margin-bottom:12px; }
.hero h1 { margin:0; font:400 clamp(40px, 6vw, 66px)/1 'Archivo Black',sans-serif; letter-spacing:-.01em; }
.hero .citation { font:400 clamp(18px, 2.2vw, 23px) 'Newsreader',serif; font-style:italic; margin-top:16px; color:#e6ecf1; }
.liseret { height:3px; background:linear-gradient(90deg, var(--bleu) 0%, var(--bleu) 92%, var(--jaune) 92%); }
.page { max-width:1180px; margin:0 auto; }
.colonnes { display:grid; grid-template-columns:320px 1fr; gap:44px; padding:44px; align-items:start; }
.profil { display:flex; flex-direction:column; gap:18px; position:sticky; top:84px; }
.profil img { width:100%; height:340px; object-fit:cover; object-position:top; display:block; border-radius:12px; }
.bio { font:400 15px/1.65 'Archivo',sans-serif; color:#44525e; }
.langues { display:flex; flex-wrap:wrap; gap:8px; }
.langues div { background:#e8eef3; padding:6px 13px; font:600 12px 'Archivo',sans-serif; letter-spacing:.04em; border-radius:99px; }
.btn-contact { display:flex; align-items:center; justify-content:center; gap:10px; background:var(--bleu); color:#fff; font:600 15px 'Archivo',sans-serif; padding:14px 20px; border-radius:10px; }
.btn-contact:hover { background:#0a5aa3; opacity:1; }
.btn-copie { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; background:transparent; color:var(--bleu); font:600 13px 'Archivo',sans-serif; padding:11px 18px; border:1.5px solid #b9c9d6; border-radius:10px; cursor:pointer; }
.btn-copie:hover { border-color:var(--bleu); background:#eef4f9; }
.email-clair { font:400 12px 'IBM Plex Mono',monospace; color:var(--gris-clair); text-align:center; }
.contenu { display:flex; flex-direction:column; gap:40px; min-width:0; }
.carte-nuit { background:var(--nuit); color:#fff; padding:32px; border-radius:14px; }
.carte-nuit .entete { display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; }
.carte-nuit h2 { margin:0; font:700 27px 'Archivo',sans-serif; letter-spacing:-.01em; }
.carte-nuit .quand { font:500 13px 'IBM Plex Mono',monospace; color:#8fa2b1; }
.carte-nuit p { font:400 15px/1.65 'Archivo',sans-serif; color:#c3ccd4; margin:14px 0 0; max-width:640px; }
.btn-listec { display:inline-block; margin-top:20px; background:#fff; color:var(--nuit); font:600 13px 'Archivo',sans-serif; letter-spacing:.04em; padding:10px 18px; border-radius:8px; }
.poste { display:grid; grid-template-columns:100px 1fr auto; gap:16px; padding:16px 12px; border-radius:10px; align-items:baseline; }
.poste:hover { background:#eef2f6; opacity:1; }
.poste .quand { font:500 13px 'IBM Plex Mono',monospace; color:var(--gris); }
.poste .quoi { font:600 16px 'Archivo',sans-serif; }
.poste .quoi small { font:400 14px 'Archivo',sans-serif; color:var(--gris); }
.poste .fleche { color:var(--bleu); font-weight:700; }
details.exp summary.poste { list-style:none; cursor:pointer; }
details.exp summary.poste::-webkit-details-marker { display:none; }
details.exp .fleche { display:inline-block; transition:transform .2s ease; }
details.exp:not(.anime)[open] summary.poste, details.exp.ouvert summary.poste { background:#eef2f6; }
details.exp:not(.anime)[open] .fleche, details.exp.ouvert .fleche { transform:rotate(90deg); }
details.exp .plie { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s ease; }
details.exp.ouvert .plie { grid-template-rows:1fr; }
details.exp .plie > .interieur { min-height:0; overflow:hidden; }
.mission { margin:4px 12px 16px; padding:18px 20px; background:#fff; border:1px solid var(--bordure); border-left:3px solid var(--jaune); border-radius:0 12px 12px 0; }
.mission .intitule { font:600 11px 'IBM Plex Mono',monospace; letter-spacing:.14em; color:var(--bleu); margin-bottom:10px; }
.mission p { font:400 14px/1.65 'Archivo',sans-serif; color:#44525e; margin:0; }
.mission p + p, .mission p + ul, .mission ul + p { margin-top:10px; }
.mission ul { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.mission li { font:400 14px/1.55 'Archivo',sans-serif; color:#44525e; }
.sep { height:1px; background:var(--bordure); margin:0 12px; }
.brevets { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.brevet { background:#fff; border:1px solid var(--bordure); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.brevet:hover { border-color:var(--bleu); opacity:1; }
.brevet .ref { font:600 12px 'IBM Plex Mono',monospace; color:var(--bleu); }
.brevet .titre { font:600 15px/1.35 'Archivo',sans-serif; }
.brevet .lien { font:400 12px 'IBM Plex Mono',monospace; color:var(--gris-clair); margin-top:auto; }
.diplomes { margin:0 44px 44px; background:#fff; border:1px solid var(--bordure); border-radius:14px; padding:32px; display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start; }
.diplomes .groupes { display:flex; flex-direction:column; gap:28px; min-width:0; }
.diplomes .groupes .label { margin-bottom:6px; }
.ligne-diplome { display:grid; grid-template-columns:64px 1fr auto; gap:16px; padding:13px 12px; border-radius:10px; align-items:baseline; width:100%; text-align:left; }
button.ligne-diplome { background:none; border:none; font:inherit; color:inherit; cursor:pointer; }
a.ligne-diplome:hover, button.ligne-diplome:hover { background:#eef2f6; opacity:1; }
.ligne-diplome .quand { font:500 13px 'IBM Plex Mono',monospace; color:var(--gris); }
.ligne-diplome .quoi { font:600 15px 'Archivo',sans-serif; }
.ligne-diplome .quoi small { font:400 13px 'Archivo',sans-serif; color:var(--gris); }
.ligne-diplome .fleche { color:var(--bleu); font:700 15px 'Archivo',sans-serif; }
.apercu-diplome { display:flex; flex-direction:column; gap:12px; background:var(--nuit); border:none; border-radius:14px; padding:18px; cursor:zoom-in; width:100%; }
.apercu-diplome:hover { background:#122740; }
.apercu-diplome .cadre { height:290px; border-radius:8px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.apercu-diplome img { max-width:100%; max-height:100%; display:block; }
.apercu-diplome .legende { display:flex; justify-content:space-between; gap:12px; font:600 11px 'IBM Plex Mono',monospace; }
.apercu-diplome .legende span:first-child { color:var(--jaune); letter-spacing:.08em; }
.apercu-diplome .legende span:last-child { color:#8fa2b1; text-align:right; }
.visionneuse { position:fixed; inset:0; z-index:100; background:rgba(3,30,55,.82); display:flex; align-items:center; justify-content:center; padding:24px; }
.visionneuse[hidden] { display:none; }
.visionneuse .boite { position:relative; background:#fff; border-radius:14px; padding:18px 18px 14px; max-width:min(860px, 94vw); max-height:92vh; display:flex; flex-direction:column; gap:10px; }
.visionneuse .boite img { max-width:100%; max-height:calc(92vh - 100px); object-fit:contain; border:1px solid var(--bordure); border-radius:8px; display:block; }
.visionneuse .pied { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.visionneuse .pied strong { font:600 13px 'Archivo',sans-serif; }
.visionneuse .pied span { font:400 11px 'IBM Plex Mono',monospace; color:var(--gris-clair); }
.visionneuse .fermer { position:absolute; top:-14px; right:-14px; width:34px; height:34px; border-radius:99px; border:none; background:var(--nuit); color:#fff; display:flex; align-items:center; justify-content:center; font:600 15px 'Archivo',sans-serif; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.3); }
.visionneuse .fermer:hover { background:var(--bleu); }
footer { background:var(--nuit); color:#8fa2b1; padding:20px 44px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font:400 13px 'IBM Plex Mono',monospace; }
footer a { color:#fff; }
@media (max-width: 980px) {
  .colonnes { grid-template-columns:1fr; padding:28px 20px; }
  .profil { position:static; max-width:420px; }
  .brevets { grid-template-columns:1fr; }
  .diplomes { grid-template-columns:1fr; margin:0 20px 28px; }
  header, footer { padding-left:20px; padding-right:20px; }
  nav > a:not(.pill) { display:none; }
  .hero .titre { left:20px; right:20px; }
}
@media (max-width: 640px) {
  .hero { height:auto; min-height:0; }
  .hero img { height:auto; filter:none; }
  .hero .voile { display:none; }
  .hero .titre { position:static; background:var(--nuit); padding:24px 20px 28px; }
  .lang { display:none; }
  .lang-menu { display:block; }
  .diplomes { padding:24px 20px; }
  .poste { grid-template-columns:90px 1fr auto; gap:10px; padding:14px 8px; }
  .mission { margin:4px 0 14px; padding:14px 16px; }
  .ligne-diplome { grid-template-columns:48px 1fr auto; gap:10px; padding:12px 8px; }
  .apercu-diplome .cadre { height:230px; }
  .visionneuse { padding:12px; }
  .visionneuse .fermer { top:-12px; right:-12px; }
}