/* ============================================================
   Duerly — design system « registre / dossier d'inspection ».
   DA éditoriale niveau award : serif Fraunces surdimensionné + grotesque humaniste,
   papier os + encre quasi-noire + UN accent vermillon signal. Anti-template.
   Reveal = CSS pur (état final toujours visible).
   ============================================================ */
@import url("/fonts/fonts.css");

:root{
  --ink:#17130C;          /* encre quasi-noire chaude */
  --ink-2:#4A4236;
  --paper:#F0EADD;        /* papier os */
  --paper-2:#E5DCC8;
  --card:#FBF8F0;         /* fiche cartonnée */
  --accent:#D43A22;       /* vermillon signal (sécurité, décision) */
  --accent-d:#AE2C16;
  --line:#D6CCB6;         /* filet fin */
  --dark:#13100A;         /* sections sombres */

  /* échelle de criticité (réglée chaud, alignée scoring.js) */
  --c-ok:#3E7A52;
  --c-watch:#BE8B12;
  --c-act:#D2761F;
  --c-urgent:#C8351F;

  --serif:"Duerly Serif", Georgia, "Times New Roman", serif;
  --sans:"Duerly Sans", system-ui, -apple-system, sans-serif;

  --step--1:clamp(.78rem,.75rem + .12vw,.85rem);
  --step-0:clamp(.95rem,.92rem + .18vw,1.03rem);
  --step-1:clamp(1.18rem,1.05rem + .5vw,1.5rem);
  --step-2:clamp(1.7rem,1.3rem + 1.7vw,2.9rem);
  --step-3:clamp(2.4rem,1.6rem + 3.6vw,5rem);
  --step-4:clamp(3.2rem,1.9rem + 6.4vw,8rem);

  --maxw:1200px;
  --r:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.6;font-weight:450;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.0;letter-spacing:-.015em;margin:0}
h1{font-size:var(--step-4);font-weight:700;letter-spacing:-.025em}
h2{font-size:var(--step-3);letter-spacing:-.02em}
h3{font-size:var(--step-1)}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,56px)}
.serif{font-family:var(--serif)}
.num{font-family:var(--serif);font-weight:700;font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}

/* GRAIN papier */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* FILETS éditoriaux */
.rule{height:1px;background:var(--line);border:0;margin:0}
.rule-ink{height:2px;background:var(--ink);border:0}

/* INDEX de section (01 / 02) — signature move « registre » */
.idx{font-family:var(--serif);font-weight:700;color:var(--accent);font-size:var(--step-1);
  font-variant-numeric:lining-nums;display:inline-block}

/* EYEBROW : libellé technique en capitales */
.eyebrow{font-size:var(--step--1);letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
  font-weight:650;display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor}

/* REVEAL CSS pur (état final visible) */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .7s cubic-bezier(.2,.75,.2,1) both}
.reveal.d1{animation-delay:.08s}.reveal.d2{animation-delay:.16s}.reveal.d3{animation-delay:.24s}.reveal.d4{animation-delay:.32s}

/* BOUTONS éditoriaux (rectangulaires, nets, pas de pilule molle) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--sans);font-weight:650;
  font-size:var(--step-0);padding:.78em 1.4em;border-radius:var(--r);border:1.5px solid transparent;cursor:pointer;
  letter-spacing:.005em;transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-d)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:.45em .9em;font-size:var(--step--1)}
.btn-ghost{background:transparent;border:none;color:inherit;cursor:pointer;padding:.4em .55em;border-radius:var(--r)}
.btn-ghost:hover{background:rgba(23,19,12,.07)}
.link{color:inherit;border-bottom:1.5px solid var(--accent);padding-bottom:1px;font-weight:650;cursor:pointer}
.link:hover{color:var(--accent)}

/* FICHE / carte — cartonnée, hairline, ombre quasi nulle */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.4vw,28px);
  box-shadow:0 1px 0 rgba(23,19,12,.03)}

.section{padding-block:clamp(56px,8vw,128px)}
.dark{background:var(--dark);color:#EDE6D6}
.dark .eyebrow,.dark .idx{color:var(--accent)}
.muted{color:var(--ink-2)}
.dark .muted{color:#A89C86}

input,select,textarea{font-family:var(--sans);font-size:var(--step-0);color:var(--ink);background:#FCFAF4;
  border:1px solid var(--line);border-radius:var(--r);padding:.62em .8em;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
label{font-size:var(--step--1);font-weight:650;display:block;margin-bottom:.35em;letter-spacing:.01em}

.badge{display:inline-flex;align-items:center;gap:.4em;font-size:var(--step--1);font-weight:650;
  padding:.2em .65em;border-radius:2px;border:1px solid transparent;letter-spacing:.01em}

/* ===== MOTION (award) — bulletproof : état final visible SANS JS ===== */
/* on n'anime que si motion.js a posé .js-motion sur <html> ; sinon tout reste visible. */
.js-motion [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .85s cubic-bezier(.2,.75,.2,1) var(--rd,0s),transform .85s cubic-bezier(.2,.75,.2,1) var(--rd,0s)}
.js-motion [data-reveal].in{opacity:1;transform:none}

/* curseur signature (desktop) */
.cursor-dot{position:fixed;top:0;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:10000;mix-blend-mode:multiply;
  transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s}
.cursor-dot.big{width:54px;height:54px;margin:-27px 0 0 -27px;background:transparent;border:1.5px solid var(--accent)}
@media (pointer:coarse){.cursor-dot{display:none}}
[data-magnetic]{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s,border-color .2s}

/* marquee (CSS pur, contenu dupliqué pour boucle continue) */
.marquee{overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:inline-flex;align-items:center;gap:.5em;animation:marq 34s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* mot accentué avec soulignement qui se dessine */
.accent-word{color:var(--accent);position:relative;white-space:nowrap}
.accent-word::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.07em;background:var(--accent);
  transform:scaleX(0);transform-origin:left;animation:draw 1s cubic-bezier(.2,.8,.2,1) .5s forwards}
@keyframes draw{to{transform:scaleX(1)}}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none}
  .js-motion [data-reveal]{opacity:1;transform:none;transition:none}
  .marquee-track{animation:none}
  .accent-word::after{animation:none;transform:scaleX(1)}
  .cursor-dot{display:none}
}