/* ============================================================
   home.css — Page Home v1.3 (fidèle maquette)
============================================================ */

/* ============================================================
   HERO — carte Maroc collée au bord droit (full-bleed right)
============================================================ */

.hero-home {
  min-height: 100vh;
  padding: 120px 0 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Grille 2 colonnes — PAS de container Bootstrap ici */
.hero-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

/* Colonne texte : alignée avec le container Bootstrap à toutes les résolutions */
.hero-text-col {
  padding-left: max(calc((100vw - 1320px) / 2 + 3px), 12px); /* xxl : 1320px */
  padding-right: 1rem;
  margin-top: -320px;
}

@media (max-width: 1399px) {
  .hero-text-col {
    padding-left: max(calc((100vw - 1140px) / 2 + 3px), 12px); /* xl : 1140px */
  }
}

@media (max-width: 1199px) {
  .hero-text-col {
    padding-left: max(calc((100vw - 960px) / 2 + 3px), 12px); /* lg : 960px */
  }
}

@media (max-width: 991px) {
  .hero-text-col {
    padding-left: max(calc((100vw - 720px) / 2 + 3px), 12px); /* md : 720px */
  }
}

@media (max-width: 767px) {
  .hero-text-col {
    padding-left: max(calc((100vw - 540px) / 2 + 12px), 12px); /* sm : 540px */
  }
}

@media (max-width: 575px) {
  .hero-text-col {
    padding-left: 12px; /* xs : pas de container, juste le gutter */
  }
}

/* Colonne carte : COLLÉE AU BORD DROIT */
.hero-map-col {
  padding: 0; /* zéro padding → touche le bord */
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero-map-wrap {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 1 / 1.42;
  margin: 0;
}

.hero-map-wrap video,
.hero-map-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center; /* vidéo alignée à droite */
  display: block;
}

/* Textes hero inchangés */
.hero-eyebrow {
  font-family: var(--font-body);
  font-size: 1.9rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-black);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black);
}

.hero-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-black);
  letter-spacing: -0.01em;
}

.hero-title .reveal-wrap:last-child{
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.7vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--color-black);
  font-style: italic;
}

.hero-desc {
  max-width: 460px;
  border-left: 3px solid var(--color-black);
  padding-left: 1.25rem;
}

.hero-desc p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-black);
  margin-bottom: 0.75rem;
}

.hero-desc p strong {
  font-weight: 700;
}

.hero-desc p:last-child { margin-bottom: 0; }

/* ============================================================
   EXPERTISE — cercle collé au bord gauche (full-bleed left)
   Dots positionnés PRÉCISÉMENT sur le dernier cercle gris extérieur
============================================================ */
.expertise-home {
  padding: 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  margin-top: -220px;
}

/* Grille 2 colonnes custom (pas de Bootstrap) */
.expertise-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
}

/* Colonne cercle : COLLÉE AU BORD GAUCHE */
.expertise-visual-col {
  padding: 0; /* zéro padding → touche le bord gauche */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: -50px;
}

/* Container cercle — prend tout l'espace disponible */
.expertise-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: none;
  margin: 0;
}

/* Colonne texte : padding normal */
.expertise-content-col {
  padding-left: 2rem;
  padding-right: clamp(1.5rem, 5vw, 4rem);
}

/* Grand cercle SVG en arrière-plan */
.expertise-big-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

/* Cercle rouge central */
.expertise-center-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.expertise-center-circle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.expertise-center-label {
  position: relative;
  z-index: 3;
  color: #ffffff;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.01em;
  pointer-events: none;
  padding: 0 0.8rem;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.expertise-center-label em {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 3vw, 3.3rem);
  color: #ffffff;
  margin-bottom: 0.1rem;
  line-height: 1;
}

.expertise-center-label span {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(0.75rem, 2vw, 2.5rem);
  letter-spacing: 0.03em;
  color: #ffffff;
}

.expertise-center-label.is-changing {
  opacity: 0;
  transform: scale(0.95);
}

