/* ==========================================================================
   AIM 37 — socle étendu (écart assumé, voir DOC/strategie-visuelle-ux.md §10)
   Palette vélin/encre/vermillon du socle, + second accent ambre pour les
   dégradés/glow du registre "produit tech ambitieux" retenu pour ce site.
   ========================================================================== */
:root{
  --paper:247 244 237;      --paper-raised:255 253 248;  --paper-sunken:237 228 207;
  --ink:26 22 20;           --ink-strong:15 11 10;       --ink-muted:103 91 80;      --ink-faint:146 134 120;
  --rule:226 216 194;       --rule-strong:199 187 161;
  --stamp:185 28 28;        --stamp-hover:165 23 23;     --stamp-soft:185 28 28 / .08;
  --amber:180 111 21;       --amber-soft:180 111 21 / .12;
  --glow: 185 28 28;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:20 17 14;         --paper-raised:34 29 24;     --paper-sunken:14 12 10;
    --ink:237 228 211;        --ink-strong:250 246 236;    --ink-muted:183 169 147;    --ink-faint:130 118 103;
    --rule:44 37 31;          --rule-strong:63 53 44;
    --stamp:232 85 79;        --stamp-hover:242 103 95;    --stamp-soft:232 85 79 / .14;
    --amber:224 158 74;       --amber-soft:224 158 74 / .16;
  }
}
:root[data-theme="dark"]{
  --paper:20 17 14;         --paper-raised:34 29 24;     --paper-sunken:14 12 10;
  --ink:237 228 211;        --ink-strong:250 246 236;    --ink-muted:183 169 147;    --ink-faint:130 118 103;
  --rule:44 37 31;          --rule-strong:63 53 44;
  --stamp:232 85 79;        --stamp-hover:242 103 95;    --stamp-soft:232 85 79 / .14;
  --amber:224 158 74;       --amber-soft:224 158 74 / .16;
}
:root[data-theme="light"]{
  --paper:247 244 237;      --paper-raised:255 253 248;  --paper-sunken:237 228 207;
  --ink:26 22 20;           --ink-strong:15 11 10;       --ink-muted:103 91 80;      --ink-faint:146 134 120;
  --rule:226 216 194;       --rule-strong:199 187 161;
  --stamp:185 28 28;        --stamp-hover:165 23 23;     --stamp-soft:185 28 28 / .08;
  --amber:180 111 21;       --amber-soft:180 111 21 / .12;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:rgb(var(--paper));color:rgb(var(--ink));
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/></svg>");
}
::selection{background:rgba(185,28,28,.18)}
a{color:inherit}
.measure{max-width:66ch}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
img,video{max-width:100%;display:block}

.gradient-text{
  background:linear-gradient(95deg, rgb(var(--stamp)) 0%, rgb(var(--amber)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

::view-transition-old(root), ::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---- Masthead ---- */
.masthead{border-bottom:2px solid rgb(var(--ink-strong));padding:20px 0;position:relative;z-index:10;background:rgb(var(--paper))}
.masthead .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.masthead .id{display:flex;align-items:center;gap:10px;text-decoration:none}
.masthead .id img{width:22px;height:22px;display:block}
.masthead .id b{font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;color:rgb(var(--ink-strong))}
.masthead nav{display:flex;gap:22px;margin-left:12px}
.masthead nav a{font-size:13px;font-weight:600;text-decoration:none;color:rgb(var(--ink-muted));transition:color .12s}
.masthead nav a:hover, .masthead nav a[aria-current="page"]{color:rgb(var(--stamp))}
.masthead .spacer{flex:1}
.masthead .cta-mini{
  font-size:13px;font-weight:700;padding:8px 16px;border-radius:4px;text-decoration:none;
  background:rgb(var(--stamp));color:rgb(var(--paper-raised));transition:background .12s;
}
.masthead .cta-mini:hover{background:rgb(var(--stamp-hover))}
@media(max-width:760px){ .masthead nav{display:none} }

.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid rgb(var(--rule-strong));border-radius:4px;background:transparent;cursor:pointer;
  color:rgb(var(--ink-muted));transition:background .12s,color .12s;flex:none;
}
.theme-toggle:hover{background:rgb(var(--paper-sunken));color:rgb(var(--ink))}
.theme-toggle svg{width:15px;height:15px;display:block}
.theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:none}
:root[data-theme="dark"] .theme-toggle .i-moon{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:none}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:block}
}

#progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg, rgb(var(--stamp)), rgb(var(--amber)));z-index:100;transition:width .08s linear}

/* ---- Boutons ---- */
.btn-stamp{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(95deg, rgb(var(--stamp)) 0%, rgb(var(--amber)) 130%);
  color:rgb(var(--paper-raised));
  font-weight:700;font-size:13.5px;padding:12px 24px;border-radius:5px;text-decoration:none;border:none;cursor:pointer;
  transition:filter .12s cubic-bezier(.4,0,.2,1),transform .12s;will-change:transform;
  box-shadow:0 8px 24px -8px rgb(var(--glow) / .45);
}
.btn-stamp:hover{filter:brightness(1.06)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:8px;background:transparent;color:rgb(var(--ink));
  font-weight:700;font-size:13.5px;padding:11px 22px;border-radius:5px;text-decoration:none;
  border:1.5px solid rgb(var(--rule-strong));transition:border-color .12s,background .12s;
}
.btn-ghost:hover{border-color:rgb(var(--stamp));background:rgb(var(--stamp-soft))}
.link-quiet{font-size:13.5px;font-weight:600;text-decoration:none;border-bottom:1.5px solid rgb(var(--rule-strong));padding-bottom:1px;transition:border-color .12s}
.link-quiet:hover{border-color:rgb(var(--ink))}

section{padding:64px 0;position:relative}
.rule-top-double{border-top:1px solid rgb(var(--rule));position:relative}
.rule-top-double::before{content:"";position:absolute;top:3px;left:28px;right:28px;height:1px;background:rgb(var(--rule))}

.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.sec-num{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgb(var(--stamp));font-weight:700}
h1,h2,h3{font-family:'Inter',sans-serif;color:rgb(var(--ink-strong))}
h2{font-weight:800;font-size:clamp(24px,3vw,34px);letter-spacing:-.01em;margin:0}
.section-note{font-size:12px;color:rgb(var(--ink-faint));font-family:'JetBrains Mono',monospace}

.marginalia{
  font-family:'EB Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:19px;
  line-height:1.4;color:rgb(var(--ink));border-left:2px solid rgb(var(--stamp));padding-left:20px;
}
.marginalia cite{display:block;font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:rgb(var(--ink-faint));margin-top:12px}

/* ---- Panneaux verre (registre "vitrine d'agence") ---- */
.glass{
  background:rgb(var(--paper-raised) / .7);backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgb(var(--rule));border-radius:14px;
  box-shadow:0 20px 60px -30px rgb(var(--sh-tint,26 22 20) / .35);
  will-change:transform;
}

/* ---- Marquee ---- */
.marquee{border-top:1px solid rgb(var(--rule));border-bottom:1px solid rgb(var(--rule));overflow:hidden;
  background:rgb(var(--paper-sunken) / .5);padding:14px 0}
.marquee-track{display:flex;gap:44px;width:max-content;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:rgb(var(--ink-faint));display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.marquee span::after{content:"·";color:rgb(var(--stamp));margin-left:34px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;overflow-x:auto} }

