/* Pages d'accueil du kit et de la médiathèque (écran). */
:root { --encre: #101828; --encre-douce: #344054; --ardoise: #5d6470; --trait: #e4e7ec; --bleu: #1b55b0; --bleu-nuit: #0f2449; --bleu-pale: #eff5ff; --or: #f2c94c; --or-fonce: #e6b400; --or-pale: #fdf3d7; }
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Scoutie Sans', system-ui, sans-serif; color: var(--encre); background: #f7f8fb; line-height: 1.55; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.1; }
p { margin: 0; }
.conteneur { max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }
.entete { background: #fff; border-bottom: 1px solid var(--trait); }
.entete .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 64px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; color: var(--bleu); font-size: 1.08rem; }
.marque b { color: var(--or-fonce); }
.marque img { width: 38px; height: 38px; }
.lien { text-decoration: none; font-weight: 600; font-size: .92rem; border: 1px solid var(--trait); border-radius: 10px; padding: 8px 14px; background: #fff; }
.heros { background: radial-gradient(120% 100% at 85% 0%, #2f7de1 0%, #1a468e 45%, var(--bleu-nuit) 100%); color: #fff; padding: 56px 0 64px; }
.heros h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.heros p { margin-top: 12px; max-width: 46rem; color: rgba(255,255,255,.85); font-size: 1.08rem; }
.surtitre { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-bottom: 10px; }
section.bloc { padding: 48px 0 8px; }
section.bloc h2 { font-size: 1.7rem; }
section.bloc > .conteneur > p { color: var(--encre-douce); margin-top: 6px; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin-top: 22px; }
.plaquette { background: #fff; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.plaquette__apercu { display: block; aspect-ratio: 210 / 180; overflow: hidden; background: #e9edf3; border-bottom: 1px solid var(--trait); }
.plaquette__apercu img { width: 100%; }
.plaquette__corps { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.plaquette__corps h3 { font-size: 1.05rem; }
.plaquette__corps p { font-size: .88rem; color: var(--ardoise); flex: 1; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.actions a, .actions button { font: inherit; font-size: .84rem; font-weight: 600; text-decoration: none; border: 1px solid var(--trait); background: #fff; border-radius: 9px; padding: 6px 11px; cursor: pointer; color: var(--encre); }
.actions .principal { background: var(--encre); border-color: var(--encre); color: #fff; }
.media { background: #fff; border: 1px solid var(--trait); border-radius: 14px; overflow: hidden; }
.media__visuel { aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; background: repeating-conic-gradient(#f2f4f7 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.media__visuel img { max-height: 100%; width: auto; object-fit: contain; }
.media__visuel--sombre { background: var(--bleu-nuit); }
.media__corps { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .86rem; }
.media__corps span { color: var(--ardoise); }
.media__corps a { font-weight: 700; color: var(--bleu); text-decoration: none; white-space: nowrap; }
.charte { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
.couleur { border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); background: #fff; }
.couleur i { display: block; height: 72px; }
.couleur p { padding: 10px 12px; font-size: .86rem; }
.couleur code { font-family: 'IBM Plex Mono', monospace; color: var(--ardoise); }
.regles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 18px; }
.regle { background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 16px; font-size: .92rem; color: var(--encre-douce); }
.regle h3 { font-size: 1rem; margin-bottom: 6px; color: var(--encre); }
.pied { margin-top: 56px; padding: 28px 0; background: #0a1a36; color: rgba(255,255,255,.7); font-size: .88rem; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }