/* ==========================================================================
   Aperture One — css/tarifs.css
   Pages Tarifs et Devis. Chargée APRÈS css/style.css et ne fait que
   réutiliser ses jetons (couleurs, polices, rayon, bouton, carte).
   Aucune valeur de couleur ni de police en dur ici.
   ========================================================================== */

.menu a[aria-current="page"]{ color: var(--blanc); }

/* --------------------------------------------------------------------------
   En-tête de page
   -------------------------------------------------------------------------- */
.t-tete{
  padding-top: clamp(120px, 14vw, 180px);
  padding-bottom: clamp(30px, 4vw, 48px);
}
.t-tete h1{
  font-family: var(--f-t);
  font-variation-settings: var(--t-dessin);
  font-weight: var(--t-graisse);
  /* Unbounded est large : on plafonne, sinon le titre prend trois lignes */
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: 0;
  color: var(--accent);
  margin: 0 0 18px;
}
.t-tete h1 .fort{ font-weight: var(--t-fort); }
.t-tete .lead{ margin: 0; }

.t-noscript{
  padding: 18px 20px; margin-bottom: 40px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--carte); color: var(--arg-poli);
}


/* --------------------------------------------------------------------------
   Les trois cartes
   -------------------------------------------------------------------------- */
.t-cartes{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  align-items: stretch;
}
@media (min-width: 940px){
  .t-cartes{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}

.t-carte{
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 30px);
}
.t-carte__badges{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
/* Une pastille par carte au plus, et parfois aucune (06/11/2026). Sur
   ordinateur, les trois cartes sont côte à côte : la ligne garde la
   hauteur d'une pastille même vide, pour que les noms et les prix restent
   alignés d'une carte à l'autre. Sur téléphone, une ligne vide se replie. */
@media (min-width: 940px){ .t-carte__badges{ min-height: 33px; } }
@media (max-width: 939px){ .t-carte__badges:empty{ display: none; } }
.t-puce{
  display: inline-block; padding: 5px 11px;
  border: 1px solid var(--trait); border-radius: 999px;
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--arg-brosse); white-space: nowrap;
}
.t-puce--avant{ border-color: transparent; background: var(--metal); color: var(--fond); }
/* le conseil : visible, mais ce n'est pas un verrou. Il se lit, il ne crie pas. */
/* En minuscules depuis le 06/11/2026 : en capitales espacées, « CONSEILLÉ
   POUR UN MARIAGE » ne tenait pas sur une ligne dans une carte de
   ordinateur moyen, et criait plus qu'il ne conseillait. */
.t-puce--conseil{
  border-color: var(--accent-2); color: var(--accent-2);
  font-size: 12.5px; letter-spacing: .02em; text-transform: none;
  white-space: normal;
}
.t-carte.est-conseillee{ border-color: var(--accent-2); }

/* --- ÉTINCELLES FROIDES OFFERTES, carte Signature en mariage (06/11/2026)
   Une seule ligne de plus dans ce que le pack comprend, avec sa réserve
   en dessous. L'encadré en capitales qui la doublait en haut de la carte
   a été retiré le même jour : avec les pastilles, la carte en avait trop.
   La mise en avant de l'offre est dans le ruban, au-dessus des cartes.
   -------------------------------------------------------------------------- */
.t-carte--etincelles{ border-color: var(--accent-2); }

/* la ligne ajoutée au contenu du pack : sa puce est un éclat, pas le tiret
   des autres lignes, pour qu'on voie tout de suite que c'est le cadeau */
.t-carte__inclus li.est-offert{ color: var(--texte); }
.t-carte__inclus li.est-offert::before{
  content: "✦"; color: var(--accent-2);
}
.t-carte__reserve{
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--trait);
  font-size: 12px; line-height: 1.5; color: var(--texte-2);
}
.opt__offert{ font-size: 14px; font-weight: 500; color: var(--accent); }
.t-conseil__note{
  margin: clamp(18px, 2.4vw, 26px) 0 0; max-width: 72ch;
  font-size: 13.5px; line-height: 1.6; color: var(--texte-2);
}

.t-carte__nom{
  margin: 0 0 12px;
  font-family: var(--f-t); font-variation-settings: var(--t-dessin);
  font-weight: var(--t-graisse); font-size: clamp(28px, 3vw, 36px);
  line-height: 1.08; letter-spacing: 0; color: var(--blanc);
}
.t-carte__prix{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
  margin: 0 0 4px;
}
/* LE PRIX. Archivo 300, chiffres alignés et de même largeur, espace
   insécable entre les milliers. L'euro est écrit à part, deux fois plus
   petit et en Brume : c'est le nombre qu'on doit lire, pas le symbole.
   Le prix reste blanc, jamais coloré : c'est le bouton qui attire l'œil. */
.t-carte__montant{
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--f-p);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: 300;
  font-size: clamp(34px, 3.6vw, 40px); line-height: 1; letter-spacing: 0;
  color: var(--accent); white-space: nowrap;
}
.t-carte__euro{ font-size: .5em; font-weight: 400; color: var(--texte-2); }

/* sous le prix, en petit : le prix plein barré et le transport */
.t-carte__sous{
  margin: 8px 0 0;
  font-family: var(--f-c);
  font-size: 13px; line-height: 1.5; color: var(--texte-2);
}
.t-carte__sous s{
  font-variant-numeric: tabular-nums lining-nums;
  text-decoration-thickness: 1px;
}
/* le pourcentage de l'offre, collé au prix : contour Glace, discret */
.t-carte__pct{
  align-self: center;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--accent-2);
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 12.5px; line-height: 1.4; color: var(--accent-2); white-space: nowrap;
}
.t-carte__duree{
  margin: 0 0 20px; padding-bottom: 20px;
  border-bottom: 1px solid var(--trait);
  font-size: 14px; color: var(--arg-brosse);
}

