/* ============================================================
   responsive.css — Ajustements complémentaires mobile/tablette
   Impact Communication

   RÈGLE : ce fichier ne contient QUE des règles à l'intérieur
   de @media. Aucun style desktop (>= 1024px) n'est modifié.
   Il est chargé APRÈS tous les autres CSS et vient combler des
   trous laissés par les media queries déjà présentes dans
   main.css / components.css / pages/*.css (notamment le palier
   tablette 768–1023px, et quelques hauteurs/tailles fixes en px
   qui ne s'adaptaient pas en dessous de 1024px).

   Breakpoints utilisés (alignés sur l'existant du site) :
     - Tablette : 768px – 1023px
     - Mobile   : <= 767px
     - Petit mobile : <= 480px / <= 375px (retouches fines)
============================================================ */

/* ============================================================
   GLOBAL — sécurité anti-débordement horizontal (mobile uniquement)
============================================================ */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden;
  }

  img, svg, video {
    max-width: 100%;
  }
}

/* ============================================================
   NAVBAR (components.css) — palier tablette manquant
============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  .navbar-brand .logo-square { height: 38px; }
  .nav-link { padding: 0.5rem 1rem !important; }
}

@media (max-width: 767px) {
  .navbar-brand .logo-square { height: 34px; }
  .nav-link { padding: 0.6rem 0 !important; }
  #navbar { padding: 1rem 0; }
  #navbar.scrolled { padding: 0.65rem 0; }
}

/* Fond blanc permanent + bouton on/off masqué hors menu ouvert
   (navbar-expand-lg bascule en mode "mobile" sous 992px) */
@media (max-width: 991.98px) {
  #navbar,
  #navbar.scrolled {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  #navbar .btn-off {
    display: none;
  }

  /* #navMenu reçoit .show quand le hamburger est ouvert (Bootstrap) ;
     .btn-off est un sibling placé après #navMenu dans le markup */
  #navbar #navMenu.show ~ .btn-off {
    display: inline-flex;
    margin-top: 0;
  }
}

/* ============================================================
   FOOTER (components.css) — réduction proportionnelle mobile
============================================================ */
@media (max-width: 767px) {
  .footer { padding: 2.75rem 0 1.5rem; }
  .footer-coming { font-size: 1.5rem; }
  .footer-bottom { margin-top: 2rem; padding-top: 1rem; }

  /* Tout le texte aligné à gauche sur mobile (Bootstrap .text-end
     utilise !important, donc on doit le neutraliser avec !important
     aussi, en restant scopé au footer) */
  .footer .text-end { text-align: left !important; }

  /* Petit espace sous le logo */
  .footer-logo { margin-bottom: 1rem; }
}

/* ============================================================
   STAT CARDS (components.css) — hauteur fixe 180px non adaptée
============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  .stat-card { height: 160px; padding: 1.5rem 1.25rem; }
}

@media (max-width: 767px) {
  .stat-card { height: auto; min-height: 140px; padding: 1.5rem 1.25rem; }
}

/* ============================================================
   HOME — corrections pour le layout empilé (<= 992px)

   Bug source (home.css) : .hero-text-col garde margin-top:-320px
   et .expertise-home garde margin-top:-220px à toutes les tailles.
   Ces valeurs ne servent qu'à compenser le layout 2 colonnes du
   desktop (texte aligné sur une carte plus haute à droite). Une
   fois la grille empilée en 1 colonne (home.css bascule à 992px),
   ces marges négatives restent actives et tirent les sections
   les unes sur les autres, créant les grands vides/superpositions
   constatés sur mobile et tablette. On les neutralise ici.

   Bug source #2 (home.css, bloc RESPONSIVE en bas de fichier) :
   un ancien @media réduit .expertise-dots (right/top/bottom/width)
   pour une classe `.expertise-dot-marker` qui n'existe plus dans
   le HTML actuel. Comme .expertise-dots n'a plus inset:0 à ces
   tailles, les 6 points rouges (calc(50% + X%)) sont recalculés
   par rapport à une boîte rétrécie/décalée et sortent du cercle
   (visuellement : points "disparus"). On restaure inset:0.
============================================================ */
@media (max-width: 992px) {
  .hero-text-col { margin-top: 0; }
  .expertise-home { margin-top: 0; }
  .hero-home {
    min-height: initial;
    padding: 90px 0 50px;
  }
}

