/* ============================================================================
   Brio — feuille de styles unique du portfolio (Symfony / AssetMapper)
   ----------------------------------------------------------------------------
   Tout le design system Brio porté en CSS natif (aucun React requis) :
   tokens, base, chrome (spectre + nav + footer), boutons, badges et
   utilitaires partagés. Les styles propres à chaque page vivent dans le
   bloc {% block stylesheets %} de leur template Twig.

   Chargé depuis templates/base.html.twig :
     <link rel="stylesheet" href="{{ asset('styles/brio.css') }}">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Hanken+Grotesk:wght@400..800&family=JetBrains+Mono:wght@400..600&display=swap');

/* ─────────────────────────── TOKENS : couleurs ─────────────────────────── */
:root {
  --orange-50:#FFF3EC; --orange-100:#FFE2D2; --orange-200:#FFC4A8; --orange-300:#FF9F73;
  --orange-400:#FB7843; --orange-500:#F1592A; --orange-600:#D8431A; --orange-700:#B23414;
  --orange-800:#8C2911; --orange-900:#6E2210;

  --rose-50:#FFF0F6; --rose-100:#FFDCEA; --rose-200:#FFB6D4; --rose-300:#FB85B6;
  --rose-400:#F45B9C; --rose-500:#EC3F89; --rose-600:#CF2B72; --rose-700:#A81F5B;
  --rose-vivid:#FF3D90;

  --azure-50:#EDF3FF; --azure-100:#D8E5FF; --azure-200:#AFC8FF; --azure-300:#7FA4FB;
  --azure-400:#4F7DF2; --azure-500:#2E6BE6; --azure-600:#1E54C4; --azure-700:#18429B;

  --amber-50:#FFF8E8; --amber-100:#FFEDBF; --amber-200:#FCDA84; --amber-300:#F8C44A;
  --amber-400:#F4AE1F; --amber-500:#E8920C; --amber-600:#C2750A; --amber-700:#95590A;

  --stone-0:#FFFFFF; --stone-50:#FBF8F4; --stone-100:#F4EEE7; --stone-150:#ECE4DA;
  --stone-200:#E3D9CC; --stone-300:#D2C5B4; --stone-400:#AB9D8B; --stone-500:#827668;
  --stone-600:#5C5347; --stone-700:#423B32; --stone-800:#2A251F; --stone-900:#1C1813;
  --stone-950:#15110D; --ink:#14110D;

  --success-soft:#E2F4E9; --success:#2FA56A; --success-strong:#1F7A4C;
  --warning-soft:var(--amber-100); --warning:#E8920C; --warning-strong:#B5710A;
  --danger-soft:#FCE6E6; --danger:#E5484D; --danger-strong:#C13338;
  --info-soft:var(--azure-100); --info:var(--azure-500); --info-strong:var(--azure-600);

  --bg:var(--stone-50); --bg-subtle:var(--stone-100); --bg-inset:var(--stone-150);
  --surface:var(--stone-0); --surface-card:var(--stone-0); --surface-elevated:var(--stone-0);
  --surface-sunken:var(--stone-100);
  --border:var(--stone-200); --border-soft:var(--stone-150); --border-strong:var(--stone-300);
  --text:var(--ink); --text-muted:var(--stone-600); --text-subtle:var(--stone-500);
  --text-on-brand:#FFFFFF; --text-on-dark:var(--stone-50);
  --brand:var(--orange-500); --brand-hover:var(--orange-600); --brand-active:var(--orange-700);
  --brand-contrast:#FFFFFF; --brand-soft:var(--orange-50); --brand-soft-border:var(--orange-200);
  --brand-text:var(--orange-700);
  --accent-rose:var(--rose-500); --accent-azure:var(--azure-500); --accent-amber:var(--amber-500);
  --ring:color-mix(in oklch, var(--orange-500) 45%, transparent);
  --overlay:color-mix(in oklch, var(--stone-950) 45%, transparent);

  /* ── Typographie ── */
  --font-display:'Bricolage Grotesque','Hanken Grotesk',system-ui,sans-serif;
  --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem;
  --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem;
  --text-3xl:3rem; --text-4xl:3.75rem; --text-5xl:4.75rem; --text-6xl:6rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;
  --leading-none:1; --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tighter:-0.04em; --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.02em; --tracking-wider:0.08em;
  --heading-font:var(--font-display); --heading-weight:var(--weight-semibold);
  --body-font:var(--font-sans); --body-weight:var(--weight-regular); --body-leading:var(--leading-relaxed);

  /* ── Espacement ── */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --maxw:1240px;
  --control-h-sm:2rem; --control-h-md:2.625rem; --control-h-lg:3.25rem;

  /* ── Rayons / bordures / ombres ── */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px;
  --radius-2xl:30px; --radius-full:999px;
  --shadow-color:28 30% 18%;
  --shadow-xs:0 1px 2px hsl(var(--shadow-color)/0.08);
  --shadow-sm:0 1px 2px hsl(var(--shadow-color)/0.06),0 2px 6px hsl(var(--shadow-color)/0.07);
  --shadow-md:0 2px 4px hsl(var(--shadow-color)/0.06),0 6px 16px hsl(var(--shadow-color)/0.10);
  --shadow-lg:0 4px 8px hsl(var(--shadow-color)/0.06),0 14px 32px hsl(var(--shadow-color)/0.12);
  --shadow-xl:0 8px 16px hsl(var(--shadow-color)/0.08),0 28px 60px hsl(var(--shadow-color)/0.16);
  --shadow-brand:0 6px 18px color-mix(in oklch, var(--orange-500) 38%, transparent);
  --shadow-brand-sm:0 3px 10px color-mix(in oklch, var(--orange-500) 32%, transparent);
  --focus-ring:0 0 0 3px var(--ring);

  /* ── Motion ── */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --transition-base:all var(--dur-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:0ms; --dur-base:0ms; --dur-slow:0ms; }
}

