/*
 * Couches d empilement historiques, extraites de style.css.
 *
 * Ces blocs ont ete ecrits pour ecraser les styles propres a chaque page.
 * Tant qu ils etaient charges en tete de cascade, ils ne le pouvaient que
 * par !important. Les separer permet de les charger en dernier, la ou est
 * leur place.
 */

/* MIAOUCRATIE-TITLE-V2 */
body .faq-hero .hero-title,
body .tarifs-hero h1,
body.carte-page .zone-header h2,
body .cgv-title,
body .container > header h1,
body .hero-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  /* Ces deux-la portent encore, et seulement sur le titre de la FAQ : le
     selecteur « body .faq-hero .hero-title » est plus specifique que celui de
     la couche TITLES-V5, qui imposerait sinon 1.08 et -0.02em. */
  letter-spacing: -3px !important;
  line-height: 1 !important;
  color: var(--deep, #1E1812);
}
body .faq-hero .hero-title,
body .tarifs-hero h1,
body .container > header h1,
body .hero-title {
  font-size: clamp(52px, 7vw, 88px);
}
body.carte-page .zone-header h2,
body .cgv-title {
  font-size: clamp(32px, 5vw, 64px);
}
body .faq-hero .hero-sub,
body .tarifs-hero-sub,
body.carte-page .zone-desc,
body .cgv-header p,
body .container .subtitle {
  font-family: 'DM Sans', sans-serif;
  color: var(--muted, #7A6B5E);
  line-height: 1.8;
}
body.tarifs-page .tarifs-bg > .section > h2,
body.tarifs-page .tarifs-bg h2.tarifs-duplicate-title {
  display: none;
}



/* MIAOUCRATIE-STANDALONE-V2 */
body.standalone-page {
  background: var(--cream, #FBF7F0);
  color: var(--deep, #1E1812);
}
/* MIAOUCRATIE-FADE-V4 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
body > *:not(script):not(style):not(link):not(meta):not(title) {
  animation: fadeUp .7s ease both;
}
body > *:nth-child(2) { animation-delay: .03s; }
body > *:nth-child(3) { animation-delay: .06s; }
body > *:nth-child(4) { animation-delay: .09s; }
body > *:nth-child(5) { animation-delay: .12s; }
body > *:nth-child(6) { animation-delay: .15s; }

/* MIAOUCRATIE-TITLES-V5 */
body h1,
body h2,
body h3,
body .hero-title,
body .section-title,
body .acc-question,
body .cgv-title,
body.carte-page .zone-header h2,
body.calculateur-page h1,
body .tarifs-hero h1 {
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.08 !important;
  color: var(--N, #1A1A1A) !important;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
body .hero-title,
body .tarifs-hero h1,
body .cgv-title,
body.carte-page .zone-header h2,
body.calculateur-page h1 {
  font-size: clamp(52px, 7vw, 88px) !important;
}
body h2,
body .section-title,
body .acc-question {
  font-size: clamp(22px, 2.3vw, 30px) !important;
}
body h3 {
  font-size: clamp(18px, 1.8vw, 24px) !important;
}
body .hero-title em,
body .tarifs-hero h1 em,
body .cgv-title em,
body.carte-page .zone-header h2 em,
body.calculateur-page h1 em {
  color: var(--T, #A8472A);
  font-style: italic;
  font-weight: 400;
}
body .hero-sub,
body .tarifs-hero-sub,
body .subtitle,
body .cgv-header p,
body.carte-page .zone-desc,
body.calculateur-page .subtitle {
  font-family: 'DM Sans', sans-serif;
  color: var(--muted, #7A6B5E);
  line-height: 1.8;
}
body .section-label,
body .hero-eyebrow,
body .cta-eyebrow {
  font-family: 'DM Sans', sans-serif;
  color: var(--T, #A8472A);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.tarifs-page .tarifs-hero-cta .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
body.tarifs-page .tarifs-hero-cta .btn-secondary {
  display: none;
}
body.tarifs-page .tarifs-bg > .section > h2,
body.tarifs-page .tarifs-bg .section-label {
  display: none;
}



/* MIAOUCRATIE-STANDALONE-V4 */
body.standalone-page,
body.calculateur-page,
body.cgv-page,
body.carte-page {
  background: var(--cream, #FBF7F0);
  color: var(--deep, #1E1812);
}
body.standalone-page,
body.calculateur-page,
body.cgv-page,
body.carte-page {
  margin: 0;
  padding: 0;
  display: block;
}
body.standalone-page .topbar,
body.calculateur-page .topbar,
body.cgv-page .topbar,
body.carte-page .topbar {
  position: sticky;
  top: 0;
}
body.calculateur-page .container {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 48px 20px 80px;
  position: relative;
  z-index: 1;
}
body.calculateur-page header {
  text-align: center;
  margin-bottom: 48px;
}
body.cgv-page .cgv-wrapper {
  max-width: 760px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}
body.cgv-page .cgv-header {
  text-align: center;
}
body.cgv-page .cgv-brand {
  margin-left: auto;
  margin-right: auto;
}
body.cgv-page .brand-rule {
  margin-left: auto;
  margin-right: auto;
}


/* ── TOPBAR ───────────────────────────────────────────
   Seule definition de la barre sur tout le site. Elle en a compte quatre :
   les couches TOPBAR-V2 et V4, une feuille topbar.css chargee sur trois
   pages, et une copie inline sur trois autres. Toute modification de la barre
   se fait ici, et nulle part ailleurs. */
.topbar {
  position: sticky; top: 0; z-index: 200;
  background: var(--deep, #1E1812);
  display: flex; align-items: center;
  width: 100%; justify-content: space-between; flex-wrap: wrap;
  gap: 16px 20px;
  padding: 0 40px; min-height: 50px;
  animation: none !important;
}
.topbar a {
  color: var(--light, #D4BEA8);
  text-decoration: none;
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.topbar a:hover { color: var(--peach, #F2CDB0); }
.topbar .sep { width: 1px; height: 16px; background: rgba(255,255,255,0.15); }
.topbar a:focus-visible,
.tmenu-panel a:focus-visible {
  outline: 2px solid rgba(242,205,176,0.8);
  outline-offset: 2px;
}
.tmenu-wrap { position: relative; flex-shrink: 0; }
.tmenu-btn {
  background: none; border: none; cursor: pointer;
  color: var(--light, #D4BEA8);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 0; transition: color 0.2s;
}
.tmenu-btn:hover { color: var(--peach, #F2CDB0); }
.tmenu-panel {
  /* display géré via style inline JS */
  flex-direction: column; gap: 2px;
  position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 200px; padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--deep, #1E1812);
  box-shadow: 0 20px 48px rgba(0,0,0,0.4);
  z-index: 1000;
}
.tmenu-panel a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 8px;
  color: var(--light, #D4BEA8);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px; font-weight: 400;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.tmenu-panel a:hover { background: rgba(255,255,255,0.07); color: var(--cream,#FBF7F0); }
/* Les pictogrammes sont decoratifs : ils portent aria-hidden, l'intitule reste
   le seul contenu lu. Legerement en retrait au repos pour que le mot garde la
   priorite, pleins des que la ligne est survolee ou courante. */
.tmenu-panel a svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; transition: opacity .15s; }
.tmenu-panel a:hover svg,
.tmenu-panel a.is-current svg { opacity: 1; }
.tmenu-panel a.is-current { color: var(--peach,#F2CDB0); background: rgba(242,205,176,0.08); }
/* Reservation ferme le menu et porte la conversion. Un filet et une graisse
   plus forte la detachent des pages d'information, sans lui prendre la couleur
   qui signale la page courante. */
.tmenu-panel a.is-cta {
  font-weight: 600;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.topbar-links {
  margin-left: auto; display: flex; align-items: center; gap: 16px;
}
.topbar-links a {
  color: var(--light,#D4BEA8); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s; font-family: 'DM Sans', sans-serif;
}
.topbar-links a:hover { color: var(--peach,#F2CDB0); }
.tsep { width: 1px; height: 16px; background: rgba(255,255,255,0.12); flex-shrink: 0; }
/* ── PIED DE PAGE ─────────────────────────────────────
   Repris de topbar.css, supprimee : la barre et le pied y etaient definis une
   troisieme fois, apres cette feuille, pour trois pages seulement. */
.footer-bar {
  background: var(--deep, #1E1812);
  padding: 28px 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px; width: 100%;
}
.footer-bar .footer-logo { display: flex; align-items: center; gap: 12px; }
.footer-bar .footer-logo img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; opacity: .9;
}
.footer-bar .footer-logo span {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: var(--cream,#FBF7F0);
}
.footer-bar .footer-logo em { color: var(--terracotta,#C8603A); font-style: italic; }
.footer-bar .footer-links { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.footer-bar .footer-links a {
  color: var(--sand,#B89B80); text-decoration: none; font-size: 13px;
  font-family: 'DM Sans', sans-serif; transition: color .2s;
}
.footer-bar .footer-links a:hover { color: var(--peach,#F2CDB0); }
/* .55 et pas .4 : a .4 les liens legaux rendaient 2,52:1 sur le fond sombre,
   sous le seuil AA de 4,5:1. Mesure a .55 : 5,68:1. Voir aussi la suppression
   de l'opacite de .footer-legal dans style.css, qui se cumulait a cet alpha. */
.footer-bar .footer-legal {
  font-size: 12px; color: rgba(255,255,255,.55); font-family: 'DM Sans', sans-serif;
}
.footer-bar .footer-legal a {
  color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s;
}
.footer-bar .footer-legal a:hover { color: rgba(255,255,255,.7); }
/* Les titres des sections sombres etaient forces en blanc pur ici. Une regle
   posterieure les rendait en creme, et c'est ce qui s'affichait : remonter
   cette couche en fin de cascade aurait donc change le rendu de l'accueil,
   seule page portant ces elements. Declaration retiree. */
/* FAQ CTA */
/* Porte : sans priorite, le titre du bloc d appel de la FAQ repasse en sombre
   sur son fond fonce. */
.faq-cta .cta-title { color: #fff !important; }
/* Responsive topbar */
@media (max-width: 900px) {
  /* 20px comme topbar.css et comme le bloc inline de chaque page. La valeur
     de 24px ne subsistait que sur les pages ou cette couche gagnait, d'ou une
     barre plus large sur carte, reservation et mentions legales. */
  .topbar { padding: 0 20px; }
}
@media (max-width: 768px) {
  /* La barre passe a la ligne a cette largeur : sans cet interstice, elle
     perd 4px de hauteur et tout ce qu'elle contient remonte. */
  .topbar { gap: 12px 14px; }
  .topbar-links { gap: 12px; }
  /* Le separateur et l'adresse mail disparaissent ici, comme le faisait
     topbar.css. Cette feuille les masquait a 600px : selon la page, la barre
     se degarnissait donc a deux largeurs differentes. */
  .tsep { display: none; }
  .topbar-links a[href^="mailto"] { display: none; }
  .footer-bar { flex-direction: column; text-align: center; padding: 24px 20px; }
  .footer-bar .footer-links { justify-content: center; }
}
@media (max-width: 600px) {
  .topbar-links { gap: 8px; }
  .topbar-links a span { display: none; }
}

/* ── FAQ final CTA secondary button ── */
.faq-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 194px;
  padding: 14px 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: #F6E8DB;
  border: 1.5px solid rgba(242,205,176,0.42);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.faq-cta-secondary:hover,
.faq-cta-secondary:focus-visible {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(242,205,176,0.72) !important;
  color: #FFF8F2 !important;
  transform: translateY(-1px);
}

  /* ── AVIS (preuve sociale — carrousel, flèches extérieures, tons clairs) ── */
  .avis-bg { background: rgba(200,96,58,0.06); border-top: 1.5px solid rgba(200,96,58,0.18); border-bottom: 1.5px solid rgba(200,96,58,0.18); }
  .avis-rating { font-size: 15px; color: var(--mid); margin: 14px 0 28px; }
  .avis-rating .avis-stars { color: var(--terracotta); letter-spacing: 2px; }
  .avis-rating a { color: var(--rust); text-underline-offset: 2px; }
  .avis-carousel { display: flex; align-items: center; gap: 10px; }
  .avis-grid { flex: 1 1 auto; min-width: 0; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 12px; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .avis-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .avis-nav { flex: 0 0 auto; background: none; border: none; padding: 0; color: var(--rust); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: color .2s, transform .2s, opacity .2s; }
  .avis-nav:hover { color: var(--deep); }
  .avis-nav.avis-prev:hover { transform: translateX(-3px); }
  .avis-nav.avis-next:hover { transform: translateX(3px); }
  .avis-nav:focus-visible { outline: none; color: var(--deep); }
  .avis-nav.is-off { opacity: 0; pointer-events: none; }
  .avis-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; scroll-snap-align: start; background: #fff; border-radius: 20px; padding: 30px; border: 1.5px solid var(--warm); display: flex; flex-direction: column; transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s; }
  .avis-card:hover { box-shadow: 0 16px 48px rgba(30,24,18,0.1); transform: translateY(-4px); border-color: var(--peach); }
  .avis-card .avis-stars { color: var(--terracotta); letter-spacing: 2px; font-size: 15px; margin-bottom: 14px; display: block; }
  .avis-card blockquote { font-size: 14px; color: var(--mid); line-height: 1.7; margin: 0 0 18px; quotes: none; }
  .avis-card figcaption { margin-top: auto; }
  .avis-name { display: block; font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 600; color: var(--deep); }
  .avis-meta { display: block; font-size: 12px; color: var(--sand); margin-top: 2px; }
  @media (max-width: 860px) { .avis-card { flex-basis: calc((100% - 20px) / 2); } }
  @media (max-width: 768px) { .avis-nav { display: none; } }
  @media (max-width: 560px) { .avis-card { flex-basis: 100%; padding: 24px; } }