/*  Secret Paradise Club — les blocs.

    Le module de reservation, la flotte, la marche a suivre, le contact.     */

/* ══════════════════════════════════════════════ Module de reservation ══

   Trois champs et une action, a cheval sur le bas de la photo d ouverture.
   C est la convention du metier, et la premiere chose qu un visiteur cherche
   sur un site de location.                                                 */

.reservation-cadre {
    position: relative;
    z-index: 5;
    margin-top: clamp(-92px, -9vh, -64px);
}

.reservation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    align-items: stretch;
    gap: 1px;
    background: var(--trait);
    border: 1px solid var(--trait);
    /*  Le rayon est porte par le conteneur et « overflow: hidden » decoupe
        les cases : sans lui, les coins des champs debordent du panneau et
        l arrondi ne se voit qu a moitie.                                   */
    border-radius: var(--r-grand);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.champ {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 17px 24px;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background 0.3s var(--courbe);
}

/*  Le champ actif se signale par un liseré d or a l interieur : sur un
    panneau ou les cases sont separees par un simple filet, un changement de
    fond seul ne se voit pas assez pour dire « c est ici que vous tapez ».  */
.champ:focus-within {
    background: rgba(16, 14, 10, 0.98);
    box-shadow: inset 0 0 0 1px var(--trait-or);
}

.champ label {
    font-family: var(--ronde);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
    color: var(--or);
}

.champ input,
.champ select {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--blanc);
    font-family: var(--ronde);
    font-size: 14.5px;
    font-weight: 300;
    outline: none;
    /*  Sans cela le selecteur de date natif s affiche en clair sur fond
        sombre et devient illisible.                                        */
    color-scheme: dark;
}

.champ select option { background: #101010; color: var(--blanc); }

/*  Pas de pilule ici : le bouton est une case du panneau, et c est le
    panneau qui porte l arrondi. Une pilule posee dedans laisserait voir le
    fond dans ses quatre coins.                                             */
.reservation .bouton { min-height: 100%; border: 0; border-radius: 0; }

/* ── La ligne de reassurance ─────────────────────────────────────────────

   Trois faits, sous le bouton. Ce sont les trois objections qu on a juste
   avant de demander un prix -- la livraison coute-t-elle, me repond-on,
   l assurance est-elle comprise -- et elles se levent la, pas trois ecrans
   plus bas.                                                               */

.rassure {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px 28px;
    margin-top: 20px;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: var(--gris);
}

.rassure li { display: flex; align-items: center; gap: 9px; }

.rassure li::before {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--or-degrade);
}

/* ── Les filtres de carrosserie ──────────────────────────────────────────

   Des pilules, comme les boutons : c est le meme geste, donc la meme forme.
   La pilule active est la seule remplie d or de toute la section.         */

.filtres {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: clamp(30px, 3.2vw, 46px);
}

.filtres-boutons { display: flex; flex-wrap: wrap; gap: 8px; }

.filtre {
    padding: 9px 21px;
    border: 1px solid var(--trait);
    border-radius: var(--r-pilule);
    background: transparent;
    color: var(--gris);
    font-family: var(--ronde);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s var(--courbe), border-color 0.3s var(--courbe),
                background 0.3s var(--courbe), transform 0.3s var(--courbe);
}

.filtre:hover {
    color: var(--blanc);
    border-color: rgba(244, 242, 238, 0.3);
    transform: translateY(-1px);
}

.filtre.ici {
    color: #100D06;
    background: var(--or-degrade);
    border-color: transparent;
}

.filtres-compte {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-indent: 0.18em;
    text-transform: uppercase;
    color: var(--gris-2);
}

.filtres-compte b {
    font-weight: 400;
    color: var(--blanc);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════ La flotte ═════

   Huit voitures, huit cases identiques. Rien n encadre une carte : ni fond,
   ni bordure, ni ombre. Ce sont la photo et l espace qui font l objet.

   Les photographies viennent de sources tres inegales -- un vrai shooting
   pour l A35 et la i8, des photos de telephone pour les autres, une capture
   d ecran recadree pour la 992. Une legere desaturation commune, plus un
   meme contraste, les fait lire comme une seule serie ; la couleur revient
   en entier au survol, sur la voiture qu on regarde. C est un choix de
   mise en page autant qu un rattrapage : la flotte doit avoir l air d une
   collection, pas d un album de photos prises au hasard.                   */

.flotte {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(36px, 3.6vw, 54px) clamp(20px, 2vw, 30px);
}

/*  La carte entiere est le lien. Au survol, quatre choses bougent ensemble
    et racontent la meme chose : elle se souleve, la photo retrouve sa
    couleur et s agrandit, un liseré d or cerne l image, et une fleche sort
    de l intitule. Un seul geste, quatre signaux -- c est ce qui fait qu on
    a envie de cliquer plutot que de simplement constater qu on peut.      */
.auto {
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.55s var(--courbe);
}

.auto:hover { transform: translateY(-6px); }
.auto:active { transform: translateY(-2px); transition-duration: 0.1s; }

.auto-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: var(--r);
    background: var(--noir-2);
}

