/* ======================= Variables & Reset ======================= */
:root{
  --brand:#0a7cff;
  --brand-ink:#0a2540;
  --brand-menu:#123a6b;
  --ink:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-soft:rgba(255,255,255,.7);
  --overlay-dark:rgba(41, 41, 41, 0.202);
  --overlay-light:rgba(255,255,255,.3);
  --overlay-light-strong:rgba(255,255,255,.4);
  --shadow:0 6px 24px rgba(0,0,0,.14);
  --radius:18px;
  --header-h:70px;
}

*{box-sizing:border-box}
html,body{height:100%;scroll-behavior:smooth}
html{scroll-padding-top:var(--header-h)}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;}

/* ======================= Layout Helpers ======================= */
.container{width:80%; margin-inline:auto;}
.center{text-align:center}
.bold{font-weight:800}
.title-xxl{font-size: clamp(3.2rem, 2.8vw, 3rem); font-weight:600; margin:0 0 0rem}
.title-xl{font-size: clamp(3rem, 2.2vw, 2.2rem); font-weight:800; margin:0;text-align: center;  width: 100%; letter-spacing: 2px;}
.title-lg{font-size: clamp(2.2rem, 1.6vw, 1.4rem); font-weight:700; margin:1.5rem 0 .75rem;text-align: center; width: 100%;}
.lead{font-size: clamp(1.6rem, 1.1vw, 1.15rem); color:#111; max-width: 46ch; margin-top:40px; margin-bottom:0px; height}
.store-buttons{display:flex; gap:50px; margin-top:80px; justify-content: center; align-items:center;}
.store-btn img:hover { transform: scale(1.1);} /* ✅ léger zoom au survol */
.store-buttons .store-btn img {height: 60px;width: auto;display: block;transition: transform 0.2s ease;}

#accueil .hero-left h1,
#accueil .hero-left p {color: #ffffff;}
#accueil .hero-right h1,
#accueil .hero-right p {color: #ffffff;}
.hero-left {display: flex;flex-direction: column;justify-content: space-between;}
.hero-right {position: relative; /* ✅ permet de positionner le texte par rapport à ce conteneur */
  display: flex;justify-content: center;align-items: center;overflow: hidden;}

/* ======================= Header ======================= */
.site-header{position:fixed; inset:0 0 auto 0; height:var(--header-h); background:#4887eda9;backdrop-filter:saturate(180%) blur(8px);
  border-bottom:0.5px solid rgba(244, 246, 255, 0.812); z-index:50;}
.header-inner{display:flex; align-items:center; gap:20px; height:100%;justify-content: :space-between;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.brand-logo{height:42px; width:auto; border-radius: 8px;}
.brand-text {font-size: clamp(1rem, 1.6vw, 1.4rem);font-weight: 700;line-height: 1;transform: translateY(0);display: flex;align-items: center;}
.brand .brand-logo{height: calc(1em * 1.5 + 12px)} /* 1.5x plus grand que le texte */
.main-nav ul, .menu-mobile ul{list-style:none; margin:0; padding:0; display:flex; gap:60px;}
.main-nav a, .menu-mobile a{text-decoration:none;color: #ffffffca; font-weight:600;}
.main-nav a:hover, .menu-mobile a:hover{color:var(--brand)}
.main-nav {position: absolute;left: 50%;transform: translateX(-50%); /* ✅ centre parfaitement le menu */
}
.secondary-nav{margin-left:auto}
.contact-link{color:var(--bg); text-decoration:none}
.contact-link:hover{color:var(--brand)}

/* Mobile menu button */
.burger{display:none; background:none; border:0; width:40px; height:40px; cursor:pointer}
.burger span{display:block; height:2px; background:#111; margin:7px 4px}

/* Mobile menu panel */
.menu-mobile{background:var(--bg); border-bottom:1px solid rgba(0,0,0,.06)}
.menu-mobile[hidden]{display:none}

.site-header {
  color: #ffffff; /* ✅ remplace la couleur par défaut du texte */
}

/* ======================= Sections ======================= */
.section{position:relative;min-height:100vh;padding-top: calc(var(--header-h) + 100px);
  padding-bottom: 32px;align-items:center;overflow:hidden;padding-top: 8%;}
.section-inner{width:80%; margin-inline: auto}
#contact.section {min-height: auto; /* ✅ annule la hauteur forcée */
  padding-bottom: 20px;    /* ✅ réduit un peu l’espace sous la grille */
}

/* Backgrounds & overlays */
.background{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2}
.overlay{position:absolute; inset:0; z-index:-1}
.overlay-dark{background:var(--overlay-dark)}
.overlay-light{background:var(--overlay-light)}
.overlay-light-strong{background:var(--overlay-light-strong)}

#accueil .background {
  filter: blur(5px);
  transform: scale(1.05); /* évite les bords visibles après flou */
}

.bg-accueil{ background-image:url("./assets/fond_section_1.png"); }
.bg-about{ background-image:url("./assets/fond_section3.png"); }
.bg-legal{ background-image:url("./assets/fond_section4.png"); }

/* ======================= Hero ======================= */
.hero-grid{display:grid;grid-template-columns: 1.1fr .9fr;gap:30px;align-items:start;}
#accueil {
  padding-top: 120px; /* ajuste selon la taille de ton header */
}

/* === Soulignement image sur le mot "jamais" === */
.underline-word {
  position: relative;            /* ✅ permet de positionner le pseudo-élément */
  display: inline-block;         /* ✅ adapte la largeur à celle du mot */
  z-index: 1;                    /* ✅ pour s'assurer qu'il reste au-dessus du fond */
}

.underline-word::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -50%;                     /* ✅ place le soulignement sous le texte */
  width: 100%;                   /* ✅ largeur = celle du mot */
  height: 1500px;                  /* ✅ ajuste selon ton image */
  background: url("./assets/soulignage.png") no-repeat center bottom;
  background-size: contain;      /* ✅ garde les proportions de ton soulignage */
  z-index: -1;                   /* ✅ place l’image sous le texte */
  pointer-events: none;          /* ✅ évite tout clic dessus */
}

