@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/ibm-plex-mono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/space-grotesk-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('/assets/fonts/space-grotesk-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

  :root{
    --wine:#1B1619;
    --wine-2:#2A2327;
    --wine-3:#121013;
    --crimson:#E30166;
    --crimson-2:#FF3690;
    /* Variantes TEXTE du crimson : meme teinte, densite ajustee pour passer
       WCAG AA (4.5:1) sur les petits textes. Le crimson pur reste la couleur
       d'identite : logo, boutons, aplats, traits. */
    --crimson-ink:#D2015E;      /* sur fonds clairs */
    --crimson-ink-dark:#FF3690; /* sur fonds sombres */
    --cream:#FAF7F4;
    --cream-2:#EFEAE6;
    --ink:#17141A;
    --mute:#6B666A;
    --mute-dark:#828082;   /* gris secondaire sur fonds sombres */
    --line:#E5DEDA;
    /* Bouton affiche mais sans action. Le gris du texte est cale au contraste :
       5,14:1 sur le fond --line, au-dessus du seuil AA de 4,5. --mute n'y
       suffisait pas (4,23:1). Ce n'est pas une couleur d'accent, c'est un gris. */
    --inactif-texte:#5F595D;
    --inactif-bord:#D8D0CB;
    --line-dark:rgba(250,247,244,0.16);
    --maxw:1120px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:84px;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    font-weight:700;
    letter-spacing:-0.01em;
    margin:0;
  }
  .mono{
    font-family:'IBM Plex Mono', monospace;
  }
  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
  }
  a{color:inherit;}
  img{display:block;max-width:100%;}

  /* ---------- NAV ---------- */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(250,245,241,0.9);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  nav .wrap{
    display:flex; align-items:center; justify-content:flex-start;
    gap:0;
    padding-top:14px; padding-bottom:14px;
  }
  nav .brand{display:flex; align-items:center; gap:10px;}
  nav .brand img{height:34px; width:auto;}
  nav .brand-lien{display:flex; align-items:center; text-decoration:none;}
  nav .brand span{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; letter-spacing:0.01em; color:var(--wine);}
  nav ul{list-style:none; display:flex; gap:20px; margin:0 0 0 54px; padding:0;}
  nav a.navlink{
    font-size:13px; font-weight:500; text-decoration:none; color:var(--ink);
    letter-spacing:0.03em; text-transform:uppercase;
    border-bottom:2px solid transparent; padding-bottom:4px;
    transition:border-color .2s ease, color .2s ease;
  }
  nav a.navlink:hover{border-color:var(--crimson); color:var(--wine);}
  .nav-cta{
    background:var(--crimson); color:#fff !important; text-decoration:none;
    padding:9px 18px; border-radius:999px; font-size:13px; font-weight:600;
    letter-spacing:0.02em;
    white-space:nowrap;
    /* Largeur fixe : le libelle change de longueur d'une langue a l'autre
       (« Become a member » 152px, « Diventa socio » 120px). Sans cela, le
       bouton ET le selecteur se decalaient a chaque changement de langue. */
    display:inline-flex; align-items:center; justify-content:center;
    min-width:168px; box-sizing:border-box;
  }
  .nav-burger{
    display:none;
    background:none; border:0; padding:10px; margin-right:-10px;
    cursor:pointer; color:var(--ink);
  }
  .nav-burger span{
    display:block; width:22px; height:2px; background:currentColor;
    transition:transform .25s ease, opacity .2s ease;
  }
  .nav-burger span + span{margin-top:5px;}
  .nav-panel{
    position:fixed; inset:0; z-index:60;
    background:var(--wine); color:var(--cream);
    display:flex; flex-direction:column;
    padding:22px 22px 40px;
    transform:translateY(-100%);
    visibility:hidden;
    transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
    overflow-y:auto;
  }
  .nav-panel[data-open="true"]{
    transform:translateY(0);
    visibility:visible;
    transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .nav-panel-head{display:flex; align-items:center; justify-content:space-between;}
  .nav-panel-head img{height:34px; width:auto;}
  .nav-panel .nav-burger{display:block; color:var(--cream);}
  .nav-panel[data-open="true"] .nav-burger span:first-child{transform:translateY(7px) rotate(45deg);}
  .nav-panel[data-open="true"] .nav-burger span:nth-child(2){opacity:0;}
  .nav-panel[data-open="true"] .nav-burger span:last-child{transform:translateY(-7px) rotate(-45deg);}
  .nav-panel ul{list-style:none; margin:36px 0 0; padding:0;}
  .nav-panel li{border-top:1px solid var(--line-dark);}
  .nav-panel li:last-child{border-bottom:1px solid var(--line-dark);}
  .nav-panel a{
    display:block; padding:18px 0;
    font-family:'Space Grotesk',sans-serif; font-weight:700;
    font-size:26px; letter-spacing:-0.01em; text-decoration:none;
  }
  .nav-panel .nav-cta{
    align-self:flex-start; margin-top:32px;
    padding:13px 26px; font-size:15px;
  }
  @media (max-width:1024px){
    nav ul.navlinks{display:none;}
    nav .nav-cta{display:none;}
    .nav-burger{display:block;}
  }
  @media (min-width:1025px){ .nav-panel{display:none;} }


  /* ---------- FORMULAIRE D'ADHESION ---------- */
  .join-form{
    margin-top:28px; border:1px solid var(--line); border-radius:20px;
    padding:34px 38px; background:var(--cream-2);
  }
  .join-form h3{font-size:22px; color:var(--wine); margin:0 0 6px;}
  .join-intro{font-size:14.5px; color:var(--mute); margin:0 0 24px; max-width:60ch;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .field{display:flex; flex-direction:column; margin-bottom:18px;}
  .field label{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em;
    text-transform:uppercase; color:var(--wine); margin-bottom:7px;
  }
  .field input, .field select, .field textarea{
    font-family:'IBM Plex Sans',sans-serif; font-size:14.5px; color:var(--ink);
    background:var(--cream); border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; width:100%; box-sizing:border-box;
    transition:border-color .15s ease;
  }
  .field textarea{resize:vertical; min-height:78px;}
  .field input:focus, .field select:focus, .field textarea:focus{
    outline:none; border-color:var(--crimson);
  }
  .field input.invalid, .field select.invalid{border-color:var(--crimson); background:#FDF2F5;}
  .field-consent{
    display:flex; align-items:flex-start; gap:11px;
    font-size:13.5px; color:var(--mute); line-height:1.5; margin:4px 0 22px;
    cursor:pointer;
  }
  .field-consent input{margin:2px 0 0; flex:none; width:16px; height:16px; accent-color:var(--crimson);}
  .field-consent a{color:var(--crimson-ink); text-decoration:underline;}
  .field-consent.invalid span{color:var(--crimson-ink);}
  /* Champ leurre anti-robot. Sorti de l'ecran plutot que masque par
     « display:none » : les robots un peu soigneux ignorent ce qui est
     explicitement cache, et rempliraient alors un champ qu'ils savent
     invisible. Ici le champ existe pour le DOM, mais aucun visiteur ne peut
     l'atteindre, ni a la souris, ni au clavier, ni au lecteur d'ecran. */
  .leurre{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .join-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
  .join-note{font-size:13.5px; margin:0; color:var(--mute);}
  .join-note.err{color:var(--crimson-ink);}
  .join-note.ok{color:var(--wine); font-weight:500;}
  .join-form[data-sent="true"] .field-row,
  .join-form[data-sent="true"] .field,
  .join-form[data-sent="true"] .field-consent,
  .join-form[data-sent="true"] #jfSubmit{display:none;}
  @media (max-width:640px){
    .join-form{padding:26px 22px;}
    .field-row{grid-template-columns:1fr; gap:0;}
  }

  /* ---------- HERO ---------- */
  .hero{
    background:radial-gradient(120% 160% at 15% -10%, var(--wine-2) 0%, var(--wine) 45%, var(--wine-3) 100%);
    color:var(--cream);
    padding:76px 0 0;
    overflow:hidden;
    position:relative;
  }
  .hero .hero-main{
    display:grid;
    grid-template-columns:1.05fr 0.95fr;
    gap:40px;
    align-items:center;
  }
  .hero-logo{
    height:84px; width:auto; margin-bottom:22px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--crimson-2);
    margin-bottom:22px;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--crimson-2); display:inline-block;}
  .hero h1{
    font-size:52px; line-height:1.06; color:#fff;
    margin-bottom:22px;
  }
  .hero h1 em{
    font-style:normal; color:var(--crimson-2);
  }
  .hero p.lead{
    font-size:17px; color:#E6E2E0; max-width:480px; margin-bottom:30px;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 24px; border-radius:999px; font-size:14px; font-weight:600;
    text-decoration:none; letter-spacing:0.01em;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--crimson); color:#fff; box-shadow:0 8px 24px rgba(232,33,74,0.35);}
  .btn-ghost{background:transparent; color:#fff; border:1px solid var(--line-dark);}
  .btn-ghost:hover{border-color:#fff;}

  /* Bouton affiche mais sans action (Register, desactive le 2026-08-10).
     Le gris dit « indisponible » ; sans lui, un bouton d'apparence normale qui
     ne repond pas se lit comme un site casse. Le survol ne souleve pas et
     l'ombre portee tombe, pour qu'aucun signal n'invite au clic.

     Surtout pas « opacity » : elle attenue le texte EN MEME TEMPS que le fond,
     et le blanc sur rose delave tombait a 2,31:1, tres en dessous du seuil AA.
     Ici le fond et le texte sont poses separement, mesures a 5,14:1. La bordure
     detache le bouton de la carte, dont le fond est proche. */
  .btn-inactif{
    background:var(--line); color:var(--inactif-texte);
    border:1px solid var(--inactif-bord);
    cursor:default; box-shadow:none;
  }
  .btn-inactif:hover{transform:none;}

  /* Four static "pillar" tiles — punchy, abstract line-art per concept */
  .p4-section{
    border-top:1px solid var(--line-dark);
    margin-top:64px;
    padding-top:48px;
    padding-bottom:16px;
  }
  .p4-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  }
  .p4-tile{
    position:relative; overflow:hidden;
    border-radius:18px;
    padding:78px 26px 30px;
    min-height:268px;
    display:flex; flex-direction:column; justify-content:flex-start;
    isolation:isolate;
    transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
  }
  .p4-tile:hover{transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,0.35);}
  .p4-art{position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:0.45;}
  .p4-tile::after{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,0) 18%, rgba(0,0,0,0.34) 52%, rgba(0,0,0,0.46) 100%);
  }
  .p4-num{
    position:absolute; top:18px; right:22px; z-index:1;
    font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:60px;
    color:rgba(255,255,255,0.13); line-height:1; pointer-events:none;
  }
  .p4-tile h2{position:relative; z-index:1; font-size:25px; color:#fff; margin-bottom:12px;}
  .p4-tile p{position:relative; z-index:1; font-size:14.5px; line-height:1.6; color:#E6E2E0; margin:0;}
  .p4-connect{background:linear-gradient(155deg,#5c1a2b 0%,#3d1220 100%);}
  .p4-learn{background:linear-gradient(155deg,#7a1030 0%,#4a0d20 100%);}
  .p4-influence{background:linear-gradient(155deg,#4a1030 0%,#2a0c1c 100%);}
  .p4-innovate{background:linear-gradient(155deg,#2a0c16 0%,#150609 100%);}
  @media (max-width:900px){
    .p4-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:520px){
    .p4-grid{grid-template-columns:1fr;}
    .p4-tile{min-height:0; padding:70px 22px 26px;}
  }

  /* signature curve graphic */
  .curve-wrap{position:relative; height:100%; min-height:340px;}
  .curve-wrap svg{width:100%; height:auto; display:block; overflow:visible;}

  /* reperes de fond, presque invisibles : ils donnent une lecture de graphique
     sans attirer l'oeil */
  .curve-grid line{stroke:rgba(250,245,241,0.07); stroke-width:1;}

  .curve-path{fill:none; stroke-linecap:round; stroke-linejoin:round;}

  /* Cycle unique de 9s partage par tous les elements du graphique :
     trace de gauche a droite, maintien, effacement par la gauche, pause.
     L'effacement reutilise le meme ressort que le trace : stroke-dashoffset
     poursuit sa course en negatif, ce qui fait reculer le debut du trait au
     lieu de le faire disparaitre d'un bloc. */
  .curve-path.main{
    stroke:url(#curveStroke); stroke-width:4.5;
    stroke-dasharray:900; stroke-dashoffset:900;
    animation:curveLoop 9s cubic-bezier(.45,0,.25,1) infinite .3s;
  }
  .curve-path.glow{
    stroke:var(--crimson); stroke-width:7; opacity:0.32;
    filter:url(#curveGlow);
    stroke-dasharray:900; stroke-dashoffset:900;
    animation:curveLoop 9s cubic-bezier(.45,0,.25,1) infinite .3s;
  }
  /* la courbe subie ne peut pas utiliser dashoffset : son dasharray sert deja
     a faire le pointille. Elle suit donc le cycle en fondu. */
  .curve-path.secondary{
    stroke:rgba(250,245,241,0.28); stroke-width:1.5; stroke-dasharray:5 6;
    opacity:0; animation:secondaryLoop 9s ease-in-out infinite .3s;
  }
  .curve-area{
    fill:url(#curveFill); stroke:none;
    opacity:0; animation:areaLoop 9s ease-in-out infinite .3s;
  }
  .curve-halo{
    fill:var(--crimson); opacity:0;
    animation:haloSize 2.6s ease-in-out infinite, tipLoop 9s ease-in-out infinite .3s;
  }
  .curve-dot{fill:#fff; opacity:0; animation:tipLoop 9s ease-in-out infinite .3s;}
  .curve-label{
    font-family:'IBM Plex Mono',monospace; fill:#E6E2E0; font-size:11px;
    opacity:0; animation:labelLoop 9s ease-in-out infinite .3s;
  }
  .curve-label.dim{fill:#8B8589;}

  @keyframes curveLoop{
    0%   {stroke-dashoffset:900;}
    26%  {stroke-dashoffset:0;}
    60%  {stroke-dashoffset:0;}
    86%  {stroke-dashoffset:-900;}
    100% {stroke-dashoffset:-900;}
  }
  @keyframes secondaryLoop{ 0%,8%{opacity:0;} 26%,62%{opacity:1;} 84%,100%{opacity:0;} }
  @keyframes areaLoop{     0%,18%{opacity:0;} 34%,60%{opacity:1;} 78%,100%{opacity:0;} }
  @keyframes tipLoop{      0%,24%{opacity:0;} 30%,60%{opacity:1;} 68%,100%{opacity:0;} }
  @keyframes labelLoop{    0%,24%{opacity:0;} 32%,62%{opacity:1;} 80%,100%{opacity:0;} }
  @keyframes haloSize{     0%,100%{r:11;} 50%{r:16;} }
  @keyframes fadein{ to{ opacity:1; } }

  @media (prefers-reduced-motion: reduce){
    .curve-path,.curve-area,.curve-dot,.curve-halo,.curve-label{
      animation:none !important; opacity:1 !important; stroke-dashoffset:0 !important;
    }
    .curve-path.secondary{stroke-dasharray:5 6 !important;}
    .curve-halo{opacity:0.18 !important;}
  }

  @media (max-width:900px){
    .hero .wrap{grid-template-columns:1fr;}
    .hero h1{font-size:38px;}
    .hero-values{grid-template-columns:repeat(2,1fr);}
    .hero-values div:nth-child(2){border-right:none;}
  }

  /* ---------- SECTION SHARED ---------- */
  section{padding:88px 0;}
  .section-head{max-width:640px; margin-bottom:52px;}
  .section-head .eyebrow{color:var(--crimson-ink);}
  .section-head .eyebrow::before{background:var(--crimson);}
  .section-head h2{font-size:34px; color:var(--wine); margin-bottom:14px;}
  .section-head p{color:var(--mute); font-size:16px;}
  .section-dark{background:var(--wine); color:var(--cream);}
  .section-dark .section-head h2{color:#fff;}
  .section-dark .section-head p{color:#D0CCCE;}
  /* Sur fond sombre, le crimson doit s'eclaircir pour rester lisible. */
  .section-dark .section-head .eyebrow{color:var(--crimson-ink-dark);}

  /* mission quote */
  .mission{
    background:var(--cream-2);
    border-radius:20px;
    padding:44px 48px;
    position:relative;
    margin-bottom:56px;
  }
  .mission .qmark{
    font-family:'Space Grotesk',sans-serif; font-size:64px; color:var(--crimson);
    line-height:0.5; display:block; margin-bottom:10px;
  }
  .mission p{font-size:22px; line-height:1.5; color:var(--wine); font-weight:500; max-width:760px;}

  .values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  .value-card{border-top:2px solid var(--wine); padding-top:16px;}
  .value-card h3{font-size:18px; color:var(--wine); margin-bottom:8px;}
  .value-card p{font-size:14px; color:var(--mute); margin:0;}
  @media (max-width:820px){ .values-grid{grid-template-columns:repeat(2,1fr);} }

  /* pillars */
  .pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden;}
  .pillar{background:var(--cream); padding:36px;}
  .pillar .pillar-top{display:flex; align-items:center; gap:14px; margin-bottom:18px;}
  .pillar .pillar-icon{
    width:42px;height:42px;border-radius:10px;
    background:var(--wine); flex:none;
    display:flex; align-items:center; justify-content:center;
  }
  .pillar .pillar-icon svg{width:22px;height:22px;stroke:var(--crimson-2);}
  .pillar h3{font-size:19px; color:var(--wine);}
  .pillar ul{margin:0; padding:0; list-style:none;}
  .pillar li{
    font-size:14.5px; color:var(--ink); padding:9px 0; border-top:1px solid var(--line);
    display:flex; gap:10px;
  }
  .pillar li:first-child{border-top:none;}
  .pillar li::before{content:"→"; color:var(--crimson-ink); flex:none; font-family:'IBM Plex Mono',monospace;}
  @media (max-width:820px){ .pillars{grid-template-columns:1fr;} }

  /* chapters */
  .chapters{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .chapter-card{
    border:1px solid var(--line-dark); border-radius:16px; padding:26px;
    background:rgba(250,245,241,0.04);
  }
  .chapter-card .tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--crimson-2); text-transform:uppercase;}
  .chapter-card h3{font-size:20px; margin:10px 0 8px; color:#fff;}
  .chapter-card p{font-size:13.5px; color:#C4C0C2; margin:0;}
  @media (max-width:820px){ .chapters{grid-template-columns:1fr;} }

  /* board */
  .event-card{
    display:grid; grid-template-columns:150px 1fr auto;
    gap:32px; align-items:center;
    border:1px solid var(--line); border-radius:18px;
    padding:32px; background:var(--cream-2);
  }
  .event-date{
    background:var(--wine); color:#fff; border-radius:14px;
    padding:18px 10px; text-align:center;
  }
  .event-date .dow{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--crimson-2); text-transform:uppercase;}
  .event-date .day{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:34px; line-height:1.1; margin:4px 0;}
  .event-date .mon{font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:0.08em; text-transform:uppercase;}
  .event-date .yr{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#C4C0C2; margin-top:2px;}
  .event-body .etag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--crimson-ink); margin-bottom:8px;}
  .event-body h3{font-size:22px; color:var(--wine); margin-bottom:8px;}
  .event-body p{font-size:14.5px; color:var(--mute); margin:0 0 10px; max-width:480px;}
  .event-body .emeta{font-size:13px; color:var(--ink); display:flex; gap:18px; flex-wrap:wrap;}
  .event-body .emeta span{display:inline-flex; align-items:center; gap:6px;}
  .event-cta{flex:none; position:relative; display:flex; flex-direction:column; gap:10px; align-items:stretch;}
  .event-cta .btn{white-space:nowrap; text-align:center;}
  .btn-ghost-dark{background:transparent; color:var(--wine); border:1px solid var(--line); box-shadow:none;}
  .btn-ghost-dark:hover{border-color:var(--wine);}
  .events-note{margin-top:22px; font-size:13.5px; color:var(--mute); font-style:italic;}
  /* La regle d'inscription n'est pas une remarque de circonstance comme la
     note de dates : ni italique, ni couleur attenuee. Elle precede la note,
     et les deux disparaissent ensemble quand il n'y a plus d'evenement. */
  .events-note-fort{margin-top:22px; margin-bottom:0; font-style:normal;
    font-weight:600; color:var(--wine);}
  .events-note-fort + .events-note{margin-top:6px;}
  .event-list{
    margin-top:18px; display:grid;
    grid-template-columns:110px max-content 1fr; column-gap:20px;
  }
  .event-row{display:contents;}
  .event-row > *{
    display:flex; align-items:center; min-height:56px;
    padding:12px 0; border-top:1px solid var(--line);
  }
  .event-row > :first-child{padding-left:6px;}
  .event-row > :last-child{padding-right:6px;}
  .event-row .emonth{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--crimson-ink); font-weight:600;}
  .event-row .etype{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase;
    color:var(--wine); background:var(--cream-2); border:1px solid var(--line);
    border-radius:999px; padding:4px 10px; white-space:nowrap;
  }
  .event-row .etitle{font-size:14.5px; color:var(--ink); font-weight:500;}
  .event-row .etitle .eloc{color:var(--mute); font-weight:400; white-space:nowrap; margin-left:4px;}
  @media (max-width:700px){
    .event-list{grid-template-columns:1fr; row-gap:0;}
    .event-row{display:block; padding:16px 6px; border-top:1px solid var(--line);}
    .event-row > *{border-top:none; padding:0; min-height:0; margin-bottom:6px;}
    .event-row > :last-child{margin-bottom:0;}
  }
  @media (max-width:760px){
    .event-card{grid-template-columns:90px 1fr; }
    .event-cta{grid-column:1/-1;}
  }
  @media (max-width:560px){
    .event-card{grid-template-columns:1fr; gap:18px; padding:22px; align-items:start;}
    .event-date{
      justify-self:start;
      display:flex; align-items:baseline; gap:9px;
      padding:10px 16px;
    }
    .event-date .day{font-size:26px; margin:0;}
    .event-date .dow::after, .event-date .mon::after{content:"";}
    .event-body .emeta{gap:8px; flex-direction:column;}
  }

  /* evenements : la liste source n'est affichee que si le script est absent */
  .js .event-source{display:none;}
  .event-source{list-style:none; padding:0; margin:0 0 18px;}
  .event-source li{padding:10px 0; border-top:1px solid var(--line);}
  .event-empty{
    padding:26px 22px; border:1px dashed var(--line); border-radius:14px;
    color:var(--mute); font-size:14.5px; background:transparent;
  }
  .event-past-toggle{
    margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:11.5px;
    letter-spacing:0.06em; text-transform:uppercase; color:var(--mute);
    background:none; border:0; padding:6px 0; cursor:pointer;
  }
  .event-past-toggle:hover{color:var(--crimson-ink);}
  .event-row.is-past{opacity:0.45;}
  .board-tier-label{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--crimson-ink); margin:44px 0 18px; display:flex; align-items:center; gap:12px;
  }
  .board-tier-label::after{content:""; flex:1; height:1px; background:var(--line);}
  .board-tier-label:first-child{margin-top:0;}
  .board-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
  .board-grid.two{grid-template-columns:repeat(2,1fr); max-width:600px;}
  .board-card{}
  .board-photo{
    aspect-ratio:3/3.6; border-radius:14px; overflow:hidden; margin-bottom:14px;
    background:var(--cream-2);
  }
  .board-photo img{width:100%; height:100%; object-fit:cover;}
  .board-card h3{font-size:15.5px; color:var(--wine); margin-bottom:3px;}
  .board-card .role{font-size:11.5px; font-weight:600; color:var(--crimson-ink); text-transform:uppercase; letter-spacing:0.03em; margin-bottom:5px;}
  .board-card .quote{font-size:13px; color:var(--mute); font-style:italic; line-height:1.5;}
  /* Adresse d'un membre du comite, placee entre le role et la citation.
     Les citations ont des longueurs variables : plus bas, les adresses se
     retrouvaient a des hauteurs differentes d'une carte a l'autre, alors que
     nom + role ont une hauteur constante. Mono, discrete : le role est deja
     en crimson, deux accents dans la meme carte se disputeraient l'oeil.
     `overflow-wrap:anywhere` parce que ces adresses font 40+ caracteres et
     que la carte descend a ~140px sur un ecran de 320px. */
  .board-card .board-mail{
    display:inline-block; margin-bottom:11px;
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:-0.01em;
    color:var(--mute); text-decoration:none;
    overflow-wrap:anywhere;
  }
  .board-card .board-mail:hover,
  .board-card .board-mail:focus-visible{
    color:var(--crimson-ink); text-decoration:underline;
  }
  @media (max-width:900px){ .board-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:520px){ .board-grid, .board-grid.two{grid-template-columns:1fr;} }

  .thanks{
    margin-top:56px; padding:26px 30px; border-radius:14px;
    background:var(--cream-2); border-left:3px solid var(--crimson);
    font-size:14px; color:var(--ink);
  }
  .thanks b{color:var(--wine);}

  /* membership CTA */
  .benefits-list{
    display:grid; grid-template-columns:repeat(2,1fr); gap:16px;
    margin-bottom:36px;
  }
  .benefit-item{
    display:flex; gap:12px; align-items:flex-start;
    border:1px solid var(--line); border-radius:14px;
    padding:16px 18px; background:var(--cream-2);
  }
  .benefit-check{
    width:26px; height:26px; border-radius:50%; flex:none;
    background:var(--wine); display:flex; align-items:center; justify-content:center;
    margin-top:1px;
  }
  .benefit-check svg{width:14px; height:14px; stroke:#fff;}
  .benefit-item p{margin:0; font-size:14px; color:var(--ink); line-height:1.45;}
  .benefit-item strong{font-weight:600; color:var(--wine);}
  .benefit-item .btag{display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--crimson-ink); text-transform:uppercase; letter-spacing:0.06em; margin-top:4px;}
  @media (max-width:760px){ .benefits-list{grid-template-columns:1fr;} }

  .cta-band{
    background:linear-gradient(120deg, var(--crimson) 0%, #c81440 100%);
    border-radius:24px; padding:56px 48px; color:#fff;
    display:grid; grid-template-columns:1.3fr 0.7fr; gap:32px; align-items:center;
  }
  .cta-band h2{font-size:30px; color:#fff; margin-bottom:12px;}
  .cta-band p{color:#F2DFE4; font-size:15px; max-width:440px;}
  .cta-band .btn-primary{background:#fff; color:var(--crimson); box-shadow:none;}
  .cta-band .btn-ghost{border-color:rgba(255,255,255,0.5);}
  .cta-right{display:flex; flex-direction:column; gap:12px;}
  @media (max-width:820px){ .cta-band{grid-template-columns:1fr;} }

  .pricing-row{display:flex; gap:14px; margin:22px 0 28px; flex-wrap:wrap;}
  .price-card{
    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.3);
    border-radius:14px; padding:16px 22px; min-width:160px;
  }
  .price-card .price-tag{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:#F2DFE4;}
  .price-card .price-amount{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; color:#fff; margin-top:4px;}
  #partners{background:var(--cream-2);}
  .partners-invite{
    display:flex; align-items:center; justify-content:space-between;
    gap:26px; flex-wrap:wrap;
    border:1px solid var(--line); border-radius:18px;
    padding:28px 32px; background:var(--cream);
  }
  .partners-invite h3{font-size:20px; color:var(--wine); margin:0 0 6px;}
  .partners-invite p{font-size:14.5px; color:var(--mute); margin:0;}
  @media (max-width:560px){ .partners-invite{padding:24px 22px;} .partners-invite .btn{width:100%; text-align:center;} }

  .price-card .price-amount span{font-family:'IBM Plex Sans',sans-serif; font-weight:400; font-size:13px; color:#F2DFE4; margin-left:3px;}


  .newsletter-section{background:var(--wine);}
  .newsletter-box{
    display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
    border:1px solid var(--line-dark); border-radius:20px; padding:40px 44px;
  }
  .newsletter-box h2{font-size:26px; color:#fff; margin-bottom:8px;}
  .newsletter-box p{color:#D0CCCE; font-size:14.5px; margin:0; max-width:420px;}
  .newsletter-form{display:flex; gap:10px; flex-wrap:wrap;}
  .newsletter-form input[type="email"]{
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.28);
    border-radius:999px; padding:13px 20px; color:#fff; font-size:14px;
    font-family:'IBM Plex Sans',sans-serif;
    flex:1 1 260px; min-width:0;
  }
  .newsletter-form input[type="email"]::placeholder{color:#C4C0C2;}
  .newsletter-form button{
    background:var(--crimson); color:#fff; border:none; border-radius:999px;
    padding:13px 26px; font-size:14px; font-weight:600; cursor:pointer;
    font-family:'IBM Plex Sans',sans-serif;
  }
  .newsletter-note{font-size:12px; color:#8C8789; margin-top:10px;}
  .newsletter-form input[type="email"].invalid{border-color:var(--crimson-2);}
  .newsletter-note.ok{color:#D0CCCE;}
  .newsletter-note.ok strong{color:#fff;}
  .newsletter-note a{color:var(--crimson-2);}
  @media (max-width:820px){ .newsletter-box{grid-template-columns:1fr;} }
  @media (max-width:560px){ .newsletter-box{padding:28px 22px;} }

  footer{
    background:var(--wine-3); color:#C4C0C2; padding:52px 0 32px; font-size:13px;
  }
  footer > .wrap:first-child{
    display:grid; grid-template-columns:1.5fr repeat(3, minmax(0,1fr));
    align-items:start; gap:24px 32px;
  }
  footer .fcol a{overflow-wrap:anywhere;}
  @media (max-width:820px){ footer > .wrap:first-child{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ footer > .wrap:first-child{grid-template-columns:1fr;} }
  footer .fbrand{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
  footer .fbrand img{height:30px;}
  footer .fbrand span{font-family:'Space Grotesk',sans-serif; font-weight:700; color:#fff; font-size:20px;}
  footer .fcol h2{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--crimson-2); margin-bottom:12px;}
  footer .fcol a{display:block; color:#C4C0C2; text-decoration:none; font-size:13px; margin-bottom:8px;}
  footer .fcol a:hover{color:#fff;}
  /* Mention legale et copyright : un seul bloc, un seul filet. Ils en avaient
     un chacun, ce qui encadrait la mention legale de deux traits pour une
     seule ligne de texte depuis qu'elle a ete raccourcie le 18.08. */
  footer .footer-legal{border-top:1px solid var(--line-dark); margin-top:36px;
    padding-top:20px; font-size:12px; color:var(--mute-dark); line-height:1.7;}
  footer .footer-legal p{margin:0;}
  footer .footer-legal b{color:#C4C0C2;}
  footer .footer-copy{margin-top:6px;}

  ::selection{background:var(--crimson); color:#fff;}

  /* ---------- SELECTEUR DE LANGUE ----------
     Bouton compact : globe + acronyme. A l'ouverture, le menu donne le nom
     complet de chaque langue dans sa propre langue, avec une coche sur
     celle qui est active. */
  .langs{position:relative; flex:none; margin-left:auto; margin-right:18px;}
  .globe{width:15px; height:15px; flex:none;}
  .langs-btn{
    display:inline-flex; align-items:center; gap:6px;
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.08em;
    text-transform:uppercase; font-weight:600; color:var(--ink);
    background:none; border:1px solid var(--line); border-radius:999px;
    padding:7px 12px; cursor:pointer; line-height:1;
    transition:border-color .15s ease, color .15s ease;
  }
  .langs-btn:hover{border-color:var(--wine);}
  .langs-btn:focus-visible{outline:2px solid var(--crimson); outline-offset:2px;}
  .langs[data-open="true"] .langs-btn{border-color:var(--wine);}

  .langs-menu{
    position:absolute; top:calc(100% + 8px); right:0; z-index:70;
    min-width:186px; padding:6px;
    background:var(--cream); border:1px solid var(--line); border-radius:13px;
    box-shadow:0 14px 34px rgba(0,0,0,0.12);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  .langs[data-open="true"] .langs-menu{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .16s ease, transform .16s ease;
  }
  .langs-menu a{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:9px; text-decoration:none;
    font-size:14px; color:var(--mute);
  }
  .langs-menu a .nom{flex:1;}
  .langs-menu a:hover{background:var(--cream-2); color:var(--ink);}
  .langs-menu a[aria-current="true"]{color:var(--ink); font-weight:500;}
  .langs-menu .coche{width:14px; height:14px; flex:none; opacity:0; color:var(--crimson-ink);}
  .langs-menu a[aria-current="true"] .coche{opacity:1;}
  @media (max-width:1024px){ nav .langs{display:none;} }

  /* Panneau mobile : la liste est deja ouverte, pas de bouton. */
  .nav-panel .langs{margin:26px 0 0; padding-bottom:22px; border-bottom:1px solid var(--line-dark);}
  .nav-panel .langs-btn{display:none;}
  .nav-panel .langs-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; padding:0; background:none; border:0; box-shadow:none;
  }
  .nav-panel .langs-menu a{color:#C4C0C2; padding:11px 0; font-size:15px;}
  .nav-panel .langs-menu a:hover{background:none; color:#fff;}
  .nav-panel .langs-menu a[aria-current="true"]{color:#fff;}
  .nav-panel .langs-menu .coche{color:var(--crimson-ink-dark);}

  /* ---------- FENETRES DE FORMULAIRE ----------
     Le fond du site est floute pendant l'ouverture. Le flou porte sur un
     voile place au-dessus de la page, jamais sur body : filtrer body
     casserait le position:fixed de la barre et de la fenetre elle-meme. */
  /* L'attribut hidden pose display:none via la feuille du navigateur, dont la
     specificite est plus faible que celle d'une classe : sans ces deux regles,
     .fenetre{display:flex} l'emporte et une fenetre « masquee » continue
     d'intercepter les clics de toute la page. */
  .voile[hidden], .fenetre[hidden]{display:none;}

  .voile{
    position:fixed; inset:0; z-index:80;
    background:rgba(27,22,25,0.45);
    backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    opacity:0; transition:opacity .22s ease;
  }
  .voile[data-ouvert="true"]{opacity:1;}

  .fenetre{
    position:fixed; inset:0; z-index:90;
    display:flex; align-items:flex-start; justify-content:center;
    padding:5vh 20px;
    overflow-y:auto;
    opacity:0; transition:opacity .22s ease;
  }
  .fenetre[data-ouvert="true"]{opacity:1;}
  .fenetre-carte{
    position:relative; width:100%; max-width:620px;
    background:var(--cream); border:1px solid var(--line); border-radius:20px;
    padding:38px 40px 34px;
    box-shadow:0 26px 70px rgba(0,0,0,0.30);
    transform:translateY(10px) scale(0.99);
    transition:transform .24s cubic-bezier(.2,.8,.3,1);
  }
  .fenetre[data-ouvert="true"] .fenetre-carte{transform:translateY(0) scale(1);}
  .fenetre-carte h2{
    font-size:24px; color:var(--wine); margin:0 0 18px; padding-right:40px;
  }
  .fenetre-carte .join-form{
    margin:0; border:0; padding:0; background:none;
  }
  .fenetre-fermer{
    position:absolute; top:18px; right:18px;
    width:36px; height:36px; padding:8px;
    display:flex; align-items:center; justify-content:center;
    background:none; border:1px solid var(--line); border-radius:50%;
    color:var(--mute); cursor:pointer;
    transition:color .15s ease, border-color .15s ease;
  }
  .fenetre-fermer:hover{color:var(--wine); border-color:var(--wine);}
  .fenetre-fermer:focus-visible{outline:2px solid var(--crimson); outline-offset:2px;}
  .fenetre-fermer svg{width:100%; height:100%;}

  @media (max-width:640px){
    .fenetre{padding:0;}
    .fenetre-carte{
      max-width:none; min-height:100%; border:0; border-radius:0;
      padding:64px 22px 40px;
    }
  }
  @media (prefers-reduced-motion: reduce){
    .voile, .fenetre, .fenetre-carte{transition:none;}
  }

  /* ---------- MENU AGENDA (carte evenement) ---------- */
  .agenda{position:relative;}
  .agenda-btn{width:100%;}
  .agenda-menu{
    position:absolute; top:calc(100% + 8px); right:0; z-index:40;
    min-width:212px; padding:6px;
    background:var(--cream); border:1px solid var(--line); border-radius:13px;
    box-shadow:0 14px 34px rgba(0,0,0,0.14);
    opacity:0; visibility:hidden; transform:translateY(-6px);
    transition:opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  }
  .agenda[data-open="true"] .agenda-menu{
    opacity:1; visibility:visible; transform:translateY(0);
    transition:opacity .16s ease, transform .16s ease;
  }
  .agenda-menu a, .agenda-menu button{
    display:block; width:100%; text-align:left;
    padding:10px 12px; border:0; border-radius:9px; background:none;
    font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:var(--mute);
    text-decoration:none; cursor:pointer;
  }
  .agenda-menu a:hover, .agenda-menu button:hover{background:var(--cream-2); color:var(--ink);}
  @media (max-width:560px){
    .agenda-menu{left:0; right:auto; min-width:0; width:100%;}
  }

  /* Rappel de l'evenement vise, en tete de la fenetre d'inscription. */
  .evenement-vise{
    display:flex; flex-direction:column; gap:3px;
    background:var(--cream-2); border:1px solid var(--line);
    border-radius:12px; padding:14px 16px; margin:0 0 20px;
  }
  .evenement-vise strong{font-size:15.5px; color:var(--wine);}
  .evenement-vise span{font-size:13.5px; color:var(--mute);}
  .field-aide{
    font-size:12.5px; color:var(--mute); margin:7px 0 0; line-height:1.5;
  }