/* @creme-tokens */
/* Fiche spot : bandeau « Avant d’y aller » (spot-before.js), pastille « adapté à ton niveau » des cartes,
   une seule barre d’actions en bas de la fiche, onglets collés sous l’en-tête. Textes ≥ 12 px, mentions 11 px,
   zones de toucher ≥ 44 px. Rien ici ne vise l’accueil : la pastille des cartes est posée en absolu sur la photo. */

/* ---------- Pastille de repère (cartes et tête de fiche) ---------- */
.fit-pill{display:inline-flex;align-items:center;min-height:24px;padding:3px 10px;border-radius:999px;font:700 12px/1.2 var(--body);
  white-space:nowrap;border:1px solid transparent}
.fit-pill.fit-fit{background:var(--t-acc);color:var(--t-deep)}
.fit-pill.fit-stretch{background:var(--t-card);color:var(--t-deep);border-color:var(--t-warn)}
.fit-pill.fit-above{background:var(--t-danger);color:var(--t-on-alert)}
.spot .fit-pill.is-card{position:absolute;z-index:4;left:13px;top:66px;box-shadow:0 4px 10px color-mix(in srgb,var(--t-shadow) 22%,transparent)}

/* ---------- Bandeau « Avant d’y aller » ---------- */
#detail .d-before{margin:14px 0 12px;padding:12px 14px 14px;border-radius:16px;background:var(--t-card);border:1px solid var(--t-line);color:var(--t-ink)}
#detail .db-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
#detail .db-head h3{margin:0;font:800 17px/1.2 var(--body);color:var(--t-ink);letter-spacing:-.2px}
#detail .db-note{margin:4px 0 8px;font-size:12px;line-height:1.4;color:var(--t-ink2)}
/* Danger et « Maintenant » sur toute la largeur, saison et créneau côte à côte : le bandeau reste court. */
#detail .db-rows{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;border-top:1px solid var(--t-line)}
#detail .db-row{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;padding:7px 0;border-bottom:1px solid var(--t-line);min-height:40px;min-width:0}
#detail .db-row.db-half{grid-column:auto}
#detail .db-k{font:700 12px/1.3 var(--body);color:var(--t-ink2)}
#detail .db-v{font-size:13px;line-height:1.4;color:var(--t-ink);display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-width:0}
#detail .db-v b{font-weight:800}
#detail .db-wait,#detail .db-muted{color:var(--t-ink2)}
#detail .db-gauge{display:inline-flex;align-items:center;gap:6px}
#detail .db-dots{display:inline-flex;gap:3px}
#detail .db-dots i{width:8px;height:8px;border-radius:50%;background:var(--t-line)}
#detail .db-dots i.on{background:var(--t-danger)}
#detail .db-danger-text{flex-basis:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#detail .db-carnet{flex-basis:100%;font-size:11px;font-weight:600;color:var(--t-ink2)}
#detail .db-season{font-weight:700}
#detail .db-q{font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;background:var(--t-tint);color:var(--t-deep)}
#detail .db-q.is-good{background:var(--t-acc)}
#detail .db-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#detail .db-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:12px;font:800 14px/1 var(--body);
  text-decoration:none;cursor:pointer;border:1px solid var(--t-line);background:var(--t-tint);color:var(--t-deep)}
#detail .db-call{background:var(--t-danger);border-color:var(--t-danger);color:var(--t-on-alert)}
#detail .db-nocall{align-self:center;font-size:12px;color:var(--t-ink2)}
#detail .db-btn:active{transform:scale(.97)}
#detail .db-btn:focus-visible{outline:2px solid var(--t-main);outline-offset:2px}

/* ---------- Doublons retirés ---------- */
/* ♥ : seulement dans la barre d’actions du bas ; le partage prend sa place sur la photo. */
#detail #dFav{display:none!important}
@media(max-width:959px){body[data-screen=detail] #detailHero .hero-share,#detail.sw-live #detailHero .hero-share{right:12px!important}}
#detail #dImmersionBtn{display:none!important}
#immersionContext[hidden]{display:none!important}

/* ---------- Bas d’écran : une seule couche sur la fiche (téléphone) ----------
   La barre d’onglets se range sur la fiche (on revient par ←) ; son ordre ne change pas. La barre d’actions prend sa ligne,
   à gauche du bouton Poulpy. */
@media(max-width:959px){
  body[data-screen=detail] .ocean-v2 .nav,body.ocean-v2[data-screen=detail] .nav{display:none!important}
  body[data-screen=detail] .spot-bar{bottom:var(--as-tab-bottom,14px);right:calc(16px + var(--as-tab-h,62px) + 8px);left:12px;min-height:var(--as-tab-h,62px)}
  /* Le nom est déjà en grand dans la fiche : sur téléphone, la place va au bouton. */
  body[data-screen=detail] .spot-bar-name{display:none}
  body[data-screen=detail] .spot-bar{padding-left:8px}
  body[data-screen=detail] .spot-bar-trip{flex:1}
  /* Onglets de la fiche collés sous l’en-tête translucide. */
  .ocean-v2 #detail .dtabs{top:calc(52px + var(--as-top,0px));z-index:6}
}
@media(min-width:960px){.ocean-v2 #detail .dtabs{top:0;z-index:6}}
/* Ligne « Danger » : libellé et jauge sur une ligne, danger principal dessous. */
#detail .db-row.db-danger{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:10px}
#detail .db-row.db-danger>.db-v{display:contents}
/* Zones de toucher : retour et partage de la photo à 44 px sur téléphone. */
@media(max-width:959px){
  body[data-screen=detail] #detailHero .back-btn,body[data-screen=detail] #detailHero .hero-share,#detail.sw-live #detailHero .hero-share{width:44px!important;height:44px!important}
}

/* ---------- Rien sous la barre d’actions (QA 4 nov.) ---------- */
/* Téléphone : espace réservé en bas de la fiche = barre + sa marge + zone sûre, pour que la fin du contenu défile au-dessus. */
@media(max-width:959px){
  .ocean-v2 #detail{padding-bottom:calc(var(--as-tab-bottom,14px) + var(--as-tab-h,62px) + 36px)}
}
/* Ordinateur : barre compacte (♥ + bouton), alignée à droite, sans le nom : elle ne recouvre plus les colonnes du bandeau. */
@media(min-width:960px){
  .spot-bar{width:auto;padding:8px}
  .spot-bar-name{display:none}
  .ocean-v2 #detail{padding-bottom:calc(32px + 96px + env(safe-area-inset-bottom,0px))}
}
/* Les ancres ne passent pas sous l’en-tête et les onglets collants. */
@media(max-width:959px){
  .ocean-v2 #detail [id],.ocean-v2 #detail .block,.ocean-v2 #detail section{scroll-margin-top:calc(52px + var(--as-top,0px) + 72px)}
}
@media(min-width:960px){
  .ocean-v2 #detail [id],.ocean-v2 #detail .block,.ocean-v2 #detail section{scroll-margin-top:84px}
}
/* Onglet cliqué : l’ancre remonte de la hauteur de l’en-tête collant, le titre de la section reste visible sous les onglets. */
@media(max-width:959px){#detailTabsAnchor{position:relative;top:calc(-1 * (52px + var(--as-top,0px)))}}