/*  Le liseré est un pseudo-element et non une bordure : une bordure
    decalerait la photo d un pixel a l apparition.                          */
.auto-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: inherit;
    transition: border-color 0.55s var(--courbe), box-shadow 0.55s var(--courbe);
    pointer-events: none;
}

.auto:hover .auto-photo::after,
.auto:focus-visible .auto-photo::after {
    border-color: var(--trait-or);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}

/*  Le genre de carrosserie, en pastille sur la photo. Il ne decore pas : il
    dit ce que les filtres trient, et il donne au coup d oeil l information
    qu on cherche en premier quand on choisit une voiture a louer.          */
.auto-genre {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 14px;
    border: 1px solid rgba(244, 242, 238, 0.14);
    border-radius: var(--r-pilule);
    background: rgba(8, 8, 8, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: var(--blanc);
    transition: background 0.5s var(--courbe), border-color 0.5s var(--courbe);
}

.auto:hover .auto-genre { background: rgba(8, 8, 8, 0.8); border-color: var(--trait-or); }

/*  Une carte ecartee par un filtre sort du flux : la laisser en
    transparence casserait la grille.                                       */
.auto.masquee { display: none; }

/*  Les cartes retenues rentrent avec un petit decalage plutot que
    d apparaitre d un coup -- on voit alors QUE la grille a change.         */
@keyframes reparait {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.auto.filtree { animation: reparait 0.45s var(--courbe) both; }

.auto-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.32) contrast(1.05) brightness(0.9);
    transition: filter 0.8s var(--courbe), transform 1s var(--courbe);
}

.auto:hover .auto-photo img,
.auto:focus-within .auto-photo img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.045);
}

.auto-corps { display: flex; flex-direction: column; gap: 8px; }

.auto-nom {
    font-family: var(--ronde);
    font-size: clamp(1.06rem, 1.35vw, 1.24rem);
    font-weight: 400;
    line-height: 1.28;
    color: var(--blanc);
    transition: color 0.35s var(--courbe);
}

.auto:hover .auto-nom { color: var(--or); }

/*  « margin-top: auto » colle le pied au bas de la carte. Sans lui, une
    ligne de caracteristiques qui passe sur deux lignes -- la i8, la 911 --
    decale son prix vers le bas et la rangee entiere devient bancale. Les
    cartes s etirent deja a la meme hauteur dans la grille : il suffisait de
    pousser le pied contre le fond.                                         */
.auto-pied {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--trait);
}

.auto-prix {
    font-family: var(--ronde);
    font-size: 14.5px;
    font-weight: 400;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    background: var(--or-degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--or);
    -webkit-text-fill-color: transparent;
}

/*  Un tarif pas encore fixe le dit en toutes lettres, et sans or : l or est
    reserve aux prix reels. La pastille lui rend le poids visuel qu un texte
    gris seul perdait face a un prix dore -- les huit pieds de carte doivent
    peser pareil, sinon la grille penche vers la seule voiture tarifee.     */
.auto-prix--demande {
    padding: 4px 13px;
    border: 1px solid var(--trait);
    border-radius: var(--r-pilule);
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--blanc-2);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    transition: border-color 0.4s var(--courbe), color 0.4s var(--courbe);
}

.auto:hover .auto-prix--demande { border-color: var(--trait-or); color: var(--blanc); }

.auto-voir {
    display: inline-flex;
    align-items: center;
    font-family: var(--ronde);
    font-size: 10.5px;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-transform: uppercase;
    color: var(--gris);
    transition: color 0.35s var(--courbe);
}

/*  La fleche est repliee sous l intitule et sort au survol. Sa largeur est
    animee en meme temps que son opacite : sinon elle reserverait sa place
    en permanence et l intitule paraitrait mal centre au repos.            */
.auto-voir::after {
    content: '→';
    display: inline-block;
    width: 0;
    margin-left: 0;
    opacity: 0;
    transform: translateX(-4px);
    transition: width 0.4s var(--courbe), margin-left 0.4s var(--courbe),
                opacity 0.4s var(--courbe), transform 0.4s var(--courbe);
}

.auto:hover .auto-voir { color: var(--blanc); }

.auto:hover .auto-voir::after {
    width: 0.75em;
    margin-left: 8px;
    opacity: 1;
    transform: none;
}

/* ══════════════════════════════════════════════════ La marche a suivre ══

   Trois etapes, en texte seul, separees par un filet. Aucune icone : il n y
   a rien a illustrer dans « on vous rappelle ».                            */

.marche {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 3.4vw, 56px);
}

/*  Chaque etape devient un panneau arrondi et translucide, comme les cartes
    de la flotte et le bloc de contact. Un simple filet suffisait sur du noir
    plein ; sur une photographie floutee il faut une matiere pour poser le
    texte, sinon il flotte.                                                 */
