/* ===========================================================================
   RNB — Page d'accueil
   ---------------------------------------------------------------------------
   Portage de la maquette validee (kit Tailwind v4) en CSS classique.

   Le kit d'origine ecrivait deja 95 % de son style dans @layer components,
   c'est-a-dire en CSS ordinaire ; seule une quarantaine d'utilitaires Tailwind
   etaient reellement employes dans les vues. Ils sont repris tels quels en bas
   de ce fichier. Resultat : aucun build, aucun Node, rendu identique.

   Ordre du fichier — jetons, base, composants, utilitaires, points de rupture.
   Les utilitaires viennent apres les composants pour pouvoir les surcharger,
   exactement comme le ferait Tailwind.

   Cette feuille n'est chargee que par le gabarit layouts/site.blade.php :
   elle n'interfere pas avec public/css/rnb.css qui habille le reste du site.
   =========================================================================== */

:root {
    /* --- Trois couleurs de la charte ------------------------------------ */
    --color-glace:       #afa1a2;  /* CHARTE — Marron glace */
    --color-taupe:       #8b7a6e;  /* CHARTE — Taupe */
    --color-lin:         #e2dcd1;  /* CHARTE — Lin clair */

    /* --- Declinaisons --------------------------------------------------- */
    --color-taupe-fonce: #5c4f44;
    --color-lin-pale:    #f5f2ec;
    --color-sable:       #cdbfae;
    --color-blanc:       #fffdfa;
    --color-encre:       #3b2f29;
    --color-espresso:    #2c2320;

    /* --- Accents propres a la maquette ---------------------------------- */
    --color-lagune:      #2f6b5b;
    --color-lagune-fort: #245448;
    --color-ocre:        #c8873f;

    --color-trait:       rgb(59 47 41 / 0.14);
    --color-trait-clair: rgb(255 253 250 / 0.18);

    --font-display: "Fraunces", Georgia, serif;
    --font-sans:    "Karla", system-ui, sans-serif;

    --radius-mbl: 14px;
    --shadow-mbl: 0 26px 50px -30px rgb(44 35 32 / 0.62);

    --container-shell: 1240px;
}

/* ===========================================================================
   Base
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-lin-pale);
    color: var(--color-encre);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Grain fin sur toute la page — signature visuelle de la marque. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 900;
    pointer-events: none;
    opacity: .5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

img, video { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
    outline: 2.5px solid var(--color-glace);
    outline-offset: 3px;
    border-radius: 6px;
}

[x-cloak] { display: none !important; }

/* ===========================================================================
   Composants
   =========================================================================== */

.wrap { width: 100%; max-width: var(--container-shell); margin-inline: auto; padding-inline: 24px; }

.display {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.03;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 60, "WONK" 1;
}

.eyebrow {
    font-size: .86rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
    color: var(--color-taupe); display: flex; align-items: center; gap: 13px;
}
.eyebrow::before { content: ""; width: 38px; height: 1.5px; background: var(--color-glace); }

.section { padding-block: 96px; }

/* Deux sections qui se suivent ne doublent pas leur respiration : la seconde
   perd son retrait haut. La regle est portee par le CSS et non par une classe
   dans la vue, pour rester juste quand une section est masquee faute de
   contenu — la galerie sans photo, par exemple. Une bande pleine largeur
   (.confiance, .visite) n'etant pas une .section, celle qui la suit garde
   bien son retrait. */
.section + .section { padding-top: 0; }
.section-tete {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; margin-bottom: 52px; flex-wrap: wrap;
}
.section-tete h2 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); max-width: 17ch; margin-top: 20px; }

/* Media : degrade de repli visible tant que la photo n'est pas chargee */
.photo { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--color-glace), var(--color-taupe-fonce)); }
.photo > img, .photo > video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.04) contrast(1.02); transition: filter .5s, transform .7s; }
.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(255 253 250 / .05), rgb(139 122 110 / .2)); mix-blend-mode: soft-light; transition: opacity .5s; }
.photo:hover > img { filter: saturate(1.18) contrast(1.04); }
.photo:hover::after { opacity: .35; }

