/*
  Styles personnalisés pour un site de detailing automobile haut de gamme.
  Palette : crème / ivoire, marron, doré / or.
  Toutes les couleurs secondaires sont dérivées de ces teintes pour garantir une harmonie visuelle.
*/

:root {
  --creme: #FAF6EF;
  --marron: #4A3A2A;
  --marron-90: rgba(74,58,42,0.9);
  --or: #C6A34F;
  --or-20: rgba(198,163,79,0.2);
  --card: #F4EEE3;
  --muted: #7A6550;
  --radius: 18px;
  --container: 1200px;
  /* Hauteur du header augmentée pour laisser de la place au logo agrandi */
  --header-h: 120px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

body {
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--marron);
  background: linear-gradient(180deg, var(--creme) 0%, #F7F1E7 100%);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  backdrop-filter: saturate(180%) blur(8px);
  background-color: rgba(250,246,239,0.96);
  border-bottom: 1px solid var(--or-20);
  transition: background .25s ease, border-color .25s ease;
}

header.scrolled {
  background-color: rgba(250,246,239,0.98);
  border-color: var(--or-20);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--marron);
  font-weight: 700;
  letter-spacing: .4px;
}

.brand .logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--or), var(--or));
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.menu {
  display: flex;
  /* Réduction de l'espace entre les liens pour un alignement plus compact */
  gap: 6px;
  align-items: center;
}

.menu a {
  /* Réduction du padding horizontal et vertical des liens de navigation */
  --pad: 0.5rem 0.6rem;
  text-decoration: none;
  color: var(--muted);
  padding: var(--pad);
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  /* Diminution de la taille de police des liens de navigation pour gagner de la place */
  font-size: 0.85rem;
  transition: background .2s ease, color .2s ease;
}

/* Pour permettre les retours à la ligne dans les libellés de navigation composés de plusieurs mots,
   on applique une disposition en bloc avec alignement centré et un retour à la ligne autorisé.
   On exclut le bouton .cta pour conserver son style de bouton. */
.menu a:not(.cta) {
  display: inline-block;
  white-space: normal;
  text-align: center;
}

.menu a:hover {
  color: var(--marron);
  background: var(--or-20);
}

.menu a.active {
  color: var(--creme);
  background: var(--or);
}

/* Bouton principal de navigation « Nous contacter » :
   adopte le style bouton doré pour une mise en avant claire. */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--or);
  background: var(--or);
  /* Le texte du bouton devient blanc pour un contraste optimal */
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cta:hover {
  background: var(--marron);
  border-color: var(--marron);
  color: #fff;
}

/* Lorsque le bouton « Nous contacter » correspond à la section active,
   son apparence change pour indiquer l’onglet sélectionné. */
.menu a.cta.active,
#menu-mobile a.cta.active {
  background: var(--marron);
  border-color: var(--marron);
  color: #fff;
}

/* Forcer la couleur du texte du bouton « Nous contacter » dans le menu principal et mobile à blanc.
   Cela permet de surclasser la couleur définie sur .menu a. */
.menu a.cta,
#menu-mobile a.cta {
  color: #fff;
}

.menu a.cta:hover,
#menu-mobile a.cta:hover {
  color: #fff;
}

.hamb {
  display: none;
  background: none;
  border: 0;
  color: var(--marron);
  font-size: 1.25rem;
  padding: .5rem;
  border-radius: 10px;
}

.hamb:focus {
  outline: 2px solid var(--or);
  outline-offset: 2px;
}

/* Hide mobile menu on larger screens by default */
.mobile { display: none; }

@media (max-width: 900px) {
  /* Navigation adjustments on mobile */
  .menu { display: none; }
  .hamb { display: inline-block; }
  /* Mobile menu styles */
  .mobile {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background-color: rgba(250,246,239,0.98);
    border-bottom: 1px solid var(--or-20);
    /* hidden until toggled open */
    display: none;
    z-index: 999;
  }
  .mobile.open { display: block; }
  .mobile a {
    display: block;
    padding: 1rem 1.25rem;
    color: var(--marron);
    text-decoration: none;
    transition: background .2s ease;
  }
  .mobile a + a { border-top: 1px solid var(--or-20); }
  .mobile a:hover { background: var(--or-20); }
}

/* Sections */
section {
  padding: 96px 0;
  scroll-margin-top: calc(var(--header-h) + 10px);
}

.hero {
  padding: 120px 0 80px;
  background: radial-gradient(80rem 40rem at 20% -10%, rgba(198,163,79,0.12), transparent 70%), radial-gradient(60rem 40rem at 100% 10%, rgba(198,163,79,0.1), transparent 60%);
}

.grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 900px){
  .grid-2 {
    grid-template-columns: 1.2fr 1fr;
  }
}

h1 {
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin: 0 0 14px;
  font-family: "Georgia", serif;
}

h2 {
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 10px;
  font-family: "Georgia", serif;
}

h3 {
  font-size: 1.4rem;
  margin: 0 0 10px;
  font-family: "Georgia", serif;
}

p {
  color: var(--muted);
  line-height: 1.7;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--or-20);
  border: 1px solid var(--or);
  font-weight: 600;
  color: var(--marron);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1.1rem;
  border-radius: 14px;
  text-decoration: none;
  color: var(--creme);
  background: var(--or);
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: background .2s ease, color .2s ease;
}

.btn:hover {
  background: var(--marron);
  color: var(--creme);
}

.btn.secondary {
  background: transparent;
  color: var(--marron);
  border: 1px solid var(--marron);
}

.btn.secondary:hover {
  background: var(--or-20);
  color: var(--marron);
}

