/*  Secret Paradise Club — les pages interieures.

    Tout ce que l accueil n a pas : l en-tete des pages secondaires, le fil
    d Ariane, le texte long, le formulaire, la fiche d un vehicule, la foire
    aux questions et les liens entre categories.

    Rien n est reinvente ici : les jetons, l arrondi, la police et l or
    viennent de socle.css, et les blocs reprennent les memes formes que
    l accueil. Une page interieure doit avoir l air de la meme maison.      */

/* ══════════════════════════════════════════ En-tete de page ════════════

   L equivalent de l ouverture, en un tiers de la hauteur : une photographie
   floutee, le fil d Ariane, le titre. Assez pour situer, jamais assez pour
   retarder la lecture.                                                    */

.page-tete {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-top: calc(var(--entete) + clamp(52px, 7vw, 88px));
    padding-bottom: clamp(46px, 6vw, 78px);
}

.page-tete .titre-1 { max-width: 20ch; }

.page-tete .chapo { margin-top: 22px; }

.page-tete .etiquette { margin-bottom: 20px; }

/* ── Le fil d Ariane ─────────────────────────────────────────────────────

   Il sert deux publics : la personne qui veut remonter d un cran, et le
   moteur de recherche, qui lit la hierarchie du site dans ces trois mots.  */

.fil {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    font-size: 10.5px;
    letter-spacing: 0.17em;
    text-indent: 0.17em;
    text-transform: uppercase;
    color: var(--gris-2);
}

.fil a { color: var(--gris); transition: color 0.3s var(--courbe); }
.fil a:hover { color: var(--or); }
.fil i { font-style: normal; color: var(--gris-2); }
.fil [aria-current] { color: var(--blanc-2); }

/* ══════════════════════════════════════════════════ Le texte long ══════

   Une seule colonne, calee a 72 caracteres. Au-dela on relit deux fois la
   meme ligne ; en deca on saute a la ligne tous les six mots.             */

.article { max-width: 72ch; }

.article > * + * { margin-top: 1.15em; }

.article h2 {
    font-family: var(--ronde);
    font-size: clamp(1.3rem, 2vw, 1.7rem);
    font-weight: 200;
    line-height: 1.3;
    letter-spacing: -0.008em;
    color: var(--blanc);
    margin-top: 2.3em;
}

.article h3 {
    font-family: var(--ronde);
    font-size: 1.08rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--blanc);
    margin-top: 1.9em;
}

.article p { color: var(--blanc-2); font-size: 15.5px; line-height: 1.82; }

.article ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }

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

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

.article strong { color: var(--blanc); font-weight: 400; }

.article a:not(.bouton):not(.lien) {
    color: var(--or);
    border-bottom: 1px solid var(--trait-or);
    transition: border-color 0.3s var(--courbe);
}

.article a:not(.bouton):not(.lien):hover { border-bottom-color: var(--or); }

/* ══════════════════════════════════ Le texte et sa colonne laterale ════ */

.avec-cote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}

/*  La carte d appel suit le defilement. Elle est courte : coller un bloc
    plus haut que la fenetre rendrait son bas inatteignable.               */
.cote { position: sticky; top: calc(var(--entete) + 22px); }

.carte-cta {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 2.6vw, 32px);
    border: 1px solid var(--trait-or);
    border-radius: var(--r-grand);
    background: linear-gradient(150deg, rgba(201, 162, 74, 0.09), rgba(8, 8, 8, 0) 62%);
}

.carte-cta h2 {
    font-family: var(--ronde);
    font-size: 1.22rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--blanc);
}

.carte-cta p { font-size: 14px; line-height: 1.7; color: var(--gris); }

.carte-cta .bouton { width: 100%; }

.carte-cta-tel {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-top: 14px;
    border-top: 1px solid var(--trait);
    font-size: 15px;
    color: var(--blanc);
    font-variant-numeric: tabular-nums;
    transition: color 0.3s var(--courbe);
}

.carte-cta-tel:hover { color: var(--or); }

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

/* ══════════════════════════════════════════ La foire aux questions ═════

   Pas d accordeon. Six questions courtes se lisent plus vite ouvertes
   qu elles ne se cliquent -- et un moteur de recherche lit le texte visible
   bien plus volontiers qu un contenu replie.                              */

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 42px); }

.faq > div { padding-top: 20px; border-top: 1px solid var(--trait); }

.faq h3 {
    font-family: var(--ronde);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--blanc);
    margin-bottom: 10px;
}

.faq p { color: var(--gris); font-size: 14.5px; line-height: 1.75; }