/* ─────────────────────────── BASE ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--body-font); font-weight: var(--body-weight);
  font-size: var(--text-base); line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv01"; overflow-x: clip;
}
h1,h2,h3,h4,h5 {
  font-family: var(--heading-font); font-weight: var(--heading-weight);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--text); margin: 0 0 0.5em; text-wrap: balance;
}
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: none; }
code,kbd,samp,pre { font-family: var(--font-mono); font-size: 0.92em; }
::selection { background: color-mix(in oklch, var(--orange-500) 24%, transparent); color: var(--text); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
img,svg,video { display: block; max-width: 100%; }

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

/* accessibilité : lien d'évitement */
.skip-to-content {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--stone-50); padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-family: var(--font-mono); font-size: var(--text-sm);
}
.skip-to-content:focus { left: 0; }

/* ─────────────────────────── BOUTONS ─────────────────────────── */
.brio-btn {
  --_h: var(--control-h-md);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  height: var(--_h); padding: 0 1.15rem;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm);
  line-height: 1; letter-spacing: .005em; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none; transition: var(--transition-base);
}
.brio-btn:hover { text-decoration: none; }
.brio-btn:active { transform: translateY(.5px) scale(.99); }
.brio-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.brio-btn[disabled],.brio-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.brio-btn--sm { height: var(--control-h-sm); font-size: var(--text-xs); padding: 0 .85rem; border-radius: var(--radius-sm); }
.brio-btn--lg { height: var(--control-h-lg); font-size: var(--text-base); padding: 0 1.6rem; border-radius: var(--radius-lg); }
.brio-btn--block { display: flex; width: 100%; }
.brio-btn--primary { background: var(--brand); color: var(--brand-contrast); box-shadow: var(--shadow-brand-sm); }
.brio-btn--primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-brand); }
.brio-btn--primary:active { background: var(--brand-active); }
.brio-btn--secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.brio-btn--secondary:hover { background: var(--bg-subtle); border-color: var(--stone-400); }
.brio-btn--ghost { background: transparent; color: var(--text-muted); }
.brio-btn--ghost:hover { background: var(--bg-subtle); color: var(--text); }
.brio-btn--soft { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-soft-border); }
.brio-btn--soft:hover { background: color-mix(in oklch, var(--brand) 14%, var(--brand-soft)); }