/* Boutons */
.cta { position: relative; overflow: hidden; background: var(--color-lagune); color: var(--color-blanc); border-radius: 999px; padding: 12px 24px; font-weight: 600; font-size: .95rem; display: inline-flex; align-items: center; gap: 9px; transition: transform .2s, box-shadow .25s; }
.cta > span { position: relative; z-index: 2; display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.cta::before { content: ""; position: absolute; inset: 0; background: var(--color-lagune-fort); transform: translateY(101%); transition: transform .34s cubic-bezier(.2,.7,.3,1); }
.cta:hover::before { transform: none; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgb(44 35 32 / .7); }
.cta svg { transition: transform .3s; }
.cta:hover svg { transform: translateX(3px); }

.btn-ligne { background: transparent; border: 1.5px solid var(--color-trait); padding: 11px 22px; border-radius: 999px; font-weight: 600; transition: border-color .2s, background .2s; display: inline-flex; align-items: center; gap: 8px; }
.btn-ligne:hover { border-color: var(--color-taupe); background: var(--color-blanc); }

.btn-clair { background: var(--color-blanc); color: var(--color-espresso); border-radius: 999px; padding: 13px 26px; font-weight: 600; box-shadow: 0 10px 30px -12px rgb(18 13 11 / .8); transition: background .25s, transform .2s; display: inline-flex; align-items: center; gap: 9px; }
.btn-clair:hover { background: var(--color-lin); transform: translateY(-2px); }

.btn-fantome { background: rgb(18 13 11 / .34); backdrop-filter: blur(10px); border: 1.5px solid rgb(255 253 250 / .42); color: var(--color-blanc); border-radius: 999px; padding: 13px 26px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; transition: border-color .25s, background .25s; }
.btn-fantome:hover { border-color: var(--color-blanc); background: rgb(18 13 11 / .55); }

/* Logo
   Le fichier porte le nom de la marque : il n'y a pas de texte a cote. Les
   declinaisons sont recadrees au plus juste (aucune marge dans le PNG), donc
   la hauteur fixee ici est bien celle du dessin visible. */
.logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.logo img { height: 52px; width: auto; display: block; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
.logo:hover img { transform: scale(1.03); }

/* Hauteur de la barre : elle suit celle du logo, avec de l'air autour. */
.nav-barre { height: 92px; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 80; background: rgb(245 242 236 / .86); backdrop-filter: blur(18px); border-bottom: 1px solid transparent; transition: background .3s, border-color .3s; }
.nav.scrolled { border-bottom-color: var(--color-trait); background: rgb(245 242 236 / .96); }

.lien { position: relative; padding: 10px 13px; border-radius: 999px; font-size: .95rem; font-weight: 500; color: var(--color-taupe-fonce); display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .25s, background .25s; }
.lien::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 1.5px; background: var(--color-lagune); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .32s cubic-bezier(.2,.7,.3,1); }
.lien:hover { color: var(--color-espresso); background: rgb(175 161 162 / .16); }
.lien:hover::after { transform: scaleX(1); }
.lien.actif { color: var(--color-espresso); font-weight: 600; }
.lien.actif::after { transform: scaleX(1); background: var(--color-glace); }

.panneau { position: absolute; top: calc(100% + 10px); left: 0; min-width: 290px; background: var(--color-blanc); border-radius: 16px; padding: 10px; box-shadow: 0 28px 52px -26px rgb(44 35 32 / .6); z-index: 90; }
.panneau a { position: relative; display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: 11px; font-size: .94rem; font-weight: 500; transition: background .22s, padding-left .22s, color .22s; }
.panneau a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 3px; height: 0; background: var(--color-lagune); border-radius: 2px; transform: translateY(-50%); transition: height .26s; }
.panneau a:hover { background: var(--color-lin-pale); padding-left: 20px; color: var(--color-espresso); }
.panneau a:hover::before { height: 20px; }
.pastille-nb { margin-left: auto; font-size: .74rem; font-weight: 700; color: var(--color-lagune); background: rgb(47 107 91 / .1); padding: 3px 9px; border-radius: 999px; }

.lien-connexion { padding: 10px 14px; border-radius: 999px; font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: background .25s, color .25s; }
.lien-connexion:hover { background: rgb(175 161 162 / .2); color: var(--color-espresso); }
.burger { display: none; padding: 10px; border-radius: 10px; place-items: center; }
.burger:hover { background: rgb(175 161 162 / .2); }

