/*
 * Base — reset minimal, typographie de secours, utilitaires d'accessibilité
 * communs à toutes les pages (sr-only, skip-link, focus visible) et
 * substitutions du panneau d'accessibilité (classes html.a11y-* posées par
 * assets/js/modules/a11y-panel.js — mode renforcé/contraste/taille de
 * texte/interligne/police lisible/police dyslexique/animations, même
 * système que cdixvins.wait.lu).
 */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    /* Filet de sécurité pour toute la page : .wrap laisse volontairement
       déborder certains éléments décoratifs au-delà de sa propre boîte
       (overflow-clip-margin plus bas) sans les rogner — mais rien
       n'empêchait ensuite ce débordement d'atteindre le bord réel de la
       page et d'y créer une VRAIE barre de défilement horizontale (constaté
       avec l'étoile de l'accueil : la page entière scrollait latéralement).
       overflow-x:hidden ici absorbe tout débordement résiduel sans jamais
       affecter la mise en page (une page correctement construite n'a de
       toute façon jamais besoin de défiler horizontalement). */
    overflow-x: hidden;
}

body {
    font-family: var(--mr-font-texte);
    color: var(--mr-encre);
    background: var(--mr-gris-fond);
    font-size: var(--mr-fs-courant);
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Neutralise l'indice de présentation issu de l'attribut HTML height
       (mappé en CSS height:Npx par le user-agent) : sans ce height:auto
       explicite, une image dont la largeur est contrainte par max-width
       garde sa hauteur intrinsèque et se retrouve déformée.
       display:block évite aussi l'espace résiduel sous l'image propre aux
       éléments inline (hauteur de ligne / ligne de base), qui laissait
       apparaître un filet du fond du conteneur. */
}

picture {
    display: block;
    /* <picture> reste display:inline par défaut : une hauteur en % sur
       l'<img> qu'il contient ne se résout pas correctement (utile pour
       tout recadrage object-fit:cover en hauteur fixe/flexible). */
}

button {
    font-family: inherit;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4 {
    line-height: 1.1;
    margin: 0;
}

/* Typo de campagne (Fromages, Blog, Jeu concours) : les titres passent à la
   police de titrage plutôt que la police de texte courant du reste du site. */
.cheese-type h1,
.cheese-type h2,
.cheese-type h3,
.cheese-type h4 {
    font-family: var(--mr-font-titrage);
    letter-spacing: 0.005em;
}

p,
li,
blockquote,
dd,
dt,
figcaption,
label,
td,
th {
    line-height: 1.5;
}

/* Masquage accessible — texte présent pour lecteurs d'écran uniquement. */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

/* RGAA 12.7 — lien d'évitement, premier élément focusable après la modale cookies. */
.skip-link {
    position: fixed;
    left: 12px;
    top: -60px;
    z-index: 200;
    background: var(--mr-brun);
    color: var(--mr-blanc);
    padding: 12px 18px;
    border-radius: var(--mr-r-m);
    font-weight: 700;
    text-decoration: none;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 12px;
}

/* RGAA 10.7 — prise de focus toujours visible. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--mr-focus-color);
    outline-offset: 2px;
    border-radius: var(--mr-r-xs);
}

.zoom-link,
.arrow-btn,
[data-focus-accent]:focus-visible {
    outline-color: var(--mr-focus-color-accent);
}

.zoom-link:focus-visible,
.arrow-btn:focus-visible {
    outline: 3px solid var(--mr-focus-color-accent);
    outline-offset: 3px;
}

/* Largeur de contenu commune — boîte plafonnée à 1600px, gouttière fixe
   24px (18px < 600px). */
.wrap {
    max-width: var(--mr-content-max);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
    /* 10px de marge haut/bas : plusieurs boutons (.arrow-btn, .cta--coral…)
       grossissent légèrement au survol (transform:scale) et certains
       ajoutent un anneau en box-shadow — ni l'un ni l'autre ne change la
       boîte de mise en page, donc quand ce bouton est le dernier élément
       d'un .wrap (flush contre son bord), le survol dépassait la zone de
       découpe ci-dessous. 10px couvre le cas le plus large observé
       (scale(1.1) + anneau de 5px). */
    padding-top: 10px;
    padding-bottom: 10px;
    /* Certains éléments décoratifs (étoile, flèche...) sont volontairement
       positionnés en négatif façon maquette et peuvent déborder à
       certaines largeurs — d'où le besoin de masquer le débordement
       horizontal. Mais poser UNIQUEMENT overflow-x:hidden ne marche pas
       comme il semblerait : la spec CSS force alors overflow-y (laissé à
       sa valeur initiale "visible") à devenir "auto" — un axe ne peut pas
       rester réellement "visible" quand l'autre est masqué, le
       navigateur choisit "auto" comme compromis. Résultat : une barre de
       scroll verticale pouvait apparaître dans N'IMPORTE quel .wrap du
       site dès que son contenu dépassait sa hauteur même brièvement (un
       bouton qui grossit au survol, une carte qui se réajuste...) —
       constaté sur plusieurs sliders et boutons différents, pas un cas
       isolé. overflow-y:clip masque ce débordement vertical au lieu de le
       faire défiler, sans jamais créer de barre de scroll. */
    /* clip (pas hidden) sur les deux axes : overflow-clip-margin ci-dessous
       n'a d'effet que sur les axes en overflow:clip, pas overflow:hidden —
       il fallait changer overflow-x aussi (auparavant hidden) pour que la
       marge s'applique aux deux. */
    overflow-x: clip;
    overflow-y: clip;
    /* Retour utilisateur : l'étoile décorative de l'accueil (.home-decor)
       doit rester à SA position de maquette (elle déborde de ~22px au-delà
       du bord droit de .wrap sur grand écran, mesuré à 1920px) sans être
       rognée — mais le masquage de débordement ci-dessus reste nécessaire
       pour les autres cas (boutons qui grossissent au survol...). Plutôt
       que de déplacer chaque élément décorativement en négatif au cas par
       cas, cette marge autorise tout .wrap à laisser dépasser jusqu'à 40px
       sans le rogner, avant de reprendre le masquage normal au-delà. */
    overflow-clip-margin: 40px;
}

@media (max-width: 600px) {
    .wrap {
        padding-left: var(--mr-gutter-mobile);
        padding-right: var(--mr-gutter-mobile);
    }
}

/* Liseré vague décoratif en bas des bandeaux colorés (fromages, fiche
   fromage...) : la couleur suit le fond de la section SUIVANTE via
   --wave-bg, posée par la section elle-même (position:relative + overflow
   hidden requis). height:60px + bottom:-30px (pas 30px/-1px) : dimensions
   exactes de la source Symfony (.cheese-header_pattern,
   assets/scss/themes/_cheese.scss) — le disque du motif (rond plein de
   30px de rayon, pattern.svg) doit être ENTIER et à cheval sur le bord de
   la section, pas juste son quart supérieur en filet fin. */
.wave-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    height: 60px;
    background: var(--wave-bg, var(--mr-rose-pale));
    -webkit-mask: url('/assets/images/pattern.svg') repeat-x top center;
    -webkit-mask-size: auto 100%;
    mask: url('/assets/images/pattern.svg') repeat-x top center;
    mask-size: auto 100%;
}

