/* ============================================================
   ACCUEIL — accueil.css
   Styles spécifiques à index.html.
   Dépend de style.css (variables, reset, composants globaux).
============================================================ */


/* ============================================================
   MEGA MENU SERVICES
============================================================ */
.mega-menu {
  position: fixed;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 99;
  background: var(--blanc);
  border-radius: 1.25rem;
  box-shadow: 1.76px 1.76px 6.15px 1.76px rgba(0,24,63,.10), 0 8px 32px rgba(0,15,41,.10);
  overflow: hidden;
}

.mega-menu__grille {
  display: grid;
  grid-template-columns: 4fr 6fr;
  min-height: 20rem;
}

/* Colonne gauche — image de fond */
.mega-menu__gauche {
  position: relative;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}
.mega-menu__gauche-fond {
  position: absolute; inset: 0;
  background-image: url('../images/autres/nav/fond_mega_menu.webp');
  background-size: cover;
  background-position: center;
}
.mega-menu__gauche-overlay {
  position: absolute; inset: 0;
  background: rgba(0,10,30,.25);
}
.mega-menu__gauche-contenu { position: relative; z-index: 1; }

.mega-menu__titre {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--blanc);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 0.75rem;
}
.mega-menu__desc {
  font-size: 0.875rem;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.mega-menu__lien-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bleu-01);
  color: var(--blanc);
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.65rem 1.25rem;
  border-radius: var(--rayon-pill);
  text-decoration: none;
  width: fit-content;
  transition: background 0.15s, transform 0.15s;
}
.mega-menu__lien-cta:hover { background: var(--bleu-02); transform: translateX(3px); }
.mega-menu__lien-cta img { width: 1rem; height: 1rem; filter: brightness(0) invert(1); }

/* Colonne droite — 2×2 cards services */
.mega-menu__droite {
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  background: var(--blanc);
  align-content: center;
  align-items: start;
}

.mega-carte {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.875rem 1rem;
  border-radius: 15px;
  border: 1px solid #EBEDEF;
  text-decoration: none;
  background: var(--blanc);
  width: 30vw;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.mega-carte:hover {
  border-color: #C8CDD6;
  box-shadow: 0 4px 16px rgba(0,15,41,.07);
}

.mega-carte__image {
  width: clamp(6.5rem, 11.25vw, 11.25rem);
  height: clamp(5.25rem, 8.75vw, 8.75rem);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mega-carte__image img { width: 72%; height: 72%; object-fit: contain; }

.mega-carte__corps { flex: 1; min-width: 0; }

.mega-carte__titre-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 0.45rem;
}
.mega-carte__nom {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--noir);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Badge service incliné (dans le mega-menu) */
.mega-carte__badge {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 600;
  padding: 0.15em 0.6em 0.2em;
  border-radius: 9px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  outline: 2.5px solid var(--blanc);
  outline-offset: 0;
  box-shadow: 1.76px 1.76px 6.15px 1.76px rgba(0,24,63,.10);
  transform: rotate(1.8deg);
}

.mega-carte__desc { font-size: 0.875rem; color: #718096; line-height: 1.5; }

@media (max-width: 1100px) {
  .mega-carte__image {
    width: clamp(5rem, 9vw, 10rem);
    height: clamp(4rem, 7.25vw, 8rem);
  }
}
@media (max-width: 768px) {
  .mega-menu { display: none !important; }
}


/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  padding-top: clamp(5.5rem, 8vw, 7.5rem);
  overflow: visible;
  background: var(--blanc);
}

.hero__vague-fond {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.hero__vague-fond img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center; opacity: 0.5;
}

.hero__interieur {
  position: relative; z-index: 1;
  margin-inline: auto;
  padding-inline: var(--marge-page);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
}

.hero__avatar-haut { display: block; margin-top: 3vh; }
.hero__avatar-haut img { height: clamp(2rem,4vw,4rem); width: auto; display: block; margin-inline: auto; }

.hero__zone-titre { position: relative; width: 100%; margin-bottom: clamp(1.25rem,2.5vw,1.875rem); }

.hero__avatar-gauche {
  position: absolute; left: -1rem; top: 120%;
  transform: translateY(-50%); pointer-events: none;
}
.hero__avatar-gauche img { height: clamp(2rem,4vw,4rem); width: auto; display: block; }

.hero__avatar-droite {
  position: absolute; right: -1rem; top: 125%;
  transform: translateY(-50%); pointer-events: none;
}
.hero__avatar-droite img { height: clamp(2rem,4vw,4rem); width: auto; display: block; }

.hero__titre {
  font-family: var(--police);
  font-weight: 600;
  font-size: clamp(2.25rem, 1rem + 4vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--noir);
  padding: 0; padding-top: 2vh;
}

/* Mot mis en valeur dans le titre hero */
.hero__titre-accent {
  display: inline-flex; align-items: center;
  background: var(--bleu-01); color: var(--blanc);
  border-radius: 0.75rem;
  padding: 0.05em 0.45em 0.1em;
  outline: 4px solid var(--blanc);
  box-shadow: 0 6px 28px rgba(46,125,255,.4);
  white-space: nowrap;
}

.hero__sous-titre {
  font-family: var(--police); font-weight: 400;
  font-size: clamp(0.9rem, 0.825rem + 0.375vw, 1.0625rem);
  line-height: 1.55; color: #4A5568;
  max-width: 58ch; margin-inline: auto;
}
.hero__sous-titre strong { font-weight: 700; color: var(--noir); }

.hero__actions {
  display: flex; align-items: center; justify-content: center;
  gap: 0.875rem; flex-wrap: wrap;
  margin-top: clamp(1.25rem, 2.5vw, 1.875rem);
}

/* Boutons hero (légèrement plus padding que .btn standard) */
.btn-hero {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--police); font-weight: 600;
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  border-radius: var(--rayon-pill);
  padding: 0.75rem 1.5rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,15,41,.12);
  transition: box-shadow var(--transition-base), transform var(--transition-rapide);
}
.btn-hero:active { transform: scale(0.97); }
.btn-hero:hover  { box-shadow: 0 6px 24px rgba(0,15,41,.18); transform: translateY(-2px); }