/* Carrousel */
.hero { position: relative; height: min(540px, 74vh); min-height: 430px; overflow: hidden; background: var(--color-espresso); }
.piste { display: flex; height: 100%; transition: transform .85s cubic-bezier(.65,.02,.2,1); }
.diapo { flex: 0 0 100%; position: relative; height: 100%; }
.diapo-fond { position: absolute; inset: 0; }
.diapo-fond img, .diapo-fond video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.06) contrast(1.03); transform: scale(1.06); transition: transform 7s linear; }
.diapo.actif .diapo-fond img, .diapo.actif .diapo-fond video { transform: scale(1); }
.diapo-fond::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(120% 100% at 8% 46%, rgb(18 13 11 / .78) 0%, rgb(18 13 11 / .5) 32%, transparent 62%),
        linear-gradient(to top, rgb(28 21 18 / .6), transparent 26%),
        linear-gradient(100deg, rgb(30 64 56 / .9) 0%, rgb(28 21 18 / .68) 34%, rgb(47 107 91 / .2) 66%, rgb(175 161 162 / .04) 100%);
}
.diapo-contenu { position: relative; z-index: 3; height: 100%; max-width: calc(var(--container-shell) + 104px); margin-inline: auto; padding: 0 76px 112px; display: flex; flex-direction: column; justify-content: center; }
.diapo .eyebrow { color: var(--color-lin); text-shadow: 0 1px 12px rgb(18 13 11 / .6); }
.diapo h1 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); color: var(--color-blanc); max-width: 15ch; margin: 16px 0; text-shadow: 0 2px 30px rgb(18 13 11 / .6), 0 1px 3px rgb(18 13 11 / .35); }
.diapo h1 em { font-style: normal; color: var(--color-sable); font-weight: 300; }
.diapo p { color: rgb(255 253 250 / .95); max-width: 44ch; font-size: 1.06rem; text-shadow: 0 1px 16px rgb(18 13 11 / .7); }
.diapo-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

/* Entree du texte de la diapositive active */
.diapo .eyebrow, .diapo h1, .diapo p, .diapo-actions { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.diapo.actif .eyebrow       { opacity: 1; transform: none; transition-delay: .18s; }
.diapo.actif h1             { opacity: 1; transform: none; transition-delay: .28s; }
.diapo.actif p              { opacity: 1; transform: none; transition-delay: .38s; }
.diapo.actif .diapo-actions { opacity: 1; transform: none; transition-delay: .48s; }

/* Fleches laterales — le defilement ne se met pas en pause au survol */
.fleche { position: absolute; top: calc(50% - 46px); z-index: 30; width: 50px; height: 50px; border-radius: 50%; background: rgb(18 13 11 / .42); border: 1.5px solid rgb(255 253 250 / .4); color: var(--color-blanc); display: grid; place-items: center; backdrop-filter: blur(10px); transition: background .25s, border-color .25s, transform .2s; }
.fleche:hover { background: var(--color-glace); border-color: var(--color-glace); color: var(--color-espresso); transform: scale(1.07); }
.fleche:active { transform: scale(.96); }
.fleche-prec { left: 14px; }
.fleche-suiv { right: 14px; }
@media (min-width: 1400px) { .fleche-prec { left: 28px; } .fleche-suiv { right: 28px; } }

.hero-ui { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 30; pointer-events: none; }
.hero-ui-in { max-width: calc(var(--container-shell) + 104px); margin-inline: auto; padding-inline: 76px; display: flex; align-items: center; gap: 22px; }
.points { display: flex; gap: 10px; pointer-events: auto; }
.point { width: 46px; height: 3px; border-radius: 2px; background: rgb(255 253 250 / .42); overflow: hidden; padding: 0; transition: background .3s; }
.point:hover { background: rgb(255 253 250 / .5); }
.point i { display: block; height: 100%; width: 0; background: var(--color-glace); border-radius: 2px; }
.point.actif i { animation: remplir var(--duree, 7s) linear forwards; }
.hero.pause .point.actif i { animation-play-state: paused; }
@keyframes remplir { from { width: 0; } to { width: 100%; } }
.compteur { margin-left: auto; color: rgb(255 253 250 / .88); text-shadow: 0 1px 10px rgb(18 13 11 / .7); font-size: .82rem; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.compteur b { color: var(--color-blanc); font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; }

/* Barre de recherche */
.recherche { position: relative; z-index: 20; margin: -56px auto 0; max-width: var(--container-shell); padding-inline: 24px; }
.recherche-in { background: var(--color-blanc); border-radius: var(--radius-mbl); box-shadow: 0 28px 60px -34px rgb(44 35 32 / .75); display: grid; grid-template-columns: 1.3fr 1fr 1fr .85fr auto; overflow: hidden; }
.champ { padding: 16px 22px; border-right: 1px solid var(--color-trait); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.champ:nth-child(4) { border-right: 0; }
.champ label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-taupe); }
.champ input, .champ select { border: 0; background: transparent; outline: none; font-size: 1rem; font-weight: 500; padding: 2px 0; width: 100%; }
.champ:focus-within { background: var(--color-lin-pale); }
.recherche-btn { background: var(--color-lagune); color: var(--color-blanc); padding-inline: 34px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; transition: background .2s; }
.recherche-btn:hover { background: var(--color-lagune-fort); }

/* Mosaique des destinations */
.mosaique-dest { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 312px 224px; gap: 18px; }
.dest { position: relative; border-radius: var(--radius-mbl); overflow: hidden; display: block; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.dest:hover { transform: translateY(-4px); box-shadow: var(--shadow-mbl); }
.dest:nth-child(1) { grid-column: span 7; }
.dest:nth-child(2) { grid-column: span 5; }
.dest:nth-child(n+3) { grid-column: span 3; }
.dest .voile { position: absolute; inset: 0; z-index: 3; background: linear-gradient(to top, rgb(26 19 16 / .9), rgb(26 19 16 / .2) 56%, transparent 80%); }
.dest-txt { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 4; color: var(--color-blanc); }
.dest-txt b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.42rem; line-height: 1.15; letter-spacing: -.015em; }
.dest:nth-child(-n+2) .dest-txt b { font-size: 1.95rem; }
.dest-txt small { display: block; font-size: .82rem; color: rgb(255 253 250 / .78); margin-top: 5px; }
.dest-nb { position: absolute; top: 15px; right: 15px; z-index: 4; background: rgb(255 253 250 / .93); color: var(--color-encre); font-size: .73rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; }

.quartiers { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.quartiers a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--color-trait); font-size: .9rem; font-weight: 500; color: var(--color-taupe-fonce); transition: border-color .2s, background .2s, color .2s; }
.quartiers a:hover { border-color: var(--color-taupe); background: var(--color-blanc); color: var(--color-espresso); }
.quartiers a b { font-weight: 700; color: var(--color-lagune); font-size: .82rem; }
.quartiers .q-titre { font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-taupe); margin-right: 6px; }

