/* ============================================================================
   LE CHOIX DU VEHICULE — la feuille partagee par l'accueil et la reservation
   ----------------------------------------------------------------------------
   Une seule source pour un composant present sur deux pages : le premier essai
   avait le CSS ecrit deux fois, et deux copies d'une meme regle finissent
   toujours par diverger sur l'une des deux.

   UNE COLONNE, A TOUTES LES LARGEURS. Pas de grille qui repasse de quatre a une
   colonne : la ligne pleine largeur tient de 320 px a 2000 px sans qu'aucun
   palier n'intervienne. C'est ce qui rend ce bloc conforme a l'ordre permanent
   du 12/08 — responsive, jamais adaptive — sans une seule media query.

   LES PRIX SONT ALIGNES A DROITE, sur une colonne de largeur fixe et en chiffres
   tabulaires. C'est tout l'interet de la liste : quatre montants qui partagent
   la meme verticale se comparent d'un coup d'oeil.
   ========================================================================== */

.gammes{list-style:none;display:flex;flex-direction:column;gap:.3rem;
        padding:0;margin:.8rem 0 0}

.gammes button{
  width:100%;display:flex;align-items:center;gap:clamp(.6rem,1.6vw,1.05rem);
  text-align:left;cursor:pointer;font:inherit;
  color:var(--gamme-encre,rgba(253,250,247,.92));
  background:transparent;border:1px solid transparent;
  border-radius:12px;padding:clamp(.5rem,1.1vw,.72rem) clamp(.55rem,1.3vw,.9rem);
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.gammes li + li{border-top:1px solid var(--gamme-trait,rgba(253,250,247,.1))}
.gammes button:hover{background:var(--gamme-survol,rgba(253,250,247,.05))}
.gammes button:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* LA LIGNE RETENUE. Un filet or a gauche plutot qu'un cadre complet : le cadre
   decoupait la ligne du reste et cassait l'alignement des prix, qui est
   justement ce qu'on veut donner a lire. */
.gammes button[aria-checked="true"]{
  background:var(--gamme-actif,rgba(203,178,106,.12));
  border-color:var(--or);color:var(--or-clair,#F8EF9D);
  box-shadow:inset 3px 0 0 var(--or);
}

/* la silhouette : elle occupe une largeur FIXE, sinon les noms ne s'alignent pas
   d'une ligne a l'autre */
.gammes .silh{width:clamp(46px,7vw,62px);height:auto;flex:none;
              color:currentColor;opacity:.62}
.gammes button[aria-checked="true"] .silh{opacity:1}

.gammes .txt{display:flex;flex-direction:column;gap:.12rem;min-width:0;flex:1}
.gammes .nom{font-size:clamp(.92rem,1.15vw,1.06rem);font-weight:600;
             letter-spacing:-.008em;line-height:1.15}
.gammes .det{font-size:clamp(.68rem,.85vw,.76rem);opacity:.62;line-height:1.3}

/* la colonne des prix : largeur reservee pour que les montants restent alignes
   meme quand l'un d'eux est « sur demande » */
.gammes .tarif{display:flex;flex-direction:column;align-items:flex-end;gap:.1rem;
               flex:none;min-width:clamp(4.6rem,9vw,6rem)}
.gammes .p{font-variant-numeric:tabular-nums;line-height:1;
           font-size:clamp(1.05rem,1.5vw,1.3rem);font-weight:600;
           letter-spacing:-.03em;white-space:nowrap}
.gammes .p .eur{font-size:.62em;font-weight:500;margin-left:.12em;opacity:.7}
/* « sur demande » n'est pas un prix : il n'en prend pas la taille */
.gammes .p.demande{font-size:clamp(.72rem,.92vw,.8rem);font-weight:500;
                   letter-spacing:0;opacity:.72}
.gammes .sous{font-size:clamp(.58rem,.72vw,.65rem);letter-spacing:.09em;
              text-transform:uppercase;opacity:.5;white-space:nowrap}
.gammes button[aria-checked="true"] .sous{opacity:.75}

@media (prefers-reduced-motion: reduce){ .gammes button{transition:none} }