/* ==========================================================================
   AMEL UP ACADEMY — Design kit
   Charte « luxe éditorial calme » : crème + encre, serif éditorial,
   micro-labels espacés, matière (grain, hairlines), calme cinétique.
   Chaque page charge ce fichier AVANT son CSS spécifique :
   <link rel="stylesheet" href="kit/academy.css">
   Fonts requises (head) :
   Cormorant Garamond 300/400/500/600 + italiques, Jost 200–700.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Primitives — hex d'identité, puis équivalent OKLCH exact (les
     navigateurs modernes prennent la 2e déclaration, les anciens la 1re). */
  --paper:#FBF8F2;        /* fond vitrine */
  --paper:oklch(97.98% 0.0086 84.6);
  --parchment:#F4EFE4;    /* fond espace membre, plus chaud */
  --parchment:oklch(95.30% 0.0156 86.4);
  --parchment-2:#EFE9DC;  /* surface alternative espace membre */
  --parchment-2:oklch(93.52% 0.0185 86.1);
  --ink:#221F19;          /* encre : texte, boutons pleins */
  --ink:oklch(24.05% 0.0120 84.6);
  --ink-soft:#544D41;     /* texte secondaire */
  --ink-soft:oklch(42.34% 0.0213 81.2);
  --taupe:#756A52;        /* texte discret, placeholders (assombri pour contraste AA) */
  --taupe:oklch(52.79% 0.0383 86.2);
  --stone:#A2998A;        /* texte atténué sur parchment (grands corps) */
  --stone:oklch(68.64% 0.0239 80.6);
  --stone-2:#6E6757;      /* micro-labels espace membre (assombri pour contraste) */
  --stone-2:oklch(51.55% 0.0259 87.2);
  --linen:#F6F1E7;        /* texte clair posé sur média sombre */
  --linen:oklch(95.93% 0.0143 84.6);
  --char:#1D1A16;         /* fond des médias sombres (cartes, decks) */
  --char:oklch(21.97% 0.0089 75.1);

  /* Hairlines : toujours dérivées de l'encre, jamais grises. */
  --hair:rgba(34,31,25,.20);
  --line:rgba(34,31,25,.16);
  --line-soft:rgba(34,31,25,.10);
  --gold:rgba(34,31,25,.35);      /* encre translucide : filets, ornements */

  /* Sémantique de surface. body.member bascule l'espace membre. */
  --bg:var(--paper);
  --tx:var(--ink);
  --tx-soft:var(--ink-soft);
  --tx-muted:var(--taupe);

  /* Typographie */
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Jost', 'Helvetica Neue', Arial, sans-serif;

  /* Échelle display (fluide) */
  --display-xl:clamp(2.8rem, 7.4vw, 6.2rem);  /* hero d'accueil */
  --display:clamp(2.6rem, 6.5vw, 5rem);       /* h1 de page */
  --display-wide:clamp(2.875rem, 6vw, 5.75rem); /* h1 espace membre */
  --h2:clamp(2rem, 4vw, 3rem);
  --h3:clamp(1.8rem, 3.6vw, 2.6rem);
  --lead:clamp(1.2rem, 2.2vw, 1.6rem);

  /* Lettrage des micro-labels (Jost uppercase) */
  --track-s:.24em;
  --track-m:.30em;
  --track-l:.36em;
  --track-xl:.44em;

  /* Rythme */
  --gutter:clamp(1.4rem, 4vw, 3rem);
  --section-y:clamp(3rem, 7vw, 4.5rem);

  /* Calme cinétique : ease-out exponentiel, jamais de bounce. */
  --ease:cubic-bezier(.16,1,.3,1);
  --dur:1.1s;
}

body.member{
  --bg:var(--parchment);
  --tx-muted:var(--stone-2);
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable both-edges}

