/*
 * Cartes et blocs de la page d'accueil : "En ce moment", calendrier, tuiles
 * promo, bannière application (03-composants.md).
 */

.hc-card {
    background: var(--mr-blanc);
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.home-lead {
    margin: 0 0 18px;
    font-size: clamp(24px, 5.4vw, 32px);
    color: var(--mr-brun);
    font-weight: 900;
}

/* "En ce moment chez nous" */
.moment-card__media {
    /* Ligne "1fr" de la grille .moment-carousel__slide (pages/home.css) :
       l'image remplit tout l'espace restant une fois .moment-card__body
       soustrait — la carte s'étire pour égaler la hauteur de la colonne
       calendrier à côté, comme dans la maquette. min-height:0 est
       nécessaire pour qu'une piste de grille en 1fr puisse réellement
       descendre en dessous de la hauteur minimale automatique de son
       contenu (l'image) plutôt que la déborder. */
    min-height: 0;
    border-radius: var(--mr-r-l) var(--mr-r-l) 0 0;
    overflow: hidden;
}

/* Chaîne de hauteurs définies obligatoire pour que object-fit:cover
   fonctionne : chaque niveau (lien > picture > img) est display:inline par
   défaut pour <picture>, et un height:100% ne se résout pas si un ancêtre
   a une hauteur "auto" dépendant de son propre contenu (dépendance
   circulaire). On force donc 100% à chaque étage. */
.moment-card__media > a,
.moment-card__media picture {
    display: block;
    height: 100%;
}

.moment-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.moment-card__body {
    background: #fbedea;
    border-radius: 0 0 var(--mr-r-l) var(--mr-r-l);
    padding: 20px 22px;
}

.moment-card__title {
    margin: 0 0 8px;
    font-size: 26px;
    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;
}

.moment-card__text {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #555;
}

.moment-card__text a {
    color: var(--mr-bleu-leclerc);
    font-weight: 700;
}

/* Calendrier */
.calendar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calendar-item {
    background: var(--mr-corail);
    border-radius: 18px;
    padding: 10px 16px 10px 10px;
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--mr-brun);
}

.calendar-item:nth-child(even) {
    background: #f2a695;
}

.hc-date {
    position: relative;
    flex-shrink: 0;
    width: 78px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hc-date__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.hc-date__value {
    position: relative;
    text-align: center;
    line-height: 1;
    color: var(--mr-brun);
    font-weight: 900;
    padding-right: 6px;
}

.hc-date__day {
    font-size: 28px;
    display: block;
}

.hc-date__month {
    font-size: 12px;
    letter-spacing: 0.02em;
}

.calendar-item__text {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

/* Tuiles promo (Guide des vins / jeu concours) */
.promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.promo-tile {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

/* Hauteur uniforme quelle que soit l'image envoyée par le back-office :
   sans ça, une image plus "carrée" ou plus étroite que l'autre tuile
   change la hauteur de la zone photo, et le libellé sous l'image (même
   hauteur de texte des deux côtés) se retrouve à des niveaux différents
   d'une tuile à l'autre. object-fit: contain (pas cover) : les deux
   tuiles peuvent recevoir aussi bien une affiche portrait (Guide des vins)
   qu'une photo plus large (visuel de jeu-concours) — recadrer en cover
   rognait les bords gauche/droit d'une image portrait pour remplir un
   cadre plus large qu'elle. Avec contain, l'image entière reste visible,
   centrée ; le fond propre de chaque tuile (promo-tile--dark/--coral,
   plus bas) comble l'espace autour plutôt que de laisser du blanc. */
.promo-tile img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: contain;
    object-position: center;
    display: block;
}

.promo-tile__label {
    padding: 16px 18px;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.25;
}

.promo-tile--dark {
    background: #111111;
}

.promo-tile--dark .promo-tile__label {
    color: var(--mr-blanc);
}

.promo-tile--coral {
    background: #ED8473;
}

.promo-tile--coral .promo-tile__label {
    color: var(--mr-brun);
}

/* Bannière application */
.app-banner-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 24px;
    text-decoration: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    color: var(--mr-blanc);
}

.app-banner-tile img {
    width: 100%;
    max-width: 280px;
    display: block;
    margin: 0 auto;
}

.app-banner-tile p {
    margin: 0;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.4;
}

.app-banner-tile--orange {
    background: #f48742;
    /* Teinte demandée par le client. Texte brun foncé : le blanc sur #f48742 ne fait que 2,5:1 (RGAA 3.2), #180c0a en fait 7,7:1. */
    color: #180c0a;
}

.app-banner-tile--teal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 32px 40px;
    background: var(--mr-teal);
}

.app-banner-tile--teal h2 {
    margin: 0 0 22px;
    font-size: clamp(25px, 4.6vw, 36px);
    font-weight: 900;
    line-height: 1.15;
}

.app-banner-tile--teal .app-banner-tile__text {
    flex: 1 1 auto;
    min-width: 0;
}

.app-banner-tile--teal .app-banner-tile__text p {
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.95;
}

.app-banner-tile--teal img {
    flex: 0 0 38%;
    width: 38%;
    max-width: 430px;
    margin: 0;
}

