/* =========================================================
   PAGE D'ACCUEIL — HOME.CSS
   =========================================================
 *
 * Ce fichier contient uniquement la présentation visuelle
 * de la page d'accueil.
 *
 * La logique PHP, les niveaux d'accès, les traductions,
 * les dates et les destinations restent dans le contrôleur
 * et la vue.
 *
 * Le design reprend le principe visuel de la V2 :
 *
 * - bloc compte à rebours ;
 * - titre de section ;
 * - carousel de trois vignettes ;
 * - flèches de navigation ;
 * - affichage responsive.
 *
 * Le système de disque/cylindre du compte à rebours est
 * volontairement absent : ce design a été abandonné.
 */


/* =========================================================
   STRUCTURE GÉNÉRALE DE LA PAGE
   ========================================================= */

/*
 * La page d'accueil possède un petit espace en bas afin
 * d'éviter que le dernier élément touche directement
 * le bas de l'écran.
 */
.home-page {
    padding: 0 0 50px;
}


/* =========================================================
   BLOC COMPTE À REBOURS
   ========================================================= */

/*
 * Le bloc du compte à rebours est limité en largeur
 * sur les grands écrans afin de conserver une présentation
 * élégante et centrée.
 */
.home-countdown {
    width: min(920px, calc(100% - 32px));
    margin: 38px auto 34px;
}


/*
 * Conteneur intérieur du compte à rebours.
 *
 * Le fond reste légèrement transparent afin de conserver
 * le style général du site.
 */
.home-countdown__inner {
    padding: clamp(28px, 5vw, 48px) 24px;
    text-align: center;
    border: 1px solid var(--color-border);
    color: var(--color-gold);
    background: var(--color-perle);
}


/* =========================================================
   PETITS TITRES DÉCORATIFS — "EYEBROW"
   ========================================================= */

/*
 * Les petits textes situés au-dessus des grands titres
 * utilisent la couleur or et une typographie espacée.
 */