.t-carte__inclus{ list-style: none; margin: 0; padding: 0; }
.t-carte__inclus li{
  position: relative; margin: 0; padding: 7px 0 7px 20px;
  font-size: 14.5px; line-height: 1.55; color: var(--arg-poli);
}
.t-carte__inclus li::before{
  content: ""; position: absolute; left: 0; top: 15px;
  width: 9px; height: 1px; background: var(--arg-ombre);
}
.t-carte__pour{
  margin: 18px 0 22px; padding-top: 16px;
  border-top: 1px solid var(--trait);
  font-size: 13.5px; line-height: 1.5; color: var(--arg-brosse);
}
.t-carte__pour-t{
  display: block; margin-bottom: 4px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--arg-brosse);
}
.t-carte .t-carte__btn{ display: block; width: 100%; margin-top: auto; }

.t-mention{
  margin: clamp(18px, 2.2vw, 26px) 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--arg-brosse);
}

/* --------------------------------------------------------------------------
   Les trois mini plans de feu
   -------------------------------------------------------------------------- */
.t-plans{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
}
@media (min-width: 760px){ .t-plans{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.t-plan{
  margin: 0; padding: 18px 18px 20px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--carte);
}
.t-plan__visuel{ display: block; }
.t-schema{
  display: block; width: 100%; max-width: 320px; height: auto;
  margin-inline: auto; overflow: hidden; color: var(--arg-poli);
}
.t-schema *{ vector-effect: non-scaling-stroke; }
.t-schema__faisceaux{ fill: currentColor; fill-opacity: .13; stroke: none; }
.t-schema__traits{ fill: none; stroke: currentColor; stroke-width: .8; }
.t-schema__voiles{ fill: none; stroke: currentColor; stroke-width: .8; stroke-opacity: .55; }
.t-plan:nth-child(3) .t-schema{ color: var(--blanc); }

.t-plan__legende{ margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--arg-brosse); }
.t-plan__legende b{ display: block; font-weight: 500; font-size: 15px; color: var(--blanc); margin-bottom: 3px; }
.t-plans__ecart{
  margin: clamp(20px, 2.6vw, 30px) 0 0; padding-left: 16px;
  border-left: 2px solid var(--accent-2);
  font-size: clamp(15px, 1.7vw, 18px); line-height: 1.5; color: var(--blanc);
}

/* --------------------------------------------------------------------------
   Transport : texte à gauche, anneaux à droite
   -------------------------------------------------------------------------- */
.t-transport{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 900px){
  .t-transport{ grid-template-columns: minmax(0, 1fr) 340px; }
}

.t-zones{ list-style: none; margin: 0 0 20px; padding: 0; }
.t-zones li{
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 18px; padding: 12px 0;
  border-bottom: 1px solid var(--trait);
  transition: color .25s ease;
}
.t-zones li:last-child{ border-bottom: 0; }
.t-zone__nom{ flex: 1 1 220px; font-size: 14.5px; line-height: 1.5; color: var(--arg-poli); }
.t-zone__prix{
  font-family: var(--f-p); font-variant-numeric: tabular-nums; font-weight: 300;
  font-size: 16px; color: var(--blanc); white-space: nowrap;
}
/* la zone qui répond au code postal saisi */
.t-zones li.is-active{ background: rgba(var(--halo), .05); }
.t-zones li.is-active .t-zone__nom{ color: var(--blanc); }

.t-transport__phrase{
  margin: 0 0 26px; font-size: 15px; line-height: 1.65; color: var(--arg-brosse); max-width: 56ch;
}

