/* ==================================================================
   Gestionnaire de Fortune — Design System (compilé pour Laravel)
   Reproduction iso des tokens + base + classes gdf-* de la maquette.
================================================================== */

/* ---------------- COLORS ---------------- */
:root {
  --white:        #FFFFFF;
  --ink:          #0E0F10;
  --charcoal:     #141517;
  --gray-700:     #5C5D59;
  --gray-500:     #8C8D89;
  --gray-300:     #B7B6AF;
  --border:       #E5E3DB;
  --border-soft:  #EEEDE6;
  --parchment:    #F6F5F0;
  --parchment-2:  #EEECE3;

  --night:        #111820;
  --night-2:      #16202A;
  --night-3:      #0C1116;

  --teal-900:     #21484B;
  --teal-800:     #2C5C5E;
  --teal-700:     #35696A;
  --teal-600:     #4A6C6B;
  --teal-tint:    #E7EDEC;

  --sage:         #8FA093;
  --sage-tint:    #EAEEE9;
  --sky-teal:     #6FB2B0;

  --positive:     #3B7A5B;
  --negative:     #A6473C;
  --warning:      #A9852F;

  --surface-canvas:     var(--white);
  --surface-soft:       var(--parchment);
  --surface-soft-2:     var(--parchment-2);
  --surface-sage:       var(--sage-tint);
  --surface-teal:       var(--teal-tint);
  --surface-dark:       var(--night);
  --surface-dark-2:     var(--night-2);
  --surface-dark-3:     var(--night-3);
  --surface-inverse:    var(--charcoal);

  --text-primary:       var(--ink);
  --text-secondary:     var(--gray-700);
  --text-muted:         var(--gray-500);
  --text-faint:         var(--gray-300);

  --text-on-dark:       var(--white);
  --text-on-dark-muted: rgba(255,255,255,0.68);
  --text-on-dark-faint: rgba(255,255,255,0.44);

  --accent:             var(--teal-900);
  --accent-hover:       var(--teal-700);
  --accent-pressed:     var(--teal-800);
  --accent-soft:        var(--teal-600);
  --accent-on-dark:     var(--sky-teal);
  --link:               var(--teal-900);
  --link-on-dark:       var(--sky-teal);
  --focus-ring:         var(--teal-700);

  --hairline:           var(--border);
  --hairline-soft:      var(--border-soft);
  --hairline-on-dark:   rgba(255,255,255,0.14);

  --on-accent:          var(--white);
}

/* ---------------- TYPOGRAPHY ---------------- */
:root {
  --font-display: 'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;
  --w-bold:       700;

  --fs-display-xl: clamp(44px, 5.6vw, 68px);
  --fs-display-lg: clamp(36px, 4vw, 48px);
  --fs-display-md: clamp(29px, 2.8vw, 36px);
  --fs-headline:   clamp(24px, 2.2vw, 28px);

  --fs-title:      22px;
  --fs-lead:       20px;
  --fs-body:       17px;
  --fs-body-sm:    15px;
  --fs-caption:    13px;
  --fs-eyebrow:    12px;
  --fs-micro:      11px;

  --lh-tight:      1.06;
  --lh-snug:       1.16;
  --lh-title:      1.28;
  --lh-body:       1.6;
  --lh-relaxed:    1.75;

  --tr-display:    -0.02em;
  --tr-tight:      -0.01em;
  --tr-normal:     0;
  --tr-eyebrow:    0.14em;
  --tr-caps:       0.08em;
}

/* ---------------- SPACING ---------------- */
:root {
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   48px;
  --space-10:  64px;
  --space-11:  80px;
  --space-12:  120px;

  --gutter:          24px;
  --card-pad:        24px;
  --card-pad-lg:     32px;
  --section-pad-y:   96px;
  --section-pad-y-sm:64px;
  --field-pad-x:     16px;
  --field-pad-y:     12px;

  --container-narrow: 720px;
  --container-text:   960px;
  --container:        1200px;
  --container-wide:   1440px;
  --page-margin:      24px;
}

/* ---------------- RADIUS ---------------- */
:root {
  --radius-none: 0px;
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-pill: 999px;
  --radius-full: 50%;
}

/* ---------------- ELEVATION & MOTION ---------------- */
:root {
  --shadow-none:      none;
  --shadow-hairline:  0 0 0 1px var(--hairline);
  --shadow-soft:      0 1px 2px rgba(14,15,16,0.04),
                      0 10px 30px rgba(14,15,16,0.06);
  --shadow-portrait:  0 8px 40px rgba(12,17,22,0.18);
  --shadow-float:     0 2px 8px rgba(14,15,16,0.08),
                      0 20px 48px rgba(14,15,16,0.12);

  --blur-frost:       saturate(160%) blur(18px);

  --ease-standard:    cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:         120ms;
  --dur:              200ms;
  --dur-slow:         420ms;

  --press-scale:      0.97;

  --focus-outline:    2px solid var(--focus-ring);
  --focus-offset:     2px;
}

