/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {

  color-scheme: light; /* Force le navigateur à ne pas inverser les couleurs et rester en mode light!! ou color-scheme: dark; */

  /* Base couleur */
  --noir-doux: #2C2C2C;

  --blanc-pur: #FFFFFF;
  --blanc-2: #FCFCFC;
  --blanc-doux: #F8F8F8;
  --ivoire: #FDF8F0;
  --sable-clair: #EDE4D7;
  --gris-perle: #E3E3E3;
  --gris-clair: #D0D0D0;
  --gris-neutre: #888888;

  --bleu-clair: #B3D4E0;
  --bleu-acier: #7A9FB9;
  --bleu-vif: #5DADE2;
  --bleu-gris: #5F8CA3;
  --bleu-ardoise-clair: #3b4250;
  --bleu-ardoise: #2a303b;
  --bleu-ardoise-fonce: #1f242e;

  --jaune-pale: #FFF3B0;
  --orange-clair: #ffae00;

}


/* Focus visible accessible pour tous les éléments interactifs */
   button:focus-visible,
   a:focus-visible,
   input:focus-visible,
   textarea:focus-visible,
   select:focus-visible,
   .hero .btn:focus-visible,
   .adhesion-banner:focus-visible,
   .social-icon:focus-visible,
   .nav summary:focus-visible,
   .reco summary:focus-visible,
   .bouton-fermer:focus-visible {
     outline: 3px solid var(--bleu-vif); /* couleur uniforme */
     outline-offset: 2px;                /* décale légèrement l’outline */
   }
   
   /* Transition douce pour tous les focus */
   button,
   a,
   input,
   textarea,
   select,
   .hero .btn,
   .adhesion-banner,
   .social-icon,
   .nav summary,
   .reco summary,
   .bouton-fermer {
     transition: outline 0.15s ease-in-out;
   }
   


/* Base */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


html {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  color: var(--noir-doux);  
}

body, html {
  width: 100%;
}
/* important pour pousser le footer en bas */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--blanc-doux);
}

main {
  flex: 1;
}

footer {
  margin-top: auto;
}



/* Titres globaux */
h1 {
  font-size: clamp(1.25rem, 1rem + 2.8vw, 3.2rem);
  line-height: 1.2;
  margin: 0;
}

h2 {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 1.3;
  margin: 0 0 clamp(0.9rem, 2vw, 1.25rem) 0;
}

h3 {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);   /* 18.4px → 24px → 24px */
  line-height: 1.35;
  margin: 0 0 clamp(0.6rem, 1.2vw, 0.9rem);
}


h4 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);  /* 16.8px → 20px → 20px */
  line-height: 1.4;
  margin: 0 0 clamp(0.5rem, 1vw, 0.7rem);
}

h5 {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);  /* 16.8px → 20px → 20px */
  line-height: 1.4;
  margin: 0 0 clamp(0.5rem, 1vw, 0.7rem);
}

p {
  margin: 0;
  font-size: clamp(0.8rem, 0.8rem + 0.3vw, 1rem);  
}

p, li, dd, summary {
  line-height: 1.6;
  font-weight: 550;
}

h1 { font-weight: 850; }
h2 { font-weight: 550; }
h3 { font-weight: 500; }
h4 { font-weight: 500; }
h5 { font-weight: 500; }



/* ==============================
   Listes de base : UL et OL
   ============================== */

ul, ol {
  margin: 0 0 1em 1.5em; /* marge autour des listes H D B G*/
  list-style-type: disc;      /* puces classiques */
  padding: 0;        
}

/* items de premier niveau */
ul > li, ol > li {
  margin: 0.5em 0;         /* espace entre les items principaux */
  line-height: 1.5;        /* lisibilité */
}

/* ==============================
   Sous-listes (niveau 2)
   ============================== */
   ul ul, ol ol {
    margin-left: 1.5em;      /* indentation supplémentaire */
    list-style-type: circle; /* puces secondaires */
  }
  
  ul ul > li, ol ol > li {
    margin: 0.3em 0;          /* moins d’espace que le premier niveau */
  }