/* --------------------------------------------------------------------------
   BARRE DE DÉFILEMENT DE LA PAGE
   Celle du système est bleue sur Windows, grise ailleurs : sur un fond
   parchemin elle jure, et c'est le seul élément de l'écran qui reste étranger
   à la charte. Elle prend donc l'encre, comme les filets.

   Elle reste VISIBLE, et c'est délibéré : une page de module fait plusieurs
   écrans de haut, la barre dit où l'on en est. La supprimer ferait joli une
   seconde et perdrait le lecteur ensuite. La bordure transparente amincit le
   trait sans réduire la zone à attraper — 12 px sous la souris, un filet fin
   à l'œil.

   Deux écritures, aucune ne couvrant tout : `scrollbar-color` pour Firefox et
   Chrome récent, `::-webkit-scrollbar` pour Safari et les Chrome plus anciens.
   Chrome 121+ ignore les pseudo-éléments dès que `scrollbar-width` est posé,
   les deux ne se marchent donc jamais dessus.
   `scrollbar-gutter: stable` est déjà posé plus haut : la largeur est réservée
   en permanence, une page qui devient défilante ne décale pas sa mise en page.
   -------------------------------------------------------------------------- */
html{scrollbar-width:thin;scrollbar-color:rgba(34,31,25,.22) transparent}
html::-webkit-scrollbar{width:12px;height:12px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{
  background:rgba(34,31,25,.22);border-radius:999px;
  border:3px solid transparent;background-clip:content-box;
}
html::-webkit-scrollbar-thumb:hover{background:rgba(34,31,25,.42);background-clip:content-box}
html::-webkit-scrollbar-corner{background:transparent}
/* titres : pas de veuve (dernier mot seul sur une ligne) */
h1,.media-card .title,.sec-title{text-wrap:balance}
body{
  font-family:var(--sans);font-weight:400;
  color:var(--tx);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
.serif{font-family:var(--serif)}
::selection{background:var(--ink);color:var(--paper)}

a, button, input, select, textarea{outline:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

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

/* Grain : matière photographique sur toute la page.
   <body data-grain> — aucune balise supplémentaire. */
body[data-grain]::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:200;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cadre hairline fixe (pages plein écran type accueil) */
.frame{position:fixed;inset:22px;border:1px solid var(--line);pointer-events:none;z-index:5}

/* Lien d'évitement clavier */
.skip-link{
  position:fixed;top:-100%;left:50%;transform:translateX(-50%);z-index:300;
  background:var(--ink);color:var(--paper);text-decoration:none;
  font-size:.6rem;letter-spacing:var(--track-m);text-transform:uppercase;
  padding:.9rem 1.6rem;transition:top .3s var(--ease);
}
.skip-link:focus-visible{top:0;outline:none}

/* --------------------------------------------------------------------------
   3. MICRO-LABELS — la grammaire typographique de la marque
   -------------------------------------------------------------------------- */
.kicker{
  display:flex;align-items:center;gap:1rem;
  font-size:.56rem;letter-spacing:var(--track-xl);text-transform:uppercase;
  color:var(--tx-soft);
}
.kicker::before{content:"";width:46px;height:1px;background:var(--gold)}

.eyebrow{
  font-size:.6rem;letter-spacing:var(--track-l);text-transform:uppercase;
  color:var(--tx-muted);
}

/* Tête de section centrée (vitrine) */
.sec-head{text-align:center}
.sec-head .eyebrow{color:var(--ink)}
.sec-title{
  font-family:var(--serif);font-weight:300;font-size:var(--h2);
  color:var(--ink);margin-top:.7rem;
}
.sec-sub{
  color:var(--tx-soft);font-size:.95rem;line-height:1.7;
  max-width:560px;margin:1rem auto 0;
}

/* Label de section filé (espace membre) */
.section-label{display:flex;align-items:center;gap:28px;padding:18px 0 40px}
.section-label span{
  font-size:.8rem;letter-spacing:var(--track-m);text-transform:uppercase;
  color:var(--tx-muted);white-space:nowrap;
}
.section-label .rule{flex:1;height:1px;background:var(--line)}

/* --------------------------------------------------------------------------
   4. HEADER & FOOTER
   -------------------------------------------------------------------------- */
.wordmark{display:flex;flex-direction:column;line-height:1;text-decoration:none;color:inherit}
.wordmark .a{font-size:.8rem;letter-spacing:.46em;text-transform:uppercase;font-weight:400}
.wordmark .b{font-size:.54rem;letter-spacing:var(--track-l);text-transform:uppercase;color:var(--ink);margin-top:.55rem}

/* lockup de marque : « AMEL UP ACADEMY BY » suivi du logo Airflow (cohérent avec l'accueil) */
.brand-lockup{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.brand-lockup .brand-name{font-size:.8rem;letter-spacing:.4em;text-transform:uppercase;font-weight:400;color:var(--ink);white-space:nowrap}
.brand-lockup .brand-logo{height:64px;width:auto;display:block}
@media(max-width:640px){ .brand-lockup .brand-logo{height:52px} .brand-lockup .brand-name{letter-spacing:.28em} }

.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 3rem;
}
.site-header.is-sticky{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-header nav{display:flex;align-items:center;gap:2.4rem}
.site-header nav a{
  font-size:.58rem;letter-spacing:var(--track-m);text-transform:uppercase;
  color:var(--ink);text-decoration:none;position:relative;transition:color .4s;
}
.site-header nav a:not(.member)::after{
  content:"";position:absolute;left:0;bottom:-3px;width:0;height:1px;
  background:var(--gold);transition:width .4s;
}
.site-header nav a:not(.member):hover{color:var(--gold)}
.site-header nav a:not(.member):hover::after{width:100%}
.site-header nav a.member{border:1px solid var(--ink);padding:.7rem 1.35rem;transition:.4s}
.site-header nav a.member:hover{background:var(--ink);color:var(--bg)}

.site-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.6rem 3rem;border-top:1px solid var(--line-soft);
}
.site-footer .f{font-size:.52rem;letter-spacing:.34em;text-transform:uppercase;color:var(--tx-soft)}
.site-footer .f b{color:var(--ink);font-weight:500}
.site-footer .fserif{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;
  letter-spacing:.02em;text-transform:none;color:var(--tx-soft);
}
.site-footer .fserif b{color:var(--ink);font-weight:500;font-style:normal}
.site-footer .mid{
  display:flex;align-items:center;gap:.7rem;color:var(--tx-soft);
  font-size:.52rem;letter-spacing:.34em;text-transform:uppercase;
}
.site-footer .mid .dot{width:4px;height:4px;border-radius:50%;background:var(--gold)}

/* --------------------------------------------------------------------------
   5. BOUTONS & LIENS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:300;
  font-size:.6rem;letter-spacing:var(--track-m);text-transform:uppercase;
  padding:1rem 2rem;cursor:pointer;text-decoration:none;text-align:center;
  transition:.45s var(--ease);
}
.btn.solid{background:var(--ink);color:var(--bg);border:1px solid var(--ink)}
.btn.solid:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn[disabled], .btn.is-disabled{opacity:.35;pointer-events:none}

/* Lien souligné discret (mentions, retours) */
.underlink{
  display:inline-block;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tx-soft);text-decoration:none;
  border-bottom:1px solid var(--line-soft);padding-bottom:2px;transition:.3s;
}
.underlink:hover{color:var(--ink);border-color:var(--ink)}
@media (pointer:coarse){
  .underlink{padding:.5rem 0 2px}
  .ouvrir{padding:.5rem 0}
}

/* --------------------------------------------------------------------------
   6. SECTIONS & BANDEAUX
   -------------------------------------------------------------------------- */
.section{padding:var(--section-y) 3rem;max-width:1180px;margin:0 auto}
.wrap{max-width:1480px;margin:0 auto;padding:0 56px}

/* Bandeau de clôture : titre serif + CTA centrés */
.closing{text-align:center;padding:var(--section-y) 3rem 5rem;border-top:1px solid var(--line-soft)}
.closing h3{font-family:var(--serif);font-weight:300;font-size:var(--h3);color:var(--ink)}
.closing .cta{display:flex;gap:1rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}

/* Section éditoriale en deux colonnes (image + propos) */
.split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center;padding:var(--section-y) 3rem;max-width:1180px;margin:0 auto;
}
.split .visual{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--char)}
.split .visual img{width:100%;height:100%;object-fit:cover}
.split .visual::before{content:"";position:absolute;inset:14px;border:1px solid rgba(246,241,231,.25);z-index:2;pointer-events:none}
.split h2{font-family:var(--serif);font-weight:300;font-size:var(--h2);color:var(--ink);margin-top:1.2rem}
.split p{color:var(--tx-soft);font-size:.95rem;line-height:1.75;margin-top:1.1rem;max-width:52ch}