.card {
  background: var(--card);
  border: 1px solid var(--or-20);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.card:hover {
  border-color: var(--or);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.cards {
  display: grid;
  gap: 18px;
}

@media (min-width: 800px) {
  .cards.services { grid-template-columns: repeat(3, 1fr); }
  .cards.tarifs { grid-template-columns: repeat(2, 1fr); }
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  background: var(--or-20);
  color: var(--marron);
  font-weight: 600;
}

/* Espacement standard au-dessus des badges du hero */
/* Restaure l'espacement d'origine pour les pastilles sous le CTA */
.hero .hero-badges {
  margin-top: 16px;
}

/* Raffinement des cartes de services : ligne verticale dorée */
/* Mise en page plus chic pour les cartes de services */
.cards.services .card {
  position: relative;
  /* Prévoit un espace généreux à gauche pour la ligne dorée et l'icône DA */
  padding: 28px 24px 24px 70px;
  border: 1px solid var(--or-20);
  border-radius: var(--radius);
}
.cards.services .card::before {
  content: '';
  position: absolute;
  /* Ligne dorée légèrement décollée du bord pour laisser de la place à l'icône */
  left: 24px;
  top: 0;
  width: 3px;
  height: 100%;
  border-radius: var(--radius);
  background: var(--or);
}

/* Titres des cartes de services plus mis en valeur */
.cards.services .card h3 {
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 12px;
  font-family: "Georgia", serif;
  /* Le titre des services est doré pour correspondre à l'identité premium */
  color: var(--or);
}

/* Listes dans les cartes de services */
.cards.services .card ul {
  padding-left: 18px;
  margin: 0;
  color: var(--marron);
}
.cards.services .card li {
  margin-bottom: 6px;
  line-height: 1.6;
}

/* Paragraphes dans les cartes de services (remplacent les listes à puces) */
.cards.services .card p {
  margin: 0 0 8px 0;
  color: var(--marron);
  line-height: 1.6;
}

/* Icône DA dans les cartes de services : positionnée près du bord gauche */
.service-logo {
  position: absolute;
  left: 8px;
  top: 26px;
  width: 32px;
  height: 32px;
  object-fit: contain;
  pointer-events: none;
}

/* Style pour les symboles « & » afin de les rendre plus élégants */
.ampersand {
  font-family: "Georgia", serif;
  font-weight: bold;
  font-style: italic;
  color: var(--or);
}

/* Sous-titre des catégories tarifaires (instruction) */
.tarifs-intro {
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
  margin-top: 6px;
  margin-bottom: 0;
}

/* Titre Nos options en couleur principale (marron) */
.tarifs-options-title {
  /* Les esperluettes sont dorées pour rester cohérentes avec les titres */
  color: var(--or);
}

/* Plus d'espace au-dessus des options */
.tarifs-options {
  margin-top: 60px;
}

/* Hero badges customisation : plus discrètes */
.hero .hero-badges .pill {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  background: rgba(198,163,79,0.12);
  color: var(--muted);
  border: 1px solid var(--or-20);
}

/* Ajout d'espacement sous le badge du hero */
.hero .badge {
  margin-bottom: 32px;
}

/* Effet lueur dorée pour le mot « impeccable » */
.impeccable-effect {
  display: inline-block;
  font-weight: 700;
  background: linear-gradient(90deg, var(--or) 0%, #FFF6D6 50%, var(--or) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200%;
  /* Effet plus lent et élégant pour la lueur dorée */
  animation: shine 8s linear infinite;
}

@keyframes shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Styles pour la section Tarifs */
.tarif-categories {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.tarif-category {
  cursor: pointer;
  padding: 0.6rem 1.2rem;
  border-radius: 14px;
  border: 1px solid var(--or);
  background: var(--card);
  color: var(--marron);
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.tarif-category:hover {
  background: var(--or-20);
}
.tarif-category.active {
  background: var(--or);
  color: var(--creme);
}

.tarif-content {
  display: none;
}
.tarif-content.active {
  display: block;
}

.tarif-cards {
  display: grid;
  gap: 18px;
  margin-top: 16px;
}
@media (min-width: 800px) {
  .tarif-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tarif-card {
  background: var(--card);
  border: 1px solid var(--or-20);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: border-color .2s ease, box-shadow .2s ease;
  /* Aligne les éléments vers le bas pour que les boutons soient uniformes */
  display: flex;
  flex-direction: column;
}
.tarif-card h3 {
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 12px;
  /* Couleur du texte en marron pour un contraste plus marqué sur le fond doré clair */
  color: var(--marron);
  font-family: "Georgia", serif;
  /* Ajoute un fond doux derrière les titres de tarifs pour les mettre en valeur */
  display: inline-block;
  background: var(--or-20);
  padding: 4px 8px;
  border-radius: var(--radius);
  /* Centrer les titres dans les cartes */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.tarif-card p {
  margin: 0 0 12px;
  color: var(--marron);
  line-height: 1.6;
  text-align: center;
}

/* Ajoute de l'espace entre le descriptif et la ligne de prix dans les cartes tarifaires */
.tarif-card .details {
  margin-bottom: 20px;
  display: block;
}

/* Centrer la dernière carte dans la liste des tarifs (Lavage complet intérieur & extérieur pro) */
/* La dernière carte de la section tarifs doit avoir la même largeur que les autres, sans centrage particulier */
.tarif-cards > .tarif-card:last-child {
  margin-left: 0;
  margin-right: 0;
}

/* Centrer la dernière carte dans la liste des options */
.options-cards > .option-card:last-child {
  margin-left: auto;
  margin-right: auto;
}
.tarif-card:hover {
  border-color: var(--or);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.tarif-note {
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--muted);
}

.tarifs-options {
  margin-top: 60px;
}
.tarifs-options-title {
  font-size: 1.6rem;
  margin: 0 0 18px;
  color: var(--marron);
  font-family: "Georgia", serif;
}

/* Mention d'horaires sous les badges du hero */
/* Supprimé : plus de mention d'horaires sous les badges */
.options-cards {
  display: grid;
  gap: 18px;
}
@media (min-width: 800px) {
  .options-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
.option-card {
  background: var(--card);
  border: 1px solid var(--or-20);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.option-card h4 {
  margin-top: 0;
  margin-bottom: 6px;
  color: var(--or);
  font-size: 1.25rem;
  font-family: "Georgia", serif;
}
.option-card p {
  margin: 0;
  color: var(--marron);
  line-height: 1.5;
}
.option-card:hover {
  border-color: var(--or);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.options-note {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

/*
 * Styles additionnels pour la version interactive des tarifs et des abonnements.
 * Les prix sont présentés sur des lignes dédiées et colorés en or, les
 * boutons de personnalisation et de réservation sont mis en avant, et
 * l'ergonomie des panneaux d'options est retravaillée.
 */

/* Lignes de prix affichant la tarification selon la catégorie sélectionnée */
.price-lines {
  margin-top: 16px;
  font-size: 1rem;
}
.price-line {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.price-line .price-label {
  font-weight: 600;
  color: var(--marron);
}
.price-value {
  color: var(--or);
  font-weight: 600;
}

/* Actions au bas des cartes de tarifs */
.tarif-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.option-toggle {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--or);
  background: var(--creme);
  color: var(--marron);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.option-toggle:hover {
  background: var(--or-20);
  color: var(--marron);
}
.btn.booking {
  background: var(--or);
  color: var(--creme);
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease;
}
.btn.booking:hover {
  background: var(--or-20);
  color: var(--marron);
}

/* Panneau de personnalisation des options */
.options-panel {
  display: none;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--or-20);
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.options-panel .option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.options-panel .option-name {
  margin-left: 8px;
  flex-grow: 1;
}
.options-panel .option-price {
  color: var(--or);
  margin-left: 8px;
}

/* Ajoute de l'espace au-dessus de la mention céramique dans le panneau d'options */
.ceramique-note {
  margin-top: 12px;
  display: block;
}
.options-panel input[type="checkbox"] {
  margin-right: 8px;
}
.total-price {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: baseline;
  margin-top: 10px;
  font-size: 1.1rem;
}
.total-label {
  color: var(--muted);
  font-size: 0.95rem;
  margin-right: 4px;
}
.original-price {
  text-decoration: line-through;
  color: var(--marron);
  opacity: 0.7;
}
.final-price {
  color: var(--or);
  font-weight: bold;
}
.option-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}
.option-actions .btn {
  padding: 6px 14px;
  border-radius: 10px;
  border: 1px solid var(--or);
  background: var(--or);
  color: var(--creme);
  cursor: pointer;
  transition: background .2s ease;
}
.option-actions .btn:hover {
  background: var(--or-20);
  color: var(--marron);
}

/* Ajustement de la couleur de l’esperluette dans les boutons de catégorie tarifaire */
.tarif-category .ampersand {
  color: var(--marron);
}

/* Mise en forme des abonnements premium */
#abonnements {
  padding: 96px 0;
}
.abonnements-grid {
  display: grid;
  gap: 18px;
}
@media (min-width: 800px) {
  .abonnements-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.abonnement-card {
  background: var(--card);
  border: 1px solid var(--or-20);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.abonnement-card:hover {
  border-color: var(--or);
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.abonnement-card h3 {
  margin: 0;
  color: var(--or);
  font-family: "Georgia", serif;
  font-size: 1.4rem;
  background: var(--or-20);
  padding: 4px 8px;
  border-radius: var(--radius);
  display: inline-block;
  text-align: center;
}
.abonnement-card .duration {
  font-weight: 600;
  color: var(--marron);
}
.abonnement-card ul {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 12px;
}
.abonnement-card ul li {
  /* Présentation des puces : tiret et texte alignés sur la même ligne */
  margin-bottom: 6px;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
}

/* Abonnements — descendre tout le bloc prix (Clean uniquement) */
#abonnements .abonnement-card:first-child .price-wrapper{
  transform: translateY(148px);
}

.abonnement-card ul li::before {
  content: '\2013';
  /* tiret long comme puce */
  color: var(--or);
  margin-right: 6px;
}

/* Place les prix des abonnements en bas de la carte */
.price-wrapper {
  margin-top: auto;
}

/* Style du prix mensuel en noir (marron) */
.price-month {
  color: var(--marron);
}

/* Spécificités pour la carte "Lavage complet intérieur & extérieur pro" */
.tarif-card.complete {
  /* Utiliser flex pour pousser les prix et actions au bas de la carte */
  display: flex;
  flex-direction: column;
}
.tarif-card.complete .price-lines {
  margin-top: auto;
}
.tarif-card.complete .tarif-actions {
  margin-top: 12px;
}
.tarif-card.complete .ampersand {
  color: var(--marron);
}
.abonnement-card .price {
  font-size: 1.4rem;
  margin: 0;
  color: var(--or);
  font-weight: bold;
}
.abonnement-card .per-month {
  font-size: 0.9rem;
  margin: 0;
  /* Prix mensuel en marron pour davantage de contraste avec le prix total */
  color: var(--marron);
}
.abonnement-card .total {
  font-size: 0.85rem;
  margin: 0;
  color: var(--muted);
}
.abonnement-note {
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}

/* Style pour les lignes d'horaires dans la carte de contact */
.hours-lines .hours-day {
  text-transform: lowercase;
  font-weight: 600;
  color: var(--marron);
}
.hours-lines .hours-time {
  font-weight: 600;
  color: var(--marron);
}
.hours-lines .pill.small {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  background: rgba(198,163,79,0.12);
  color: var(--muted);
  border: 1px solid var(--or-20);
  border-radius: 999px;
  display: inline-block;
  margin-top: 4px;
}

/* Styles pour le bloc optionnel Top Coat dans la section céramique */
.tarif-card.optional {
  border-style: dashed;
  border-color: var(--or-20);
  background: var(--card);
  opacity: 0.95;
}

/* Accentuation du mot « impeccable » dans le titre */
.highlight {
  color: var(--or);
  text-shadow: 0 0 6px rgba(198,163,79,0.4);
}

/* Marque et logo */
.brand-group {
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--marron);
}
.brand-group .logo-img {
  /* Agrandir encore davantage le logo pour qu'il domine l'en‑tête */
  width: 120px;
  height: 120px;
  object-fit: contain;
}
.brand-text {
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-name {
  font-size: 1.2rem;
  font-weight: 700;
  /* Met en avant le nom de la marque en doré */
  color: var(--or);
}
.brand-tagline {
  font-size:0.8rem;
  color:var(--muted);
  font-style:italic;
}

/* Galerie */
.gallery-grid {
  display:grid;
  gap:18px;
}
@media(min-width: 800px){
  .gallery-grid {
    grid-template-columns: repeat(3,1fr);
  }
}
.gallery-item img {
  width:100%;
  height:auto;
  border-radius:var(--radius);
  object-fit:cover;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.show {
  opacity: 1;
  transform: none;
}

/* FAQ */
.faq-item {
  margin-bottom: 12px;
  border: 1px solid var(--or-20);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item button {
  width: 100%;
  text-align: left;
  padding: 16px;
  background: var(--card);
  border: 0;
  color: var(--marron);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item button:hover {
  background: var(--or-20);
}

.faq-item .answer {
  padding: 0 16px 16px;
  display: none;
  background: var(--card);
  color: var(--muted);
}

.faq-item.open .answer {
  display: block;
}

/* Pied de page */
footer {
  padding: 36px 0 80px;
  color: var(--muted);
  border-top: 1px solid var(--or-20);
}

footer a {
  color: var(--muted);
  text-decoration: none;
}

footer a:hover {
  color: var(--marron);
  text-decoration: underline;
}

/* Bouton de retour en haut */
.toTop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.toTop.show {
  opacity: 1;
  pointer-events: auto;
}

.toTop a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--or);
  color: var(--creme);
  text-decoration: none;
  font-weight: 900;
}

/* === Ajustements supplémentaires pour la présentation finale === */
/* Affichage des options : masquer les cases à cocher, totaux et actions pour un rendu uniquement informatif */
.options-panel input[type="checkbox"],
.options-panel .total-price,
.options-panel .option-actions {
  display: none !important;
}

/* Style des éléments d'option : alignement et tiret doré avant chaque option */
.options-panel .option label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.options-panel .option label::before {
  content: "–";
  color: var(--or);
  margin-right: 8px;
}
/* Supprimer la marge initiale sur le nom de l'option pour l'aligner avec le tiret */
.options-panel .option-name {
  margin-left: 0;
}

/* ===== Styles personnalisés pour la nouvelle section Protection céramique ===== */
/* Assure un espacement cohérent pour les cartes céramique */
#ceramique .tarif-cards {
  margin-top: 16px;
}
/* Réduction de la taille des titres sur les cartes mineures pour distinguer visuellement les niveaux */
#ceramique .tarif-card.minor h3 {
  font-size: 1.2rem;
}
/* Style pour la note optionnelle Top Coat sous les cartes */
#ceramique .optional-note {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--muted);
  text-align: center;
}

/* Sous‑lignes des abonnements : affichage en bloc sous l'item avec alignement du texte
   et mise en avant en doré */
.subline {
  display: block;
  margin-left: 0;
}
.subline strong {
  color: var(--or);
  font-weight: 600;
}

/* Justifier les paragraphes de la section À propos pour une largeur homogène */
#about .container p {
  text-align: justify;
}

/* Mise en page de la section Contact & Devis
   Agrandit légèrement la carte "Demande de devis" et réduit la carte "Contact" */
.contact-section .contact-cards {
  display: grid;
  gap: 24px;
}
@media (min-width: 800px) {
  .contact-section .contact-cards {
    grid-template-columns: 2fr 1fr;
  }
}
/* Titre de la carte contact en doré */
/* Titre de la carte contact en doré (prioritaire) */
.contact-card h3 {
  color: var(--or) !important;
  margin-bottom: 12px;
}
/* Alignement compact des éléments de contact */
.contact-card .contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.contact-card .contact-item a {
  color: var(--marron);
  text-decoration: none;
}
/* Liste des horaires disposée en colonnes alignées */
.contact-card .hours-list {
  display: block;
  line-height: 1.35;
}
/* Empêcher la carte contact de s'étirer en hauteur */
.contact-card {
  align-self: flex-start;
}

/* === Améliorations pour la présentation des abonnements === */
#abonnements .abonnement-card ul {
  /* Même couleur que la carte pour éviter tout contraste blanc */
  background: var(--card);
  padding: 12px;
  border-radius: var(--radius);
  margin: 0 0 16px;
}
#abonnements .abonnement-card ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--or-20);
  /* Dispose les éléments sur plusieurs lignes pour que les sous‑lignes apparaissent en dessous du texte principal */
  display: flex;
  flex-direction: column;
}
#abonnements .abonnement-card ul li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
#abonnements .abonnement-card ul li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--or);
}
#abonnements .abonnement-card .duration strong,
#abonnements .abonnement-card ul li strong {
  color: var(--or);
}
#abonnements .abonnement-card .price-wrapper {
  border-top: 1px solid var(--or-20);
  padding-top: 12px;
  margin-top: auto;
}
#abonnements .abonnement-card .price {
  font-size: 1.6rem;
  color: var(--or);
  font-weight: 700;
  margin: 0;
}
#abonnements .abonnement-card .per-month {
  font-size: 0.9rem;
  color: var(--marron);
  margin: 4px 0 0;
}

/* Assure que les sous‑lignes des éléments d’abonnement (par exemple « (jusqu’à 2× sur la période) ») apparaissent sur leur propre ligne
   et correctement indentées sous le texte principal. */
#abonnements .abonnement-card ul li .subline {
  /* Affiche la sous‑ligne sur une nouvelle ligne dans un conteneur flex */
  display: block;
  flex-basis: 100%;
  margin-left: 16px;
  margin-top: 2px;
  font-size: 0.85rem;
}

/* Réduction de la taille des champs du formulaire dans Demande de devis */
/* Ajustement: légèrement plus petits pour un rendu discret */
.contact-section form input[type="text"],
.contact-section form input[type="email"],
.contact-section form input[type="tel"],
.contact-section form textarea {
  padding: 6px 8px;
  font-size: 0.95rem;
}
.contact-section form textarea {
  min-height: 90px;
}

/* Ajustement du titre « Contact & Devis » : texte noir aligné à droite avec un ampersand doré */
/* Ajustement du titre « Contact & Devis » : aligné à gauche. Seul l'esperluette reste dorée. */
#contact h2 {
  color: var(--marron);
  text-align: left;
}
#contact h2 .ampersand {
  color: var(--or);
}

