/* ==========================================================
   BELL.FR – OVERRIDE VISUEL GLOBAL (SAFE & STABLE)
   ========================================================== */

/* =========================
   RESET SÉCURISÉ
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* =========================
   SCROLL – FIX DÉFINITIF
   ========================= */

html,
body {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Annule tout scroll parasite interne */
main,
#root,
.page,
.page-wrapper,
.site-content,
.content,
.section,
.container {
  overflow: visible !important;
  height: auto !important;
}

/* =========================
   BANNIÈRES FULL WIDTH
   ========================= */

.banner,
.hero,
.fullwidth,
.section-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* ==========================================================
   SERVICES BELL – TUILES (STYLE PREMIUM)
   ========================================================== */

.lob-tile-section {
  background: #fff;
}

.lob-tile-section .lob-container > a {
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 22px !important;

  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none !important;
}

/* Hover desktop uniquement */
@media (hover: hover) {
  .lob-tile-section .lob-container > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.16) !important;
  }
}

/* Texte des tuiles */
.lob-tile-section .lob-tiles-text {
  font-weight: 600 !important;
  color: #00549a !important;
  font-size: 15px;
}

/* ==========================================================
   OFFRES EN VEDETTE – CARTES PROMO (STYLE SFR)
   ========================================================== */

.promo-sfr-wrapper {
  max-width: 1200px;
  margin: 48px auto 80px;
  padding: 0 24px;

  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 24px;
}

/* Carte générique */
.promo-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 28px;

  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);

  color: #000;
  text-decoration: none;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 220px;
}

/* Carte principale (gauche) */
.promo-big {
  grid-row: span 2;
  min-height: 460px;
}

/* Carte large (bas) */
.promo-wide {
  grid-column: span 2;
}

/* Variante sombre */
.promo-card.dark {
  background: linear-gradient(135deg, #0b2d4f, #000);
  color: #ffffff;
}

/* Titres */
.promo-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Texte */
.promo-card p {
  font-size: 14px;
  opacity: 0.85;
  margin: 0;
}

/* Prix */
.promo-card strong {
  font-size: 28px;
  font-weight: 800;
  margin-top: 10px;
}

/* Mentions */
.promo-card small {
  font-size: 12px;
  opacity: 0.75;
}

/* =========================
   BADGES PROMO
   ========================= */

.promo-badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.promo-badge.green {
  background: #2ecc71;
  color: #ffffff;
}

.promo-badge.yellow {
  background: #f1c40f;
  color: #000000;
}

/* =========================
   RESPONSIVE MOBILE
   ========================= */

@media (max-width: 768px) {
  .promo-sfr-wrapper {
    grid-template-columns: 1fr;
  }

  .promo-big,
  .promo-wide {
    grid-column: auto;
    grid-row: auto;
    min-height: auto;
  }
}
/* ==========================================================
   FIX SCROLL FINAL – BELL.FR (SOURCE OF TRUTH)
   ========================================================== */

/* 1️⃣ html#shop est le SEUL conteneur scrollable */
html#shop {
  height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 2️⃣ body NE scrolle PAS */
body {
  height: auto !important;
  overflow: hidden !important;
}

/* 3️⃣ Aucun wrapper interne ne scrolle */
.page-code,
.home-personal,
.site-content,
.page-wrapper,
.content,
main,
#root,
.section,
.container {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* ==========================================================
   FIX FINAL – HONOR MAGIC8 PRO EN FOND
   ========================================================== */

.promo-card.promo-honor {
  position: relative;

  /* IMPORTANT : on enlève le fond blanc */
  background-color: transparent !important;
  background-image: url("/images/Honor8Pro.png") !important;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;

  border-radius: 16px;
  overflow: hidden;
  color: #000;
}

/* Voile de lisibilité */
.promo-card.promo-honor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.85) 45%,
    rgba(255,255,255,0.6) 65%,
    rgba(255,255,255,0.0) 100%
  );
  z-index: 0;
}

/* Le texte au-dessus */
.promo-card.promo-honor > * {
  position: relative;
  z-index: 1;
}

/* Mobile */
@media (max-width: 768px) {
  .promo-card.promo-honor {
    background-position: center top;
    background-size: 80%;
    padding-top: 220px;
  }

  .promo-card.promo-honor::before {
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.0) 0%,
      rgba(255,255,255,0.9) 45%,
      rgba(255,255,255,1) 100%
    );
  }
}
/* ==========================================================
   HONOR MAGIC8 PRO – CARTE AVEC IMAGE EN FOND
   ========================================================== */

.promo-card.promo-honor {
  position: relative;
  overflow: hidden;
  border-radius: 20px;

  /* IMAGE */
  background-image: url("/images/Honor8Pro.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;   /* IMPORTANT : cover, pas contain */

  padding: 28px;
  min-height: 320px;

  color: #000;
}

/* Dégradé de lisibilité (comme carte noire) */
.promo-card.promo-honor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.85) 45%,
    rgba(255,255,255,0.6) 65%,
    rgba(255,255,255,0.0) 100%
  );
  z-index: 0;
}

/* Texte au-dessus de l’image */
.promo-card.promo-honor > * {
  position: relative;
  z-index: 1;
}

/* ================================
   MOBILE
   ================================ */
@media (max-width: 768px) {
  .promo-card.promo-honor {
    background-position: center bottom;
    min-height: 420px;
  }

  .promo-card.promo-honor::before {
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0.0) 0%,
      rgba(255,255,255,0.85) 45%,
      rgba(255,255,255,1) 100%
    );
  }
}
/* =========================================
   NUKE FINAL – PIXEL MAUDIT HAUT GAUCHE
   ========================================= */