/* --------------------------------------------------------------------------
   7. PROSE — pages de texte long (politique, CGU, règlement)
   -------------------------------------------------------------------------- */
.prose{max-width:68ch;margin:0 auto;padding:var(--section-y) 3rem}
.prose h1{font-family:var(--serif);font-weight:300;font-size:var(--h2);color:var(--ink)}
.prose h2{
  font-family:var(--serif);font-weight:500;font-size:1.45rem;
  color:var(--ink);margin-top:2.6em;
}
.prose h3{font-size:.66rem;letter-spacing:var(--track-m);text-transform:uppercase;font-weight:400;color:var(--tx-soft);margin-top:2.4em}
.prose p, .prose li{font-size:.95rem;line-height:1.8;color:var(--tx-soft);margin-top:1em}
.prose strong{color:var(--ink);font-weight:500}
.prose ul, .prose ol{padding-left:1.2em}
.prose a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair);transition:.3s}
.prose a:hover{border-color:var(--ink)}
.prose hr{border:none;height:1px;background:var(--line-soft);margin:2.8em 0}

/* --------------------------------------------------------------------------
   8. TÉMOIGNAGES
   -------------------------------------------------------------------------- */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3rem}
.tcard{
  background:color-mix(in srgb, var(--paper) 60%, white);
  border:1px solid var(--line-soft);padding:2rem 1.8rem;
  display:flex;flex-direction:column;transition:.4s;
}
.tcard:hover{transform:translateY(-5px);box-shadow:0 30px 60px -40px rgba(40,34,20,.4);border-color:var(--hair)}
.tcard .quote{font-family:var(--serif);font-size:2.6rem;line-height:.6;color:var(--gold);height:.7em}
.tcard p{font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:var(--ink);margin-top:.6rem;flex:1}
.tcard .who{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.tcard .av{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#E7D9BE,#CDB88C);
  display:grid;place-items:center;
  font-family:var(--serif);font-size:1.1rem;color:#5a4a25;
}
.tcard .who b{font-size:.82rem;font-weight:500;letter-spacing:.02em;display:block}
.tcard .who small{font-size:.56rem;letter-spacing:var(--track-s);text-transform:uppercase;color:var(--taupe)}

/* --------------------------------------------------------------------------
   9. ÉTAPES (parcours numéroté)
   -------------------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
.step{text-align:center;padding:0 .5rem}
.step .n{font-family:var(--serif);font-size:2.6rem;color:var(--gold);line-height:1}
.step h4{font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);margin-top:.7rem}
.step p{font-size:.86rem;color:var(--tx-soft);margin-top:.5rem;line-height:1.6}
.step .bar{width:30px;height:1px;background:var(--hair);margin:1rem auto 0}

/* --------------------------------------------------------------------------
   10. FORMULAIRES — champs soulignés, libellés en micro-label
   -------------------------------------------------------------------------- */
.field{display:flex;flex-direction:column}
.field label{
  font-size:.54rem;letter-spacing:var(--track-s);text-transform:uppercase;
  color:var(--tx-soft);margin-bottom:.5rem;
}
.field label .req{color:var(--ink)}
.field input, .field select, .field textarea{
  font-family:var(--sans);font-weight:300;font-size:.92rem;color:var(--ink);
  background:transparent;border:none;border-bottom:1px solid var(--hair);
  padding:.55rem 0;transition:border-color .35s;border-radius:0;
}
.field textarea{resize:vertical;min-height:5.5em;line-height:1.6}
.field input::placeholder, .field textarea::placeholder{color:var(--taupe)}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--ink)}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{outline:none}