/* Style pour les libellés dans les informations de contact */
.contact-label {
  font-weight: 600;
  color: var(--marron);
  margin-right: 6px;
}

/* Couleur des icônes dans les informations de contact */
.contact-card .contact-icon {
  font-size: 1.2rem;
  color: var(--or) !important;
}

/* === Révision des abonnements : retour au modèle précédent avec améliorations === */
/* Style des cartes d'abonnement sans barre verticale dorée
   et fond crème uniforme. On rétablit un padding normal
   et on supprime la place pour la barre. */
#abonnements .abonnement-card {
  position: relative;
  padding: 24px;
  /* pas d'espace supplémentaire à gauche car la barre dorée a été supprimée */
  border: 1px solid var(--or-20);
  border-radius: var(--radius);
  /* Teinte crème-marron uniformisée pour les cartes d'abonnement */
  background: var(--card);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

/* Supprime la barre verticale dorée en masquant le pseudo-élément */
#abonnements .abonnement-card::before {
  display: none;
}

/* Conserve la mise en forme du titre avec un léger fond doré pâle */
#abonnements .abonnement-card h3 {
  background: var(--or-20);
  color: var(--or);
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 1.4rem;
  font-family: "Georgia", serif;
  display: inline-block;
  margin: 0 0 12px;
}