.btn-hero--contact {
  background: rgba(242,242,242,.9); color: var(--noir);
  border: 1.5px solid var(--gris-bord);
}
.btn-hero--contact img { width: 1rem; height: 1rem; opacity: 0.75; }

.btn-hero--neutre {
  background: rgba(255,255,255,.9); color: var(--noir);
  border: 1.5px solid var(--gris-bord);
}
.btn-hero--neutre img { width: 1rem; height: 1rem; opacity: 0.75; }

.hero__stats {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 5vw, 5rem); flex-wrap: wrap;
  margin-top: clamp(1rem, 3vw, 3.5rem);
}
.hero__stat {
  font-family: var(--police); font-weight: 500;
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9375rem); color: #4A5568;
}

.hero__video-wrap { width: 100%; max-width: 900px; margin-top: clamp(2rem, 4vw, 3.5rem); }
.hero__video-boite {
  width: 100%; aspect-ratio: 16/9;
  background: var(--gris-clair); border-radius: 1.25rem;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  outline: 5px solid var(--blanc);
  box-shadow: 0 8px 40px rgba(0,15,41,.14);
}
.hero__video-play {
  width: clamp(3.5rem, 5vw, 5.5rem); height: auto; cursor: pointer;
  transition: transform var(--transition-base);
  filter: drop-shadow(0 8px 20px rgba(46,125,255,.4));
}
.hero__video-play:hover { transform: scale(1.08); }

@media (max-width: 1100px) {
  .hero__avatar-gauche { left: 0; }
  .hero__avatar-droite { right: 0; }
  .hero__titre { padding-inline: clamp(4rem, 12vw, 10rem); }
}
@media (max-width: 900px) {
  .hero__titre { font-size: clamp(2rem, 5.5vw, 3.5rem); padding-inline: clamp(3rem, 10vw, 7rem); }
}
@media (max-width: 768px) {
  .hero { padding-top: 5rem; }
  .hero__avatar-gauche, .hero__avatar-droite { display: none; }
  .hero__titre { padding-inline: 0; font-size: clamp(1.875rem, 6vw, 3rem); line-height: 1.1; }
  .hero__titre-accent { white-space: normal; border-radius: 0.5rem; }
}
@media (max-width: 480px) {
  .hero__stats { flex-direction: column; gap: 0.5rem; }
  .hero__actions { flex-direction: column; width: 100%; }
  .btn-hero { justify-content: center; }
}


