/* Trained Ingénierie — application (app.trainedingenierie.fr)
   Identité : acier et minium (apprêt rouge des poutrelles). Thème clair et sombre. */
:root{
  --paper:#f3f5f6; --surface:#ffffff; --ink:#1b2126; --muted:#56616b; --rule:#d3d9de; --field:#f7f9fa;
  --steel:#3b4d5a; --primer:#b0442a; --primer-soft:rgba(176,68,42,.10); --on-primer:#ffffff;
  --ok:#2c7a4b; --ok-soft:rgba(44,122,75,.12); --ko:#b3261e; --ko-soft:rgba(179,38,30,.10);
  --warn:#94600a; --warn-soft:rgba(148,96,10,.12);
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#111518; --surface:#192025; --ink:#e5e9ec; --muted:#9aa6b0; --rule:#2c363d; --field:#141a1e;
  --steel:#a9bccb; --primer:#e2795a; --primer-soft:rgba(226,121,90,.14); --on-primer:#1b1210;
  --ok:#5fbf88; --ok-soft:rgba(95,191,136,.14); --ko:#f08a80; --ko-soft:rgba(240,138,128,.13);
  --warn:#e0b45a; --warn-soft:rgba(224,180,90,.13); color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#111518; --surface:#192025; --ink:#e5e9ec; --muted:#9aa6b0; --rule:#2c363d; --field:#141a1e;
  --steel:#a9bccb; --primer:#e2795a; --primer-soft:rgba(226,121,90,.14); --on-primer:#1b1210;
  --ok:#5fbf88; --ok-soft:rgba(95,191,136,.14); --ko:#f08a80; --ko-soft:rgba(240,138,128,.13);
  --warn:#e0b45a; --warn-soft:rgba(224,180,90,.13); color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
:focus-visible{outline:2px solid var(--primer);outline-offset:2px}

/* barre haute commune */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;padding-block:14px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.brand{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.02em;line-height:1;color:var(--ink);text-decoration:none}
.brand span{color:var(--primer)}
.brand small{display:block;font:11.5px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.nav{display:flex;gap:4px 14px;flex-wrap:wrap;align-items:center;font-size:15px}
.nav a{color:var(--muted);text-decoration:none;font-weight:600;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--primer)}

.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.title{font-family:var(--f-display);font-weight:700;font-size:clamp(2.1rem,6vw,3.2rem);line-height:1.02;margin:0;text-wrap:balance}
.title span{color:var(--primer)}
.lede{margin:4px 0 0;max-width:62ch;color:var(--muted)}

.btn{font:700 15px var(--f-body);border-radius:4px;padding:10px 16px;cursor:pointer;border:1px solid transparent;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:none;color:var(--ink)}
.btn.primary{background:var(--primer);color:var(--on-primer)}
.btn.ghost{border-color:var(--rule)}
.btn.small{padding:6px 11px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.link{background:none;border:0;padding:0;color:var(--primer);font:600 15px var(--f-body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;display:grid;gap:12px;align-content:start;min-width:0}
.card h2{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card h2 small{font:500 12px var(--f-mono);letter-spacing:0;text-transform:none;color:var(--muted)}

.fld{display:grid;gap:5px;min-width:0}
.fld label{font-weight:600;font-size:14.5px}
.fld input,.fld textarea,.fld select{width:100%;font:15px var(--f-body);color:var(--ink);background:var(--field);border:1px solid var(--rule);border-radius:4px;padding:9px 11px}
.fld textarea{min-height:90px;resize:vertical}
.fld .e{font-size:13px;color:var(--primer)}
.fld.err input{border-color:var(--primer)}

.pill{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--f-body);padding:3px 10px;border-radius:99px;background:var(--primer-soft);color:var(--primer);white-space:nowrap}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.ko{background:var(--ko-soft);color:var(--ko)}
.pill.mute{background:var(--field);color:var(--muted);border:1px solid var(--rule)}

.notice{font-size:14px;border-radius:4px;padding:10px 12px;margin:0;background:var(--warn-soft);color:var(--ink)}
.notice.ok{background:var(--ok-soft)}
.notice.ko{background:var(--ko-soft)}
.toast{font-size:13.5px;color:var(--ok);min-height:1.2em;margin:0}
.toast.ko{color:var(--ko)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

footer.foot{margin-top:32px;padding-top:14px;border-top:1px solid var(--rule);font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px}
footer.foot a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}