/* ============ TOKENS ============ */
  :root{
    --violet-deep:  #2B0F52;   /* bg, bas du dégradé du héros */
    --violet-deep-rgb: 43,15,82;
    --violet-mid:   #45208C;   /* bordures */
    --violet-bright:#8A5CF0;   /* hover, pointillés */
    --yellow:       #F9DD3B;   /* JÔNE */
    --yellow-dim:   #C99A2C;
    --paper:        #F1E7D0;   /* papier des cartes */
    --paper-dark:   #DFC998;   /* onglets */
    --ink:          #241436;   /* texte sur papier */
    --cream:        #F6EFE2;   /* texte basique (boutons) */

    --display: "Fraunces", serif;
    --mono: "Space Mono", monospace;
    --body: "Work Sans", sans-serif;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--violet-deep);
    color:var(--cream);
    font-family:var(--body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    position:relative;
  }

  /* grain de papier subtil sur tout le site */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:2000;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

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

  h1,h2,h3{font-family:var(--display);margin:0;}

  .visually-hidden{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  :focus-visible{outline:2px solid var(--yellow);outline-offset:3px;}

  /* ============ HEADER ============ */
  .site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    padding:16px 0;
    background:rgba(var(--violet-deep-rgb), 0);
    backdrop-filter:blur(0px);
    transition:background .35s ease, backdrop-filter .35s ease, box-shadow .35s ease, padding .35s ease;
  }
  .site-header.is-scrolled{
    background:rgba(var(--violet-deep-rgb), .82);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    padding:10px 0;
  }
  .header-inner{
    max-width:1180px;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .top-left{
    display:flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:var(--yellow);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .35s ease, transform .35s ease;
  }
  .site-header.is-scrolled .top-left{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .top-left-flag{
    width:34px;height:23px;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.35);
    flex-shrink:0;
  }
  .top-left-name{
    font-family:var(--display);
    font-weight:700;
    font-size:1.25rem;
    letter-spacing:.02em;
  }

  .header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .btn-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 14px;
    border-radius:999px;
    border:1px solid rgba(246,239,226,.2);
    background:var(--violet-mid);
    color:var(--cream);
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(43,15,82,.35);
    transition:background .2s ease, border-color .2s ease, transform .15s ease;
    white-space:nowrap;
  }
  .btn-icon{width:14px;height:14px;flex-shrink:0;}
  .btn-pill:hover{
    background:var(--violet-bright);
    border-color:var(--yellow);
    transform:translateY(-1px);
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
  }
  .hero-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 60%;
    z-index:-2;
    /* PLACEHOLDER : remplace hero-placeholder.jpg par ta propre photo
       (même nom de fichier, ou change le src ci-dessous / dans le HTML) */
  }
  .hero-gradient{
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(
      to bottom,
      rgba(var(--violet-deep-rgb), .15) 0%,
      rgba(var(--violet-deep-rgb), .45) 35%,
      rgba(var(--violet-deep-rgb), .85) 70%,
      rgba(var(--violet-deep-rgb), 1) 100%
    );
  }
  .hero-content{
    position:relative;
    text-align:center;
    padding:0 24px 12vh;
    max-width:900px;
  }
  .hero-title{
    font-size:clamp(3.5rem, 12vw, 8.5rem);
    font-weight:900;
    color:var(--yellow);
    letter-spacing:-.01em;
    line-height:.95;
    text-shadow:0 6px 30px rgba(0,0,0,.35);
  }
  .hero-subtitle{
    margin-top:.6em;
    font-family:var(--mono);
    font-size:clamp(1rem, 2.6vw, 1.4rem);
    letter-spacing:.35em;
    text-transform:lowercase;
    color:var(--yellow);
  }
  .hero-scroll-cue{
    position:absolute;
    bottom:28px; left:50%;
    transform:translateX(-50%);
    color:rgba(246,239,226,.65);
    animation:bob 2.2s ease-in-out infinite;
  }
  @keyframes bob{
    0%,100%{transform:translate(-50%,0);}
    50%{transform:translate(-50%,8px);}
  }

  /* ============ cards (sections) ============ */
  .cards{
    position:relative;
    max-width:1080px;
    margin:0 auto;
    padding:8vh 24px 14vh;
  }
  .cards-thread{
    position:absolute;
    top:0; bottom:0; left:50%;
    width:0;
    border-left:2px dashed rgba(138,92,240,.45);
    z-index:0;
  }

  .cards-card{
    position:relative;
    z-index:1;
    width:min(600px, 100%);
    background:var(--paper);
    color:var(--ink);
    padding:44px 40px 40px;
    margin-bottom:9vh;
    box-shadow:0 18px 40px rgba(0,0,0,.35), 0 2px 0 rgba(255,255,255,.4) inset;
    transition:transform .3s ease, box-shadow .3s ease;
    opacity:0;
    transform:translateY(40px) rotate(var(--tilt,0deg));
  }
  .cards-card.is-visible{
    opacity:1;
    transform:translateY(0) rotate(var(--tilt,0deg));
  }
  .cards-card:hover{
    transform:translateY(0) rotate(0deg);
    box-shadow:0 22px 50px rgba(0,0,0,.4);
  }
  .cards-card--left{ margin-right:auto; --tilt:-1.4deg; }
  .cards-card--right{ margin-left:auto; --tilt:1.6deg; }

  .cards-tab{
    position:absolute;
    top:-22px;
    left:32px;
    background:var(--paper-dark);
    color:var(--ink);
    font-family:var(--mono);
    font-size:.68rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    padding:7px 16px 9px;
    clip-path:polygon(6% 0, 94% 0, 100% 100%, 0% 100%);
    box-shadow:0 -2px 0 rgba(0,0,0,.05) inset;
  }
  .cards-card--right .cards-tab{ left:auto; right:32px; }

  .cards-card h2{
    font-size:clamp(1.5rem, 3vw, 2rem);
    font-weight:700;
    margin:14px 0 16px;
  }
  .cards-card p{
    margin:0 0 14px;
    font-size:.98rem;
    color:rgba(36,20,54,.85);
  }
  .cards-card p:last-child{ margin-bottom:0; }

  /* ============ FOOTER ============ */
  .site-footer{
    border-top:1px solid rgba(246,239,226,.15);
    padding:40px 24px 32px;
    text-align:center;
  }
  .footer-flag{
    width:40px;height:27px;
    margin:0 auto 14px;
    border-radius:3px;
    box-shadow:0 0 0 1px rgba(255,255,255,.2);
  }
  .footer-motto{
    font-family:var(--mono);
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(246,239,226,.55);
  }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 720px){
    .header-actions .btn-label{ display:none; }
    .btn-pill{ padding:9px; }
    .btn-icon{ width:16px; height:16px; }

    .cards-card{ width:100%; margin-left:0 !important; margin-right:0 !important; --tilt:0deg; }
    .cards-thread{ left:24px; }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .cards-card{ transition:none; opacity:1; transform:none !important; }
    .hero-scroll-cue{ animation:none; }
    .site-header{ transition:none; }
  }