/* ==========================================================================
   Bascule vers l'offre — tarifs, à propos, dernier appel
   Ces sections ferment la page : on quitte le récit pour le prix et l'action.
   Séparées de recit.css pour qu'aucun fichier ne dépasse 800 lignes.
   ========================================================================== */

/* ==========================================================================
   Tarifs — la rupture assumée vers le clair
   Le noir s'arrête ici. C'est le moment où on passe du film au devis, et le
   changement de fond doit se sentir. On ne décore pas : on aligne seulement
   la typographie sur le nouveau système et on retire le losange.
   ========================================================================== */

.tarifs--clair {
  --or-fonce: #8a6818;
  --encre: #1c1408;
  --encre-mut: #4a3c1c;

  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(100, 80, 20, 0.18);
}

.tarifs--clair .tarifs-header { text-align: left; }

.tarifs--clair .recit-eyebrow { color: var(--or-fonce); }
.tarifs--clair .recit-eyebrow::before { background: var(--or-fonce); }

.tarifs--clair .tarifs-header h2 {
  max-width: 18ch;
  margin-top: 24px;
  font-family: var(--font-h);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  font-weight: 500 !important;       /* bat l'ancienne règle en !important */
  line-height: 1.14;
  letter-spacing: 0.01em;
  text-transform: none !important;
  color: var(--encre);
}

.tarifs--clair .tarifs-header > p {
  max-width: 54ch;
  margin-top: 20px;
  font-family: var(--font-b);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--encre-mut);
}

/* ==========================================================================
   Dernier appel — noir profond, le plus large de la page
   ========================================================================== */

.cta--noir {
  --noir-profond: #0d0c0a;
  --blanc: #fafafa;
  --blanc-mut: rgba(250, 250, 250, 0.68);
  --blanc-fnt: rgba(250, 250, 250, 0.42);
  --or: #c9a34a;
  --filet: rgba(250, 250, 250, 0.18);

  position: relative;
  z-index: 2;
  background: var(--noir-profond);
  padding-block: clamp(120px, 16vh, 200px);
}

.cta--noir .cta-bg { display: none; }

/* Le logo de la maison remplace l'illustration : contenu dans un format carré,
   il reste blanc sur le noir et prend une place plus basse dans le dernier appel. */
.cta--noir .cta-emblem {
  width: clamp(84px, 9vw, 104px);
  aspect-ratio: 1;
  height: auto;
  margin: 12px auto 32px;
  background: none;
  opacity: 0.92;
  display: grid;
  place-items: center;
}

.cta--noir .cta-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

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

.cta--noir h2 {
  max-width: 16ch;
  margin-inline: auto;
  font-family: var(--font-h);
  font-size: clamp(2.2rem, 5.4vw, 4.2rem) !important;
  font-weight: 400 !important;
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-transform: none !important;
  color: var(--blanc);
}

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

.cta--noir .cta-tel {
  display: inline-block;
  margin-top: clamp(26px, 4vh, 44px);
  font-family: var(--font-h);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--or);
}

.cta--noir .cta-sub {
  margin-top: 16px;
  font-style: normal;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blanc-fnt);
}

.cta--noir .cta-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 24px;
  margin-top: clamp(32px, 5vh, 52px);
}

.cta--noir .btn--gold {
  background: var(--or);
  border-color: var(--or);
  color: #0d0c0a;
}

/* Le second niveau d'engagement, en bouton fantôme : on ne met pas deux
   boutons pleins côte à côte, ils se neutraliseraient. */
.cta--noir .btn--ol {
  background: transparent;
  border-color: var(--filet);
  color: var(--blanc);
}

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

/* ==========================================================================
   Corrections de contraste sur fond sombre
   ========================================================================== */

/* Les fleches du carrousel heritaient d'un fond creme : deux pastilles
   blanches sur le noir, sans fleche visible. */
.testis--noir .ts-nav {
  background: transparent;
  border: 1px solid var(--filet);
  color: var(--blanc-mut);
}

.testis--noir .ts-nav svg { stroke: currentColor; fill: none; }

.testis--noir .ts-nav:hover,
.testis--noir .ts-nav:focus-visible {
  background: rgba(201, 163, 74, 0.12);
  border-color: var(--or);
  color: var(--or);
}


/* ==========================================================================
   À propos — passe en graphite
   Tarifs, à propos et zones s'enchaînaient en trois crèmes d'affilée après
   une longue traversée sombre. Le portrait de Jimmy reprend le graphite de
   « La maison » : le récit est sombre, l'offre est claire.
   ========================================================================== */

