/* ==========================================================================
   Pages prestations (villas, yachts, aviation...)
   Elle emprunte à la galerie ses jetons, son fond noir et ses plaques : même
   famille visuelle, aucune duplication de code. Ce fichier ne contient que ce
   qui est propre à la page.

   La signature est l'échelle des trois niveaux d'intervention. Le nombre
   d'alvéoles pleines n'est pas un ornement : il dit la profondeur du geste,
   une alvéole pour l'entretien courant, trois pour le ménage de précision.
   C'est aussi l'axe du tableau de tarifs juste en dessous.
   ========================================================================== */

.vl {
  --noir: #0e0e0e;
  --noir-creuse: #141414;
  --noir-profond: #0a0908;
  --blanc: #fafafa;
  --blanc-mut: rgba(250, 250, 250, 0.72);
  --blanc-fnt: rgba(250, 250, 250, 0.44);
  --or: #c9a34a;
  --or-clair: #e6c163;
  --filet: rgba(250, 250, 250, 0.12);
  --filet-fort: rgba(250, 250, 250, 0.26);
  --gut: clamp(22px, 5vw, 76px);
  --ez: cubic-bezier(.22, .61, .36, 1);

  background: var(--noir);
  color: var(--blanc);
}

/* L'alvéole, motif de la maison. Reprise partout sur la page. */
.vl-alv {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ==========================================================================
   Ouverture
   ========================================================================== */

.vl-hero { padding-block: clamp(112px, 17vh, 200px) clamp(38px, 6vh, 64px); }

.vl-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: clamp(30px, 4.5vh, 46px);
}

.vl .btn--gold {
  background: var(--or);
  border-color: var(--or);
  color: #0a0908;
}

.vl .btn--ol {
  background: transparent;
  border-color: var(--filet-fort);
  color: var(--blanc);
}

.vl .btn--ol:hover { border-color: var(--or); color: var(--or); }

/* ==========================================================================
   Sections
   ========================================================================== */

.vl-sec { padding-block: clamp(56px, 9vh, 116px) 0; scroll-margin-top: 80px; }
.vl-sec--creuse { margin-top: clamp(56px, 9vh, 116px); background: var(--noir-creuse); padding-bottom: clamp(56px, 9vh, 116px); }

.vl-tete {
  max-width: 48ch;
  padding-bottom: clamp(34px, 5vh, 58px);
}

/* ==========================================================================
   Le soin porte sur la matière
   Deux colonnes : la liste des matières à gauche, une plaque à droite.
   ========================================================================== */

.vl-soin { display: grid; gap: clamp(36px, 5vh, 64px); }

.soin-l { display: grid; gap: 0; }

.soin-i {
  position: relative;
  padding: clamp(20px, 2.6vh, 28px) 0 clamp(20px, 2.6vh, 28px) 34px;
  border-top: 1px solid var(--filet);
}

.soin-i:last-child { border-bottom: 1px solid var(--filet); }

.soin-i::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(clamp(20px, 2.6vh, 28px) + 5px);
  width: 11px;
  height: 12px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.soin-n {
  display: block;
  font-family: var(--font-h);
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--blanc);
}

.soin-p {
  margin-top: 9px;
  font-family: var(--font-b);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

/* ==========================================================================
   Les trois niveaux
   ========================================================================== */

.vl-niv { display: grid; gap: clamp(20px, 2.4vw, 30px); }

.niv {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3.2vw, 38px) clamp(22px, 2.6vw, 32px) clamp(26px, 3.2vw, 34px);
  background: var(--noir-profond);
  border: 1px solid var(--filet);
  transition: border-color .5s var(--ez), transform .6s var(--ez);
}

.niv:hover { border-color: var(--filet-fort); transform: translate3d(0, -4px, 0); }

/* Le niveau le plus élevé porte un filet d'or en tête : c'est le seul
   marquage hiérarchique de la page. */
.niv--haut::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: linear-gradient(to right, var(--or), var(--or-clair));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s var(--ez) .3s;
}

.niv--haut.on::before { transform: scaleX(1); }

/* ---- L'échelle d'alvéoles ------------------------------------------------ */

.niv-ech {
  display: flex;
  gap: 7px;
  margin-bottom: 22px;
}

.niv-ech i {
  width: 13px;
  height: 15px;
  background: var(--filet-fort);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transform: scale(.4);
  opacity: 0;
  transition: transform .5s var(--ez), opacity .5s var(--ez);
}