/* ★★★ DOTS : positionnés PRÉCISÉMENT sur le dernier cercle gris ★★★
   
   Le SVG grand-circle.svg a un viewBox de 534.44 x 550.5.
   Le dernier cercle extérieur (le plus grand) est centré avec un rayon
   qui touche les bords du SVG (~256 unités de rayon).
   
   Pour positionner 6 dots verticalement SUR la ligne extérieure droite :
   - On prend 6 positions sur l'arc droit du cercle (entre ~-60° et +60°)
   - Chaque dot est à X = centre + rayon * cos(θ), Y = centre + rayon * sin(θ)
   
   Plus simple : on positionne chaque dot en % sur un arc.
*/
.expertise-dots {
  position: absolute;
  inset: 0; /* prend toute la zone du cercle */
  z-index: 4;
  pointer-events: none; /* les dots individuels récupèrent le pointer */
}

.expertise-dot {
  position: absolute;
  background: var(--color-gray-300);
  border: none;
  padding: 0;
  margin: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(.25,.46,.45,.94);
  pointer-events: auto;
  /* Centre le point sur ses coordonnées */
  transform: translate(-50%, -50%);
}

/* Positions calculées sur l'arc droit du cercle (rayon ~47% du container) 
   Centre du cercle : 50%, 50%
   Pour 6 dots répartis verticalement sur l'arc DROIT :
   Angles : -50°, -30°, -10°, +10°, +30°, +50° (0° = horizontale droite)
   
   Pour un angle θ depuis le centre :
   left = 50% + 47% * cos(θ)
   top  = 50% + 47% * sin(θ)
*/

/* Dot 1 : angle -50° */
.expertise-dot:nth-child(1) {
  left: calc(50% + 30.3%);
  top:  calc(50% - 36%);
}
/* Dot 2 : angle -30° */
.expertise-dot:nth-child(2) {
  left: calc(50% + 40.6%);
  top:  calc(50% - 23.5%);
}
/* Dot 3 : angle -10° */
.expertise-dot:nth-child(3) {
  left: calc(50% + 46.2%);
  top:  calc(50% - 8.2%);
}
/* Dot 4 : angle +10° */
.expertise-dot:nth-child(4) {
  left: calc(50% + 46.4%);
  top:  calc(50% + 8.2%);
}
/* Dot 5 : angle +30° */
.expertise-dot:nth-child(5) {
  left: calc(50% + 41.2%);
  top:  calc(50% + 23.5%);
}
/* Dot 6 : angle +50° */
.expertise-dot:nth-child(6) {
  left: calc(50% + 31.4%);
  top:  calc(50% + 36%);
}

/* Hover : feedback visuel */
.expertise-dot:hover {
  background: var(--color-gray-500);
  width: 13px;
  height: 13px;
}

/* Active : rouge avec halo */
.expertise-dot.active {
  background: var(--color-red);
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 6px rgba(192, 57, 43, 0.15);
}

.expertise-dot:focus { outline: none; }
.expertise-dot:focus-visible {
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.35);
}

/* Colonne droite texte */
.expertise-content {
  padding-top: 2rem;
}

.expertise-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-black);
  margin: 0;
}

.expertise-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.7;
  font-style: italic;
  color: var(--color-black);
  max-width: 460px;
}

