/* Histoires futées — pages « Bienvenue chez <héros> » (page-templates/bienvenue.php).
   Maquette : Malino QR.dc.html. Mobile d'abord : la page s'ouvre sur le téléphone qui scanne
   le livre ; les valeurs de la maquette s'appliquent à partir de 601px.
   --hf-hero-bg : couleur ou dégradé du livre du héros (fond du bandeau, barre du lecteur). */

.hf-bienvenue{--hf-hero-bg:linear-gradient(135deg,#E987C6,#C59CEC);font:400 17px/1.55 var(--font-brand);color:#012C2D}
/* Ancres #chanson, #roue, #meteo (QR codes) : l'en-tête collant ne recouvre pas le haut de la section. */
.hf-bienvenue [id]{scroll-margin-top:150px}

/* ---------------------------------------------------------------- Accueil */
.hf-bienvenue__hero{position:relative;overflow:hidden;background:var(--hf-hero-bg)}
.hf-bienvenue__fond{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat}
.hf-bienvenue__hero-in{position:relative;max-width:1120px;margin:0 auto;padding:36px 20px 44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;align-items:center}
.hf-bienvenue__intro{display:grid;gap:14px;justify-items:start}
.hf-bienvenue__pill{margin:0;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.75);font:700 14px/1 var(--font-brand)}
.hf-bienvenue__title{margin:0;font:900 clamp(36px,6vw,56px)/1.05 var(--font-brand);letter-spacing:-.02em;text-wrap:balance}
.hf-bienvenue__lead{margin:0;font-size:19px;max-width:440px;text-wrap:pretty}
.hf-bienvenue__ph{justify-self:center;box-sizing:border-box;width:min(56vw,220px);aspect-ratio:3/4;padding:12px;border-radius:16px;background:rgba(255,255,255,.55);border:2px dashed rgba(1,44,45,.35);display:grid;place-items:center;text-align:center;font:700 15px/1.3 var(--font-brand);box-shadow:0 18px 40px rgba(1,44,45,.18)}
.hf-bienvenue__img{justify-self:center;display:block;width:min(64vw,260px);height:auto;border-radius:16px;filter:drop-shadow(0 18px 30px rgba(1,44,45,.18))}

/* ---------------------------------------------------------------- Sections (colonne de 720px) */
.hf-bienvenue__section{max-width:720px;margin:0 auto;padding:40px 20px 0}
.hf-bienvenue__section--roue{padding-top:24px;display:grid;gap:14px}
.hf-bienvenue__section--meteo{padding-top:16px}
.hf-bienvenue__section--livres{padding-top:48px;display:grid;gap:18px}
.hf-bienvenue__h2{margin:0;font:900 clamp(24px,3.4vw,30px)/1.1 var(--font-brand);letter-spacing:-.02em}
.hf-bienvenue__kicker{font:700 13px/1.2 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#fff)}

/* ---------------------------------------------------------------- Je chante */
.hf-bienvenue-chansons{background:#fff;border-radius:28px;padding:24px 18px;display:grid;gap:20px;box-shadow:0 2px 6px rgba(1,44,45,.06),0 10px 30px rgba(1,44,45,.07)}
.hf-bienvenue-chansons__head{display:grid;gap:6px}
.hf-bienvenue-chansons__title{margin:0;font:900 clamp(28px,4vw,36px)/1.1 var(--font-brand);letter-spacing:-.02em;text-wrap:balance}
.hf-bienvenue-chansons__lead{margin:0}
.hf-bienvenue-songs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hf-bienvenue-song{display:flex;align-items:center;gap:14px;padding-block:14px;padding-inline:14px 18px;border-radius:999px;background:#F2F2F2}
.hf-bienvenue-song__play{flex:none;box-sizing:border-box;width:64px;height:64px;margin:0;padding:0;border-radius:50%;border:2px solid #012C2D;background:#F1C22A;box-shadow:0 3px 0 #012C2D;display:grid;place-items:center;color:#012C2D;font:inherit;transition:transform .12s,box-shadow .12s}
button.hf-bienvenue-song__play{cursor:pointer;-webkit-appearance:none;appearance:none}
button.hf-bienvenue-song__play:hover,.hf-bienvenue-song__link:hover .hf-bienvenue-song__play{transform:translateY(-1px);box-shadow:0 4px 0 #012C2D}
button.hf-bienvenue-song__play:active,.hf-bienvenue-song__link:active .hf-bienvenue-song__play{transform:translateY(3px);box-shadow:none}
.hf-bienvenue-song__play[hidden],.hf-bienvenue-song__bar[hidden]{display:none}
.hf-bienvenue-song__icon{display:block}
.hf-bienvenue-song__icon--play{margin-left:3px}
.hf-bienvenue-song__icon--pause,.hf-bienvenue-song.is-playing .hf-bienvenue-song__icon--play{display:none}
.hf-bienvenue-song.is-playing .hf-bienvenue-song__icon--pause{display:block}
.hf-bienvenue-song__body{flex:1;min-width:0;display:grid;gap:8px}
.hf-bienvenue-song__bar{display:block;height:8px;border-radius:999px;background:#fff;overflow:hidden}
.hf-bienvenue-song__fill{display:block;height:100%;width:0;border-radius:999px;background:var(--hf-hero-bg);transition:width .4s}
.hf-bienvenue-song__title{font:900 16px/1.2 var(--font-brand)}
.hf-bienvenue-song__audio{display:block;width:100%;max-width:100%}
/* Lecteur du navigateur (sans JavaScript, ou fichier illisible) : ligne moins arrondie. */
.hf-bienvenue-song[data-hf-song]:not(.is-ready){border-radius:28px;padding-inline:20px}
.hf-bienvenue-song__audio[hidden]{display:none}
.hf-bienvenue-song__more{justify-self:start;font:700 14px/1.3 var(--font-brand)}
.hf-bienvenue-song__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:700 14px/1.3 var(--font-brand)}
.hf-bienvenue-song__go{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
/* Ligne entière cliquable vers la page de la chanson. */
.hf-bienvenue-song--link{padding:0}
.hf-bienvenue-song__link{flex:1;min-width:0;display:flex;align-items:center;gap:14px;padding-block:14px;padding-inline:14px 18px;border-radius:999px;color:#012C2D;text-decoration:none}
.hf-bienvenue-song__link:hover{color:#012C2D}
.hf-bienvenue-song__link:hover .hf-bienvenue-song__go{text-decoration-color:#C59CEC}

/* ---------------------------------------------------------------- La météo de mon corps (même composition que .hf-roue-encart) */
.hf-bienvenue-meteo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#fff;border-radius:24px;padding:18px 24px;color:#012C2D;text-decoration:none;font-family:var(--font-brand);box-shadow:0 2px 6px rgba(1,44,45,.06);transition:box-shadow .2s}
.hf-bienvenue-meteo:hover{color:#012C2D;box-shadow:0 10px 30px rgba(1,44,45,.12)}
.hf-bienvenue-meteo__disc{width:84px;height:84px;flex:none;filter:drop-shadow(0 4px 10px rgba(1,44,45,.15))}
.hf-bienvenue-meteo__txt{flex:1 1 240px;display:grid;gap:4px}
.hf-bienvenue-meteo__tag{font:700 12px/1.3 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-bienvenue-meteo__title{font:900 22px/1.15 var(--font-brand);letter-spacing:-.02em}
.hf-bienvenue-meteo__text{font-size:15px;line-height:1.45}
.hf-bienvenue-meteo__cta{display:inline-flex;align-items:center;height:48px;padding:0 22px;box-sizing:border-box;border-radius:999px;border:2px solid #012C2D;background:#74CBD2;font:700 16px/1 var(--font-brand);box-shadow:0 3px 0 #012C2D;transition:transform .12s,box-shadow .12s}
.hf-bienvenue-meteo:hover .hf-bienvenue-meteo__cta{transform:translateY(-1px);box-shadow:0 4px 0 #012C2D}
.hf-bienvenue-meteo:active .hf-bienvenue-meteo__cta{transform:translateY(3px);box-shadow:none}

/* ---------------------------------------------------------------- Pour continuer l'aventure (cartes « related » de product-card.php) */
.hf-bienvenue__books{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:16px}
.hf-bienvenue .hf-bienvenue__book{padding:12px;gap:10px;border-radius:24px}
.hf-bienvenue .hf-bienvenue__book .hf-book__kicker--row{padding:0 4px}
.hf-bienvenue .hf-bienvenue__book .hf-book__title--s{padding:0 4px 4px;font:900 18px/1.2 var(--font-brand)}

/* ---------------------------------------------------------------- Contenu de la page (facultatif) */
.hf-bienvenue__section--contenu{padding-top:40px}

/* ---------------------------------------------------------------- Réseaux */
.hf-bienvenue__section--reseaux{padding:40px 20px 64px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hf-bienvenue__social-title{margin:0;font:900 20px/1.2 var(--font-brand)}
.hf-bienvenue__social{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.hf-bienvenue__social a{display:inline-flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;padding:0 18px;border-radius:999px;border:2px solid #012C2D;background:#fff;color:#012C2D;text-decoration:none;font:700 15px/1 var(--font-brand)}
.hf-bienvenue__social a:hover{color:#012C2D;background:color-mix(in oklab,#012C2D 6%,#fff)}

/* ---------------------------------------------------------------- Tablette et ordinateur : valeurs de la maquette */
@media (min-width:601px){
  .hf-bienvenue__hero-in{padding:48px 20px 56px;gap:32px}
  .hf-bienvenue__ph{width:min(100%,260px)}
  .hf-bienvenue__img{width:min(100%,320px)}
  .hf-bienvenue__section{padding-top:56px}
  .hf-bienvenue__section--roue{padding-top:28px}
  .hf-bienvenue__section--meteo{padding-top:16px}
  .hf-bienvenue__section--livres{padding-top:56px}
  .hf-bienvenue__section--contenu{padding-top:48px}
  .hf-bienvenue__section--reseaux{padding:48px 20px 80px}
  .hf-bienvenue-chansons{border-radius:36px;padding:32px}
  .hf-bienvenue-song,.hf-bienvenue-song__link{gap:18px}
}
@media (min-width:721px){
  .hf-bienvenue [id]{scroll-margin-top:120px}
}