/* ============================================================
   PARTENAIRES (bande de logos)
============================================================ */
.partenaires {
  padding-block: clamp(2.5rem, 4.5vw, 4.5rem);
  background: var(--blanc);
}
.partenaires__interieur {
  max-width: 2000px; margin-inline: auto;
  padding-inline: var(--marge-page);
  display: flex; flex-direction: column; align-items: center; gap: 2rem;
}
.partenaires__label {
  font-family: var(--police); font-weight: 500; font-size: 0.9375rem; color: #718096;
}
.partenaires__logos {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 2.5vw, 4rem); flex-wrap: wrap;
}
/* Wrapper logos partenaires — hover couleur */
.partenaires__logo-wrap {
  position: relative;
  height: clamp(1.875rem, 4vw, 4.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.partenaires__logo-wrap img {
  height: 100%;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.partenaires__logo-wrap .logo-gris   { opacity: 0.5; }
.partenaires__logo-wrap .logo-couleur {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
}
.partenaires__logo-wrap:hover .logo-gris    { opacity: 0; }
.partenaires__logo-wrap:hover .logo-couleur { opacity: 1; }

@media (max-width: 480px) {
  .partenaires__logo-wrap { height: 1.625rem; }
  .partenaires__logos { gap: 1.25rem; }
}


/* ============================================================
   SECTION 2 — Services
============================================================ */
.services {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: var(--blanc);
}
.services__interieur {
  max-width: 2000px; margin-inline: auto;
  padding-inline: var(--marge-page);
}
.services__entete {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.services__titre {
  font-family: var(--police);
  font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: 1.1; letter-spacing: -0.03em; color: var(--noir);
}
.services__grille {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 1.5vw, 1.5rem);
}

/* Card service */
.carte-service {
  display: flex; flex-direction: column;
  background: var(--blanc); border-radius: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,15,41,.08);
  text-decoration: none; overflow: visible;
  transition: box-shadow 0.2s, transform 0.2s;
}
.carte-service:hover {
  box-shadow: 0 8px 32px rgba(0,15,41,.14);
  transform: translateY(-4px);
}

.carte-service__image {
  width: 100%; aspect-ratio: 4/3;
  border-radius: 1.25rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem; overflow: hidden;
}
.carte-service__image img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: 0.8rem;
  transition: transform 0.35s ease;
}
.carte-service:hover .carte-service__image img { transform: scale(1.04); }

.carte-service__corps {
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.625rem; flex: 1;
}
.carte-service__titre {
  font-family: var(--police); font-weight: 700;
  font-size: clamp(1rem, 0.875rem + 0.625vw, 1.1875rem);
  color: var(--noir); letter-spacing: -0.02em; line-height: 1.2;
}
.carte-service__texte {
  font-family: var(--police); font-weight: 400;
  font-size: 0.875rem; color: #4A5568; line-height: 1.55;
}
.carte-service__tags {
  display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem;
}

@media (max-width: 1024px) { .services__grille { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .services__grille { grid-template-columns: 1fr; } }


/* ============================================================
   SECTION 3 — Mission
============================================================ */
.mission {
  padding-block: clamp(4rem, 7vw, 7rem);
  background: var(--blanc); overflow: hidden;
}
.mission__interieur {
  max-width: 2000px; margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 0;
  padding-inline: var(--marge-page);
}

.mission__colonne-gauche {
  padding-right: clamp(2rem, 4vw, 5rem);
  display: flex; flex-direction: column;
  gap: clamp(1.5rem, 2.5vw, 2rem);
}
.mission__titre {
  font-family: var(--police); font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
  line-height: 1.2; letter-spacing: -0.03em; color: var(--noir);
}
.mission__texte {
  font-family: var(--police); font-weight: 400;
  font-size: clamp(0.9375rem, 0.875rem + 0.375vw, 1.0625rem);
  line-height: 1.65; color: var(--noir); max-width: 48ch;
}
.mission__texte strong { font-weight: 700; }

.mission__soutiens { display: flex; flex-direction: column; gap: 0.875rem; }
.mission__soutiens-label {
  font-family: var(--police); font-weight: 400;
  font-size: 0.9375rem; color: var(--noir);
}
.mission__soutiens-logos {
  display: flex; align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem); flex-wrap: wrap;
}
.mission__soutien-logo {
  height: clamp(1.75rem, 3vw, 2.75rem); width: auto; object-fit: contain;
  opacity: 0.8; filter: grayscale(1);
  transition: opacity var(--transition-base), filter var(--transition-base);
}
.mission__soutien-logo:hover { opacity: 1; filter: grayscale(0); }

/* Wrapper logos soutiens — hover couleur */
.mission__soutien-logo-wrap {
  position: relative;
  height: clamp(1.5rem, 3vw, 2.5rem);
  display: inline-flex;
  align-items: center;
}
.mission__soutien-logo-wrap img {
  height: 100%;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}
.mission__soutien-logo-wrap .logo-gris   { opacity: 0.55; filter: grayscale(1); }
.mission__soutien-logo-wrap .logo-couleur {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
}
.mission__soutien-logo-wrap:hover .logo-gris    { opacity: 0; }
.mission__soutien-logo-wrap:hover .logo-couleur { opacity: 1; }

.mission__colonne-droite {
  display: flex; align-items: center;
  justify-content: flex-end; overflow: hidden;
}
.mission__carte-france { width: 100%; height: auto; display: block; max-width: none; }

@media (max-width: 900px) {
  .mission__interieur { grid-template-columns: 1fr; }
  .mission__colonne-gauche { padding-left: var(--marge-page); padding-right: var(--marge-page); }
  .mission__colonne-droite { justify-content: center; order: -1; }
  .mission__carte-france { max-width: 480px; margin-inline: auto; }
  .mission__texte { max-width: 100%; }
}


/* ============================================================
   SECTION 4 — Pourquoi choisir All In (carousel)
============================================================ */
.pourquoi {
  padding-block: clamp(4rem, 7vw, 7rem);
    z-index: 3;
    position: relative;
}
.pourquoi__interieur {
  max-width: 2000px; margin-inline: auto;
  padding-inline: var(--marge-page);
}

.pourquoi__entete {
  text-align: center;
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.pourquoi__titre {
  font-family: var(--police); font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: 1.1; letter-spacing: -0.03em; color: var(--noir);
}

/* Carousel */
.pourquoi__carousel {
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-block: 1rem; margin-block: -1rem;
  margin-right: calc(-1 * var(--marge-page));
  padding-right: var(--marge-page);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.pourquoi__carousel::-webkit-scrollbar { display: none; }

.pourquoi__piste {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  transition: none; will-change: auto;
  --carte-l: clamp(18rem, 30vw, 26rem);
}

/* Card carousel */
.carte-raison {
  flex: 0 0 var(--carte-l); width: var(--carte-l);
  display: flex; flex-direction: column;
  background: var(--blanc); border-radius: 1.25rem;
  box-shadow: 0 2px 12px rgba(0,15,41,.08);
  overflow: visible;
  transition: box-shadow 0.2s, transform 0.2s;
  scroll-snap-align: start;
}
.carte-raison:hover {
  box-shadow: 0 8px 32px rgba(0,15,41,.14);
  transform: translateY(-4px);
}

.carte-raison__image {
  width: 100%; aspect-ratio: 4/3;
  border-radius: 1.25rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0.5rem; overflow: hidden;
}
.carte-raison__image img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; border-radius: 0.8rem;
  transition: transform 0.35s ease;
}
.carte-raison:hover .carte-raison__image img { transform: scale(1.04); }

.carte-raison__corps {
  padding: 1.25rem 1.375rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.625rem; flex: 1;
}
.carte-raison__titre {
  font-family: var(--police); font-weight: 700;
  font-size: clamp(1rem, 0.875rem + 0.625vw, 1.1875rem);
  color: var(--noir); letter-spacing: -0.02em; line-height: 1.2;
}
.carte-raison__texte {
  font-family: var(--police); font-weight: 400;
  font-size: 0.875rem; color: #4A5568; line-height: 1.55;
}

/* Contrôles carousel */
.pourquoi__controles {
  background-color: #F0F0F0;
  width: 8rem; height: 3.5rem;
  display: flex; justify-content: center; align-items: center;
  border-radius: 3vw;
  padding: 1vw 0 0.7vw 0.3vw;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-inline: auto;
}
.pourquoi__btn {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; align-items: center;
  transition: transform 0.2s ease, opacity 0.2s;
}
.pourquoi__btn img {
  width: 5.5vw; min-width: 3rem; max-width: 4.5rem;
  height: auto; display: block;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.05));
}
.pourquoi__btn:hover:not(:disabled) { transform: scale(1.05); }
.pourquoi__btn:active { transform: scale(0.95); }
.pourquoi__btn:disabled { cursor: default; }

@media (max-width: 768px) { .pourquoi__piste { --carte-l: clamp(16rem, 75vw, 22rem); } }
@media (max-width: 480px) { .pourquoi__piste { --carte-l: 85vw; } }

/* Ultrawide 2000px+ — grille centrée, plus de slider */
@media (min-width: 2000px) {
  .pourquoi__interieur { max-width: none; padding-inline: 0; }
  .pourquoi__carousel  { overflow: visible; margin-right: 0; padding-right: 0; }
  .pourquoi__piste     { flex-wrap: wrap; justify-content: center; --carte-l: clamp(18rem, 18vw, 22rem); }
  .carte-raison        { scroll-snap-align: none; }
  .pourquoi__controles { display: none; }
}