.niv-ech i.plein { background: var(--or); }

.niv.on .niv-ech i { transform: scale(1); opacity: 1; }
.niv.on .niv-ech i:nth-child(2) { transition-delay: .1s; }
.niv.on .niv-ech i:nth-child(3) { transition-delay: .2s; }

.niv-nom {
  font-family: var(--font-h);
  font-size: clamp(1.28rem, 1.9vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--blanc);
}

.niv-def {
  margin-top: 12px;
  font-family: var(--font-b);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--blanc-mut);
}

.niv-l {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--filet);
  display: grid;
  gap: 11px;
}

.niv-l li {
  position: relative;
  padding-left: 17px;
  font-family: var(--font-b);
  font-size: 0.86rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--blanc-mut);
  list-style: none;
}

.niv-l li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 7px;
  background: var(--filet-fort);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.niv-pied {
  margin-top: auto;
  padding-top: 24px;
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.niv--haut .niv-pied { color: var(--or); }

/* ==========================================================================
   Tarifs indicatifs
   Un vrai tableau : deux colonnes de montants qui se comparent ligne à ligne,
   c'est exactement ce pour quoi la balise existe.
   ========================================================================== */

.vl-tar { width: 100%; margin-top: clamp(8px, 2vh, 18px); border-collapse: collapse; }

.vl-tar-context {
  margin: clamp(24px, 3vh, 34px) 0 0;
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.vl-tar th,
.vl-tar td { padding: 18px 16px; text-align: left; border-bottom: 1px solid var(--filet); }
.vl-tar th:first-child,
.vl-tar td:first-child { padding-left: 0; }
.vl-tar th:last-child,
.vl-tar td:last-child { padding-right: 0; }

.vl-tar thead th {
  padding-top: 0;
  font-family: var(--font-b);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
  white-space: nowrap;
}

.vl-tar tbody th {
  font-family: var(--font-b);
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--blanc);
}

/* Le premier palier de prix est détaillé sans sortir du tableau : le bouton
   reste une vraie balise summary, donc utilisable au clavier comme à l'écran. */
.vl-tar-accordion > summary {
  position: relative;
  display: inline-block;
  padding-right: 24px;
  cursor: pointer;
  list-style: none;
}

.vl-tar-accordion > summary::-webkit-details-marker { display: none; }

.vl-tar-accordion > summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 5px;
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform .3s var(--ez);
}

.vl-tar-accordion[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }

.vl-tar-accordion > summary:hover { color: var(--or); }
.vl-tar-accordion > summary:focus-visible {
  outline: 1px solid var(--or);
  outline-offset: 4px;
}

.vl-tar-accordion__content {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 12px 0 2px;
  border-top: 1px solid var(--filet);
}

.vl-tar-accordion__content p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--blanc-mut);
  font-size: 0.82rem;
  font-weight: 400;
}

.vl-tar-accordion__content .vl-tar-accordion__label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-b);
  font-size: 0.61rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.vl-tar-accordion__content strong {
  color: var(--or);
  font-family: var(--font-h);
  font-size: 0.94rem;
  font-weight: 400;
  white-space: nowrap;
}

.vl-tar td {
  font-family: var(--font-h);
  font-size: clamp(1.02rem, 1.4vw, 1.2rem);
  font-weight: 400;
  color: var(--blanc-mut);
  white-space: nowrap;
}

.tarif-fourchette { display: block; color: var(--blanc); }

.vl-tar tbody tr { transition: background-color .4s var(--ez); }
.vl-tar tbody tr:hover { background: rgba(250, 250, 250, 0.03); }
.vl-tar tbody tr:hover td { color: var(--blanc); }

.vl-tar .t-devis {
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or);
}

.vl-tar-notes { margin-top: clamp(24px, 3.5vh, 36px); display: grid; gap: 12px; max-width: 62ch; }

.vl-note {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-b);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--blanc-mut);
}

.vl-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 9px;
  background: var(--or);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ==========================================================================
   Le résultat, et le renvoi vers la galerie
   ========================================================================== */

.vl-plaques { display: grid; gap: clamp(40px, 6vh, 78px); }

.vl-lien {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: clamp(34px, 5vh, 54px);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--filet-fort);
  font-family: var(--font-b);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blanc);
  transition: color .4s var(--ez), border-color .4s var(--ez);
}

.vl-lien:hover { color: var(--or); border-color: var(--or); }

