/* ======================================================================
   JO-TOURISME  |  MAISON PARISIENNE
   Feuille ACCUEIL : carrousel et cartes d'accueil
   À charger APRÈS styles.css si possible.
   ====================================================================== */

.titre-principal {
    max-width: 1050px;
    margin: 20px auto 10px;
    padding: 38px 22px 20px;
    color: var(--ink, #182735);
    font: 500 clamp(2.2rem, 4.5vw, 4.2rem)/1.18 var(--font-display, Georgia, serif);
    letter-spacing: -.025em;
    text-align: center;
}
.carroussel-image {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: clamp(18px, 2.3vw, 32px);
    max-width: 1460px;
    margin: 16px auto 75px;
    padding: 0 clamp(16px, 3vw, 42px);
}
.carroussel-image-relative {
    position: relative;
    flex: 1 1 310px;
    width: auto;
    min-width: 0;
    max-width: 520px;
    isolation: isolate;
    overflow: hidden;
    border-radius: 16px;
    background: #0c1824;
    box-shadow: 0 12px 38px rgba(12, 24, 36, .11);
    transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s ease;
}
.carroussel-image-relative a,
.carroussel-image-relative button {
    position: relative;
    display: block;
    width: 100%;
    text-decoration: none;
    color: #fff;
}
.carroussel-image-relative button { padding: 0; border: 0; background: transparent; }
.image-accueil {
    display: block;
    width: 100%;
    height: clamp(280px, 31vw, 390px);
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    filter: brightness(.67) saturate(.92);
    cursor: pointer;
    transition: transform .75s cubic-bezier(.22, 1, .36, 1), filter .6s ease;
}
.carroussel-image-relative::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(6, 13, 21, .12), rgba(6, 13, 21, .14) 35%, rgba(6, 13, 21, .5));
    pointer-events: none;
}
.carroussel-image-relative .desc-image {
    position: absolute;
    z-index: 2;
    top: 50%; left: 50%;
    width: min(90%, 460px);
    margin: 0;
    padding: 18px 15px;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    font: 500 clamp(1.65rem, 2.8vw, 2.6rem)/1.2 var(--font-display, Georgia, serif);
    letter-spacing: -.01em;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .32);
    pointer-events: none;
    transition: transform .45s ease;
}
.carroussel-image-relative .desc-image::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    margin: 19px auto 0;
    background: var(--gold-light, #d9bc8c);
    transition: width .4s ease;
}
.carroussel-image-relative:hover,
.carroussel-image-relative:focus-within {
    transform: translateY(-7px);
    box-shadow: 0 25px 56px rgba(12, 24, 36, .19);
}
.carroussel-image-relative:hover .image-accueil,
.carroussel-image-relative:focus-within .image-accueil,
.carroussel-image-relative a:hover > .image-accueil {
    transform: scale(1.065);
    filter: brightness(.57) saturate(1.02);
}
.carroussel-image-relative:hover .desc-image { transform: translate(-50%, -54%); }
.carroussel-image-relative:hover .desc-image::after { width: 82px; }
.carroussel-image-relative a:focus-visible,
.carroussel-image-relative button:focus-visible { outline: 3px solid var(--gold-light, #d9bc8c); outline-offset: -4px; }

@media (max-width: 900px) {
    .carroussel-image { gap: 20px; }
    .carroussel-image-relative { flex-basis: 280px; }
    .image-accueil { height: 310px; }
}
@media (max-width: 600px) {
    .titre-principal { padding: 30px 14px 18px; margin-top: 8px; }
    .carroussel-image { flex-direction: column; gap: 18px; margin-bottom: 48px; padding: 0 16px; }
    .carroussel-image-relative { flex: none; width: 100%; max-width: none; }
    .image-accueil { height: 265px; }
}
@media (prefers-reduced-motion: reduce) {
    .carroussel-image-relative,
    .image-accueil,
    .carroussel-image-relative .desc-image,
    .carroussel-image-relative .desc-image::after { transition: none; }
}

/* ======================================================================
   PRESTIGE V2 — FINITIONS DE L'ACCUEIL
   ====================================================================== */
.titre-principal {
    max-width: 1120px;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.carroussel-image { perspective: 1200px; }
.carroussel-image-relative {
    border: 1px solid rgba(228, 203, 164, .2);
    box-shadow: 0 18px 48px rgba(12, 24, 36, .13);
}
.carroussel-image-relative::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 10px;
    border: 1px solid rgba(255, 255, 255, .27);
    border-radius: 8px;
    opacity: .68;
    pointer-events: none;
    transition: inset .45s ease, opacity .45s ease;
}
.carroussel-image-relative:hover::before,
.carroussel-image-relative:focus-within::before { inset: 14px; opacity: .95; }
.carroussel-image-relative .desc-image { text-wrap: balance; }
.carroussel-image-relative .desc-image::after { height: 1px; }
@media (max-width: 600px) {
    .carroussel-image-relative::before { inset: 8px; }
    .carroussel-image-relative:hover::before { inset: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .carroussel-image-relative::before { transition: none; }
}