/* =============================================================================
   accueil.css — Styles PROPRES à la page d'accueil (index.html)
   -----------------------------------------------------------------------------
   Ce fichier complète le CSS commun (style.css) : il n'est chargé que sur
   index.html. Il contient tout ce qui concerne les trois sections de l'accueil.

   Plan du fichier :
     1. Section HERO (grand carrousel pleine largeur)
     2. Contrôles de carrousel partagés (flèches + points)
     3. Sections "sélections" (3 carrousels de produits) + cartes produit
     4. Section "Avis clients"
     5. Responsive (tablette / desktop)

   Rappel mobile-first : les styles de base ciblent le mobile ; on élargit
   ensuite avec des @media (min-width: …).
   ========================================================================== */


/* =============================================================================
   1. SECTION HERO — carrousel pleine largeur
   Les diapos sont empilées (position: absolute) et on n'affiche que celle qui
   porte la classe .is-active (fondu géré par l'opacité).
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  /* Hauteur réduite sur mobile, plus grande sur desktop (taille fluide). */
  height: clamp(340px, 52vw, 520px);
  overflow: hidden;
  background: var(--couleur-primaire);   /* fond le temps que le JS s'exécute */
}

.hero__piste {
  height: 100%;
}

/* Une diapositive : occupe tout l'espace, masquée par défaut. */
.hero__slide {
  position: absolute;
  inset: 0;                 /* top/right/bottom/left = 0 */
  display: flex;
  align-items: center;      /* contenu centré verticalement */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;

  /* Fond = dégradé sombre (pour la lisibilité du texte) PAR-DESSUS la couleur
     de la gamme. La couleur est passée par le JS via --slide-couleur.
     Le dégradé sombre garantit un contraste conforme RGAA pour le texte blanc. */
  background-image:
    linear-gradient(90deg, rgba(7, 23, 45, 0.78) 0%, rgba(7, 23, 45, 0.45) 60%, rgba(7, 23, 45, 0.30) 100%),
    linear-gradient(135deg, var(--slide-couleur, #0b2e59), #07172d);
  background-size: cover;
  background-position: center;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Bloc texte calé à GAUCHE (façon UGAP). On garde le cadre .conteneur
   (largeur max 1200px centrée) pour s'aligner sur le contenu du site, et on
   ajoute une marge intérieure confortable — qui laisse aussi la place aux
   flèches superposées sur les côtés. La largeur du TEXTE est limitée plus bas
   (max-width sur le titre et le sous-titre) pour garder des lignes lisibles. */
.hero__contenu {
  color: #fff;
  text-align: left;
  padding-inline: var(--espace-xl);
}
.hero__titre {
  color: #fff;             /* surcharge le bleu des h2 par défaut */
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.1;
  max-width: 36rem;        /* longueur de ligne lisible (texte calé à gauche) */
}
.hero__sous-titre {
  color: #e7eefb;
  font-size: clamp(1rem, 2.5vw, 1.35rem);
  font-weight: 500;
  margin-top: var(--espace-sm);
  max-width: 36rem;
}

/* Bouton "Découvrir" : bouton plein, accent teal. */
.hero__bouton {
  display: inline-block;
  margin-top: var(--espace-lg);
  padding: 0.7rem 1.5rem;
  background: var(--couleur-accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--rayon);
  transition: background var(--transition), transform var(--transition);
}
.hero__bouton:hover {
  background: #0fb3a3;
  color: #fff;
  transform: translateY(-1px);
}


/* =============================================================================
   2. CONTRÔLES DE CARROUSEL PARTAGÉS (flèches + points)
   Réutilisés par le hero ET le carrousel d'avis.
   ========================================================================== */

/* Flèches précédent / suivant. */
.carrousel-fleche {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--couleur-primaire);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--ombre);
  transition: background var(--transition);
}
.carrousel-fleche:hover { background: #fff; }
.carrousel-fleche--prec { left: var(--espace-md); }
.carrousel-fleche--suiv { right: var(--espace-md); }

/* --- Flèches PROPRES AU HERO ---------------------------------------------
   Grosses icônes SANS fond rond : juste le chevron. Pour rester lisible sur
   toute image (y compris une zone claire), on ajoute une ombre portée plutôt
   qu'une pastille pleine. Au survol ET au focus clavier : léger agrandissement
   + opacité pleine (transition douce). Le carrousel d'avis n'est pas concerné
   (ces règles sont limitées à .hero). */
.hero .carrousel-fleche {
  width: 44px;                 /* zone cliquable confortable (la flèche déborde, sans fond) */
  height: 44px;
  background: none;            /* plus de cercle blanc */
  box-shadow: none;
  border: none;
  color: #fff;
  font-size: clamp(2.4rem, 5vw, 3.4rem);   /* icône nettement plus grosse */
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), 0 0 3px rgba(0, 0, 0, 0.45);
  opacity: 0.9;
  transition: transform var(--transition), opacity var(--transition),
              text-shadow var(--transition);
}
.hero .carrousel-fleche:hover,
.hero .carrousel-fleche:focus-visible {
  background: none;            /* on ne réintroduit pas de pastille au survol */
  opacity: 1;
  transform: translateY(-50%) scale(1.18);   /* garde le centrage vertical + agrandit */
  text-shadow: 0 2px 7px rgba(0, 0, 0, 0.75), 0 0 5px rgba(0, 0, 0, 0.55);
}
/* Collées près des bords pour ne pas chevaucher le texte calé à gauche. */
.hero .carrousel-fleche--prec { left: var(--espace-sm); }
.hero .carrousel-fleche--suiv { right: var(--espace-sm); }

/* Points de navigation (un par diapositive). */
.carrousel-points {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--espace-md);
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--espace-sm);
}
.carrousel-points button {
  width: 12px;
  height: 12px;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition);
}
.carrousel-points button:hover { background: rgba(255, 255, 255, 0.85); }
.carrousel-points button[aria-current="true"] {
  background: #fff;          /* point de la diapo active */
}


