:root{
    --bg:#c4b8a8;          /* Couleur de fond */
    --fg:#42200A;          /* Texte principal */
    --muted:#42200A;       /* Texte secondaire */
    --accent:#42200A;      /* Couleur d'accent */
    --line:#1f2540;        /* Ligne verticale */
    --dot:#dfe4ff;         /* Couleur des points */
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
margin:0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: radial-gradient(100vw 100vh at 50% 30%, #B8A07F 0%, var(--bg) 60%);
background-attachment: fixed;
color:var(--fg);
}
  
  /* --- Layout principal --- */
.wrap{
  position:relative;
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding:6vh 24px;
}
  
  /* --- Section Intro (SVG) --- */
  .intro-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    z-index: 10;
  }
  
  .intro-section.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  .stage{ 
    display: grid; 
    place-items: center; 
    width: 100%; 
  }
  
  .zoom{ 
    transform: scale(0.7) translateY(10%); 
    transform-origin: 48.3% 20%; 
    animation: intro-zoom 1200ms cubic-bezier(0.22,1,0.36,1) both; 
    animation-delay: 1500ms; 
    will-change: transform; 
  }
  
  /* === Styles de base pour le SVG === */
  .zoom svg {
    width: 100%;
    height: auto;
    max-width: 90vw;
    max-height: 80vh;
    display: block;
  }
  
  @keyframes intro-zoom{ 
    0%{ transform: scale(0.7) translateY(10%) } 
    100%{ transform: scale(6) translateY(1%) } 
  }
  
  /* === Responsive pour mobile === */
