/* Histoires futées — coin des enfants (version 2) et page Coloriages.
   Maquettes : Coin des enfants v2.dc.html, Coloriages.dc.html. Gabarits : page-templates/coin-des-enfants.php,
   page-templates/coloriages.php (données : inc/coin.php ; comportements : assets/js/41-coin.js).
   La bulle « Respire avec Dino » reprend les styles .hf-breath__* de 40-enfants.css. */

/* Les blocs masqués restent masqués même quand leur classe fixe un display. */
.hf-coin [hidden]{display:none!important}
.hf-coin section[id],.hf-coin [id^="cle-"],.hf-coin-encart[id]{scroll-margin-top:110px}

/* ------------------------------------------------------------------ Commun */
.hf-coin-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-coin-h2{margin:0;font:900 clamp(30px,4.5vw,42px)/1.05 var(--font-brand);letter-spacing:-.02em}
.hf-coin-h3{margin:0;font:900 clamp(28px,4vw,38px)/1.05 var(--font-brand);letter-spacing:-.02em}
.hf-coin [tabindex="-1"]:focus:not(:focus-visible){outline:none}
.hf-coin-head{display:grid;gap:8px;margin-bottom:24px}
.hf-coin-tag{padding:6px 14px;border-radius:999px;background:#F2F2F2;font:700 13px/1 var(--font-brand)}
.hf-coin-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.hf-coin-todo{margin:0;padding:18px 24px;border-radius:24px;background:#fff;font-size:16px;line-height:1.5}
.hf-coin-linkbtn{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}

/* ------------------------------------------------------------------ 01 Comment ça va, là, maintenant ? */
.hf-coin-sits{display:grid;gap:18px;width:100%;justify-items:center;margin:0}
.hf-coin-sits__group{display:grid;gap:10px;width:100%;max-width:980px}
.hf-coin-sits__label{justify-self:start;font:900 17px/1.2 var(--font-brand)}
.hf-coin-sits__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px}
.hf-coin-sit{min-height:76px;padding:12px 18px;border-radius:28px;border:3px solid #012C2D;background:var(--sit-bg,#fff);color:#012C2D;font:900 19px/1.15 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;text-wrap:balance}
.hf-coin-sit:hover{transform:translateY(-2px)}
.hf-coin-sit[aria-pressed="true"]{background:var(--sit-on,#F1C22A);box-shadow:0 6px 0 #012C2D;transform:translateY(-4px) scale(1.03)}
/* Téléphone : deux situations par ligne plutôt qu'une (la maquette passe à une colonne sous 312 px). */
@media (max-width:520px){
  .hf-coin-sits__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,118px),1fr));gap:10px}
  .hf-coin-sit{min-height:68px;padding:10px 12px;border-radius:24px;font-size:17px}
}