@media (min-width: 1024px) {
  .promo-card.promo-honor {
    clip-path: inset(0 0 0 0 round 20px);
    border-radius: 0 !important; /* le radius est géré par clip-path */
  }
}

/* =========================================
   FIX TRAIT VERTICAL – HONOR (DESKTOP)
   ========================================= */

@media (min-width: 1024px) {
  .promo-card.promo-honor {
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
  }

  /* Neutralise les séparateurs Bell */
  .promo-card.promo-honor::after,
  .promo-card.promo-honor::before {
    border: none !important;
    box-shadow: none !important;
  }

  /* Si Bell met un séparateur interne */
  .promo-card.promo-honor * {
    border-left: none !important;
  }
}
/* =========================================
   FIX TRAIT HAUT – ANTI-ALIASING RADIUS
   ========================================= */

.promo-card.promo-honor {
  background-clip: padding-box !important;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* On force l’overlay à épouser parfaitement le radius */
.promo-card.promo-honor::before {
  border-radius: inherit;
}

/* Sécurité ultime : aucun pixel parasite */
@media (min-width: 1024px) {
  .promo-card.promo-honor {
    box-shadow: none !important;
  }
}
/* ==========================================================
   FIX ULTIME TRAITS COINS – MOBILE & DESKTOP
   ========================================================== */

.promo-card.promo-honor {
  position: relative;
  overflow: hidden;

  /* Anti-aliasing absolu */
  background-clip: padding-box !important;
  -webkit-background-clip: padding-box !important;

  /* Force le GPU à calculer proprement les arrondis */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Overlay parfaitement aligné */
.promo-card.promo-honor::before {
  border-radius: inherit;
  -webkit-transform: translateZ(0);
}

/* SAFARI / IOS : suppression totale des artefacts */
@supports (-webkit-touch-callout: none) {
  .promo-card.promo-honor {
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
}
/* ==========================================================
   CARTE PROMO – VERRE FUMÉ ULTRA PREMIUM (LUXE)
   ÉCRASE PROPREMENT LE NOIR EXISTANT
   ========================================================== */

.promo-card.dark {
  position: relative;
  overflow: hidden;

  /* Verre fumé très teinté */
  background:
    linear-gradient(
      160deg,
      rgba(15,18,25,0.92) 0%,
      rgba(8,10,16,0.88) 55%,
      rgba(5,7,12,0.85) 100%
    );

  backdrop-filter: blur(18px) saturate(135%) contrast(105%);
  -webkit-backdrop-filter: blur(18px) saturate(135%) contrast(105%);

  border-radius: 18px;
  color: #ffffff;

  /* Ombre premium (profondeur réelle) */
  box-shadow:
    0 18px 48px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.4);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Reflet vitre (très subtil) */
.promo-card.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 35%,
    rgba(255,255,255,0.00) 60%
  );

  opacity: 0.55;
}

/* Grain cinéma ultra fin */
.promo-card.dark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");

  mix-blend-mode: overlay;
}

/* Hover desktop : effet vitrine */
@media (hover: hover) {
  .promo-card.dark:hover {
    transform: translateY(-3px);
    box-shadow:
      0 26px 64px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.08);
  }
}

/* Mobile : blur optimisé */
@media (max-width: 768px) {
  .promo-card.dark {
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
  }
}

background-image: url("/images/iPhone17.png");


/* ==========================================================
   ALIGNEMENT BELL.FR SUR BELL.CA – HERO
   ========================================================== */

/* bell.ca N’UTILISE PAS height:100% ici */
.hero-redesign.oneAsset {
  height: auto !important;
}

/* Le contenu définit la hauteur réelle */
.hero-redesign.oneAsset .container {
  align-items: stretch;
}

/* La zone image suit naturellement */
.hero-redesign.oneAsset .imgArea {
  height: auto;
}

/* Le slide Keen s’ajuste au contenu */
.keen-slider__slide {
  height: auto !important;
}
/* ==========================================================
   FIX DÉFINITIF HERO BELL – CR109099
   ========================================================== */

/* Le slide prend la hauteur de son contenu */
#carousel-banner-1,
#carousel-banner-2 {
  height: auto !important;
}

/* Le hero définit la hauteur réelle */
#cr109099-olympic-more-lines-more-savings {
  height: auto !important;
}

/* Le container doit s'étirer */
#cr109099-olympic-more-lines-more-savings .container {
  align-items: stretch;
}

/* La zone image remplit le hero */
#cr109099-olympic-more-lines-more-savings .imgArea {
  height: 100%;
}

/* L’image remplit totalement la zone */
#cr109099-olympic-more-lines-more-savings .imgArea img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Plus aucun fond parasite */
#carousel-banner-1,
#carousel-banner-2,
#cr109099-olympic-more-lines-more-savings {
  background: transparent !important;
}
/* 🔒 Fix hauteur slider Bell / Keen */
.hero-redesign.oneAsset,
.hero-redesign.oneAsset .keen-slider,
.hero-redesign.oneAsset .keen-slider__slide {
  height: auto !important;
}

.hero-redesign.oneAsset .keen-slider {
  align-items: stretch !important;
}

.hero-redesign.oneAsset .keen-slider__slide {
  display: flex !important;
}

.hero-redesign.oneAsset .container {
  min-height: 100% !important;
}
/* FIX HERO – IMAGE RESPONSIVE (OBLIGATOIRE) */
.hero-redesign .imgArea {
  position: relative;
  overflow: hidden;
}

.hero-redesign .imgArea img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}