/* ══════════════════════════════════════════ Les liens de categorie ═════

   Quatre cases qui relient les pages entre elles. Elles servent la lecture
   -- on cherche un break, on clique sur « Break » -- et elles servent le
   referencement, qui a besoin que les pages se citent les unes les autres. */

.liens-cat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }

.lien-cat {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 22px 24px;
    border: 1px solid var(--trait);
    border-radius: var(--r);
    transition: border-color 0.4s var(--courbe), transform 0.4s var(--courbe),
                background 0.4s var(--courbe);
}

.lien-cat:hover {
    border-color: var(--trait-or);
    transform: translateY(-3px);
    background: rgba(201, 162, 74, 0.045);
}

.lien-cat b { font-size: 15px; font-weight: 400; color: var(--blanc); }
.lien-cat span { font-size: 12.5px; line-height: 1.6; color: var(--gris); }

/* ══════════════════════════════════════════════════ Le formulaire ═════ */

/*  La confirmation de recommandation. Discrete : c est une politesse envers
    le client, pas une banniere. Le nom du concierge est le seul element en
    or de tout le bloc.                                                     */
.note-apporteur {
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid var(--trait-or);
    border-radius: var(--r);
    background: rgba(201, 162, 74, 0.06);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--blanc-2);
}

.note-apporteur b { font-weight: 400; color: var(--or); }

.formulaire { display: flex; flex-direction: column; gap: 18px; }

.f-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.f-champ { display: flex; flex-direction: column; gap: 8px; }

.f-champ label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    text-transform: uppercase;
    color: var(--or);
}

.f-champ input,
.f-champ select,
.f-champ textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--trait);
    border-radius: var(--r-petit);
    background: rgba(244, 242, 238, 0.02);
    color: var(--blanc);
    font-family: var(--ronde);
    font-size: 15px;
    font-weight: 300;
    outline: none;
    color-scheme: dark;
    transition: border-color 0.3s var(--courbe), background 0.3s var(--courbe);
}

.f-champ input:focus,
.f-champ select:focus,
.f-champ textarea:focus {
    border-color: var(--or);
    background: rgba(201, 162, 74, 0.05);
}

.f-champ textarea { min-height: 150px; resize: vertical; line-height: 1.7; }

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

.f-note { font-size: 12.5px; line-height: 1.7; color: var(--gris-2); }

.f-note a {
    color: var(--blanc-2);
    border-bottom: 1px solid var(--trait-or);
    transition: color 0.3s var(--courbe);
}

.f-note a:hover { color: var(--or); }

/* ── Les cases des experiences ───────────────────────────────────────────

   Une case a cocher native est petite, grise et impossible a styler du meme
   trait que le reste. On la garde -- c est elle qui porte le nom, la valeur
   et l accessibilite -- mais on la rend transparente par-dessus sa propre
   etiquette, et c est l etiquette que l on dessine : une pastille, comme les
   filtres de la flotte. Le clavier continue de fonctionner, et le focus est
   visible grace au :focus-visible plus bas.                                */

.f-cases { display: flex; flex-direction: column; gap: 13px; }

.f-cases-titre {
    max-width: 46ch;
    font-size: 10px;
    letter-spacing: 0.26em;
    text-indent: 0.26em;
    text-transform: uppercase;
    line-height: 1.9;
    color: var(--or);
}

/*  La question elle-meme n est pas une etiquette de champ : en capitales
    espacees d or, sur trois lignes, elle se dechiffre au lieu de se lire.
    L etiquette nomme le groupe, la phrase pose la question.                */
.f-cases-question {
    max-width: 52ch;
    margin-top: -3px;
    color: var(--blanc-2);
    font-size: 14.5px;
    line-height: 1.6;
}

.f-cases-liste { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 3px; }

.f-case { position: relative; display: inline-flex; }

/*  La case native couvre toute la pastille : c est elle que l on clique,
    et le curseur reste celui d une commande.                               */
.f-case input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.f-case span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    border: 1px solid var(--trait);
    border-radius: var(--r-pilule);
    background: rgba(244, 242, 238, 0.02);
    color: var(--blanc-2);
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    transition: border-color 0.35s var(--courbe), background 0.35s var(--courbe),
        color 0.35s var(--courbe);
}

/*  Le carre coche. Dessine en CSS plutot qu en SVG : c est un carre et une
    coche, et cela evite une requete de plus pour cinq pastilles.           */
.f-case span::before {
    content: "";
    flex: none;
    width: 15px;
    height: 15px;
    border: 1px solid var(--gris-2);
    border-radius: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
    transition: border-color 0.3s var(--courbe), background-color 0.3s var(--courbe);
}