/* Carte residence */
.carte { background: var(--color-blanc); border: 1px solid rgb(59 47 41 / .07); border-radius: var(--radius-mbl); overflow: hidden; display: flex; flex-direction: column; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.carte:hover { transform: translateY(-6px); box-shadow: var(--shadow-mbl); }
.carte-media { aspect-ratio: 5 / 4; position: relative; }
.carte-media > video { position: absolute; inset: 0; opacity: 0; z-index: 2; transition: opacity .45s; }
.carte.joue video { opacity: 1; }
.carte:hover .carte-media > img { transform: scale(1.05); }
.tag { position: absolute; top: 14px; left: 14px; z-index: 4; background: var(--color-lin-pale); color: var(--color-encre); font-size: .72rem; font-weight: 700; padding: 7px 13px; border-radius: 999px; display: flex; align-items: center; gap: 7px; }
.tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ocre); }
.play { position: absolute; right: 14px; bottom: 14px; z-index: 4; background: rgb(44 35 32 / .6); color: var(--color-blanc); backdrop-filter: blur(6px); font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; transition: opacity .3s; }
.carte:hover .play { opacity: 0; }
.coeur { position: absolute; top: 12px; right: 12px; z-index: 5; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; filter: drop-shadow(0 1px 4px rgb(18 13 11 / .45)); transition: transform .2s; }
.coeur:hover { transform: scale(1.13); }
.coeur svg { width: 20px; height: 20px; fill: rgb(20 16 14 / .28); stroke: #fff; stroke-width: 1.8; }
.coeur.on svg { fill: var(--color-ocre); stroke: #fff; }
.carte-corps { padding: 18px 20px 22px; flex: 1; display: flex; flex-direction: column; }
.carte-lieu { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--color-taupe); }
.carte h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.18rem; margin: 6px 0 10px; line-height: 1.2; }
.carte-meta { font-size: .88rem; color: var(--color-taupe-fonce); }
.carte-meta .inclus { color: var(--color-lagune); font-weight: 700; }
.carte-pied { display: flex; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-trait); }
.prix b { font-family: var(--font-display); font-size: 1.28rem; font-weight: 400; }
.prix span { font-size: .85rem; color: var(--color-taupe); }
.note { font-size: .88rem; font-weight: 600; white-space: nowrap; }
.note span { color: var(--color-taupe); font-weight: 400; }

/* Onglets + rail */
.onglets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.onglets button { background: transparent; border: 1.5px solid var(--color-trait); padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--color-taupe-fonce); transition: background .22s, border-color .22s, color .22s; }
.onglets button:hover { border-color: var(--color-taupe); background: var(--color-blanc); color: var(--color-espresso); }
.onglets button.on { background: var(--color-lagune); border-color: var(--color-lagune); color: var(--color-blanc); }
.rail-nav { display: flex; gap: 9px; }
.rail-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--color-trait); color: var(--color-taupe-fonce); display: grid; place-items: center; transition: border-color .2s, color .2s, background .2s; }
.rail-nav button:hover { border-color: var(--color-taupe); color: var(--color-espresso); background: var(--color-blanc); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 26px) / 4); gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding: 4px 2px 10px; }
.rail::-webkit-scrollbar { display: none; }
.rail .carte { scroll-snap-align: start; }
.rail-vide { border: 1.5px dashed var(--color-trait); border-radius: var(--radius-mbl); padding: 44px 24px; text-align: center; color: var(--color-taupe-fonce); }