/* ---- Chiffre-héros ---- */
.stat-block{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
@media(max-width:640px){.stat-block{grid-template-columns:1fr}}
.stat-num{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:clamp(56px,10vw,88px);line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(95deg, rgb(var(--stamp)), rgb(var(--amber)));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-text{font-size:15.5px;color:rgb(var(--ink-muted));max-width:46ch;line-height:1.6}
.stat-text b{color:rgb(var(--ink-strong))}

/* ---- Section large : rythme "produit", pas empilement de mémo — mais
   dimensionnée au contenu, jamais forcée en plein viewport (ça crée du
   vide quand le contenu est court). ---- */
.screen{display:flex;flex-direction:column;justify-content:center;padding:88px 0}
@media(max-width:760px){.screen{padding:64px 0}}

/* ---- Déclaration typographique pleine largeur (remplace le catalogue de cartes) ---- */
.statement{
  font-family:'Fraunces','EB Garamond',Georgia,serif;font-weight:600;
  font-size:clamp(28px,4.4vw,52px);line-height:1.18;letter-spacing:-.01em;max-width:22ch;margin:0 0 28px;
  color:rgb(var(--ink-strong));
}

/* ---- Processus en 3 temps : un seul chemin, pas un menu ---- */
.process{display:flex;flex-direction:column;gap:0;margin-top:16px}
.process-step{display:grid;grid-template-columns:56px 1fr;gap:24px;padding:28px 0;border-bottom:1px solid rgb(var(--rule));align-items:start}
.process-step:first-child{border-top:1px solid rgb(var(--rule))}
.process-step .num{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:22px;
  background:linear-gradient(95deg, rgb(var(--stamp)), rgb(var(--amber)));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.process-step h3{font-size:19px;font-weight:700;margin:0 0 8px;letter-spacing:-.005em}
.process-step p{margin:0;color:rgb(var(--ink-muted));font-size:15px;line-height:1.65;max-width:58ch}

/* ---- Bandeau de différenciation (remplace le tableau "Exhibit") ---- */
.feature-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:rgb(var(--rule));border-radius:14px;overflow:hidden}
@media(max-width:760px){.feature-strip{grid-template-columns:1fr}}
.feature-strip .cell{background:rgb(var(--paper));padding:28px}
.feature-strip .cell.yes{border-left:3px solid rgb(var(--stamp))}
.feature-strip .cell.no{opacity:.72}
.feature-strip .cell .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgb(var(--ink-faint));display:block;margin-bottom:10px}
.feature-strip .cell p{margin:0;font-size:15px;line-height:1.55;color:rgb(var(--ink))}

/* ---- Placeholder visuel (photo/vidéo de substitution) ---- */
.media-placeholder{
  position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(circle at 25% 20%, rgb(var(--stamp) / .35), transparent 55%),
    radial-gradient(circle at 80% 75%, rgb(var(--amber) / .35), transparent 55%),
    rgb(var(--paper-sunken));
  border:1px solid rgb(var(--rule));display:flex;align-items:center;justify-content:center;
}
.media-placeholder::after{
  content:attr(data-label);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgb(var(--ink-faint));background:rgb(var(--paper-raised) / .85);padding:8px 14px;border-radius:99px;
  border:1px solid rgb(var(--rule-strong));
}
.media-placeholder.video::before{
  content:"";position:absolute;width:56px;height:56px;border-radius:50%;
  background:rgb(var(--paper-raised) / .9);top:calc(50% - 28px - 18px);left:calc(50% - 28px);
  box-shadow:0 8px 24px -8px rgb(var(--sh-tint,26 22 20) / .4);
}
.media-placeholder.video::after{top:calc(50% + 18px)}

footer{border-top:2px solid rgb(var(--ink-strong));padding:26px 0}
footer .wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;font-size:11.5px}
footer img{width:16px;height:16px;opacity:.7}
footer span,footer a{color:rgb(var(--ink-faint))}
footer a{text-decoration:none}
footer a:hover{color:rgb(var(--ink))}
.spacer{flex:1}

:focus-visible{outline:none;box-shadow:0 0 0 3px rgb(var(--stamp) / .28);border-radius:2px}

.tag{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:rgb(var(--stamp));margin-bottom:18px;display:block;
}

@media (prefers-reduced-motion: reduce){
  #progress{transition:none}
  .prestation, .btn-stamp, .glass{transition:none}
}