.f-case:hover span { border-color: var(--trait-or); color: var(--blanc); }

.f-case input:checked + span {
    border-color: var(--trait-or);
    background: rgba(201, 162, 74, 0.09);
    color: var(--blanc);
}

.f-case input:checked + span::before {
    border-color: transparent;
    background-color: var(--or);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23080808' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M2.4 6.2 4.8 8.6 9.6 3.6'/%3E%3C/svg%3E");
}

/*  Le contour de focus est porte par la pastille : la case native etant
    transparente, son propre contour serait invisible.                      */
.f-case input:focus-visible + span {
    outline: 2px solid var(--or);
    outline-offset: 3px;
}

/*  Le message de confirmation reste cache tant que rien n a ete envoye. */
.f-envoye {
    display: none;
    padding: 16px 20px;
    border: 1px solid var(--trait-or);
    border-radius: var(--r);
    background: rgba(201, 162, 74, 0.07);
    font-size: 14px;
    color: var(--blanc);
}

.f-envoye.visible { display: block; }

/* ══════════════════════════════════════════ La fiche d un vehicule ═════ */

.vehicule {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 58px);
    align-items: start;
}

.galerie { display: flex; flex-direction: column; gap: 10px; }

.galerie-vue {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--r-grand);
    background: var(--noir-2);
}

.galerie-vue img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s var(--courbe); }

.vignettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

.vignette {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border: 0;
    padding: 0;
    border-radius: var(--r-petit);
    background: var(--noir-2);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.35s var(--courbe), outline-color 0.35s var(--courbe);
    outline: 1px solid transparent;
    outline-offset: 0;
}

.vignette img { width: 100%; height: 100%; object-fit: cover; }

.vignette:hover { opacity: 0.85; }
.vignette.ici { opacity: 1; outline-color: var(--or); }

.specs {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(24px, 2.8vw, 34px);
    border: 1px solid var(--trait);
    border-radius: var(--r-grand);
    background: var(--noir-2);
}

.specs dl { display: grid; grid-template-columns: auto 1fr; margin: 0; }

.specs dt,
.specs dd {
    padding: 12px 0;
    border-bottom: 1px solid var(--trait);
    font-size: 13.5px;
    line-height: 1.5;
}

.specs dt { color: var(--gris); padding-right: 20px; }
.specs dd { color: var(--blanc); text-align: right; font-variant-numeric: tabular-nums; }

.specs dl > dt:last-of-type,
.specs dl > dd:last-of-type { border-bottom: 0; padding-bottom: 0; }

.specs-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 11px; }

.specs-prix b {
    font-size: clamp(2.2rem, 3.4vw, 2.9rem);
    font-weight: 300;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background: var(--or-degrade);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--or);
    -webkit-text-fill-color: transparent;
}

.specs-prix span {
    font-size: 11px;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    text-transform: uppercase;
    color: var(--gris);
}

/*  Sans tarif affiche, « Sur demande » prend la place du chiffre. A la
    taille d un prix il passe sur deux lignes et chasse la mention sur le
    cote : on le ramene a la taille d un titre, sur une seule ligne.       */
.specs-prix--demande b { font-size: clamp(1.55rem, 2.3vw, 1.95rem); white-space: nowrap; }

/* ══════════════════════════════════════════════ Le texte juridique ═════ */

.legal { max-width: 78ch; }

.legal > * + * { margin-top: 1.1em; }

.legal h2 {
    font-family: var(--ronde);
    font-size: 1.22rem;
    font-weight: 400;
    color: var(--blanc);
    margin-top: 2.4em;
}

.legal p, .legal li { color: var(--gris); font-size: 14.5px; line-height: 1.8; }

.legal ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }

.legal li { display: flex; gap: 12px; }

.legal li::before {
    content: '';
    flex: none;
    width: 5px;
    height: 5px;
    margin-top: 0.72em;
    border-radius: 50%;
    background: var(--trait-or);
}

.legal dt { color: var(--blanc); font-size: 14.5px; margin-top: 1.1em; }
.legal dd { color: var(--gris); font-size: 14.5px; line-height: 1.8; margin: 0; }

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

@media (max-width: 980px) {
    .avec-cote { grid-template-columns: 1fr; }
    .cote { position: static; }
    .carte-cta { max-width: 460px; }
    .vehicule { grid-template-columns: 1fr; }
    .liens-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .faq { grid-template-columns: 1fr; }
    .f-ligne { grid-template-columns: 1fr; }
    .vignettes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .liens-cat { grid-template-columns: 1fr; }
}