/* =========================================
   /css/style.css — Pages "Grandes marques"
   Scope: .page-brand (respecte le header/footer et la largeur de la home)
   Palette chaude (#f6f5f0 / #e8e5d9)
   ========================================= */

/* Palette locale */
.page-brand{
  --cream: #f6f5f0; /* bandeau titre, blocs doux */
  --sand:  #e8e5d9; /* breadcrumbs, pastilles */
}

/* ===== Head de page ===== */
.page-brand .page-head{
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.page-brand .page-head .wrap,
.page-brand .page-head .wrap-wide{
  padding: 16px 0;
}
.page-brand .page-title{
  color:#111;
  font-size: clamp(28px,4.2vw,42px);
  line-height:1.1;
  margin:8px 0 2px;
  font-weight:900;
  text-align:center;
}
.page-brand .page-sub{
  color:#374151;
  font-size:16px;
  margin:0 0 2px;
  font-weight:700;
  text-transform:capitalize;
  text-align:center;
}

/* ===== Breadcrumbs (haut + bas) ===== */
.page-brand .breadcrumb{
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.page-brand .breadcrumb .wrap,
.page-brand .breadcrumb .wrap-wide{
  padding: 0;
}
.page-brand .breadcrumb ol{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  list-style:none;
  margin:0;
  padding:8px 12px;
  font-size:13px;
  color:#334155;
}
.page-brand .breadcrumb a{ color:#334155; text-decoration:none; }
.page-brand .breadcrumb a:hover{ text-decoration:underline; }
/* Séparateur robuste (Unicode pour éviter ?) */
.page-brand .breadcrumb li::after{
  content:"\203A"; /* › */
  margin:0 6px;
  color:#64748b;
}
.page-brand .breadcrumb li:last-child::after{ content:""; }
.page-brand .breadcrumb--bottom{ margin:18px 0; }

/* Bandeau fil d’Ariane du bas : miroir exact du haut */
.page-brand .page-head--bottom{
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 0;
  margin-top: 14px;         /* petit dégagement au-dessus */
}
.page-brand .page-head--bottom .wrap,
.page-brand .page-head--bottom .wrap-wide{
  padding: 16px 0;          /* même padding que le haut */
}

/* ===== Grille 3 colonnes ===== */
.page-brand .brand-grid{
  display:grid;
  grid-template-columns: 280px minmax(0,1fr) 320px; /* gauche images / centre / droite */
  gap:24px;
  margin-top:8px;
  align-items:start; /* FIX hauteur sidebar : empêche l’étirement vertical par défaut */
}

/* ===== Cartes / sections ===== */
.page-brand .card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
}
.page-brand .section + .section{ margin-top:12px; }
.page-brand .section h2{ margin:0 0 8px; }

/* ===== Colonne gauche : galerie (sans card) ===== */
.page-brand .gallery-col{
  display:grid; gap:10px; align-content:start;
}
.page-brand .gallery-col .gimg{ display:block; }
.page-brand .gallery-col img{
  width:100%; height:auto;
  border-radius:12px; object-fit:cover;
  background:var(--sand);
  transition: transform .15s ease;
}
.page-brand .gallery-col .gimg:hover img{
  transform: translateY(-1px) scale(1.01);
}

/* ===== Lightbox ===== */
.page-brand .lightbox[hidden]{ display:none; }
.page-brand .lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.85);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:24px;
}
.page-brand .lightbox img{
  max-width:min(96vw,1400px);
  max-height:90vh;
  width:auto; height:auto;
  border-radius:12px;
}
.page-brand .lb-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:999px;
  border:0; background:#fff; color:#000;
  font-size:22px; line-height:1; cursor:pointer;
}

/* ===== Listes / infos ===== */
.page-brand .facts{ list-style:none; margin:0; padding:0; }
.page-brand .facts li{
  padding:6px 0;
  border-bottom:1px solid #eef2f7;
}
.page-brand .pill{
  display:inline-block;
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--sand);
  margin-left:8px;
}

/* ===== KPIs ===== */
.page-brand .kpis{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin:12px 0;
}
.page-brand .kpi{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px; text-align:center;
}
.page-brand .kpi .v{ font-weight:800; }
.page-brand .kpi .l{ font-size:12px; color:#475569; }

/* ===== Tableau "Quand y aller" ===== */
.page-brand .when{ margin-top:8px }
.page-brand .when-table{
  width:100%;
  border-collapse:separate; border-spacing:0;
  border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
  background:#fff;
}
.page-brand .when-table thead th{
  background:var(--sand);
  text-align:left; font-weight:700;
  padding:8px 10px;
  border-bottom:1px solid var(--line);
}
.page-brand .when-table td,
.page-brand .when-table th{ padding:8px 10px }
.page-brand .when-table tbody tr+tr td{ border-top:1px solid #eef2f7 }

/* ===== Carte & actions ===== */
.page-brand .map-wrap{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--sand);
}
.page-brand .map{ width:100%; aspect-ratio:16/9; border:0; display:block; }
.page-brand .map-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }

/* ===== Boutons ===== */
.page-brand .btn{
  display:inline-block;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  border:1px solid #111;
  color:#111;
  background:#fff;
}
.page-brand .mini{
  margin-left:10px;
  font-size:12px;
  padding:4px 8px;
  border-radius:8px;
  border:1px solid var(--sand);
  background:var(--cream);
  cursor:pointer;
}

/* ===== Nearby (autres Decathlon) ===== */
.page-brand .nearby{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.page-brand .nearby a{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  text-decoration:none; color:#111; background:#fff;
}
.page-brand .nearby a:hover{ background:var(--cream); }
.page-brand .nearby .dist{
  font-size:12px; padding:2px 8px;
  border-radius:999px; background:var(--sand);
}
.page-brand .nearby-note{ margin-top:6px; color:#6b7280; font-size:12px; }

/* ===== Sidebar ===== */
.page-brand .side .quick{ display:flex; gap:10px; flex-wrap:wrap; margin-top:-2px; margin-bottom:10px; }
.page-brand .acces-side{ display:grid; gap:10px; }
.page-brand .acces-side .acces-item{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:var(--cream);
}
.page-brand .brand-list{ list-style:none; margin:0; padding:0; }
.page-brand .brand-list li{ padding:8px 0; border-bottom:1px solid #eef2f7; }
.page-brand .brand-list a{ text-decoration:none; color:#111; }
.page-brand .brand-list a:hover{ text-decoration:underline; }

/* FIX hauteur sidebar : l’aside suit sa propre hauteur + léger espace bas */
.page-brand .card.side{
  align-self:start;     /* casse l’étirement éventuel de la grille */
  height:auto;
  min-height:0;
  margin-bottom:clamp(12px, 2.5vh, 28px);
}

/* ===== Liste "En bref" (ticks) — Unicode pour éviter ? ===== */
.page-brand .ticks{ list-style:none; margin:0; padding:0; }
.page-brand .ticks li{
  position:relative; padding:6px 0 6px 22px;
  border-bottom:1px solid #eef2f7;
}
.page-brand .ticks li::before{
  content:"\2713"; /* ? */
  position:absolute; left:0; top:6px; font-weight:700;
}

/* ===== FAQ (design amélioré) — chevron Unicode ===== */
.page-brand .faq details{
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
  background:#fff;
}
.page-brand .faq summary{
  display:flex; align-items:center; gap:8px;
  padding:12px 14px; cursor:pointer; list-style:none; position:relative;
}
.page-brand .faq summary::-webkit-details-marker{ display:none; }
.page-brand .faq summary::after{
  content:"\203A"; /* › */
  position:absolute; right:14px;
  transform:rotate(0deg);
  transition:transform .15s ease;
}
.page-brand .faq details[open] summary{ background:var(--cream); }
.page-brand .faq details[open] summary::after{ transform:rotate(90deg); }
.page-brand .faq summary .q{ font-weight:700; color:#111; }
.page-brand .faq .faq-a{
  padding:12px 14px;
  border-top:1px solid #eef2f7;
  background:#fff;
}

/* ===== Accessibilité ===== */
.page-brand :focus-visible{ outline:2px solid #111; outline-offset:2px; }
html.page-brand, html.page-brand body{ overflow-x:hidden; }

/* ===== Responsive ===== */
@media (max-width:960px){
  .page-brand .brand-grid{ grid-template-columns:1fr; gap:16px; }
  .page-brand .gallery-col{ order:2; }
  .page-brand .nearby{ grid-template-columns:1fr; }
}

/* ===== Fix: la sidebar ne doit pas s'étirer ===== */
html.page-brand .brand-grid{
  align-items:flex-start !important;  /* stoppe l'étirement par défaut de la grille */
}
html.page-brand .card.side{
  align-self:flex-start !important;   /* la carte suit sa propre hauteur */
  height:auto !important;
  min-height:0 !important;
  margin-bottom:clamp(12px,2.5vh,28px);
}

/* Optionnel desktop: sidebar "collante" discrète sans dépasser */
@media (min-width:1024px){
  html.page-brand .card.side{
    position:sticky;
    top:18px;
  }
}


/* =========================================
   Incontournables — Grille 2/3 • 1/3 (page-inc)
   ========================================= */
.page-inc .inc-grid{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
  margin-top:14px;                /* DÉGAGEMENT sous le fil d’Ariane */
}
.page-inc .inc-grid > *{ min-width:0; }

/* Colonne droite sticky */
.page-inc .side-sticky{
  position:sticky;
  top:84px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Grosse image sous le H1 + intro */
.page-inc .hero-large{
  margin:12px 0 8px;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
}
.page-inc .hero-large img{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block;
}
.page-inc .hero-large figcaption{
  padding:8px 12px; font-size:.95rem; color:var(--muted); background:#fff;
  border-top:1px solid var(--line);
}

.page-inc .muted{ color:var(--muted); }
.page-inc .lead{ font-size:1.05rem; }
.page-inc .section h2{ font-size:1.25rem; margin-top:6px; }
.page-inc .section p{ margin:.4rem 0 .7rem; }

/* Responsive */
@media (max-width: 980px){
  .page-inc .inc-grid{ grid-template-columns:1fr; }
  .page-inc .side-sticky{ position:static; top:auto; }
}

/* =========================================
   Incontournables — Galerie en colonne droite
   ========================================= */
.page-inc .side .card.gallery{ padding:12px; }
.page-inc .gallery-legend{ margin:0 0 8px; font-size:.95rem; color:var(--muted); }

/* grille responsive de vignettes (paysage & portrait) */
.page-inc .gallery-rail{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
@media (min-width:1200px){
  .page-inc .gallery-rail{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:680px){
  .page-inc .gallery-rail{ grid-template-columns: repeat(2, 1fr); }
}
.page-inc .gthumb{
  display:block;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
}
.page-inc .gthumb img{
  width:100%; height:100%;
  aspect-ratio: 4/3;      /* harmonise la grille */
  object-fit: cover;      /* ok portraits & paysages */
  display:block;
}

/* Lightbox plein écran */
.page-inc .lb{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.82);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  transition:opacity .2s ease;
}
.page-inc .lb[aria-hidden="true"]{ opacity:0; pointer-events:none; }
.page-inc .lb[aria-hidden="false"]{ opacity:1; }

.page-inc .lb-figure{
  max-width:90vw; max-height:90vh;
  margin:0; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.page-inc .lb-figure img{
  max-width:90vw; max-height:80vh;
  width:auto; height:auto; object-fit:contain; display:block;
  border-radius:8px; background:#000;
}
.page-inc .lb-figure figcaption{
  color:#f1f5f9; font-size:.95rem; text-align:center;
  max-width:90vw;
}

/* Contrôles lightbox */
.page-inc .lb-close,
.page-inc .lb-prev,
.page-inc .lb-next{
  position:absolute;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  color:#fff; font-size:28px; line-height:1;
  padding:10px 12px; border-radius:10px;
  cursor:pointer; backdrop-filter: blur(4px);
}
.page-inc .lb-close{ top:18px; right:18px; }
.page-inc .lb-prev{ left:18px; top:50%; transform:translateY(-50%); }
.page-inc .lb-next{ right:18px; top:50%; transform:translateY(-50%); }
.page-inc .lb-close:hover,
.page-inc .lb-prev:hover,
.page-inc .lb-next:hover{ background:rgba(255,255,255,.2); }

/* =====================================================
   Marques / Shopping : logos "plein cadre" sans blanc
   Ciblage étroit pour éviter tout effet de bord :
   - pages qui utilisent .page-brand + .brand-card
   - ne touche pas les autres cartes/images du site
   ===================================================== */
.page-brand .brand-card .culture-media{
  /* on supprime les marges internes qui créent le blanc */
  padding: 0 !important;
  /* on force un cadre homogène et on masque les débords */
  aspect-ratio: 3 / 2;         /* ajuste à 16/9 ou 4/3 si tu préfères */
  overflow: hidden;
  border-radius: 14px;         /* garde ta charte arrondie */
  background: #fff;            /* fond neutre derrière les .svg */
}

.page-brand .brand-card .culture-media img{
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;         /* garde l’intégralité du logo sans le couper */
  background: transparent !important;
  transition: transform .2s ease;
}

/* petit effet au survol (laisse respirer l’anim que tu avais) */
.page-brand .brand-card:hover .culture-media img{
  transform: scale(1.03);
}

/* Variante si tu veux "remplir à 100%" même si ça recadre un peu :
   ajoute la classe .cover sur la media dans ton HTML */
.page-brand .brand-card .culture-media.cover img{
  object-fit: cover;
}