/* =============================================================================
   3. SECTIONS "SÉLECTIONS" — 3 carrousels horizontaux de produits
   ========================================================================== */
.selections {
  padding-top: var(--espace-2xl);
}

/* Un bloc = un titre + une "piste" horizontale de cartes. */
.rail {
  margin-bottom: var(--espace-2xl);
}
.rail__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-md);
  margin-bottom: var(--espace-md);
}
.rail__titre {
  margin: 0;
}

/* Boutons flèches du rail (cachés sur mobile : on fait défiler au doigt). */
.rail__nav {
  display: none;
  gap: var(--espace-sm);
}
.rail__nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--couleur-fond-alt);
  color: var(--couleur-primaire);
  border: 1px solid var(--couleur-bordure);
  border-radius: 50%;
  font-size: 1.8rem;          /* icône agrandie, cohérente avec les flèches des avis */
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition);
}
.rail__nav button:hover,
.rail__nav button:focus-visible {
  background: #e6ecf5;
  border-color: var(--couleur-accent);
  transform: scale(1.08);     /* léger agrandissement au survol/focus */
}

/* La piste : conteneur défilant horizontalement, avec "accroche" (scroll-snap)
   pour s'arrêter proprement sur une carte. Le défilement au doigt (swipe) est
   natif sur mobile grâce à overflow-x: auto. */
.rail__piste {
  display: flex;
  gap: var(--espace-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--espace-md);
  padding-bottom: var(--espace-sm);   /* espace pour l'ombre des cartes */
  -webkit-overflow-scrolling: touch;  /* défilement fluide sur iOS */
}
/* On masque la barre de défilement (esthétique) sans empêcher le défilement. */
.rail__piste {
  scrollbar-width: none;              /* Firefox */
}
.rail__piste::-webkit-scrollbar {
  display: none;                      /* Chrome / Safari / Edge */
}

/* --- Carte produit --- */
.carte-produit {
  flex: 0 0 78%;                      /* mobile : 1 carte visible + aperçu de la suivante */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition), transform var(--transition);
}
.carte-produit:hover {
  box-shadow: var(--ombre);
  transform: translateY(-2px);
}

/* Image de remplacement = bloc de couleur (la vraie photo viendra plus tard). */
.carte-produit__image {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--carte-couleur, #1d4e7e);
}
/* Petit pictogramme décoratif au centre du bloc couleur. */
.carte-produit__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.6px);
  background-size: 14px 14px;
}

/* Étiquette (Nouveauté / Meilleure vente…) posée sur l'image. */
.carte-produit__etiquette {
  position: absolute;
  top: var(--espace-sm);
  left: var(--espace-sm);
  z-index: 1;
  padding: 2px 8px;
  background: var(--couleur-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
}

.carte-produit__corps {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  padding: var(--espace-md);
  flex: 1;
}
.carte-produit__nom {
  font-weight: 600;
  color: var(--couleur-primaire);
  line-height: 1.3;
}
.carte-produit__ref {
  font-size: 0.8rem;
  color: var(--couleur-texte-doux);
}
.carte-produit__prix {
  margin-top: auto;          /* colle le prix en bas de la carte */
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--couleur-texte);
}


