/* =========================================================
   Moulaïka Iman Ouedraogo — portfolio hydraulique / WASH / environnement.

   IDENTITÉ : "Plan & relevé" — le monde du dessin technique et du relevé
   de terrain. Papier vélin + encre bleu de calque en clair (un plan
   imprimé) ; bleu de calque plein en sombre (le calque original, tel
   qu'il sort de la planche à dessin). Annotations au crayon rouge —
   convention réelle de correction sur plan technique — comme seul accent.
   Aucun héritage de composant/structure d'un autre portfolio : cartouches,
   fiches techniques, relevés altimétriques, marges annotées.
   ========================================================= */

@font-face{font-family:"Shoulders";src:url("../fonts/big-shoulders-var.woff2") format("woff2");font-weight:500 900;font-display:swap}
@font-face{font-family:"Archivo";src:url("../fonts/archivo-var.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url("../fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  /* vélin (clair, par défaut) : un plan imprimé */
  --bg:oklch(0.975 0.006 255); --bg2:oklch(0.95 0.008 255); --surface:oklch(0.94 0.008 255); --surface2:oklch(0.895 0.011 255);
  --ink:oklch(0.18 0.02 255); --body:oklch(0.3 0.02 255); --muted:oklch(0.48 0.02 255);
  --hair:oklch(0.84 0.012 255); --hair2:oklch(0.72 0.017 255);
  --blue:oklch(0.32 0.13 255); --blue-soft:oklch(0.46 0.11 255); --blue-dim:oklch(0.24 0.1 255);
  --red:oklch(0.52 0.17 25); --red-soft:oklch(0.6 0.15 25);

  /* le bandeau "coupe de terrain" reste toujours sur calque bleu plein */
  --strip-bg:oklch(0.24 0.1 255); --strip-bg2:oklch(0.28 0.11 255);
  --strip-ink:oklch(0.97 0.01 255); --strip-body:oklch(0.84 0.03 255); --strip-muted:oklch(0.66 0.04 255);
  --strip-hair:oklch(0.4 0.09 255); --strip-hair2:oklch(0.5 0.09 255);
  --strip-line:oklch(0.9 0.02 255); --strip-red:oklch(0.68 0.15 28);

  --disp:"Shoulders",Impact,"Arial Narrow",sans-serif;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Plex",ui-monospace,"SF Mono","Consolas",monospace;
  --e-out:cubic-bezier(.16,1,.3,1);
  --maxw:1000px;
  --shadow-card:0 1px 2px oklch(0.25 0.06 255 / .06), 0 12px 26px -16px oklch(0.25 0.1 255 / .22);
}
:root[data-theme="dark"]{
  /* le calque original : bleu de calque plein, traits clairs */
  --bg:oklch(0.2 0.085 255); --bg2:oklch(0.23 0.09 255); --surface:oklch(0.26 0.095 255); --surface2:oklch(0.3 0.1 255);
  --ink:oklch(0.97 0.01 255); --body:oklch(0.85 0.025 255); --muted:oklch(0.65 0.035 255);
  --hair:oklch(0.35 0.09 255); --hair2:oklch(0.44 0.09 255);
  --blue:oklch(0.72 0.09 255); --blue-soft:oklch(0.8 0.07 255); --blue-dim:oklch(0.55 0.1 255);
  --red:oklch(0.68 0.15 28); --red-soft:oklch(0.76 0.13 28);
  --shadow-card:none;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--body);
  font-family:var(--sans);font-size:15.5px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  background-image:
    linear-gradient(oklch(0.32 0.13 255 / .05) 1px,transparent 1px),
    linear-gradient(90deg,oklch(0.32 0.13 255 / .05) 1px,transparent 1px);
  background-size:34px 34px;
  background-position:-1px -1px;
  background-attachment:local;
}
:root[data-theme="dark"] body{background-image:
    linear-gradient(oklch(1 0 0 / .05) 1px,transparent 1px),
    linear-gradient(90deg,oklch(1 0 0 / .05) 1px,transparent 1px)}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-soft)}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.05;font-weight:800;letter-spacing:-.01em}
p{margin:0}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
abbr[title]{text-decoration:underline dotted var(--blue-dim);text-decoration-thickness:1px;
  text-underline-offset:3px;cursor:help}