/* Bandeau confiance */
.confiance { background: var(--color-lagune-fort); color: rgb(255 253 250 / .78); padding-block: 94px; position: relative; overflow: hidden; }
.confiance::before { content: ""; position: absolute; inset: 0; background: radial-gradient(900px 430px at 10% -12%, rgb(200 135 63 / .24), transparent 60%), radial-gradient(760px 400px at 94% 112%, rgb(175 161 162 / .24), transparent 62%); }
.confiance .wrap { position: relative; }
.confiance .eyebrow { color: var(--color-sable); }
.confiance .eyebrow::before { background: var(--color-sable); }
.confiance h2 { color: var(--color-blanc); font-size: clamp(2rem, 3.9vw, 2.95rem); max-width: 19ch; margin-top: 18px; }
.confiance-grille { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 56px; }
.confiance-item { padding-inline: 26px; border-left: 1px solid rgb(255 253 250 / .16); }
.confiance-item:first-child { padding-left: 0; border-left: 0; }
.confiance-item:last-child { padding-right: 0; }
.confiance-item .ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgb(255 253 250 / .1); color: #e9c88c; margin-bottom: 18px; }
.confiance-item h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; color: var(--color-blanc); margin-bottom: 9px; line-height: 1.2; }
.confiance-item p { font-size: .91rem; line-height: 1.55; color: rgb(255 253 250 / .7); }

/* Galerie */
.mosaique-photos { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; gap: 14px; }
.gal { position: relative; border-radius: var(--radius-mbl); overflow: hidden; cursor: zoom-in; background: var(--color-sable); display: block; }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .4s; }
.gal:hover img { transform: scale(1.07); filter: saturate(1.15); }
.gal.grande { grid-column: span 2; grid-row: span 2; }
.gal.large { grid-column: span 2; }
.gal-legende { position: absolute; inset: auto 0 0 0; padding: 16px 16px 14px; text-align: left; color: var(--color-blanc); background: linear-gradient(to top, rgb(18 13 11 / .86), transparent); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.gal:hover .gal-legende, .gal:focus-visible .gal-legende { opacity: 1; transform: none; }
.gal-legende b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.06rem; line-height: 1.2; }
.gal-legende span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-sable); }
.gal-loupe { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgb(18 13 11 / .5); backdrop-filter: blur(8px); color: var(--color-blanc); display: grid; place-items: center; opacity: 0; transition: opacity .3s; }
.gal:hover .gal-loupe { opacity: 1; }

.visionneuse { position: fixed; inset: 0; z-index: 200; background: rgb(18 13 11 / .95); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 32px; }
.visionneuse img { max-width: min(1080px, 92vw); max-height: 78vh; border-radius: 10px; box-shadow: 0 40px 90px -40px #000; }
.v-legende { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: var(--color-blanc); font-size: .95rem; }
.v-legende span { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-sable); margin-top: 4px; }
.v-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: rgb(255 253 250 / .12); border: 1.5px solid rgb(255 253 250 / .35); color: var(--color-blanc); display: grid; place-items: center; transition: background .25s; }
.v-btn:hover { background: var(--color-lagune); }

/* Mur de videos
   La grille suit le nombre de visites reellement disponibles : a deux, trois
   colonnes laisseraient un vide a droite. */
.mur-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mur-videos.mur-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.mur-videos.mur-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin-inline: auto; }
.video-carte { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-mbl); overflow: hidden; background: var(--color-espresso); box-shadow: 0 20px 44px -30px rgb(18 13 11 / .8); transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.video-carte:hover { transform: translateY(-5px); }
.video-carte video, .video-carte > img { width: 100%; height: 100%; object-fit: cover; }
.video-voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(18 13 11 / .88), rgb(18 13 11 / .08) 46%); }
/* Au-dessus du bouton de pause, qui couvre toute la carte : le lien vers la
   fiche doit rester atteignable pendant la lecture. */