#abonnements .abonnement-card .duration {
  font-weight: 600;
  color: var(--marron);
  margin-bottom: 8px;
}

/* Bloc de prix harmonisé avec le fond crème et bordure légère */
#abonnements .abonnement-card .price-wrapper {
  border-top: 1px solid var(--or-20);
  padding-top: 12px;
  margin-top: auto;
  /* Harmonise le pied de carte avec le fond crème-marron */
  background: var(--card);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* === Refonte de la section Contact & Devis === */
/* Harmonise les deux cartes avec une barre verticale dorée et des titres dorés */
.contact-section .contact-card,
.contact-section .devis-card {
  background: var(--card);
  border: 1px solid var(--or-20);
  border-left: 4px solid var(--or);
  border-radius: var(--radius);
  padding: 24px 24px 24px 48px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.contact-section .devis-card h3,
.contact-section .contact-card h3 {
  color: var(--or);
  font-size: 1.5rem;
  margin: 0 0 16px;
  font-family: "Georgia", serif;
}

/* Stylise le texte descriptif dans la carte devis */
.contact-section .devis-card p {
  color: var(--muted);
  margin: 0 0 16px;
}

/* Formulaire devis : champs pleine largeur avec bordures arrondies et fond crème clair */
.contact-section .devis-card form label {
  display: block;
  margin-bottom: 12px;
  color: var(--marron);
  font-weight: 600;
}
.contact-section .devis-card form input[type="text"],
.contact-section .devis-card form input[type="email"],
.contact-section .devis-card form input[type="tel"],
.contact-section .devis-card form textarea {
  width: 100%;
  border: 1px solid var(--or-20);
  border-radius: 8px;
  background: var(--creme);
  /* Réduction légère de la hauteur des champs */
  padding: 6px 8px;
  font-size: 0.95rem;
  margin-top: 4px;
}
.contact-section .devis-card form textarea {
  /* Réduction très légère de la hauteur du textarea */
  min-height: 90px;
}

/* Bouton d'envoi : largeur entière pour une meilleure hiérarchie visuelle */
/* Bouton d'envoi : réduit en largeur et taille pour un rendu plus discret */
.contact-section .devis-card form button {
  /* Ajuste la taille et la proportion du bouton « Envoyer la demande ».
     Le bouton adopte la largeur de son contenu pour un rendu harmonieux,
     avec un espacement en dessous pour séparer du texte d’avertissement. */
  margin-top: 16px;
  margin-bottom: 24px;
  width: auto;
  align-self: flex-start;
}

/* Contact : éléments alignés avec icône avant le libellé */
.contact-section .contact-card .contact-item {
  display: flex;
  /* Centre verticalement l’icône et le texte pour un alignement harmonieux */
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.contact-section .contact-card .contact-icon {
  font-size: 1.3rem;
  color: var(--or) !important;
  /* Supprime le décalage vertical des icônes pour alignement */
  margin-top: 0;
}
.contact-section .contact-card .contact-label {
  /* Libellés des informations (Téléphone :, Mail :, Horaire :) en marron foncé et gras */
  font-weight: 700;
  color: var(--marron);
  margin-right: 4px;
}
.contact-section .contact-card a {
  color: var(--marron);
  text-decoration: none;
}
.contact-section .contact-card a:hover {
  text-decoration: underline;
  color: var(--or);
}

/* Ajustement des listes d'horaires pour qu'elles s'alignent verticalement */
.contact-section .hours-list {
  display: block;
  line-height: 1.35;
  color: var(--muted);
}

/* Met en valeur les jours de la semaine dans les horaires */
/* Legacy hours-list kept for backward compatibility (no usage) */
.contact-section .hours-list strong {
  font-weight: 700;
  color: var(--marron);
}

/* Alignement personnalisé des horaires :
   - utilise flex pour aligner l’icône et les lignes verticalement au début ;
   - définit un bloc pour les lignes d’horaires.
*/
.contact-section .contact-card .hours-item {
  /* Spécifie un alignement en haut pour le libellé « Horaire » et son tableau d’horaires
     afin que le libellé reste aligné avec la première ligne (« lundi »). */
  align-items: flex-start;
}

/* ---------------------------------------------------------------------- */
/*                           Modifications ciblées                        */
/* Ces règles supplémentaires s'appliquent aux ajustements demandés par le client. */


/* 1. Alignement du prix de l'abonnement Clean : on réduit le retrait vertical
   pour remonter légèrement le prix afin qu'il soit aligné avec les autres offres. */
#abonnements .abonnements-grid .abonnement-card:first-child .price-wrapper {
  margin-top: 20px;
}

/* 2. Ajout d’un léger espace avant la ligne de prix total dans les abonnements premium */
.abonnement-card .total {
  margin-top: 20px;
}

/* 3. Textes d'horaires de la carte contact : on retire la casse forcée et la graisse */
.contact-card .hours-lines .hours-day,
.contact-card .hours-lines .hours-time {
  text-transform: none;
  font-weight: 400;
}

/* 4. Augmentation de l'espacement du badge « 7 jours sur 7 » pour plus de respirations */
.contact-card .hours-lines .pill.small {
  margin-top: 25px;
}

/* 5. Style pour la mention Top Coat optionnelle dans la section céramique */
.topcoat-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 8px;
  display: block;
}
.topcoat-note .price-value {
  color: var(--or);
  font-weight: 600;
}

/* Style des lignes d'horaires :
   - bloc vertical aligné sous le libellé « Horaire : »
   - couleur atténuée pour les heures ; journées en gras. */
.contact-section .hours-item .hours-lines {
  display: inline-block;
  line-height: 1.35;
  color: var(--muted);
}

/* Mise en valeur des jours de la semaine dans la nouvelle structure des horaires */
.contact-section .hours-item .hours-lines strong {
  font-weight: 700;
  color: var(--marron);
}