/* ---------------- BASE ---------------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01";
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-display);
  margin: 0;
  color: var(--text-primary);
}

p { margin: 0; }

a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }

::selection { background: var(--teal-tint); color: var(--ink); }

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

img { display: block; max-width: 100%; }

/* ---------------- Utility type classes ---------------- */
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--w-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.t-display-xl { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-display-xl); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
.t-display-lg { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-display-lg); line-height: var(--lh-snug); letter-spacing: var(--tr-display); }
.t-display-md { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-display-md); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.t-headline   { font-family: var(--font-display); font-weight: var(--w-medium); font-size: var(--fs-headline);   line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.t-title      { font-family: var(--font-sans); font-weight: var(--w-semibold); font-size: var(--fs-title); line-height: var(--lh-title); }
.t-lead       { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-lead); line-height: var(--lh-body); }
.t-body       { font-family: var(--font-sans); font-weight: var(--w-regular); font-size: var(--fs-body); line-height: var(--lh-body); }
.t-caption    { font-family: var(--font-sans); font-weight: var(--w-medium); font-size: var(--fs-caption); line-height: var(--lh-title); }

/* ==================================================================
   gdf-* — classes responsive & micro-interactions (ex-injectStyles)
================================================================== */
.gdf-header{position:sticky;top:0;z-index:200;background:#FFFFFF;
  border-bottom:1px solid var(--hairline);}
.gdf-headrow{max-width:var(--container-wide);margin:0 auto;height:92px;display:flex;
  align-items:center;gap:var(--space-7);padding:0 var(--space-8);}
.gdf-logo{flex:none;display:inline-flex;align-items:center;}
.gdf-logo img{height:60px;width:auto;display:block;}
.gdf-nav{display:flex;align-items:center;gap:var(--space-6);flex:1;justify-content:center;}
.gdf-navlink{font-family:var(--font-sans);font-size:var(--fs-body-sm);font-weight:var(--w-medium);
  color:var(--text-secondary);text-decoration:none;white-space:nowrap;padding:6px 0;
  border-bottom:2px solid transparent;cursor:pointer;transition:color .15s;}
.gdf-navlink:hover,.gdf-navitem:hover .gdf-navlink{color:var(--text-primary);}
.gdf-navlink.active{color:var(--accent);border-bottom-color:var(--accent);}
.gdf-navitem{position:relative;display:flex;align-items:center;}
.gdf-caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);margin-left:6px;opacity:.5;position:relative;top:-2px;}
.gdf-drop{position:absolute;top:100%;left:-16px;min-width:290px;background:var(--surface-canvas);
  border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);
  padding:8px;display:none;flex-direction:column;margin-top:10px;}
.gdf-navitem:hover .gdf-drop{display:flex;}
.gdf-drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:14px;}
.gdf-drop a{font-family:var(--font-sans);font-size:var(--fs-body-sm);color:var(--text-secondary);
  text-decoration:none;padding:10px 12px;border-radius:var(--radius-sm);white-space:nowrap;}
.gdf-drop a:hover{background:var(--surface-soft);color:var(--text-primary);}
.gdf-headright-quiet{display:flex;align-items:center;gap:var(--space-5);}
.gdf-cta-gold{background:#C9A45C !important;border-color:#C9A45C !important;color:#0E0F10 !important;}
.gdf-cta-gold:hover{background:#b8934a !important;border-color:#b8934a !important;}
.gdf-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--hairline);border-radius:var(--radius-sm);background:transparent;cursor:pointer;}
.gdf-burger span,.gdf-burger span::before,.gdf-burger span::after{content:"";display:block;width:18px;height:1.5px;
  background:var(--text-primary);position:relative;}
.gdf-burger span::before{position:absolute;top:-6px;}.gdf-burger span::after{position:absolute;top:6px;}
.gdf-mobile{display:none;position:fixed;inset:92px 0 0;z-index:190;background:var(--surface-canvas);
  overflow:auto;padding:var(--space-6) var(--space-6) 120px;}
.gdf-mobile.open{display:block;}
.gdf-macc{border-bottom:1px solid var(--hairline);display:block;}
.gdf-macc>summary{list-style:none;cursor:pointer;padding:16px 4px;font-family:var(--font-sans);
  font-size:var(--fs-lead);font-weight:var(--w-medium);color:var(--text-primary);
  display:flex;justify-content:space-between;align-items:center;}
.gdf-macc>summary::-webkit-details-marker{display:none;}
.gdf-macc[open]>summary{color:var(--accent);}
.gdf-macc a{display:block;padding:10px 4px;color:var(--text-secondary);text-decoration:none;font-size:var(--fs-body);}
.gdf-stickycta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:180;padding:12px 16px;
  background:rgba(255,255,255,0.9);backdrop-filter:blur(14px);border-top:1px solid var(--hairline);}