.marche li {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 2.6vw, 34px);
    background: rgba(8, 8, 8, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--trait);
    border-radius: var(--r);
    transition: transform 0.5s var(--courbe), border-color 0.5s var(--courbe),
                background 0.5s var(--courbe);
}

.marche li:hover {
    transform: translateY(-4px);
    border-color: var(--trait-or);
    background: rgba(14, 12, 9, 0.72);
}

.marche b {
    font-family: var(--ronde);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    color: var(--or);
}

.marche p { color: var(--gris); font-size: 14.5px; line-height: 1.72; max-width: 40ch; }

/* ═══════════════════════════════════════════ L appel aux proprietaires ══

   Un panneau pleine largeur sous la grille, et non une neuvieme case : huit
   voitures remplissent exactement quatre colonnes, une case de plus
   laisserait un trou dans la rangee.

   Le lavis d or part du coin haut gauche et s eteint avant le milieu : il
   donne de la presence au bloc sans en faire un aplat, qui trancherait avec
   des cartes qui n ont, elles, aucun fond.                                 */

.appel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 22px 40px;
    margin-top: clamp(42px, 4.8vw, 68px);
    padding: clamp(26px, 3vw, 38px) clamp(26px, 3.4vw, 44px);
    border: 1px solid var(--trait);
    border-radius: var(--r-grand);
    background: linear-gradient(118deg, rgba(201, 162, 74, 0.08), rgba(8, 8, 8, 0) 58%);
    transition: border-color 0.5s var(--courbe);
}

.appel:hover { border-color: var(--trait-or); }

.appel-texte { display: flex; flex-direction: column; gap: 10px; max-width: 58ch; }

.appel-texte p { color: var(--gris); font-size: 14.5px; line-height: 1.7; }

/* ═══════════════════════════════════════════════════════ À propos ══════

   Deux photographies qui se chevauchent, et le texte a cote.

   La petite image porte une bordure epaisse de la couleur du fond : c est
   elle qui la detache de la grande. Sans ce liseré les deux photos se
   toucheraient et l on lirait une seule image mal decoupee.               */

.apropos {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 76px);
    align-items: center;
}

/*  La reserve en bas et a droite est la place ou la petite image deborde.  */
.apropos-images {
    position: relative;
    padding: 0 clamp(28px, 4vw, 54px) clamp(38px, 5vw, 66px) 0;
}

.apropos-images figure { margin: 0; }

.apropos-grande img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--r-grand);
}

.apropos-petite {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
}

.apropos-petite img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 8px solid var(--noir);
    border-radius: calc(var(--r) + 8px);
}

.apropos-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }

.apropos-texte .etiquette { margin-bottom: 2px; }

/*  Une liste de faits, pas de puces rondes du navigateur : un point d or,
    aligne sur la premiere ligne de texte et non sur le haut du bloc.       */
.points { list-style: none; display: flex; flex-direction: column; gap: 13px; }

.points li {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--blanc-2);
}

.points li::before {
    content: '';
    flex: none;
    width: 6px;
    height: 6px;
    margin-top: 0.62em;
    border-radius: 50%;
    background: var(--or-degrade);
}

.apropos-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 6px; }

/* ═════════════════════════════════════════════════════ Nous joindre ════ */

.joindre {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--trait);
    border: 1px solid var(--trait);
    border-radius: var(--r-grand);
    overflow: hidden;
    margin-top: clamp(34px, 4vw, 52px);
}

/*  Enfants directs seulement : sans le « > », le selecteur attraperait aussi
    le <span> de valeur a l interieur de chaque case.                        */
.joindre > a,
.joindre > span {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 24px;
    /*  Translucide, pas noir plein : le bloc est pose sur une photographie
        floutee, et un aplat noir y ferait un trou.                         */
    background: rgba(8, 8, 8, 0.58);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--ronde);
    font-size: 14px;
    color: var(--blanc);
    transition: background 0.3s var(--courbe);
}

.joindre > a:hover { background: rgba(20, 18, 14, 0.82); }

.joindre b {
    font-size: 9.5px;
    font-weight: 400;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: var(--or);
}

/* ══════════════════════════════════════════════════════ Adaptations ════ */

@media (max-width: 1100px) {
    .flotte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .apropos { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 48px); }

    /*  La composition a deux photos ne tient qu en largeur. En colonne, on
        garde la grande et l on retire la petite : un chevauchement empile
        n est plus un chevauchement, c est un accident.                     */
    .apropos-images { padding: 0; max-width: 460px; }
    .apropos-petite { display: none; }
    .apropos-grande img { aspect-ratio: 3 / 2; }
}

@media (max-width: 920px) {
    .reservation { grid-template-columns: 1fr 1fr; }
    .reservation .bouton { grid-column: 1 / -1; min-height: 54px; }
    .reservation-cadre { margin-top: clamp(-70px, -7vh, -46px); }

    .marche { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .reservation { grid-template-columns: 1fr; }
    .flotte { grid-template-columns: 1fr; gap: 40px; }
    .joindre > a, .joindre > span { flex-basis: 100%; }
}