/* Polices */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url('../assets/fonts/SpaceGrotesk-Variable.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/SpaceMono-400.woff2') format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/SpaceMono-700.woff2') format('woff2');}

/* Couleurs, typographie, espacements, mouvement — design tokens */
:root{
--paper:#F4F2ED;--mist:#E6E3DC;--veil:#CDCAC2;--ash:#9A968D;--steel:#6B6862;
--graphite:#3A3936;--ink:#1B1A18;--black:#0A0A0A;--white:#FFFFFF;--signal:#D6FF3D;

--font-voice:'Space Grotesk',-apple-system,sans-serif;
--font-structure:'Space Mono',ui-monospace,monospace;

--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
--margin-desktop:clamp(40px,5vw,96px);--margin-mobile:20px;
--radius-sm:2px;

--duration-ui:360ms;--duration-reveal:800ms;
--ease-out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;}}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{background:var(--paper);color:var(--ink);font-family:var(--font-voice);font-size:1rem;line-height:1.6;-webkit-font-smoothing:anti-iased;}
h1,h2,h3{font-family:var(--font-voice);font-weight:500;line-height:0.98;letter-spacing:-0.025em;margin:0;}

/* Lien souligné animé — nav, email, réseaux sociaux */
.al-link{position:relative;display:inline-block;isolation:isolate;cursor:pointer;color:var(--ink);text-decoration:none}
.al-link::before{content:"";position:absolute;left:-.18em;right:-.18em;bottom:-.06em;height:.62em;background:var(--signal);z-index:-1;transform:scaleX(0);transform-origin:left center;transition:transform var(--duration-ui) var(--ease-out)}
.al-link:hover::before{transform:scaleX(1)}

/* Pied de page discret — lien mentions légales, sur toutes les pages racine */
.al-site-footer{padding:22px clamp(40px,5vw,96px);text-align:center;font-family:var(--font-structure);font-size:11px;letter-spacing:0.06em;color:var(--ash)}
.al-site-footer .al-link{color:var(--ash)}

/* Newsletter signup — composant partagé (footer case studies + page contact).
   Variante claire par défaut ; modificateur .nl--dark pour la section sombre. */
.nl{display:flex;flex-direction:column;gap:12px;font-family:var(--font-voice)}
.nl-label{font-family:var(--font-structure);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--steel)}
.nl-copy{font-size:15px;line-height:1.5;color:var(--graphite);margin:0}
.nl-row{display:flex;gap:10px;flex-wrap:wrap}
.nl-input{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--veil);border-radius:var(--radius-sm);background:var(--white);color:var(--ink);outline:none;transition:border-color var(--duration-ui) var(--ease-out)}
.nl-input:focus{border-color:var(--steel)}
.nl-btn{font-family:var(--font-structure);font-size:13px;letter-spacing:0.08em;background:var(--signal);color:var(--ink);border:none;border-radius:var(--radius-sm);padding:12px 22px;cursor:pointer;white-space:nowrap;transition:opacity var(--duration-ui) var(--ease-out)}
.nl-btn:hover{opacity:0.85}
.nl-btn:disabled{opacity:0.5;cursor:default}
.nl-fine{font-size:12px;line-height:1.5;color:var(--steel);margin:0}
.nl-msg{font-family:var(--font-structure);font-size:12px;letter-spacing:0.06em;color:var(--steel)}
.nl-msg.err{color:#b3261e}
/* Honeypot anti-spam — masqué aux humains, laissé au flux des bots */
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Variante sombre — section .cs-contact des case studies (fond --ink) */
.nl--dark{border-top:1px solid rgba(244,242,237,0.18);padding-top:28px}
.nl--dark .nl-label{color:var(--ash)}
.nl--dark .nl-copy{color:var(--paper)}
.nl--dark .nl-input{background:transparent;border-color:rgba(244,242,237,0.35);color:var(--paper)}
.nl--dark .nl-input::placeholder{color:var(--ash)}
.nl--dark .nl-input:focus{border-color:var(--paper)}
.nl--dark .nl-btn{background:transparent;color:var(--paper);border:1px solid var(--paper)}
.nl--dark .nl-btn:hover{background:var(--paper);color:var(--ink);opacity:1}
.nl--dark .nl-fine{color:var(--ash)}
.nl--dark .nl-fine .al-link{color:var(--paper)}
.nl--dark .nl-msg{color:var(--paper)}
.nl--dark .nl-msg.ok{color:var(--signal)}