.video-info { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 7; color: var(--color-blanc); }
.video-info span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-sable); }
.video-info b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.28rem; line-height: 1.15; margin: 5px 0 8px; }
.video-info a { display: inline-flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; border-bottom: 1.5px solid rgb(255 253 250 / .4); padding-bottom: 2px; transition: border-color .25s; }
.video-info a:hover { border-color: var(--color-blanc); }
/* Lecture / pause : la visite ne demarre jamais seule, et le meme bouton
   permet de l'arreter. Pendant la lecture il s'efface pour ne pas masquer
   l'image, mais reste cliquable — toute la carte devient la zone de pause,
   comme sur un lecteur video — et il reapparait au survol. */
.video-lancer { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: none; border: 0; cursor: pointer; transition: opacity .3s; }
.video-lancer > span { width: 68px; height: 68px; border-radius: 50%; background: rgb(255 253 250 / .92); color: var(--color-espresso); display: grid; place-items: center; box-shadow: 0 12px 30px -10px rgb(18 13 11 / .85); transition: transform .25s cubic-bezier(.2,.7,.3,1), background .25s; }
/* Decalage optique du triangle de lecture, inutile pour les deux barres. */
.video-carte:not(.joue) .video-lancer > span svg { margin-left: 4px; }
.video-lancer:hover > span, .video-lancer:focus-visible > span { transform: scale(1.09); background: #fff; }
.video-carte.joue .video-lancer { opacity: 0; }
.video-carte.joue:hover .video-lancer,
.video-carte.joue .video-lancer:focus-visible { opacity: 1; }

/* Sans survol possible, le bouton reste visible en retrait. */
@media (hover: none) {
    .video-carte.joue .video-lancer { opacity: .55; }
}

/* La coupure du son n'a de sens que pendant la lecture. */
.video-son { position: absolute; top: 14px; right: 14px; z-index: 6; width: 40px; height: 40px; border-radius: 50%; background: rgb(18 13 11 / .55); backdrop-filter: blur(8px); border: 1px solid rgb(255 253 250 / .3); color: var(--color-blanc); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: background .25s, opacity .25s; }
.video-carte.joue .video-son { opacity: 1; pointer-events: auto; }
.video-son:hover { background: var(--color-lagune); }
.video-etiq { position: absolute; top: 14px; left: 14px; background: rgb(18 13 11 / .55); backdrop-filter: blur(8px); color: var(--color-blanc); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 999px; display: flex; align-items: center; gap: 7px; }
.video-etiq i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ocre); }

/* La visite video */
.visite { background: var(--color-blanc); color: var(--color-encre); }
.visite-in { display: grid; grid-template-columns: 1.05fr .95fr; max-width: var(--container-shell); margin-inline: auto; align-items: center; }
.visite-texte { padding: 88px 56px 88px 24px; }
.visite .eyebrow { color: var(--color-lagune); }
.visite .eyebrow::before { background: var(--color-lagune); }
.visite h2 { font-size: clamp(2.2rem, 4.1vw, 3.1rem); margin: 20px 0 22px; max-width: 15ch; }
.visite p { color: var(--color-taupe-fonce); max-width: 42ch; }
.visite-liste { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.visite-liste div { display: flex; gap: 14px; align-items: flex-start; font-size: .97rem; color: var(--color-taupe-fonce); }
.visite-liste i { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--color-lagune); color: var(--color-blanc); display: grid; place-items: center; font-size: .72rem; font-weight: 700; font-style: normal; margin-top: 3px; }
.visite-video { aspect-ratio: 4 / 5; }
.visite-video::after { display: none; }

/* Etapes */
.etapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.etape { position: relative; overflow: hidden; border-radius: 20px; padding: 34px 30px 32px; border: 1px solid transparent; transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s; }
.etape:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -32px rgb(18 13 11 / .6); }
.etape .chiffre { position: absolute; top: -14px; right: 6px; font-family: var(--font-display); font-size: 6.4rem; font-weight: 600; line-height: 1; opacity: .13; pointer-events: none; user-select: none; }
.etape .icone { width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; color: var(--color-blanc); margin-bottom: 24px; }
.etape b { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; display: block; }
.etape h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; margin: 10px 0 12px; }
.etape p { color: var(--color-taupe-fonce); font-size: .97rem; }
.etape .moyens { display: flex; gap: 7px; margin-top: 18px; flex-wrap: wrap; }
.etape .moyens span { font-size: .74rem; font-weight: 600; background: var(--color-blanc); color: var(--color-taupe-fonce); padding: 5px 11px; border-radius: 999px; border: 1px solid rgb(59 47 41 / .1); }
.etape-lagune { background: rgb(47 107 91 / .1); border-color: rgb(47 107 91 / .2); }
.etape-lagune .icone { background: var(--color-lagune); }
.etape-lagune b, .etape-lagune .chiffre { color: var(--color-lagune); }
.etape-ocre { background: rgb(200 135 63 / .13); border-color: rgb(200 135 63 / .24); }
.etape-ocre .icone { background: var(--color-ocre); }
.etape-ocre b, .etape-ocre .chiffre { color: #a06a26; }
.etape-taupe { background: rgb(139 122 110 / .16); border-color: rgb(139 122 110 / .26); }
.etape-taupe .icone { background: var(--color-taupe); }
.etape-taupe b, .etape-taupe .chiffre { color: var(--color-taupe-fonce); }

/* Bandeau proprietaires */
.bandeau { position: relative; border-radius: var(--radius-mbl); overflow: hidden; padding: 70px 56px; color: var(--color-blanc); isolation: isolate; }
.bandeau > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.95); }
.bandeau::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgb(36 84 74 / .9), rgb(139 122 110 / .58)); }
.bandeau-in { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; }
.bandeau h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 3.7vw, 2.9rem); max-width: 15ch; line-height: 1.08; }
.bandeau p { color: rgb(255 253 250 / .86); margin-top: 12px; max-width: 40ch; }