/* ─────────────────────────── BADGES ─────────────────────────── */
.brio-badge {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--font-sans); font-weight: 600; font-size: var(--text-xs); line-height: 1;
  padding: .4em .7em; border-radius: var(--radius-full);
  background: var(--bg-inset); color: var(--text-muted);
}
.brio-badge--brand { background: var(--brand-soft); color: var(--brand-text); }
.brio-badge--rose { background: var(--rose-100); color: var(--rose-700); }
.brio-badge--azure { background: var(--azure-100); color: var(--azure-700); }
.brio-badge--amber { background: var(--amber-100); color: var(--amber-700); }
.brio-badge--success { background: var(--success-soft); color: var(--success-strong); }
.brio-badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); }
.brio-badge__dot { width: .45em; height: .45em; border-radius: 50%; background: currentColor; }

/* ─────────────────────────── CHROME : spectre ─────────────────────────── */
.spectrum { display: flex; height: 8px; position: sticky; top: 0; z-index: 21; }
.spectrum i { flex: 1; }
.spectrum i:nth-child(1) { background: var(--orange-500); }
.spectrum i:nth-child(2) { background: var(--rose-500); }
.spectrum i:nth-child(3) { background: var(--azure-500); }
.spectrum i:nth-child(4) { background: var(--amber-500); }

/* règle spectre sous un titre (séparateur) */
.spectrum-rule { display: flex; gap: 4px; width: 96px; }
.spectrum-rule i { flex: 1; height: 4px; border-radius: 999px; }
.spectrum-rule i:nth-child(1){ background: var(--orange-500); }
.spectrum-rule i:nth-child(2){ background: var(--rose-500); }
.spectrum-rule i:nth-child(3){ background: var(--azure-500); }
.spectrum-rule i:nth-child(4){ background: var(--amber-500); }

/* ─────────────────────────── CHROME : nav ─────────────────────────── */
.nav {
  position: sticky; top: 8px; z-index: 20;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--border);
}
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--text); }
.brand img { width: 34px; height: 34px; display: block; }
.brand b { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 18px; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  font-size: var(--text-sm); color: var(--text-muted); text-decoration: none;
  padding: 8px 12px; border-radius: var(--radius-sm); transition: color .16s, background .16s; position: relative;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); font-weight: 600; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--brand); border-radius: 2px;
}
.nav-cta { display: flex; align-items: center; gap: 10px; }

/* ─────────────────────────── eyebrow partagé ─────────────────────────── */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-subtle);
  display: flex; align-items: center; gap: 9px;
}
.eyebrow .spark { color: var(--brand); }
.eyebrow .dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex-shrink: 0; }
.eyebrow .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--success); animation: dot-ping 2s ease-out infinite; }
@keyframes dot-ping { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .eyebrow .dot::after { animation: none; } }

/* ─────────────────────────── section partagée ─────────────────────────── */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px,9vh,104px) 32px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(26px,4vh,46px); }
.sec-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--text-subtle); display: flex; align-items: center; gap: 9px; }
.sec-eyebrow .spark { color: var(--brand); }
.sec-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; font-size: clamp(34px,5vw,66px); margin: 10px 0 0; }
.sec-title em { font-style: italic; }

/* Texte en dégradé (background-clip: text) — le padding-right agrandit la zone
   peinte pour que le dernier caractère (point, f, j…) ne soit pas rogné par le
   clip ; le margin-right négatif annule l'impact sur la mise en page. Ne jamais
   ajouter display: inline-block ici : ça casserait le retour à la ligne des
   titres multilignes. */