.app-preview {width: 70%;height: auto;display: block;border-radius: 0;box-shadow: none;margin: 0;justify-content: center;}
.visuel_a_venir {position: absolute;          /* ✅ superpose le texte à l’image */
  top: 50%;         /* ✅ aligenement vertical */
  left: 50%;        /* ✅ alignement horizontal */
  transform: translate(-50%, -50%) rotate(-30deg); /* ✅ déplace + incline le texte */
  color: rgb(0, 0, 0) !important; /* ✅ texte blanc semi-transparent */
  font-weight: 700;font-size: 1.4rem;text-align: center;text-transform: uppercase;letter-spacing: 2px; }
.store-btn img{height:46px; width:auto; display:block; filter: drop-shadow(var(--shadow)); justify-content: center}

/* ======================= Section Header (with back) ======================= */
.section-header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px;}
.section-subtitle{color:var(--muted); margin:0 0 60px; font-size:1.2rem}
.back-top{font-size:.9rem; color:var(--brand-ink); text-decoration:none}
.back-top:hover{color:var(--brand)}

/* ===== GALERIE : 2 lignes (3 + 2) avec cartes identiques ===== */
:root{
  --card-w: 280px;   /* largeur d'une carte */
  --card-h: 280px;   /* hauteur d'une carte */
  --card-gap: 100px;  /* espacement */
}

/* Conteneur global : empile les 2 lignes et centre */
.gallery-grid{
  display: flex;flex-direction: column;
  align-items: center;   /* centre chaque ligne */
  gap: 50px;             /* espace entre lignes */
  width: 100%;margin-bottom: 60px;}

/* Lignes */
.gallery-grid .row-3,
.gallery-grid .row-2{display: grid;gap: var(--card-gap);
  justify-content: center;            /* centre la ligne sur la page */
}

/* 1re ligne : 3 colonnes de même largeur */
.gallery-grid .row-3{grid-template-columns: repeat(3, var(--card-w));}

