/*  Secret Paradise Club — le socle.

    UNE seule police, et elle est ronde : Outfit. Bols circulaires, grande
    hauteur d x, terminaisons franches. La hierarchie ne vient pas d une
    deuxieme famille mais du poids et du corps -- 200 pour les grands titres,
    300 pour le texte, 400 pour les etiquettes en capitales.

    L arrondi est systematique et chiffre : quatre rayons, chacun avec un
    role (voir --r-* plus bas). Rien n a d angle vif a part les filets.

    Les couleurs ne bougent pas : le noir du logo, ses blancs chauds, et l or
    du monogramme en degrade -- reserve a trois endroits sur toute la page,
    le logo, un prix reel, le filet sous une etiquette de section. Le reste
    est en noir et blanc : c est ce qui tient la page calme malgre huit
    voitures.                                                               */

:root {
    /* ── Les noirs ───────────────────────────────────────────────────────── */
    --noir:   #080808;
    --noir-2: #101010;

    /* ── L or du monogramme ──────────────────────────────────────────────── */
    --or-haut: #F0DCA4;
    --or:      #C9A24A;
    --or-bas:  #8A6B2B;

    --or-degrade: linear-gradient(155deg, var(--or-haut) 0%, var(--or) 44%, var(--or-bas) 100%);

    /* ── Les blancs ──────────────────────────────────────────────────────── */
    --blanc:   #F4F2EE;
    --blanc-2: #C9C5BE;
    --gris:    #948F87;   /* 5,3:1 sur le noir */
    --gris-2:  #6D6862;   /* legendes courtes uniquement */

    --trait:    rgba(244, 242, 238, 0.11);
    --trait-or: rgba(201, 162, 74, 0.32);

    /* ── La police. Une seule, et ronde. ─────────────────────────────────── */
    /*  Outfit : geometrique, bols circulaires, grande hauteur d x. C est la
        plus ronde des grotesques lisibles -- plus que Poppins sur les
        chiffres, et sans son air de gabarit de start-up. Elle reste dans la
        famille du lettrage geometrique du logo.                             */
    --ronde: 'Outfit', 'Poppins', 'Century Gothic', 'Avenir Next', 'Segoe UI', sans-serif;

    /* ── L arrondi ───────────────────────────────────────────────────────── */
    /*  Quatre valeurs, pas une de plus, et chacune a un role : la pilule pour
        ce qu on clique, le moyen pour ce qu on regarde, le grand pour les
        panneaux, le petit pour ce qu on remplit.                            */
    --r-petit:  10px;   /* champs de formulaire */
    --r:        18px;   /* photos, cartes */
    --r-grand:  26px;   /* panneaux, blocs de contact */
    --r-pilule: 999px;  /* boutons, bascule de langue */

    /* ── Mesures ─────────────────────────────────────────────────────────── */
    --page:    1280px;
    --marge:   clamp(20px, 5vw, 64px);
    --entete:  80px;
    /*  La respiration d une section. Genereuse : c est elle qui fait
        l epure, bien plus que le nombre d elements retires.                 */
    --souffle: clamp(76px, 8vw, 120px);

    --courbe: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
    background: var(--noir);
    color: var(--blanc-2);
    font-family: var(--ronde);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*  « height: auto » n est pas une precaution de style : c est la moitie
    manquante d une paire.

    Chaque <img> du site porte des attributs width et height -- ils donnent
    au navigateur le rapport de l image avant son telechargement et evitent
    que la page saute (le « CLS » des Core Web Vitals). Mais ces attributs
    sont AUSSI des declarations de style de faible priorite. Des qu une
    regle CSS fixe la largeur sans fixer la hauteur, la largeur vient du
    CSS et la hauteur reste celle de l attribut : l image est etiree.

    C est ce qui arrivait au logo du pied de page, affiche 144 x 682 au
    lieu de 144 x 102. Les images qui doivent vraiment avoir une hauteur
    imposee -- fonds de section, cartes, mosaique -- la declarent par leur
    propre selecteur, plus specifique, et ne sont pas concernees.          */
img { max-width: 100%; height: auto; display: block; }

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

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

:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }

::selection { background: rgba(201, 162, 74, 0.3); color: var(--blanc); }

/* ══════════════════════════════════════════════════════ Typographie ════ */

.titre-1, .titre-2, .titre-3 {
    font-family: var(--ronde);
    font-weight: 400;
    color: var(--blanc);
    text-wrap: balance;
}

/*  Pas de capitales sur les titres : le bas de casse d une geometrique ronde
    est fait de cercles, et c est la qu on voit qu elle est ronde. En
    capitales on perdrait justement ce qu on est venu chercher.

    Les grandes tailles descendent en graisse 200 : plus le corps grandit,
    plus le trait doit s affiner, sinon le titre devient une masse.         */
.titre-1 {
    font-size: clamp(2rem, 4vw, 3.3rem);
    font-weight: 200;
    line-height: 1.18;
    letter-spacing: -0.012em;
}

.titre-2 {
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    font-weight: 200;
    line-height: 1.24;
    letter-spacing: -0.01em;
}

.titre-3 {
    font-size: clamp(1.1rem, 1.5vw, 1.32rem);
    font-weight: 400;
    line-height: 1.34;
    letter-spacing: -0.002em;
}

/*  L etiquette de section : capitales tres espacees, avec un filet d or
    court dessous. C est le seul ornement du site.                          */
.etiquette {
    display: inline-block;
    font-family: var(--ronde);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.34em;
    text-indent: 0.34em;
    text-transform: uppercase;
    color: var(--or);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--trait-or);
}

