/* Styles propres à la vitrine. Tout ce qui est composant reste MudBlazor :
   on ne redéfinit ici que ce qu'une plaquette a en plus d'une application —
   sections pleine largeur, aplat de couleur, emplacements de captures. */

html, body {
    scroll-behavior: smooth;
}

/* ----- Barre de navigation ----- */

.appbar-logo {
    height: 34px;
    width: auto;
    margin-right: 10px;
    border-radius: 6px;
    /* Le logo est fourni sur fond blanc : le coin arrondi évite le carré blanc
       brut sur l'aplat vert de la barre. */
    background-color: #FFFFFF;
}

/* ----- Fil d'Ariane -----
   Bandeau discret entre la barre et le contenu : il situe sans concurrencer
   le titre de la page. Absent de l'accueil (voir FilAriane.razor). */

.fil-ariane {
    padding: 14px 0 2px;
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.fil-ariane .mud-breadcrumbs {
    padding: 0;
}

/* ----- Sections ----- */

.section {
    padding: 72px 0;
}

.section-alt {
    background-color: #F5F7F6;
}

.hero {
    background: linear-gradient(160deg, #3A786D 0%, #2F625A 100%);
    color: #FFFFFF;
    padding: 96px 0 88px;
}

.hero .mud-typography {
    color: #FFFFFF;
}

.hero-accroche {
    max-width: 620px;
}

/* ----- Emplacements de captures d'écran -----
   Tant qu'aucune image n'est déposée, le cadre affiche le nom du fichier
   attendu : le site reste présentable et personne n'a besoin de fouiller
   le code pour savoir quoi fournir. */

.capture-figure {
    margin: 0;
}

.capture {
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 10px;
    overflow: hidden;
    background-color: #FFFFFF;
    box-shadow: 0 6px 24px rgba(31, 42, 40, .10);
}

.capture img {
    display: block;
    width: 100%;
    height: auto;
}

/* Le cadre cliquable est un <button> : il faut donc annuler les styles de
   bouton du navigateur pour qu'il reste une simple image encadrée. */
.capture-cliquable {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    font: inherit;
    cursor: zoom-in;
    transition: box-shadow .18s ease, transform .18s ease;
}

.capture-cliquable:hover,
.capture-cliquable:focus-visible {
    box-shadow: 0 10px 32px rgba(31, 42, 40, .18);
    transform: translateY(-2px);
}

.capture-cliquable:focus-visible {
    outline: 3px solid #3A786D;
    outline-offset: 3px;
}

/* Loupe discrète : indique que l'image s'agrandit, sans masquer la capture. */
.capture-loupe {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(31, 42, 40, .62);
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .18s ease;
}

.capture-cliquable:hover .capture-loupe,
.capture-cliquable:focus-visible .capture-loupe {
    opacity: 1;
}

/* Sur écran tactile, il n'y a pas de survol : la loupe reste visible, sinon
   rien n'indique que l'image est agrandissable. */
@media (hover: none) {
    .capture-loupe {
        opacity: 1;
    }
}

.capture-figure figcaption {
    margin-top: 8px;
    text-align: center;
}

/* Image agrandie dans le dialogue : bornée à la hauteur de la fenêtre pour
   qu'une capture très haute reste entièrement visible sans défilement. */
.capture-agrandie {
    display: block;
    width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 6px;
}

.capture-attente {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 260px;
    padding: 24px;
    background-color: #EEF2F1;
    border: 1px dashed rgba(58, 120, 109, .45);
    border-radius: 10px;
    color: #5B6B67;
    text-align: center;
}

/* ----- Pied de page ----- */

.site-footer {
    background-color: #1F2A28;
    color: #D7DEDC;
    padding: 48px 0 32px;
    margin-top: 0;
}

.site-footer .mud-typography,
.site-footer a {
    color: #D7DEDC;
}

.site-footer a:hover {
    color: #FFFFFF;
}

/* ----- Tarifs ----- */

.tarif-carte {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tarif-carte .mud-card-content {
    flex: 1;
}

.tarif-vedette {
    border: 2px solid #3A786D;
}

.tarif-prix {
    font-size: 2.75rem;
    font-weight: 600;
    line-height: 1;
}