@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
    --bg:#0d0c0c;
    --bg-alt:#161312;
    --bg-card:#1c1817;
    --red:#c81d25;
    --red-deep:#7a1014;
    --gold:#c9a227;
    --ink:#f2ede7;
    --ink-dim:#a89f97;
    --rope:#3a3230;
    --radius:2px;
  }
 
  *{box-sizing:border-box; margin:0; padding:0;}
 
  html{scroll-behavior:smooth;}
 
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
  }
 
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:'Work Sans', sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    background-image:
      radial-gradient(circle at 20% 10%, rgba(200,29,37,0.06), transparent 40%),
      radial-gradient(circle at 80% 90%, rgba(201,162,39,0.05), transparent 40%);
  }
 
  a{color:inherit; text-decoration:none;}
 
  img{max-width:100%; display:block;}
 
  h1,h2,h3{
    font-family:'Anton', sans-serif;
    font-weight:400;
    letter-spacing:0.5px;
    text-transform:uppercase;
    line-height:1.05;
  }
 
  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:0.75rem;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--gold);
  }
 
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
  }
 
  :focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }
 
  /* ---------- ROPE DIVIDER (signature motif) ---------- */
  .rope-divider{
    height:14px;
    width:100%;
    background:
      repeating-linear-gradient(90deg,
        var(--rope) 0px, var(--rope) 2px,
        transparent 2px, transparent 26px),
      linear-gradient(180deg, transparent 45%, var(--red-deep) 45%, var(--red-deep) 55%, transparent 55%);
    opacity:0.85;
  }
 
  /* ---------- HEADER ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    background:rgba(13,12,12,0.88);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(242,237,231,0.08);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 24px;
    max-width:1120px;
    margin:0 auto;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:10px;
    font-family:'Anton', sans-serif;
    font-size:1.1rem;
    letter-spacing:1px;
    text-transform:uppercase;
  }
  .logo svg{width:30px; height:30px; flex-shrink:0;}
  .nav-links{
    display:flex;
    gap:22px;
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
  }
  .nav-links a{
    color:var(--ink-dim);
    transition:color 0.2s ease;
    padding:4px 0;
    border-bottom:1px solid transparent;
  }
  .nav-links a:hover, .nav-links a:focus-visible{
    color:var(--ink);
    border-bottom-color:var(--red);
  }
  .nav-cta{
    font-family:'Space Mono', monospace;
    font-size:0.75rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    background:var(--red);
    color:var(--ink);
    padding:9px 16px;
    border-radius:var(--radius);
    transition:background 0.2s ease;
  }
  .nav-cta:hover, .nav-cta:focus-visible{background:#a8151c;}
 
  @media (max-width:720px){
    .nav-links{display:none;}
  }
 
  /* ---------- HERO ---------- */
  .hero{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
    padding:140px 0 80px;
  }
  .hero-scorpion{
    position:absolute;
    right:-40px;
    top:50%;
    transform:translateY(-50%);
    width:min(46vw, 560px);
    opacity:0.14;
    z-index:0;
  }
  .hero-inner{position:relative; z-index:1;}
  .hero .eyebrow{margin-bottom:18px;}
  .hero h1{
    font-size:clamp(3rem, 9vw, 7.2rem);
    color:var(--ink);
    max-width:900px;
  }
  .hero h1 .accent{color:var(--red);}
  .hero-sub{
    margin-top:24px;
    max-width:520px;
    color:var(--ink-dim);
    font-size:1.05rem;
  }
  .hero-meta{
    margin-top:36px;
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    font-family:'Space Mono', monospace;
    font-size:0.85rem;
    color:var(--ink-dim);
  }
  .hero-meta strong{
    display:block;
    color:var(--ink);
    font-size:0.7rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:4px;
  }
  .hero-actions{
    margin-top:44px;
    display:flex;
    gap:16px;
    flex-wrap:wrap;
  }
  .btn{
    font-family:'Space Mono', monospace;
    font-size:0.85rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    padding:16px 28px;
    border-radius:var(--radius);
    display:inline-block;
    transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }
  .btn-primary{
    background:var(--red);
    color:var(--ink);
  }
  .btn-primary:hover, .btn-primary:focus-visible{background:#a8151c; transform:translateY(-2px);}
  .btn-ghost{
    border:1px solid rgba(242,237,231,0.25);
    color:var(--ink);
  }
  .btn-ghost:hover, .btn-ghost:focus-visible{border-color:var(--gold); color:var(--gold); transform:translateY(-2px);}
 
  /* ---------- SECTION SHARED ---------- */
  section{padding:100px 0;}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin-bottom:56px;
    flex-wrap:wrap;
  }
  .section-head h2{font-size:clamp(2.2rem, 5vw, 3.4rem);}
  .section-head p{color:var(--ink-dim); max-width:360px; font-size:0.95rem;}
 
  /* ---------- PLANNING (fight-card style) ---------- */
  .schedule{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:2px;
    background:var(--rope);
    border:1px solid var(--rope);
  }
  .round-card{
    background:var(--bg-card);
    padding:28px 26px;
    position:relative;
  }
  .round-num{
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:2px;
    color:var(--red);
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .round-num::after{
    content:'';
    flex:1;
    height:1px;
    background:rgba(200,29,37,0.35);
  }
  .round-card h3{
    font-size:1.3rem;
    color:var(--ink);
    margin-bottom:10px;
  }
  .round-card .day{
    font-family:'Space Mono', monospace;
    color:var(--gold);
    font-size:0.85rem;
    margin-bottom:6px;
  }
  .round-card .who{color:var(--ink-dim); font-size:0.9rem;}
 
  .schedule--single{grid-template-columns:1fr;}
 
  .plans{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
    background:var(--rope);
    border:1px solid var(--rope);
  }
  @media (max-width:820px){
    .plans{grid-template-columns:1fr;}
  }
  .plan-card{
    background:var(--bg-card);
    padding:34px 30px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .plan-card h3{font-size:1.5rem; color:var(--ink); margin-top:2px;}
  .plan-price{
    font-family:'Anton', sans-serif;
    font-size:2.2rem;
    color:var(--ink);
    margin:6px 0 4px;
  }
  .plan-price span{
    font-family:'Space Mono', monospace;
    font-size:0.9rem;
    color:var(--ink-dim);
    text-transform:none;
    letter-spacing:0;
  }
  .plan-card--highlight{
    background:linear-gradient(165deg, #2a1012, var(--bg-card) 60%);
    border-top:2px solid var(--red);
  }
  .round-num--gold{color:var(--gold);}
  .round-num--gold::after{background:rgba(201,162,39,0.35);}
  .plan-cta{margin-top:14px; text-align:center;}
 
  .news-slider{position:relative;}
  .news-track{
    display:flex;
    gap:2px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    background:var(--rope);
    border:1px solid var(--rope);
    -webkit-overflow-scrolling:touch;
  }
  .news-track::-webkit-scrollbar{display:none;}
  .news-card{
    flex:0 0 280px;
    scroll-snap-align:start;
    background:var(--bg-card);
    padding:28px 26px;
    display:block;
    cursor:pointer;
    transition:background 0.2s ease;
  }
  .news-card:hover, .news-card:focus-visible{background:#241f1d;}
  .news-card h3{font-size:1.15rem; color:var(--ink); margin:10px 0 10px;}
  .news-card .who{font-size:0.88rem; line-height:1.55;}
 
  .slider-controls{
    position:absolute;
    top:38%;
    left:-20px;
    right:-20px;
    display:flex;
    justify-content:space-between;
    gap:0;
    margin-top:0;
    pointer-events:none;
    z-index:2;
  }
  .slider-btn{
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid rgba(242,237,231,0.25);
    background:rgba(13,12,12,0.85);
    backdrop-filter:blur(4px);
    color:var(--ink);
    font-size:1.4rem;
    line-height:1;
    cursor:pointer;
    transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    pointer-events:auto;
  }
  .slider-btn:hover, .slider-btn:focus-visible{border-color:var(--red); color:var(--red);}
  .round-card--wide{
    padding:40px 44px;
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .round-card--wide h3{font-size:1.8rem; margin-bottom:6px;}
  .round-card--wide .day{font-size:1.1rem; margin-bottom:10px;}
  .round-card--wide .who{font-size:0.95rem;}
 
  .tarifs-note{
    margin-top:40px;
    background:var(--bg-alt);
    border-left:3px solid var(--gold);
    padding:22px 26px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
  }
  .tarifs-note p{color:var(--ink-dim); font-size:0.92rem; max-width:520px;}
  .tarifs-note strong{color:var(--ink); font-family:'Anton', sans-serif; font-size:1.1rem; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:6px;}
 
  /* ---------- HISTOIRE (Lucien Rodriguez) ---------- */
  .heritage{
    background:var(--bg-alt);
    border-top:1px solid rgba(242,237,231,0.06);
    border-bottom:1px solid rgba(242,237,231,0.06);
  }
  .heritage-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:54px;
    align-items:center;
  }
  @media (max-width:820px){
    .heritage-grid{grid-template-columns:1fr; gap:36px;}
  }
  .heritage-portrait{
    aspect-ratio:4/5;
    background:linear-gradient(165deg, #241d1a, var(--bg-card) 70%);
    border:1px solid rgba(242,237,231,0.08);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .heritage-portrait svg{width:56%; height:56%;}
  .heritage-portrait .tag{
    position:absolute;
    bottom:18px; left:18px;
    font-family:'Space Mono', monospace;
    font-size:0.68rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--gold);
    background:rgba(13,12,12,0.75);
    padding:6px 10px;
    border:1px solid rgba(201,162,39,0.3);
  }
  .heritage-copy h2{font-size:clamp(1.9rem, 4vw, 2.7rem); margin-bottom:18px;}
  .heritage-copy p{color:var(--ink-dim); font-size:1rem; margin-bottom:16px; max-width:520px;}
  .heritage-copy p strong{color:var(--ink); font-weight:600;}
  .heritage-stats{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:2px;
    background:var(--rope);
    border:1px solid var(--rope);
    margin:26px 0 30px;
  }
  .heritage-stats div{background:var(--bg-card); padding:16px 18px;}
  .heritage-stats strong{
    display:block; font-family:'Space Mono', monospace; font-size:0.65rem;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--gold); margin-bottom:6px;
  }
  .heritage-stats span{font-family:'Anton', sans-serif; font-size:1.1rem; text-transform:uppercase; color:var(--ink);}
 
  /* ---------- GALERIE ---------- */
  .gallery{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    grid-auto-rows:150px;
    gap:6px;
  }
  .tile{
    position:relative;
    overflow:hidden;
    background:var(--bg-card);
    border:1px solid rgba(242,237,231,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tile svg{width:38%; height:38%; opacity:0.5;}
  .tile img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 30%;
    display:block;
  }
  /* Tailles des cases pensées pour coller au format réel de chaque photo :
     paysage = case large et basse, portrait = case étroite et haute.
     Ça évite d'étirer les images au-delà de leur résolution (= flou). */
  .tile-big{grid-column:span 4; grid-row:span 2; background:linear-gradient(135deg, var(--red-deep), #2a0f10);}
  .tile-portrait{grid-column:span 1; grid-row:span 2;}
  /* Case "showcase" centrée sur 4 colonnes et 3 lignes : plus proche du ratio réel
     d'une photo de groupe en paysage, donc beaucoup moins rognée qu'avant. */
  .tile-showcase{grid-column:2 / span 4; grid-row:span 3;}
  .tile-big svg{opacity:0.7;}
  .tile-big img{object-position:center 20%;}
  .tile-legend{
    cursor:pointer;
    flex-direction:column;
    gap:14px;
    transition:background 0.2s ease;
  }
  .tile-legend img{
    position:absolute;
    inset:0;
    z-index:0;
    filter:brightness(0.55);
  }
  .tile-legend:hover img{filter:brightness(0.4);}
  .tile-legend:hover, .tile-legend:focus-visible{background:linear-gradient(135deg, #8a141a, #2a0f10);}
  .tile-caption{
    position:relative;
    z-index:1;
    font-family:'Space Mono', monospace;
    font-size:0.7rem;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink);
    text-align:center;
    padding:0 16px;
    line-height:1.5;
    text-shadow:0 2px 8px rgba(0,0,0,0.8);
  }
 
  @media (max-width:720px){
    .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:140px;}
    .tile{grid-column:span 1 !important; grid-row:span 1 !important;}
    .tile-big{grid-column:span 2 !important; grid-row:span 2 !important;}
    .tile-portrait{grid-row:span 2 !important;}
    .tile-showcase{grid-column:span 2 !important; grid-row:span 2 !important;}
  }
 
  .gallery-note{
    margin-top:20px;
    font-family:'Space Mono', monospace;
    font-size:0.78rem;
    color:var(--ink-dim);
  }
 
  /* ---------- CONTACT ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
  }
  @media (max-width:820px){
    .contact-grid{grid-template-columns:1fr;}
  }
  .info-block{margin-bottom:34px;}
  .info-block strong{
    display:block;
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:8px;
  }
  .info-block p, .info-block a{font-size:1.05rem; color:var(--ink);}
  .info-block a:hover{color:var(--red);}
 
  form{display:flex; flex-direction:column; gap:16px;}
  .field{display:flex; flex-direction:column; gap:8px;}
  .field label{
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--ink-dim);
  }
  .field input, .field textarea{
    background:var(--bg-card);
    border:1px solid rgba(242,237,231,0.12);
    color:var(--ink);
    padding:14px 16px;
    font-family:'Work Sans', sans-serif;
    font-size:0.95rem;
    border-radius:var(--radius);
    resize:vertical;
  }
  .field input:focus, .field textarea:focus{
    outline:none;
    border-color:var(--red);
  }
  form .btn-primary{
    align-self:flex-start;
    border:none;
    cursor:pointer;
    margin-top:6px;
  }
  .form-note{font-size:0.78rem; color:var(--ink-dim); font-family:'Space Mono', monospace;}
 
  /* ---------- FOOTER ---------- */
  footer{
    padding:48px 0 32px;
    border-top:1px solid rgba(242,237,231,0.08);
  }
  .footer-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:16px;
  }
  .footer-inner .logo{font-size:0.95rem;}
  .footer-links{
    display:flex;
    gap:22px;
    font-family:'Space Mono', monospace;
    font-size:0.75rem;
    color:var(--ink-dim);
    letter-spacing:1px;
    text-transform:uppercase;
  }
  .footer-links a:hover{color:var(--gold);}

  /* ---------- ARTICLE PAGES (actu + légende) ---------- */
  .article-hero{padding:150px 0 50px;}
  .breadcrumb{
    font-family:'Space Mono', monospace; font-size:0.75rem; color:var(--ink-dim);
    letter-spacing:1px; text-transform:uppercase; margin-bottom:22px; display:flex; gap:8px; align-items:center;
  }
  .breadcrumb a{color:var(--ink-dim); transition:color 0.2s ease;}
  .breadcrumb a:hover{color:var(--gold);}
  .article-hero h1{font-size:clamp(2.1rem, 5.5vw, 3.6rem); margin:14px 0 20px; color:var(--ink);}
  .article-lead{font-size:1.15rem; color:var(--ink-dim); max-width:640px;}
  .article-meta{
    margin-top:28px; display:flex; flex-wrap:wrap; gap:28px;
    font-family:'Space Mono', monospace; font-size:0.82rem; color:var(--ink-dim);
    border-top:1px solid rgba(242,237,231,0.1); border-bottom:1px solid rgba(242,237,231,0.1);
    padding:18px 0;
  }
  .article-meta strong{
    display:block; font-size:0.68rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:4px;
  }
  .hero-image{
    width:100%; aspect-ratio:6/6; background:var(--bg-card);
    border:1px solid rgba(242,237,231,0.08);
    display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden; margin:36px 0 8px;
  }
  .hero-image svg{width:100%; height:100%;}
  .hero-image img{width:100%; height:100%; object-fit:cover;}
  .image-note{
    font-family:'Space Mono', monospace; font-size:0.72rem; color:var(--ink-dim); margin-bottom:44px;
  }
  .article-body{padding-bottom:20px;}
  .article-body p{margin-bottom:20px; font-size:1.02rem; color:var(--ink);}
  .article-body p.lede{font-size:1.1rem; color:var(--ink);}
  .article-body h2{font-size:1.5rem; margin:44px 0 18px; color:var(--ink);}
  .article-body h2 .round-tag{
    display:inline-block; font-family:'Space Mono', monospace; font-size:0.7rem; color:var(--red);
    letter-spacing:2px; margin-right:12px; vertical-align:middle;
  }
  .stat-strip{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:2px; background:var(--rope); border:1px solid var(--rope); margin:34px 0;
  }
  .stat-box{background:var(--bg-card); padding:20px 22px;}
  .stat-box strong{
    display:block; font-family:'Space Mono', monospace; font-size:0.68rem; letter-spacing:2px;
    text-transform:uppercase; color:var(--gold); margin-bottom:8px;
  }
  .stat-box span{font-family:'Anton', sans-serif; font-size:1.3rem; text-transform:uppercase; color:var(--ink);}
  .mini-gallery{
    display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:40px 0 8px;
  }
  .mini-tile{
    aspect-ratio:1; background:var(--bg-card); border:1px solid rgba(242,237,231,0.06);
    display:flex; align-items:center; justify-content:center; overflow:hidden;
  }
  .mini-tile svg{width:40%; height:40%; opacity:0.55;}
  .mini-tile img{width:100%; height:100%; object-fit:cover;}
  @media (max-width:600px){.mini-gallery{grid-template-columns:repeat(2,1fr);}}
  .related{padding:70px 0 100px;}
  .related h3{font-size:1.4rem; margin-bottom:28px;}
  .related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--rope); border:1px solid var(--rope);}
  @media (max-width:640px){.related-grid{grid-template-columns:1fr;}}
  .related-card{background:var(--bg-card); padding:26px; transition:background 0.2s ease;}
  .related-card:hover{background:#241f1d;}
  .related-card .eyebrow{margin-bottom:10px;}
  .related-card h4{font-size:1.1rem; color:var(--ink); text-transform:none; font-family:'Work Sans',sans-serif; font-weight:600; letter-spacing:0;}
  .back-cta{
    margin-top:60px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  }