/* ============================
   POLICES ET RÉGLAGES GÉNÉRAUX
============================ */
:root {
  --header-position: 101%;
  --footer-position: 102%;
  --header-font-size: clamp(2rem, 5%, 2rem);
  --footer-font-size: clamp(2rem, 5%, 3rem);
  --card-text-color: white;
  --card-font-footer-family: Seeds, sans-serif;
  --card-font-header-family: Arial,"sans-serif";
}

@font-face {
  font-family: 'Seeds';
  src: url('./assets/SEEDS.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Mori, sans-serif;
  background: #111;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* ============================
   HEADER ET FOOTER FLEXBOX
============================ */
.flexbox-header {
  
  background-image: url("./assets/incub.png");
  background-repeat: no-repeat ;
  background-position: 50% 50% ;
  background-size: contain ;
  color: white;
  text-align: center;
  position: relative;
  overflow: visible;
  flex-shrink: 0;  
  height: 8EM;
  max-width: 100%;
}

.flexbox-header::before {
  content: '';
  top: -41%;                                             /* 👈 AJOUTER */
  left: 0;  
  position: absolute;                                           /* 👈 Position précise */
  width: 100%;                                        /* 👈 Largeur du parent seulement */
  height: 200%;                                       /* 👈 Déborde vers le bas */
  background-image: url("./assets/pcb.png");
  background-repeat: repeat-x;
  background-position: center center;                       /* 👈 Centré */
  background-size: auto 100%;                         /* 👈 Taille relative à la hauteur */
  z-index: -1;
  
  /* 👈 ÉVITER LE DÉBORDEMENT */
  right: 0;
  overflow: hidden;
  
   /* 👈 FONDU HORIZONTAL */
   mask: linear-gradient(to right, 
   transparent 10%,                                   /* 👈 Transparent à gauche */
   black 25%,                                        /* 👈 Opaque au centre */
   black 75%,                                        /* 👈 Opaque au centre */
   transparent 90%                                  /* 👈 Transparent à droite */
 );
 -webkit-mask: linear-gradient(to right, 
   transparent 10%, black 25%, black 75%, transparent 90%
 );
}





@keyframes shimmer {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: -100%; }
}


.flexbox-footer {
  background: transparent;
  color: white;
  padding: 1rem 2rem;
  text-align: center;
  font-family: var(--card-font-footer-family);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 600;
  flex-shrink: 0;
  position: relative;
  height: 8em;  /* Hauteur fixe */
  /* ou */
  min-height: 100px;  /* Hauteur minimale */
  margin-top: -4em;
  z-index: -1;
}

.flexbox-footer::before {
  content: '';
  top: -100%;
  left: 0;  
  position: absolute;
  width: 100%;
  height: 200%;                    /* 👈 Réduit de 400% à 200% */
  background-image: url("./assets/meca.png");
  background-repeat: repeat;
  background-position: center top;  /* 👈 Repositionne vers le haut */
  background-size: auto 100%;
  z-index: -1;
  right: 0;
  overflow: hidden;
  
  /* 👈 FONDU RADIAL ADAPTÉ */
  mask: radial-gradient(ellipse 100% 200% at center 50%, 
    black 15%,                    /* 👈 Pourcentages ajustés */
    rgba(0,0,0,0.8) 25%,         
    rgba(0,0,0,0.3) 35%,         
    transparent 45%              /* 👈 Fondu plus rapide */
  );
  -webkit-mask: radial-gradient(ellipse 100% 200% at center 100%, 
    black 15%, rgba(0,0,0,0.8) 25%, rgba(0,0,0,0.3) 35%, transparent 45%
  );
}

/* ============================
   MAIN FLEXBOX
============================ */
.main-flexbox {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: transparent;
  border-radius: 20px;
  margin: 1em 0 0 0;
  overflow: visible;
}

.BackgroundIncub {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: black;
  background-image: url("./assets/logo%20oeuf%20bgV2.svg");
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: auto;
  background-attachment: fixed;
  z-index: -1; /* 🔥 IMPORTANT : bien en arrière-plan */
}


/* ============================
   LAYOUT DES CARTES - RATIOS CORRIGÉS
============================ */
.gallery {
  position: relative;
  flex-grow: 1;
  /*padding: 2rem;*/
  display: flex;
  align-items: center;
  justify-content: center;
  /*min-height: 400px;*/
  margin: 0 0 2em 0 ;
}

.cards {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 6rem 0 2rem 0;              /* 👈 haut, droite, bas, gauche */
  z-index: 10;
  
  /* Utilisation de min() pour un dimensionnement plus fluide */
  width: min(80vw, calc(60vh * 16/9));
  height: min(60vh, calc(80vw * 9/16));
  aspect-ratio: 16 / 9;
  
  /* Tailles minimales et maximales */
  min-width: 300px;
  min-height: 169px;
  max-width: 90vw;
  max-height: 70vh;
}

/* Mode portrait : RATIO 9/16 STRICT */
@media (max-aspect-ratio: 1/1) {
  .cards {
    width: min(70vw, calc(50vh * 9/16));
    height: min(50vh, calc(70vw * 16/9));
    aspect-ratio: 9 / 16;
    
    min-width: 200px;
    min-height: 356px;
    max-width: 80vw;
    max-height: 60vh;
  }
}

/* Media queries pour très petits écrans */
@media (max-width: 480px) {
  .gallery {
    padding: 1rem;
    min-height: 300px;
  }
  
  .cards {
    min-width: 250px;
    min-height: 140px;
  }
}

/* Media queries pour très grands écrans */
@media (min-width: 1400px) {
  .cards {
    max-width: 800px;
    max-height: 450px;
  }
}

/* Media queries pour écrans très larges */
@media (min-aspect-ratio: 21/9) {
  .cards {
    width: min(50vw, calc(70vh * 16/9));
    height: min(70vh, calc(50vw * 9/16));
  }
}

.card-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ========================
   ACTIONS / BOUTONS
======================== */
.actions {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem 1rem; /* 👈 MODIFIÉ: gap vertical et horizontal séparés */
  /* OU */
  row-gap: 0.5rem; /* 👈 ALTERNATIVE: Espacement vertical réduit */
  column-gap: 1rem; /* 👈 ALTERNATIVE: Espacement horizontal normal */
  pointer-events: auto;
  justify-content: center;
  align-content: flex-start;
  padding: 1rem;
  flex-shrink: 0;
  border-radius: 10px;
  margin: 0.5rem;
}

/* 👇 AJOUTÉ: Ciblage spécifique des boutons */


button {
  display: inline-block;
  white-space: nowrap;
  outline: none;
  border: none;
  padding: 12px 25px;
  background: #414141;
  background-image: linear-gradient(to bottom, #575757, #414141);
  color: #ffffff;
  font-family: Mori, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 20px;
  line-height: 18px;
  border-radius: 8px;
  margin: 0;
  cursor: pointer;
  text-shadow: 0px 1px 0px #414141;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

button:hover {
  background: #57a818;
  background-image: linear-gradient(to bottom, #57a818, #4d9916);
  text-shadow: 0px 1px 0px #32610e;
  box-shadow: 0px 6px 12px rgba(0,0,0,0.4);
  color: #ffffff;
  transform: translateY(-2px);
}
a {
  color: #88ce02;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: #eee;
  overflow-x: hidden;
  max-width: 100vw; 
  max-height: 100VH; 
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0rem;
  padding: 0rem;
  max-width: 1200px;
  margin: 0;
}

.text-shadow {
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

.generated-text-img[src=""],
.generated-text-img:not([src]) {
  display: none !important;
}




.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: bold;
  color: #c3f79d;
  text-shadow: 0 0 10px rgba(195, 247, 157, 0.3);
}

.stat-label {
  color: #b0b0b0;
  font-size: 0.9rem;
}

.cards {
  touch-action: pan-y; /* Allow vertical scrolling but lock horizontal */
}

.card-wrapper {
  user-select: none; /* Prevent text selection during swipe */
}

.flexbox {
  /* Activer les actions tactiles */
  touch-action: pan-y; /* Autoriser le défilement vertical et verrouiller l'horizontal */
  overflow: hidden; /* Empêcher l'apparition des barres de défilement */
}

/* ========================
   ACTIONS / BOUTONS — VERSION PROPRE
======================== */

/* Variables par défaut (si non déjà définies plus haut) */
:root {
  --actions-btn-h: 48px;
  --actions-gap: 10px;
  --ig-icon: 28px;
}

/* Conteneur d’actions: Prev | Next au-dessus, puis le groupe IG/More/IG */
.actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
  gap: var(--actions-gap);
  pointer-events: auto;
  padding: 1rem;
  margin: 0.5rem;
  border-radius: 10px;
}

/* Prev / Next toujours en premier et sur la même ligne si possible */
.actions > .prev,
.actions > .next {
  order: 0;
  flex: 0 0 auto;
  height: var(--actions-btn-h);
  line-height: 1;
  padding: 0 20px;
}

/* Le groupe IG — En savoir plus — IG passe en dessous (nouvelle ligne) */
.actions .cta-group {
  order: 1;
  flex: 0 0 100%;           /* force une nouvelle ligne sous Prev/Next */
  display: inline-flex;     /* affichage “large” par défaut: une ligne */
  flex-wrap: nowrap;
  justify-content: center;  /* centre l’ensemble */
  align-items: center;
  gap: var(--actions-gap);
  white-space: nowrap;
}

/* Boutons uniformes à l’intérieur du groupe en mode large */
.actions .cta-group > button {
  height: var(--actions-btn-h);
  line-height: 1;
  padding: 0 20px;
  flex: 0 0 auto;
}

/* Boutons Instagram carrés */
.actions .cta-group .ig {
  width: var(--actions-btn-h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.actions .cta-group .ig img {
  width: var(--ig-icon);
  height: var(--ig-icon);
  display: block;
}

/* Mode étroit: 
   Ligne 1 = En savoir plus (pleine largeur)
   Ligne 2 = [gouttière][IG][IG][gouttière] -> centré */
   @media (max-width: 420px) {
    .actions .cta-group {
      display: grid;
      /* 4 colonnes: 1fr (gauche) + contenu + contenu + 1fr (droite) */
      grid-template-columns: 1fr max-content max-content 1fr;
      grid-template-areas:
        "more more more more"
        ".    ig1  ig2  .";
      width: auto;
      margin: 0 auto;
      row-gap: var(--actions-gap, 10px);
      column-gap: var(--actions-gap, 10px);
  
      /* On neutralise d’éventuels héritages */
      justify-content: stretch !important;
      align-content: center;
      justify-items: center;
      align-items: center;
    }
  
    /* Ligne 1: bouton central pleine largeur */
    .actions .cta-group > button:not(.ig) {
      grid-area: more;
      justify-self: stretch;
      width: 100%;
      max-width: max-content
    }
  
    /* Ligne 2: les deux IG, dans les colonnes centrales */
    .actions .cta-group .ig:first-of-type { grid-area: ig1; }
    .actions .cta-group .ig:last-of-type  { grid-area: ig2; }

    .actions .cta-group > button:not(.ig) {
      justify-self: center !important;
      width: auto !important;
      max-width: max-content;
    }
  

  }  /* “En savoir plus” sur toute la ligne du haut */
  .actions .cta-group > button:not(.ig) {
    grid-area: more;
    justify-self: stretch;    /* pleine largeur du conteneur */
    width: 100%;
    max-width: max-content
  }

  /* Les deux IG, sur la ligne du dessous */
  .actions .cta-group .ig:first-of-type { grid-area: ig1; }
  .actions .cta-group .ig:last-of-type  { grid-area: ig2; }



/* pour la lisibilité du text en footer sur le background */
.infofooter {
  text-align: center; 
  font-size: 1.5em; 
  margin-top: -0.5em; 
  color: white;
  text-shadow: 
    /* Ligne du haut */
    -5px -5px 0 #000, -4px -5px 0 #000, -3px -5px 0 #000, -2px -5px 0 #000, -1px -5px 0 #000,
     0px -5px 0 #000,  1px -5px 0 #000,  2px -5px 0 #000,  3px -5px 0 #000,  4px -5px 0 #000,  5px -5px 0 #000,
    
    /* Ligne -4 */
    -5px -4px 0 #000, -4px -4px 0 #000, -3px -4px 0 #000, -2px -4px 0 #000, -1px -4px 0 #000,
     0px -4px 0 #000,  1px -4px 0 #000,  2px -4px 0 #000,  3px -4px 0 #000,  4px -4px 0 #000,  5px -4px 0 #000,
    
    /* Ligne -3 */
    -5px -3px 0 #000, -4px -3px 0 #000, -3px -3px 0 #000, -2px -3px 0 #000, -1px -3px 0 #000,
     0px -3px 0 #000,  1px -3px 0 #000,  2px -3px 0 #000,  3px -3px 0 #000,  4px -3px 0 #000,  5px -3px 0 #000,
    
    /* Ligne -2 */
    -5px -2px 0 #000, -4px -2px 0 #000, -3px -2px 0 #000, -2px -2px 0 #000, -1px -2px 0 #000,
     0px -2px 0 #000,  1px -2px 0 #000,  2px -2px 0 #000,  3px -2px 0 #000,  4px -2px 0 #000,  5px -2px 0 #000,
    
    /* Ligne -1 */
    -5px -1px 0 #000, -4px -1px 0 #000, -3px -1px 0 #000, -2px -1px 0 #000, -1px -1px 0 #000,
     0px -1px 0 #000,  1px -1px 0 #000,  2px -1px 0 #000,  3px -1px 0 #000,  4px -1px 0 #000,  5px -1px 0 #000,
    
    /* Ligne 0 (côtés seulement) */
    -5px  0px 0 #000, -4px  0px 0 #000, -3px  0px 0 #000, -2px  0px 0 #000, -1px  0px 0 #000,
     1px  0px 0 #000,  2px  0px 0 #000,  3px  0px 0 #000,  4px  0px 0 #000,  5px  0px 0 #000,
    
    /* Ligne +1 */
    -5px  1px 0 #000, -4px  1px 0 #000, -3px  1px 0 #000, -2px  1px 0 #000, -1px  1px 0 #000,
     0px  1px 0 #000,  1px  1px 0 #000,  2px  1px 0 #000,  3px  1px 0 #000,  4px  1px 0 #000,  5px  1px 0 #000,
    
    /* Ligne +2 */
    -5px  2px 0 #000, -4px  2px 0 #000, -3px  2px 0 #000, -2px  2px 0 #000, -1px  2px 0 #000,
     0px  2px 0 #000,  1px  2px 0 #000,  2px  2px 0 #000,  3px  2px 0 #000,  4px  2px 0 #000,  5px  2px 0 #000,
    
    /* Ligne +3 */
    -5px  3px 0 #000, -4px  3px 0 #000, -3px  3px 0 #000, -2px  3px 0 #000, -1px  3px 0 #000,
     0px  3px 0 #000,  1px  3px 0 #000,  2px  3px 0 #000,  3px  3px 0 #000,  4px  3px 0 #000,  5px  3px 0 #000,
    
    /* Ligne +4 */
    -5px  4px 0 #000, -4px  4px 0 #000, -3px  4px 0 #000, -2px  4px 0 #000, -1px  4px 0 #000,
     0px  4px 0 #000,  1px  4px 0 #000,  2px  4px 0 #000,  3px  4px 0 #000,  4px  4px 0 #000,  5px  4px 0 #000,
    
    /* Ligne du bas */
    -5px  5px 0 #000, -4px  5px 0 #000, -3px  5px 0 #000, -2px  5px 0 #000, -1px  5px 0 #000,
     0px  5px 0 #000,  1px  5px 0 #000,  2px  5px 0 #000,  3px  5px 0 #000,  4px  5px 0 #000,  5px  5px 0 #000;
  
}