/*==============HEAD==============*/
.text-logo {
  font-family: "emily-austin", sans-serif, "bonhomme-richard", sans-serif, Helvetica, sans-serif;
  font-weight: 400;
  display: flex;
  justify-content: center;
  font-style: normal;
  /* Taille fluide : min 60px, idéal 16vw, max 230px */
  font-size: clamp(60px, 16vw, 230px);
  margin-top: clamp(20px, 4vh, 35px);
  white-space: nowrap;
  color: rgb(80, 29, 29);
}

/*==============MAIN==============*/
.profession {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  /* Taille fluide pour le sous-titre */
  font-size: clamp(24px, 5vw, 40px);
  color: rgb(66, 0, 0);
}

.Drapeau-fr {
  margin-left: 7px;
  margin-bottom: 7px;
  height: clamp(15px, 3vw, 25px); /* Drapeau adaptatif */
}

.links {
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Taille fluide pour les liens */
  font-size: clamp(20px, 4vw, 40px);
  color: rgb(66, 0, 0);
  text-align: center;
}

.links-button {
  cursor: pointer;
  transition: all 200ms ease;
  margin: 5px 0;
}

.links-button:hover {
  color: rgb(7, 0, 143);
  transform: scale(1.05);
}

.links-button:active {
  color: rgb(255, 25, 25);
  transform: scale(1.02);
  transition: none;
}

/*==============ART (Optimized)==============*/
.art_container {
  pointer-events: none;
}

.mountain_container {
  z-index: -100;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  opacity: 0.4;
}

.mountain_container img {
  width: 100%;
  max-width: 1800px; /* Évite que ça soit trop grand sur écrans géants */
  height: auto;
  display: block;
}

/* Animation Seamless CSS */
@keyframes scroll-clouds {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Déplace de la moitié (car contenu dupliqué) */
}

.clouds_container {
  position: fixed;
  bottom: clamp(50%, 60vh, 80%); /* Position adaptative */
  left: 0;
  display: flex;
  align-items: baseline;
  width: 200%; /* Largeur double pour contenir 2 sets d'images */
  animation: scroll-clouds 120s linear infinite;
  will-change: transform;
}

.clouds_container img {
  opacity: 0.2;
  width: 16.66%; /* 100% / 6 images */
  height: auto;
  padding: 0 2%; /* Espacement naturel */
}

/*==============FOOTER==============*/
footer {
  position: fixed;
  inset: auto 0 20px 0;
  padding-right: 3%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  /* Masque le footer sur les tout petits écrans en mode paysage si gênant */
}

.footer-content {
  color: rgb(154, 64, 64);
  font-size: clamp(16px, 2vw, 24px);
  text-align: right;
}

.mail-link:hover, .social-logo:hover {
  cursor: pointer;
  color: rgb(7, 0, 143);
  fill: rgb(7, 0, 143);
}

.social-logo {
  height: clamp(20px, 3vw, 30px);
  margin-right: 3px;
  fill: rgb(154, 64, 64);
  transition: 150ms;
}

/* ... (Le reste du CSS au dessus ne change pas) ... */

/* ============== MOBILE & TABLETTE (Portrait) ============== */
@media (max-width: 1024px) {
  
  /* 1. MONTAGNES : Centrage Absolu (Infaillible) */
  .mountain_container {
    /* On désactive le flexbox du PC qui gêne le centrage */
    display: block; 
    height: 80vh; /* Hauteur de la zone (80% de l'écran) */
    width: 100%;
  }

  .mountain_container img {
    height: 100%;       /* Remplit les 80vh */
    width: auto;        /* Largeur libre */
    max-width: none;    /* Enlève la limite */
    
    /* La technique du "Clou" pour centrer : */
    position: absolute;
    left: 50%;                  /* On place le bord gauche au milieu */
    bottom: 0;                  /* On colle au sol */
    transform: translateX(-50%); /* On recule de la moitié de l'image pour centrer pile-poil */
  }

  /* 2. NUAGES : Grossissement */
  .clouds_container {
    width: 600%; 
    bottom: 60%; 
  }

  /* 3. CLEAN UP */
  footer { display: none; }
  .text-logo { margin-top: 15vh; }
}