/* =============================================================================
   4. SECTION "AVIS CLIENTS"
   Carrousel d'un témoignage à la fois (même mécanique que le hero).
   ========================================================================== */
.avis {
  background: var(--couleur-fond-alt);
  padding-top: var(--espace-2xl);
  padding-bottom: var(--espace-2xl);
}
.avis__titre {
  text-align: center;
  margin-bottom: var(--espace-xl);
}

/* Conteneur du carrousel : on réserve de la place sur les côtés pour les
   flèches (rondes, agrandies) afin qu'elles n'empiètent pas sur les cartes. */
.avis-carrousel {
  position: relative;
  max-width: 1080px;                                 /* assez large pour 3 avis côte à côte */
  margin-inline: auto;
  padding-inline: calc(52px + var(--espace-sm));     /* place pour les flèches */
}

/* Flèches du carrousel d'avis : on GARDE le rond blanc + la bordure, mais on
   AGRANDIT (cercle + icône). Retour visuel au survol ET au focus clavier. */
.avis-carrousel .carrousel-fleche {
  width: 52px;
  height: 52px;
  background: var(--couleur-blanc);
  border: 1px solid var(--couleur-bordure);
  font-size: 1.8rem;                                 /* icône nettement plus grande */
  line-height: 1;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition);
}
.avis-carrousel .carrousel-fleche:hover,
.avis-carrousel .carrousel-fleche:focus-visible {
  background: var(--couleur-fond-alt);
  border-color: var(--couleur-accent);
  transform: translateY(-50%) scale(1.08);           /* garde le centrage vertical + agrandit */
}
.avis-carrousel .carrousel-fleche:disabled {         /* aux extrémités : pas de vide */
  opacity: 0.35;
  cursor: default;
  transform: translateY(-50%);
}
.avis-carrousel .carrousel-fleche--prec { left: 0; }
.avis-carrousel .carrousel-fleche--suiv { right: 0; }

/* Zone visible : masque les cartes qui dépassent de la piste. */
.avis__viewport {
  overflow: hidden;
}
/* Piste (rail) : rangée de cartes qui glisse horizontalement (translateX). */
.avis__rail {
  display: flex;
  gap: var(--espace-md);
  transition: transform 0.5s ease;
  will-change: transform;
}

/* Une carte d'avis. On garde le style de témoignage existant (citation centrée,
   auteur dessous). Largeur : 1 carte sur mobile ; 2 puis 3 selon l'écran (voir §5).
   Le padding bas réserve la place des points de navigation (placés en dessous). */
.avis__slide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 200px;
  padding: var(--espace-lg) var(--espace-md) var(--espace-xl);
}
.avis__texte {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-style: italic;
  color: var(--couleur-texte);
  line-height: 1.5;
}
.avis__texte::before { content: "« "; }
.avis__texte::after  { content: " »"; }
.avis__auteur {
  margin-top: var(--espace-md);
  font-style: normal;
}
.avis__auteur strong { color: var(--couleur-primaire); }
.avis__structure {
  display: block;
  font-size: 0.9rem;
  color: var(--couleur-texte-doux);
}
/* Les points du carrousel d'avis restent en bas (positionnés par le moteur),
   mais on les recolore pour rester visibles sur le fond clair. */
.avis-carrousel .carrousel-points button {
  background: var(--couleur-bordure);
}
.avis-carrousel .carrousel-points button[aria-current="true"] {
  background: var(--couleur-accent);
}


/* =============================================================================
   5. RESPONSIVE
   ========================================================================== */

/* --- Tablette : 2 cartes visibles --- */
@media (min-width: 600px) {
  .carte-produit {
    flex-basis: calc(50% - var(--espace-md));
  }
  .rail__nav {
    display: flex;          /* on affiche les flèches dès la tablette */
  }
  /* Avis : 2 témoignages côte à côte. */
  .avis__slide {
    flex-basis: calc((100% - var(--espace-md)) / 2);
  }
}

/* --- Desktop intermédiaire : 3 cartes visibles --- */
@media (min-width: 900px) {
  .carte-produit {
    flex-basis: calc(33.333% - var(--espace-md));
  }
  /* Avis : 3 témoignages côte à côte. */
  .avis__slide {
    flex-basis: calc((100% - 2 * var(--espace-md)) / 3);
  }
}

/* --- Grand écran : 4 cartes visibles --- */
@media (min-width: 1200px) {
  .carte-produit {
    flex-basis: calc(25% - var(--espace-md));
  }
}

/* --- Accessibilité : si l'utilisateur réduit les animations, on neutralise
   les transitions de fondu (le JS coupe aussi le défilement automatique). --- */
@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .avis__rail {
    transition: none;
  }
}