.field.error input, .field.error select, .field.error textarea{border-color:#8C3B2E}
.field .field-error{font-size:.7rem;color:#8C3B2E;margin-top:.45rem;letter-spacing:.04em}

/* Case à cocher avec mention */
.check{display:flex;align-items:flex-start;gap:.7rem}
.check input{width:15px;height:15px;margin-top:2px;accent-color:var(--ink);flex-shrink:0}
.check label{font-size:.78rem;line-height:1.55;color:var(--tx-soft)}
.check label a{color:var(--ink);border-bottom:1px solid var(--hair);text-decoration:none}

/* --------------------------------------------------------------------------
   10b. ESPACE MEMBRE — en-tête ample + intro de page
   -------------------------------------------------------------------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:34px 56px;border-bottom:1px solid var(--line);
}
.topbar .brand .name{font-size:17px;font-weight:400;letter-spacing:.34em;text-transform:uppercase}
.topbar .brand .sub{font-size:11px;font-weight:300;letter-spacing:.34em;text-transform:uppercase;color:var(--tx-muted);margin-top:8px}
.topbar .brand a{text-decoration:none;color:inherit}
.btn-espace{
  font-size:12px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--line);padding:18px 30px;
  transition:background .5s ease, color .5s ease, border-color .5s ease;
}
.btn-espace:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.intro{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;padding:84px 0 56px}
.intro-left{max-width:62%}
.intro .eyebrow{font-size:13px;letter-spacing:var(--track-m);margin-bottom:26px}
.intro h1{
  font-family:var(--serif);font-weight:500;
  font-size:var(--display-wide);line-height:1.02;letter-spacing:-.5px;color:var(--ink);
}
.intro-right{
  font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.5;
  color:var(--tx-muted);text-align:right;max-width:300px;padding-top:8px;
}

/* --------------------------------------------------------------------------
   10c. PAGES MODULE — projections vidéo, documents, galerie
   -------------------------------------------------------------------------- */
/* Rangée de projection : légende éditoriale à gauche, vidéo à droite */
.screen{
  display:grid;grid-template-columns:280px 1fr;gap:clamp(1.6rem,4vw,3.5rem);
  padding:3rem 0;border-top:1px solid var(--line-soft);align-items:start;
}
.screen:first-of-type{border-top:none}
.screen .n{font-family:var(--serif);font-size:2.6rem;color:var(--gold);line-height:1}
.screen h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;color:var(--ink);margin-top:.8rem}
.screen .dur{font-size:.72rem;letter-spacing:var(--track-s);text-transform:uppercase;color:var(--tx-muted);margin-top:.7rem}
.screen p{font-size:.9rem;line-height:1.7;color:var(--tx-soft);margin-top:1rem;max-width:34ch}
.screen-media{background:var(--char);border:1px solid var(--hair);overflow:hidden;position:relative}
.screen-media video{width:100%;display:block}
/* filigrane traçable : identité du membre incrustée, dérivante, non cliquable */
.video-wm{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.video-wm span{
  position:absolute;font-family:var(--sans);font-weight:400;font-size:.72rem;
  letter-spacing:.12em;white-space:nowrap;color:rgba(246,241,231,.30);
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  transition:left 1.4s ease, top 1.4s ease;
}
/* vidéo verticale : pilier centré sur fond charbon */
.screen-media.vertical{aspect-ratio:9/16;max-width:340px;margin-inline:auto;display:flex;align-items:center;justify-content:center}
.screen-media.vertical video{width:100%;height:100%;object-fit:cover}

/* Liste de documents : rangées filetées qui ouvrent la visionneuse */
.doc-list{border-bottom:1px solid var(--line-soft)}
.doc{
  display:grid;grid-template-columns:90px 1fr auto;gap:1.6rem;align-items:center;
  width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--line-soft);
  padding:1.9rem 0;cursor:pointer;font-family:var(--sans);color:var(--ink);
}
.doc .n{font-family:var(--serif);font-size:2rem;color:var(--gold);line-height:1}
.doc h3{font-family:var(--serif);font-weight:500;font-size:1.6rem;color:var(--ink)}
.doc .meta{font-size:.72rem;letter-spacing:var(--track-s);text-transform:uppercase;color:var(--tx-muted);margin-top:.5rem}
.doc .ouvrir{color:var(--ink)}
.doc:hover h3{color:var(--ink-soft)}
.doc:hover .ouvrir .arrow{transform:translateX(8px)}

/* Galerie de planches : clic = visionneuse */
.plate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding-bottom:96px}
.plate{
  position:relative;aspect-ratio:4/3;overflow:hidden;cursor:pointer;
  background:var(--char);border:1px solid var(--line-soft);padding:0;
}
.plate img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,.84,.34,1)}
.plate:hover img{transform:scale(1.05)}