.vl-lien span { transition: transform .4s var(--ez); }
.vl-lien:hover span { transform: translate3d(5px, 0, 0); }

/* ==========================================================================
   Questions fréquentes
   Balise details natif : ouverture, clavier et accessibilité sans une ligne
   de script.
   ========================================================================== */

.vl-faq { display: grid; gap: 0; max-width: 88ch; }

.vlq {
  border-top: 1px solid var(--filet);
}

.vl-faq .vlq:last-child { border-bottom: 1px solid var(--filet); }

.vlq > summary {
  position: relative;
  display: block;
  padding: clamp(19px, 2.4vh, 25px) 44px clamp(19px, 2.4vh, 25px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-h);
  font-size: clamp(1rem, 1.4vw, 1.14rem);
  font-weight: 400;
  line-height: 1.45;
  color: var(--blanc);
  transition: color .35s var(--ez);
}

.vlq > summary::-webkit-details-marker { display: none; }
.vlq > summary:hover { color: var(--or); }

.vlq > summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -7px;
  border-right: 1.5px solid var(--or);
  border-bottom: 1.5px solid var(--or);
  transform: rotate(45deg);
  transition: transform .4s var(--ez);
}

.vlq[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }

.vlq-r {
  padding: 0 44px clamp(22px, 3vh, 28px) 0;
  font-family: var(--font-b);
  font-size: 0.94rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--blanc-mut);
}

/* ==========================================================================
   Dernier appel
   ========================================================================== */

.vl-cta { margin-top: clamp(64px, 10vh, 130px); background: var(--noir-profond); padding-block: clamp(84px, 13vh, 160px); }

.vl-cta-lbl {
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.vl-cta h2 {
  max-width: 17ch;
  margin-top: 22px;
  font-family: var(--font-h);
  font-size: clamp(2rem, 4.8vw, 3.5rem) !important;
  font-weight: 400 !important;
  line-height: 1.07;
  letter-spacing: -0.015em;
  text-transform: none !important;
  color: var(--blanc);
}

.vl-cta h2 em { font-style: italic; color: var(--or); }

.vl-cta-p {
  max-width: 48ch;
  margin-top: 22px;
  font-family: var(--font-b);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--blanc-mut);
}

/* ==========================================================================
   900 px : les grilles s'ouvrent
   ========================================================================== */

@media (min-width: 900px) {
  .vl-soin { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; gap: clamp(40px, 5vw, 72px); }
  .vl-niv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vl-tar thead th:not(:first-child),
  .vl-tar tbody td { text-align: right; }
}

/* ==========================================================================
   720 px : le tableau se replie en fiches
   Chaque ligne devient un bloc, et l'intitulé de colonne revient devant le
   montant par data-l : sans ça, deux nombres nus ne veulent plus rien dire.
   ========================================================================== */

@media (max-width: 719px) {
  .vl-tar thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vl-tar tbody th,
  .vl-tar tbody td { display: block; padding: 0; border: 0; }

  .vl-tar tbody tr {
    display: block;
    padding: 18px 0;
    border-bottom: 1px solid var(--filet);
  }

  .vl-tar tbody th { margin-bottom: 12px; }

  .vl-tar-accordion { width: 100%; }
  .vl-tar-accordion__content p { align-items: baseline; }

  /* L'intitule de colonne et le montant tiennent sur une ligne quand ils le
     peuvent, et le montant passe dessous quand l'ecran est trop etroit. Sans
     ce retour a la ligne, un libelle long comme « contrat hebdomadaire »
     suivi de « 300 - 450 EUR / mois » elargit le tableau au-dela de l'ecran
     et fait deborder toute la page. */
  .vl-tar tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 16px;
    padding-top: 7px;
  }

  .vl-tar tbody td::before {
    content: attr(data-l);
    flex: 0 1 auto;
    min-width: 0;
    font-family: var(--font-b);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: normal;
    color: var(--blanc-fnt);
  }

  .vl-tar tbody td[colspan] { justify-content: flex-start; }
  .vl-tar tbody td[colspan]::before { content: none; }
}

/* ==========================================================================
   Réduction des animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .niv, .niv:hover { transform: none; transition: none; }
  .niv-ech i { transform: none; opacity: 1; transition: none; }
  .niv--haut::before { transform: scaleX(1); transition: none; }
  .vl-lien span { transition: none; }
}

/* Le titre de tableau, lu par les lecteurs d'écran seulement. */
.vl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}