/* Pied de page */
.pied { background: var(--color-espresso); color: rgb(255 253 250 / .72); padding: 64px 0 32px; margin-top: 96px; }
.pied-grille { display: grid; grid-template-columns: 1.75fr 1fr 1fr 1fr; gap: 40px; }
.pied h5 { color: var(--color-blanc); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.pied ul { display: flex; flex-direction: column; gap: 10px; font-size: .94rem; }
.pied a:hover { color: var(--color-glace); }
.pied .logo img { height: 62px; }
.pied-contact { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .94rem; }
.pied-contact a { display: flex; align-items: center; gap: 10px; }
.pied-contact svg { opacity: .55; flex: 0 0 auto; }
.pied-bas { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--color-trait-clair); display: flex; justify-content: space-between; gap: 16px; font-size: .86rem; flex-wrap: wrap; }
.wa { display: inline-flex; align-items: center; gap: 12px; background: #25d366; color: #06301b; font-weight: 700; padding: 12px 22px 12px 16px; border-radius: 999px; margin-top: 22px; transition: background .25s, transform .2s, box-shadow .25s; }
.wa:hover { background: #1fbe58; transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgb(37 211 102 / .9); }
.wa small { display: block; font-weight: 500; font-size: .72rem; opacity: .75; }
.reseaux { display: flex; gap: 11px; margin-top: 20px; }
.reseau { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, filter .25s; }
.reseau:hover { transform: translateY(-4px); filter: brightness(1.1); }
.r-fb { background: #1877f2; } .r-fb:hover { box-shadow: 0 12px 24px -12px #1877f2; }
.r-ig { background: linear-gradient(42deg, #f9ce34 4%, #ee2a7b 52%, #6228d7 96%); } .r-ig:hover { box-shadow: 0 12px 24px -12px #ee2a7b; }
.r-tk { background: #0b0b0b; border: 1px solid rgb(255 253 250 / .28); } .r-tk:hover { box-shadow: 0 12px 24px -12px #25f4ee; }
.r-li { background: #0a66c2; } .r-li:hover { box-shadow: 0 12px 24px -12px #0a66c2; }
.pied-paiements { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pied-paiements span { font-size: .74rem; font-weight: 600; color: rgb(255 253 250 / .82); border: 1px solid rgb(255 253 250 / .22); padding: 5px 12px; border-radius: 999px; }

/* Apparition au defilement
   ---------------------------------------------------------------------------
   Le contenu est visible par defaut. L'etat masque n'est applique que sous
   .js-anim, classe posee par un script en ligne dans le <head> : si le
   JavaScript est desactive, bloque ou en erreur, rien n'est jamais cache.
   Une securite dans site.js revele tout au bout d'une seconde si
   IntersectionObserver ne delivre pas ses entrees. */
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.js-anim .reveal { opacity: 0; transform: translateY(22px); }
.js-anim .reveal.vu { opacity: 1; transform: none; }

/* ===========================================================================
   Utilitaires
   ---------------------------------------------------------------------------
   Reprise exacte des seuls utilitaires Tailwind employes par les vues du kit.
   Places apres les composants pour pouvoir les surcharger, comme le ferait
   Tailwind. Ne pas en ajouter ici : ecrire un composant plutot.
   =========================================================================== */

.relative { position: relative; }
.shrink-0 { flex-shrink: 0; }
.block { display: block; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.self-start { align-self: flex-start; }
.leading-none { line-height: 1; }
.font-normal { font-weight: 400; }

.gap-0\.5 { gap: .125rem; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }

.ml-auto { margin-left: auto; }
.ml-6 { margin-left: 1.5rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-7 { margin-top: 1.75rem; }
.mt-9 { margin-top: 2.25rem; }
.mt-10 { margin-top: 2.5rem; }
.py-4 { padding-block: 1rem; }
.pt-0 { padding-top: 0; }

.h-\[78px\] { height: 78px; }
.max-w-\[34ch\] { max-width: 34ch; }
.max-w-\[44ch\] { max-width: 44ch; }

.top-6 { top: 1.5rem; }
.left-6 { left: 1.5rem; }
.right-6 { right: 1.5rem; }
.top-1\/2 { top: 50%; }
.-translate-y-1\/2 { transform: translateY(-50%); }

.border-t { border-top-width: 1px; border-top-style: solid; }
.border-trait { border-color: var(--color-trait); }

.bg-blanc { background: var(--color-blanc); }
.text-taupe { color: var(--color-taupe); }
.text-taupe-fonce { color: var(--color-taupe-fonce); }
.text-lagune-fort { color: var(--color-lagune-fort); }
.text-\[\.76rem\] { font-size: .76rem; }
.text-\[\.94rem\] { font-size: .94rem; }

/* ===========================================================================
   Points de rupture — 1240 (menu burger) · 1000 (tablette) · 680 (mobile)
   =========================================================================== */

@media (max-width: 1180px) {
    .rail { grid-auto-columns: calc((100% - 2 * 22px) / 3); gap: 22px; }
    .confiance-grille { grid-template-columns: repeat(3, 1fr); gap: 34px 0; }
    .confiance-item:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 1240px) {
    .nav-liens { display: none; }
    .burger { display: grid; }
}
@media (max-width: 1000px) {
    .recherche-in { grid-template-columns: 1fr 1fr; }
    .champ { border-right: 1px solid var(--color-trait); border-bottom: 1px solid var(--color-trait); }
    .recherche-btn { grid-column: 1 / -1; padding: 18px; justify-content: center; }
    .mosaique-dest { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 212px; }
    .dest:nth-child(1), .dest:nth-child(2), .dest:nth-child(n+3) { grid-column: span 1; }
    .dest:nth-child(-n+2) .dest-txt b { font-size: 1.5rem; }
    .rail { grid-auto-columns: calc((100% - 20px) / 2); gap: 20px; }
    .mosaique-photos { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
    .mur-videos { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
    .visite-in { grid-template-columns: 1fr; }
    .visite-texte { padding: 64px 24px 40px; }
    .visite-video { aspect-ratio: 16 / 10; }
    .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .logo img { height: 42px; }
    .nav-barre { height: 76px; }
    .pied .logo img { height: 50px; }
}

@media (max-width: 680px) {
    /* Sur mobile les fleches passent en bas a gauche : a 390 px de large,
       des fleches laterales recouvriraient le texte du hero. */
    .hero { height: min(508px, 78vh); min-height: 420px; }
    .diapo-contenu { padding: 0 20px 128px; }
    .fleche { top: auto; bottom: 68px; width: 40px; height: 40px; }
    .fleche-prec { left: 20px; }
    .fleche-suiv { left: 68px; right: auto; }
    .hero-ui { bottom: 80px; }
    .hero-ui-in { padding-inline: 20px; }
    .points { display: none; }
    .recherche { margin-top: -40px; }
    .section { padding-block: 64px; }
    .section-tete { flex-direction: column; align-items: flex-start; }
    .mosaique-dest { grid-template-columns: 1fr; grid-auto-rows: 196px; gap: 14px; }
    .rail { grid-auto-columns: 84%; gap: 16px; }
    .rail-nav { display: none; }
    .confiance { padding-block: 64px; }
    .confiance-grille { grid-template-columns: 1fr; gap: 30px; margin-top: 36px; }
    .confiance-item { padding: 0; border-left: 0; }
    .etapes { grid-template-columns: 1fr; }
    .etape { padding: 28px 24px 26px; }
    .etape .chiffre { font-size: 5rem; }
    .bandeau { padding: 40px 26px; }
    .pied-grille { grid-template-columns: 1fr; gap: 32px; }
    .max-\[680px\]\:hidden { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js-anim .reveal, .diapo .eyebrow, .diapo h1, .diapo p, .diapo-actions { opacity: 1; transform: none; }
}

/* Chevron du menu deroulant « Destinations » */
.lien .chevron { opacity: .6; transition: transform .3s; }
.relative:hover > .lien .chevron,
.relative:focus-within > .lien .chevron { transform: rotate(180deg); }