/* ============================================================
   SECTION 5 — Projets (slider infini)
============================================================ */
.projets {
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: clamp(4rem, 7vw, 7rem);
  background: var(--blanc); overflow: hidden;
}
.projets__interieur {
  max-width: 2000px; margin-inline: auto;
  padding-inline: var(--marge-page);
}
.projets__entete {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
}
.projets__titre {
  font-family: var(--police); font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: 1.1; letter-spacing: -0.03em; color: var(--noir);
}
.projets__sous-titre {
  font-family: var(--police); font-weight: 400;
  font-size: clamp(0.9rem, 0.875rem + 0.375vw, 1.0625rem);
  color: #4A5568; line-height: 1.6; max-width: 62ch;
}

/* Piste slider */
.projets__slider { overflow: hidden; padding-block: 0.5rem; }
.projets__piste {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  width: max-content;
  animation: defiler-projets 32s linear infinite;
  will-change: transform;
}
.projets__slider:hover .projets__piste { animation-play-state: paused; }

@keyframes defiler-projets {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.carte-projet {
  flex-shrink: 0;
  width: clamp(20rem, 30vw, 34rem);
  border-radius: 1.25rem; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,15,41,.08);
  transition: box-shadow 0.2s, transform 0.2s;
}
.carte-projet:hover {
  box-shadow: 0 8px 28px rgba(0,15,41,.13);
  transform: translateY(-4px);
}
.carte-projet img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 768px) {
  .carte-projet { width: clamp(16rem, 70vw, 22rem); }
  .projets__piste { animation-duration: 22s; }
}
@media (max-width: 480px) { .carte-projet { width: 80vw; } }


/* ============================================================
   SECTION 6 — CTA Contact
============================================================ */
.cta-contact {
  position: relative;
  background: #F04E23;
  overflow: hidden;
  padding-block: clamp(2.5rem, 4vw, 6rem);
  margin-inline: var(--marge-page);
  border-radius: 1.75rem;
  margin-bottom: clamp(3rem, 5vw, 5rem);
}
.cta-contact__fond-vague {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.cta-contact__fond-vague img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.4;
}
.cta-contact__interieur {
  position: relative; z-index: 1;
  max-width: 2000px; margin-inline: auto;
  padding-inline: var(--marge-page);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: clamp(1.75rem, 3vw, 2.5rem);
}
.cta-contact__titre {
  font-family: var(--police); font-weight: 600;
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  line-height: 1.15; letter-spacing: -0.03em; color: var(--blanc);
}

/* Badge "48h" — contour blanc transparent */
.cta-contact__badge-48h {
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid var(--blanc);
  border-radius: 0.75rem;
  padding: 0.02em 0.4em 0.08em;
  color: var(--blanc); font-weight: 600;
  white-space: nowrap;
}

.cta-contact__etapes {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(1.5rem, 4vw, 4rem); flex-wrap: wrap;
}
.cta-contact__etape {
  display: flex; align-items: center; gap: 0.625rem;
  font-family: var(--police); font-weight: 600;
  font-size: clamp(0.9rem, 0.85rem + 0.35vw, 1.125rem);
  color: var(--blanc);
}
.cta-contact__etape img {
  width: 1.375rem; height: 1.375rem; flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.cta-contact__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--blanc); color: var(--noir);
  font-family: var(--police); font-weight: 600;
  font-size: clamp(0.9375rem, 0.875rem + 0.375vw, 1.125rem);
  padding: 0.875rem 2rem;
  border-radius: var(--rayon-pill);
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-rapide);
}
.cta-contact__btn img { width: 1.125rem; height: 1.125rem; opacity: 0.75; }
.cta-contact__btn:hover {
  background: var(--gris-clair);
  box-shadow: 0 6px 28px rgba(0,0,0,.2);
  transform: translateY(-2px);
}
.cta-contact__btn:active { transform: scale(0.97); }

.cta-contact__preuve {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
.cta-contact__preuve-logo { height: 2.25rem; width: auto; display: block; }
.cta-contact__preuve-texte {
  font-family: var(--police); font-weight: 500;
  font-size: clamp(0.8rem, 0.75rem + 0.2vw, 0.9375rem);
  color: rgba(255,255,255,.85);
  text-align: left; line-height: 1.45;
}

@media (max-width: 768px) {
  .cta-contact { margin-inline: 1rem; border-radius: 1.25rem; }
  .cta-contact__etapes { gap: 1.25rem; }
  .cta-contact__preuve { flex-direction: column; }
  .cta-contact__preuve-texte { text-align: center; }
}
@media (max-width: 480px) {
  .cta-contact__etapes { flex-direction: column; gap: 0.875rem; }
}


/* ============================================================
   FOOTER
============================================================ */
.pied-page {
  padding-inline: var(--marge-page);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--blanc);
}

/* Bloc supérieur — 2 tuiles côte à côte */
.pied-page__haut {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0.75rem;
  min-height: 22rem;
  margin-bottom: 0.75rem;
}

/* Tuile bleue */
.pied-page__bleu {
  background: #2B6EE8;
  border-radius: 1.375rem;
  position: relative;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column;
  justify-content: flex-end; overflow: hidden;
}
.pied-page__bleu-vague {
  position: absolute; inset: 0;
  background-image: url('images/autres/wave-bleu-transparent.svg');
  background-size: cover; background-position: center;
  opacity: 0.3; pointer-events: none;
}
.pied-page__bleu-contenu {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 2rem;
}
.pied-page__bleu-titre {
  font-family: var(--police); font-weight: 600;
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 2.5rem);
  line-height: 1.2; letter-spacing: -0.03em; color: var(--blanc);
}

/* Badge rouge "rencontrait" */
.pied-page__bleu-badge {
  display: inline-flex; align-items: center;
  background: var(--rouge-01); color: var(--blanc);
  border-radius: 0.625rem;
  padding: 0.04em 0.4em 0.1em;
  outline: 3px solid var(--blanc);
  font-weight: 600;
}

.pied-page__bleu-cta {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--blanc); color: var(--noir);
  font-family: var(--police); font-weight: 600;
  font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  padding: 0.75rem 1.5rem;
  border-radius: var(--rayon-pill);
  text-decoration: none; width: fit-content;
  box-shadow: 0 4px 16px rgba(0,15,41,.18);
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-rapide);
}
.pied-page__bleu-cta img { width: 1rem; height: 1rem; opacity: 0.75; }
.pied-page__bleu-cta:hover {
  background: var(--gris-clair);
  box-shadow: 0 6px 24px rgba(0,15,41,.18);
  transform: translateY(-2px);
}
.pied-page__bleu-cta:active { transform: scale(0.97); }