/* Mention de contenu à venir, en pied de section */
.coming-note{
  font-size:.72rem;letter-spacing:var(--track-s);text-transform:uppercase;
  color:var(--tx-muted);padding:1.6rem 0 4rem;
}

/* --------------------------------------------------------------------------
   11. CARTES MÉDIA (espace membre : parcours, modules)
   -------------------------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-bottom:96px}

.media-card{
  position:relative;aspect-ratio:3/2.15;overflow:hidden;display:block;
  text-decoration:none;color:var(--linen);background:var(--char);
  opacity:0;transform:translateY(26px);
  animation:rise var(--dur) cubic-bezier(.16,.84,.34,1) forwards;
  transition:transform .7s cubic-bezier(.16,.84,.34,1), box-shadow .7s ease;
}
.media-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -28px rgba(43,38,32,.55)}
.media-card .media{
  position:absolute;inset:0;
  background-image:var(--img,none);background-size:cover;background-position:center;
  background-color:var(--char);
  transition:transform 1.4s cubic-bezier(.16,.84,.34,1);
}
.media-card video.media{width:100%;height:100%;object-fit:cover}
.media-card:hover .media{transform:scale(1.06)}
.media-card::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,17,13,.10) 0%, rgba(20,17,13,.20) 40%, rgba(20,17,13,.72) 100%);
}
.media-card .body{
  position:relative;z-index:3;height:100%;padding:36px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.media-card .num{
  position:absolute;top:36px;left:36px;
  font-size:13px;letter-spacing:.18em;color:rgba(246,241,231,.78);
}
.media-card .title{font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.04;margin-bottom:14px}
.media-card .desc{font-size:15px;font-weight:300;line-height:1.5;color:rgba(246,241,231,.78);max-width:88%;margin-bottom:26px}

/* Lien « Ouvrir » avec flèche glissante */
.ouvrir{
  font-size:12px;font-weight:300;letter-spacing:.26em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:14px;
}
.ouvrir .arrow{display:inline-block;transition:transform .5s cubic-bezier(.16,.84,.34,1)}
.media-card:hover .ouvrir .arrow{transform:translateX(8px)}

