@font-face{
    font-family:'Aestetico';
    src:url('fonts/aestetico-800.otf') format('opentype');
    font-weight:800;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Aestetico';
    src:url('fonts/aestetico-600.otf') format('opentype');
    font-weight:600;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Aestetico';
    src:url('fonts/aestetico-500.otf') format('opentype');
    font-weight:500;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Aestetico';
    src:url('fonts/aestetico-400.otf') format('opentype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  :root{
    --paper:#FFFBF8;
    --paper-2:#E9E6D5;
    --tan:#DBC3A7;
    --sage:#AEBA8F;
    --deep:#384639;
    --ink:#28292E;
  }
  *{box-sizing:border-box;}
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
  body{ margin:0; background:var(--ink); color:var(--paper); font-family:'Aestetico', sans-serif; font-weight:400; }
  .poster{ font-family:'Aestetico', sans-serif; font-weight:800; text-transform:uppercase; letter-spacing:0.01em; }
  .mono{ font-family:'Aestetico', sans-serif; font-weight:500; letter-spacing:0.02em; }
  a{ color:inherit; }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:22px 28px; max-width:1200px; margin:0 auto; }
  .brand{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:24px; letter-spacing:0.02em; }
  .nav-cta{ background:var(--tan); color:var(--ink); padding:10px 20px; font-family:'Aestetico', sans-serif; font-size:13px; font-weight:600; text-decoration:none; }
  /* HERO — poster block */
  .hero{ position:relative; padding:20px 28px 0; overflow:hidden; }
  .hero-panel{
    max-width:1200px; margin:0 auto; position:relative;
    background:var(--deep); padding:64px 40px 0;
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
    min-height:520px;
  }
  .stamp{
    position:absolute; top:36px; right:40px; z-index:2;
    border:2px solid var(--tan); color:var(--tan);
    font-family:'Aestetico', sans-serif; font-size:11px; font-weight:600;
    padding:10px 14px; transform:rotate(6deg); text-align:center; line-height:1.4;
  }
  .eyebrow{ font-family:'Aestetico', sans-serif; font-weight:500; font-size:13px; color:var(--sage); letter-spacing:0.15em; margin-bottom:18px; position:relative; z-index:2; }
  .hero h1{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:clamp(52px, 10vw, 128px); line-height:0.86; color:var(--paper); margin:0; text-transform:uppercase; position:relative; z-index:2; }
  .hero h1 span{ color:var(--tan); }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin:36px 0 48px; position:relative; z-index:2; }
  .hero-media{ position:absolute; top:0; right:0; bottom:0; left:37%; z-index:1; overflow:hidden; }
  .hero-video{ width:100%; height:100%; object-fit:cover; object-position:center 30%; display:block; }
  .hero-media::before{
    content:''; position:absolute; inset:0; z-index:1;
    background:linear-gradient(to right, var(--deep) 0%, rgba(56,70,57,0.88) 10%, rgba(56,70,57,0) 38%);
    pointer-events:none;
  }
  .btn-primary{ background:var(--tan); color:var(--ink); padding:15px 26px; font-family:'Aestetico', sans-serif; font-weight:600; font-size:13px; text-decoration:none; letter-spacing:0.04em; }
  .btn-ghost{ border:1px solid var(--paper); color:var(--paper); padding:15px 26px; font-family:'Aestetico', sans-serif; font-weight:600; font-size:13px; text-decoration:none; letter-spacing:0.04em; }

  /* SECTION INDEX — two separate elements, not one repositioned by media query:
     .rail-desktop lives OUTSIDE <header>, fixed to the viewport edge (a fixed element
     nested inside .hero's overflow:hidden box is unreliable for clicks/hover in real
     browsers, even though it paints). .rail-mobile lives INSIDE .hero-panel so it can
     anchor to the hero's own bottom edge on small screens. Only one is visible at a time. */
  .rail-mobile{ display:none; }
  .mnav{ display:none; }
  .rail-desktop{
    position:fixed; top:50%; right:22px; z-index:20;
    transform:translateY(-50%);
    display:flex; flex-direction:column; gap:12px;
  }
  .rail-desktop a{
    position:relative; display:block; text-decoration:none; text-align:right;
    padding:2px 0; min-width:26px;
  }
  .rail-desktop .num{
    font-family:'Aestetico', sans-serif; font-weight:800; font-size:16px; line-height:1; color:var(--tan);
    transition:opacity 0.15s ease;
  }
  .rail-desktop .title{
    position:absolute; top:2px; right:0; white-space:nowrap;
    font-family:'Aestetico', sans-serif; font-weight:800; font-size:16px; line-height:1; color:var(--paper);
    opacity:0; pointer-events:none; transition:opacity 0.15s ease;
  }
  .rail-desktop a:hover .num{ opacity:0; }
  .rail-desktop a:hover .title{ opacity:1; pointer-events:auto; }

  /* CHAT FAB — small fixed button, bottom-left, on every page. Zéro JS : c'est un
     simple lien vers Instagram (ig.me/m/... ouvre directement la fenêtre de message,
     pas juste le profil). z-index reste sous les .modal (100) pour que le bouton se
     retrouve naturellement caché derrière le fond opaque d'une boîte ouverte.
     Style "icône seule" (pas de rond) — juste une ombre portée pour rester lisible
     peu importe ce qu'il y a en dessous. Le padding est invisible, juste pour garder
     une zone de tap confortable. */
  .chat-fab{
    position:fixed; left:20px; bottom:20px; z-index:40;
    padding:14px;
    color:var(--paper);
    display:flex; align-items:center; justify-content:center; width:fit-content;
    filter:drop-shadow(0 2px 5px rgba(0,0,0,0.55));
    text-decoration:none;
  }
  .chat-fab svg{ width:26px; height:26px; }
  .chat-fab:hover{ color:var(--tan); }
  .announce{
    max-width:1200px; margin:0 auto; padding:16px 0;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px;
    font-family:'Aestetico', sans-serif; font-weight:500; font-size:13px; color:var(--sage); border-top:1px solid rgba(174,186,143,0.25);
  }
  .announce a{ color:var(--tan); text-decoration:underline; }
  /* TICKET SCHEDULE */
  section{ padding:64px 28px; }
  .section-inner{ max-width:1200px; margin:0 auto; }
  .index{ font-family:'Aestetico', sans-serif; font-weight:600; font-size:13px; color:var(--tan); letter-spacing:0.1em; margin-bottom:8px; }
  .section-title{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:clamp(30px,4vw,44px); line-height:0.95; margin-top:-2px; text-transform:uppercase; margin-bottom:32px; color:var(--paper); }
  .tickets{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:0; border-top:1px solid rgba(255,251,248,0.15); }
  .ticket{
    border-left:1px dashed rgba(255,251,248,0.25);
    border-right:1px dashed rgba(255,251,248,0.25);
    border-bottom:1px solid rgba(255,251,248,0.15);
    padding:24px 20px;
  }
  /* INTRO BANNER */
  .intro-banner{ background:var(--ink); padding-top:48px; padding-bottom:48px; }
  #horaire{
    background-color:var(--tan); color:var(--ink);
    padding-left:72px; padding-right:72px;
    background-image:
      radial-gradient(rgba(40,41,46,0.12) 1px, transparent 1px),
      linear-gradient(to right, var(--ink) 0, var(--tan) 52px, var(--tan) calc(100% - 52px), var(--ink) 100%);
    background-size:15px 15px, 100% 100%;
    /* Quand on arrive via le lien "Voir l'horaire", on vise un atterrissage
       à peu près centré verticalement plutôt que collé en haut de l'écran
       (approximation basée sur la hauteur habituelle de la section). */
    scroll-margin-top:max(24px, calc((100vh - 400px) / 2));
  }
  #horaire .index{ color:var(--deep); }
  #horaire .section-title{ color:var(--ink); }
  #horaire .tickets{ border-top:1px solid rgba(40,41,46,0.25); }
  #horaire .ticket{
    border-left:1px dashed rgba(40,41,46,0.25);
    border-right:1px dashed rgba(40,41,46,0.25);
    border-bottom:1px solid rgba(40,41,46,0.15);
  }
  #horaire .ticket .name{ color:var(--ink); }
  #horaire .ticket .when{ color:var(--deep); }
  .intro-banner-grid{ display:grid; grid-template-columns:1fr 1fr; border-top:2px solid var(--tan); }
  .intro-card{ position:relative; padding:28px 32px 0; }
  .intro-card + .intro-card{ border-left:1px dashed rgba(255,251,248,0.25); }
  .intro-card-label-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px; }
  .intro-card-label-row .intro-card-label{ margin-bottom:0; }
  .price-tag-inline{
    display:inline-flex; align-items:center; gap:5px;
    font-family:'Aestetico', sans-serif; font-weight:800; font-size:14px; color:var(--tan); white-space:nowrap;
  }
  .price-tag-inline svg{ width:14px; height:14px; flex:none; }
  .price-tag-inline-sage{ color:var(--sage); }
  .intro-card-label{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:15px; text-transform:uppercase; letter-spacing:0.03em; color:var(--paper); margin-bottom:6px; max-width:78%; }
  .intro-card-date{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:clamp(24px,3vw,32px); text-transform:uppercase; color:var(--tan); line-height:1.05; margin-bottom:10px; }
  .intro-card-text{ font-size:14px; color:var(--sage); max-width:36ch; margin:0 0 18px; }
  .intro-card-link{ display:inline-block; font-family:'Aestetico', sans-serif; font-weight:600; font-size:13px; color:var(--paper); text-decoration:none; border-bottom:2px solid var(--tan); padding-bottom:2px; }
  .intro-card-link:hover{ color:var(--tan); }
  @media (max-width:700px){
    .intro-banner-grid{ grid-template-columns:1fr; }
    .intro-card{ padding:24px 0 20px; }
    .intro-card + .intro-card{ border-left:none; border-top:1px dashed rgba(255,251,248,0.25); padding-top:24px; }
    .price-tag-inline{ font-size:13px; }
    #horaire{
      padding-left:28px; padding-right:28px;
      background-image:
        radial-gradient(rgba(40,41,46,0.12) 1px, transparent 1px),
        linear-gradient(to right, var(--ink) 0, var(--tan) 18px, var(--tan) calc(100% - 18px), var(--ink) 100%);
      background-size:15px 15px, 100% 100%;
      /* Sur petit écran, le contenu dépasse souvent la hauteur de la fenêtre —
         on revient à un atterrissage proche du haut plutôt que de risquer de
         couper le titre au-dessus de l'écran. */
      scroll-margin-top:16px;
    }
  }
  .ticket .name{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; color:var(--paper); margin-bottom:8px; }
  .ticket .name a{ color:inherit; text-decoration:none; transition:color 0.15s ease; }
  .ticket .name a:hover{ color:var(--tan); }
  .ticket .when{ font-family:'Aestetico', sans-serif; font-weight:500; font-size:13px; color:var(--sage); }
  /* NOTICE — torn card */
  .notice-wrap{ background:var(--paper); color:var(--ink); }
  .notice{ background:var(--paper-2); border:2px solid var(--ink); padding:28px 30px; max-width:760px; }
  .notice-top{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; margin-bottom:10px; }
  .notice p{ margin:0 0 14px; font-size:15px; font-weight:400; }
  .notice a{ text-decoration:underline; font-weight:600; }
  .notice-next{ font-family:'Aestetico', sans-serif; font-weight:500; font-size:13px; border-top:1px dashed rgba(40,41,46,0.3); padding-top:14px; display:flex; gap:10px; flex-wrap:wrap; align-items:baseline; }
  .notice-next .val{ font-weight:700; }
  .notice-wrap .index, .notice-wrap .section-title{ color:var(--ink); }

  /* Section 02 — "important" éditorial (gros numéro + stats + encart),
     pour casser le côté trop carré/plat du reste du site.
     Grille à 2 colonnes (numéro / texte) : le numéro occupe la colonne de
     gauche (rangée 1 seulement) ; tout le reste (titre, texte, courriel/
     téléphone, rappel) est empilé dans la colonne de droite, donc s'aligne
     sur le même bord gauche que le titre — pas sous le numéro. */
  .notice-head{
    display:grid; grid-template-columns:auto 1fr; column-gap:36px; align-items:start;
  }
  .notice-left{ grid-column:1; grid-row:1; }
  .notice-bignum{
    font-family:'Aestetico', sans-serif; font-weight:800; line-height:0.78;
    font-size:clamp(96px,14vw,180px); color:var(--ink);
  }
  .notice-head-text{ grid-column:2; grid-row:1; padding-top:6px; }
  .notice-head-text .section-title{ margin-bottom:18px; max-width:24ch; }
  .notice-lead{ font-size:17px; font-weight:600; line-height:1.5; max-width:56ch; margin:0 0 22px; }
  .notice-lead a{ color:inherit; text-decoration:none; font-weight:inherit; }
  /* la boîte de rappel a une largeur fixe (assez pour garder son texte sur une
     seule ligne) ; le téléphone est rapproché du courriel indépendamment,
     donc ne tombe plus pile à la fin de la boîte — c'est voulu. */
  .notice-infobox{ display:inline-block; }
  .notice-stats{ display:flex; gap:60px; flex-wrap:wrap; align-items:baseline; margin-bottom:22px; }
  .notice-stat-label{
    font-family:'Aestetico', sans-serif; font-weight:600; font-size:11px; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--deep); margin-bottom:3px;
  }
  .notice-stat-val{
    display:block; font-family:'Aestetico', sans-serif; font-weight:700; font-size:15px;
    color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink);
  }
  .notice-callout{
    width:334px; max-width:100%; box-sizing:border-box; background:var(--ink); border-radius:10px;
    padding:18px 22px 18px 0; display:flex; align-items:flex-start;
  }
  .notice-callout-icon{ width:76px; flex:none; display:flex; justify-content:center; }
  .notice-callout-tri{
    width:0; height:0; border-left:16px solid transparent; border-right:16px solid transparent;
    border-bottom:28px solid var(--tan); position:relative; margin-top:2px;
  }
  .notice-callout-tri::after{
    content:"!"; position:absolute; left:-4px; top:11px;
    font-family:'Aestetico', sans-serif; font-weight:800; font-size:15px; color:var(--ink);
  }
  .notice-callout-txt{
    font-family:'Aestetico', sans-serif; font-weight:500; font-size:14px; color:var(--tan);
  }
  .notice-callout .val{ font-weight:700; display:block; margin:4px 0; }
  .notice-callout a{ text-decoration:underline; font-weight:700; }
  @media (max-width:700px){
    .notice-head{ grid-template-columns:1fr; }
    .notice-left{ grid-column:1; grid-row:1; }
    .notice-head-text{ grid-column:1; grid-row:2; margin-top:28px; }
    .notice-bignum{ font-size:clamp(44px,16vw,60px); }
    .notice-infobox{ display:block; }
    .notice-stats{ gap:40px; }
    .notice-callout{ min-width:0; width:100%; }
  }
  /* QUOTE / COMMUNITY */
  .quote-wrap{ background:var(--ink); }
  .quote-mark{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:96px; color:var(--tan); line-height:0.5; margin-bottom:8px; }
  .quote{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:clamp(24px,3.4vw,36px); text-transform:uppercase; line-height:1.15; max-width:16ch; color:var(--paper); }
  .quote-sub{ margin-top:18px; font-size:15px; font-weight:400; color:var(--sage); max-width:52ch; }
  footer{ background:var(--ink); padding:0; }
  .footer-inner{
    max-width:1200px; margin:0 auto; padding:46px 28px 40px; text-align:center;
    border-top:1px dashed rgba(255,251,248,0.3);
  }
  .footer-sig{
    font-family:'Aestetico', sans-serif; font-weight:800; font-size:11px; letter-spacing:0.16em;
    text-transform:uppercase; color:var(--tan); margin-bottom:16px;
  }
  .footer-row{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px;
    font-family:'Aestetico', sans-serif; font-weight:500; font-size:13px; color:var(--sage);
  }
  .footer-row .dot{ color:rgba(255,251,248,0.3); }
  footer a{ color:var(--sage); text-decoration:none; }
  footer a:hover{ color:var(--tan); }

  /* réseaux sociaux — mêmes couleurs que les liens du pied de page (sage, hover tan) */
  .footer-social{ display:flex; justify-content:center; gap:18px; margin-top:18px; }
  .footer-social a{ display:inline-flex; align-items:center; justify-content:center; }
  .footer-social svg{ width:19px; height:19px; }

  /* ============================================================
     AVIS GOOGLE — bannière défilante, tout en bas du pied de page.
     Pur CSS : la piste contient la liste des avis DEUX FOIS de suite
     (le 2e bloc est dupliqué et masqué aux lecteurs d'écran) et une
     animation translateX(-50%) en boucle infinie donne l'illusion
     d'un défilement continu, sans aucun JS. Le survol met en pause
     (accessibilité / lecture au clavier-souris), et on respecte
     prefers-reduced-motion. Contenu actuellement inventé — à
     remplacer par de vrais avis quand Amélie les fournira. */
  .footer-reviews{
    background:var(--ink); padding:26px 0 22px; overflow:hidden;
    border-top:1px dashed rgba(255,251,248,0.3);
  }
  .footer-reviews-label{
    display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 16px;
    font-family:'Aestetico', sans-serif; font-weight:700; font-size:12px; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--sage);
  }
  .google-badge{
    width:16px; height:16px; border-radius:50%; background:var(--tan); color:var(--ink);
    font-family:'Aestetico', sans-serif; font-weight:800; font-size:10px; line-height:1;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .footer-reviews-marquee{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
    mask-image:linear-gradient(to right, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  }
  .footer-reviews-track{ display:flex; width:max-content; animation:footer-reviews-scroll 144s linear infinite; }
  .footer-reviews-track:hover{ animation-play-state:paused; }
  .review-card{
    flex:0 0 auto; width:340px; margin-right:16px; text-align:left;
    background:rgba(255,251,248,0.06); border:1px solid rgba(255,251,248,0.16); padding:11px 16px;
    display:block; text-decoration:none; color:inherit; cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .review-card:hover, .review-card:focus-visible{
    border-color:var(--tan); background:rgba(255,251,248,0.1); outline:none;
  }
  .review-card::after{
    content:"Lire l'avis complet →"; display:block; margin-top:8px;
    font-family:'Aestetico', sans-serif; font-weight:700; font-size:10px;
    letter-spacing:0.03em; color:var(--tan); opacity:0.85;
  }
  .review-top{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
  .review-avatar{
    width:26px; height:26px; border-radius:50%; background:var(--tan); color:var(--ink);
    font-family:'Aestetico', sans-serif; font-weight:800; font-size:11px;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .review-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .review-name{ font-family:'Aestetico', sans-serif; font-weight:700; font-size:12px; color:var(--paper); }
  .review-stars{ font-size:11px; letter-spacing:1px; color:var(--tan); }
  .review-stars .star-empty{ color:rgba(255,251,248,0.25); }
  .review-text{
    margin:0; font-size:12px; line-height:1.45; color:var(--sage);
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  }
  @keyframes footer-reviews-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
  @media (prefers-reduced-motion: reduce){ .footer-reviews-track{ animation:none; } }
  @media (max-width:600px){
    .review-card{ width:270px; }
  }
  @media (max-width:700px){
    .hero-panel{ padding:48px 24px 0; }
    .stamp{ top:26px; right:24px; font-size:9px; padding:7px 10px; }
    .hero-ctas{ margin:36px 0 16px; }
    .hero-media{
      position:relative; left:auto; right:auto; top:auto; bottom:auto;
      width:auto; height:520px; margin:-142px -24px 0;
    }
    .hero-media::before{
      background:linear-gradient(to bottom, var(--deep) 0%, rgba(56,70,57,0.92) 18%, rgba(56,70,57,0.55) 38%, rgba(56,70,57,0) 65%);
    }

    /* SECTION INDEX on mobile — .rail-desktop hides; instead of numbers floating in
       the hero, a small hamburger button sits fixed bottom-right of the SCREEN (not
       just the hero) so it can jump to any section from anywhere on the page. Pure
       CSS checkbox+label toggle (same technique as postits/modals): tap to open a
       panel listing every section's number + name, tap a link to go there, or tap
       anywhere outside the panel (the invisible backdrop) to close it without
       navigating.
       The button is also meant to fade in only once the visitor starts scrolling
       down, and fade out again back at the very top. A true scroll-position-driven
       reveal like that needs CSS scroll-driven animations (animation-timeline:
       scroll()) — a real, standardized feature, but still not supported on every
       browser (notably not on Firefox, and only on quite recent Safari). Rather than
       have the button silently fail to appear at all for visitors on those browsers,
       the base rule below keeps it always visible; the @supports block further down
       layers the fade-in-on-scroll behavior on top for browsers that can do it, and
       is simply ignored elsewhere. */
    .rail-desktop{ display:none; }
    /* .fab-anchor n'existe que pour regrouper .mnav + .chat-fab tout en haut de
       .fab-scroll-track dans le HTML (voir index.html/a-propos.html) ; en
       display:contents il ne génère aucune boîte, donc .fab-scroll-track (qui,
       lui, couvre presque toute la hauteur de la page) devient directement le
       bloc conteneur de .mnav-fab et .chat-fab pour le calcul du sticky top
       ci-dessous. Sans ça, un conteneur intermédiaire "petit" (juste la taille
       du bouton) empêcherait le sticky de coller — il resterait figé à sa
       position de départ tout en haut, invisible pendant tout le scroll. */
    .fab-anchor{ display:contents; }
    .mnav{ display:contents; }
    .mnav-check{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
      clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    .mnav-backdrop{ display:none; position:fixed; inset:0; z-index:44; }
    .mnav-check:checked ~ .mnav-backdrop{ display:block; }
    /* Style "icône seule" (pas de rond), même traitement que .chat-fab : juste une
       ombre portée, padding invisible pour la zone de tap.
       position:sticky (pas fixed) + .fab-scroll-track (voir HTML, un wrapper qui
       entoure tout SAUF .footer-reviews) : le bouton se comporte comme un bouton fixe
       tant qu'on est dans le contenu principal, mais une fois qu'on atteint la fin de
       ce wrapper (juste avant les avis Google), il ne peut pas "coller" plus loin — il
       s'arrête net et défile normalement avec le reste, pile à la ligne pointillée.
       Important : on utilise "top" (pas "bottom") avec .fab-anchor placée tout en
       haut du wrapper — un sticky "bottom" ne colle qu'en s'approchant de la FIN de
       son bloc, donc il resterait invisible sur presque toute la page. Avec "top" et
       une ancre en haut, il colle dès le départ. calc(100vh - 64px) = 20px de marge
       + 44px de hauteur du bouton, mesuré depuis le haut du viewport. */
    .mnav-fab{
      position:sticky; top:calc(100vh - 64px); z-index:46;
      padding:14px;
      display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
      width:fit-content; margin-left:auto; margin-right:20px;
      /* .mnav-fab is sticky (in-flow), and being the first real content inside
         .fab-scroll-track — which starts right at the top of <body> — its own
         natural height would otherwise push the whole page (nav, hero...) down
         by that amount. The negative bottom margin cancels that reserved space
         for the following content, without affecting the sticky positioning
         itself (which is based on this element's own box, not its margins). */
      margin-bottom:-44px;
      cursor:pointer;
      filter:drop-shadow(0 2px 5px rgba(0,0,0,0.55));
    }
    .mnav-bar{
      display:block; width:20px; height:2px; background:var(--paper); border-radius:1px;
      transition:transform 0.2s ease, opacity 0.2s ease;
    }
    .mnav-check:checked ~ .mnav-fab .mnav-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .mnav-check:checked ~ .mnav-fab .mnav-bar:nth-child(2){ opacity:0; }
    .mnav-check:checked ~ .mnav-fab .mnav-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
    .mnav-panel{
      display:flex; flex-direction:column; gap:2px;
      position:fixed; right:20px; bottom:80px; z-index:46;
      background:var(--ink); padding:16px 20px; min-width:190px;
      box-shadow:0 4px 14px rgba(0,0,0,0.35);
      opacity:0; pointer-events:none; transform:translateY(8px);
      transition:opacity 0.18s ease, transform 0.18s ease;
    }
    .mnav-check:checked ~ .mnav-panel{ opacity:1; pointer-events:auto; transform:translateY(0); }
    .mnav-panel a{ display:flex; align-items:baseline; gap:12px; text-decoration:none; padding:6px 0; }
    .mnav-panel .num{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:13px; color:var(--tan); }
    .mnav-panel .title{ font-family:'Aestetico', sans-serif; font-weight:600; font-size:14px; color:var(--paper); }

    /* on mobile, .chat-fab switches from fixed (its desktop behavior) to sticky too,
       for the same "stops before the footer" reason as .mnav-fab above (same "top"
       + .fab-anchor logic — see the comment on .mnav-fab). 74px = 20px de marge +
       54px de hauteur du bouton (padding 14 + icône 26 + padding 14). */
    .chat-fab{ position:sticky; top:calc(100vh - 74px); bottom:auto; margin-bottom:-54px; }

    @supports (animation-timeline: scroll()){
      @keyframes mnav-reveal{
        from{ opacity:0; pointer-events:none; }
        to{ opacity:1; pointer-events:auto; }
      }
      .mnav-fab{
        opacity:0;
        animation:mnav-reveal linear both;
        animation-timeline:scroll(root block);
        animation-range:0px 70px;
      }
    }
  }

/* ============================================================
   MODAL — base (:target technique, pure CSS, no JS).
   Shared by #tarifs-modal / #niveaux-modal (a-propos.html) and
   #essai-modal (both pages). href="#_" closes (no matching id).
   ============================================================ */
.modal{ display:none; position:fixed; inset:0; z-index:100; }
.modal:target{ display:flex; align-items:flex-start; justify-content:center; padding:48px 20px; overflow-y:auto; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(40,41,46,0.92); }
.modal-box{ position:relative; z-index:1; max-width:760px; width:100%; margin-top:12px; }
.modal-close{
  position:absolute; top:-16px; right:-16px; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); border:2px solid var(--tan); border-radius:50%; z-index:2;
  font-family:'Aestetico', sans-serif; font-weight:700; font-size:15px; text-decoration:none;
}
@media (max-width:600px){ .modal-close{ top:-14px; right:0; } }

/* ============================================================
   REVIEW-MODAL — "avis complet" popup, opened by clicking a card
   in the footer reviews marquee. Same :target mechanic as other
   modals; .modal-box provides the shared positioning/behavior,
   .review-modal-box overrides sizing/look for this content.
   ============================================================ */
.review-modal-box{
  max-width:520px; width:100%; margin-top:40px; background:var(--paper);
  border:2px solid var(--ink); box-shadow:10px 10px 0 rgba(40,41,46,0.55); padding:36px 32px 30px;
}
.review-modal-top{ display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.review-modal-avatar{
  width:44px; height:44px; border-radius:50%; background:var(--tan); color:var(--ink);
  font-family:'Aestetico', sans-serif; font-weight:800; font-size:17px;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.review-modal-name{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:17px; color:var(--ink); }
.review-modal-stars{ font-size:14px; letter-spacing:2px; color:#B8860B; margin-top:2px; }
.review-modal-text{ margin:0; font-size:15.5px; line-height:1.6; color:var(--ink); white-space:pre-line; }
.review-modal-source{
  display:flex; align-items:center; gap:7px; margin-top:22px;
  font-family:'Aestetico', sans-serif; font-weight:600; font-size:11px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--deep);
}
@media (max-width:600px){ .review-modal-box{ padding:30px 22px 24px; margin-top:26px; } }

/* ============================================================
   ESSAI-MODAL — "Cours d'essai" popup, opened from the nav-cta
   on every page. Styled as a funky-but-on-brand ticket: dark top
   stub (pitch + Mindbody CTA) and a paper "detachable" stub at
   the bottom holding Amélie's voice message. Straight (no tilt) —
   only the corner badge keeps the site's existing .stamp angle.
   ============================================================ */
.essai-modal-box{ position:relative; z-index:1; max-width:480px; width:100%; margin-top:28px; }
.essai-ticket{
  border:2.5px solid var(--ink); background:var(--deep); position:relative;
  box-shadow:10px 10px 0 rgba(40,41,46,0.55);
}
.essai-badge{
  position:absolute; top:-22px; left:-18px; z-index:3;
  background:var(--tan); color:var(--ink); border:2px solid var(--ink);
  padding:9px 13px; transform:rotate(-8deg); text-align:center; line-height:1.15;
  font-family:'Aestetico', sans-serif; font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:0.02em;
}
.essai-top{ padding:38px 30px 26px; }
.essai-eyebrow{
  font-family:'Aestetico', sans-serif; font-weight:600; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--sage); margin-bottom:10px;
}
.essai-title{
  font-family:'Aestetico', sans-serif; font-weight:800; font-size:clamp(28px,6vw,36px);
  line-height:0.92; text-transform:uppercase; color:var(--paper); margin:0 0 16px;
}
.essai-title em{ font-style:normal; color:var(--tan); }
.essai-body{
  font-family:'Aestetico', sans-serif; font-weight:400; font-size:14.5px; line-height:1.55;
  color:var(--paper); margin:0 0 12px; max-width:44ch;
}
.essai-body strong{ color:var(--tan); font-weight:700; }
.essai-body a{ color:var(--tan); text-decoration:underline; font-weight:600; }
.essai-note{
  font-family:'Aestetico', sans-serif; font-weight:500; font-size:13px; line-height:1.5;
  color:rgba(255,251,248,0.82); border-top:1px dashed rgba(255,251,248,0.3); padding-top:14px; margin-top:16px;
}
.essai-cta{
  display:block; text-align:center; background:var(--tan); color:var(--ink);
  font-family:'Aestetico', sans-serif; font-weight:700; font-size:14px; letter-spacing:0.02em;
  text-decoration:none; padding:16px 20px; text-transform:uppercase;
  border:2px solid var(--tan); margin-top:22px;
}
/* perforation divider, ticket-style */
.essai-perf{ position:relative; height:0; border-top:2.5px dashed var(--ink); background:var(--paper); }
.essai-perf::before, .essai-perf::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; background:var(--ink);
}
.essai-perf::before{ left:-15px; }
.essai-perf::after{ right:-15px; }

/* bottom, detachable stub — Amélie's voice message, alone */
.essai-bottom{ background:var(--paper); padding:26px 30px 30px; }
.essai-voice{
  display:flex; align-items:center; gap:12px; background:var(--paper-2);
  border:2px solid var(--ink); padding:10px 14px;
}
.essai-voice-avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  border:2px solid var(--ink); background:var(--tan);
  display:flex; align-items:center; justify-content:center;
  font-family:'Aestetico', sans-serif; font-weight:800; font-size:15px; color:var(--ink);
}
.essai-voice-play{
  width:30px; height:30px; border-radius:50%; background:var(--ink); flex:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.essai-voice-play::after{
  content:""; width:0; height:0; margin-left:2px;
  border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:9px solid var(--tan);
}
.essai-wave{ flex:1; display:flex; align-items:center; gap:2.5px; height:26px; overflow:hidden; }
.essai-wave span{ display:block; width:3px; border-radius:2px; background:var(--deep); flex:none; }
.essai-wave-time{ font-family:'Aestetico', sans-serif; font-weight:600; font-size:11.5px; color:var(--deep); flex:none; }

@media (max-width:600px){
  .essai-top{ padding:32px 22px 22px; }
  .essai-bottom{ padding:22px 22px 26px; }
  .essai-modal-box{ margin-top:16px; }
  .essai-badge{ top:-18px; left:14px; font-size:11px; }
  .essai-cta{ font-size:12.5px; letter-spacing:0; padding:15px 12px; }
}

/* ============================================================
   HORAIRE — lien vers l'horaire complet (section #horaire, fond
   tan) + modale (pur CSS, #horaire-modal, même mécanique :target
   que #tarifs-modal / #essai-modal). La grille horaire elle-même
   est un vrai tableau HTML (avant : une image affiche/screenshot).
   Couleurs reprises de l'affiche d'origine : ink (NOGI/GI/GI&NOGI),
   tan (Yoga), sage (Parents-enfants) déjà dans la palette du site ;
   cyan et rose/rouge (avertissement) sont propres à cette grille.
   ============================================================ */
.horaire-link{
  display:block; text-align:right; margin-top:28px; font-family:'Aestetico', sans-serif; font-weight:600;
  font-size:13px; color:var(--ink); text-decoration:underline; white-space:nowrap;
}
.horaire-link:hover{ color:var(--deep); }

.horaire-modal-box{ max-width:900px; background:var(--paper-2); border:2px solid var(--ink); padding:34px 36px; }
.horaire-modal-box h3{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; margin:0 0 22px; color:var(--ink); }
.horaire-modal-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.horaire-modal-head h3{ margin:0 0 22px; }
.horaire-download{
  display:inline-block; margin-bottom:22px; font-family:'Aestetico', sans-serif; font-weight:600;
  font-size:13px; color:var(--ink); text-decoration:underline; text-underline-offset:2px; white-space:nowrap;
}
.horaire-download:hover{ color:var(--deep); }
@media (max-width:600px){
  .horaire-download{ font-size:12px; }
}

.horaire-warning{
  background:#FADCDF; border:2px solid #C0392B; padding:18px 22px; margin-bottom:26px;
}
.horaire-warning-title{
  font-family:'Aestetico', sans-serif; font-weight:800; font-size:15px; text-transform:uppercase;
  text-align:center; color:var(--ink); margin:0 0 12px;
}
.horaire-warning ul{ margin:0; padding:0; list-style:none; }
.horaire-warning li{
  font-family:'Aestetico', sans-serif; font-weight:400; font-size:13.5px; line-height:1.6; color:var(--ink);
  padding-left:16px; position:relative; margin-bottom:4px;
}
.horaire-warning li::before{ content:"•"; position:absolute; left:0; }
.horaire-warning li:last-child{ margin-bottom:0; }
.horaire-warning strong{ font-weight:800; }
.horaire-warning u{ text-decoration:underline; }
.mindbody-link{ color:inherit; text-decoration:underline; }
.mindbody-link:hover{ color:#C0392B; }

.horaire-table-wrap{ overflow-x:auto; padding-bottom:16px; }
.horaire-table{
  border-collapse:separate; border-spacing:3px; width:100%; min-width:820px;
  font-family:'Aestetico', sans-serif; table-layout:auto;
}
.horaire-table th, .horaire-table td{ padding:0; vertical-align:middle; }
.horaire-table thead th{
  font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--ink); text-align:center; padding:6px 4px 12px;
}
/* colonne HEURE collée à gauche pendant le défilement horizontal (mobile) — une seule
   colonne heure suffit puisqu'elle reste toujours visible, celle de droite est retirée */
.horaire-table .h-heure{
  font-weight:700; font-size:12.5px; color:var(--ink); text-align:center;
  border-bottom:1px solid rgba(40,41,46,0.15); padding:6px 2px; height:40px;
  position:sticky; left:0; z-index:1; background:var(--paper-2);
}
.horaire-table thead .h-heure-head{
  border-bottom:none; padding:6px 4px 12px; position:sticky; left:0; z-index:2; background:var(--paper-2);
}
.horaire-table td.h-blank{ border:none; background:none; height:40px; }
.horaire-table td.h-block{
  border:2px solid var(--ink); text-align:center; font-weight:400; font-size:12px;
  line-height:1.2; padding:4px 5px; height:40px; color:var(--ink); background:var(--paper-2); white-space:nowrap;
}
.horaire-table td.h-os{ background:none; font-weight:400; }
.horaire-table td.h-dark{ background:var(--ink); color:var(--paper); }
.horaire-table td.h-cyan{ background:#C7EFF4; }
.horaire-table td.h-tan{ background:var(--tan); }
.horaire-table td.h-sage{ background:var(--sage); }
.horaire-table td.h-pink{
  border:4px solid transparent;
  background-color:var(--ink);
  background-image:linear-gradient(var(--ink),var(--ink)), linear-gradient(90deg, #7A2836, #A15A2A, #A8862B, #3F6B4A, #2E5F72, #533A63);
  background-origin:border-box;
  background-clip:padding-box, border-box;
  color:var(--paper);
}

.horaire-foot{ margin-top:20px; }
.horaire-foot p{ margin:0; font-size:11.5px; line-height:1.5; color:var(--deep); }

@media (max-width:600px){
  .horaire-modal-box{ padding:26px 20px; }
  .horaire-warning{ padding:16px 16px; }
}

/* ============================================================
   POST-IT — petite bulle d'info par cours (sections "01 — horaire"
   et "07 — classes"), par citation (section "03 — communauté"), par
   événement du babillard, et pour l'avis "1 étoile" — même mécanique
   partout, sur les deux pages. Pur CSS, checkbox+label caché (même
   technique que .poster-flip-check / .rail-check) : un vrai état
   "ouvert/fermé" piloté par un checkbox — taper sur le nom OUVRE la
   bulle, taper sur son petit ✕ la FERME. Le :hover (aperçu souris sans
   clic) est enfermé dans @media(hover:hover) : sur tactile, un tap peut
   laisser un :hover "collé" sur l'élément (bug connu des navigateurs
   mobiles), ce qui empêchait le ✕ de fermer la bulle — en limitant
   :hover aux appareils qui ont une vraie souris, le tactile ne dépend
   plus que du checkbox, fiable dans les deux sens. */
.postit-wrap{ position:relative; display:inline-block; }
.postit-check{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.postit-name-btn{
  display:inline; color:inherit; text-transform:inherit; letter-spacing:inherit;
  text-decoration-line:none; cursor:pointer;
}
.postit-check:focus ~ .postit-name-btn,
.postit-check:checked ~ .postit-name-btn{ text-decoration-line:underline; text-underline-offset:3px; }
@media (hover:hover){
  .postit-wrap:hover .postit-name-btn{ text-decoration-line:underline; text-underline-offset:3px; }
}
.postit-check:focus-visible ~ .postit-name-btn{ outline:2px solid var(--deep); outline-offset:3px; }
/* Variantes "cours" et "communauté" — le nom reste toujours souligné, même
   sans survol/tap, pour qu'on voie tout de suite que c'est cliquable. */
.class-postit .postit-name-btn,
.quote-postit .postit-name-btn{ text-decoration-line:underline; text-underline-offset:3px; }
.postit{
  position:absolute; bottom:calc(100% + 12px); left:50%; z-index:20;
  transform:translateX(-50%) translateY(6px) rotate(-2deg);
  width:200px; background:#F5DE8C; color:var(--ink);
  border:1px solid rgba(40,41,46,0.15); box-shadow:3px 4px 10px rgba(40,41,46,0.35);
  padding:30px 32px 14px 16px; font-family:'Aestetico', sans-serif; font-weight:500; font-size:12.5px; line-height:1.45;
  text-align:left; text-transform:none; letter-spacing:normal; white-space:normal;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.18s ease, transform 0.18s ease;
}
.postit::after{
  content:""; position:absolute; top:0; right:0; width:0; height:0;
  border-style:solid; border-width:0 13px 13px 0; border-color:transparent rgba(40,41,46,0.18) transparent transparent;
}
.postit-check:checked ~ .postit{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) rotate(-2deg);
}
@media (hover:hover){
  .postit-wrap:hover .postit{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) rotate(-2deg);
  }
}
.postit-close{
  position:absolute; top:7px; right:7px; z-index:1; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Aestetico', sans-serif; font-weight:700; font-size:10px; line-height:1; color:var(--ink);
  background:rgba(40,41,46,0.1); border-radius:50%; cursor:pointer;
  transition:background 0.15s ease;
}
.postit-close:hover{ background:rgba(40,41,46,0.22); }
/* Variante qui s'ouvre vers le bas — pour les cours du haut d'une liste/rangée
   qui n'ont pas assez d'espace au-dessus (ex: sous un titre de section). */
.postit-wrap.postit-down .postit{
  bottom:auto; top:calc(100% + 12px);
  transform:translateX(-50%) translateY(-6px) rotate(-2deg);
}
.postit-wrap.postit-down .postit::after{
  top:auto; bottom:0; border-width:13px 13px 0 0;
  border-color:rgba(40,41,46,0.18) transparent transparent transparent;
}
.postit-wrap.postit-down .postit-check:checked ~ .postit{
  transform:translateX(-50%) translateY(0) rotate(-2deg);
}
@media (hover:hover){
  .postit-wrap.postit-down:hover .postit{
    transform:translateX(-50%) translateY(0) rotate(-2deg);
  }
}
@media (max-width:600px){
  .postit{ width:168px; font-size:12px; padding:28px 16px 12px 14px; }
}

/* Variante "communauté" — le texte de présentation est un vrai paragraphe
   (pas un placeholder), donc la note est plus large pour rester lisible
   sans devenir trop haute. */
.quote-postit .postit{ width:340px; }
@media (max-width:640px){
  .quote-postit .postit{ width:min(78vw,300px); }
}

/* Variante "cours" (section Nos cours) — descriptions plus longues (tagline +
   plusieurs paragraphes), donc une note plus large elle aussi. */
.class-postit .postit{ width:320px; }
@media (max-width:600px){
  .class-postit .postit{ width:min(82vw,300px); }
  /* Sur mobile, le nom du cours est souvent collé au bord gauche de sa carte
     (colonne unique) : centrer la bulle sur le SEUL bouton (étroit) la
     poussait hors de l'écran et coupait le texte. En passant le wrap en
     display:block, il prend toute la largeur de la carte (.name / .class-name),
     et la bulle (centrée via left:50%) se centre sur cette largeur complète
     au lieu du bouton seul — elle reste donc dans l'écran. */
  .class-postit{ display:block; }
}
.postit-tagline{
  display:block; font-weight:800; text-transform:uppercase; letter-spacing:0.02em;
  font-size:12px; color:var(--deep); margin-bottom:8px;
}
.postit p{ margin:0; }
.postit p + p{ margin-top:8px; }
.postit-note{
  margin-top:10px; padding-top:10px; border-top:1px dashed rgba(40,41,46,0.3); font-weight:600;
}
.postit-note a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Variante "avis 1 étoile" — mini-liste de faux mauvais avis, dans la
   citation d'Amélie (section 04). Contenu à remplacer par les vrais
   avis quand Amélie les fournira. */
.avis-postit{ width:300px; display:flex; flex-direction:column; }
.bad-review{ display:block; }
.bad-review + .bad-review{ margin-top:10px; padding-top:10px; border-top:1px dashed rgba(40,41,46,0.22); }
.bad-review-stars{ display:block; color:#B8860B; font-size:11px; letter-spacing:2px; margin-bottom:3px; }
.bad-review-text{ display:block; font-style:italic; }
.bad-review-name{ display:block; margin-top:4px; font-weight:700; font-size:11px; }
@media (max-width:640px){
  .avis-postit{ width:min(82vw,280px); }
}

/* ============================================================
   ALBUM MODALS — "Intro BJJ" et "Parents-enfants" (section
   "00 — inscris-toi"). On clique sur le nom du cours (Intro BJJ /
   Parents-enfants) -> une boîte s'ouvre (même pattern .modal que
   les autres popups du site) avec un texte de présentation et,
   en dessous, un petit album photo façon "slideshow" : une bande
   de vignettes qui défile horizontalement, avec une flèche à
   gauche et une à droite. Cliquer sur une vignette agrandit la
   photo dans une deuxième boîte plein écran (lightbox).
   Tout est pur CSS (:target + :has(), aucun JS) :
   - la bande défile via un lien-ancre natif vers l'id de la
     vignette visée (le navigateur scroll le conteneur pour
     l'amener dans la vue) ;
   - les flèches gauche/droite changent de destination d'une
     vignette à l'autre : chaque état (photo 1 active, photo 2
     active, etc.) affiche SA propre paire de flèches via
     :has(#album:has(#t-N:target)), le reste est caché.
   Vignettes et grande photo sont pour le moment des boîtes VIDES
   (pointillé) — il suffira d'ajouter une <img> à l'intérieur de
   .album-thumb et .lightbox-photo quand les vraies photos seront
   prêtes.
   ============================================================ */
.intro-card-label-link{ display:block; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.intro-card-label-link:hover{ color:var(--tan); }

/* Naviguer entre les vignettes (ex: #ib-t2) change le fragment d'URL, ce qui
   ferait perdre son :target — et donc se refermer — à la boîte .modal si on
   se fiait uniquement à #id:target. On garde la boîte ouverte tant qu'ELLE-
   MÊME est ciblée OU qu'une de ses vignettes l'est (:has(:target)). */
#ib-album-modal:target, #ib-album-modal:has(:target),
#pe-album-modal:target, #pe-album-modal:has(:target){
  display:flex; align-items:flex-start; justify-content:center; padding:48px 20px; overflow-y:auto;
}

.album-modal-box{ max-width:560px; background:var(--paper-2); border:2px solid var(--ink); padding:34px 36px; }
.album-modal-box h3{ font-family:'Aestetico', sans-serif; font-weight:800; font-size:20px; text-transform:uppercase; margin:0 0 14px; color:var(--ink); }
.album-modal-box p{ font-family:'Aestetico', sans-serif; font-weight:400; font-size:14px; line-height:1.55; color:var(--ink); margin:0; max-width:46ch; }
.album-modal-box p + p{ margin-top:12px; }
.album-modal-box h4{
  font-family:'Aestetico', sans-serif; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--deep);
  margin:20px 0 8px;
}
.album-modal-box ul{ margin:0 0 12px; padding-left:18px; max-width:46ch; }
.album-modal-box li{
  font-family:'Aestetico', sans-serif; font-weight:400; font-size:14px;
  line-height:1.55; color:var(--ink); margin:5px 0;
}
.album-modal-box a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.album-modal-box a:hover{ color:#C0392B; }
.album-modal-box .modal-close{ color:var(--paper); text-decoration:none; }
.album-modal-box .modal-close:hover{ color:var(--paper); }

/* Choix "pilule rouge / pilule bleue" (façon Matrix) — clic sur une pilule =
   elle grossit plein écran et s'ouvre en deux, comme si le texte était
   caché dedans, sur une affiche qui "glow" de la couleur choisie. Pur CSS
   (:target), même principe que l'album photo juste au-dessus. Vraies
   photos de pilules (détourées, fond transparent) plutôt qu'un rendu CSS. */
.pill-intro{ font-style:italic; }
.pill-row{ display:flex; align-items:center; justify-content:center; gap:36px; margin:26px 0 4px; }
.pill{
  position:relative; display:block; width:150px;
  cursor:pointer; text-decoration:none;
  transition:transform 0.25s ease, filter 0.25s ease;
}
.pill-img{ display:block; width:100%; height:auto; }
.pill:hover{ transform:translateY(-4px) scale(1.05); filter:drop-shadow(0 10px 16px rgba(0,0,0,0.28)); }

.pill-reveal{
  display:none; position:fixed; inset:0; z-index:70;
  align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:70px 24px;
}
#ib-pill-red-panel:target, #ib-pill-blue-panel:target{ display:flex; }

.pill-reveal-red{ background:radial-gradient(ellipse at 50% 24%, rgba(224,32,32,0.35), transparent 60%), #090303; }
.pill-reveal-blue{ background:radial-gradient(ellipse at 50% 24%, rgba(31,127,224,0.35), transparent 60%), #03060d; }

/* La pilule (seule — sans son ombre/reflet, grâce aux versions "solo"
   détourées) grossit ET s'efface en même temps — pas l'une après l'autre —
   pendant que le texte apparaît à sa place. Séquence rapide (~2s). */
.pill-split-stage{
  position:fixed; inset:0; z-index:1; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.pill-grow{
  width:220px; max-width:60vw;
  animation:pill-grow-fade 2s cubic-bezier(.3,0,.4,1) forwards;
}
@keyframes pill-grow-fade{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(7.5); opacity:0; }
}

.pill-reveal-text{
  position:relative; z-index:2; max-width:560px; margin-top:34px;
  animation:pill-text-reveal 0.8s ease 1s backwards;
}
.pill-reveal-text p{ color:var(--paper); max-width:none; }
.pill-reveal-text p + p{ margin-top:12px; }
.pill-reveal-text h3{
  font-family:'Aestetico', sans-serif; font-weight:800; font-size:clamp(20px,2.6vw,26px);
  text-transform:uppercase; letter-spacing:0.01em; color:var(--tan); line-height:1.05;
  margin:34px 0 12px;
}
.pill-reveal-text h3:first-child{ margin-top:0; }
.pill-reveal-text h4{
  font-family:'Aestetico', sans-serif; font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:0.06em; color:var(--sage);
  margin:22px 0 8px;
}
.pill-reveal-text ul{ margin:0 0 12px; padding-left:20px; color:var(--paper); }
.pill-reveal-text li{ margin:5px 0; color:var(--paper); }
.pill-reveal-text li ul{ margin-top:6px; margin-bottom:6px; }
.pill-reveal-text li li{ color:var(--paper-2); font-size:0.95em; }
.pill-reveal-text a{ color:var(--tan); text-decoration:underline; text-underline-offset:2px; }
.pill-reveal-text a:hover{ color:var(--paper); }
@keyframes pill-text-reveal{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .pill-grow{ animation:none; opacity:0; }
  .pill-reveal-text{ animation:none; }
}
.pill-back{
  display:inline-block; margin-top:16px; font-family:'Aestetico', sans-serif; font-weight:700;
  font-size:12px; color:var(--tan); text-decoration:underline; text-underline-offset:3px;
}
.album-modal-box .album-modal-cta{
  display:inline-block; margin-top:26px; font-family:'Aestetico', sans-serif; font-weight:600;
  font-size:13px; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--tan); padding-bottom:2px;
}
.album-modal-box .album-modal-cta:hover{ color:var(--deep); }

.album{ margin-top:26px; }
.album-row{ display:flex; align-items:center; justify-content:center; gap:8px; }
.album-track{
  display:flex; gap:0; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:2px; scrollbar-width:none; -ms-overflow-style:none;
}
.album-track::-webkit-scrollbar{ display:none; height:0; }
.album-thumb{
  flex:0 0 64px; width:64px; height:64px; border:1.5px solid var(--ink);
  background:var(--paper); scroll-snap-align:start; display:block; cursor:pointer;
  transition:opacity 0.15s ease; overflow:hidden;
}
.album-thumb + .album-thumb{ border-left:none; }
.album-thumb:hover, .album-thumb:focus{ opacity:0.85; }
.album-thumb img{ display:block; width:100%; height:100%; object-fit:cover; }
.album-arrows-left, .album-arrows-right{ position:relative; width:28px; height:28px; flex-shrink:0; }
.album-arrow{
  display:none; position:absolute; inset:0; align-items:center; justify-content:center;
  background:var(--ink); color:var(--paper); border:1.5px solid var(--tan); border-radius:50%;
  text-decoration:none; font-family:'Aestetico', sans-serif; font-weight:700; font-size:14px; line-height:1;
}

/* Lightbox — photo agrandie, deuxième niveau de :target par-dessus le modal. */
.lightbox{ display:none; position:fixed; inset:0; z-index:150; align-items:center; justify-content:center; padding:40px 20px; }
.lightbox:target{ display:flex; }
.lightbox-backdrop{ position:absolute; inset:0; background:rgba(40,41,46,0.94); }
.lightbox-box{ position:relative; z-index:1; }
.lightbox-photo{
  width:min(70vw,70vh,560px); height:min(70vw,70vh,560px); background:var(--paper-2);
  border:2px solid var(--ink); overflow:hidden;
}
.lightbox-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:600px){
  .album-modal-box{ padding:26px 20px; }
  /* Sur mobile : la bande de vignettes est limitée à une largeur d'environ
     4 photos (au lieu des 5 en entier) — les flèches servent alors à faire
     défiler la bande pour révéler la 5e photo (au lieu de la cacher).
     Les flèches sont aussi agrandies (36px, cible tactile plus fiable
     qu'à 28px). Le défilement se fait via le mécanisme natif du navigateur :
     cliquer une flèche pointe vers l'ancre de la vignette suivante
     (ex. #ib-t5), ce qui fait défiler .album-track (overflow-x:auto) pour
     l'amener dans le cadre visible. */
  .album-track{ max-width:264px; }
  .album-arrows-left, .album-arrows-right{ width:36px; height:36px; }
  .album-arrow{ font-size:16px; }
}

/* -- flèches "ib" : état par défaut = photo 1, dernière photo = 5 -- */
.ib-arrow-r-1{ display:flex; }
#ib-album:has(#ib-t2:target) .ib-arrow-r-1{ display:none; }
#ib-album:has(#ib-t2:target) .ib-arrow-l-2{ display:flex; }
#ib-album:has(#ib-t2:target) .ib-arrow-r-2{ display:flex; }
#ib-album:has(#ib-t3:target) .ib-arrow-r-1{ display:none; }
#ib-album:has(#ib-t3:target) .ib-arrow-l-3{ display:flex; }
#ib-album:has(#ib-t3:target) .ib-arrow-r-3{ display:flex; }
#ib-album:has(#ib-t4:target) .ib-arrow-r-1{ display:none; }
#ib-album:has(#ib-t4:target) .ib-arrow-l-4{ display:flex; }
#ib-album:has(#ib-t4:target) .ib-arrow-r-4{ display:flex; }
#ib-album:has(#ib-t5:target) .ib-arrow-r-1{ display:none; }
#ib-album:has(#ib-t5:target) .ib-arrow-l-5{ display:flex; }

/* -- flèches "pe" : état par défaut = photo 1, dernière photo = 5 -- */
.pe-arrow-r-1{ display:flex; }
#pe-album:has(#pe-t2:target) .pe-arrow-r-1{ display:none; }
#pe-album:has(#pe-t2:target) .pe-arrow-l-2{ display:flex; }
#pe-album:has(#pe-t2:target) .pe-arrow-r-2{ display:flex; }
#pe-album:has(#pe-t3:target) .pe-arrow-r-1{ display:none; }
#pe-album:has(#pe-t3:target) .pe-arrow-l-3{ display:flex; }
#pe-album:has(#pe-t3:target) .pe-arrow-r-3{ display:flex; }
#pe-album:has(#pe-t4:target) .pe-arrow-r-1{ display:none; }
#pe-album:has(#pe-t4:target) .pe-arrow-l-4{ display:flex; }
#pe-album:has(#pe-t4:target) .pe-arrow-r-4{ display:flex; }
#pe-album:has(#pe-t5:target) .pe-arrow-r-1{ display:none; }
#pe-album:has(#pe-t5:target) .pe-arrow-l-5{ display:flex; }