/* Tuile jaune */
.pied-page__jaune {
  background: var(--jaune-01);
  border-radius: 1.375rem;
  padding: clamp(2rem, 3.5vw, 3rem) clamp(2rem, 4vw, 3.5rem);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.pied-page__nav {
  display: flex; flex-direction: column;
  gap: clamp(0.5rem, 1vw, 0.875rem);
}
.pied-page__nav-lien {
  font-family: var(--police); font-weight: 600;
  font-size: clamp(1.25rem, 1rem + 1vw, 2rem);
  color: var(--noir); text-decoration: none;
  letter-spacing: -0.02em; line-height: 1.2;
  transition: opacity var(--transition-rapide);
}
.pied-page__nav-lien:hover { opacity: 0.55; }

.pied-page__cta-rond {
  width: clamp(5rem, 8vw, 7rem); height: clamp(5rem, 8vw, 7rem);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}
.pied-page__cta-rond:hover { transform: rotate(8deg) scale(1.05); }
.pied-page__cta-rond img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Barre grise */
.pied-page__barre {
  background: #F2F2F2;
  border-radius: 1.375rem;
  padding: 0.875rem 1.75rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.pied-page__newsletter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--police); font-weight: 500; font-size: 0.9375rem;
  color: var(--noir); text-decoration: none;
  border: 1.5px solid var(--gris-bord);
  padding: 0.4rem 1rem;
  border-radius: var(--rayon-pill);
  background: var(--blanc); white-space: nowrap;
  transition: border-color var(--transition-rapide);
}
.pied-page__newsletter img { width: 0.875rem; height: 0.875rem; }
.pied-page__newsletter:hover { border-color: var(--noir); }

/* Newsletter form (footer) */
.pied-page__newsletter-wrap { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pied-page__newsletter-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.pied-page__newsletter-form input[type="email"] {
  font-family: var(--police); font-size: 0.875rem; color: var(--noir);
  border: 1.5px solid var(--gris-bord); border-radius: var(--rayon-pill);
  padding: 0.4rem 0.875rem; background: var(--blanc); outline: none;
  transition: border-color var(--transition-rapide); width: 13rem;
}
.pied-page__newsletter-form input[type="email"]:focus { border-color: var(--bleu-01); }
.pied-page__newsletter-form button[type="submit"] {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--police); font-weight: 600; font-size: 0.875rem;
  color: var(--blanc); background: var(--bleu-01);
  border: none; border-radius: var(--rayon-pill);
  padding: 0.45rem 1rem; cursor: pointer; white-space: nowrap;
  transition: background var(--transition-rapide);
}
.pied-page__newsletter-form button[type="submit"]:hover { background: var(--bleu-02); }
.pied-page__newsletter-form button[type="submit"] img { width: 0.8rem; height: 0.8rem; filter: brightness(0) invert(1); }
.newsletter-rgpd {
  display: flex; align-items: center; gap: 0.35rem; width: 100%;
  font-family: var(--police); font-size: 0.75rem; color: #718096; cursor: pointer;
}
.newsletter-rgpd a { color: var(--bleu-01); text-decoration: underline; }
.newsletter-feedback {
  font-family: var(--police); font-size: 0.8125rem; font-weight: 500; padding: 0.25rem 0;
}

.pied-page__credit {
  font-family: var(--police); font-weight: 400;
  font-size: 0.9375rem; color: #718096;
  text-align: center; flex: 1;
}

.pied-page__reseaux {
  display: flex; align-items: center; gap: 0.375rem;
}
.pied-page__reseaux a {
  display: flex; align-items: center;
  transition: transform var(--transition-rapide);
}
.pied-page__reseaux a:hover { transform: scale(1.1); }
.pied-page__reseaux img { width: 1.875rem; height: 1.875rem; display: block; }
.pied-page__marque {
  font-family: var(--police); font-weight: 600;
  font-size: 0.9375rem; color: var(--noir);
  margin-left: 0.375rem; white-space: nowrap;
}

/* Légal */
.pied-page__legal {
  display: flex; align-items: center; justify-content: center;
  gap: 2rem; flex-wrap: wrap;
}
.pied-page__legal a {
  font-family: var(--police); font-weight: 400;
  font-size: 0.8125rem; color: #9BAFCB;
  text-decoration: none;
  transition: color var(--transition-rapide);
}
.pied-page__legal a:hover { color: var(--noir); }

@media (max-width: 900px) {
  .pied-page__haut { grid-template-columns: 1fr; min-height: auto; }
  .pied-page__jaune { gap: 1.5rem; }
}
@media (max-width: 768px) {
  .pied-page { padding-inline: 1rem; }
  .pied-page__barre {
    flex-direction: column; align-items: center;
    border-radius: 1.25rem; padding: 1.25rem; gap: 0.875rem;
  }
  .pied-page__credit { text-align: center; }
}
@media (max-width: 480px) {
  .pied-page__nav-lien { font-size: 1.25rem; }
  .pied-page__legal { gap: 1rem; }
}


/* ============================================================
   BOUTON FLOTTANT
============================================================ */
.bulle-flottante {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 500;
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--blanc); border-radius: 0.875rem;
  padding: 0.75rem 1.125rem;
  font-family: var(--police); font-weight: 600; font-size: 0.9rem; color: var(--noir);
  box-shadow: 0 6px 24px rgba(0,15,41,.15);
  border: 1.5px solid var(--gris-bord);
  text-decoration: none; cursor: pointer;
  animation: pulsation 2.8s ease-in-out infinite;
}
.bulle-flottante:hover {
  animation: none;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0,15,41,.2);
}

@keyframes pulsation {
  0%,100% { transform: translateY(0);    box-shadow: 0 6px 24px rgba(0,15,41,.15); }
  50%      { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(46,125,255,.2); }
}