.about--noir {
  --graphite: #171717;
  --blanc: #fafafa;
  --blanc-mut: rgba(250, 250, 250, 0.72);
  --blanc-fnt: rgba(250, 250, 250, 0.45);
  --or: #c9a34a;
  --filet: rgba(250, 250, 250, 0.12);

  position: relative;
  z-index: 2;
  background: var(--graphite);
}

.about--noir .about-lbl {
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--or);
}

.about--noir .about-h2 {
  font-family: var(--font-h);
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.01em;
  color: var(--blanc);
}

.about--noir .about-role {
  font-style: normal;
  font-family: var(--font-b);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--or);
}

.about--noir .about-p { color: var(--blanc-mut); }

.about--noir .about-fact {
  border-color: var(--filet);
  background: rgba(250, 250, 250, 0.03);
}

.about--noir .af-lbl { color: var(--blanc-fnt); }
.about--noir .af-val { color: var(--blanc); }

.about--noir .about-goldline { background: var(--or); opacity: 0.55; }

.about--noir .about-emblem {
  background: var(--graphite);
  border-color: var(--filet);
}

.about--noir .about-emblem img { filter: brightness(0) invert(1); opacity: 0.8; }

.about--noir .about-initials { color: var(--blanc-fnt); }

/* ==========================================================================
   Tarifs — la fiche de prix
   L'ancien bloc était un encadré centré, flottant au milieu d'une section dont
   l'ouverture, elle, est alignée à gauche : deux compositions dans la même
   section. Et les prix étaient reliés à leur intitulé par des pointillés, le
   tic de la carte de restaurant.

   Ici, un index à gauche et une fiche à droite. L'index donne le prix d'entrée
   des quatre familles d'un seul coup d'œil, ce que quatre onglets ne disaient
   pas. La fiche est posée sur le crème relevé, comme une feuille sur la table.
   Aucun mouvement au survol : c'est une zone de lecture utile, pas un
   présentoir.
   ========================================================================== */

.tarifs--clair {
  --t-or: #8a6818;
  --t-or-clair: #c9a34a;
  --t-encre: #1c1408;
  --t-encre-mut: #4a3c1c;
  --t-encre-fnt: #6a6040;
  --t-feuille: #faf7f0;
  --t-filet: rgba(100, 80, 20, 0.16);
  --t-filet-fort: rgba(100, 80, 20, 0.34);
}

.pcar {
  display: grid;
  gap: clamp(26px, 3.2vw, 44px);
  /* Aligné à gauche et borné : l'ancienne règle le centrait sur 820 px alors
     que l'ouverture de la section, elle, part de la marge gauche. Et au-delà
     de 900 px, l'écart entre un intitulé et son prix devient un couloir vide,
     celui-là même que les pointillés servaient à combler. */
  width: min(900px, 100%);
  max-width: none;
  margin: clamp(40px, 6vh, 72px) 0 0;
}

/* ---- L'index des familles ------------------------------------------------ */

.pcar-index {
  display: grid;
  gap: 2px;
  align-content: start;
}

.pcar-tab {
  position: relative;
  display: block;
  width: 100%;
  padding: 15px 14px 15px 26px;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--t-filet);
  cursor: pointer;
  font: inherit;
  color: inherit;
  /* l'ancienne regle interdisait le retour a la ligne : dans une colonne
     etroite, Paraconciergerie debordait */
  white-space: normal;
}

.pcar-index .pcar-tab:last-child { border-bottom: 0; }

/* L'alvéole, la seule puce du site. Pleine quand la famille est ouverte. */
.pcar-tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 21px;
  width: 10px;
  height: 11px;
  background: var(--t-filet-fort);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: background-color .3s var(--ez, cubic-bezier(.4, 0, .2, 1));
}

/* L'ancienne règle peignait l'onglet actif en bloc doré plein, un pavé au
   milieu du crème. Ici l'état actif se dit par l'alvéole pleine et la couleur
   du nom, pas par un aplat. */
.pcar-index .pcar-tab.active {
  background: none;
  border-color: var(--t-filet);
  color: inherit;
}

.pcar-index .pcar-tab:hover { border-color: var(--t-filet); }

.pcar-tab.active::before { background: var(--t-or); }

.pt-nom {
  display: block;
  /* l'ancienne regle des onglets imposait capitales et interlettrage : quatre
     intitules en capitales auraient fait quatre eyebrows de plus, en
     concurrence avec celui de la fiche */
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-b);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--t-encre);
  transition: color .3s var(--ez, cubic-bezier(.4, 0, .2, 1));
}