/* 2e ligne : 2 colonnes de même largeur (identiques à la 1re) */
.gallery-grid .row-2{grid-template-columns: repeat(2, var(--card-w));}

/* Cartes : dimensions strictement identiques partout */
.card{width: var(--card-w);height: var(--card-h);background:#fff;border-radius: var(--radius);
  overflow:hidden;box-shadow: var(--shadow);display:flex;flex-direction:column;}

/* Image : ratio constant pour éviter les écarts de hauteur */
.card img {width: 100%;
  height: 65%;          /* ✅ occupe x% de la carte */
  object-fit: cover;    /* garde le bon cadrage */
  display: block;}

/* Texte = 35% de la carte (partie basse) */
.card-texts {height: 35%;           /* ✅ partie basse : 35 % de la carte */
  display: flex;flex-direction: column;
  justify-content: center; /* ✅ centre verticalement le contenu dans cette zone */
  align-items: center;     /* ✅ centre horizontalement */
  text-align: center;      /* ✅ centre le texte à l’intérieur */
  padding: 0 16px;         /* marge horizontale, pas de débordement */
  box-sizing: border-box;  /* ✅ empêche le padding de fausser la hauteur */
  overflow: hidden;        /* ✅ évite tout dépassement vers le haut */
}

.card-title {font-weight: 700;font-size: 1.3rem;margin: 0 0 4px;}

.card-subtitle {margin: 0;color: var(--muted);font-size: 0.9rem;}

/* ======================= SECTION 3 : À PROPOS ======================= */

#nous {
  position: relative;
  padding-top: 60px;   /* ✅ espace réduit au-dessus */
  padding-bottom: 60px;/* ✅ espace sous le texte */
  background: none;display: flex;flex-direction: column;
  justify-content: flex-start; /* le contenu reste en haut */
  min-height: auto;            /* ✅ ne force plus la hauteur d’écran */
}
#nous .title-xl {margin-bottom: 60px; /* ✅ espace entre le titre et le texte */
}

.about-text p {font-size: 1.1rem;line-height: 1.7;color: #222;
  margin: 0 auto;          /* ✅ centre le texte */
  max-width: 600px;        /* ✅ limite la largeur du paragraphe */
  text-align: center;      /* ✅ aligne le texte au centre */
}

/* ======================= SECTION 4 : Legal Sliders ======================= */
.slider{position:relative; display:flex; align-items:center; gap:8px; margin:0;}
.slides{overflow:hidden; flex:1; outline:none;}
.slide{min-width:100%; transition:transform .4s ease, opacity .4s ease; display:none}
.slide.is-active{display:block}
.slide img{width:100%; height:auto; display:block; border-radius:12px; box-shadow:var(--shadow)}

#legal {
  padding-top: 20px;    /* ✅ réduit l’espace au-dessus de la section */
  padding-bottom: 60px; /* garde un peu d’air en bas si besoin */
}

.slider-arrow{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:12px; width:42px; height:42px; cursor:pointer;
  box-shadow:var(--shadow); font-size:1.1rem;
}
.slider-arrow:focus{outline:2px solid var(--brand)}

/* Separator */
.separator{
  border:0; height:3px; background:#111; opacity:.6; width:10%; margin:20px auto;
}

/* ======================= SECTION 5 : Contact ======================= */
.contact-grid {
  display: flex;                     /* ✅ on passe à Flexbox */
  justify-content: center;           /* ✅ centre horizontalement */
  align-items: center;               /* ✅ centre verticalement si besoin */
  gap: 40px;                         /* ✅ espace entre les deux cartes */
  flex-wrap: wrap;                   /* ✅ pour que ça reste responsive sur mobile */
  margin-top: 12px;}

.contact-item {
  display: flex;align-items: center;gap: 12px;padding: 16px 18px;
  border-radius: 0;           /* ✅ supprime l’arrondi si tu veux un look plat */
  background: none;           /* ✅ pas de fond */
  box-shadow: none;           /* ✅ pas d’ombre */
  border: none;               /* ✅ pas de bordure */
  text-decoration: none;color: var(--ink);}