@media (max-width: 768px) {
  .bulle-flottante { bottom: 1rem; right: 1rem; font-size: 0.8125rem; padding: 0.625rem 0.875rem; }
}


/* ============================================================
   MOBILE — accueil.css
   Règles ajoutées en fin de fichier.
   Ne modifient aucun code existant au-dessus.
============================================================ */

/* ---- HERO ---- */
@media (max-width: 768px) {
  .hero { padding-top: 4.5rem; }

  .hero__interieur {
    padding-inline: 1.25rem;
    gap: 0;
  }

  /* Petite photo avatar du haut : plus petite */
  .hero__avatar-haut img { height: 2.5rem; }

  .hero__titre {
    font-size: clamp(1.875rem, 8vw, 2.75rem);
    line-height: 1.08;
    padding-inline: 0;
  }

  .hero__sous-titre {
    font-size: 0.9375rem;
    margin-top: 1rem;
    max-width: 100%;
  }

  .hero__actions {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    margin-top: 1.25rem;
  }

  .btn-hero {
    width: 100%;
    justify-content: center;
    font-size: 0.9375rem;
  }

  .hero__stats {
    flex-direction: column;
    gap: 0.375rem;
    margin-top: 1.25rem;
    align-items: center;
  }

  .hero__stat { font-size: 0.875rem; }

  .hero__video-wrap {
    margin-top: 1.75rem;
    margin-inline: 0;
  }
}

@media (max-width: 480px) {
  .hero__titre { font-size: clamp(1.75rem, 7.5vw, 2.5rem); }
}


/* ---- PARTENAIRES ---- */
@media (max-width: 768px) {
  .partenaires { padding-block: 2rem; }
  .partenaires__interieur { padding-inline: 1.25rem; gap: 1.25rem; }
  .partenaires__logos { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .partenaires__logo { height: 1.5rem; }
}


/* ---- SECTION SERVICES — carousel horizontal sur mobile ---- */
/*
   On override les règles grid existantes en dessous pour
   afficher les 4 cartes en scroll-snap carousel, comme
   .pourquoi__carousel, au lieu de les empiler verticalement.
*/
@media (max-width: 768px) {
  .services { padding-block: clamp(2.5rem, 5vw, 4rem); }

  .services__interieur { padding-inline: 1.25rem; }

  .services__entete { margin-bottom: 1.75rem; }

  .services__titre {
    font-size: clamp(1.625rem, 6vw, 2.25rem);
    line-height: 1.1;
  }

  /* Carousel — override grid avec flex + scroll-snap */
  .services__grille {
    display: flex;
    grid-template-columns: unset;  /* neutralise les règles grid au-dessus */
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 0.75rem;
    /* Déborde à droite pour l'effet "peek" de la prochaine carte */
    margin-right: calc(-1 * 1.25rem);
    padding-right: 1.25rem;
  }
  .services__grille::-webkit-scrollbar { display: none; }

  /* Chaque carte = 80 % de la largeur visible, snappée */
  .carte-service {
    flex: 0 0 80vw;
    width: 80vw;
    scroll-snap-align: start;
    /* On enlève l'éventuel margin/width hérité du grid */
    max-width: none;
  }
}

@media (max-width: 480px) {
  .carte-service { flex: 0 0 85vw; width: 85vw; }
}


/* ---- SECTION MISSION ---- */
@media (max-width: 768px) {
  .mission { padding-block: clamp(2.5rem, 5vw, 4rem); }

  .mission__interieur {
    grid-template-columns: 1fr;
    padding-inline: 1.25rem;
    gap: 2rem;
  }

  .mission__colonne-gauche {
    padding-right: 0;
    gap: 1.25rem;
    order: 1;
  }

  .mission__colonne-droite {
    order: 0;
    justify-content: center;
  }

  .mission__carte-france { max-width: 280px; margin-inline: auto; }

  .mission__titre {
    font-size: clamp(1.625rem, 6vw, 2.25rem);
    line-height: 1.1;
  }

  .mission__texte { max-width: 100%; font-size: 0.9375rem; }

  /* Bouton découvrir pleine largeur */
  .mission__colonne-gauche .btn-hero {
    width: 100% !important;
    justify-content: center;
    box-shadow: var(--ombre-sm) !important;
  }
}


/* ---- SECTION POURQUOI (carousel existant) ---- */
@media (max-width: 768px) {
  .pourquoi { padding-block: clamp(2.5rem, 5vw, 4rem); }
  .pourquoi__interieur { padding-inline: 1.25rem; }
  .pourquoi__titre { font-size: clamp(1.625rem, 6vw, 2.25rem); }

  /* Contrôles : voir le bloc consolidé en fin de fichier */
}


/* ---- SECTION PROJETS (slider auto existant) ---- */
@media (max-width: 768px) {
  .projets { padding-block: clamp(2.5rem, 5vw, 4rem); }
  .projets__interieur { padding-inline: 1.25rem; }

  .projets__titre { font-size: clamp(1.625rem, 6vw, 2.25rem); }
  .projets__sous-titre { font-size: 0.9375rem; }

  /* Bouton portfolio pleine largeur */
  .projets__entete .btn-hero {
    width: 100% !important;
    justify-content: center;
  }

  .carte-projet { width: clamp(14rem, 72vw, 22rem); }
}


/* ---- CTA CONTACT ---- */
@media (max-width: 768px) {
  .cta-contact {
    margin-inline: 1rem;
    border-radius: 1.25rem;
    padding-block: 2.5rem;
  }

  .cta-contact__interieur { padding-inline: 1.25rem; gap: 1.5rem; }

  .cta-contact__titre {
    font-size: clamp(1.5rem, 6vw, 2.25rem);
    line-height: 1.2;
  }

  .cta-contact__etapes {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    width: 100%;
  }

  .cta-contact__btn {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
  }

  .cta-contact__preuve { flex-direction: column; text-align: center; }
  .cta-contact__preuve-texte { text-align: center; }
}


/* ---- FOOTER ---- */
@media (max-width: 768px) {
  .pied-page {
    padding-inline: 0.875rem;
    padding-bottom: 1.25rem;
  }

  .pied-page__haut {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 0.625rem;
  }

  .pied-page__bleu {
    padding: 1.75rem 1.5rem;
    border-radius: 1.125rem;
  }

  .pied-page__bleu-titre {
    font-size: clamp(1.375rem, 5.5vw, 1.875rem);
    line-height: 1.25;
  }

  .pied-page__bleu-cta {
    width: 100%;
    justify-content: center;
  }

  .pied-page__jaune {
    padding: 1.75rem 1.5rem;
    border-radius: 1.125rem;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }

  .pied-page__nav { gap: 0.625rem; }

  .pied-page__nav-lien { font-size: 1.375rem; }

  .pied-page__cta-rond { width: 4rem; height: 4rem; }

  .pied-page__barre {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 1.125rem;
  }

  .pied-page__newsletter { width: 100%; justify-content: center; }
  .pied-page__credit { text-align: center; font-size: 0.875rem; }

  .pied-page__reseaux { order: -1; }

  .pied-page__legal {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
  }
}

/* ---- BOUTON FLOTTANT (mobile additionnel) ---- */
@media (max-width: 480px) {
  .bulle-flottante {
    bottom: 0.75rem;
    right: 0.75rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    border-radius: 0.75rem;
  }
}


/* ============================================================
   MOBILE — RETOURS 14 POINTS
   Ajouts en fin de fichier — ne modifient rien au-dessus.
============================================================ */

/* ---- Hero adapté à la navbar pill (top 0.75rem + ~3.5rem hauteur) ---- */
@media (max-width: 768px) {
  .hero { padding-top: 5.5rem; }
}


/* 3. H1 plus grand */
@media (max-width: 768px) {
  .hero__titre {
    font-size: clamp(2.125rem, 8.5vw, 3rem);
  }
}
@media (max-width: 480px) {
  .hero__titre {
    font-size: clamp(1.9375rem, 8vw, 2.625rem);
  }
}


/* 4. Logos partenaires — 2-3× plus grands + slider auto */
@keyframes defiler-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (max-width: 768px) {
  .partenaires__interieur { overflow: hidden; }

  .partenaires__logos {
    flex-wrap: nowrap;
    width: max-content;
    gap: 3rem;
    animation: defiler-logos 20s linear infinite;
    padding-block: 0.25rem;
  }
  .partenaires__logos:hover { animation-play-state: paused; }

  .partenaires__logo {
    height: clamp(3rem, 8vw, 4.5rem); /* ~2-3× la taille desktop */
    flex-shrink: 0;
    opacity: 0.55;
    filter: grayscale(1);
  }
}


/* 5. Services — contrôles flèches carousel */
.services__controles { display: none; } /* masqué sur desktop */

@media (max-width: 768px) {
  .services__controles {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F0F0F0;
    width: 9rem;
    height: 4rem;
    border-radius: 2rem;
    padding: 0.5rem 0.25rem;
    margin-top: 1.5rem;
    margin-inline: auto;
    gap: 0;
  }
  .services__btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease, opacity 0.2s;
    flex: 1;
    justify-content: center;
  }
  .services__btn img {
    width: clamp(3rem, 10vw, 4.5rem);
    height: auto;
    display: block;
  }
  .services__btn:hover:not(:disabled) { transform: scale(1.06); }
  .services__btn:active { transform: scale(0.94); }
  .services__btn:disabled { opacity: 0.4; cursor: default; }
}


