/* ==========================================================
   CV & BOOK SPORTIF — CYRIL CRESPO
   Feuille de style unifiée et corrigée
   ========================================================== */

   :root {
    --black: #050505;
    --paper: #f0ece4;
    --muted: #9b968d;
    --gold: #c9a45a;
    --gold-light: #e0c17b;
    --line: rgba(201, 164, 90, 0.28);
    --max: 1240px;
  }
  
  /* 1. RÉINITIALISATION & FOND GLOBAL */
  * {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
    background: #000;
  }
  
  body {
    margin: 0;
    background-color: #000;
    background-image: url("../images/wallpaper.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--paper);
    font-family: Inter, Arial, sans-serif;
    overflow-x: hidden;
  }
  
  img {
    display: block;
    max-width: 100%;
  }

  /* Cadre photo fin — signature noir & or */
  .year-photo img,
  .journey-photo img,
  .palmares-photo img,
  .book-photo img {
    box-sizing: border-box;
    border: 1px solid rgba(201, 164, 90, 0.72);
  }
  
  a {
    color: inherit;
  }
  
  /* 2. HEADER SUPÉRIEUR (OPAQUE & FIXE) */
  .site-header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    padding: 0 42px;
    display: flex;
    align-items: center;
    gap: 35px;
    background: #000;
  }
  
  .brand {
    min-width: 205px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: default;
  }
  
  .brand strong {
    font: 600 23px/1 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.12em;
    color: var(--gold-light);
  }
  
  .brand span {
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #a29c91;
  }
  
  .main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    gap: 28px;
  }
  
  .main-nav a,
  .portal-link {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-decoration: none;
    color: #aaa59c;
    transition: color 0.2s;
  }
  
  .main-nav a:hover,
  .main-nav a.active,
  .portal-link:hover {
    color: var(--gold-light);
  }
  
  .portal-link {
    white-space: nowrap;
  }
  
  .menu-toggle {
    display: none;
    border: 0;
    background: transparent;
    padding: 8px;
    margin-left: auto;
    cursor: pointer;
  }
  
  .menu-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
  }
  
  .menu-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    background: var(--gold);
    margin: 5px 0;
  }
  
  /* 3. HERO SECTION (LAYOUT SÉPARÉ SANS EMPIÈTEMENT) */
  .hero {
    position: relative;
    min-height: 760px;
    height: 100svh;
    overflow: hidden;
    background: transparent;
  }
  
  /* La zone d'image est restreinte aux 50% de droite sur grand écran */
  .hero-image-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 50%;
    overflow: hidden;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }
  
  .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    filter: saturate(0.85) contrast(1.08);
    opacity: 0;
    transition: opacity 1.15s ease;
    will-change: opacity;
    background: transparent;
  }
  
  .hero-image.active {
    opacity: 1;
  }
  
  /* Le contenu texte passe au-dessus et reste cantonné à gauche */
  .hero-content {
    position: absolute;
    z-index: 2;
    left: max(55px, calc((100vw - var(--max)) / 2 - 20px));
    top: 50%;
    transform: translateY(-50%);
    width: min(500px, 45vw);
    background: transparent;
  }
  
  .kicker {
    margin: 0;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0.24em;
    line-height: 1.6;
  }
  
  .hero h1 {
    margin: 30px 0 22px;
    font: 500 clamp(80px, 8.5vw, 150px) / 0.72 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.015em;
    white-space: nowrap;
  }
  
  .hero h1 span {
    color: var(--gold-light);
    display: inline-block;
  }
  
  .hero-rule {
    width: 76px;
    height: 1px;
    background: var(--gold);
    margin: 0 0 25px;
  }
  
  .hero-intro {
    max-width: 420px;
    margin: 0;
    color: #c2bdb3;
    font: 400 20px / 1.38 "Cormorant Garamond", Georgia, serif;
  }
  
  .hero-actions {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 34px;
  }
  
  .button {
    display: inline-flex;
    align-items: center;
    gap: 25px;
    min-height: 48px;
    padding: 0 20px;
    text-decoration: none;
    font-size: 10px;
    letter-spacing: 0.16em;
  }
  
  .button-gold {
    background: var(--gold);
    color: #080808;
  }
  
  .button-gold span {
    font-size: 18px;
  }
  
  .text-button {
    font-size: 10px;
    letter-spacing: 0.16em;
    color: #ddd6c9;
    text-decoration: none;
  }
  
  .text-button span {
    color: var(--gold);
    font-size: 16px;
    margin-left: 8px;
  }
  
  .hero-meta {
    position: absolute;
    z-index: 2;
    right: 42px;
    bottom: 46px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #c1b8a6;
    font-size: 11px;
    letter-spacing: 0.22em;
  }
  
  .hero-meta i {
    width: 42px;
    height: 1px;
    background: var(--gold);
  }
  
  .hero-scroll {
    position: absolute;
    z-index: 2;
    left: max(55px, calc((100vw - var(--max)) / 2 - 20px));
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: #a7a197;
    font-size: 9px;
    letter-spacing: 0.2em;
  }
  
  .hero-scroll b {
    font-size: 19px;
    font-weight: 400;
    color: var(--gold);
  }
  
  /* 4. SECTIONS GLOBALES & EN-TÊTES UNIFIÉS */
  main {
    background: transparent;
  }
  
  .section {
    width: min(var(--max), calc(100% - 84px));
    margin: 0 auto;
    padding: 125px 0;
    background: transparent;
  }
  
  .section-heading {
    width: 100%;
    display: grid;
    grid-template-columns: max-content max-content minmax(50px, 1fr);
    column-gap: clamp(18px, 1.8vw, 32px);
    align-items: center;
    margin-bottom: clamp(55px, 5vw, 76px);
  }
  
  .section-heading::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: var(--line);
  }
  
  .section-number {
    color: var(--gold);
    font: 600 clamp(15px, 1.15vw, 20px) / 1 "Cormorant Garamond", serif;
    white-space: nowrap;
  }
  
  .section-label {
    font-size: clamp(10px, 0.82vw, 13px);
    line-height: 1;
    letter-spacing: 0.22em;
    color: #8d877e;
    white-space: nowrap;
  }
  
  .line-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    text-decoration: none;
    color: var(--gold-light);
    font-size: 10px;
    letter-spacing: 0.16em;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
  }
  
  .line-link span {
    font-size: 17px;
  }
  
  /* 5. SECTION 01 — IDENTITÉ */
  .profile {
    padding-top: 145px;
  }
  
  .profile-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 100px;
    align-items: start;
  }
  
  .profile-statement h2,
  .journey-title h2,
  .book-head h2,
  .palmares-title h2 {
    margin: 0 0 35px;
    font: 500 clamp(58px, 6.2vw, 90px) / 0.82 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.035em;
  }
  
  .profile-statement h2 em,
  .journey-title h2 em,
  .book-head h2 em,
  .palmares-title h2 em,
  .final-nav h2 em {
    font-style: normal;
    color: var(--gold-light);
  }
  
  .profile-statement .lead {
    font: 500 28px / 1.24 "Cormorant Garamond", Georgia, serif;
    color: #ddd6ca;
    max-width: 700px;
    margin: 0 0 25px;
  }
  
  .profile-statement p:not(.lead) {
    font: 400 17px / 1.7 Inter, Arial, sans-serif;
    color: var(--muted);
    max-width: 680px;
    margin: 0 0 32px;
  }
  
  .stats {
    border-top: 1px solid var(--line);
  }
  
  .stat {
    display: grid;
    grid-template-columns: 125px 1fr;
    gap: 20px;
    align-items: center;
    padding: 23px 0;
    border-bottom: 1px solid rgba(201, 164, 90, 0.16);
  }
  
  .stat strong {
    font: 500 38px / 1 "Cormorant Garamond", serif;
    color: var(--gold-light);
  }
  
  .stat span {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: #918b82;
    line-height: 1.5;
  }
  
  /* 6. SECTION 02 — ANNÉE MAJEURE (2026) */
  .year-2026 {
    width: min(1320px, calc(100% - 84px));
    padding-top: 100px;
  }
  
  .year-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 390px);
    gap: clamp(40px, 8vw, 120px);
    align-items: end;
  }
  
  .year-title-row > p {
    font: 400 20px / 1.45 "Cormorant Garamond", serif;
    color: #aaa49a;
    margin: 0 0 clamp(18px, 2vw, 30px);
    max-width: 390px;
  }
  
  .year-main-title {
    display: block;
    margin: clamp(48px, 4.5vw, 68px) 0 55px;
    font: 500 clamp(100px, 12vw, 170px) / 0.65 "Cormorant Garamond", serif;
    color: var(--gold-light);
    letter-spacing: 0.03em;
  }
  
  .year-story {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.55fr);
    gap: clamp(3rem, 8vw, 9rem);
    align-items: end;
    margin: 0 0 52px;
  }
  
  .year-story-copy h3 {
    margin: 0.35rem 0 1.5rem;
    font: 500 clamp(42px, 4.5vw, 70px) / 0.92 "Cormorant Garamond", Georgia, serif;
    letter-spacing: 0.01em;
  }
  
  .year-story-copy h3 em {
    font-style: normal;
    color: var(--gold-light);
  }
  
  .year-story-copy p:not(.eyebrow) {
    max-width: 700px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
    margin: 0 0 20px;
  }
  
  .year-highlight {
    border-left: 1px solid var(--line);
    padding-left: 30px;
    display: grid;
    grid-template-columns: 65px 1fr;
    column-gap: 15px;
    row-gap: 10px;
    align-items: baseline;
  }
  
  .year-highlight > span {
    grid-column: 1 / -1;
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.22em;
    margin-bottom: 7px;
  }
  
  .year-highlight strong {
    font: 500 34px / 1 "Cormorant Garamond", serif;
    color: var(--gold-light);
  }
  
  .year-highlight b {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: #c7c0b4;
    font-weight: 500;
  }
  
  .year-gallery {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    min-height: 580px;
    gap: 12px;
  }
  
  .year-photo {
    display: block;
    position: relative;
    overflow: hidden;
    background: #090909;
  }
  
  .year-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
  }
  
  .year-photo:hover img {
    transform: scale(1.025);
  }
  
  .year-photo-main img {
    object-position: center 45%;
  }
  
  /* 7. SECTION 03 — PARCOURS */
  .journey {
    padding-bottom: 145px;
  }
  
  .journey-intro {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(3rem, 9vw, 10rem);
    align-items: end;
    margin-bottom: 52px;
  }
  
  .journey-title p {
    max-width: 420px;
    color: var(--muted);
    font: 400 20px / 1.45 "Cormorant Garamond", serif;
    margin: 0 0 30px;
  }
  
  .journey-copy p {
    max-width: 650px;
    margin: 0;
    color: var(--muted);
    font: 400 20px / 1.5 "Cormorant Garamond", Georgia, serif;
  }
  
  .journey-gallery {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    gap: 12px;
    width: 100%;
    height: 580px;
    overflow: hidden;
  }
  
  .journey-photo {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #090909;
  }
  
  .journey-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, filter 0.4s ease;
  }
  
  .journey-photo:hover img {
    transform: scale(1.025);
  }
  
  .journey-caption {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    gap: 12px;
    margin-top: 13px;
  }
  
  .journey-caption span {
    color: var(--gold);
    font-size: 10px;
    letter-spacing: 0.2em;
  }
  
  /* 8. SECTION 04 — PALMARÈS */
  .palmares-preview {
    padding-top: 115px;
    padding-bottom: 145px;
  }
  
  .palmares-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: clamp(55px, 8vw, 130px);
    align-items: start;
    margin-bottom: 65px;
  }
  
  .palmares-title p {
    max-width: 480px;
    margin: 0 0 30px;
    color: var(--muted);
    font: 400 20px / 1.5 "Cormorant Garamond", Georgia, serif;
  }
  
  .palmares-list {
    border-top: 1px solid var(--line);
  }
  
  .palmares-year {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 25px;
    padding: 25px 0;
    border-bottom: 1px solid rgba(201, 164, 90, 0.17);
  }
  
  .palmares-year-label {
    color: var(--gold-light);
    font: 500 28px / 1 "Cormorant Garamond", Georgia, serif;
  }
  
  .palmares-year strong {
    display: block;
    color: #ddd6ca;
    font: 500 19px / 1.25 "Cormorant Garamond", Georgia, serif;
  }
  
  .palmares-year p {
    margin: 6px 0 0;
    color: #817c73;
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.09em;
  }
  
  .palmares-year-featured {
    padding-bottom: 29px;
  }
  
  .palmares-year-featured strong:not(:first-child) {
    margin-top: 17px;
  }
  
  .palmares-gallery {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    gap: 12px;
    height: 580px;
    width: 100%;
  }
  
  .palmares-photo {
    display: block;
    position: relative;
    overflow: hidden;
    background: #090909;
  }
  
  .palmares-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, filter 0.4s ease;
  }
  
  .palmares-photo:hover img {
    transform: scale(1.025);
    filter: saturate(0.82);
  }
  
  .palmares-photo-wide img {
    object-position: center 48%;
  }
  
  /* 9. SECTION 05 — BOOK SPORTIF */
  .book-preview {
    padding-bottom: 155px;
  }
  
  .book-head {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 100px;
    align-items: end;
    margin-bottom: 60px;
  }
  
  .book-head p {
    font: 400 20px / 1.45 "Cormorant Garamond", serif;
    color: var(--muted);
    margin: 0 0 30px;
  }
  
  .book-gallery {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 0.8fr;
    gap: 12px;
    height: 570px;
  }
  
  .book-photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: #111;
  }
  
  .book-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease, filter 0.4s ease;
  }
  
  .book-photo-large img {
    object-position: center 45%;
  }
  
  .book-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), transparent 55%);
  }
  
  .book-photo:hover img {
    transform: scale(1.04);
    filter: saturate(0.8);
  }
  
  .book-photo span {
    position: absolute;
    z-index: 2;
    left: 22px;
    bottom: 20px;
    color: #e7dfd2;
    font-size: 10px;
    letter-spacing: 0.2em;
  }
  
  /* 10. NAVIGATION FINALE & FOOTER */
  .final-nav {
    border-top: 1px solid var(--line);
    background: rgba(5, 5, 5, 0.85);
    padding: 120px 42px;
  }
  
  .final-inner {
    width: min(var(--max), 100%);
    margin: auto;
  }
  
  .final-nav h2 {
    font: 500 clamp(65px, 8vw, 115px) / 0.75 "Cormorant Garamond", serif;
    letter-spacing: 0.035em;
    margin: 28px 0 75px;
  }
  
  .final-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgba(201, 164, 90, 0.18);
  }
  
  .final-links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 21px 0;
    margin-right: 45px;
    border-bottom: 1px solid rgba(201, 164, 90, 0.18);
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: #c7c0b5;
  }
  
  .final-links a:hover {
    color: var(--gold-light);
  }
  
  .final-links span {
    color: var(--gold);
    font-size: 17px;
  }
  
  footer {
    min-height: 68px;
    padding: 22px 42px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(201, 164, 90, 0.14);
    background: #000;
    color: #6f6b65;
    gap: 20px;
  }
  
  footer strong {
    font: 600 17px "Cormorant Garamond", serif;
    letter-spacing: 0.1em;
    color: var(--gold);
  }
  
  footer span,
  footer a {
    font-size: 9px;
    letter-spacing: 0.16em;
    color: #6f6b65;
    text-decoration: none;
  }
  
  /* 11. MEDIA QUERIES (TABLETTE & LAPTOP) */
  @media (max-width: 1050px) {
    .site-header {
      padding: 0 25px;
    }
    .brand {
      min-width: 180px;
    }
    .main-nav {
      gap: 16px;
    }
    .hero-content {
      left: 45px;
      width: 420px;
    }
    .section {
      width: calc(100% - 60px);
    }
    .profile-grid,
    .journey-intro,
    .palmares-intro,
    .book-head {
      gap: 50px;
    }
    .year-title-row {
      gap: 50px;
    }
    .year-story {
      gap: 3rem;
    }
    .palmares-gallery,
    .year-gallery {
      grid-template-columns: 1.25fr 0.65fr;
      height: 500px;
    }
  }
  
  /* 12. MEDIA QUERIES (MOBILE) */
  @media (max-width: 800px) {
    body {
      background-attachment: scroll;
      background-position: center top;
    }
  
    .site-header {
      height: 68px;
      padding: 0 18px;
    }
    .brand strong {
      font-size: 20px;
    }
    .brand span {
      font-size: 8px;
    }
    
    .main-nav {
      display: none;
      position: absolute;
      top: 68px;
      left: 0;
      right: 0;
      background: rgba(5, 5, 5, 0.98);
      padding: 8px 18px;
      flex-direction: column;
      gap: 0;
      border-top: 1px solid rgba(201, 164, 90, 0.2);
    }
    .site-header.open .main-nav {
      display: flex;
    }
    .main-nav a {
      padding: 15px 3px;
      border-bottom: 1px solid rgba(201, 164, 90, 0.12);
    }
    
    .portal-link {
      display: none;
    }
    .menu-toggle {
      display: block;
    }
  
    .hero {
      height: 100svh;
      min-height: 700px;
    }
    
    /* Sur mobile, l'image couvre le fond tout en restant en transparence légère */
    .hero-image-wrap {
      width: 100%;
      inset: 0;
      opacity: 0.35;
    }
  
    .hero-content {
      width: auto;
      left: 24px;
      right: 24px;
      top: auto;
      bottom: 105px;
      transform: none;
    }
  
    .hero h1 {
      font-size: clamp(65px, 18vw, 100px);
      white-space: normal;
    }
  
    .section {
      width: calc(100% - 40px);
      padding: 85px 0;
    }
    
    .section-heading {
      grid-template-columns: max-content max-content minmax(24px, 1fr);
      column-gap: 14px;
      margin-bottom: 40px;
    }
    .section-number {
      font-size: 14px;
    }
    .section-label {
      font-size: 9px;
      letter-spacing: 0.17em;
    }
  
    .profile-grid,
    .journey-intro,
    .palmares-intro,
    .book-head {
      display: block;
    }
  
    .profile-statement h2,
    .journey-title h2,
    .book-head h2,
    .palmares-title h2 {
      font-size: 56px;
      margin-bottom: 30px;
    }
  
    .stats {
      margin-top: 55px;
    }
    .stat {
      grid-template-columns: 105px 1fr;
    }
    .stat strong {
      font-size: 31px;
    }
  
    .year-head {
      grid-template-columns: max-content max-content minmax(24px, 1fr);
      column-gap: 14px;
    }
    .year-title-row {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .year-title-row > p {
      margin: -15px 0 38px;
      max-width: 520px;
    }
    .year-main-title {
      font-size: 105px;
      margin-top: 42px;
      margin-bottom: 38px;
    }
    .year-story {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }
    .year-highlight {
      border-left: 0;
      border-top: 1px solid var(--line);
      padding: 25px 0 0;
    }
  
    .year-gallery,
    .journey-gallery,
    .palmares-gallery {
      display: block;
      height: auto;
      min-height: 0;
    }
    
    .year-photo,
    .journey-photo,
    .palmares-photo {
      height: 70vw;
      min-height: 300px;
      max-height: 520px;
      margin-bottom: 12px;
    }
    
    .journey-caption {
      display: none;
    }
  
    .book-gallery {
      height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 340px 260px;
    }
    .book-photo-large {
      grid-column: 1 / -1;
    }
  
    .final-nav {
      padding: 85px 20px;
    }
    .final-nav h2 {
      font-size: 60px;
      margin: 25px 0 55px;
    }
    .final-links {
      grid-template-columns: 1fr;
    }
    .final-links a {
      margin-right: 0;
    }
  
    footer {
      padding: 18px 20px;
      flex-wrap: wrap;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    * {
      scroll-behavior: auto !important;
      transition: none !important;
    }
  }