@media (max-width: 767px) {
    .app-banner-tile--teal {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-banner-tile--teal img {
        width: 100%;
        max-width: none;
        flex: 0 0 auto;
    }
}

/* CTA générique */
.cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mr-brun);
    color: var(--mr-blanc);
    font-family: var(--mr-font-titrage);
    border-radius: var(--mr-r-m2);
    padding: 18px 34px;
    min-height: 44px;
    text-decoration: none;
    font-weight: 700;
    border: 0;
}

/* Variante pilule corail (« Lire le blog »...). */
.cta--coral {
    background: var(--mr-corail);
    color: var(--mr-brun);
    font-family: inherit;
    font-weight: 500;
    font-size: 17px;
    border-radius: var(--mr-r-pill);
    padding: 18px 38px;
    transition: background 0.2s ease, transform 0.2s var(--mr-ease-bounce), box-shadow 0.2s ease;
}

.cta--coral:hover,
.cta--coral:focus-visible {
    background: var(--mr-corail-fonce);
    color: var(--mr-brun);
    transform: scale(1.04);
    box-shadow: 0 6px 16px rgba(196, 59, 35, 0.32);
}

/* "Lire le blog" (fromages-une__cta, cheese-une__cta, game-over-blog__cta),
   "Lire la suite" (cartes blog), "Article précédent"/"Retour à la liste
   des articles" (nav en bas d'un article), "Rechercher"
   (search-page__submit), "Valider ma participation" (game-submit),
   CTA de la page « jeu terminé » (game-over-hero__box, ex. « Voir tous
   les gagnants ») : ces .cta--coral précis passent en blanc à la
   demande explicite — .cta--coral reste brun ailleurs (404) où rien
   n'a été demandé, d'où un ciblage par le conteneur plutôt qu'un
   changement de .cta--coral lui-même. */
.fromages-une__cta .cta--coral,
.cheese-une__cta .cta--coral,
.blog-card__cta,
.blog-article__nav .cta--coral,
.search-page__submit,
.game-submit .cta--coral,
.game-over-hero__box .cta--coral,
.game-over-blog__cta .cta--coral {
    color: var(--mr-blanc);
}

.fromages-une__cta .cta--coral:hover,
.fromages-une__cta .cta--coral:focus-visible,
.cheese-une__cta .cta--coral:hover,
.cheese-une__cta .cta--coral:focus-visible,
.blog-card__cta:hover,
.blog-card__cta:focus-visible,
.blog-article__nav .cta--coral:hover,
.blog-article__nav .cta--coral:focus-visible,
.search-page__submit:hover,
.search-page__submit:focus-visible,
.game-submit .cta--coral:hover,
.game-submit .cta--coral:focus-visible,
.game-over-hero__box .cta--coral:hover,
.game-over-hero__box .cta--coral:focus-visible,
.game-over-blog__cta .cta--coral:hover,
.game-over-blog__cta .cta--coral:focus-visible {
    color: var(--mr-blanc);
}

html.a11y-contrast .hc-card,
html.a11y-contrast .promo-tile,
html.a11y-enhanced .hc-card,
html.a11y-enhanced .promo-tile {
    border: 3px solid var(--mr-encre);
}

html.a11y-contrast .home-lead,
html.a11y-contrast .moment-card__title,
html.a11y-enhanced .home-lead,
html.a11y-enhanced .moment-card__title {
    color: var(--mr-a11y-accent) !important;
}

/* .promo-tile--coral (Guide des vins/jeu concours) : même logique que
   .calendar-item ci-dessous — assombrir le corail plutôt que l'effacer. */
html.a11y-contrast .promo-tile--coral,
html.a11y-enhanced .promo-tile--coral {
    background: var(--mr-a11y-corail) !important;
}

html.a11y-contrast .promo-tile--coral .promo-tile__label,
html.a11y-enhanced .promo-tile--coral .promo-tile__label {
    color: var(--mr-blanc) !important;
}

/* Corail assombri (comme la maquette, .hc-coral) au lieu de basculer en
   blanc/noir : le badge date (.hc-date, même nom de classe que la
   maquette) repasse en encre pour rester lisible sur son propre fond
   blanc/clair, le reste du texte passe en blanc sur le corail foncé. */
html.a11y-contrast .calendar-item,
html.a11y-enhanced .calendar-item {
    background: var(--mr-a11y-corail) !important;
}

html.a11y-contrast .calendar-item,
html.a11y-contrast .calendar-item *,
html.a11y-enhanced .calendar-item,
html.a11y-enhanced .calendar-item * {
    color: var(--mr-blanc) !important;
}

html.a11y-contrast .calendar-item .hc-date,
html.a11y-contrast .calendar-item .hc-date *,
html.a11y-enhanced .calendar-item .hc-date,
html.a11y-enhanced .calendar-item .hc-date * {
    color: var(--mr-encre) !important;
}

/* .cta et .cta--coral convergent vers le même accent foncé en contraste
   élevé (comme la maquette, où .cta seul couvre les deux) : brun et
   corail sont tous deux boostés vers la même teinte forte plutôt que
   remplacés par du noir/blanc. */
html.a11y-contrast .cta,
html.a11y-contrast .cta--coral,
html.a11y-enhanced .cta,
html.a11y-enhanced .cta--coral {
    background: var(--mr-a11y-vif) !important;
    color: var(--mr-blanc) !important;
    border: 2px solid var(--mr-blanc);
}