/* 6. Section mission — image droite collée au bord de l'écran */
@media (max-width: 768px) {
  .mission__colonne-droite {
    margin-right: calc(-1 * 1.25rem);
    overflow: hidden;
    justify-content: flex-end;
  }
  .mission__carte-france {
    width: calc(100% + 1.25rem);
    max-width: none;
    border-radius: 1.25rem 0 0 1.25rem;
    display: block;
  }
}


/* 7. H2 un peu plus grands sur mobile */
@media (max-width: 768px) {
  .services__titre,
  .mission__titre,
  .pourquoi__titre,
  .projets__titre,
  .cta-contact__titre {
    font-size: clamp(1.9375rem, 7.5vw, 2.75rem);
    line-height: 1.08;
  }
}


/* 8. Logos "Ils nous soutiennent" plus grands */
@media (max-width: 768px) {
  .mission__soutiens-logos { gap: 2rem; }
  .mission__soutien-logo   { height: clamp(2.75rem, 7.5vw, 4rem); }
}


/* 9. "Pourquoi" titre — supprime le <br> sur mobile */
@media (max-width: 768px) {
  .pourquoi__titre br { display: none; }
}


/* 10. Pourquoi contrôles — voir le bloc consolidé en fin de fichier */


/* 11. CTA contact — étapes horizontalement centrées */
@media (max-width: 768px) {
  .cta-contact__etapes {
    align-items: center; /* override flex-start */
  }
  .cta-contact__etape { justify-content: center; }
}


/* 12. Footer CTA — texte raccourci sur mobile */
@media (max-width: 768px) {
  .pied-page__bleu-cta {
    font-size: 0; /* cache le texte long */
    gap: 0.45rem;
  }
  .pied-page__bleu-cta img {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
  }
  .pied-page__bleu-cta::after {
    content: "Je contacte l'agence";
    font-family: var(--police);
    font-weight: 600;
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    color: var(--noir);
    line-height: 1;
  }
}


/* 13. Footer jaune — CTA rond en haut à droite, plus grand */
@media (max-width: 768px) {
  .pied-page__jaune {
    position: relative;
    padding-top: 2rem;
    /* La nav peut prendre toute la largeur maintenant que le rond est absolu */
  }
  .pied-page__cta-rond {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 5.5rem;
    height: 5.5rem;
  }
  /* Évite que le nav empiète sur le rond absolu */
  .pied-page__nav { padding-right: 6.5rem; }
}


/* 14. Mentions légales — côte à côte (flex-row) */
@media (max-width: 768px) {
  .pied-page__legal {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
  }
  .pied-page__legal a { font-size: 0.75rem; }
}


/* ============================================================
   MOBILE — RETOURS 6 POINTS (2ème série)
============================================================ */

/* 1a. CTA Contact — bottom géré dans style.css */