.pcar-tab.active .pt-nom { color: var(--t-or); }
.pcar-tab:hover .pt-nom { color: var(--t-or); }

.pt-des {
  display: block;
  margin-top: 4px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--t-encre-fnt);
}

.pt-tag {
  display: inline-block;
  margin-top: 9px;
  padding: 4px 9px;
  border: 1px solid var(--t-filet-fort);
  border-radius: 2px;
  font-family: var(--font-b);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-or);
}

/* ---- La fiche ------------------------------------------------------------ */

.pcar-viewport {
  padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3vw, 40px) clamp(18px, 2.4vw, 30px);
  background: var(--t-feuille);
  border: 1px solid var(--t-filet);
  border-radius: 2px;
}

.pcar-slide-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 6px;
  font-family: var(--font-b);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--t-or);
}

.pcar-slide-sub::before {
  content: '';
  width: 26px;
  height: 1px;
  flex-shrink: 0;
  background: var(--t-or);
}

.tm-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Deux colonnes et une ligne de base commune. Le remplissage en pointillés
   est retiré : la colonne de prix alignée suffit à relier les deux. */
.tm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: baseline;
  padding: 17px 0;
  border-bottom: 1px solid var(--t-filet);
}

.tm-liste .tm-row:last-child { border-bottom: 0; }

.tm-label {
  font-family: var(--font-b);
  font-size: 0.98rem;
  font-weight: 300;
  line-height: 1.45;
  color: var(--t-encre-mut);
}

.tm-price {
  font-family: var(--font-h);
  font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--t-encre);
}

.tm-price--devis {
  font-family: var(--font-b);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-encre-fnt);
}

/* ---- Le pied ------------------------------------------------------------- */

.pcar-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: clamp(24px, 3.5vh, 36px);
}

.pcar-detail {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 4px;
  font-family: var(--font-b);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-or);
}

.pcar-detail::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left center;
  transition: transform .35s var(--ez, cubic-bezier(.4, 0, .2, 1));
}

.pcar-detail:hover::after,
.pcar-detail:focus-visible::after { transform: scaleX(1); }

.pcar-fleche {
  display: inline-block;
  transition: transform .3s var(--ez, cubic-bezier(.4, 0, .2, 1));
}

.pcar-detail:hover .pcar-fleche { transform: translateX(5px); }

.pcar-note {
  max-width: 58ch;
  margin-top: 22px;
  font-family: var(--font-b);
  font-size: 0.82rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--t-encre-fnt);
}

/* ---- Deux colonnes à partir de 900 px ------------------------------------ */

@media (min-width: 900px) {
  .pcar { grid-template-columns: minmax(240px, 0.34fr) minmax(0, 1fr); }
  .pcar-index { border-right: 1px solid var(--t-filet); padding-right: clamp(20px, 2.5vw, 34px); }
  .pcar-index .pcar-tab { padding-right: 4px; }
}

/* Sur téléphone l'index passe en deux colonnes : quatre familles empilées
   auraient repoussé la fiche sous la ligne de flottaison. */
@media (max-width: 899px) {
  .pcar-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--t-filet);
  }
  .pcar-index .pcar-tab:nth-child(odd) { border-right: 1px solid var(--t-filet); }
  .pcar-index .pcar-tab:nth-last-child(-n+2) { border-bottom: 0; }
  .pt-tag { margin-top: 7px; }
}

@media (max-width: 479px) {
  .pcar-index { grid-template-columns: minmax(0, 1fr); }
  .pcar-index .pcar-tab:nth-child(odd) { border-right: 0; }
  .pcar-index .pcar-tab:nth-last-child(-n+2) { border-bottom: 1px solid var(--t-filet); }
  .pcar-index .pcar-tab:last-child { border-bottom: 0; }
  .tm-row { gap: 14px; }
  .tm-label { font-size: 0.92rem; }
}

/* Le paragraphe des familles sur devis : il explique pourquoi il n'y a pas de
   prix affiché, à l'endroit exact où le visiteur cherche ce prix. */
.pcar-slide-p {
  max-width: 52ch;
  margin: 14px 0 22px;
  font-family: var(--font-b);
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--t-encre-mut);
}

/* Sur ces familles, « Sur devis » tient la colonne des prix : il prend donc le
   poids d'un prix, sans en imiter le chiffre. */
.tm-row .tm-price--devis {
  font-size: 0.76rem;
  color: var(--t-or);
}

@media (min-width: 900px) {
  /* Six familles : la colonne d'index respire un peu moins. */
  .pcar-index .pcar-tab { padding-top: 13px; padding-bottom: 13px; }
  .pcar-tab::before { top: 19px; }
}