/* Kidtrotters : histoires à écouter. Mobile d'abord, couleurs des couvertures. */
@font-face{font-family:'Nunito';font-weight:900;font-display:swap;src:url('/assets/fonts/Nunito-Black.ttf') format('truetype')}
@font-face{font-family:'Nunito';font-weight:800;font-display:swap;src:url('/assets/fonts/Nunito-ExtraBold.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-weight:400;font-display:swap;src:url('/assets/fonts/OpenSans-Regular.ttf') format('truetype')}
@font-face{font-family:'Open Sans';font-weight:700;font-display:swap;src:url('/assets/fonts/OpenSans-Bold.ttf') format('truetype')}
:root{--marine:#1F5C8B;--marine-fonce:#163F60;--orange:#E8822E;--rouge:#C8452B;--jaune:#FFD23F;--ciel:#EAF4FA;--carte:#FFFFFF;--encre:#2E3A44;--doux:#5B6B78}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ciel);color:var(--encre);font:400 17px/1.5 'Open Sans',system-ui,sans-serif}
a{color:var(--marine)}
img{max-width:100%;display:block}
main{max-width:760px;margin:0 auto;padding:0 16px 32px}
h1,h2,.marque,.carte-titre,.duree{font-family:'Nunito',system-ui,sans-serif}
h1,h2,.carte-titre{text-wrap:balance}
p,.accroche{text-wrap:pretty}
.marque{margin:0;font-weight:900;color:var(--marine);letter-spacing:.01em}
.marque.grand{font-size:44px;line-height:1.05}

/* En-tête du guide : les Kidtrotters écoutent, seul « Bretagne » est écrit sur l'image. */
.tete{position:relative;max-width:480px;margin:0 auto;overflow:hidden;border-radius:0 0 28px 28px;background:#F2B979}
.tete-image{width:100%;height:auto}
.tete::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(to bottom,rgba(22,63,96,0),rgba(22,63,96,.55))}
.tete-titre{position:absolute;left:0;right:0;bottom:14px;z-index:1;margin:0;text-align:center;font-size:clamp(52px,15vw,84px);line-height:1;font-weight:900;color:#fff;-webkit-text-stroke:2px var(--marine-fonce);text-shadow:0 4px 0 var(--marine-fonce),0 8px 24px rgba(0,0,0,.35)}
.base-line{display:inline-block;margin:0;background:var(--marine);color:#fff;font:800 15px/1.2 'Nunito',sans-serif;padding:6px 14px;border-radius:999px}
.intro{font-size:18px;margin:22px 0 8px}

.groupe h2{font-size:26px;font-weight:900;color:var(--rouge);margin:28px 0 12px;line-height:1.15}
.cartes{display:grid;gap:12px}
@media(min-width:620px){.cartes{grid-template-columns:1fr 1fr}}
.carte{display:flex;gap:12px;align-items:center;background:var(--carte);border-radius:18px;padding:10px;text-decoration:none;color:var(--encre);box-shadow:0 2px 0 rgba(31,92,139,.12)}
.carte img{width:84px;height:84px;object-fit:contain;flex:none}
.carte-texte{display:flex;flex-direction:column;gap:2px;min-width:0}
.carte-titre{font-weight:900;font-size:19px;line-height:1.15;color:var(--marine)}
.duree{font-weight:800;font-size:14px;color:var(--orange)}
.carte .accroche{font-size:14px;line-height:1.35;color:var(--doux)}
.carte:active{transform:scale(.99)}

/* Page d'une histoire. */
.retour{max-width:760px;margin:0 auto;padding:14px 16px 0}
.retour a{font:800 15px 'Nunito',sans-serif;text-decoration:none}
.histoire{text-align:center}
.histoire-image{max-height:300px;width:auto;margin:10px auto 6px}
.histoire .marque{font-size:15px;color:var(--orange)}
.histoire h1{font-size:34px;line-height:1.1;font-weight:900;color:var(--marine);margin:4px 0}
.histoire > .duree{font-size:16px;margin:0}
.histoire > .accroche{font-size:18px;margin:12px auto 18px;max-width:560px}
.lecteur{display:flex;align-items:center;gap:14px;background:#fff;border-radius:999px;padding:10px 18px 10px 10px;max-width:560px;margin:0 auto;box-shadow:0 3px 0 rgba(31,92,139,.15)}
.lecture{flex:none;width:68px;height:68px;border-radius:50%;border:0;padding:0;background:var(--rouge);color:#fff;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 14px rgba(200,69,43,.35);-webkit-tap-highlight-color:transparent}
.lecture:active{transform:scale(.95)}
.lecture svg{width:32px;height:32px;fill:#fff}
.icone-lecture{transform:translateX(2px)}
.icone-pause,.lecture.en-cours .icone-lecture{display:none}
.lecture.en-cours .icone-pause{display:block}
.barre{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.position{flex:1;accent-color:var(--orange);min-width:0}
.temps{font:800 15px 'Nunito',sans-serif;color:var(--marine);min-width:3.5em;text-align:right}
.telecharger{font-size:14px;margin:14px 0 26px}
.histoire h2{font-size:22px;font-weight:900;color:var(--rouge);text-align:left;margin:8px 0 10px}
.histoire .carte{text-align:left}

.accueil{text-align:center;padding-top:48px}
.accueil .base-line{margin:10px 0 24px}
.destination{max-width:420px;margin:0 auto;flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.destination img{width:100%;height:260px;object-fit:cover}
.destination .carte-texte{padding:10px 14px 14px}
.pied{max-width:760px;margin:0 auto;padding:18px 16px 30px;text-align:center;font-size:13px;color:var(--doux)}
.pied p{margin:2px 0}

/* Page parents : coloriages, diplôme, formulaire. */
.bonus{padding-top:32px}
.bonus .base-line{margin:8px 0 6px}
.bonus h2{font-size:26px;font-weight:900;color:var(--rouge);margin:28px 0 8px}
.bonus h3{font:900 20px/1.2 'Nunito',sans-serif;color:var(--marine);margin:0 0 10px}
.coloriages{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.coloriage{background:#fff;border-radius:14px;padding:8px;text-align:center;text-decoration:none;color:var(--marine);font:900 16px 'Nunito',sans-serif;box-shadow:0 2px 0 rgba(31,92,139,.12)}
.coloriage img{width:100%;height:auto;border-radius:6px;margin-bottom:6px}
.champ{display:block;font:800 15px 'Nunito',sans-serif;color:var(--marine);margin:12px 0 4px}
.saisie{width:100%;font:400 18px 'Open Sans',sans-serif;padding:10px 12px;border:2px solid #C9D6E0;border-radius:12px;background:#fff}
.saisie:focus{outline:none;border-color:var(--orange)}
.diplome-apercu{width:100%;height:auto;margin-top:14px;border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,.08);background:#fff}
.bouton{font:900 17px 'Nunito',sans-serif;background:var(--rouge);color:#fff;border:0;border-radius:999px;padding:12px 22px;cursor:pointer;margin-top:12px}
.bouton.secondaire{background:var(--marine)}
.bouton:disabled{opacity:.5}
.form-diplome{background:#fff;border-radius:18px;padding:18px;margin-top:20px}
.case{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:15px;line-height:1.4}
.case input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--rouge)}
.case em{color:var(--doux);font-style:normal;font-size:13px}
.mention{font-size:13px;color:var(--doux);margin:6px 0 4px}
.form-etat{font-weight:700;color:var(--marine);min-height:1.4em}
.texte-legal{padding-top:32px}
.texte-legal h2{font-size:20px;font-weight:900;color:var(--rouge);margin:22px 0 6px}