/* ---------- Nav : cartouche (bloc de titre de plan) ---------- */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.nav .wrap{display:flex;align-items:stretch;gap:0;height:52px}
.cartouche{display:flex;align-items:center;gap:0;color:var(--ink);border-right:1px solid var(--hair2);padding-right:14px}
.cartouche .cell{display:flex;flex-direction:column;justify-content:center;padding:0 10px;border-right:1px solid var(--hair2);height:100%}
.cartouche .cell:last-child{border-right:none}
.cartouche .id{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.cartouche .nm{font-family:var(--disp);font-weight:800;font-size:15px;color:var(--ink);letter-spacing:.01em;line-height:1}
.navlinks{margin-left:auto;display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.navlinks a{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:7px 12px;letter-spacing:.02em;text-transform:uppercase;border-left:1px dashed var(--hair)}
.navlinks a:hover{color:var(--ink);background:var(--surface)}
.navlinks a.on{color:var(--blue);background:var(--surface)}
.tg{font-family:var(--mono);font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--hair2);
  border-radius:0;padding:6px 10px;cursor:pointer}
.tg:hover{color:var(--ink);border-color:var(--blue-dim)}
.tg:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- Hero : bandeau calque + coupe de terrain animée ---------- */
.hero{position:relative;background:var(--strip-bg2);overflow:hidden;border-bottom:3px double var(--strip-hair2)}
.hero .wrap{position:relative;z-index:1;padding:44px 24px 0}
.hero .kline{font-family:var(--mono);font-size:11px;color:var(--strip-red);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.hero .kline .tag{border:1px solid var(--strip-hair2);padding:2px 8px}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(34px,6.2vw,64px);color:var(--strip-ink);letter-spacing:-.01em;line-height:.98;text-transform:uppercase}
.hero h1 .g{color:var(--strip-red)}
.hero .sub{margin-top:16px;font-size:clamp(15px,1.9vw,17.5px);color:var(--strip-body);max-width:52ch;line-height:1.55}
.hero .meta{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--strip-muted);display:flex;flex-wrap:wrap;gap:5px 18px}
.hero .meta a{color:var(--strip-body);border-bottom:1px solid var(--strip-hair2)}
.hero .meta a:hover{color:var(--strip-red);border-color:var(--strip-red)}
.hero .profile-strip{position:relative;height:120px;margin-top:26px}
.hero .profile-strip svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* readout : gabarits de cotation (dimension callouts) */
.readout{position:relative;z-index:1;margin-top:0;border-top:1px solid var(--strip-hair);
  display:flex;flex-wrap:wrap}
.cell{flex:1 1 0;min-width:100px;padding:12px 14px 14px;border-right:1px solid var(--strip-hair);position:relative}
.cell:last-child{border-right:none}
.cell::before{content:"";position:absolute;left:14px;top:0;width:5px;height:5px;border-left:1px solid var(--strip-hair2);border-top:1px solid var(--strip-hair2)}
.cell .v{font-family:var(--mono);font-weight:500;font-size:22px;color:var(--strip-ink);letter-spacing:-.01em;line-height:1}
.cell .v .u{font-size:12px;color:var(--strip-red);margin-left:1px}
.cell .k{margin-top:6px;font-size:10px;letter-spacing:.05em;color:var(--strip-muted);text-transform:uppercase;font-family:var(--mono)}

/* ---------- Rythme des sections ---------- */
main{position:relative;z-index:1}
section{margin-top:46px}
.wrap>section:first-child{margin-top:38px}
.h-row{display:flex;align-items:baseline;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.h-row .pl{font-family:var(--mono);font-size:11px;color:var(--red);border:1px solid var(--red);padding:2px 7px;letter-spacing:.04em}
.h-row h2{font-family:var(--disp);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.005em}
.h-row .rule{flex:1 1 30px;height:0;border-top:1px dashed var(--hair2);align-self:center}
.h-row .datum{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em;text-align:right}

.lead{font-size:17px;line-height:1.62;color:var(--body);max-width:66ch}
.lead b{color:var(--ink);font-weight:700}
.lead .hl{color:var(--blue);font-weight:700}

/* ---------- Domaines : index de planches (liste numérotée référencée) ---------- */
.sheets{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.sheet{position:relative;display:flex;align-items:center;gap:18px;padding:16px 4px;border-bottom:1px solid var(--hair);color:inherit;transition:background .15s var(--e-out)}
.sheet:hover{background:var(--surface)}
.sheet .num{font-family:var(--mono);font-size:12px;color:var(--red);border:1px solid var(--red);padding:3px 8px;flex:none;letter-spacing:.03em}
.sheet .body{flex:1;min-width:0}
.sheet h3{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--ink);text-transform:uppercase;letter-spacing:.005em}
.sheet .kk{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:4px}
.sheet .kk .sep{color:var(--hair2);padding:0 6px}
.sheet .go{font-family:var(--mono);font-size:16px;color:var(--muted);flex:none;transition:transform .2s var(--e-out),color .2s}
.sheet:hover .go{color:var(--blue);transform:translateX(3px)}

/* ---------- Ce que je cherche : annotation en marge (même vocabulaire que .annot) ---------- */
.marge{position:relative;padding-left:24px;font-size:15px;color:var(--body);line-height:1.6}
.marge::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px;border:1.5px solid var(--red);border-radius:50%}
.marge::after{content:"";position:absolute;left:11px;top:12px;width:9px;height:1.5px;background:var(--red);transform:rotate(20deg)}
.marge b{color:var(--ink);font-weight:700}
.marge .hl{color:var(--blue);font-weight:700}