.gradient-text {
  background-image: linear-gradient(100deg, var(--amber-400), var(--orange-500) 40%, var(--rose-vivid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.16em;
  margin-right: -0.1em;
}
.sec-link { font-weight: 600; color: var(--text); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.sec-link .arr { color: var(--brand); transition: transform .22s var(--ease-out, ease); }
.sec-link:hover .arr { transform: translateX(6px); }

/* ─────────────────────────── reveal au scroll ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s var(--ease-out, ease); }
  .reveal.in { opacity: 1; transform: none; }
}
.force-show .reveal { opacity: 1 !important; transform: none !important; }

/* ─────────────────────────── messages flash ─────────────────────────── */
.flash {
  max-width: var(--maxw); margin: 20px auto -8px; padding: 14px 18px;
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 500;
  border: 1px solid transparent;
}
.flash + .flash { margin-top: 10px; }
.flash-success { background: var(--success-soft); color: var(--success-strong); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.flash-error,.flash-danger { background: var(--danger-soft); color: var(--danger-strong); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.flash-info { background: var(--info-soft); color: var(--info-strong); border-color: color-mix(in srgb, var(--info) 30%, transparent); }

/* ─────────────────────────── footer (encre) ─────────────────────────── */
.foot { background: var(--ink); color: var(--stone-300); margin-top: clamp(40px,8vh,90px); }
.foot-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(40px,6vh,64px) 32px clamp(22px,3vh,30px);
  display: grid; grid-template-columns: 2.2fr 1fr 1fr 1.5fr; gap: 32px; align-items: start;
}
.foot-brand .foot-mark { display: flex; align-items: center; gap: 11px; }
.foot-brand .foot-mark img { width: 30px; height: 30px; }
.foot-brand .foot-mark b { color: var(--stone-50); font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: 18px; }
.foot-tag { color: var(--stone-400); font-size: var(--text-sm); line-height: 1.6; max-width: 38ch; margin: 14px 0 0; }
.foot-spectrum { display: flex; gap: 4px; width: 132px; margin-top: 18px; }
.foot-spectrum i { flex: 1; height: 5px; border-radius: 999px; }
.foot-spectrum i:nth-child(1){ background: var(--orange-500); }
.foot-spectrum i:nth-child(2){ background: var(--rose-500); }
.foot-spectrum i:nth-child(3){ background: var(--azure-500); }
.foot-spectrum i:nth-child(4){ background: var(--amber-500); }
.foot-col h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--stone-500); margin: 0 0 14px; }
.foot-col a { display: block; white-space: nowrap; color: var(--stone-300); text-decoration: none; font-size: var(--text-sm); padding: 5px 0; transition: color .15s ease; width: max-content; }
.foot-col a:hover { color: var(--orange-300); }
.foot-col .foot-mail { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--stone-400); word-break: break-all; }
.foot-bottom {
  max-width: var(--maxw); margin: 0 auto; padding: 18px 32px; border-top: 1px solid #2A241C;
  display: flex; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--stone-500);
}
.foot-bottom a { color: var(--stone-400); text-decoration: none; }
.foot-bottom a:hover { color: var(--orange-300); }
.foot-bottom .fb-right .dot { color: var(--stone-600); margin: 0 8px; }

/* ─────────────────────────── scroll-to-top ─────────────────────────── */
.scroll-to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 30;
  width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--ink);
  background: var(--surface); color: var(--ink); cursor: pointer;
  display: grid; place-items: center; font-size: 18px; box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease-out, ease), background .15s ease;
}
.scroll-to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll-to-top:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ─────────────────────────── responsive chrome ─────────────────────────── */
@media (max-width: 720px) {
  .nav-links { display: flex; order: 3; width: 100%; gap: 2px; font-size: 13px; overflow-x: auto; }
  .nav-inner { flex-wrap: wrap; row-gap: 10px; }
  .nav-cta { margin-left: auto; }
  .nav-inner { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 760px) {
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 26px 24px; padding-left: 20px; padding-right: 20px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-bottom { padding-left: 20px; padding-right: 20px; }
}