/* Surtitre italique + titre de section — motif éditorial répété sur les
   pages Fromages, fiche fromage, blog, jeu concours. */
.section-eyebrow {
    text-align: center;
    margin: 0;
    color: var(--mr-brun);
    font-family: var(--mr-font-surtitre);
    font-style: italic;
    font-size: var(--mr-fs-surtitre);
}

.section-title {
    text-align: center;
    margin: 12px 0 40px;
    color: var(--mr-corail-fonce);
    /* Contraste RGAA 3.2 : le corail de marque (2,9:1) est trop clair même pour un grand titre (3:1 requis) ; corail-fonce = 3,8:1. */
    font-weight: 900;
    font-size: var(--mr-fs-titre-section);
    line-height: 1.1;
}

.section-title--on-coral {
    color: var(--mr-brun);
}

/* Colonne de lecture pour les pages de texte (CGU, confidentialité...). */
.text-page > h1,
.text-page > h2,
.text-page > p,
.text-page > ul,
.text-page > ol,
.text-page > .lh {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
    }
}

/* ===== Panneau d'accessibilité — effets globaux ===== */

html.a11y-line body,
html.a11y-line p,
html.a11y-line li {
    line-height: 2 !important;
}

html.a11y-font *,
html.a11y-font *::before,
html.a11y-font *::after {
    font-family: Verdana, Tahoma, Arial, sans-serif !important;
}

html.a11y-noanim *,
html.a11y-noanim *::before,
html.a11y-noanim *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

html.a11y-t1 .site-header,
html.a11y-t1 main,
html.a11y-t1 .site-footer {
    zoom: 1.09;
}

html.a11y-t2 .site-header,
html.a11y-t2 main,
html.a11y-t2 .site-footer {
    zoom: 1.2;
}

html.a11y-enhanced body,
html.a11y-enhanced p,
html.a11y-enhanced li {
    line-height: 1.95 !important;
}

html.a11y-enhanced body {
    font-size: 18px;
}

html.a11y-enhanced *,
html.a11y-enhanced *::before,
html.a11y-enhanced *::after {
    font-family: Verdana, Tahoma, Arial, sans-serif !important;
}