/* Entrée en cascade des cartes */
.card-grid .media-card:nth-child(1){animation-delay:.05s}
.card-grid .media-card:nth-child(2){animation-delay:.11s}
.card-grid .media-card:nth-child(3){animation-delay:.17s}
.card-grid .media-card:nth-child(4){animation-delay:.23s}
.card-grid .media-card:nth-child(5){animation-delay:.29s}
.card-grid .media-card:nth-child(6){animation-delay:.35s}
.card-grid .media-card:nth-child(7){animation-delay:.41s}
.card-grid .media-card:nth-child(8){animation-delay:.47s}
.card-grid .media-card:nth-child(9){animation-delay:.53s}
.card-grid .media-card:nth-child(10){animation-delay:.59s}
.card-grid .media-card:nth-child(11){animation-delay:.65s}
.card-grid .media-card:nth-child(12){animation-delay:.71s}
.card-grid .media-card:nth-child(13){animation-delay:.77s}
.card-grid .media-card:nth-child(14){animation-delay:.83s}

/* Pastille « à venir » centrée sur les cartes sans média */
.ph-tag{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(246,241,231,.45);border:1px solid rgba(246,241,231,.22);
  padding:11px 16px;pointer-events:none;
}
.media-card:has(.media[style]) .ph-tag, .media-card:has(video) .ph-tag{display:none}

/* --------------------------------------------------------------------------
   12. CADRE VIDÉO ÉDITORIAL (vitrine)
   -------------------------------------------------------------------------- */
.video-wrap{margin:3rem auto 0;max-width:960px;position:relative}
.video-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border:1px solid var(--hair);
  background:linear-gradient(150deg,#ECE4D4,#E0D4BE);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 40px 80px -50px rgba(40,34,20,.5);
}
.video-frame::before{content:"";position:absolute;inset:14px;border:1px solid var(--line-soft);pointer-events:none;z-index:1}
.video-frame video{width:100%;height:100%;object-fit:cover}
.play{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.2rem;text-align:center;cursor:pointer;background:none;border:none}
.play .disc{
  width:84px;height:84px;border-radius:50%;border:1px solid var(--ink);
  display:grid;place-items:center;background:rgba(251,248,242,.5);
  backdrop-filter:blur(2px);transition:.4s;
}
.play .disc svg{width:26px;height:26px;margin-left:4px;fill:var(--ink)}
.play:hover .disc{background:var(--ink)}
.play:hover .disc svg{fill:var(--paper)}
.play .cap{font-family:var(--serif);font-size:1.25rem;color:var(--ink)}
.play .sub{font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;color:var(--tx-soft)}