.t-cp{ display: block; }
.t-cp__label{
  display: block; margin-bottom: 10px;
  font-size: 12px; letter-spacing: var(--t-caps); text-transform: uppercase; color: var(--arg-brosse);
}
.t-cp__ligne{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.t-cp__champ{
  width: 140px; padding: 13px 16px;
  background: var(--carte); border: 1px solid var(--arg-ombre); border-radius: var(--r-s);
  color: var(--blanc);
  font-family: var(--f-p); font-variant-numeric: tabular-nums; font-size: 17px; letter-spacing: .06em;
}
.t-cp__champ::placeholder{ color: var(--arg-ombre); }
.t-cp__champ:focus-visible{ outline: 1px solid var(--arg-poli); outline-offset: 2px; }
.t-cp__out{
  font-family: var(--f-p); font-variant-numeric: tabular-nums;
  font-size: 17px; color: var(--arg-brosse);
}
.t-cp__out.is-inclus{ color: var(--blanc); }
.t-cp__out.is-sup{ color: var(--blanc); }
.t-cp__out:empty{ display: none; }

/* anneaux concentriques : Paris au centre */
.t-anneaux__svg{ display: block; width: 100%; max-width: 340px; height: auto; margin-inline: auto; }
.t-anneau circle{ fill: none; stroke: var(--trait); stroke-width: 1; }
.t-anneau text{
  fill: var(--arg-brosse); font-family: var(--f-c); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.t-anneau.is-active circle{ stroke: var(--arg-poli); }
.t-anneau.is-active text{ fill: var(--blanc); }
.t-anneaux__centre{ fill: var(--arg-poli); }

/* --------------------------------------------------------------------------
   Bande heures et options
   -------------------------------------------------------------------------- */
.t-bande{
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--carte); overflow: hidden;
}
@media (min-width: 720px){ .t-bande{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px){ .t-bande{ grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.t-bande__l{
  padding: 20px 22px;
  border-bottom: 1px solid var(--trait);
}
@media (min-width: 1100px){
  .t-bande__l{ border-bottom: 0; border-right: 1px solid var(--trait); }
}
.t-bande__l:last-child{ border-bottom: 0; border-right: 0; }
.t-bande__nom{ margin: 0 0 6px; font-weight: 500; font-size: 15px; color: var(--blanc); }
.t-bande__prix{
  margin: 0 0 8px;
  font-family: var(--f-p); font-variant-numeric: tabular-nums; font-weight: 300;
  font-size: 24px; line-height: 1; color: var(--blanc);
}
.t-bande__note{ margin: 0; font-size: 13px; line-height: 1.5; color: var(--arg-brosse); }
.t-bande + .t-bande__note{ margin-top: 20px; font-size: 14.5px; color: var(--arg-poli); max-width: 68ch; }

.t-fin{ max-width: 56ch; }
.t-fin .lead{ margin-bottom: clamp(26px, 3vw, 36px); }

/* ==========================================================================
   PAGE DEVIS — trois étapes, récapitulatif qui suit
   ========================================================================== */
.d-page{ padding-top: clamp(110px, 13vw, 170px); padding-bottom: clamp(90px, 10vw, 150px); }
.d-page__titre{
  margin: 0 0 14px;
  font-family: var(--f-t); font-variation-settings: var(--t-dessin); font-weight: var(--t-graisse);
  font-size: clamp(28px, 5vw, 52px); line-height: 1.1; letter-spacing: 0; color: var(--blanc);
}
.d-page__titre .fort{ font-weight: var(--t-fort); }
/* Les titres d'étape reçoivent le focus par programme, à chaque passage
   d'une étape à l'autre : c'est ce qui dit aux lecteurs d'écran où l'on en
   est. Mais ce sont des titres, jamais atteints par la touche Tab, donc
   leur dessiner un cadre n'informe personne et saute aux yeux. On l'enlève,
   le focus lui-même reste. */
.d-page__titre:focus, .d-page__titre:focus-visible,
.d-etape__titre:focus, .d-etape__titre:focus-visible{ outline: none; }
.d-page .lead{ margin: 0 0 clamp(30px, 4vw, 44px); }

.d-grille{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); }
@media (min-width: 1000px){
  .d-grille{ grid-template-columns: minmax(0, 1fr) 330px; align-items: start; }
  .d-recap{ position: sticky; top: 96px; }
}

/* --- barre de progression --------------------------------------------- */
.d-pas{ display: flex; gap: 8px; margin: 0 0 clamp(26px, 3.4vw, 38px); padding: 0; list-style: none; }
.d-pas li{ flex: 1 1 0; min-width: 0; }
.d-pas__barre{
  display: block; height: 2px; margin-bottom: 10px;
  background: var(--trait); border-radius: 2px; overflow: hidden;
}
.d-pas__barre i{
  display: block; height: 100%; width: 0; background: var(--metal);
  transition: width .45s cubic-bezier(.2, .7, .3, 1);
}
.d-pas li.is-fait .d-pas__barre i,
.d-pas li.is-la .d-pas__barre i{ width: 100%; }
.d-pas__nom{
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--arg-ombre); line-height: 1.3;
}
.d-pas li.is-la .d-pas__nom{ color: var(--blanc); }
.d-pas li.is-fait .d-pas__nom{ color: var(--arg-brosse); }
.d-pas__num{ font-variant-numeric: tabular-nums; }

/* --- étapes ------------------------------------------------------------ */
.d-etape[hidden]{ display: none; }
.d-etape__titre{
  margin: 0 0 6px;
  font-family: var(--f-t); font-variation-settings: var(--t-dessin); font-weight: var(--t-graisse);
  font-size: clamp(22px, 2.8vw, 30px); line-height: 1.15; color: var(--blanc);
}
.d-etape__aide{ margin: 0 0 clamp(22px, 3vw, 32px); font-size: 15px; color: var(--arg-brosse); }

.d-champ{ margin: 0 0 clamp(22px, 2.8vw, 30px); }
.d-champ__t{
  display: block; margin-bottom: 12px;
  font-size: 12px; letter-spacing: var(--t-caps); text-transform: uppercase; color: var(--arg-brosse);
}
.d-champ__t i{ font-style: normal; color: var(--arg-poli); }

/* gros boutons de choix (type de soirée, invités) */
.d-choix{ display: flex; flex-wrap: wrap; gap: 10px; }
.d-choix label{ position: relative; flex: 1 1 150px; cursor: pointer; }
.d-choix input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.d-choix span{
  display: flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 12px 16px; text-align: center;
  border: 1px solid var(--trait); border-radius: var(--r-s);
  background: var(--carte);
  font-size: 15px; line-height: 1.3; color: var(--arg-poli);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.d-choix label:hover span{ border-color: var(--arg-ombre); color: var(--blanc); }
.d-choix input:checked + span{
  border-color: var(--arg-poli); background: rgba(var(--halo), .06); color: var(--blanc);
  box-shadow: inset 0 0 0 1px var(--arg-poli);
}
.d-choix input:focus-visible + span{ outline: 1px solid var(--arg-poli); outline-offset: 3px; }

/* champs texte */
.d-saisie{
  width: 100%; padding: 14px 16px;
  background: var(--carte); border: 1px solid var(--arg-ombre); border-radius: var(--r-s);
  color: var(--blanc); font-family: var(--f-c); font-size: 16px; line-height: 1.4;
}
.d-saisie::placeholder{ color: var(--arg-ombre); }
.d-saisie:focus-visible{ outline: 1px solid var(--arg-poli); outline-offset: 2px; }
textarea.d-saisie{ min-height: 120px; resize: vertical; }
.d-champ.is-ko .d-saisie{ border-color: var(--blanc); }
.d-err{ display: block; margin-top: 8px; font-size: 13.5px; color: var(--blanc); }
.d-deux{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.4vw, 24px); }
@media (min-width: 620px){ .d-deux{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.d-deux .d-champ{ margin-bottom: 0; }

/* réponse transport sous le code postal */
.d-cp-rep{
  display: inline-block; margin-top: 10px; padding: 5px 12px;
  border: 1px solid var(--trait); border-radius: 999px;
  font-size: 13px; color: var(--arg-poli);
}
.d-cp-rep:empty{ display: none; }
.d-cp-rep.is-inclus{ border-color: var(--arg-ombre); color: var(--blanc); }

/* cartes de pack dans le devis */
.d-packs{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px){ .d-packs{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.d-pack{ position: relative; cursor: pointer; }
.d-pack input{ position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.d-pack__corps{
  display: flex; flex-direction: column; gap: 5px; height: 100%;
  padding: 18px 18px 20px;
  border: 1px solid var(--trait); border-radius: var(--r);
  background: var(--carte);
  transition: border-color .2s ease, background-color .2s ease;
}
.d-pack:hover .d-pack__corps{ border-color: var(--arg-ombre); }
.d-pack input:checked + .d-pack__corps{
  border-color: var(--arg-poli); background: rgba(var(--halo), .06);
  box-shadow: inset 0 0 0 1px var(--arg-poli);
}
.d-pack input:focus-visible + .d-pack__corps{ outline: 1px solid var(--arg-poli); outline-offset: 3px; }
.d-pack__conseil{
  align-self: flex-start; margin-bottom: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--metal); color: var(--fond);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.d-pack__nom{ font-weight: 500; font-size: 17px; color: var(--blanc); }
.d-pack__prix{
  font-family: var(--f-p); font-variant-numeric: tabular-nums; font-weight: 300;
  font-size: 26px; line-height: 1.1; color: var(--blanc);
}
.d-pack__prix s{ font-size: 15px; color: var(--arg-brosse); text-decoration-thickness: 1px; margin-right: 6px; }
.d-pack__duree{ font-size: 13px; color: var(--arg-brosse); }

/* interrupteurs d'options */
.d-inters{ display: flex; flex-direction: column; gap: 10px; }
.d-inter{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 18px; cursor: pointer;
  border: 1px solid var(--trait); border-radius: var(--r-s); background: var(--carte);
}
.d-inter input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.d-inter__nom{ font-size: 15px; color: var(--arg-poli); }
.d-inter__prix{
  margin-left: auto; font-family: var(--f-p); font-variant-numeric: tabular-nums;
  font-size: 15px; color: var(--blanc); white-space: nowrap;
}
.d-inter__b{
  position: relative; flex: 0 0 auto; width: 40px; height: 22px;
  border: 1px solid var(--arg-ombre); border-radius: 999px; background: transparent;
  transition: background-color .2s ease, border-color .2s ease;
}
.d-inter__b::after{
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: var(--arg-ombre);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), background-color .2s ease;
}
.d-inter input:checked + .d-inter__b{ border-color: var(--arg-poli); }
.d-inter input:checked + .d-inter__b::after{ transform: translateX(18px); background: var(--blanc); }
.d-inter input:focus-visible + .d-inter__b{ outline: 1px solid var(--arg-poli); outline-offset: 3px; }
.d-inter:has(input:checked){ border-color: var(--arg-ombre); }

/* case simple */
.d-case{ display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; color: var(--arg-poli); }

/* L'option DJ : le prix à côté du nom, la phrase en dessous, et la case
   grisée quand le client vient avec sa propre sono. Même gris que les
   mentions secondaires du devis, pas une couleur de plus. */
.d-case__prix{
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  color: var(--blanc); white-space: nowrap;
}
.d-case__note{ display: inline-block; margin-top: 3px; font-size: 14px; color: var(--arg-brosse); }

/* Ce qui est COMPRIS dans le pack, donc sans case à cocher : il n'y a rien
   à décider ni à payer. Un filet à gauche le distingue des options, et
   « Offert » prend le blanc, comme un prix. */
.d-offert{
  padding-left: 16px;
  border-left: 1px solid var(--accent-2);
}
.d-offert__l{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin: 0;
}
.d-offert__l b{ font-weight: 500; color: var(--texte); }
.d-offert__prix{
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  color: var(--blanc); white-space: nowrap;
}
/* la réserve se cale sous le texte, pas en retrait de case : ce bloc n'en a pas */
.d-offert .d-champ__aide{ margin-left: 0; font-size: 12.5px; }
/* le petit détail sous le nom d'une option à cocher */
.d-inter__x{ display: block; margin-top: 2px; font-size: 12.5px; color: var(--texte-2); }

/* --- page d'autorisation du lieu (autorisation.html) ---------------------
   Elle réutilise les champs du devis. Seuls les fieldset ont besoin d'être
   habillés : sans ça, le navigateur dessine sa bordure grise par défaut et
   la légende vient la trouer. Classe à part, « aut-bloc », pour ne rien
   emprunter aux étapes du devis qui, elles, sont pilotées par du JS.
   -------------------------------------------------------------------------- */
.aut-bloc{
  margin: 0 0 clamp(26px, 3.2vw, 38px); padding: 0 0 clamp(22px, 2.6vw, 30px);
  border: 0; border-bottom: 1px solid var(--trait);
}
.aut-bloc:last-of-type{ border-bottom: 0; }

/* --- Espace lieux de réception (autorisation.html, 07/11/2026) ------------
   La page explique la brume et les étincelles au responsable du lieu,
   puis recueille son accord. Deux cartes pour les deux effets, une ligne
   sur la prestation, puis le formulaire. Mêmes champs que le devis. */
.page h1.lieux__titre{
  margin: 0 0 18px; margin-right: 0;
  font-size: clamp(30px, 5vw, 56px); line-height: 1.08;
  letter-spacing: 0; text-transform: none;
}
.lieux__intro{ max-width: 62ch; margin: 0 0 clamp(34px, 4.4vw, 56px); }
.lieux__effets{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 860px){ .lieux__effets{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.lieux__effet{
  padding: clamp(22px, 2.8vw, 32px);
  border: 1px solid var(--trait); border-top-color: rgba(210, 184, 138, .4);
  border-radius: var(--r);
  background: linear-gradient(180deg, #101A2D 0%, var(--surface) 60%);
}
.lieux__effet p{ font-size: 15px; line-height: 1.7; color: var(--texte-2); }
.lieux__effet b, .lieux__l b{ color: var(--texte); font-weight: 500; }
.lieux__ico{
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: 18px;
  border: 1px solid rgba(210, 184, 138, .45); border-radius: 50%;
  color: var(--or);
}
.lieux__ico svg{ width: 24px; height: 24px; }
/* les titres de la page : pas le style des mentions légales, filet compris */
.page .lieux__t{
  margin: 0 0 12px; padding-top: 0; border-top: 0;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(19px, 2vw, 23px); line-height: 1.2; color: var(--accent);
}
.lieux__presta{
  margin: clamp(34px, 4.4vw, 56px) 0;
  padding: clamp(24px, 3vw, 34px) 0;
  border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait);
}
.lieux__l{ list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 860px){ .lieux__l{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.lieux__l li{ font-size: 14.5px; line-height: 1.65; color: var(--texte-2); }
.lieux__l b{ display: block; margin-bottom: 4px; }
.lieux__form{ max-width: 780px; }
.page .lieux__t--form{ margin-bottom: clamp(22px, 2.8vw, 30px); font-size: clamp(22px, 2.6vw, 30px); }
.lieux__label{ display: block; margin-bottom: 8px; font-size: 14px; color: var(--texte-2); }
.lieux__fac{ margin-left: 6px; font-size: 12.5px; color: var(--texte-2); opacity: .7; }
.lieux .d-deux{ margin-bottom: 0; }
.lieux .d-deux + .d-deux{ margin-top: clamp(18px, 2.4vw, 24px); }
.lieux__aide{ margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--texte-2); max-width: 62ch; }
.lieux__engage{ margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--trait); }
/* le nom tapé pour signer : un peu plus grand, penché, comme une signature */
.lieux__signe{ font-size: 20px; font-style: italic; letter-spacing: .02em; }
.lieux__erreur{ margin-top: 14px; font-size: 14.5px; color: var(--blanc); }
.lieux__merci{ max-width: 760px; }
.lieux__merci:focus{ outline: none; }
.lieux__contact{ margin-top: clamp(40px, 5vw, 64px); font-size: 14px; color: var(--texte-2); }

/* Une fois signé, ou ouvert depuis le lien de l'e-mail : le document seul */
.est-signe .lieux > *:not(#merci),
.est-doc .lieux > *:not(#merci){ display: none !important; }
/* l'étape de confirmation ne concerne que la salle, juste après signature */
.est-doc #confirm{ display: none; }
.lieux__confirm{ margin: 6px 0 0; }
.lieux__confirm .lieux__aide{ margin-top: 12px; }
.page .lieux__t--ex{ margin: clamp(30px, 4vw, 44px) 0 0; font-size: clamp(17px, 1.8vw, 20px); }
.lieux__sous{ display: block; margin: 6px 0 0; }
/* l'empreinte : en chiffres à chasse fixe, coupée proprement */
.doc .doc__emp{ font-family: ui-monospace, "Consolas", "Menlo", monospace; font-size: 12px; letter-spacing: .02em; word-break: break-all; }
.doc__preuve{ background: rgba(201, 180, 138, .08); padding-left: 12px; padding-right: 12px; border-radius: 3px; }

/* --- LE DOCUMENT SIGNÉ (07/11/2026) ---------------------------------------
   Une feuille claire, comme un courrier : c'est ce qui part en PDF. Le logo
   blanc du site est passé en noir pour la feuille (filtre invert). */
.doc{
  margin: 26px 0 0; max-width: 780px;
  padding: clamp(26px, 5vw, 56px);
  background: #F6F4EF; color: #141A26;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  font-family: var(--f-c);
}
.doc:empty{ display: none; }
.doc__tete{ display: flex; align-items: center; gap: 18px; padding-bottom: 18px; border-bottom: 1px solid #C9B48A; }
.doc__logo{ width: 58px; height: 58px; object-fit: contain; filter: invert(1) brightness(.25); }
.doc .doc__marque{
  margin: 0; font-family: var(--f-t); font-weight: 400;
  font-size: 18px; letter-spacing: .28em; text-transform: uppercase; color: #141A26;
}
.doc .doc__ident{ margin: 5px 0 0; font-size: 11.5px; line-height: 1.55; color: #5B6475; }
.doc .doc__ref{ margin: 18px 0 0; font-size: 12px; letter-spacing: .03em; color: #5B6475; }
.doc .doc__titre{
  margin: 12px 0 4px; font-family: var(--f-t); font-weight: 400;
  font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; color: #141A26;
}
.doc .doc__sous{ margin: 0 0 20px; font-size: 14px; color: #8A6F3E; }
.doc__bloc{ padding: 14px 0; border-top: 1px solid #E2DDD2; }
.doc__bloc h4{
  margin: 0 0 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #8A6F3E;
}
.doc dl{ display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 5px 16px; margin: 0; font-size: 14px; line-height: 1.5; }
.doc dt{ color: #5B6475; }
.doc dd{ margin: 0; color: #141A26; }
.doc ul{ margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: #141A26; }
.doc .doc__bloc p{ margin: 0; font-size: 14px; line-height: 1.6; color: #141A26; }
.doc .doc__effets{ list-style: none; padding: 0; }
.doc__effets li{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 7px 0; border-bottom: 1px dashed #E2DDD2;
}
.doc__effets li:last-child{ border-bottom: 0; }
.doc__effets b{ white-space: nowrap; font-weight: 600; }
.doc__effets b.oui{ color: #1F6B3A; }
.doc__effets b.non{ color: #9A3B2E; }
.doc__signe{
  margin-top: 20px; padding: 18px 20px;
  border: 1px solid #C9B48A; border-radius: 4px; background: #FBFAF6;
}
.doc .doc__signe p{ margin: 0 0 2px; font-size: 13px; line-height: 1.5; color: #3F4757; }
.doc .doc__signe .doc__signe-t{ margin-bottom: 6px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #8A6F3E; }
.doc .doc__signe .doc__nom{ margin: 0 0 8px; font-size: 26px; font-style: italic; color: #141A26; }
.doc .doc__pied{ margin: 22px 0 0; font-size: 11px; line-height: 1.55; color: #6B7383; }
.doc__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
.doc__actions .lieux__aide{ margin: 0; }
@media (max-width: 560px){
  .doc dl{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc dt{ margin-top: 8px; }
}

/* à l'impression (et donc dans le PDF) : la feuille seule, sans rien autour */
@media print{
  @page{ size: A4; margin: 12mm 14mm; }
  /* le site est en mode sombre (color-scheme: dark) : sans ça, les marges
     de la feuille sortent noires */
  html:has(body.p-lieux){ color-scheme: light; background: #fff; }
  body.p-lieux{ background: #fff; }
  .p-lieux .nav, .p-lieux .grain, .p-lieux .pied, .p-lieux .skip,
  .p-lieux .lieux > *:not(#merci),
  .p-lieux #merci > *:not(.doc){ display: none !important; }
  .p-lieux .page{ padding: 0; }
  /* tout tient sur UNE page A4 : marges et corps un peu resserrés */
  .p-lieux .doc{ margin: 0; max-width: none; padding: 0; box-shadow: none; background: #fff; }
  .p-lieux .doc__tete{ padding-bottom: 10px; }
  .p-lieux .doc__logo{ width: 48px; height: 48px; }
  .p-lieux .doc .doc__ref{ margin-top: 10px; font-size: 11px; }
  .p-lieux .doc .doc__titre{ margin-top: 8px; font-size: 21px; }
  .p-lieux .doc .doc__sous{ margin-bottom: 8px; font-size: 13px; }
  .p-lieux .doc__bloc{ padding: 7px 0; break-inside: avoid; }
  .p-lieux .doc__bloc h4{ margin-bottom: 5px; font-size: 10px; }
  .p-lieux .doc dl{ gap: 2px 16px; }
  .p-lieux .doc dl, .p-lieux .doc ul, .p-lieux .doc .doc__bloc p{ font-size: 12px; line-height: 1.45; }
  .p-lieux .doc__effets li{ padding: 3px 0; }
  .p-lieux .doc__signe{ margin-top: 10px; padding: 10px 14px; background: #fff; break-inside: avoid; }
  .p-lieux .doc .doc__signe p{ font-size: 12px; }
  .p-lieux .doc .doc__signe .doc__nom{ font-size: 20px; margin-bottom: 2px; }
  .p-lieux .doc__preuve{ margin-top: 8px; }
  .p-lieux .doc .doc__emp{ font-size: 10.5px; }
  .p-lieux .doc .doc__pied{ margin-top: 10px; font-size: 9.5px; line-height: 1.45; }
}
.aut-bloc > legend{
  padding: 0; margin-bottom: clamp(14px, 1.8vw, 20px);
  font-size: 12px; letter-spacing: var(--t-caps);
  text-transform: uppercase; color: var(--accent-2);
}
.d-case.est-grisee{ cursor: not-allowed; opacity: .45; }
.d-case.est-grisee .d-case__b{ border-style: dashed; }

/* la phrase sous une case : alignée sur son texte, pas sur la case, pour
   qu'on voie d'un coup d'œil qu'elle s'y rapporte (20 px + 12 px de retrait) */
.d-champ__aide{
  margin: 10px 0 0 32px; max-width: 58ch;
  font-size: 14px; line-height: 1.6; color: var(--arg-brosse);
}
.d-case input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.d-case__b{
  position: relative; flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px;
  border: 1px solid var(--arg-ombre); border-radius: 5px;
}
.d-case input:checked + .d-case__b{ background: var(--metal); border-color: transparent; }
.d-case input:checked + .d-case__b::after{
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 6px; height: 11px; border-right: 2px solid var(--fond); border-bottom: 2px solid var(--fond);
  transform: rotate(45deg);
}
.d-case input:focus-visible + .d-case__b{ outline: 1px solid var(--arg-poli); outline-offset: 3px; }

.d-lien{
  display: inline-block; margin-top: 18px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--f-c); font-size: 14.5px; color: var(--arg-brosse);
  text-decoration: underline; text-underline-offset: 4px;
}
.d-lien:hover{ color: var(--blanc); }

/* navigation entre étapes */
.d-nav{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px, 3.4vw, 38px); }
.d-nav .btn{ flex: 0 1 auto; }
@media (max-width: 519px){ .d-nav .btn{ flex: 1 1 100%; } }

/* --- récapitulatif ------------------------------------------------------ */
.d-recap{
  padding: 22px 24px 24px;
  border: 1px solid var(--trait); border-radius: var(--r); background: var(--carte);
}
.d-recap__t{
  margin: 0 0 16px;
  font-size: 12px; letter-spacing: var(--t-caps); text-transform: uppercase; color: var(--arg-brosse);
}
.d-recap__l{ list-style: none; margin: 0 0 18px; padding: 0; }
.d-recap__l li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--trait);
  font-size: 14.5px; color: var(--arg-poli);
}
.d-recap__l li:last-child{ border-bottom: 0; }
.d-recap__v{
  font-family: var(--f-p); font-variant-numeric: tabular-nums; color: var(--blanc); white-space: nowrap;
}
.d-recap__v s{ color: var(--arg-brosse); font-size: 13px; margin-right: 6px; }
.d-recap__pct{ font-size: 12.5px; color: var(--arg-brosse); }
.d-recap__vide{ margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; color: var(--arg-brosse); }
.d-recap__total{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--arg-ombre);
}
.d-recap__total span{ font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--arg-brosse); }
.d-recap__total strong{
  font-family: var(--f-p); font-variant-numeric: tabular-nums; font-weight: 300;
  font-size: clamp(30px, 3.4vw, 38px); line-height: 1.02; letter-spacing: 0;
  color: var(--accent);
  white-space: nowrap;
}
.d-recap__note{ margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--arg-brosse); }

/* sur téléphone : le récapitulatif se range en bas de l'écran */
@media (max-width: 999px){
  .d-recap{
    position: sticky; bottom: 0; z-index: 60;
    margin-inline: calc(var(--gout) * -1);
    border-radius: var(--r) var(--r) 0 0;
    border-bottom: 0;
    box-shadow: 0 -18px 34px rgba(0, 0, 0, .55);
  }
  .d-recap__l, .d-recap__note, .d-recap__t{ display: none; }
  /* place pour le bouton « Détail », qui flotte en haut à droite */
  .d-recap__vide, .d-recap__total{ padding-right: 86px; }
  .d-recap__total{ padding-top: 0; border-top: 0; }
  .d-recap.is-ouvert .d-recap__l,
  .d-recap.is-ouvert .d-recap__note,
  .d-recap.is-ouvert .d-recap__t{ display: block; }
  .d-recap.is-ouvert .d-recap__total{ padding-top: 16px; border-top: 1px solid var(--arg-ombre); }
  .d-recap__plier{
    position: absolute; top: 10px; right: 16px;
    background: none; border: 0; padding: 6px; cursor: pointer;
    font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--arg-brosse);
  }
}
@media (min-width: 1000px){ .d-recap__plier{ display: none; } }

/* --- confirmation ------------------------------------------------------- */
.d-fin{ max-width: 60ch; }
.d-fin__faisceau{
  display: block; width: 100%; max-width: 260px; height: 90px; margin: 0 0 26px;
  color: var(--arg-poli);
}
.d-fin p{ font-size: 16.5px; }
.d-fin a{ text-decoration: underline; text-underline-offset: 3px; }
.d-fin__recap{
  margin: 26px 0 20px; padding: 20px 22px;
  border: 1px solid var(--trait); border-radius: var(--r); background: var(--carte);
  font-family: var(--f-c); font-size: 14px; line-height: 1.7; color: var(--blanc);
  white-space: pre-wrap; word-break: break-word;
}
.d-fin__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 26px; }
.d-fin__copie{ font-size: 14px; color: var(--arg-poli); }
.d-ko{ margin-top: 18px; font-size: 14.5px; color: var(--blanc); }
.d-ko a{ text-decoration: underline; }

/* anti-robot : invisible pour l'humain, rempli par les robots */
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Le ruban de l'offre en cours est dans css/style.css depuis le 06/11/2026 :
   l'accueil l'affiche aussi, et cette feuille-ci n'y est pas chargée. */

/* badge de remise sur la carte : discret, en haut à droite */
.t-carte{ position: relative; }
/* pastille du pourcentage : contour Glace, discrète, en haut à droite */
/* la carte est cliquable : elle choisit le pack montré dans « Voir la
   différence ». Le bouton et les liens gardent leur propre action. */
.t-carte{ cursor: pointer; }
.t-carte a, .t-carte button{ cursor: pointer; }
.t-carte.est-choisie{ border-color: var(--accent-2); }

/* .t-carte__remise, la pastille du pourcentage en haut à droite, a été
   retirée le 06/11/2026 : le pourcentage est maintenant à côté du prix
   (.t-carte__pct, plus haut). */

/* trois questions reprises en bas de la page Tarifs */
.t-faq{ margin-top: clamp(40px, 5vw, 60px); max-width: 72ch; }
.t-tel, .d-tel{ margin: -10px 0 clamp(26px, 3vw, 36px); font-size: 15px; color: var(--arg-brosse); }
.d-tel a{ color: var(--arg-poli); text-decoration: underline; text-underline-offset: 4px; }
.d-tel a:hover{ color: var(--blanc); }

/* portrait de William, section méthode */
.portrait{ margin: clamp(22px, 3vw, 32px) 0 0; }
.portrait img{ width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--trait); }
.portrait figcaption{ margin-top: 10px; font-size: 13px; color: var(--arg-brosse); }
.dev-court__avis small{ display: inline-block; margin-top: 4px; font-size: 13px; color: var(--arg-ombre); }

/* ==========================================================================
   PAGE TARIFS, VERSION DU 11/10/2026
   Comparaison par onglets, tableau des options pack par colonne.
   ========================================================================== */

.t-carte__dj{
  margin: 14px 0 0; padding-top: 14px;
  border-top: 1px solid var(--trait);
  font-size: 13.5px; line-height: 1.5; color: var(--accent-2);
}
/* la carte visée par un lien de l'accueil */
.t-carte.est-visee{
  border-color: var(--accent-2);
  box-shadow: 0 0 0 1px var(--accent-2), 0 0 44px rgba(var(--halo), .14);
}

/* --- onglets, partagés par la comparaison et les options ------------------ */
.scene__onglets, .opt__onglets{
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px;
}
.onglet{
  padding: 10px 18px;
  border: 1px solid var(--trait); border-radius: 999px;
  background: var(--surface);
  font-family: var(--f-c); font-size: 13px; letter-spacing: .06em;
  color: var(--texte-2); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.onglet:hover{ border-color: var(--bord); color: var(--texte); }
.onglet[aria-selected="true"]{
  border-color: var(--accent-2); color: var(--accent); background: rgba(var(--halo), .08);
}
.onglet:focus-visible{ outline: 1px solid var(--accent-2); outline-offset: 3px; }

/* --- voir la différence ---------------------------------------------------- */
/* Une seule colonne, à toutes les tailles : le dessin prend toute la
   largeur de la page et le texte passe dessous. C'est lui qui porte la
   section, maintenant qu'il montre aussi la sono. */
.comparer{ display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 36px); }
.comparer__gauche{ min-width: 0; }
.comparer__droite{ max-width: 62ch; }
.comparer__nom{
  margin: 0 0 10px;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; color: var(--accent);
}
.comparer__x{ margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--texte-2); max-width: 44ch; }

/* --- M8 : la salle se monte d'un pack à l'autre ---------------------------
   Les trois scènes sont posées l'une sur l'autre, au même endroit. En
   changeant d'onglet, la barre descend du haut, les projecteurs s'y
   accrochent un par un, les colonnes montent du sol et les lasers s'ouvrent.
   En revenant en arrière, ce qui part s'éteint et remonte.
   -------------------------------------------------------------------------- */
/* Le rapport doit suivre le viewBox de js/scene.js en version « son » :
   210 + 2 × 48 de marge, sur 150 de haut. La hauteur est bornée pour que le
   dessin reste entièrement visible sur un écran bas. */
.cmp{
  position: relative;
  width: min(100%, calc(72vh * 306 / 150));
  aspect-ratio: 306 / 150;
  margin-inline: auto;
}
/* Sur téléphone, le cadre prenait au dessin la place dont il a besoin :
   le dessin est devenu plus large depuis qu'il porte la sono, et chaque
   pixel compte. On le passe donc bord à bord, sans cadre ni gouttière. */
@media (max-width: 760px){
  #sceneCompare.scene{
    margin-inline: calc(var(--gout) * -1);
    padding: 6px 0;
    border-inline: 0; border-radius: 0;
  }
}
.cmp__e{ position: absolute; inset: 0; }
.cmp__e .scene__svg{ max-width: none; height: 100%; }

/* au repos : la pièce n'est pas là. Les pièces du sol attendent en bas,
   tout le reste attend en haut, hors de la barre. */
.cmp__e .pc{
  opacity: 0;
  transform: translateY(-11px);
  transition: opacity .42s ease, transform .62s cubic-bezier(.2,.78,.28,1);
  transition-delay: var(--d, 0ms);
}
.cmp__e .pc[data-r="sol"],
.cmp__e .pc[data-r="rampe"],
.cmp__e .pc[data-r="colonne"]{ transform: translateY(13px); }
.cmp__e .pc[data-r="mat"]{ transform: translateY(9px); }
.cmp__e .pc[data-r="fx"]{ transform: none; }
.cmp__e .pc[data-r="laser"]{ transform: scaleX(.12); transform-origin: 50% 100%; }

.cmp__e.est-la .pc{ opacity: 1; transform: none; }

/* la salle est la même dans les trois : on l'échange d'un coup, sans fondu,
   pour qu'elle paraisse immobile pendant que le reste se monte. */
.cmp__e [data-part="salle"]{ opacity: 0; }
.cmp__e.est-la [data-part="salle"]{ opacity: 1; }
.cmp__e:not(.est-la){ pointer-events: none; }

@media (prefers-reduced-motion: reduce){
  .cmp__e .pc, .cmp__e [data-part="salle"]{ transition: none; }
  .cmp__e .pc{ transform: none; }
}

/* --- tableau des options ---------------------------------------------------- */
.opt__t{ width: 100%; border-collapse: collapse; }
.opt__t thead th{
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--bord);
  text-align: center;
  font-family: var(--f-t); font-weight: var(--t-graisse);
  font-size: 16px; color: var(--accent);
}
.opt__t tbody th{
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--trait);
  text-align: left; font-weight: 400; font-size: 14.5px; line-height: 1.5; color: var(--texte-2);
}
.opt__t tbody td{
  padding: 14px; border-bottom: 1px solid var(--trait);
  text-align: center; white-space: nowrap;
}
.opt__t tbody tr:last-child th, .opt__t tbody tr:last-child td{ border-bottom: 0; }
.opt__prix{
  font-family: var(--f-p); font-variant-numeric: tabular-nums lining-nums;
  font-size: 15px; color: var(--texte);
}
.opt__inclus{ font-size: 14px; color: var(--accent-2); }
.opt__non{ font-size: 14px; color: var(--texte-2); }
.opt__devis{ font-size: 14px; color: var(--texte-2); }
.opt__note{ margin: 20px 0 0; font-size: 14px; line-height: 1.65; color: var(--texte-2); max-width: 68ch; }

/* listes par pack : seules visibles sur téléphone */
.opt__l{ list-style: none; margin: 0; padding: 0; }
.opt__l li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--trait);
  font-size: 14.5px; line-height: 1.5; color: var(--texte-2);
}
.opt__l li:last-child{ border-bottom: 0; }

@media (min-width: 760px){
  .opt__onglets{ display: none; }
  .opt__l{ display: none; }
}
@media (max-width: 759px){
  .opt__t{ display: none; }
}

.t-reservation{ margin: 0 0 clamp(26px, 3vw, 36px); font-size: 14.5px; line-height: 1.65; color: var(--texte-2); }