/* Histoires futées — coin des enfants, roue des émotions, pages chansons.
   Maquettes : Coin des enfants, Roue des emotions, RoueEmotions (composant). */

/* Les blocs masqués restent masqués même quand leur classe fixe un display. */
.hf-enfants [hidden],.hf-roue-page [hidden],.hf-roue-formats [hidden],.hf-jeu [hidden]{display:none!important}

/* ------------------------------------------------------------------ Commun */
.hf-enfants__kicker{margin:0;font:700 13px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#F2F2F2)}
.hf-enfants__kicker--card{color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-enfants__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:20px}
.hf-enfants__split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:36px;align-items:center}
.hf-enfants__empty{margin:0;padding:18px 24px;border-radius:24px;background:#fff;font-size:16px;line-height:1.5}
.hf-enfants section[id]{scroll-margin-top:110px}

/* ------------------------------------------------------------------ Comment tu te sens aujourd’hui ? */
.hf-humeur__pills{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:820px;margin:0}
.hf-humeur__pill{min-width:150px;height:72px;padding:0 28px;border-radius:999px;border:3px solid #012C2D;background:var(--emo-bg,#fff);color:#012C2D;font:900 24px/1 var(--font-brand);cursor:pointer;box-shadow:0 3px 0 #012C2D;transform:none;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .12s}
.hf-humeur__pill:hover{transform:translateY(-2px)}
.hf-humeur__pill[aria-pressed="true"]{box-shadow:0 6px 0 #012C2D;transform:translateY(-4px) scale(1.04)}
@media (max-width:520px){
  .hf-humeur__pills{gap:10px}
  .hf-humeur__pill{min-width:0;height:60px;padding:0 20px;font-size:20px}
}
.hf-humeur__answers{width:100%;max-width:820px;display:grid}
.hf-humeur__answer{background:#fff;border-radius:36px;padding:clamp(22px,4vw,34px);display:grid;gap:18px;text-align:start;box-shadow:0 18px 40px rgba(1,44,45,.15)}
.hf-humeur__answer-title{margin:0;font:900 clamp(22px,3vw,28px)/1.2 var(--font-brand);letter-spacing:-.01em}
.hf-humeur__picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:14px}
.hf-humeur__pick{display:flex;gap:14px;align-items:center;padding:12px;border-radius:24px;background:#F2F2F2;color:#012C2D;text-decoration:none;transition:background .15s}
.hf-humeur__pick:hover{background:color-mix(in oklab,#012C2D 8%,#F2F2F2);color:#012C2D}
.hf-humeur__cover{width:72px;aspect-ratio:3/4;border-radius:12px;flex:none;overflow:hidden;display:block}
.hf-humeur__cover img{width:100%;height:100%;object-fit:cover;display:block}
.hf-humeur__pick-txt{display:grid;gap:4px}
.hf-humeur__pick-txt strong{font:900 22px/1.1 var(--font-brand)}
.hf-humeur__pick-txt span{font:700 14px/1.2 var(--font-brand);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.hf-humeur__calm{justify-self:start;font:900 17px/1.2 var(--font-brand)}

/* ------------------------------------------------------------------ Jeu des couleurs (template-parts/jeu-couleurs.php) */
.hf-jeu{scroll-margin-top:110px}
.hf-jeu__card{background:#fff;border-radius:36px;overflow:hidden}
.hf-jeu__band{height:10px;background:linear-gradient(90deg,#BECF71,#C59CEC 25%,#E987C6 50%,#74CBD2 75%,#F1C22A)}
.hf-jeu__grid{padding:clamp(24px,5vw,48px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:36px;align-items:center}
.hf-jeu__main{display:grid;gap:18px;align-content:start}
.hf-jeu__step{margin:0;font:700 13px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-jeu__title{margin:0;font:900 clamp(28px,4vw,40px)/1.08 var(--font-brand);letter-spacing:-.02em;text-wrap:balance}
.hf-jeu__title:focus:not(:focus-visible){outline:none}
.hf-jeu__text{margin:0;font-size:18px;text-wrap:pretty}
.hf-jeu__text:empty{display:none}
.hf-jeu__controls:empty{display:none}
.hf-jeu__emos,.hf-jeu__actions,.hf-jeu__links{display:flex;gap:10px;flex-wrap:wrap}
.hf-jeu__swatches{display:flex;gap:14px;flex-wrap:wrap}
.hf-jeu__emo{height:52px;padding:0 22px;border-radius:999px;border:3px solid #012C2D;background:#fff;color:#012C2D;font:900 18px/1 var(--font-brand);cursor:pointer;box-shadow:0 3px 0 #012C2D;transition:transform .12s,box-shadow .12s}
.hf-jeu__emo:hover{transform:translateY(-2px);box-shadow:0 5px 0 #012C2D}
.hf-jeu__emo:active{transform:translateY(3px);box-shadow:0 0 0 #012C2D}
.hf-jeu__swatch{display:grid;justify-items:center;gap:6px;padding:0;border:0;background:none;cursor:pointer;color:#012C2D;font:700 14px/1.1 var(--font-brand)}
.hf-jeu__dot{width:64px;height:64px;border-radius:50%;border:3px solid #012C2D;box-shadow:0 2px 0 #012C2D;box-sizing:border-box;transform:none;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .12s}
.hf-jeu__swatch:hover .hf-jeu__dot,.hf-jeu__swatch:focus-visible .hf-jeu__dot{box-shadow:0 5px 0 #012C2D;transform:translateY(-4px) scale(1.06)}
.hf-jeu__help{display:grid;gap:10px}
.hf-jeu__help>span{font:700 15px/1.2 var(--font-brand)}
.hf-jeu__link{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:999px;border:2px solid #012C2D;color:#012C2D;text-decoration:none;font:700 16px/1 var(--font-brand);box-sizing:border-box}
.hf-jeu__link:hover{color:#012C2D;box-shadow:0 3px 0 #012C2D}
.hf-jeu__restart{justify-self:start;padding:0;border:0;background:none;cursor:pointer;color:#012C2D;font:700 16px/1 var(--font-brand);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.hf-jeu__visual{display:grid;gap:14px;justify-items:center}
.hf-jeu__circle{position:relative;width:min(300px,80%);aspect-ratio:1/1;border-radius:50%;border:4px solid #012C2D;overflow:hidden;box-shadow:0 18px 40px rgba(1,44,45,.15);transition:background .4s ease}
.hf-jeu__layer{position:absolute;inset:0;border-radius:50%;opacity:0}
.hf-jeu__layer.is-on{opacity:1}
.hf-jeu__caption{margin:0;min-height:28px;font:900 20px/1.2 var(--font-brand);text-align:center;text-wrap:balance}

/* ------------------------------------------------------------------ Chante avec tes héros */
.hf-song{position:relative;display:block;border-radius:36px;overflow:hidden;color:#012C2D;text-decoration:none;min-height:220px;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.hf-song:hover{color:#012C2D;transform:translateY(-3px);box-shadow:0 14px 34px rgba(1,44,45,.16)}
.hf-song__fond{position:absolute;inset:0;background-size:cover;background-position:center}
.hf-song__in{position:relative;display:flex;align-items:center;gap:22px;padding:30px;min-height:220px;box-sizing:border-box}
.hf-song__play{width:88px;height:88px;border-radius:50%;background:#F1C22A;border:3px solid #012C2D;box-shadow:0 4px 0 #012C2D;display:grid;place-items:center;flex:none;box-sizing:border-box}
.hf-song__txt{display:grid;gap:6px}
.hf-song__kicker{font:700 13px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase}
.hf-song__title{font:900 clamp(28px,3.5vw,36px)/1.05 var(--font-brand);letter-spacing:-.02em}
@media (max-width:420px){.hf-song__in{gap:16px;padding:24px}.hf-song__play{width:68px;height:68px}}

/* ------------------------------------------------------------------ Respire avec Dino */
.hf-breath__visual{display:grid;gap:16px;justify-items:center;max-width:380px;width:100%;justify-self:center}
.hf-breath__ring{display:grid;place-items:center;aspect-ratio:1/1;width:100%;border-radius:50%;background:color-mix(in oklab,#74CBD2 22%,#fff)}
.hf-breath__bubble{width:82%;aspect-ratio:1/1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#BECF71,#74CBD2 70%);border:3px solid #012C2D;box-sizing:border-box;transform:scale(.45);transition:transform 600ms ease-in-out,opacity .6s ease}
.hf-breath__label{margin:0;min-height:32px;font:900 clamp(22px,3vw,28px)/1.15 var(--font-brand);letter-spacing:-.01em;text-align:center}
.hf-breath__round{font:700 16px/1 var(--font-brand)}
/* Mouvement réduit : la bulle ne grossit pas, elle s'éclaircit à l'expiration. */
@media (prefers-reduced-motion:reduce){
  .hf-breath__bubble{transform:scale(.72)!important}
  .hf-breath__bubble[data-phase="2"]{opacity:.5}
}
.hf-tips{margin-top:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
.hf-tips__item{background:#fff;border-radius:24px;padding:24px;display:grid;gap:8px;align-content:start}

/* ------------------------------------------------------------------ Écoute les histoires */
.hf-ecoute{background:#fff;border-radius:36px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.hf-ecoute__img{position:relative;display:grid;place-items:center;min-height:200px;padding:12px;overflow:hidden;font:700 14px/1.3 var(--font-brand);text-align:center}
.hf-ecoute__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hf-ecoute__img--hero img{object-fit:contain;padding:12px;box-sizing:border-box}
.hf-ecoute__body{padding:24px;display:grid;gap:12px;align-content:center}
.hf-ecoute__soon{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 18px;border-radius:999px;border:2px dashed color-mix(in oklab,#012C2D 40%,#fff);font:700 16px/1.2 var(--font-brand);box-sizing:border-box}
.hf-ecoute__audios{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hf-ecoute__audios li{display:grid;gap:4px}
.hf-ecoute__lang{font:700 13px/1 var(--font-brand);letter-spacing:.04em}
.hf-ecoute__audios audio{width:100%;height:40px}
@media (max-width:400px){.hf-ecoute{grid-template-columns:1fr}}

/* ------------------------------------------------------------------ Feuillette un livre */
.hf-flip-books{display:flex;gap:4px;padding:4px;border-radius:999px;background:#fff;flex-wrap:wrap}
.hf-flip-books [role="tab"]{height:44px;padding:0 20px;border-radius:999px;border:0;background:transparent;color:#012C2D;font:700 16px/1 var(--font-brand);cursor:pointer}
.hf-flip-books [role="tab"]:hover{background:color-mix(in oklab,#012C2D 6%,#fff)}
.hf-flip-books [role="tab"][aria-selected="true"]{background:#F1C22A}
.hf-flip{background:#fff;border-radius:36px;padding:clamp(16px,3vw,28px);display:grid;gap:16px}
.hf-flip__book{aspect-ratio:2/1;border-radius:24px;overflow:hidden}
.hf-flip__spread{display:grid;grid-template-columns:1fr 1fr;height:100%}
.hf-flip__page{display:grid;place-items:center;min-width:0;overflow:hidden;font:700 16px/1.3 var(--font-brand);text-align:center}
.hf-flip__page:first-child{border-inline-end:2px dashed rgba(1,44,45,.25)}
.hf-flip__page img{width:100%;height:100%;object-fit:contain;display:block}
.hf-flip__nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hf-flip__btn{width:60px;height:60px;border-radius:50%;border:2px solid #012C2D;background:#fff;color:#012C2D;display:grid;place-items:center;padding:0;cursor:pointer;box-sizing:border-box}
.hf-flip__btn--next{background:#F1C22A;box-shadow:0 3px 0 #012C2D}
.hf-flip__btn:disabled{opacity:.35;cursor:default}
[dir="rtl"] .hf-flip__btn svg{transform:scaleX(-1)}
.hf-flip__label{font:700 16px/1 var(--font-brand)}
@media (max-width:520px){.hf-flip__page{font-size:13px}}

/* ------------------------------------------------------------------ Colorie tes héros */
.hf-colos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:20px}
.hf-colo{background:#fff;border-radius:24px;padding:14px;display:grid;gap:12px}
.hf-colo__img{aspect-ratio:1/1;border-radius:16px;border:3px dashed #E987C6;display:grid;place-items:center;overflow:hidden;font:700 14px/1.3 var(--font-brand);text-align:center}
.hf-colo__img img{width:100%;height:100%;object-fit:contain;display:block}
.hf-colo__dl{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:999px;border:2px solid #012C2D;background:#fff;color:#012C2D;font:700 16px/1 var(--font-brand);text-decoration:none;box-sizing:border-box}
a.hf-colo__dl:hover{background:#F1C22A;color:#012C2D}
.hf-colo__dl.is-soon{opacity:.6}
.hf-colo__cahier{text-align:center;font-size:15px}

/* ------------------------------------------------------------------ Roue : encart compact (template-parts/roue-encart.php) */
.hf-roue-encart{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-roue-encart:hover{color:#012C2D;box-shadow:0 10px 30px rgba(1,44,45,.12)}
.hf-roue-encart__disc{width:84px;height:84px;flex:none;filter:drop-shadow(0 4px 12px rgba(1,44,45,.15))}
.hf-roue-encart__txt{flex:1 1 240px;display:grid;gap:4px}
.hf-roue-encart__kicker{font:700 12px/1.3 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-roue-encart__title{font:900 22px/1.15 var(--font-brand);letter-spacing:-.02em}
.hf-roue-encart__text{font-size:15px;line-height:1.45}
.hf-roue-encart__cta{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;border:2px solid #012C2D;background:#F1C22A;font:700 16px/1 var(--font-brand);box-shadow:0 3px 0 #012C2D;box-sizing:border-box;transition:transform .12s,box-shadow .12s}
.hf-roue-encart:hover .hf-roue-encart__cta{transform:translateY(-1px);box-shadow:0 4px 0 #012C2D}
/* Variante « La météo de mon corps » (accueil, maquette du 14/10). */
.hf-roue-encart--meteo{padding:20px 24px}
.hf-roue-encart--meteo .hf-roue-encart__disc{width:96px;height:96px}
.hf-roue-encart--meteo .hf-roue-encart__txt{flex-basis:260px}
.hf-roue-encart--meteo .hf-roue-encart__title{font-size:24px}
.hf-roue-encart--meteo .hf-roue-encart__text{font-size:16px}
.hf-roue-encart--meteo .hf-roue-encart__cta{background:#74CBD2}

/* ------------------------------------------------------------------ Roue : formats (template-parts/roue-formats.php) */
.hf-roue-formats{display:grid;gap:28px;font-family:var(--font-brand);color:#012C2D}
.hf-roue-formats__head{display:grid;gap:10px;max-width:680px}
.hf-roue-formats__free{justify-self:start;padding:6px 14px;border-radius:999px;background:#F1C22A;font:700 13px/1 var(--font-brand)}
.hf-roue-formats__title{margin:0;font:900 clamp(32px,4.8vw,46px)/1.05 var(--font-brand);letter-spacing:-.02em;text-wrap:balance}
.hf-roue-formats__intro{margin:0;font-size:18px;text-wrap:pretty}
.hf-roue-band{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:18px 24px;border-radius:24px;background:#fff;box-shadow:0 2px 6px rgba(1,44,45,.06)}
.hf-roue-band__discs{display:flex;align-items:center;gap:10px;flex:none}
.hf-roue-band__big{width:64px;height:64px;filter:drop-shadow(0 4px 12px rgba(1,44,45,.15))}
.hf-roue-band__plus{font:900 22px/1 var(--font-brand)}
.hf-roue-band__small{width:44px;height:44px;filter:drop-shadow(0 4px 12px rgba(1,44,45,.15))}
.hf-roue-band__txt{flex:1 1 320px;display:grid;gap:4px}
.hf-roue-band__txt strong{font:900 20px/1.2 var(--font-brand)}
.hf-roue-band__txt span{font-size:16px;line-height:1.45}

.hf-roue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px}
.hf-roue-card{background:#fff;border-radius:36px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;box-shadow:0 2px 6px rgba(1,44,45,.06),0 10px 30px rgba(1,44,45,.07);scroll-margin-top:110px}
.hf-roue-card__body{padding:24px 28px 28px;display:grid;gap:12px;align-content:start}
.hf-roue-card__meta{font:700 13px/1.35 var(--font-brand);color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-roue-card__title{margin:0;font:900 26px/1.1 var(--font-brand);letter-spacing:-.02em}
.hf-roue-card__desc{margin:0}
.hf-roue-card__list{display:grid;gap:8px;padding:14px 16px;border-radius:20px;background:#F2F2F2}
.hf-roue-card__list>strong{font:900 15px/1.2 var(--font-brand)}
.hf-roue-card__list ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.hf-roue-card__list li{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.4;font-weight:400}
.hf-roue-card__list li.is-corps{font-weight:900}
.hf-roue-card__check{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:#fff;display:grid;place-items:center}
.hf-roue-card__list li.is-corps .hf-roue-card__check{background:#F1C22A}

/* Visuel de la roue (template-parts/roue-visuel.php) : roue des émotions + météo de mon corps, côte à côte, sans superposition */
.hf-roue-vis{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.hf-roue-vis__wheel{display:block;width:210px;max-width:100%;aspect-ratio:1/1}
.hf-roue-vis__body{display:block;flex:none;width:84px;height:84px}
.hf-roue-vis--card{background:#F2F2F2;padding:28px 24px}
/* Cartes en 3 colonnes (conteneur de 1120 px) : les deux roues restent côte à côte, la grande se réduit un peu. */
@media (min-width:900px){.hf-roue-vis--card{flex-wrap:nowrap}.hf-roue-vis--card .hf-roue-vis__wheel{width:clamp(150px,calc(100% - 108px),210px)}}
.hf-roue-vis--full{padding:8px 0}
.hf-roue-vis--full .hf-roue-vis__wheel{width:min(300px,100%);height:auto}
.hf-roue-vis--full .hf-roue-vis__body{width:120px;height:120px}

/* Demande de la roue : bouton, formulaire, confirmation */
.hf-roue-ask>summary{list-style:none}
.hf-roue-ask>summary::-webkit-details-marker{display:none}
.hf-roue-ask[open]>summary{display:none}
.hf-roue-ask>*+*{margin-top:10px}
.hf-roue-form{display:grid;gap:10px}
.hf-roue-form__field{display:grid;gap:6px;font:700 14px/1.2 var(--font-brand)}
.hf-roue-form__email{padding:0 20px}
.hf-roue-lang{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:0;min-width:0}
.hf-roue-lang legend{padding:0;margin-bottom:6px;font:700 14px/1.2 var(--font-brand)}
.hf-roue-lang label{position:relative;cursor:pointer}
.hf-roue-lang input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.hf-roue-lang span{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:999px;border:2px solid #012C2D;background:#fff;font:700 14px/1 var(--font-brand);box-sizing:border-box}
.hf-roue-lang input:checked+span{background:#012C2D;color:#F2F2F2}
.hf-roue-lang input:focus-visible+span{outline:4px solid #C59CEC;outline-offset:2px}
.hf-roue-form__nl{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4;cursor:pointer}
.hf-roue-form__nl input{width:20px;height:20px;margin:0;accent-color:#012C2D;flex:none}
.hf-roue-form__mention{margin:0;font-size:12px;line-height:1.45;color:color-mix(in oklab,#012C2D 80%,#fff)}
.hf-roue-form__submit{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.hf-roue-form__submit .hf-btn{flex:1 1 auto}
.hf-roue-form__auto{margin:0;flex:1 1 200px;font:700 13px/1.4 var(--font-brand)}
.hf-roue-done{display:grid;gap:10px;padding:16px 18px;border-radius:20px;background:color-mix(in oklab,#BECF71 30%,#fff)}
.hf-roue-done__title{font:900 19px/1.25 var(--font-brand)}
.hf-roue-done__spam{font-size:14px}
.hf-roue-done__links{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center}
.hf-roue-done__links a,.hf-roue-done__view{font:700 16px/1 var(--font-brand)}
.hf-roue-done__view{padding:0;border:0;background:none;color:#012C2D;cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.hf-roue-done__nl{font:700 14px/1.3 var(--font-brand)}
.hf-roue-late{display:grid;gap:8px;padding-top:8px;border-top:1px solid rgba(1,44,45,.15)}
.hf-roue-late__txt{font-size:14px}
.hf-roue-late__form{display:flex;gap:8px;flex-wrap:wrap}
.hf-roue-late__email{flex:1 1 160px;min-width:0;width:auto;height:36px;padding:0 14px;font-size:15px}
.hf-roue-late .hf-form-notice{font-size:12px!important}

/* Boîte d'aperçu */
.hf-roue-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;border:0;border-radius:36px;background:#fff;color:#012C2D;box-shadow:0 12px 32px rgb(1 44 45 / .12),0 28px 64px rgb(1 44 45 / .10)}
.hf-roue-dialog::backdrop{background:rgb(1 44 45 / .45)}
.hf-roue-dialog__in{position:relative;padding:28px;display:grid;gap:12px}
.hf-roue-dialog__close{position:absolute;top:14px;inset-inline-end:14px;width:44px;height:44px;border-radius:50%;border:2px solid #012C2D;background:#fff;color:#012C2D;display:grid;place-items:center;padding:0;cursor:pointer}
.hf-roue-dialog__kicker{font:700 13px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-roue-dialog__title{margin:0;padding-inline-end:52px;font:900 26px/1.1 var(--font-brand);letter-spacing:-.02em}
.hf-roue-dialog__note{margin:0;font-size:14px;line-height:1.45;color:color-mix(in oklab,#012C2D 80%,#fff)}

/* ------------------------------------------------------------------ Page /roue */
.hf-roue-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.hf-roue-steps li{background:#fff;border-radius:24px;padding:20px 22px;display:flex;gap:14px;align-items:center}
.hf-roue-steps__n{width:40px;height:40px;border-radius:50%;background:#012C2D;color:#F2F2F2;display:grid;place-items:center;font:900 18px/1 var(--font-brand);flex:none}
.hf-roue-steps strong{font:900 18px/1.2 var(--font-brand)}
.hf-roue-page #roue{scroll-margin-top:110px}
.hf-roue-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.hf-roue-more__card{background:#fff;border-radius:24px;padding:24px;display:grid;gap:8px;align-content:start;color:#012C2D;text-decoration:none;transition:box-shadow .2s,transform .2s}
.hf-roue-more__card:hover{color:#012C2D;box-shadow:0 10px 30px rgba(1,44,45,.12);transform:translateY(-2px)}

/* ------------------------------------------------------------------ Pages chansons (contenu de la page) */
.hf-chanson--contenu{background:#F2F2F2}
.hf-chanson__main{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:clamp(24px,6vw,72px) 20px 72px;box-sizing:border-box;overflow:hidden}
.hf-chanson__fond{position:absolute;inset:0;background-size:cover;background-position:center}
.hf-chanson__content{position:relative;width:100%;max-width:880px;box-sizing:border-box;padding:clamp(24px,5vw,56px);border-radius:36px;background:rgba(255,255,255,.86);box-shadow:0 12px 32px rgb(1 44 45 / .12),0 28px 64px rgb(1 44 45 / .10)}
.hf-chanson__title{margin:0 0 12px;font:900 clamp(36px,6vw,60px)/1.05 var(--font-brand);letter-spacing:-.02em;text-wrap:balance}
.hf-chanson__content audio,.hf-chanson__content video,.hf-chanson__content iframe{max-width:100%}
.hf-chanson__content audio{width:100%}