@media (max-width: 767px) {
  /* Ordre inversé : la carte Maroc en premier, le texte ensuite.
     .hero-grid est déjà grid-template-columns:1fr ici (home.css) ;
     `order` fonctionne aussi bien sur grid item que sur flex item. */
  .hero-text-col { order: 2; }
  .hero-map-wrap,
  .hero-map-col { order: 1; }
  .hero-eyebrow { font-size: 1.4rem; }
}

@media (max-width: 480px) {
  .hero-eyebrow { font-size: 1.15rem; }
}

/* ============================================================
   ABOUT — palier tablette manquant pour le hero
============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-about { padding: 90px 0 60px; }
  .hero-about-title-section:after{
    display: none;
  }
  .history-dates{height: auto;}
}

/* ABOUT — Our Expertise en tablette : on garde la grille 3 colonnes
   d'about.css (flex-wrap, calc(33.333% - 0.84rem)), on affiche juste
   la description sous chaque carte au lieu de la masquer */
@media (max-width: 1023px) and (min-width: 768px) {
  .exp-item{
    aspect-ratio: initial;
    justify-content: flex-start;
  }
  .exp-card,
  .exp-grid .exp-item:hover .exp-card {
    height: 200px;
    padding: 1.75rem 1.25rem 2.25rem;
  }

  .exp-desc,
  .exp-grid .exp-item:hover .exp-desc {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    padding: 1rem 0.25rem 0;
  }

  .exp-wrap { padding-bottom: 0; }
}

@media (max-width: 767px) {
  .hero-about { padding: 90px 0 60px; }
  .hero-about-title { font-size: 1.75rem; }
}

/* ABOUT — espace réduit entre les blocs sur mobile
   (hero-about / key-figures / history-section / expertise-about /
   approach-section gardent leurs paddings desktop à toutes les
   tailles dans about.css, jamais réduits en dessous de 992px) */
@media (max-width: 767px) {
  .key-figures { padding: 0 0 55px; }
  .history-section { padding: 0 0 55px; }
  .expertise-about { padding: 50px 0; }
  .approach-section { padding: 0 0 55px; }
}

/* ABOUT — Our Expertise : 1 carte par ligne, description visible
   en dessous (au lieu du hover desktop + description masquée que
   prévoit about.css sous 992px) */