/* --------------------------------------------------------------------------
   13. DECK — visionneuse de présentations (slides)
   Markup et comportement : voir kit/academy.js (AcademyDeck).
   -------------------------------------------------------------------------- */
.deck{
  position:fixed;inset:0;z-index:1000;background:rgba(18,15,11,.975);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .55s ease, visibility .55s ease;
}
.deck.open{opacity:1;visibility:visible;pointer-events:auto}
.deck-stage{position:relative;width:92vw;height:86vh;display:flex;align-items:center;justify-content:center}
.deck-img{
  max-width:100%;max-height:100%;object-fit:contain;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.8);
  opacity:0;transition:opacity .35s ease;
}
.deck-img.shown{opacity:1}
.deck-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:64px;height:64px;border:1px solid rgba(246,241,231,.28);
  background:transparent;color:var(--linen);
  font-family:var(--serif);font-size:34px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .4s ease, border-color .4s ease;user-select:none;
}
.deck-nav:hover{background:rgba(246,241,231,.10);border-color:rgba(246,241,231,.6)}
.deck-nav.prev{left:-34px}
.deck-nav.next{right:-34px}
.deck-top{
  position:fixed;top:30px;left:0;right:0;z-index:1001;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;pointer-events:none;
}
.deck-title{
  font-size:12px;font-weight:300;letter-spacing:var(--track-m);text-transform:uppercase;
  color:rgba(246,241,231,.7);
}
.deck-close{
  pointer-events:auto;
  font-family:var(--sans);font-weight:300;font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--linen);background:transparent;border:1px solid rgba(246,241,231,.28);
  padding:14px 22px;cursor:pointer;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.deck-close:hover{background:var(--linen);color:var(--char);border-color:var(--linen)}
/* bouton « plein écran » : bascule la visionneuse en plein écran navigateur.
   Habillage de .deck-close, bordure plus franche pour qu'il se voie tout de suite.
   Desktop uniquement : sans clavier ni barres à masquer, il n'a pas de sens sur mobile. */
.deck-full{margin-left:auto;margin-right:12px;border-color:rgba(246,241,231,.6)}
@media(max-width:900px){ .deck-full{display:none} }
/* en plein écran, la diapo reprend la place laissée par les barres du navigateur */
.deck:fullscreen .deck-stage{width:96vw;height:92vh}
.deck:-webkit-full-screen .deck-stage{width:96vw;height:92vh}

/* bouton « pivoter » (mobile) : affiché seulement sur petits écrans */
.deck-rotate{
  pointer-events:auto;display:none;margin-left:auto;margin-right:12px;
  width:46px;height:46px;align-items:center;justify-content:center;
  border:1px solid rgba(246,241,231,.28);background:transparent;color:var(--linen);
  font-size:22px;line-height:1;cursor:pointer;
  transition:background .4s ease, color .4s ease, border-color .4s ease;
}
.deck-rotate:hover{background:var(--linen);color:var(--char);border-color:var(--linen)}
@media(max-width:900px){ .deck-rotate{display:inline-flex} }
/* visuel pivoté à 90° : remplit l'écran en paysage quand on tourne le téléphone */
.deck.rotated .deck-img{
  position:fixed;top:50%;left:50%;z-index:1000;
  width:100vh;height:100vw;max-width:none;max-height:none;
  transform:translate(-50%,-50%) rotate(90deg);
}
.deck-counter{
  position:fixed;bottom:34px;left:0;right:0;text-align:center;z-index:1001;
  font-size:13px;font-weight:300;letter-spacing:.26em;
  color:rgba(246,241,231,.65);pointer-events:none;
}
.deck-counter b{font-weight:400;color:var(--linen)}

/* --------------------------------------------------------------------------
   13b. BOUCLIER D'ÉCRAN — voile noir quand la page perd le focus / la visibilité
   -------------------------------------------------------------------------- */
