/* Éléments d'interface partagés : icônes SVG, badges de classement, écran de chargement. */

.ico {
  display:inline-block;
  width:1.15em;
  height:1.15em;
  flex:none;
  vertical-align:-.2em;
  stroke-width:2;
}
.ico-lg { width:1.6em; height:1.6em; }
.ico + .ico-text, .ico-gap { margin-left:.35em; }
.ico-ok { color:#16a34a; }
.ico-warn { color:#d97706; }
.ico-heart { color:#e11d48; }
.ico-info { color:#2563eb; }
.ico-gold { color:#d4a017; }

.with-ico {
  display:inline-flex;
  align-items:center;
  gap:.45em;
}

/* Pastille de classement 1 / 2 / 3 (remplace 🥇 🥈 🥉) */
.rank-badge {
  display:inline-grid;
  place-items:center;
  width:1.7em;
  height:1.7em;
  border-radius:50%;
  font-weight:900;
  font-size:.95em;
  line-height:1;
  color:#fff;
  vertical-align:middle;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.18);
}
.rank-badge-1 { background:linear-gradient(145deg,#f7d354,#c99100); color:#4a3300; }
.rank-badge-2 { background:linear-gradient(145deg,#e4e8ee,#9aa4b2); color:#2b3340; }
.rank-badge-3 { background:linear-gradient(145deg,#e7b083,#a8612c); color:#3d1f08; }
.rank-badge-n { background:#e6ecf8; color:#1b2a48; }

/* Petite pastille de couleur (remplace 🟢 ⚪ 🟡) */
.dot {
  display:inline-block;
  width:.7em;
  height:.7em;
  border-radius:50%;
  vertical-align:.05em;
  background:currentColor;
}
.dot-on { color:#16a34a; }
.dot-off { color:#c4cbd6; box-shadow:inset 0 0 0 1px #9aa4b2; }
.dot-mid { color:#eab308; }

/* ===== Écran de chargement des recommandations ===== */

body.mbp-loading { overflow:hidden; }

.mbp-loader {
  position:fixed;
  inset:0;
  z-index:10000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(4,18,44,.72);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;
  transition:opacity .25s ease;
  font-family:inherit;
}
.mbp-loader.is-visible { opacity:1; }

.mbp-loader-card {
  width:min(420px,100%);
  padding:30px 26px 26px;
  border-radius:24px;
  background:linear-gradient(180deg,#0b2a61,#061d45);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  color:#fff;
  text-align:center;
  transform:translateY(12px) scale(.98);
  transition:transform .3s ease;
}
.mbp-loader.is-visible .mbp-loader-card { transform:none; }

.mbp-loader-stage {
  position:relative;
  height:92px;
  margin:0 auto 18px;
  overflow:hidden;
}
.mbp-loader-shoe {
  position:absolute;
  left:50%;
  bottom:14px;
  width:150px;
  height:auto;
  margin-left:-75px;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.35));
  animation:mbp-run .5s ease-in-out infinite alternate;
}
.mbp-loader-speed {
  position:absolute;
  left:12%;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(22,129,255,.9));
  animation:mbp-speed .7s linear infinite;
}
.mbp-loader-speed:nth-child(1) { top:28px; width:60px; }
.mbp-loader-speed:nth-child(2) { top:46px; width:90px; animation-delay:.2s; }
.mbp-loader-speed:nth-child(3) { top:62px; width:44px; animation-delay:.45s; }
.mbp-loader-ground {
  position:absolute;
  left:10%;
  right:10%;
  bottom:8px;
  height:2px;
  border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 18px,transparent 18px 30px);
  background-size:30px 2px;
  animation:mbp-ground .4s linear infinite;
}

.mbp-loader-title {
  margin:0 0 6px;
  font-size:21px;
  font-weight:900;
  letter-spacing:-.01em;
}
.mbp-loader-sub {
  margin:0 0 20px;
  color:#c7d4ec;
  font-size:14px;
}

.mbp-loader-bar {
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
  margin-bottom:20px;
}
.mbp-loader-bar span {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#1681ff,#5fb0ff);
  transition-property:width;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}

.mbp-loader-steps {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
  text-align:left;
}
.mbp-loader-steps li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  color:rgba(255,255,255,.45);
  transition:color .25s ease;
}
.mbp-loader-steps .ico {
  width:20px;
  height:20px;
  color:rgba(255,255,255,.25);
  transition:color .25s ease, transform .25s ease;
}
.mbp-loader-steps li.is-active { color:#fff; }
.mbp-loader-steps li.is-active .ico { color:#5fb0ff; animation:mbp-pulse .8s ease-in-out infinite alternate; }
.mbp-loader-steps li.is-done { color:#dce7fb; }
.mbp-loader-steps li.is-done .ico { color:#4ade80; transform:scale(1.05); }

@keyframes mbp-run {
  from { transform:translateY(0) rotate(-2deg); }
  to { transform:translateY(-10px) rotate(3deg); }
}
@keyframes mbp-speed {
  from { transform:translateX(30px); opacity:0; }
  30% { opacity:1; }
  to { transform:translateX(-60px); opacity:0; }
}
@keyframes mbp-ground {
  to { background-position:-30px 0; }
}
@keyframes mbp-pulse {
  to { transform:scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .mbp-loader-shoe,
  .mbp-loader-speed,
  .mbp-loader-ground,
  .mbp-loader-steps li.is-active .ico { animation:none; }
}

/* Espace entre l'icône et le texte dans les boutons en flex */
.product-link,
.shoe-link { gap:.45em; }

/* Guide replié sous le questionnaire (ui.js) */
.guide-fold > summary { list-style:none; cursor:pointer; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 14px; }
.guide-fold > summary::-webkit-details-marker { display:none; }
.guide-fold > summary h2 { margin:0 !important; font-size:clamp(17px,4.6vw,21px) !important; line-height:1.3; }
.guide-fold-hint { font-size:14px; font-weight:800; color:#1559ae; white-space:nowrap; }
.guide-fold-hint::after { content:" ▾"; }
.guide-fold[open] .guide-fold-hint::after { content:" ▴"; }
.guide-fold[open] > summary { margin-bottom:16px; }
.guide-fold[open] .guide-fold-hint { font-size:0; }
.guide-fold[open] .guide-fold-hint::after { font-size:14px; content:"Replier ▴"; }
.guide-fold .section-heading .eyebrow { display:none; }

/* Route / Trail : lien « Retour » et pied de page lisibles sur fond clair (16 oct. 2026) */
@media (max-width:719px) {
  #results ~ .back,
  .seo-guide ~ .back { color:#1559ae; }
}
footer[style*="#dce7fb"] { color:#5b6b82 !important; }
footer[style*="#dce7fb"] a { color:#1559ae; }

/* ===== Pages des sports façon boutique.mybestpair.fr =====
   Seulement sur les pages qui ont une photo en tête (.hero-photo) : Basket, Padel, Rugby, Foot, Route, Trail.
   Grande photo plein écran, découverte à travers le monogramme ; titre posé dessus ; bandeau des critères qui défile
   (ajouté par ambiance.js) ; titres du questionnaire et repères en grandes majuscules étroites. */
html:has(.hero-photo) header.hero { position:relative; display:grid; grid-template-columns:1fr; min-height:0; overflow:hidden; background:#061d45; }
html:has(.hero-photo) .hero-photo { grid-area:1/1; order:0; position:relative; overflow:hidden; min-height:max(540px, 84svh); animation:sport-photo 1.8s cubic-bezier(.16,1,.3,1) both; }
html:has(.hero-photo) .hero-photo::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, rgba(4,14,34,.4), rgba(4,14,34,0) 26%, rgba(4,14,34,.5) 56%, rgba(4,14,34,.97)); }
html:has(.hero-photo) .hero-photo .hole { position:absolute; inset:0; z-index:1; background:#061d45; pointer-events:none;
  -webkit-mask:url(images/horloge/monogramme.webp) 43.7% 38% / min(78%, 640px) auto no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:url(images/horloge/monogramme.webp) 43.7% 38% / min(78%, 640px) auto no-repeat exclude, linear-gradient(#000 0 0);
  transition:-webkit-mask-size 1.4s cubic-bezier(.7,0,.2,1), mask-size 1.4s cubic-bezier(.7,0,.2,1), opacity .5s .9s; }
html:has(.hero-photo) .hero-photo.open .hole { -webkit-mask-size:4000% auto, 100% 100%; mask-size:4000% auto, 100% 100%; opacity:0; }
@keyframes sport-photo { from { transform:scale(1.14); } }
html:has(.hero-photo) .hero-copy { grid-area:1/1; align-self:end; position:relative; z-index:3; display:block; background:none; padding:0 20px 38px; }
html:has(.hero-photo) .hero h1 { max-width:11ch; margin:0 0 18px; font-size:clamp(54px, 14vw, 136px); line-height:.86; }
html:has(.hero-photo) .hero-kicker { margin-bottom:14px; font:700 12px Arial, sans-serif; letter-spacing:.2em; }
html:has(.hero-photo) .hero p { max-width:46ch; }
html:has(.hero-photo) .hero-chips { gap:6px 20px; margin-top:20px; }
html:has(.hero-photo) .hero-chip { border:0; background:none; padding:0; border-radius:0; font:700 11px Arial, sans-serif; letter-spacing:.16em; text-transform:uppercase; color:#cfe0ff; }
@media (min-width:720px) {
  html:has(.hero-photo) header.hero { grid-template-columns:1fr; min-height:0; }
  html:has(.hero-photo) .hero-copy { padding:0 max(44px, calc((100vw - 1100px) / 2)) 72px; }
  html:has(.hero-photo) main.shell, html:has(.hero-photo) main.wrap { margin-top:0; }
}
html:has(.hero-photo) main.shell, html:has(.hero-photo) main.wrap { margin-top:0; }

/* Bandeau des critères qui défile, sous la photo */
.sport-marq { overflow:hidden; background:#061d45; color:#fff; border-bottom:1px solid rgba(255,255,255,.12); padding:15px 0; margin-bottom:22px; }
.sport-marq div { display:flex; width:max-content; align-items:center; gap:28px; animation:sport-marq 34s linear infinite; }
.sport-marq span { font-family:"Archivo","Arial Narrow",Arial,sans-serif; font-weight:900; font-variation-settings:"wdth" 64; font-stretch:64%; text-transform:uppercase; font-size:30px; line-height:1; white-space:nowrap; }
.sport-marq span:nth-of-type(even) { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.75); }
.sport-marq img { height:22px; width:auto; opacity:.9; }
@keyframes sport-marq { to { transform:translateX(-50%); } }

/* Questionnaire : titres en grandes majuscules étroites, étiquettes discrètes, boutons arrondis */
html:has(.hero-photo) .section-heading h2, html:has(.hero-photo) .panel-head h2 { font-family:"Archivo","Arial Narrow",Arial,sans-serif; font-weight:900; font-variation-settings:"wdth" 64; font-stretch:64%; text-transform:uppercase; letter-spacing:0; font-size:clamp(38px, 8vw, 62px); line-height:.9; }
html:has(.hero-photo) .section-heading .eyebrow { background:none; padding:0; border-radius:0; font:700 12px Arial, sans-serif; letter-spacing:.2em; }
html:has(.hero-photo) .panel { border-radius:22px; }
html:has(.hero-photo) .seg { border-radius:999px; }
html:has(.hero-photo) form .cta { border-radius:999px; letter-spacing:.06em; }

/* Repères en bas de page : grands chiffres, filets fins, sans cadres */
html:has(.hero-photo) .trust-strip { gap:0 26px; margin-top:34px; }
html:has(.hero-photo) .trust-item { background:none; border:0; border-top:2px solid #0b2a61; border-radius:0; padding:14px 0 18px; text-align:left; color:#4a5b76; }
html:has(.hero-photo) .trust-item strong { margin-bottom:6px; font-family:"Archivo","Arial Narrow",Arial,sans-serif; font-weight:900; font-variation-settings:"wdth" 64; font-stretch:64%; text-transform:uppercase; font-size:30px; line-height:.95; color:#061d45; }

@media (prefers-reduced-motion: reduce) {
  html:has(.hero-photo) .hero-photo { animation:none; }
  html:has(.hero-photo) .hero-photo .hole { display:none; }
  .sport-marq div { animation:none; }
}