.eyebrow {
    margin: 0 0 8px;
    color: var(--color-gold);
    font-family: "Cinzel", Georgia, serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =========================================================
   TITRES DU COMPTE À REBOURS ET DE LA SECTION
   ========================================================= */

/*
 * Les deux grands titres utilisent la même typographie
 * afin de conserver une cohérence visuelle.
 */
.home-countdown h1,
.home-section-heading h2 {
    margin: 0;
    font-family: "Cinzel", Georgia, serif;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/*
 * Taille du titre principal du compte à rebours.
 *
 * clamp() permet au texte de s'adapter automatiquement
 * entre téléphone et grand écran.
 */
.home-countdown h1 {
    font-size: clamp(20px, 3vw, 30px);
}


/* =========================================================
   COMPTE À REBOURS
   ========================================================= */

/*
 * Le bloc général du compte à rebours est centré.
 *
 * Le HTML MVC possède un niveau supplémentaire :
 *
 * .countdown
 *      └── .countdown__values
 *              ├── .countdown__unit
 *              ├── .countdown__unit
 *              ├── .countdown__unit
 *              └── .countdown__unit
 *
 * Le conteneur .countdown__values est donc chargé
 * de placer les quatre unités horizontalement.
 */
.countdown {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(12px, 3vw, 32px);
    margin: 28px auto 12px;
}


/*
 * Conteneur des quatre valeurs du compte à rebours.
 *
 * Les quatre unités doivent rester côte à côte :
 *
 *        174       02       10       17
 *       jours    heures   minutes  secondes
 *
 * Ce niveau existe dans le HTML MVC afin de séparer
 * le conteneur général du compte à rebours des valeurs.
 */
.countdown__values {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: clamp(12px, 3vw, 32px);
}


/*
 * Chaque unité correspond à :
 *
 * 174
 * jours
 *
 * ou :
 *
 * 17
 * heures
 */
.countdown__unit {
    min-width: 68px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}


/*
 * Grande valeur numérique du compte à rebours.
 */
.countdown__unit strong {
    font-family: "Cinzel", Georgia, serif;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 400;
    color: var(--color-gold);
    line-height: 1;
}


/*
 * Libellé de l'unité :
 *
 * jours / heures / minutes / secondes
 */
.countdown__unit small {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


/*
 * Éventuelle date affichée sous le compte à rebours.
 */
.home-countdown__date {
    margin: 12px 0 0;
    font-size: 14px;
    letter-spacing: 1px;
}


/* =========================================================
   SECTION DES VIGNETTES
   ========================================================= */

/*
 * La section des vignettes est limitée en largeur
 * tout en restant fluide sur les petits écrans.
 */
.home-access {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
}


/*
 * Zone contenant le petit titre "Votre invitation"
 * et le titre principal de la section.
 */
.home-section-heading {
    text-align: center;
    margin-bottom: 20px;
}


/*
 * Taille du titre :
 *
 * "Retrouvez les informations du mariage"
 */
.home-section-heading h2 {
    font-size: clamp(18px, 2.5vw, 24px);
}


/* =========================================================
   CAROUSEL
   ========================================================= */

/*
 * Le carousel sert de conteneur général pour :
 *
 * - la flèche gauche ;
 * - la zone de défilement ;
 * - la flèche droite.
 */
.cards-carousel {
    position: relative;
    width: 100%;
}


/*
 * La piste contient les trois vignettes.
 *
 * Le défilement horizontal est volontairement conservé
 * pour reproduire le comportement de la V2.
 */
.cards-carousel__track {
    display: flex;
    gap: 24px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /*
     * Supprime la barre de défilement visible sur Firefox.
     */
    scrollbar-width: none;

    /*
     * Les marges intérieures permettent de placer une carte
     * au centre tout en laissant apparaître une partie
     * des cartes voisines.
     */
    padding: 8px 15% 18px;
}


/*
 * Suppression de la barre de défilement sur Chrome,
 * Safari et les navigateurs basés sur Chromium/WebKit.
 */
.cards-carousel__track::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   VIGNETTES
   ========================================================= */

/*
 * Une vignette occupe environ 70 % de la largeur disponible.
 *
 * Cela permet d'obtenir :
 *
 *        [ aperçu ] [ CARTE CENTRALE ] [ aperçu ]
 *
 * sur ordinateur et tablette.
 */
.home-card {
    flex: 0 0 70%;

    min-width: 0;

    /*
     * Chaque vignette s'aligne automatiquement au centre
     * lorsqu'on fait défiler le carousel.
     */
    scroll-snap-align: center;

    /*
     * Organisation verticale du contenu de la vignette.
     */
    display: flex;
    flex-direction: column;
    align-items: center;

    /*
     * Espace entre l'image et les textes.
     */
    gap: 12px;

    /*
     * Petit espace inférieur pour ne pas coller les cartes
     * entre elles.
     */
    padding: 0 0 18px;

    /*
     * Petit mouvement visuel au survol.
     */
    transition: transform .25s ease;
}


/*
 * La vignette remonte légèrement au survol avec une souris.
 *
 * Sur téléphone, ce comportement n'est généralement
 * pas visible car il n'y a pas de véritable survol.
 */
.home-card:hover {
    transform: translateY(-3px);
}


/* =========================================================
   IMAGES DES VIGNETTES
   ========================================================= */

/*
 * Les images occupent toute la largeur de leur vignette.
 */
.home-card img {
    display: block;

    width: 100%;

    /*
     * Rapport largeur/hauteur conservant l'aspect horizontal
     * des visuels de la V2.
     */
    aspect-ratio: 1.65 / 1;

    /*
     * L'image remplit proprement la zone sans être déformée.
     */
    object-fit: cover;

    /*
     * Fine bordure reprenant les couleurs du site.
     */
    border: 1px solid var(--color-border);

    /*
     * Ombre légère pour détacher la vignette du fond.
     */
    box-shadow: 0 12px 25px rgba(50, 40, 25, .08);
}


/* =========================================================
   TITRE DES VIGNETTES
   ========================================================= */

/*
 * Exemple :
 *
 * VOTRE INVITATION
 * PARIS 27/03/2027
 * AMORA 03/04/2027
 */
.home-card__title {
    font-family: "Cinzel", Georgia, serif;

    font-size: 15px;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    text-align: center;
}


/* =========================================================
   TEXTE SECONDAIRE DES VIGNETTES
   ========================================================= */

/*
 * Exemple :
 *
 * invitation complétée
 * Plus d'infos ...
 * Réponse avant le 15/01/2027
 */
.home-card__action {
    color: var(--color-gold);

    font-size: 13px;

    text-align: center;
}


/* =========================================================
   FLÈCHES DU CAROUSEL
   ========================================================= */

/*
 * Les boutons sont positionnés par rapport au carousel.
 *
 * Le top:50% + translateY(-50%) permet de les placer
 * exactement au milieu vertical de la zone des vignettes.
 */
.carousel-button {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    /*
     * Les flèches doivent rester au-dessus des vignettes.
     */
    z-index: 10;

    /*
     * Taille identique sur les deux côtés.
     */
    width: 44px;
    height: 44px;

    /*
     * Centrage parfait du symbole ‹ ou ›.
     */
    display: flex;
    align-items: center;
    justify-content: center;

    /*
     * Bordure légère.
     */
    border: 1px solid var(--color-border);

    /*
     * Fond légèrement opaque afin que la flèche reste lisible
     * lorsqu'elle se trouve devant une image.
     */
    background: rgba(245, 238, 227, .94);

    /*
     * Couleur du symbole.
     */
    color: var(--color-gold);

    /*
     * Taille du symbole de navigation.
     */
    font-size: 28px;

    /*
     * Empêche le symbole de modifier la hauteur du bouton.
     */
    line-height: 1;

    /*
     * Forme ronde des boutons.
     */
    border-radius: 50%;

    /*
     * Petite ombre pour détacher le bouton de l'image.
     */
    box-shadow: 0 5px 15px rgba(50, 40, 25, .08);

    /*
     * Le bouton est cliquable.
     */
    cursor: pointer;
}


/*
 * Effet visuel lors du passage de la souris.
 */
.carousel-button:hover {
    background: rgba(255, 250, 242, .98);
}


/*
 * Position de la flèche précédente.
 */
.carousel-button--prev {
    left: 4px;
}


/*
 * Position de la flèche suivante.
 */
.carousel-button--next {
    right: 4px;
}


/* =========================================================
   TABLETTE / ÉCRANS MOYENS
   ========================================================= */

/*
 * Sur un écran plus petit, on augmente légèrement
 * la largeur de la carte centrale afin de conserver
 * une bonne lisibilité.
 */
@media (max-width: 900px) {

    .home-card {
        flex-basis: 72%;
    }
}


/* =========================================================
   TÉLÉPHONE
   ========================================================= */

/*
 * Sur téléphone, les vignettes passent volontairement
 * les unes sous les autres.
 *
 * Le carousel horizontal et ses flèches disparaissent
 * afin d'avoir une utilisation plus naturelle au doigt.
 */
@media (max-width: 700px) {

    /*
     * Réduction de la largeur extérieure du bloc compteur.
     */
    .home-countdown {
        width: calc(100% - 24px);

        margin-top: 22px;
    }


    /*
     * Réduction des marges intérieures du compteur.
     */
    .home-countdown__inner {
        padding: 26px 14px;
    }


    /*
     * Réduction de l'espacement entre les unités.
     *
     * Les quatre unités sont contenues dans
     * .countdown__values.
     */
    .countdown__values {
        gap: 7px;
    }


    /*
     * Réduction de la largeur minimale de chaque unité.
     */
    .countdown__unit {
        min-width: 62px;
    }


    /*
     * Réduction de la taille des nombres.
     */
    .countdown__unit strong {
        font-size: 26px;
    }


    /*
     * Réduction des libellés sous les nombres.
     */
    .countdown__unit small {
        font-size: 9px;

        letter-spacing: .7px;
    }


    /*
     * Sur téléphone, le carousel devient une simple liste
     * verticale.
     */
    .cards-carousel__track {
        display: flex;

        flex-direction: column;

        /*
         * Plus besoin de défilement horizontal.
         */
        overflow: visible;

        /*
         * Suppression du padding utilisé par le carousel
         * sur ordinateur.
         */
        padding: 0;

        /*
         * Espacement vertical entre les trois cartes.
         */
        gap: 18px;
    }


    /*
     * Chaque vignette prend toute la largeur disponible.
     */
    .home-card {
        min-width: 0;

        width: 100%;

        flex-basis: auto;
    }


    /*
     * Les flèches ne sont plus nécessaires puisque
     * les trois cartes sont affichées verticalement.
     */
    .carousel-button {
        display: none;
    }


    /*
     * Les images sont légèrement plus larges et moins hautes
     * sur téléphone.
     */
    .home-card img {
        aspect-ratio: 1.8 / 1;
    }
}


/* =========================================================
   TRÈS PETITS TÉLÉPHONES
   ========================================================= */

/*
 * Sur les écrans de moins de 420 px de large,
 * on réduit encore légèrement les chiffres du compteur.
 */
@media (max-width: 420px) {

    .countdown__unit {
        min-width: 52px;
    }


    .countdown__unit strong {
        font-size: 22px;
    }


    .countdown__unit small {
        font-size: 8px;
    }
}


/* =========================================================
   ACCESSIBILITÉ — RÉDUCTION DES ANIMATIONS
   ========================================================= */

/*
 * Si le système de l'utilisateur demande de limiter
 * les animations, on désactive le déplacement visuel
 * des cartes.
 */
@media (prefers-reduced-motion: reduce) {

    .home-card {
        transition: none;
    }
}