.gdf-faq details{border-top:1px solid var(--hairline);}
.gdf-faq details:last-child{border-bottom:1px solid var(--hairline);}
.gdf-faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;
  gap:24px;align-items:baseline;font-family:var(--font-display);font-weight:var(--w-medium);
  font-size:var(--fs-headline);letter-spacing:var(--tr-tight);color:var(--text-primary);}
.gdf-faq summary::-webkit-details-marker{display:none;}
.gdf-faq .gdf-plus{flex:none;width:16px;height:16px;position:relative;top:4px;}
.gdf-faq .gdf-plus::before,.gdf-faq .gdf-plus::after{content:"";position:absolute;background:var(--accent);}
.gdf-faq .gdf-plus::before{left:7px;top:0;width:2px;height:16px;transition:transform .2s;}
.gdf-faq .gdf-plus::after{left:0;top:7px;width:16px;height:2px;}
.gdf-faq details[open] .gdf-plus::before{transform:scaleY(0);}
.gdf-faq details>div{padding:0 0 22px;max-width:760px;color:var(--text-secondary);
  font-size:var(--fs-body);line-height:var(--lh-body);}
.gdf-linkcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;height:100%;
  background:var(--surface-canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);
  padding:var(--card-pad-lg);transition:border-color .18s,transform .18s;}
.gdf-linkcard:hover{border-color:var(--accent);transform:translateY(-3px);}
.gdf-arrow{color:var(--accent);font-size:var(--fs-body-sm);font-weight:var(--w-semibold);margin-top:auto;
  display:inline-flex;align-items:center;gap:6px;letter-spacing:var(--tr-tight);}
.gdf-prose h2{font-family:var(--font-display);font-weight:var(--w-medium);font-size:var(--fs-display-md);
  line-height:var(--lh-snug);letter-spacing:var(--tr-tight);color:var(--text-primary);
  margin:0 0 var(--space-5);}
.gdf-prose h3{font-family:var(--font-sans);font-weight:var(--w-semibold);font-size:var(--fs-title);
  color:var(--text-primary);margin:var(--space-6) 0 var(--space-3);}
.gdf-prose p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-secondary);
  margin:0 0 var(--space-4);max-width:760px;}
.gdf-prose ul{margin:0 0 var(--space-5);padding:0;list-style:none;max-width:760px;}
.gdf-prose li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--text-secondary);
  font-size:var(--fs-body);line-height:var(--lh-body);}
.gdf-prose li::before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg);}
.gdf-prose a{color:var(--link);border-bottom:1px solid rgba(33,72,75,.28);}
.gdf-prose a:hover{border-bottom-color:var(--accent);}
.gdf-article{max-width:var(--container);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-11);align-items:start;}
.gdf-article aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:var(--space-5);}
.gdf-split2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-11);align-items:start;}
@media(max-width:900px){.gdf-article{grid-template-columns:1fr;gap:var(--space-9);}
  .gdf-article aside{position:static;}.gdf-split2{grid-template-columns:1fr;gap:var(--space-9);}}
@media(max-width:1120px){.gdf-nav,.gdf-headright-quiet{display:none;}.gdf-burger{display:inline-flex;}
  .gdf-stickycta{display:block;}}
@media(max-width:720px){.gdf-headrow{padding:0 var(--space-5);height:76px;}
  .gdf-logo img{height:48px;}
  .gdf-mobile{inset:76px 0 0;}}

/* Grilles responsive pour colonnes fixes (repeat(N,...) -> auto-fit en mobile) */
@media(max-width:860px){
  .gdf-grid-fixed{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)) !important;}
  .gdf-2col{grid-template-columns:1fr !important;gap:var(--space-9) !important;}
}

/* ---- Validation : champ obligatoire non rempli = rouge + tremblement ---- */
@keyframes gdf-shake{
  10%,90%{transform:translateX(-1px);}
  20%,80%{transform:translateX(2px);}
  30%,50%,70%{transform:translateX(-6px);}
  40%,60%{transform:translateX(6px);}
}
.gdf-invalid{animation:gdf-shake .5s cubic-bezier(.36,.07,.19,.97) both;}
.gdf-field.gdf-error > label{color:var(--negative);}
.gdf-field.gdf-error input:not([type=radio]):not([type=checkbox]),
.gdf-field.gdf-error select,
.gdf-field.gdf-error textarea{
  border-color:var(--negative) !important;
  box-shadow:0 0 0 3px rgba(166,71,60,.14) !important;
}
.gdf-field.gdf-error .gdf-rc{border-color:var(--negative);}
.gdf-field.gdf-error input[type=checkbox]{outline:2px solid var(--negative);outline-offset:3px;border-radius:var(--radius-xs);}