.btn-learn-more {
  display: inline-block;
  background: linear-gradient(135deg, #b70404 0%, #8e0404 100%);
  color: white;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}

.btn-learn-more:hover {
  color: white;
  transform: translateY(-2px);
}

/* Dark mode */
body.dark-mode .expertise-home        { border-color: #222; }
body.dark-mode .expertise-title       { color: #F0F0EC; }
body.dark-mode .expertise-dot         { background: #333; }
body.dark-mode .expertise-dot:hover   { background: #555; }
body.dark-mode .expertise-dot.active  { background: var(--color-red); }
body.dark-mode .hero-title            { color: #F0F0EC; }
body.dark-mode .hero-desc             { border-color: #333; }
body.dark-mode .hero-desc p strong    { color: #F0F0EC; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 992px) {
  /* Sur tablette : empiler les colonnes */

  .expertise-content-col {
    padding-left: clamp(1.5rem, 5vw, 4rem);
    padding-right: clamp(1.5rem, 5vw, 4rem);
  }

  /* La carte reprend du padding sur tablette (ne touche plus le bord) */
  .hero-map-col {
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    justify-content: center;
  }

  .hero-map-wrap {
    max-width: 500px;
    margin: 0 auto;
  }

  /* Le cercle reprend du padding sur tablette */
  .expertise-visual-col {
    padding: 0 clamp(1.5rem, 5vw, 4rem);
    justify-content: center;
  }

  .expertise-visual {
    max-width: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {

  .hero-grid,
  .expertise-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-desc { padding-left: 1rem; }

  /* Dots plus petits sur mobile */
  .expertise-dot    { width: 8px; height: 8px; }
  .expertise-dot:hover  { width: 10px; height: 10px; }
  .expertise-dot.active { width: 10px; height: 10px; box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.15); }
  .expertise-content-col {
    padding-left: calc(1.5rem * .5);
    padding-right: calc(1.5rem * .5);
  }
}

/* ============================================================
   CASE STUDIES — carousel à gauche, flèches verticales à droite
   (le carousel NE colle PAS au bord droit — il laisse la place aux flèches)
============================================================ */
.case-studies-home {
  padding: 100px 0;
  overflow: hidden;
}

.cs-header {
  margin-bottom: 3rem;
}

.cs-header-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 3rem;
  align-items: flex-start;
}

.cs-header-left,
.cs-header-right { display: flex; flex-direction: column; }

.cs-pagination {
  display: flex;
  gap: 6px;
  margin-top: 1.5rem;
}

.cs-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-gray-500);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.cs-dot.active { background: var(--color-black);width:32px; }

.section-intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--color-black);
  margin: 0;
}

/* Container du carousel : prend toute la 1ère colonne */
.cs-carousel-container {
  min-width: 0; /* ← crucial pour que le grid respecte la largeur (sinon Owl déborde) */
  overflow: hidden;
}

/* Cards */
.cs-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.cs-card-img {
  width: 100%;
  overflow: hidden;
  background: var(--color-gray-100);
  border-radius: 8px;
  overflow: hidden;
}

.cs-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.25,.46,.45,.94);
  display: block;
}

.cs-card:hover .cs-card-img img { transform: scale(1.04); }

/* ── Corps de la carte (badge + client + titre) ── */
.cs-card-body {
  padding:       0.75rem 1rem;
  background:    #f4f4f4;
  border-radius: 8px;
  margin-top: 0.75rem;
}

.cs-badge {
  display: inline-block;
  font-size: 0.68rem;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.65rem;
  border: 0.5px solid var(--color-black);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  color: var(--color-black);
  border-radius: 8px;
}

.cs-client {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.3rem;
  color: var(--color-black, #111);
}

.cs-title {
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
  color: var(--color-black, #777);
  font-style: italic;
  max-width: 200px;
}

.cs-card[data-slug*="adidas"] .cs-title { max-width: 100%; }

.cs-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-400);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem;
  text-align: center;
}

/* Responsive */
@media (max-width: 992px) {
  .cs-header-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .case-studies-home { padding: 60px 0; }

  .cs-carousel-wrap {
    grid-template-columns: 1fr;
  }

}

/* ============================================================
   CLIENTS — carousel full-bleed, flèches en bas à gauche
============================================================ */
.clients-home {
  padding: 80px 0;
  background: #F5F5F5;
  overflow: hidden;
}

.clients-header-wrap {
  margin-bottom: 2.5rem;
}

.clients-header {
  display: grid;
  grid-template-columns: auto 2fr auto;
  gap: 3rem;
  align-items: center;
}

.clients-title {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--color-black);
  margin: 0;
}

.clients-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.clients-intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--color-black);
  margin: 0;
}