.contact-item:hover{transform: translateY(-1px)}
.contact-icon{width:42px; height:42px; object-fit:contain}
.contact-text{font-weight:600;}

#contact {
  padding-top: 10px;
  padding-bottom: 20px; /* ✅ réduit l’espace blanc sous la grille */
}

/* ======================= Footer ======================= */
.site-footer{
  background:#B4D9FF; padding:0 0 0; text-align:center; color:#414b57; font-weight:300;}
 
  
/* ======================= Responsive ======================= */
@media (max-width: 980px){
  .hero-grid{grid-template-columns: 1fr}
  .app-preview{margin: 12px auto 0}
  .gallery-grid{grid-template-columns: 1fr 1fr}
  .gallery-grid > .card:nth-last-child(2){grid-column:auto}
  .gallery-grid > .card:nth-last-child(1){grid-column:auto}
}

@media (max-width: 720px){
  :root{ --header-h:60px }
  .main-nav{display:none}
  .burger{display:block}
  .menu-mobile ul{flex-direction:column; padding:12px 0}
  .contact-grid{grid-template-columns: 1fr}
  .brand-logo{height:34px}
}

@media (max-width: 768px) {
  .store-btn img {
    height: 50px;
  }
}
@media (max-width: 1180px){           /* si 3×360px + gaps ne tiennent plus */
  .gallery-grid .row-3{ grid-template-columns: repeat(2, var(--card-w)); }
}
@media (max-width: 780px){
  .gallery-grid .row-3,
  .gallery-grid .row-2{ grid-template-columns: var(--card-w); }
  .card{ width: min(100%, var(--card-w)); }  /* évite le débordement sur mobile */
}
@media (max-width: 768px) {
  .store-buttons .store-btn img {
    height: 60px;
  }
}

/* ======================= 🔹 RESPONSIVE SECTION ACCUEIL ======================= */

/* 💻 Tablettes (<= 980px) */
@media (max-width: 980px) {

  /* Structure du hero */
  .hero-grid {
    display: flex;
    flex-direction: column; /* ✅ passe la grille en pile (texte au-dessus, image en dessous) */
    align-items: center;
    text-align: center;
    gap: 40px;
  }

  .hero-left {
    align-items: center;
    justify-content: center;
  }

  .hero-right {
    justify-content: center;
    align-items: center;
  }

  /* Titre et texte */
  .title-xxl {
    font-size: 2.4rem;   /* ✅ légèrement réduit */
    line-height: 1.2;
  }

  .lead {
    font-size: 1.1rem;
    max-width: 34ch;
    margin-top: 16px;
  }

  /* Boutons des stores */
  .store-buttons {
    flex-direction: row; /* ✅ reste côte à côte sur tablette */
    gap: 30px;
    margin-top: 40px;
  }

  .store-buttons .store-btn img {
    height: 70px;
  }

  /* Image d’aperçu */
  .app-preview {
    width: 70%;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* 📱 Petits écrans (<= 720px) */
@media (max-width: 720px) {

  .hero-grid {
    flex-direction: column;
    text-align: center;
    gap: 50px;
  }

  .hero-left {
    align-items: center;
  }

  .title-xxl {
    font-size: 2rem;
  }

  .lead {
    font-size: 1rem;
    max-width: 30ch;
  }

  .store-buttons {
    flex-direction: column; /* ✅ empile les boutons */
    gap: 20px;
    margin-top: 30px;
  }

  .store-buttons .store-btn img {
    height: 60px;
  }

  .hero-right {
    justify-content: center;
    align-items: center;
  }

  .app-preview {
    width: 80%;
    max-width: 380px;
    margin-top: 10px;
  }
}

/* 📱 Très petits écrans (<= 480px) */
@media (max-width: 480px) {

  .title-xxl {
    font-size: 1.8rem;
  }

  .lead {
    font-size: 0.95rem;
  }

  .store-buttons .store-btn img {
    height: 55px;
  }

  .app-preview {
    width: 90%;
    max-width: 340px;
  }
}