/* =============================================================================
   Watt Soluces — feuille de style
   Thème sombre aux couleurs de la chaîne : fond anthracite, orange, police Fredoka pour les titres.
   Proportions et tailles reprises de la maquette Bootstrap retenue (sans utiliser Bootstrap).
   ============================================================================= */

/* ---- Polices hébergées sur le site ---- */

@font-face {
    font-family: "Fredoka";
    src: url("/polices/fredoka-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Fredoka";
    src: url("/polices/fredoka-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/* ---- Couleurs et mesures ---- */

:root {
    --fond: #2D2D2D;                /* fond de la chaîne */
    --fond-profond: #1E1E1E;        /* en-tête, pied de page */
    --surface: #383838;             /* cartes posées sur le fond */
    --surface-survol: #444444;
    --pastille: #212529;
    --bordure: #4A4A4A;
    --texte: #EDEDED;
    --texte-doux: #B5B5B5;
    --orange: #F2601C;              /* orange de la chaîne : boutons, surfaces */
    --orange-texte: #FF8A4C;        /* orange lisible pour du texte sur fond sombre */
    --accent: var(--orange-texte);  /* remplacé par la couleur du jeu sur ses pages */
    --bleu: #6EA8FE;                /* moments des sous-repères : bleu lumineux prévu pour les thèmes sombres */
    --rouge-youtube: #E60000;       /* bouton vers la chaîne : rouge de YouTube, un peu assombri pour le texte blanc */
    --rayon: 0.375rem;
    --rayon-grand: 0.5rem;
    --gouttiere: 1.5rem;
    --police-titres: "Fredoka", "Segoe UI", system-ui, sans-serif;
    --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

/* Pied de page collé en bas de l'écran quand la page est courte : le contenu prend la hauteur restante */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--fond);
    color: var(--texte);
    font-family: var(--police-texte);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body > .contenu {
    flex-grow: 1;
}

h1, h2, h3 {
    font-family: var(--police-titres);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

h1 {
    font-size: calc(1.375rem + 1.5vw);
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

@media (min-width: 1200px) {
    h1 {
        font-size: 2.5rem;
    }
}

p {
    margin: 0 0 1rem;
}

a {
    color: var(--orange-texte);
    text-underline-offset: 0.15em;
}

a:hover {
    color: #fff;
}

:focus-visible {
    outline: 3px solid var(--orange-texte);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

small, .petit {
    font-size: 0.875em;
}

/* Largeur du contenu selon l'écran : mêmes paliers que Bootstrap (540, 720, 960, 1140 puis 1320 px) */
.conteneur {
    width: 100%;
    margin: 0 auto;
    padding: 0 calc(var(--gouttiere) / 2);
}

@media (min-width: 576px) {
    .conteneur {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .conteneur {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .conteneur {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .conteneur {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .conteneur {
        max-width: 1320px;
    }
}

.discret {
    color: var(--texte-doux);
}

/* ---- Bandeau d'aperçu (développement uniquement) ---- */

.apercu {
    background: #332701;
    color: #FFDA6A;
    border-bottom: 1px solid #997404;
    padding: 0.25rem 1rem;
    text-align: center;
    font-size: 0.875rem;
}

/* ---- En-tête : bande de feu de la bannière ---- */

.entete {
    background:
        url("/images/banniere-fond-2000.webp") center bottom / cover no-repeat,
        var(--fond-profond);
}

.entete-contenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 1.5rem;         /* laisse voir la ligne de feu sous le logo */
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0;
    color: #fff;
    text-decoration: none;
    font-family: var(--police-titres);
    font-weight: 700;
    font-size: 1.75rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.logo:hover {
    color: #fff;
}

/* Blanc chaud : l'orange se confondait avec la lueur de la bande de feu */
.accroche {
    margin: 0;
    color: #FFF1E6;
    font-family: var(--police-titres);
    font-size: 1.1rem;
    text-shadow: 0 0 4px #000, 0 2px 12px rgba(0, 0, 0, 0.95);
}

/* ---- Contenu et pied de page ---- */

.contenu {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.pied {
    background: var(--fond-profond);
    color: var(--texte-doux);
    font-size: 0.875rem;
    border-top: 3px solid var(--orange);
}

.pied-contenu {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pied-contenu p {
    margin: 0;
}

/* Liens vers les pages légales, poussés à droite sur grand écran */
.pied-contenu .pied-liens {
    margin-left: auto;
}

/* ---- Pages de texte (mentions légales, confidentialité) ---- */

.page-texte {
    max-width: 50rem;
}

.page-texte h2 {
    margin-top: 2rem;
    font-size: 1.35rem;
}

.page-texte ul {
    padding-left: 1.25rem;
}

/* Information que l'éditeur doit encore fournir (signalée aussi par l'export) */
.a-completer {
    padding: 0 0.25em;
    border-radius: 0.2rem;
    background: #FFDA6A;
    color: #1E1E1E;
    font-weight: 700;
}

/* ---- Fil d'Ariane ---- */

.fil-ariane ol {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.fil-ariane li + li {
    padding-left: 0.5rem;
}

.fil-ariane li + li::before {
    content: "/";
    padding-right: 0.5rem;
    color: var(--texte-doux);
}

.fil-ariane [aria-current] {
    color: var(--texte-doux);
}

/* ---- Cartes, étiquettes et pastilles ---- */

.carte {
    background: var(--surface);
    border-radius: var(--rayon);
    padding: 1rem;
}

.etiquette {
    display: inline-block;
    padding: 0.35em 0.65em;
    border-radius: 50rem;
    background: var(--orange);
    color: var(--fond-profond);     /* texte sombre : le blanc manque de contraste sur l'orange */
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
}

.pastilles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.pastilles li {
    padding: 0.35em 0.65em;
    border-radius: 50rem;
    background: #6C757D;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
}

/* ---- Page vidéo : titre ---- */

.titre-video {
    margin-bottom: 1.5rem;
}

.titre-video-jeu {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.titre-video-jeu a {
    color: var(--accent);
    text-decoration: none;
}

.titre-video-groupe {
    color: var(--texte-doux);
}

.titre-video-groupe::before {
    content: " · ";
}

.titre-video-infos {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
    color: var(--texte-doux);
}

/* ---- Page vidéo : vidéo (2/3) et repères (1/3) sur grand écran ---- */

.video-colonnes {
    display: grid;
    gap: var(--gouttiere);
}

@media (min-width: 992px) {
    /* Vidéo sur 2/3 et repères sur 1/3, calculés comme les colonnes de Bootstrap (gouttière comprise) */
    .video-colonnes {
        grid-template-columns: calc((100% + var(--gouttiere)) * 2 / 3 - var(--gouttiere)) minmax(0, 1fr);
        align-items: start;
    }

    /* Les repères restent visibles pendant le défilement du texte */
    .reperes {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* ---- Lecteur en façade ---- */

.lecteur {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--rayon-grand);
    overflow: hidden;
    background: #000;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.lecteur > div,
.lecteur iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lecteur-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
}

.lecteur-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.2s;
}

.lecteur-facade:hover img {
    filter: brightness(0.85);
}

.lecteur-bouton {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--orange);
    transition: transform 0.2s;
}

.lecteur-facade:hover .lecteur-bouton {
    transform: translate(-50%, -50%) scale(1.08);
}

.lecteur-bouton::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 16px 0 16px 26px;
    border-color: transparent transparent transparent #fff;
}

.lecteur-mention {
    margin: 0.25rem 0 1.5rem;
    font-size: 0.875em;
    color: var(--texte-doux);
}

/* ---- Texte ---- */

.texte-manquant {
    color: var(--texte-doux);
    font-style: italic;
}

/* ---- Plateformes et liens entre vidéos ---- */

.plateformes,
.liens-videos {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--rayon);
    border-left: 4px solid var(--accent);
}

.plateformes p,
.liens-videos p {
    margin: 0 0 0.5rem;
}

.liens-videos ul {
    margin: 0;
    padding-left: 1.25rem;
}

/* ---- Repères ---- */

.reperes {
    background: var(--surface);
    border-radius: var(--rayon);
    padding: 1rem;
}

.reperes h2 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.reperes-nombre {
    display: inline-block;
    padding: 0.35em 0.65em;
    border-radius: var(--rayon);
    background: var(--pastille);
    color: #fff;
    font-family: var(--police-texte);
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
}

.reperes-aide {
    font-size: 0.875em;
    color: var(--texte-doux);
}

.reperes-liste,
.sous-reperes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reperes-liste > li {
    padding: 0.5rem 0;
    border-top: 1px solid var(--bordure);
}

.reperes-liste > li:first-child {
    border-top: 0;
}

/* Moment d'un repère : bouton à bordure orange */
.repere-temps {
    display: inline-block;
    min-width: 4.2rem;
    margin-right: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--orange-texte);
    border-radius: 0.25rem;
    color: var(--orange-texte);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    text-decoration: none;
    line-height: 1.5;
    transition: background 0.15s, color 0.15s;
}

.repere-temps:hover {
    background: var(--orange-texte);
    color: var(--fond-profond);
}

.repere-libelle a {
    color: var(--texte);
}

.repere-quantite {
    color: var(--texte-doux);
    white-space: nowrap;
}

.sous-reperes {
    margin: 0.5rem 0 0 1.5rem;
    padding-left: 0.5rem;
    border-left: 1px solid var(--bordure);
    font-size: 0.875em;
}

.sous-reperes li {
    margin-bottom: 0.25rem;
    color: var(--texte-doux);
}

/* Moment d'un sous-repère : lien bleu dans une case de largeur fixe, pour aligner les libellés en colonne */
.sous-reperes .repere-temps {
    min-width: 4.2rem;
    padding: 0;
    border: 1px solid transparent;
    color: var(--bleu);
    font-size: 0.875rem;
    text-decoration: underline;
    vertical-align: middle;
}

.sous-reperes .repere-temps:hover {
    background: none;
    color: #fff;
}

.repere-demande {
    background: color-mix(in srgb, var(--orange) 15%, transparent);
}

/* ---- Navigation entre vidéos ---- */

.navigation-videos {
    margin-top: 1.5rem;
}

.precedent-suivant {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.carte-navigation {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--rayon);
    color: var(--texte);
    text-decoration: none;
    transition: background 0.15s;
}

.carte-navigation:hover {
    background: var(--surface-survol);
    color: var(--texte);
}

.carte-navigation-sens {
    font-size: 0.875em;
    font-weight: 600;
    color: var(--orange-texte);
}

.carte-navigation-titre {
    font-size: 1.25rem;
}

.suivant {
    grid-column: 2;
    text-align: right;
}

/* ---- Page jeu ---- */

.titre-jeu {
    margin-bottom: 1.5rem;
}

.titre-jeu .bandeau {
    height: 10px;
    border-radius: 5px;
    background: var(--bandeau);
    margin-bottom: 1rem;
}

.titre-jeu h1 {
    margin-bottom: 0.25rem;
}

.titre-jeu-infos {
    margin: 0;
    color: var(--texte-doux);
}

/* Texte (2/3) et plateformes (1/3) sur grand écran, comme la page vidéo */
.jeu-presentation {
    display: grid;
    gap: var(--gouttiere);
    align-items: start;
}

.jeu-presentation .plateformes {
    margin-top: 0;
}

@media (min-width: 992px) {
    .jeu-presentation {
        grid-template-columns: calc((100% + var(--gouttiere)) * 2 / 3 - var(--gouttiere)) minmax(0, 1fr);
    }
}

/* Descente en douceur vers la catégorie choisie dans les raccourcis */
html:has(.raccourcis) {
    scroll-behavior: smooth;
}

/* Au-dessus des catégories : raccourcis à gauche, bouton « Tout replier / Tout déplier » à droite */
.outils-blocs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Raccourcis : chaque catégorie suivie de ses groupes, un peu d'espace entre les catégories */
.raccourcis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
}

.raccourcis-bloc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

/* Pastilles comme les étiquettes des plateformes, à la couleur du jeu : pleines pour les catégories, contour pour les groupes.
   Texte sombre sur la couleur du jeu : éclaircie pour le fond sombre, elle manque de contraste avec du blanc */
.raccourci {
    padding: 0.4em 0.8em;
    border: 1px solid var(--accent);
    border-radius: 50rem;
    background: var(--accent);
    color: var(--fond-profond);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.raccourci:hover {
    border-color: #fff;
    background: #fff;
    color: var(--fond-profond);
}

.raccourci-groupe {
    background: none;
    color: #fff;
}

.raccourci-groupe:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--fond-profond);
}

.tout-replier {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--accent);
    border-radius: var(--rayon);
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tout-replier[hidden] {
    display: none;
}

.tout-replier:hover {
    background: var(--accent);
    color: var(--fond-profond);
}

/* Flèche du bouton : vers le haut pour replier, vers le bas pour déplier */
.tout-replier::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-right: 0.14em solid currentColor;
    border-bottom: 0.14em solid currentColor;
    transform: translateY(0.15em) rotate(-135deg);
}

.tout-replier.replie::before {
    transform: translateY(-0.1em) rotate(45deg);
}

.bloc-videos {
    margin-top: 3rem;
}

.bloc-videos,
.groupe-videos {
    scroll-margin-top: 1rem;
}

.outils-blocs + .bloc-videos {
    margin-top: 1.25rem;
}

/* Catégories (« Niveaux »…) et groupes (« Année 1 »…) repliables : le titre sert de bouton */
.bloc-videos summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

.bloc-videos summary::-webkit-details-marker {
    display: none;
}

.bloc-videos h2,
.bloc-videos h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bloc-videos h2 {
    border-bottom: 3px solid var(--accent);
    padding-bottom: 0.5rem;
}

.bloc-videos h3 {
    margin-top: 1.5rem;
    color: var(--texte-doux);
}

.bloc-videos summary:hover h2,
.bloc-videos summary:hover h3 {
    color: var(--accent);
}

/* Flèche devant le titre : vers la droite quand c'est replié, vers le bas quand c'est déplié */
.bloc-videos h2::before,
.bloc-videos h3::before {
    content: "";
    flex: none;
    width: 0.45em;
    height: 0.45em;
    margin: 0 0.1em 0 0.15em;
    border-right: 0.14em solid var(--accent);
    border-bottom: 0.14em solid var(--accent);
    transform: rotate(-45deg);
    transition: transform 0.2s;
}

.bloc-videos details[open] > summary h3::before,
.bloc-videos[open] > summary h2::before {
    transform: translateY(-0.12em) rotate(45deg);
}

.nombre-videos {
    display: inline-block;
    padding: 0.35em 0.65em;
    border-radius: var(--rayon);
    background: var(--pastille);
    color: #fff;
    font-family: var(--police-texte);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.bloc-videos h3 .nombre-videos {
    font-size: 0.8rem;
}

/* Ouverture et fermeture en douceur, dans les navigateurs qui savent animer une hauteur automatique */
@supports (interpolate-size: allow-keywords) {
    .page-jeu {
        interpolate-size: allow-keywords;
    }

    .bloc-videos::details-content,
    .groupe-videos::details-content {
        height: 0;
        overflow: clip;
        contain: layout;
        transition: height 0.25s ease, content-visibility 0.25s allow-discrete;
    }

    .bloc-videos[open]::details-content,
    .groupe-videos[open]::details-content {
        height: auto;
    }

    /* Titre déplié par un raccourci : ouverture immédiate (voir page-jeu.js) */
    .bloc-videos.sans-animation::details-content,
    .groupe-videos.sans-animation::details-content {
        transition: none;
    }
}

/* Vignettes : 4 par ligne sur grand écran, puis 3, 2 et 1 (mêmes paliers que Bootstrap) */
.grille-videos {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .grille-videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .grille-videos {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .grille-videos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Carte grise : miniature arrondie posée dans la carte, titre et étiquettes dessous */
.carte-video {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: var(--rayon);
    padding: 0.5rem 0.5rem 0.75rem;
}

.carte-video a {
    color: var(--texte);
    text-decoration: none;
}

/* Miniature avec la durée posée dans le coin, comme sur YouTube */
.carte-video-image {
    position: relative;
    display: block;
    border-radius: var(--rayon-grand);
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}

.carte-video a:hover .carte-video-image {
    transform: translateY(-3px);
    box-shadow: 0 0 0 3px var(--accent);
}

.carte-video-duree {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.carte-video-titre {
    display: block;
    margin: 0.6rem 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Nom du jeu au-dessus du titre, dans les listes qui mélangent plusieurs jeux (accueil) */
.carte-video-jeu {
    display: block;
    margin: 0.6rem 0.25rem 0;
    color: var(--texte-doux);
    font-size: 0.8rem;
    font-weight: 600;
}

.carte-video-jeu + .carte-video-titre {
    margin-top: 0.15rem;
}

.carte-video a:hover .carte-video-titre {
    color: var(--accent);
}

.carte-video-infos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.4rem 0.25rem 0;
    font-size: 0.875rem;
    color: var(--texte-doux);
}

/* Vidéo que l'export ignorerait (mode aperçu) : badge rouge */
.non-exportee {
    display: inline-block;
    padding: 0.35em 0.65em;
    border-radius: var(--rayon);
    background: #DC3545;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
}
/* ---- Accueil ---- */

/* Présentation : mascotte à gauche, accroche, chiffres et lien vers la chaîne à droite ; mascotte au-dessus sur petit écran */
.accueil-presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem 2.5rem;
    padding: 0.5rem 0;
    text-align: center;
}

.accueil-mascotte {
    flex: none;
    width: 160px;
    height: 160px;
    filter: drop-shadow(0 0 28px rgba(242, 96, 28, 0.35));
}

.accueil-presentation h1 {
    margin-bottom: 0.75rem;
    color: #FFF1E6;
}

.accueil-intro {
    max-width: 42rem;
    font-size: 1.15rem;
}

.accueil-chiffres {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0.25rem 1.75rem;
    color: var(--texte-doux);
}

.accueil-chiffres strong {
    margin-right: 0.3rem;
    color: var(--orange-texte);
    font-family: var(--police-titres);
    font-size: 1.75rem;
}

@media (min-width: 768px) {
    .accueil-presentation {
        flex-direction: row;
        text-align: left;
    }

    .accueil-mascotte {
        width: 240px;
        height: 240px;
    }

    .accueil-chiffres {
        justify-content: flex-start;
    }
}

/* Bouton rouge de la chaîne, avec le triangle de lecture : rappelle YouTube et se détache de l'orange du site */
.bouton-youtube {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.25rem;
    border-radius: var(--rayon);
    background: var(--rouge-youtube);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

.bouton-youtube::before {
    content: "";
    border-style: solid;
    border-width: 0.4em 0 0.4em 0.65em;
    border-color: transparent transparent transparent currentColor;
}

.bouton-youtube:hover {
    background: #CC0000;
    color: #fff;
}

.accueil-bloc {
    margin-top: 3rem;
}

.accueil-bloc > h2 {
    padding-bottom: 0.5rem;
    border-bottom: 3px solid var(--accent);
}

/* Carte d'un jeu : image fournie (16:9), ou couleurs du ruban et tête de la mascotte en attendant ; liseré du ruban sous l'image */
.carte-jeu-image {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bandeau);
}

.carte-jeu-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carte-jeu-image .carte-jeu-mascotte {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.carte-jeu-image::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: var(--bandeau);
}

.carte-jeu-nom {
    font-family: var(--police-titres);
    font-size: 1.15rem;
}

/* Comment ça marche : trois cartes, chacune illustrée par un élément du site */
.accueil-etapes {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .accueil-etapes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.accueil-etapes > li {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: var(--rayon);
    background: var(--surface);
}

.accueil-etapes h3 {
    color: var(--orange-texte);
}

.accueil-exemple {
    margin-top: auto;
    margin-bottom: 0;
}

/* ---- Page 404 ---- */

.introuvable {
    padding: 1rem 0;
    text-align: center;
}

/* « 4, tête de la mascotte, 4 » en grand, avec la lueur orange de la bannière */
.introuvable-code {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.05em;
    margin: 0 0 0.75rem;
    color: var(--orange-texte);
    font-family: var(--police-titres);
    font-size: clamp(5rem, 18vw, 9rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 0 28px rgba(242, 96, 28, 0.45);
}

.introuvable-code img {
    width: 0.85em;
    height: 0.85em;
    filter: drop-shadow(0 0 20px rgba(242, 96, 28, 0.45));
}

.introuvable h1 {
    color: #FFF1E6;
}

.introuvable-texte {
    max-width: 36rem;
    margin: 0 auto 1.5rem;
    font-size: 1.15rem;
}

.introuvable-jeux-titre {
    margin-top: 3rem;
    color: var(--texte-doux);
    font-size: 1.1rem;
}

.introuvable-jeux {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

/* Bouton orange : action principale d'une page (retour à l'accueil…) */
.bouton-principal {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    border-radius: var(--rayon);
    background: var(--orange);
    color: var(--fond-profond);     /* texte sombre : le blanc manque de contraste sur l'orange */
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s;
}

/* Survol : orange plus clair, le texte sombre reste lisible */
.bouton-principal:hover {
    background: var(--orange-texte);
    color: var(--fond-profond);
}

/* ---- Petits écrans ---- */

@media (max-width: 767px) {
    .accroche {
        display: none;
    }

    .entete {
        background-image: url("/images/banniere-fond-1000.webp");
    }
}

@media (max-width: 575px) {
    .entete-contenu {
        padding-bottom: 1rem;
    }

    .logo {
        font-size: 1.4rem;
    }

    .logo img {
        width: 40px;
        height: 40px;
    }

    .lecteur {
        margin: 0 calc(var(--gouttiere) / -2);
        border-radius: 0;
    }

    .lecteur-bouton {
        width: 68px;
        height: 68px;
    }

    .precedent-suivant {
        grid-template-columns: 1fr;
    }

    .suivant {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}