/* ---------- Réalisations : fiches techniques ---------- */
.dossier{display:flex;flex-direction:column;gap:22px}
.fiche{border:1px solid var(--hair2);background:var(--surface);box-shadow:var(--shadow-card)}
.fiche .tbar{display:flex;align-items:center;gap:0;border-bottom:1px solid var(--hair2);font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.fiche .tbar span{padding:8px 14px;border-right:1px solid var(--hair2)}
.fiche .tbar span:last-child{border-right:none;margin-left:auto;color:var(--red)}
.fiche .content{padding:18px 20px 20px}
.fiche h3{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--ink);text-transform:uppercase;margin-bottom:10px;letter-spacing:.005em}
.fiche p{font-size:14.5px;color:var(--body);margin:9px 0;max-width:70ch;line-height:1.6}
.fiche p b{color:var(--ink);font-weight:700}
.rdt{display:flex;flex-wrap:wrap;gap:0;margin-top:14px;border:1px solid var(--hair2);width:fit-content;max-width:100%;overflow:hidden}
.rdt span{font-family:var(--mono);font-size:11.5px;padding:6px 12px;border-right:1px solid var(--hair2);color:var(--body);white-space:nowrap;background:var(--bg)}
.rdt span:last-child{border-right:none}
.outcome{margin-top:13px;font-size:13.5px;color:var(--blue);font-weight:600;display:flex;gap:8px;align-items:baseline;font-family:var(--mono)}
.outcome::before{content:"→";color:var(--red)}

/* ---------- Engagement : annotations en marge (crayon rouge) ---------- */
.annots{display:grid;grid-template-columns:1fr 1fr;gap:20px 28px}
.annot{position:relative;padding-left:22px}
.annot::before{content:"";position:absolute;left:0;top:5px;width:12px;height:12px;border:1.5px solid var(--red);border-radius:50%}
.annot::after{content:"";position:absolute;left:11px;top:11px;width:9px;height:1.5px;background:var(--red);transform:rotate(20deg)}
.annot h3{font-family:var(--disp);font-weight:700;font-size:15.5px;color:var(--ink);text-transform:uppercase;margin-bottom:6px;letter-spacing:.01em}
.annot p{font-size:13.5px;color:var(--body);line-height:1.6}
.annot b{color:var(--ink);font-weight:700}