/* Déclarée après .a11y-font/.a11y-enhanced (même spécificité : la dernière
   règle posée l'emporte) : sans cet ordre, activer "police lisible" ou le
   mode renforcé EN MÊME TEMPS que "police pour dyslexiques" affichait
   Verdana au lieu de la police dyslexique — même bug déjà rencontré et
   documenté sur cdixvins.wait.lu. a11y-panel.js garde `dys` strictement
   indépendante du mode renforcé pour la même raison. */
html.a11y-dys *,
html.a11y-dys *::before,
html.a11y-dys *::after {
    font-family: 'OpenDyslexic', Verdana, Tahoma, sans-serif !important;
}

/* Pas de fond forcé en blanc : les sections gardent leur propre couleur de
   base (gris-fond, rose-pale, corail...), seul le texte "nu" en hérite
   davantage de contraste via l'encre de marque — jamais de bascule vers du
   noir/blanc pur (retour client explicite). */
html.a11y-contrast body {
    color: var(--mr-encre);
}

/* :not(...) sur les liens-tuiles/CTA décoratifs (fond coloré plein, texte
   blanc porté par héritage depuis l'ancre elle-même, ex. .app-banner-tile) :
   sans cette exclusion, forcer la couleur ICI l'emportait aussi sur l'ancre
   et se propageait par héritage à ses enfants (h2/p sans couleur propre),
   les faisant passer de blanc à rouge accent sur un fond teal/orange —
   ratio de contraste ~1:1, illisible. Les liens simples dans le texte
   courant (corps d'article, cartes...) n'ont pas ce piège : ils héritent
   déjà normalement d'un texte sombre sur fond clair. */
html.a11y-contrast main a:not(.zoom-link):not(.cta):not(.cta--coral):not(.app-banner-tile):not(.promo-tile):not(.breadcrumb a):not(.filter-pill):not(.pagin__num):not(.blog-card__title-link):not(.game-hero__title a):not(.game-infos a),
html.a11y-enhanced main a:not(.zoom-link):not(.cta):not(.cta--coral):not(.app-banner-tile):not(.promo-tile):not(.breadcrumb a):not(.filter-pill):not(.pagin__num):not(.blog-card__title-link):not(.game-hero__title a):not(.game-infos a) {
    color: var(--mr-a11y-accent) !important;
    /* RGAA 3.1 : l'info (ici "ceci est un lien") ne doit jamais reposer sur
       la seule couleur — comme la maquette ([data-contrast="high"] a). */
    text-decoration: underline;
}

/* Tuiles pleine couleur (app-banner-tile) : la teinte de fond reste la
   même famille (orange/teal), juste assombrie pour le contraste — comme la
   maquette (.hc-orange/.hc-teal) — au lieu de basculer vers du noir/blanc
   pur (retour client explicite : "tu dois juste contraster plus les
   couleurs de base"). Le texte est déjà blanc par défaut sur ces tuiles. */
html.a11y-contrast .app-banner-tile--orange,
html.a11y-enhanced .app-banner-tile--orange {
    background: var(--mr-a11y-orange) !important;
}

html.a11y-contrast .app-banner-tile--teal,
html.a11y-enhanced .app-banner-tile--teal {
    background: var(--mr-a11y-teal) !important;
}

/* Contour propre manquant : sans lui, la tuile ne se distinguait du fond
   de page que par sa couleur (RGAA 3.1). */
html.a11y-contrast .app-banner-tile,
html.a11y-enhanced .app-banner-tile {
    border: 2px solid var(--mr-blanc);
}

html.a11y-contrast .site-footer__aurillac,
html.a11y-contrast .site-footer__aurillac span,
html.a11y-enhanced .site-footer__aurillac,
html.a11y-enhanced .site-footer__aurillac span {
    color: var(--mr-encre) !important;
}

/* .section-title (base.css, réutilisé sur toutes les pages Fromages/Blog/
   Jeu...) : var(--mr-corail) sur fond blanc/rose pâle ne passe pas le
   contraste AA (ratio ~2.6-2.9) — pas spécifique à une page, donc corrigé
   ici plutôt que répété dans chaque fichier de page. :not(--on-coral) :
   cette variante est déjà en --mr-brun sur fond corail, qui passe déjà le
   seuil "grand texte" (ratio ~4.2) — la remplacer par l'accent ici la
   ferait au contraire échouer (accent sur corail ≈ 1.8). :not(.theme-ink) :
   certains titres (fiche fromage) cumulent .section-title ET .theme-ink —
   la couleur de thème arbitraire (cheese-show.css) doit alors gouverner,
   pas cet accent générique. */
html.a11y-contrast .section-title:not(.section-title--on-coral):not(.theme-ink),
html.a11y-enhanced .section-title:not(.section-title--on-coral):not(.theme-ink) {
    color: var(--mr-a11y-accent) !important;
}