/* ==============================
   Sous-sous-listes (niveau 3+)
   ============================== */
   ul ul ul, ol ol ol {
    margin-left: 1.5em;       /* nouvelle indentation */
    list-style-type: square;  /* puces tierces différentes */
  }
  
  ul ul ul > li, ol ol ol > li {
    margin: 0.2em 0;          /* encore un peu moins d’espace */
  }



  .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
/*//////////////////////////*/

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    background: var(--blanc-doux);
    gap: 0.5rem;
    max-width: min(100%, 80rem);
    margin-inline: auto;
  
  }
  
  /* SECTION TITLE */
  .title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }
  
  .logo {
    flex: 0 0 auto;
    width: 5rem;
  }
  
  .logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .site-name {
    font-size: 1.4rem;
    font-weight: bold;
    margin: 0;
    line-height: 1.1;
  }
  
  .slogan {
    font-size: 0.55rem;
  }
  
  .slogan .letter {
    color: #ff0000;
    display: inline-block;
    transform: scaleX(1.2);
    transform-origin: left;
    margin-right: 0.25em;
    font-weight: 600;
  }
  
  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bleu-ardoise-fonce);
    z-index: 1000;
  }
  .nav-menu.open {
    display: block;
  }
  
  .nav-menu a {
    color: var(--blanc-doux);
    text-decoration: none;
    display: block;
    padding: 0.5rem;
  }
  
  
  
  .menu-toggle {
    background: none;
    border: 1px solid var(--bleu-ardoise-fonce);
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
  }
  .burger {
    display: inline-block;
    width: 1.5rem;
    height: 0.15rem;
    background: var(--bleu-ardoise-fonce);
    position: relative;
  }
  .burger::before,
  .burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0.15rem;
    background: var(--bleu-ardoise-fonce);
  }
  .burger::before { top: -6px; }
  .burger::after { bottom: -6px; }
  
  
  
  
  /* Desktop - Menu sur une ligne sans hamburger */
  @media (min-width: 1025px) {
    .menu-toggle {
      display: none;
    }
    
    .nav-menu {
      display: flex !important;
      position: static;
      width: auto;
      background: transparent;
    }
    
    .nav-menu ul {
      display: flex;
      flex-direction: row;
      gap: 0.5rem;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav-menu a {
      color: var(--bleu-ardoise-fonce);
      padding: 0.5rem 0.75rem;
      white-space: nowrap;
    }
  }
  
  
  /*/// invite adhesion ///*/
  
  @keyframes heartbeat-glow {
    0%, 100% { 
    text-decoration-color: var(--orange-clair);
    }
    50% { 
    text-decoration-color: #ff5100;
    }
    }
    
    .adhesion-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0.5rem;
    text-decoration: underline;
    text-decoration-color: var(--orange-clair);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    color: var(--bleu-ardoise-fonce);
    animation: heartbeat-glow 5.5s infinite;
    flex-shrink: 0;
    background: var(--bleu-ardoise-fonce);
    }
    .adhesion-text {
    color: var(--blanc-doux);
    font-weight: 600;
    font-size: clamp(0.9rem, 2vw, 1.15rem);
    line-height: 1.4;
    text-align: center;
    width: 100%;
    }
    
    
    .adhesion-banner:hover {
    background-color: var(--orange-clair); /* Jaune soutenu à l’interaction */
    outline: none;
    }
    
    
  
  
  /*///////////////////////////////////////////--------------------------------*/
  /* Section Contact principale */
  .contact {
    width: 100%;
    padding: clamp(32px, 8vw, 80px) 20px;
    background-color: var(--bleu-ardoise);
    }
    
    /* Conteneur principal - Flex naturel */
    .contact-container {
    display: flex;
    gap: clamp(24px, 5vw, 40px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    flex-wrap: wrap; /* Passer en colonne quand l'espace manque */
    justify-content: center;
    align-items: center;
    }
    
    /* Colonne gauche - Infos */
    .contact-info {
    color: var(--blanc-pur);
    flex: 1 1 400px; /* prend la moitié s’il y a de la place, 100% sinon */
    }
    
    .contact-info h2 {
    margin-bottom: clamp(12px, 3vw, 16px);
    font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    }
    
    .contact-info p {
    margin-bottom: clamp(10px, 2.5vw, 12px);
    line-height: 1.6;
    font-size: clamp(0.95rem, 2.8vw, 1.05rem);
    }
    
    .contact-info ul {
    list-style: none;
    margin: clamp(12px, 3vw, 16px) 0;
    }
    
    .contact-info li {
    margin-bottom: clamp(10px, 2.5vw, 14px);
    line-height: 1.5;
    font-size: clamp(0.9rem, 2.6vw, 1rem);
    }
    
    
    /* Colonne droite - Formulaire */
    .contact-form {
    flex: 1 1 clamp(280px, 45%, 500px);
    background-color: var(--gris-perle);
    padding: clamp(24px, 6vw, 32px);
    border-radius: 12px;
    }
    
    .contact-form h3 {
    text-align: center;
    margin-bottom: clamp(16px, 4vw, 24px);
    font-size: clamp(1.3rem, 3.8vw, 1.5rem);
    }
    
    .contact-form input,
    .contact-form textarea {
    width: 100%;
    padding: clamp(10px, 2.8vw, 12px);
    margin-bottom: clamp(12px, 3.5vw, 16px);
    border: 1px solid var(--gris-clair);
    border-radius: 8px;
    font-size: clamp(0.95rem, 2.8vw, 1rem);
    }
    
    .contact-form input:focus,
    .contact-form textarea:focus {
    outline: none;
    border-color: var(--bleu-vif);
    }
    
    .contact-form button {
    width: 100%;
    padding: clamp(12px, 3vw, 14px);
    border: none;
    border-radius: 8px;
    background-color: var(--bleu-gris);
    color: var(--blanc-pur);
    font-size: clamp(1rem, 3vw, 1.05rem);
    font-weight: 600;
    cursor: pointer;
    }
    
    .contact-form button:hover {
    background-color: var(--bleu-ardoise-clair);
    }
    
    /*///////////////////////////////////////////--------------------------------*/
    
    /* Footer global - Fond sobre, texte clair, intégré au flux */
    footer {
    width: 100%;
    padding: clamp(20px, 4vw, 32px) 20px;
    background-color: var(--bleu-ardoise-fonce);
    font-size: clamp(0.8rem, 2.2vw, 0.9rem);
    text-align: center;
    }
    
    /* Conteneur centré, flexible, prêt à évoluer */
    .container-footer {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 3vw, 20px);
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    padding: 0;
    }
    
    .container-footer p {
    margin: 0;
    color: var(--blanc-pur);
    font-weight: 400;
    line-height: 1.5;
    }
    
    
    
    /* suivez nous Rs */
    /* Suivez-nous sur les réseaux sociaux */
    .social-wrapper {
    text-align: center;
    margin: 20px 0;
    }
    
    .social-wrapper h4 {
    margin-bottom: 15px;
    color: var(--blanc-doux);
    }
    
    .social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    }
    
    .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--bleu-clair);
    }
    
    .social-icon img {
    width: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);
    height: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);
    object-fit: contain;
    }
    
    
    
    /*//////////////////////////*/


    @keyframes fadeIn {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      .fleche-haut {
        position: sticky;
        top: 50vh;
        display: block;
        margin: 1px 0 0 auto;
        width: max-content;
      
        text-decoration: none;
        opacity: 0;
        transform: translateY(-10px);
        animation: fadeIn 0.6s ease-out 1.4s forwards;
        z-index: 1000;
      
        padding: 8px 12px;
        background: var(--bleu-acier);
        color: var(--blanc-pur);
        border-radius: 8px 0 0 8px;
      }
      
      /* Effet au survol (desktop) */
      .fleche-haut:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        background: var(--bleu-gris, var(--bleu-ardoise-fonce));
        border: 2px solid var(--bleu-clair);
      }
      
   

          /*//////////////////////////*/

          /*///////////////////////////////////////////--------------------------------*/

header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--blanc-doux);
  }
  
  /* HERO */
  .hero {
    padding-top: clamp(2rem, 0.557rem + 5.3691vw, 7rem);
  }
  
  .container-hero {
    width: 90%;
    max-width: clamp(40rem, 95vw, 120rem);
    margin: 0 auto;
    text-align: center;
  }
  
  .hero .btn {
    display: inline-block;
    padding: clamp(0.7rem, 2vw, 1rem) clamp(1.2rem, 3.5vw, 2rem);
    margin-top: 3rem;
    background-color: var(--bleu-acier);
    color: var(--blanc-doux);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.2rem);
    border-radius: 0.5rem;
  
    /* Bordure transparente pour réserver l'espace */
    border: 1px solid transparent;
  }
  
  .hero .btn:hover {
    background-color: var(--bleu-ardoise-clair);
    color: var(--blanc-doux);
  
    /* Border-color seulement, largeur déjà réservée */
    border-color: var(--blanc-doux);
  
    transform: translateY(-1px);
  }
  
  .hero,
  .quote {
    background-color: var(--bleu-gris);
    color: var(--blanc-doux);
    position: relative;
  }
  
  .quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    z-index: 0;
  }
  
  /* === Hero de base === */
  .hero {
    background: var(--bleu-gris, #334);
    color: var(--blanc-doux, #fff);
    padding: clamp(2rem, 5vw, 6rem) 0;
    text-align: center;
    position: relative;
  }
  
  .container-hero {
    width: 90%;
    max-width: clamp(40rem, 95vw, 120rem);
    margin: 0 auto;
  }
  
  .hero .btn {
    display: inline-block;
    padding: clamp(.7rem, 2vw, 1rem) clamp(1.2rem, 3.5vw, 2rem);
    margin-top: 3rem;
    background-color: var(--bleu-acier, #557);
    color: var(--blanc-doux, #fff);
    text-decoration: none;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.2rem);
    border-radius: .5rem;
    border: 1px solid transparent;
  }
  
  .hero .btn:hover {
    background-color: var(--bleu-ardoise-clair, #779);
    color: var(--blanc-doux, #fff);
    border-color: var(--blanc-doux, #fff);
    transform: translateY(-1px);
  }
  
  
  
  
  
  
  
  
  /*///////////////////////////////////////////--------------------------------*/
  /*border: 1px solid red;*/
  /* QUOTE */
  .quote {
    text-align: center;
    padding-top: 2rem;
    padding-bottom: clamp(2rem, 0.557rem + 5.3691vw, 7rem);
  }
  
  .quote h2 {
    font-size: clamp(1rem, 0.4228rem + 2.1477vw, 3rem);
    letter-spacing: clamp(0.12rem, 0.0681rem + 0.1933vw, 0.3rem);
    line-height: 1.6;
  }
  
  /*///////////////////////////////////////////--------------------------------*/
  
  .hero-dossier {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding-block: clamp(
       2rem,
       0.557rem + 5.3691vw,
       7rem
    ); /* haut bas, inline G & D*/
  }
  
  .couverture {
    overflow: hidden;
    justify-content: center; /* centre horizontalement */
    align-items: center; /* centre verticalement */
    /* Ombre  */
    box-shadow: 0px 10px 12px -3px rgba(0, 0, 0, 0.1);
    background-color: var(--blanc-pur);
  }
  
  .couverture img {
    max-width: 350px;
    height: auto;
  }
  
  .appel-association {
    min-width: 100px;
    width: 95%;
    max-width: 600px;
  
    /* Pour que le texte se replie naturellement */
    word-wrap: break-word; /* ancien nom, compatible */
    overflow-wrap: break-word; /* standard moderne */
    hyphens: auto; /* optionnel : ajoute des traits d’union si nécessaire */
    text-align: justify;
  }
  
  /* Popup overlay */
  .popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(
       from var(--bleu-ardoise-clair) r g b / 0.9
    ); /* pour la trensparence d'une variable) */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  .popup:target {
    display: flex;
  }
  
  /* Conteneur relatif pour positionner la croix */
  .popup-inner {
    position: relative;
  }
  
  .popup-inner img {
    max-width: 95vw; /* 80% de la largeur de la fenêtre */
    max-height: 95vh; /* 80% de la hauteur de la fenêtre */
  
    display: block;
  }
  
  /* Croix */
  .popup-inner .close {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 1.8rem;
    border-bottom: 2px solid red;
    padding: 0.2em 0.5em;
    text-decoration: none;
  }
  
  /*///////////////////////////////////////////--------------------------------*/
  
  /* FAQ RECO */
  .reco {
    width: 100%;
    background: var(--blanc-2);
    padding-top: clamp(2rem, 0.557rem + 5.3691vw, 7rem);
    padding-bottom: clamp(2rem, 0.557rem + 5.3691vw, 7rem);
    justify-content: center; /* centre les items sur la ligne */
  }
  
  .container {
    flex-wrap: wrap;
    width: 95%;
    max-width: 1600px;
    margin-inline: auto; /* centre la boîte */
  }
  
  
  
  /* ////////////////////////////////////////// -------------------------------*/
  /* Protection pour votre menu nav */
  
  
  /* Style uniquement pour les details de contenu */
  details:not(nav details):not(.nav) {
    background: white;
    border-radius: 6px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
  
  details:not(nav details):not(.nav) summary {
    padding: 1rem 1.25rem;
    cursor: pointer;
    font-weight: 500;
    position: relative;
    list-style: none;
    display: flex;
    align-items: center;
    padding-right: clamp(1.5rem, 4vw, 2.5rem);
    /* Padding à droite maintenant */
    transition: all 0.3s ease;
    min-height: 44px;
  }
  
  details:not(nav details):not(.nav) summary::-webkit-details-marker {
    display: none;
  }
  
  /* Point indicateur à DROITE */
  details:not(nav details):not(.nav) summary::before {
    content: '';
    position: absolute;
    right: clamp(1rem, 3vw, 1.25rem);
    /* À droite maintenant */
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--gris-neutre);
    border-radius: 50%;
    transition: background-color 0.3s ease;
  }
  
  details:not(nav details):not(.nav)[open] summary::before {
    background: #2ecc71;
  }
  
  /* Texte "Lire plus/moins" à GAUCHE */
  details:not(nav details):not(.nav) summary .action-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--gris-neutre);
    font-weight: 500;
    /* Plus de margin-left: auto */
  }
  
  details:not(nav details):not(.nav) summary .action-text::before {
    content: "Lire plus";
  }
  
  details:not(nav details):not(.nav)[open] summary .action-text::before {
    content: "Lire moins";
  }
  
  /* Signe + et - à GAUCHE aussi (après le texte) */
  details:not(nav details):not(.nav) summary .action-text::after {
    content: '+';
    font-size: 1.1rem;
    font-weight: 300;
    color: #2ecc71;
    transition: color 0.3s ease;
  }
  
  details:not(nav details):not(.nav)[open] summary .action-text::after {
    content: '−';
    color: #e74c3c;
  }
  
  /* Contenu garde son padding normal */
  .details-content {
    padding: 0 1.25rem 1rem;
    border-top: 1px solid #f0f0f0;
    color: #555;
  }
  
  .details-content p {
    margin-bottom: 0.875rem;
  }
  
  .details-content p:last-child {
    margin-bottom: 0;
  }
  
  .details-content ul {
    margin-bottom: 0.875rem;
    padding-left: 1.25rem;
  }
  
  .details-content li {
    margin-bottom: 0.375rem;
  }
  
  details:not(nav details):not(.nav)[open] .details-content {
    animation: fadeIn 0.3s ease;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  
  /*///////////////////////////////////////////--------------------------------*/
  
  /* Section de partage icones- Pleine largeur, sobre, fluide */
  .share-section {
    width: 100%;
    padding: clamp(32px, 6vw, 60px) 20px;
    text-align: center;
    background-color: var(--blanc-doux);
    border-top: 1px solid var(--blanc-pur);
    border-bottom: 1px solid var(--blanc-pur);
  }
  
  .share-section h2 {
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    margin-bottom: clamp(16px, 4vw, 24px);
  }
  
  .share-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }
  
  .share-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(1.25rem, 1.0336rem + 0.8054vw, 2rem);
    height: clamp(1.25rem, 1.0336rem + 0.8054vw, 2rem);
    border-radius: 6px;
    text-decoration: none;
  }
  
  .share-links a img {
    width: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);
    height: clamp(1rem, 0.9639rem + 0.1342vw, 1.125rem);
    filter: brightness(0); /* icône noire */
    opacity: 0.65;
  }
  
  .share-links a:hover {
    background-color: var(--ivoire); /* fond blanc */
    transform: translateY(-2px); /* léger déplacement vers le haut */
  }
  
  /*///////////////////////////////////////////--------------------------------*/
  /*///////////////////////////////////////////--------------------------------*/
  
  .hero-media {
    width: 100%;
    margin: 0 auto;
    background-color: #122129;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(0.5rem, 2vw, 1rem) 0; /* padding minimal */
  }
  
  .hero-media img {
    display: block;
    width: 80%; /* facile à modifier : 60%, 70%, 80%, 90%, 100% */
    height: auto; /* hauteur naturelle, pas de contrainte */
    object-fit: contain;
  }
  
  /*///////////////////////////////////////////--------------------------------*/
  /*///////////////////////////////////////////--------------------------------*/
  
  @keyframes fadeIn {
    to {
       opacity: 1;
       transform: translateY(0);
    }
  }
  
  .bouton-fermer {
    position: sticky;
    top: 60vh;
    display: block;
    margin: 1px 0 0 auto;
    width: max-content;
    text-decoration: none;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeIn 0.6s ease-out 1.4s forwards;
    z-index: 1000;
    padding: 8px 12px;
    background: var(--bleu-acier);
    color: var(--blanc-pur);
    border-radius: 8px 0 0 8px;
    border: none;
  }
  
  /* Effet au survol (desktop) */
  .bouton-fermer:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background: var(--bleu-gris, var(--bleu-ardoise-fonce));
    border: 2px solid var(--bleu-clair);
  }
  
  /* Effet au clic (pression) */
  .bouton-fermer:active {
    transform: translateY(-6px) scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Optionnel : curseur pour indiquer que c’est cliquable */
  .bouton-fermer:hover,
  .bouton-fermer:focus {
    cursor: pointer;
  }
  /*///////////////////////////////////////////--------------------------------*/
  /*///////////////////////////////////////////--------------------------------*/

  
  .header-top {
    max-width: min(100%, 80rem);
    margin-inline: auto;
  }
  
  
  
  .hero-pays {
    width: 100%;
    height: clamp(15rem, 6.1972rem + 37.5587vw, 40rem);
  
    position: relative;
    overflow: hidden;
  
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .drapeau {
    position: absolute;
    inset: 0;
  
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  
    z-index: 0;
  }
  
  .conteneur-hero-pays {
    width: calc(100% - 0.75rem);
    height: calc(100% - 0.75rem);
  
    position: relative;
  
    z-index: 1;
  }
  
  .video {
    width: 100%;
    height: 100%;
  
    object-fit: cover;
  }
  
  .hero-texte {
    position: absolute;
    inset: 0;
  
    z-index: 2;
  
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
    gap: clamp(0.5rem, 1vw, 1rem);
  
    padding: 1rem;
  
    text-align: center;
  }
  
  .hero-texte h2 {
    margin: 0;
  
    line-height: clamp(1.15, 1.6vw, 1.4);
  
    font-size: clamp(0.9rem, 2vw, 2.5rem);
  
    color: white;
  }
  
  .hero-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  
    height: clamp(1.2rem, 2vw, 3rem);
  
    padding-inline: clamp(0.4rem, 1vw, 1.5rem);
  
    font-size: clamp(0.55rem, 0.8vw, 1rem);
  
    border: 1px solid white;
  
    color: white;
    text-decoration: none;
  }
  
  
  .hero-bouton {
    display: none;
  }
  
  
  .video {
    display: block;
  }
  
  
  
  .hero-credit {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
  
    z-index: 3;
  
    display: flex;
    align-items: center;
    gap: 0.25rem;
  
    margin: 0;
  
    font-size: clamp(0.55rem, 0.7vw, 0.75rem);
  
    line-height: 1;
  
    color: rgba(255, 255, 255, 0.75);
  }
  
  .hero-credit a {
    color: inherit;
    text-decoration: none;
  }
  
  .hero-credit a:hover,
  .hero-credit a:focus-visible {
    text-decoration: underline;
  }


    /*///////////////////////////////////////////--------------------------------*/
      /*///////////////////////////////////////////--------------------------------*/
          /*///////////////////////////////////////////--------------------------------*/
      /*///////////////////////////////////////////--------------------------------*/

      .slider-cartes {
        width: 100%;
        overflow: visible;
        position: relative;
        z-index: 10;
        display: flex;
        justify-content: center;
        background: linear-gradient(to bottom, var(--bleu-ardoise-fonce) 66.67%, transparent 66.67%);
        padding-top: clamp(1rem, 0.2958rem + 3.0047vw, 3rem);  
    }
    
      .piste {
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        padding: 1rem;
      }
    
      .carte {
        display: flex;
        flex-direction: column;
        height: clamp(10rem, 7.5352rem + 10.5164vw, 17rem);
        aspect-ratio: 3/4;
        flex-shrink: 0;
        border: 6px solid #fff;
        border-radius: 3px;
        text-decoration: none;
        background: var(--blanc-doux);
        color: var(--bleu-ardoise-fonce);
        padding: 0.8rem;
        box-sizing: content-box;
        box-shadow: 0px 10px 12px -3px rgba(0, 0, 0, 0.1);
      }
    
    
      .carte h2 {
        font-size: clamp(0.72rem, 0.58rem + 0.55vw, 1rem);
        font-weight: 600;
        line-height: 1.3;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
    
      .carte p {
        font-size: clamp(0.72rem, 0.6rem + 0.45vw, 0.98rem);
        font-weight: 400;
        line-height: 1.5;
      }
    
      .clic-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: auto;
        padding: 0.55rem 0.75rem;
        font-size: clamp(0.72rem, 0.61rem + 0.4vw, 0.95rem);
        font-weight: 500;
        line-height: 1.2;
        letter-spacing: 0.02em;
        background: rgba(255, 255, 255, 0.08);
        color: var(--bleu-ardoise-fonce);
        border: 1px solid var(--bleu-ardoise-fonce);
        border-radius: 0.2rem;
      }
    
      .clic-icon:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
        transition: all 0.2s ease;
      }
    

          /*///////////////////////////////////////////--------------------------------*/
      /*///////////////////////////////////////////--------------------------------*/
          /*///////////////////////////////////////////--------------------------------*/
      /*///////////////////////////////////////////--------------------------------*/