@media (max-width: 768px) {
  body {
    background: radial-gradient(100vw 100vh at 50% 30%, #B8A07F 0%, var(--bg) 60%);
    background-attachment: fixed;
  }
  
  .wrap {
    min-height: 100vh;
    max-height: 120vh;
  }
  
  .zoom {
    transform: scale(0.4);
    transform-origin: center center;
    animation: intro-zoom-mobile 1s ease-out forwards;
    animation-delay: 1000ms;
  }
  
  .zoom svg {
    max-width: 95vw;
    max-height: 75vh;
  }
}
  
  @media (max-width: 480px) {
    .zoom {
      transform: scale(1.4) translateY(0%); 
      transform-origin: 48.2% 20%;
      animation: intro-zoom-mobile 0.8s ease-out forwards; 
      animation-delay: 1000ms; 
      will-change: transform; 
    }
    
    .zoom svg {
      max-width: 90vw;
      max-height: 70vh;
    }
  }
  
  @keyframes intro-zoom-mobile {
    0% { 
      transform: scale(1.4);
    }
    100% { 
      transform: scale(8);
    }
  }
  
  /* === Classes appliquées par JavaScript (compatible Safari) === */
  .zoom-mobile {
    transform: scale(0.7) !important;
    transform-origin: center center !important;
    animation: intro-zoom-mobile 0.8s ease-out forwards !important;
    animation-delay: 3300ms !important;
  }
  
  .zoom-tablet {
    transform: scale(0.4) !important;
    transform-origin: center center !important;
    animation: intro-zoom-mobile 1s ease-out forwards !important;
    animation-delay: 1000ms !important;
  }
  
  @media (prefers-reduced-motion: reduce){ .zoom{ animation:none; transform:none } }
  
  .svg-full{ 
    width: min(88vmin, 92vw); 
    height: auto; 
    display: block; 
  }
  
  /* === Optimisations SVG pour mobile === */
  @media (max-width: 768px) {
    .svg-full {
      width: min(95vw, 85vmin);
      max-height: 80vh;
    }
    
    svg {
      shape-rendering: geometricPrecision;
      text-rendering: optimizeLegibility;
    }
  }
  
  @media (max-width: 480px) {
    .svg-full {
      width: 90vw;
      max-height: 75vh;
    }
    
    svg {
      shape-rendering: crispEdges;
    }
  }
  
  /* --- Section Navigation --- */
  .nav-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 5;
  }
  
  .nav-section.visible {
    opacity: 1;
    pointer-events: auto;
  }
  
  /* Ligne verticale centrée */
  .line{
    position:absolute;
    left:50%;
    top:10vh;
    height:80vh;
    transform:translateX(-50%);
    width:2px;
    background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
    pointer-events:none;
  }
  
  /* Liste des items alignés sur la ligne */
  .items{
    position:absolute;
    left:50%;
    top:15vh;
    bottom:15vh;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:0;
    width:min(860px, 92vw);
    list-style:none;
    padding:0; margin:0;
  }
  
  .item{
    position:relative;
    display:flex;
    align-items:center;
    min-height:56px;
  }
  
  /* Les éléments pairs (2ème, 4ème, etc.) sont à gauche */
  .item:nth-child(even) .label{
    margin-left: auto;
    margin-right: calc(50% + 24px);
    flex-direction: row-reverse;
  }
  
  /* Les éléments impairs (1er, 3ème, etc.) restent à droite */
  .item:nth-child(odd) .label{
    margin-left: calc(50% + 24px);
    margin-right: auto;
  }
  
  /* Le point est posé pile sur la ligne */
  .dot{
    position:absolute;
    left:50%;
    transform:translate(-50%, 0);
    width:16px; height:16px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 35%, var(--dot), #42200A 60%, #42200A);
    box-shadow: 0 0 0 4px rgba(124,92,255,0.15), 0 8px 18px rgba(0,0,0,0.35);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  
  /* Le libellé à droite de la ligne (par défaut pour les éléments impairs) */
  .label{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.6rem;
    padding:.55rem .85rem;
    border-radius:12px;
    text-decoration:none;
    color:var(--fg);
    font-size:clamp(1rem, 0.9rem + 0.5vw, 1.35rem);
    font-weight:600;
    letter-spacing:.2px;
    transition: filter .2s ease, transform .2s ease, background-color .2s ease;
    outline: none;
  }
  
  .label::after{
    content:"";
    width:10px; height:10px;
    border-right:2px solid var(--muted);
    border-top:2px solid var(--muted);
    transform:rotate(45deg);
    opacity:.7;
  }
  
  /* Pour les éléments pairs, inverser la flèche */
  .item:nth-child(even) .label::after{
    transform:rotate(-135deg);
  }
  
  /* Hover / focus */
  .label:hover, .label:focus-visible{
    background-color: rgba(0, 0, 0, 0.14);
    filter: drop-shadow(0 10px 18px rgba(124,92,255,0.18));
  }
  
  .item:hover .dot, .label:focus-visible + .dot{
    transform:translate(-50%, 0) scale(1.1);
    box-shadow: 0 0 0 6px rgba(124,92,255,0.22), 0 14px 28px rgba(0,0,0,0.45);
    filter: saturate(1.2);
  }
  
  /* Titre et sous-titre */
  header{
    position:absolute;
    top:32px; left:50%; transform:translateX(-50%);
    text-align:center;
    width:min(900px, 92vw);
  }
  
  h1{
    margin:0 0 .35rem 0;
    font-size:clamp(1.4rem, 1rem + 1.8vw, 2.4rem);
    letter-spacing:.3px;
  }
  
  p.lead{
    margin:.25rem 0 0 0;
    color:var(--muted);
    font-size:clamp(.95rem, .9rem + .4vw, 1.15rem);
  }
  
  /* Mobile: si très étroit, on rapproche encore le label de la ligne */
  @media (max-width: 520px){
    .item:nth-child(odd) .label{ margin-left: calc(50% + 16px); }
    .item:nth-child(even) .label{ margin-right: calc(50% + 16px); }
  }
  
  /* Responsive pour la section left-content */
  @media (max-width: 768px) {

    .left-content {
      position: absolute;
      top: 15vh;
      width:100% !important;
      left: 0;
      width: 100%;
      height: 50% !important;
      padding: 0 20px;
      margin-bottom: 20px;
      z-index: 5; /* Au-dessus du menu */
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
    
    .left-content.visible {
      opacity: 1;
    }
    
    /* Nouveau style pour content-wrapper en mode mobile */
    .content-wrapper {
      display: flex;
      align-items: center;
      gap: 20px;
      max-width: 100%;
    }
    
    .photo-container {
      flex-shrink: 0;
      max-width: 120px !important;
      margin: 0;
    }
    
    .text-container {
      flex: 1;
      text-align: left !important;
    }
    
    .text-container h2 {
      font-size: clamp(1rem, 0.9rem + 0.8vw, 1.4rem);
      margin-bottom: 10px;
    }
    
    .text-container p {
      font-size: clamp(0.8rem, 0.7rem + 0.3vw, 0.95rem);
      margin-bottom: 8px !important;  
      line-height: 1.4 !important;
    }
    
    /* Animation pour le menu qui se déplace vers le bas sur mobile */
    .nav-section {
      transition: transform 0.8s ease-out;
      position: absolute;
      top: 50px !important;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 4; /* Sous le left-content */
    }
    
    .nav-section.visible {
      animation: slideDown 0.8s ease-out 0.8s forwards;
    }
    
    /* Ajustements pour la ligne et les items sur mobile */
    .line {
      height: 70vh;
      top: 15vh;
    }
    
    .items {
      top: 20vh;
      bottom: 20vh;
    }
  }
  
  /* --- Animation d'apparition des items --- */
  .item {
    opacity: 0;
    animation: fadeInItem 0.6s ease-out forwards;
  }
  
  .item:nth-child(1) { animation-delay: 1.0s; }
  .item:nth-child(2) { animation-delay: 1.2s; }
  .item:nth-child(3) { animation-delay: 1.4s; }
  .item:nth-child(4) { animation-delay: 1.6s; }
  .item:nth-child(5) { animation-delay: 1.8s; }
  
  /* --- Section Photo et Texte à gauche --- */
  .left-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    opacity: 0;
    z-index: 4;
    transition: opacity 1s ease-in-out;
  }
  
  .left-content.visible {
    opacity: 1;
    pointer-events: auto;
  }
  
  .photo-container {
    margin-bottom: 30px;
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    border-radius: 12px;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.2); */
  }
  
  .profile-photo {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
  }
  
  .profile-photo:hover {
    transform: scale(1.05);
  }
  
  .text-container {
    text-align: center;
    max-width: 600px;
  }
  
  .text-container h2 {
    margin: 0 0 15px 0;
    font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem);
    color: var(--fg);
  }
  
  .text-container p {
    margin: 0;
    font-size: clamp(0.9rem, 0.8rem + 0.3vw, 1.1rem);
    line-height: 1.5;
    color: var(--muted);
  }
  
  /* --- Animation de déplacement du menu vers la droite (seulement sur desktop) --- */
  @media (min-width: 769px) {
    .nav-section.visible {
      animation: slideRight 0.8s ease-out 0.8s forwards;
    }
    .photo-container {
    margin-left: 95px;
  }
    body{
overflow:hidden;
}
  
  }
  
  @keyframes fadeInItem {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes slideRight {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(300px);
    }
  }
  
  @keyframes fadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideDown {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(30vh);
    }
  }
  
  /* Respecte le système "réduire les animations" */
  @media (prefers-reduced-motion: reduce){
    .dot, .label, .profile-photo { transition:none; }
    .intro-section, .nav-section, .left-content { transition: none; animation: none; }
    .item { animation: none; opacity: 1; }
  }