.chapo {
    max-width: min(56ch, 100%);
    font-family: var(--ronde);
    font-size: clamp(1.02rem, 1.2vw, 1.14rem);
    font-weight: 300;
    line-height: 1.72;
    color: var(--blanc-2);
}

.texte { max-width: min(60ch, 100%); color: var(--gris); }

/*  La ligne de donnees : modele, puissance, transmission. Toujours a la
    meme taille et a la meme graisse sur toute la page.                     */
.donnees {
    font-family: var(--ronde);
    font-size: 12.5px;
    font-weight: 300;
    letter-spacing: 0.09em;
    color: var(--gris);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════════ Actions ════ */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    /*  Une pilule demande plus de marge laterale qu un rectangle : les coins
        ronds mangent visuellement le bord, et un texte cale a 32 pixels y
        parait colle.                                                       */
    padding: 15px 38px;
    border: 1px solid transparent;
    border-radius: var(--r-pilule);
    font-family: var(--ronde);
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.4s var(--courbe), color 0.4s var(--courbe),
                border-color 0.4s var(--courbe), opacity 0.4s var(--courbe),
                transform 0.35s var(--courbe), box-shadow 0.45s var(--courbe);
}

/*  Tout bouton se souleve de deux pixels au survol et redescend au clic.
    C est le retour le plus court qu on puisse donner : la main sait qu elle
    a touche quelque chose avant meme que la page ait change.               */
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: translateY(0); transition-duration: 0.08s; }

/*  Le seul aplat d or du site, et une seule fois par ecran. */
.bouton--or {
    position: relative;
    overflow: hidden;
    background: var(--or-degrade);
    color: #100D06;
    box-shadow: 0 0 0 0 rgba(201, 162, 74, 0);
}

.bouton--or:hover { box-shadow: 0 10px 30px -8px rgba(201, 162, 74, 0.55); }

/*  Un reflet qui traverse l or, une fois, au survol. Il imite ce que fait la
    lumiere sur une surface metallique -- c est le meme geste que le degrade
    du monogramme, en mouvement.                                            */
.bouton--or::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
        transparent 30%, rgba(255, 255, 255, 0.42) 50%, transparent 70%);
    transform: translateX(-115%);
    transition: transform 0.75s var(--courbe);
    pointer-events: none;
}

.bouton--or:hover::after { transform: translateX(115%); }

.bouton--clair {
    border-color: rgba(244, 242, 238, 0.45);
    color: var(--blanc);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bouton--clair:hover { background: var(--blanc); color: var(--noir); border-color: var(--blanc); }

.bouton--sobre { border-color: var(--trait); color: var(--blanc-2); }
.bouton--sobre:hover { border-color: var(--blanc); color: var(--blanc); }

.bouton--petit { min-height: 42px; padding: 11px 26px; font-size: 10.5px; letter-spacing: 0.18em; text-indent: 0.18em; }

.lien {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding-bottom: 6px;
    font-family: var(--ronde);
    font-size: 11.5px;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-transform: uppercase;
    color: var(--blanc);
}

.lien::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--or);
    opacity: 0.42;
    transition: opacity 0.4s var(--courbe);
}

.lien:hover::after { opacity: 1; }

.lien i { font-style: normal; transition: transform 0.4s var(--courbe); }
.lien:hover i { transform: translateX(6px); }

/* ═════════════════════════════════════════════════════ Utilitaires ═════ */

.page {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding-left: var(--marge);
    padding-right: var(--marge);
}

.section { padding-top: var(--souffle); padding-bottom: var(--souffle); }

/* ══════════════════════════════════════════════════════ Le mouvement ═══ */

/*  Deux mecanismes seulement, et ils ne font pas la meme chose.

    ENTREE     l ouverture, jouee une fois au chargement.

    APPARAIT   l arrivee au defilement. Deliberement courte -- 18 pixels,
               0,7 seconde -- et jouee une seule fois : c est ce qui fait la
               difference entre une page vivante et le fondu generique qui
               deroule chaque bloc de haut en bas.

    Le decalage se fait au niveau du GROUPE : les huit cartes de la flotte
    arrivent en cascade, pas toutes ensemble ni chacune quand elle croise le
    bord de l ecran. Un groupe qui arrive ensemble se lit comme un objet.   */

.entree, .apparait { opacity: 1; transform: none; }

.js .entree { opacity: 0; transform: translateY(18px); }

.js.chargee .entree {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--courbe), transform 1s var(--courbe);
}

.js.chargee .entree--1 { transition-delay: 0.08s; }
.js.chargee .entree--2 { transition-delay: 0.18s; }
.js.chargee .entree--3 { transition-delay: 0.28s; }

.js .apparait { opacity: 0; transform: translateY(18px); }

.js .apparait.vue {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s var(--courbe), transform 0.7s var(--courbe);
}

/*  La cascade d un groupe : 55 millisecondes d ecart, plafonnee a huit
    elements. Au-dela on attendrait la fin de l animation au lieu de la
    regarder.                                                               */
.js .cascade > * { transition-delay: 0s; }
.js .cascade > *:nth-child(2)  { transition-delay: 0.055s; }
.js .cascade > *:nth-child(3)  { transition-delay: 0.11s; }
.js .cascade > *:nth-child(4)  { transition-delay: 0.165s; }
.js .cascade > *:nth-child(5)  { transition-delay: 0.22s; }
.js .cascade > *:nth-child(6)  { transition-delay: 0.275s; }
.js .cascade > *:nth-child(7)  { transition-delay: 0.33s; }
.js .cascade > *:nth-child(n+8) { transition-delay: 0.385s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .entree, .js .entree, .js.chargee .entree,
    .apparait, .js .apparait, .js .apparait.vue {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}