.btn-see-impact {
  display: inline-block;
  background: linear-gradient(135deg, #b70404 0%, #8e0404 100%);
  color: white;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.35rem 0.8rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-see-impact:hover {
  color: white;
  transform: translateY(-2px);
}

/* Client logo cards */
.client-logo {
  background: var(--color-white);
  border: 0.5px solid var(--color-gray-200);
  padding: 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 2 / 1;
  border-radius: 2px;
  transition: border-color 0.25s ease;
}

.client-logo:hover { border-color: var(--color-gray-400); }

.client-logo img {
  max-width: 75%;
  max-height: 70%;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.85;
  transition: all 0.3s ease;
}

.client-logo:hover img {
  filter: none;
  opacity: 1;
}

.client-text {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gray-600);
  text-align: center;
}

/* ★ Footer du carousel : flèches à GAUCHE + dots à DROITE ★ */
.clients-footer, .cs-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0 0;
}

.clients-arrows, .cs-nav{
  display: flex;
  gap: 6px;
}

.clients-arrow-btn, .cs-nav-btn{
  width: 36px;
  height: 36px;
  border: 0.5px solid var(--color-gray-400);
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: all 0.25s ease;
  padding: 0;
}

.clients-arrow-btn:hover, .cs-nav-btn:hover{
  background: var(--color-black);
  color: white;
  border-color: var(--color-black);
}

.clients-dots {
  display: flex;
  gap: 6px;
}

.clients-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-gray-500);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}

.clients-dot.active { background: var(--color-black);width:32px; }

/* ============================================================
   RESPONSIVE Case Studies + Clients
============================================================ */
@media (max-width: 992px) {

  .clients-header {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .clients-header-right {
    justify-self: start;
  }
}

@media (max-width: 768px) {
  .clients-home      { padding: 60px 0; }

  .cs-carousel-wrap      { padding-left: 0;padding-right:0 }
  .clients-carousel-wrap { padding-left: 0;padding-right:0 }

  .clients-footer, .cs-footer{
    padding: 1.5rem 0 0;
  }
  .clients-dots{
    display: none;
  }

  .btn-see-impact { width: 100%; text-align: center; }
}

/* ===== FOOTER BRAND ===== */
.footer-brand {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-black);
  letter-spacing: -0.02em;
  margin-bottom: 0.3rem;
}

/* ===== DARK MODE ===== */
body.dark-mode .expertise-home,
body.dark-mode .case-studies-home { border-color: #222; }
body.dark-mode .clients-home       { background: #0F0F0F; }

body.dark-mode .hero-title,
body.dark-mode .section-title,
body.dark-mode .expertise-title,
body.dark-mode .clients-title,
body.dark-mode .footer-brand      { color: #F0F0EC; }

body.dark-mode .hero-desc          { border-color: #333; }
body.dark-mode .hero-desc p strong { color: #F0F0EC; }

body.dark-mode .cs-nav-btn,
body.dark-mode .clients-arrow-btn  { background: #111; border-color: #333; color: #F0F0EC; }
body.dark-mode .cs-nav-btn:hover,
body.dark-mode .clients-arrow-btn:hover { background: #F0F0EC; color: #0A0A0A; border-color: #F0F0EC; }

body.dark-mode .client-logo        { background: #111; border-color: #222; }
body.dark-mode .cs-card-img        { background: #111; }
body.dark-mode .cs-badge           { border-color: #444; color: #999; }
body.dark-mode .cs-client          { color: #eee; }
body.dark-mode .cs-title           { color: #888; }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .hero-map-wrap { max-width: 100%; margin: 0 auto 0; }
}

@media (max-width: 768px) {
  .hero-home { min-height: auto; padding: 80px 0 40px; }

  .hero-desc { padding-left: 1rem; }

  .expertise-dot-marker { width: 7px; height: 7px; }
  .expertise-dot.active .expertise-dot-marker { width: 10px; height: 10px; }
}