.hf-coin-answers{width:100%;max-width:980px;display:grid}
.hf-coin-answer{background:#fff;border-radius:36px;overflow:hidden;text-align:start;box-shadow:0 18px 40px rgba(1,44,45,.15)}
.hf-coin-answer__band{height:10px}
.hf-coin-answer__in{padding:clamp(22px,4vw,34px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px;align-items:center}
.hf-coin-answer__main{display:grid;gap:12px;justify-items:start}
.hf-coin-answer__msg{margin:0;font:900 clamp(24px,3.2vw,30px)/1.15 var(--font-brand);letter-spacing:-.01em;text-wrap:balance}
.hf-coin-answer__sub{margin:0;font-size:17px}
.hf-coin-answer__meteo{font:700 15px/1.2 var(--font-brand)}
.hf-coin-cta{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 26px;border-radius:999px;border:2px solid #012C2D;background:var(--key-bg,#F1C22A);color:#012C2D;text-decoration:none;font:700 18px/1.1 var(--font-brand);box-shadow:0 3px 0 #012C2D;box-sizing:border-box;transition:transform .12s,box-shadow .12s}
.hf-coin-cta:hover{color:#012C2D;transform:translateY(-1px);box-shadow:0 4px 0 #012C2D}
.hf-coin-cta:active{transform:translateY(3px);box-shadow:0 0 0 #012C2D}
.hf-coin-cta__go{display:inline-flex}
[dir="rtl"] .hf-coin-cta__go{transform:scaleX(-1)}
.hf-coin-answer__hero{display:flex;gap:16px;align-items:center;padding:14px;border-radius:24px;background:#F2F2F2;color:#012C2D;text-decoration:none;transition:background .15s}
.hf-coin-answer__hero:hover{color:#012C2D;background:color-mix(in oklab,#012C2D 8%,#F2F2F2)}
.hf-coin-answer__face{width:84px;height:100px;flex:none;border-radius:18px;display:grid;place-items:end center;overflow:hidden;font:700 12px/1.2 var(--font-brand);text-align:center}
.hf-coin-answer__face img{display:block;width:80%;height:92%;margin-bottom:-6px;object-fit:contain;object-position:center bottom}
.hf-coin-answer__face>span{align-self:center;padding:6px}
.hf-coin-answer__txt{display:grid;gap:4px}
.hf-coin-answer__kicker{font:700 12px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-coin-answer__name{font:900 24px/1.05 var(--font-brand)}
.hf-coin-answer__line{font-size:15px;line-height:1.35}

/* ------------------------------------------------------------------ 02 Mes clés futées */
.hf-coin-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px}
.hf-coin-key{display:flex;gap:12px;align-items:flex-start;text-align:start;padding:16px 18px;border-radius:24px;border:3px solid #012C2D;background:#fff;color:#012C2D;text-decoration:none;cursor:pointer;box-shadow:0 3px 0 #012C2D;transform:none;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .12s,background-color .22s;font-family:var(--font-brand)}
.hf-coin-key:hover{color:#012C2D;transform:translateY(-2px)}
.hf-coin-key.is-on{background:var(--key-bg,#BECF71);box-shadow:0 6px 0 #012C2D;transform:translateY(-4px) scale(1.03)}
.hf-coin-key__dot{flex:none;width:18px;height:18px;margin-top:4px;border-radius:50%;border:2px solid #012C2D;background:var(--key-bg,#fff)}
.hf-coin-key__txt{display:grid;gap:4px}
.hf-coin-key__txt strong{font:900 21px/1.1 var(--font-brand)}
.hf-coin-key__txt span{font-size:14px;line-height:1.35}

.hf-coin-cles__box{margin-top:18px;background:#fff;border-radius:36px;overflow:hidden}
.hf-coin-cles__band{height:10px;transition:background-color .22s}
.hf-coin-cles__in{padding:clamp(24px,5vw,48px)}

/* Un seul jeu affiché : celui de la clé choisie (classe is-on, posée par le gabarit puis par 41-coin.js). */
.hf-coin-panel{display:none}
.hf-coin-panel.is-on{display:block}
/* Sans JavaScript : le jeu visé par l'ancre (#cle-merci…) remplace celui affiché par défaut. */
.hf-coin:not(.is-js) .hf-coin-panel:target{display:block}
.hf-coin:not(.is-js) .hf-coin-panels:has(.hf-coin-panel:target) .hf-coin-panel:not(:target){display:none}

.hf-coin-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:36px;align-items:center}
.hf-coin-split--top{align-items:start}
.hf-coin-stack{display:grid;gap:20px}
.hf-coin-intro{display:grid;gap:14px;justify-items:start}
.hf-coin-intro--tight{gap:10px}
.hf-coin-intro p{margin:0}
.hf-coin .hf-breath__visual{max-width:320px}
.hf-coin-malino{width:110px;height:auto;display:block}

/* Je chante */
.hf-coin-songs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.hf-coin-song{display:flex;align-items:center;gap:18px;padding:18px;border-radius:24px;color:#012C2D;text-decoration:none;transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.hf-coin-song:hover{color:#012C2D;transform:translateY(-2px);box-shadow:0 10px 24px rgba(1,44,45,.14)}
.hf-coin-song__play{width:72px;height:72px;border-radius:50%;background:#F1C22A;border:3px solid #012C2D;box-shadow:0 4px 0 #012C2D;display:grid;place-items:center;flex:none}
.hf-coin-song__txt{display:grid;gap:4px}
.hf-coin-song__kicker{font:700 13px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase}
.hf-coin-song__title{font:900 28px/1 var(--font-brand)}

/* Je dis merci */
.hf-coin-merci{display:grid;gap:16px;padding:24px;border-radius:24px;background:color-mix(in oklab,#E987C6 16%,#fff)}
.hf-coin-merci__step{display:grid;gap:14px}
.hf-coin-merci:not(.is-ready) .hf-coin-merci__step+.hf-coin-merci__step{padding-top:16px;border-top:2px dashed rgba(1,44,45,.2)}
.hf-coin-merci__n{font:700 13px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase}
.hf-coin-merci__q{margin:0;font:900 24px/1.2 var(--font-brand);text-wrap:balance}
.hf-coin-chips{display:flex;gap:8px;flex-wrap:wrap}
.hf-coin-chip{min-height:48px;padding:0 18px;border-radius:999px;border:2px solid #012C2D;background:#fff;color:#012C2D;font:700 16px/1 var(--font-brand);cursor:pointer;box-shadow:0 3px 0 #012C2D;transform:none;transition:transform .12s,box-shadow .12s}
.hf-coin-chip:hover{transform:translateY(-1px);box-shadow:0 4px 0 #012C2D}
.hf-coin-chip:active{transform:translateY(3px);box-shadow:0 0 0 #012C2D}
/* Sans JavaScript, les réponses sont de simples idées (boutons inactifs). */
.hf-coin-chip:disabled{cursor:default;box-shadow:none;transform:none;color:#012C2D;opacity:1}
.hf-coin-chip--other{min-width:64px}
.hf-coin-merci__done{display:grid;gap:12px;justify-items:start}
.hf-coin-merci__title{margin:0;font:900 clamp(26px,3.6vw,34px)/1.1 var(--font-brand);letter-spacing:-.02em;text-wrap:balance}
.hf-coin-merci__why{margin:0;font:700 18px/1.3 var(--font-brand)}

/* Je bouge, Je me fais un câlin : jeux par étapes */
.hf-coin-steps{display:grid;gap:16px;padding:24px;border-radius:24px;background:var(--steps-bg,#F2F2F2)}
.hf-coin-steps__label{font:700 13px/1 var(--font-brand);letter-spacing:.08em;text-transform:uppercase}
.hf-coin-steps__text{margin:0;font:900 clamp(24px,3.4vw,32px)/1.15 var(--font-brand);text-wrap:balance}
.hf-coin-steps__list{margin:0;padding-inline-start:1.4em;display:grid;gap:10px;font:700 18px/1.35 var(--font-brand)}
.hf-coin-steps__dots{display:flex;gap:6px}
.hf-coin-steps__dots span{width:28px;height:8px;border-radius:999px;background:#fff}
.hf-coin-steps__dots .is-done{background:#012C2D}
.hf-coin-steps__dots .is-now{background:var(--steps-accent,#74CBD2)}
.hf-coin-steps .hf-btn{justify-self:start}

/* ------------------------------------------------------------------ 03 Mes héros */
.hf-coin-heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px}
.hf-coin-hero{background:#fff;border-radius:36px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);box-shadow:0 2px 6px rgba(1,44,45,.06),0 10px 30px rgba(1,44,45,.07)}
.hf-coin-hero__visual{display:grid;place-items:center;min-height:240px;padding:16px;font:700 14px/1.3 var(--font-brand);text-align:center}
.hf-coin-hero__visual img{display:block;width:100%;max-width:140px;height:210px;object-fit:contain}
.hf-coin-hero__body{padding:24px;display:grid;gap:10px;align-content:center;justify-items:start}
.hf-coin-hero__title{margin:0;font:900 32px/1 var(--font-brand);letter-spacing:-.02em}
.hf-coin-hero__traits{margin:0;font:700 16px/1.35 var(--font-brand)}
.hf-coin-hero__story{margin:0;font-size:15px;line-height:1.45}
.hf-coin-hero__btns{display:flex;gap:8px;flex-wrap:wrap;padding-top:4px}
@media (max-width:400px){
  .hf-coin-hero{grid-template-columns:1fr}
  .hf-coin-hero__visual{min-height:0}
}

/* ------------------------------------------------------------------ 04 Pour les parents : encarts */
.hf-coin-encart{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#fff;border-radius:24px;padding:18px 24px;text-decoration:none;color:#012C2D;font-family:var(--font-brand);box-shadow:0 2px 6px rgba(1,44,45,.06);transition:box-shadow .2s}
.hf-coin-encart:hover{color:#012C2D;box-shadow:0 10px 30px rgba(1,44,45,.12)}
.hf-coin-encart__disc{width:84px;height:84px;flex:none;filter:drop-shadow(0 4px 10px rgba(1,44,45,.15))}
.hf-coin-encart__thumb{width:84px;height:84px;flex:none;border-radius:18px;background:color-mix(in oklab,#C59CEC 22%,#fff);display:grid;place-items:center;overflow:hidden}
.hf-coin-encart__thumb img{height:74px;width:auto;max-width:none;display:block}
.hf-coin-encart__txt{flex:1 1 240px;display:grid;gap:4px}
.hf-coin-encart__tag{font:700 12px/1.2 var(--font-brand);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in oklab,#012C2D 64%,#fff)}
.hf-coin-encart__title{font:900 22px/1.15 var(--font-brand);letter-spacing:-.02em}
.hf-coin-encart__text{font-size:15px;line-height:1.45}
.hf-coin-encart__cta{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;border:2px solid #012C2D;font:700 16px/1 var(--font-brand);box-shadow:0 3px 0 #012C2D;box-sizing:border-box;transition:transform .12s,box-shadow .12s}
.hf-coin-encart:hover .hf-coin-encart__cta{transform:translateY(-1px);box-shadow:0 4px 0 #012C2D}
.hf-coin-encart--wide{padding:20px 24px}
.hf-coin-encart--wide .hf-coin-encart__txt{flex-basis:260px}
.hf-coin-parents__more{justify-self:end;margin-top:-4px;font:700 15px/1.2 var(--font-brand)}

/* ------------------------------------------------------------------ Page Coloriages (page-templates/coloriages.php) */
.hf-coin-back{padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.85);color:#012C2D;font:700 14px/1.2 var(--font-brand);text-decoration:none;transition:background .15s}
.hf-coin-back:hover{color:#012C2D;background:#fff}
.hf-coin-back__arrow{display:inline-block}
[dir="rtl"] .hf-coin-back__arrow{transform:scaleX(-1)}
.hf-colos2__head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.hf-colos2__more{font:700 16px/1.2 var(--font-brand)}
.hf-colos2__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.hf-colos2__card{background:#fff;border-radius:24px;padding:16px;display:grid;gap:14px;align-content:start;box-shadow:0 2px 6px rgba(1,44,45,.06)}
.hf-colos2__frame{aspect-ratio:210/297;border-radius:16px;border:3px dashed var(--colo,#E987C6);overflow:hidden;background:#fff;display:grid;place-items:center;align-content:center;gap:8px;padding:16px;box-sizing:border-box;text-align:center;font:700 15px/1.35 var(--font-brand)}
.hf-colos2__frame.has-img{position:relative;padding:0}
.hf-colos2__frame img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block}
.hf-colos2__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hf-colos2__title{font:900 20px/1.2 var(--font-brand)}
.hf-colos2__dl{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 20px;border-radius:999px;border:2px solid #012C2D;background:var(--colo,#E987C6);color:#012C2D;font:700 16px/1 var(--font-brand);text-decoration:none;box-shadow:0 3px 0 #012C2D;box-sizing:border-box;transition:transform .12s,box-shadow .12s}
a.hf-colos2__dl:hover{color:#012C2D;transform:translateY(-1px);box-shadow:0 4px 0 #012C2D}
a.hf-colos2__dl:active{transform:translateY(3px);box-shadow:0 0 0 #012C2D}
.hf-colos2__dl.is-soon{opacity:.55;box-shadow:none;cursor:default}
.hf-colos2__tip{margin:14px 0 0;font-size:14px;color:color-mix(in oklab,#012C2D 64%,#F2F2F2)}