.capture-guard{
  position:fixed;inset:0;z-index:5000;background:#0b0a08;
  display:none;align-items:center;justify-content:center;text-align:center;
}
.capture-guard.on{display:flex}
.capture-guard .cg-mark{
  font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold-soft,#CDB88C);
}
.capture-guard p{
  font-family:var(--serif);font-size:1.4rem;line-height:1.5;color:rgba(246,241,231,.8);margin-top:1rem;
}

/* --------------------------------------------------------------------------
   14. MOUVEMENT — révélation à l'entrée
   -------------------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);animation:rise var(--dur) var(--ease) forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.28s}.d3{animation-delay:.46s}
.d4{animation-delay:.64s}.d5{animation-delay:.85s}.d6{animation-delay:1.05s}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal, .media-card{animation:none;opacity:1;transform:none}
  *, *::before, *::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:1100px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .plate-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .topbar{padding:24px;flex-wrap:wrap;gap:1rem}
  .btn-espace{padding:12px 18px;white-space:nowrap}
  .section-label span{white-space:normal;line-height:1.7}
  .intro{flex-direction:column;padding:56px 0 40px}
  .intro h1{font-size:clamp(2.1rem,9.5vw,2.875rem)}
  .intro-left{max-width:100%}
  .intro-right{text-align:left}
  .screen{grid-template-columns:1fr;gap:1.2rem;padding:2.2rem 0}
  .screen p{max-width:none}
  .doc{grid-template-columns:56px 1fr auto;gap:1rem;padding:1.4rem 0}
  .doc .n{font-size:1.5rem}
  .plate-grid{grid-template-columns:repeat(2,1fr)}
  .site-header{padding:1.1rem 1.3rem;flex-wrap:wrap;row-gap:1rem}
  .site-header.is-sticky{position:static;backdrop-filter:none}
  .btn{letter-spacing:.22em;padding:1rem 1.2rem;white-space:normal;line-height:1.7}
  .site-header nav{gap:1.1rem 1.4rem;flex-wrap:wrap;width:100%;justify-content:flex-start}
  .site-header nav a{padding:.4rem 0}
  .site-header nav a.member{padding:.7rem 1.1rem;font-size:.58rem;margin-left:auto}
  .section{padding:3rem 1.4rem}
  .wrap{padding:0 1.4rem}
  .closing{padding:3rem 1.4rem 3.5rem}
  .closing .cta{width:100%}
  .closing .cta .btn{flex:1 1 100%;padding:1.15rem 1.4rem}
  .split{grid-template-columns:1fr;padding:3rem 1.4rem}
  .prose{padding:3rem 1.4rem}
  .tgrid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.8rem}
  .step{display:flex;gap:1rem;text-align:left;align-items:flex-start}
  .step .n{font-size:2rem}
  .step .bar{display:none}
  .site-footer{flex-direction:column;gap:.6rem;text-align:center}
  .site-footer .mid{display:none}
  .frame{inset:12px}
}
@media(max-width:640px){
  .deck-nav.prev{left:4px}
  .deck-nav.next{right:4px}
  .deck-nav{width:48px;height:48px;font-size:26px}
  .deck-top{padding:0 18px;top:18px}
  .deck-title{display:none}                       /* place aux actions sur petit écran */
  .deck-close{padding:11px 15px;font-size:11px;letter-spacing:.16em}
  .deck-rotate{width:42px;height:42px;font-size:20px;margin-right:8px}
  /* en-tête membre : empilé et compact (le lockup + logo ne chevauchent plus le bouton) */
  .topbar{flex-direction:column;align-items:flex-start;gap:.7rem;padding:18px 20px}
  .topbar > div{flex-wrap:wrap;gap:.6rem;width:100%}
  .topbar .eyebrow{display:none}                 /* « Bonjour X » masqué sur téléphone */
  .topbar .btn-espace{display:inline-flex;align-items:center;min-height:44px;padding:.35rem 1rem;font-size:.56rem;letter-spacing:.14em}
}
@media(max-width:680px){
  .card-grid{grid-template-columns:1fr}
  /* cartes plein écran : hauteur mini pour que le numéro ne chevauche pas un titre long */
  .media-card{aspect-ratio:auto;min-height:300px}
}