/* 1b. Bulle flottante cachée quand le menu est ouvert */
.nav-est-ouverte .bulle-flottante {
  opacity: 0 !important;
  pointer-events: none !important;
  animation-play-state: paused !important;
}

/* 6. Bulle flottante cachée quand le footer est visible */
.bulle-flottante {
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.bulle-flottante.bulle--footer {
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
  animation-play-state: paused;
}

/* 2. H1 encore plus grand + line-height */
@media (max-width: 768px) {
  .hero__titre {
    font-size: clamp(2.375rem, 9.5vw, 3.25rem);
    line-height: 1.18;
  }
}
@media (max-width: 480px) {
  .hero__titre {
    font-size: clamp(2.125rem, 9vw, 3rem);
    line-height: 1.18;
  }
}

/* 3. Section services — masquer <br> dans le H2 sur mobile */
@media (max-width: 768px) {
  .services__titre br { display: none; }
}

/* 5. Section mission — corriger le décalage gauche du texte
      La règle @900px ajoute padding-left: var(--marge-page)
      sur .mission__colonne-gauche, on la remet à zéro ici. */
@media (max-width: 768px) {
  .mission__colonne-gauche {
    padding-left: 0;
    padding-right: 0;
  }
}


/* ============================================================
   MOBILE — RETOURS 6 POINTS (3ème série)
============================================================ */

/* 3 + 1. Hero — remplacer Noé par Nolan & Lucas, avatars baissés */
@media (max-width: 768px) {
  /* Cacher Noé */
  .hero__avatar-haut { display: none; }

  /* Montrer Nolan (gauche) et Lucas (droite) — légèrement plus bas */
  .hero__avatar-gauche,
  .hero__avatar-droite {
    display: block;
    top: auto;
    bottom: -2.5rem;   /* plus bas qu'avant (-1.5rem) pour ne pas chevaucher le titre */
    transform: none;
  }
  .hero__avatar-gauche { left: 0; }
  .hero__avatar-droite { right: 0; }
  .hero__avatar-gauche img,
  .hero__avatar-droite img {
    height: clamp(3rem, 10vw, 4.25rem);
  }
  /* Espace sous le titre pour que les avatars ne chevauchent pas le sous-titre */
  .hero__zone-titre { margin-bottom: clamp(3.5rem, 7vw, 5rem); }
}


/* 4. Section mission — image SOUS les logos soutiens, non rognée */
@media (max-width: 768px) {
  .mission__colonne-droite {
    order: 2;        /* après colonne-gauche (order: 1) */
    margin-right: 0; /* supprime le débordement précédent */
    overflow: visible;
    justify-content: center;
  }
  .mission__carte-france {
    width: 100%;
    max-width: 100%;
    border-radius: 1.25rem;
  }
}


/* 5. Titre mission — centré + marges haut/bas */
@media (max-width: 768px) {
  .mission__titre {
    text-align: center;
    padding-top: 0.5rem;
    padding-bottom: 0.25rem;
  }
}


/* 6. Projets — masquer <br> après "marquent" */
@media (max-width: 768px) {
  .projets__titre br { display: none; }
}


/* ============================================================
   MOBILE — RETOURS 6 POINTS (4ème série)
============================================================ */

/* 4. Mission — paragraphe centré */
@media (max-width: 768px) {
  .mission__texte { text-align: center; }
}

/* 5. Pourquoi + Services — contrôles et flèches (consolidé) */
@media (max-width: 768px) {
  /* Conteneur gris arrondi — même style pour les deux sections */
  .pourquoi__controles,
  .services__controles {
    width: 9.5rem;
    height: 4.25rem;
    border-radius: 2rem;
    padding: 0.5rem 0rem 0.125rem 0.25rem;
    background: #F0F0F0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .pourquoi__controles { margin-top: 1.75rem; }
  .services__controles { margin-top: 1.5rem; margin-inline: auto; }

  /* Boutons — même style pour les deux sections */
  .pourquoi__btn,
  .services__btn {
    flex: 1;
    padding: 0;
    justify-content: center;
    align-items: center;
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s;
  }
  .pourquoi__btn img,
  .services__btn img {
    height: 5.25rem;
    width: auto;
    min-width: unset;
    max-width: none;
    display: block;
  }
  .pourquoi__btn:hover:not(:disabled),
  .services__btn:hover:not(:disabled) { transform: scale(1.06); }
  .pourquoi__btn:active,
  .services__btn:active { transform: scale(0.94); }
  .pourquoi__btn:disabled,
  .services__btn:disabled { opacity: 0.4; cursor: default; }
}

/* ============================================================
   PANEL SERVICES MOBILE — header mega-droite (accueil.css gagne sur style.css)
============================================================ */

/* Masqué sur desktop */
.mega-droite-header { display: none !important; }

@media (max-width: 768px) {
  /* Header : simple conteneur centré, sans trait, sans padding excessif */
  .mega-droite-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin-top: 1rem !important;
    border-bottom: none !important;  /* pas de trait */
    background: transparent !important;
    flex-shrink: 0 !important;
    min-height: 2.625rem !important;
  }

  /* Bouton retour — cercle gris identique au X, fixé en haut à gauche */
  .mega-droite-header .mega-menu__retour {
    position: fixed !important;
    top: 0.5rem !important;
    left: 1rem !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #EBEBEB !important;
    border: none !important;
    border-radius: 50% !important;
    width: 2.625rem !important;
    height: 2.625rem !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 102 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  .mega-droite-header .mega-menu__retour svg {
    display: block !important;
    flex-shrink: 0 !important;
  }

  /* Titre "Nos services" — centré, un peu plus grand */
  .mega-droite-titre {
    display: block !important;
    font-family: var(--police, sans-serif) !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    color: #1a1a1a !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
    pointer-events: none !important;
    line-height: 2.625rem !important; /* aligne verticalement avec les boutons */
  }
}

/* 6. Logos partenaires — cacher les doublons aria-hidden sur desktop */
@media (min-width: 769px) {
  .partenaires__logo[aria-hidden="true"] { display: none; }
  .partenaires__logos { animation: none !important; flex-wrap: wrap; }
}