/* ---------- Parcours : relevé altimétrique (profil de terrain) ---------- */
.releve-frame{overflow-x:auto;margin:6px 0 22px;border:1px solid var(--hair2);background:var(--surface)}
.releve-frame svg{display:block;min-width:640px;max-width:100%;height:auto}
.rl-axis{stroke:var(--hair);stroke-width:1}
.rl-tick{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.rl-seg{fill:none;stroke:var(--ink);stroke-width:1.6}
.rl-seg.now{stroke:var(--red)}
.rl-cap{stroke:var(--ink);stroke-width:1.6}
.rl-cap.now{stroke:var(--red)}
.rl-name{font-family:var(--sans);font-weight:600;font-size:11.5px;fill:var(--ink)}
.rl-range{font-family:var(--mono);font-weight:400;font-size:9.5px;fill:var(--muted)}
.rl-station{fill:var(--bg);stroke:var(--ink);stroke-width:1.4}

/* ---------- Pied : légende + fiche profil ---------- */
.foot{display:grid;grid-template-columns:1.05fr 1fr;gap:32px}
.legend{display:grid;gap:11px;border-top:1px solid var(--hair);padding-top:14px}
.legend .lg{display:grid;grid-template-columns:110px 1fr;gap:12px}
.legend .lg .yr{font-family:var(--mono);font-size:10.5px;color:var(--red);padding-top:1px}
.legend .lg .ds{font-size:12.5px;color:var(--body);line-height:1.5}
.legend .lg .ds b{color:var(--ink);font-weight:700}
.profile{border:1px solid var(--hair2);background:var(--surface);padding:18px 20px;box-shadow:var(--shadow-card)}
.profile p{font-size:13.5px;color:var(--body);margin-bottom:10px;line-height:1.6}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chips span{font-family:var(--mono);font-size:11px;color:var(--body);border:1px solid var(--hair2);padding:4px 10px}

/* ---------- Topic-page specifics (bandeau calque) ---------- */
.tp-hero{position:relative;background:var(--strip-bg);overflow:hidden;border-bottom:3px double var(--strip-hair2)}
.tp-hero .wrap{position:relative;z-index:1;padding:36px 24px 30px}
.tp-hero .crumb{font-family:var(--mono);font-size:11px;color:var(--strip-muted);margin-bottom:14px;text-transform:uppercase;letter-spacing:.03em}
.tp-hero .crumb a{color:var(--strip-red)}
.tp-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,5.4vw,46px);letter-spacing:-.005em;color:var(--strip-ink);text-transform:uppercase;line-height:1.02}
.tp-hero .lead{margin-top:14px;color:var(--strip-body);max-width:68ch;font-size:16px}
.tp-hero .lead b{color:var(--strip-ink)}
.tp-hero .lead .hl{color:var(--strip-red)}
.tag-row{display:flex;flex-wrap:wrap;gap:0;margin-top:18px;border-top:1px solid var(--strip-hair)}
.tag-row span{font-family:var(--mono);font-size:10.5px;color:var(--strip-muted);text-transform:uppercase;letter-spacing:.03em;padding:9px 12px 0;border-right:1px solid var(--strip-hair)}

.prose{max-width:72ch}
.prose h2{font-family:var(--disp);font-weight:800;font-size:21px;margin:36px 0 13px;color:var(--ink);text-transform:uppercase;letter-spacing:.005em}
.prose p{font-size:15px;color:var(--body);margin:10px 0;line-height:1.65}
.prose ul{margin:10px 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:20px;margin:7px 0;font-size:14.5px;color:var(--body);line-height:1.6}
.prose li::before{content:"—";position:absolute;left:0;color:var(--red);font-family:var(--mono);font-size:12px}
.prose b{color:var(--ink);font-weight:700}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--surface);border:1px solid var(--hair2);padding:1px 6px;color:var(--blue)}
.note{border:1px solid var(--hair2);padding:16px 19px;margin:22px 0;font-size:13.5px;background:var(--surface);position:relative}
.note::before{content:"";position:absolute;left:16px;top:-1px;width:22px;height:2px;background:var(--red)}
.note .nt{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--red);margin-bottom:6px}
.kv{width:100%;border-collapse:collapse;margin:16px 0;font-size:13px}
.kv th,.kv td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hair)}
.kv th{font-family:var(--mono);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:2px solid var(--ink)}
.kv td{color:var(--body)}
.kv td:first-child{font-family:var(--mono);color:var(--ink);white-space:nowrap}
.kv-wrap{overflow-x:auto}

/* ---------- Footer bar ---------- */
.sitefoot{margin-top:56px;border-top:2px solid var(--ink);background:var(--bg2)}
.sitefoot .wrap{padding:22px 24px;display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.sitefoot a{color:var(--body)}
.sitefoot a:hover{color:var(--blue)}
.sitefoot .sp{margin-left:auto}

@media (hover:hover){ .sheet{cursor:pointer} }

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .annots{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr;gap:26px}
}
@media (max-width:640px){
  .nav .wrap{height:auto;flex-wrap:wrap;padding:8px 0}
  .cartouche{border-right:none;padding-right:0;width:100%;order:1}
  .tg{order:2;margin-left:auto}
  .navlinks{order:3;width:100%;justify-content:flex-start;gap:0}
  .readout .cell{flex-basis:50%}
}
@media (max-width:380px){ .readout .cell{flex-basis:100%} }

@media print{
  @page{size:A4;margin:12mm}
  body{font-size:10pt;background-image:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .nav,.sitefoot,.tg{display:none!important}
  .hero,.tp-hero{background:#fff;border-bottom:1px solid #000}
  .wrap{max-width:none;padding:0}
  section{margin-top:16px}
  .fiche,.annot,.legend .lg,.releve-frame{break-inside:avoid}
  .releve-frame{overflow:visible}
  .releve-frame svg{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}