@media (max-width: 767px) {
  .hero-about-title-section:after{
    display: none;
  }
  .exp-grid {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .exp-item,
  .exp-grid:hover .exp-item,
  .exp-grid .exp-item:hover,
  .exp-grid:hover .exp-item:nth-child(6),
  .exp-grid:has(.exp-item:nth-child(6):hover) .exp-item:nth-child(1) {
    flex: 1 1 100%;
    width: 100%;
    aspect-ratio: auto;
    opacity: 1;
    pointer-events: auto;
  }

  .exp-item:last-child { margin-bottom: 0; }

  .exp-card,
  .exp-grid .exp-item:hover .exp-card {
    height: 200px;
    padding: 1.75rem 1.25rem 2.25rem;
  }

  .exp-desc,
  .exp-grid .exp-item:hover .exp-desc {
    display: block;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    padding: 1rem 0.25rem 0;
  }

  .exp-wrap { padding-bottom: 0; }
}

/* ============================================================
   CONTACT — espacement de section + form + map

   Problèmes traités :
   - hero-contact / contact-grid gardent leur padding desktop
     (140px / 80px) sur tout le palier tablette 769-991px
     (contact.css ne réduit qu'à partir de 768px).
   - .map-section a une hauteur fixe (350px) jamais adaptée avant
     768px, et reste haute sur mobile.
   - .contact-info (gap 2.25rem) et .info-social (44px) gardent
     leurs valeurs desktop sur le palier tablette.
============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-contact { padding: 110px 0 60px; }
  .contact-grid { padding: 0 0 60px; }
  .contact-info { gap: 1.85rem; }
  .map-section { height: 300px; }
}

@media (max-width: 767px) {
  .hero-contact { padding: 95px 0 50px; }
  .contact-grid { padding: 0 0 50px; }
  .contact-info { gap: 1.5rem; }
  .info-social { width: 40px; height: 40px; }
  .map-section { height: 220px; }
  .contact-form { gap: 1.25rem; }
}

@media (max-width: 480px) {
  .hero-contact-title { font-size: 2.2rem; }
  .map-section { height: 190px; }
}

/* ============================================================
   TEAM — espacement de section + leadership (photo/citation)

   Problèmes traités :
   - hero-team / beliefs / leadership / executive / approach
     gardent leur padding desktop (100-140px) sur tout le palier
     tablette 769-991px (team.css ne réduit qu'à partir de 768px,
     pas avant), et restent encore assez espacés en mobile.
   - .leader-row garde une colonne photo fixe (200px) et un gros
     guillemet (.leader-big-quote, 150px) positionné en absolute
     avec une image à 100px fixe : ça ne rétrécit jamais assez et
     ça mange la largeur du texte (.leader-quote-text est limité à
     calc(100% - 120px) pour laisser la place au guillemet).
============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero-team { padding: 100px 0 50px; }
  .beliefs-section,
  .leadership-section,
  .executive-section { padding: 0 0 60px; }
  .approach-section { padding: 0 0 60px; }

  .leader-row { grid-template-columns: 150px 1fr; gap: 1.75rem; }
  .leader-row.is-reverse { grid-template-columns: 1fr 150px; }
  .leader-photo { max-width: 150px; }

  .leader-quote-col,
  .leader-row.is-reverse .leader-quote-col { padding: 0.5rem 0 0; }

  .leader-big-quote { font-size: 5rem; height: 70px; top: 0; }
  .leader-row.is-reverse .leader-big-quote { top: 0; }
  .leader-big-quote img { width: 60px; }

  .leader-quote-text,
  .leader-row.is-reverse .leader-quote-text {
    max-width: 100%;
  }
  .leader-row, .leader-row:not(.is-reverse) .leader-big-quote img{
    margin-left: auto;
  }
}

@media (max-width: 767px) {
  .leader-row, .leader-row:not(.is-reverse) .leader-big-quote img{
    margin-left: auto;
  }
  .hero-team { padding: 90px 0 50px; }
  .beliefs-section,
  .leadership-section,
  .executive-section { padding: 0 0 50px; }
  .approach-section { padding: 0 0 50px; }

  .leaders-list { gap: 3rem; }

  /* Photo au-dessus, citation en dessous, peu importe le sens
     d'origine (.is-reverse) — affichage identique sur mobile */
  .leader-row,
  .leader-row.is-reverse {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .leader-row.is-reverse .leader-photo-col { order: 1; }
  .leader-row.is-reverse .leader-quote-col { order: 2; }

  .leader-photo-col,
  .leader-row.is-reverse .leader-photo-col {
    margin: 0;
  }
  .leader-photo {
    max-width: 140px;
    margin: 0 auto 1.25rem;
  }

  /* Le guillemet géant repasse dans le flux (plus en absolute) :
     fini le chevauchement et la largeur de texte rognée */
  .leader-quote-col,
  .leader-row.is-reverse .leader-quote-col {
    padding: 0;
  }

  .leader-big-quote,
  .leader-row.is-reverse .leader-big-quote {
    position: static;
    display: block;
    height: auto;
    top: auto;
    left: auto;
    right: auto;
    text-align: center;
    margin-bottom: 0.5rem;
  }
  .leader-big-quote img { width: 48px; }

  .leader-quote-text,
  .leader-row.is-reverse .leader-quote-text {
    max-width: 100%;
    margin: 0;
    text-align: center;
  }
  .leader-quote-text p,
  .leader-row.is-reverse .leader-quote-text p {
    font-size: 1.05rem;
    text-align: center;
  }
  .beliefs-title .reveal-wrap, [data-reveal] .reveal-wrap .line{
    line-height: 1.3 !important;
  }
}

@media (max-width: 480px) {
  .leader-photo { max-width: 120px; }
  .leader-quote-text p,
  .leader-row.is-reverse .leader-quote-text p { font-size: 1rem; }
}

/* ============================================================
   WORK — listing : palier tablette manquant pour work-row
============================================================ */
@media (max-width: 1023px) and (min-width: 768px) {
  .work-col-text { padding: 1.75rem; }
}

/* Médias "flex-row" en hauteur fixe (260px) : trop large sur mobile,
   on autorise le retour à la ligne + un scroll horizontal doux plutôt
   qu'un débordement brut. */
@media (max-width: 767px) {
  .work-media-row.is-flex-row {
    flex-wrap: wrap;
  }
  .work-media-row.is-flex-row .work-detail-media-wrap {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .work-detail-title { font-size: 1.4rem; }
}