/* =================== VINTAGE CARS TOURS - CUSTOM CSS =================== */
/* Version optimisée - Mars 2026                                            */
/* Variables CSS centralisées, responsive amélioré, !important supprimés   */
/* ======================================================================= */


/* ============================================================
   VARIABLES CSS GLOBALES
   ============================================================ */

:root {
  /* Couleurs principales */
  --color-primary:    #b45d00;   /* orange brun - CTA, accents */
  --color-primary-dk: #8e4a00;   /* orange foncé - hover */
  --color-dark:       #1A0A05;   /* brun très foncé - textes forts */
  --color-green:      #446546;   /* vert patrimoine - bordures, accents */
  --color-blue:       #343a84;   /* bleu marine - titres, liens */
  --color-gold:       #ffcc33;   /* or - highlights sombres */
  --color-gold-border:#c8a870;   /* or bordure */
  --color-rust:       #dd6e1d;   /* rouille - hover secondaire */

  /* Fonds */
  --bg-cream:         #fff8ed;   /* crème - cartes, conteneurs */
  --bg-parchment:     #fdf6ec;   /* parchemin - highlight-box */
  --bg-light:         #f9f5ec;   /* fond général clair */
  --bg-white:         #ffffff;   /* blanc pur */

  /* Bordures */
  --border-cream:     #e2cfa0;
  --border-gold:      #c8a870;
  --border-green:     #446546;

  /* Textes */
  --text-dark:        #1A0A05;
  --text-body:        #333333;
  --text-muted:       #7a6040;
  --text-light:       #f0e6d3;

  /* Typographie */
  --font-body:        Verdana, Geneva, Tahoma, sans-serif;
  --font-title:       'Boogaloo', sans-serif;
  --font-ui:          Sintony, sans-serif;
  --font-serif:       Georgia, serif;

  /* Espacements */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  64px;

  /* Ombres */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.07);
  --shadow-md:  0 4px 15px rgba(0,0,0,0.1);
  --shadow-lg:  0 12px 24px rgba(0,0,0,0.2);

  /* Transitions */
  --transition: 0.2s ease;

  /* Rayons */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  15px;
  --radius-pill: 50px;
}


/* ============================================================
   RESET MINIMAL
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}


/* ============================================================
   TEMPLATE HELIX - JOOMLA
   ============================================================ */

#offcanvas-toggler .burger-icon {
  display: none;
}

.logo-image {
  height: 110px !important;
  margin-top: 70px;
}

/* Bandeau contact */
#sp-top-bar {
  background: #f5f5f5;
  border-bottom: 1px solid #e7e7e7;
  height: 45px;
  padding-top: 15px;
}

#sp-top-bar a { color: var(--color-blue); }

#sp-top2 { color: #3d449a; width: 70%; }
#sp-top1 { color: #3d449a; width: 30%; }

#sp-module {
  border-bottom: 1px solid #000;
  box-shadow: 0 3px 3px rgba(0,0,0,0.5);
}

.sp-page-title {
  border-bottom: 1px solid #000;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.65) inset;
}

.sp-page-title .sp-page-title-heading {
  font-size: 2.5rem;
}

#sp-main-body {
  border-bottom: 1px solid #000;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.45);
  padding-top: 50px;
  background-image: url(/images/01.Illustration/template/bg_vieux_papier_G-Tr.webp);
  background-repeat: repeat-y;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50% 50%;
}

.Pos1 {
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.65) inset;
}

/* Langue */
.sp-module .mod-languages {
  margin-top: -30px;
}

/* Article */
.article-list .article {
  border: none;
}

.article-list .article .featured-article-badge,
.article-details .featured-article-badge {
  display: none;
  visibility: hidden;
}

.article-ratings-social-share {
  display: none !important;
}


/* ============================================================
   TYPOGRAPHIE GLOBALE
   ============================================================ */

h1 {
  text-align: center;
  line-height: 1.5;
}

h2 {
  font-family: var(--font-body);
  font-size: 1.3em;
  text-align: center;
}

h3 {
  margin-top: 30px;
  margin-bottom: 20px;
}

/* Titres personnalisés */
h1.tours {
  color: var(--color-primary);
  font-weight: 800;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 10px;
  margin-bottom: 25px;
  font-size: 2rem;
}

h2.tours {
  font-size: 3rem;
  color: var(--color-blue);
  font-family: var(--font-title);
  font-weight: bold;
  margin-bottom: var(--space-lg);
}

h3.tours {
  font-size: 1.8rem;
  color: #026b54;
  font-family: var(--font-title);
  font-weight: bold;
  margin-bottom: var(--space-lg);
}

h3.car {
  font-family: var(--font-title);
  font-size: 2em;
  font-weight: 400;
  color: #026b54;
  text-align: center;
}

blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 1.1rem;
  border-left: 5px solid var(--color-blue);
}


/* ============================================================
   TITRE BANDEAU — PAGE HEADER
   ============================================================ */

.band_titre {
  font-family: var(--font-title);
  font-size: 3.75rem;
  color: #fff;
  text-shadow: 2px 2px 4px #000;
  word-wrap: break-word;
  text-align: center;
  padding-right: 200px; /* laisse de la place au logo Top Gear */
  margin: 0 auto 1.5rem;
}

.band_titre__sub {
  color: #ff0000;
}

/* Conteneur général */
.page-header {
  position: relative;
  text-align: center;
  padding: 2rem 1rem 1rem;
}

/* Logo Top Gear : positionné en haut à droite sur desktop */
.page-header__topgear {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.page-header__topgear img {
  width: 180px;
  height: auto;
  display: block;
}

/* Logo LaDalat : centré */
.page-header__ladalat img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}


/* ============================================================
   EXTENSION SOLIDRES
   ============================================================ */

.sr-experience .tour-name { display: none; }
.tour-header { display: none; }
#expDescription { background: none; }
joomla-tab > joomla-tab-element { border: none; }
.txt-center { text-align: center; }
.sr-experience .tour-info-box { border: none; }

#sr-experience [role="tablist"],
#sr-experience joomla-tab-element + [role="tablist"] {
  display: none;
}

/* Colonne droite */
.col-md-4,
.sp-experience .box-bg {
  background: url("/images/01.Illustration/template/VCT-background_vert_parchemin_3-V.webp");
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(68,101,70,0.9);
}

.sr-experience .text-green,
.sr-exp-adult-price .base-price .text-green {
  color: var(--color-blue);
  font-size: 1.3em;
}

.sr-exp-bookform-container { margin-top: 15px; }

.sr-experience .box-bg { margin-bottom: 0; }

.sr-experience .box-bg,
.sr-experience .box-border {
  border: 1px solid var(--border-green);
  padding-bottom: 20px;
  margin-bottom: 20px;
}

#sr-experience .tour-form {
  background-color: rgba(0,0,0,0.15);
  padding-top: 20px;
}

.sr-experience .booking-header {
  background-color: rgba(0,0,0,0.15);
  border-radius: var(--radius-md);
  width: 70%;
  margin: auto;
  margin-bottom: 20px;
}

.sr-experience .booking-header .tour-price {
  color: var(--color-gold);
  background: none;
}

.sr-experience .header-title,
.sr-experience .booking-header .tour-price {
  font-size: 1.5em;
  color: #fff;
  font-weight: bold;
}

.sr-experience .tour-form .available { display: none; }

.sr-exp-extra-item {
  border: 1px solid #000;
  padding: 5px;
}

.sr-experience .tour-form .exp-extras .extra-name,
.sr-exp-extra-col { font-size: 0.95em; }

.sr-exp-extra-price,
.sr-exp-extra-desc {
  font-family: var(--font-body);
  font-size: 1em;
  color: #000;
}

/* Bouton Book Now */
#sr-experience .btn-primary,
.encart .btn-primary {
  background: var(--color-gold);
  color: #000;
  font-weight: 700;
}

#sr-experience .btn-primary:hover,
.encart .btn-primary:hover {
  background: var(--color-rust);
  color: var(--color-gold);
  border-color: #000;
  font-weight: 700;
}

/* Aide / Contact */
.sr-experience .tour-help a { color: var(--color-gold); }
.sr-experience .tour-help a:hover { color: var(--color-rust); }

.tour-help .box-border {
  background-color: rgba(0,0,0,0.15);
  border: 1px solid #e3e3e3;
}

.tour-help {
  padding-left: 25px;
  margin-bottom: 30px;
  background-color: rgba(0,0,0,0.15);
  margin-top: 20px;
}

.tour-help p {
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  margin: 10px 30px;
}

.tour-help a { line-height: 30px; }
.tour-help .fa,
.tour-help .fab { padding-right: 20px; }

/* CGV Solidres */
.sr-experience .header-title { background: var(--color-green); }
.sr-experience .tour-price-info { font-size: 0.94rem; }

/* Checkout */
.checkout_result {
  background-color: #cac9c9;
  background-image: url(/images/00.Template/bg-checkout.webp);
  background-repeat: no-repeat;
  background-position: top right;
  padding: 50px;
}

.sr-experience .tour-info {
  background: rgba(255,255,255,0.5);
  padding: 20px;
  border: 1px solid #a9a9a9;
}

/* Paiement */
.form-check {
  background-color: #f7faf6;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
}

.form-check .form-check-input {
  float: left;
  margin: 8px 10px 5px 5px;
}

.pascal_pay_title {
  font-size: 1.25rem;
  text-transform: uppercase;
  font-weight: 700;
}

.btn-group { margin-top: 20px; }

#sr-experience-form {
  background: url("/images/01.Illustration/template/VCT-background_vert_parchemin_3.webp") repeat-y;
  padding: 20px;
}

#sr-experience-form a { color: #017C7b; }
#sr-experience-form a:hover { color: #44443b; }
#sr-experience-form .btn-group a { color: #fff; }

.checkout-result {
  color: red;
  font-weight: bold;
}


/* ============================================================
   EXTENSION CK
   ============================================================ */

.beautifulck-title-outer { margin: 20px; }
.carouselck_caption_title { font-size: 80%; }
.carouselck_caption_desc { font-size: 60%; }

.imageeffectck_title { font-size: 1.5rem; }

.titreck-title {
  font-family: var(--font-ui);
  padding: 0 15px;
  line-height: 50px;
  font-size: 1.125rem;
  letter-spacing: 1px;
  font-weight: 500;
}

ul.maximenuck {
  margin-top: -30px !important;
  padding: 0;
}

.effectck-oscar,
.effectck-ming {
  transition: opacity var(--transition);
  border-radius: var(--radius-sm);
}

.effectck-oscar:hover { opacity: 0.8; }


/* ============================================================
   COMPOSANTS PERSONNALISÉS
   ============================================================ */

/* ── Textes articles ── */
.intro-vintage-cars,
.history-ladalat,
.vintage-tour-desc,
.vmp-project {
  line-height: 1.7;
  color: var(--text-body);
  font-size: 1.05rem;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* ── Images ── */
img.bord {
  border: 1px solid #000;
  box-shadow: 10px 18px 38px 0 rgba(0,0,0,0.3);
}

/* ── Answer-First Banner ── */
.vct-answer-first {
 /* background: linear-gradient(135deg, #1a1a1a 0%, #2c1810 100%);*/
  background: var(--bg-cream);
  border: 1.5px solid var(--border-gold);
  border-left: 4px solid var(--color-gold-border);
  padding: 22px 32px;
  margin: 0 0 32px 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.vct-answer-first p {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var( --color-dark);
  margin: 0;
  letter-spacing: 0.02em;
}

.vct-highlight {
  color: var(---color-primary);
  font-weight: bold;
  font-style: italic;
}

/* ── Highlight Box ── */
.highlight-box {
  background: var(--bg-parchment);
  border: 1px dashed var(--color-primary);
  padding: 25px;
  border-radius: var(--radius-md);
  margin: 25px 0;
  display: flow-root;
}

/* ── Expertise Box (E-E-A-T) ── */
.expertise-box {
  background: var(--bg-white);
  border-left: 5px solid var(--color-primary);
  box-shadow: var(--shadow-md);
  padding: 20px;
  margin: 20px 0;
}

.expertise-box h4 {
  color: var(--color-primary);
  margin-top: 0;
}

/* ── Experience Steps ── */
.experience-steps {
  border-left: 3px solid var(--color-primary);
  padding-left: 25px;
  margin: 30px 0;
}

.experience-steps ul {
  list-style: none;
  padding-left: 0;
}

.experience-steps li {
  margin-bottom: 12px;
  position: relative;
}

.experience-steps li::before {
  content: "→";
  color: var(--color-primary);
  font-weight: bold;
  position: absolute;
  left: -20px;
}

/* ── Bouton de réservation (CTA) ── */
.btn-reservation {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 18px 35px;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 4px 6px rgba(180,93,0,0.3);
  border: none;
  cursor: pointer;
}

.btn-reservation:hover {
  background: var(--color-primary-dk);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(180,93,0,0.4);
  color: #fff;
  text-decoration: none;
}

/* ── CTA Section ── */
.cta-section {
  background: #f4f4f4;
  border: 1px solid #ddd;
  padding: 35px;
  border-radius: var(--radius-lg);
  text-align: center;
  margin-top: var(--space-lg);
}

/* ── Cat Frame ── */
.cat-frame {
  border: 2.5px solid #011b0d;
  border-radius: var(--radius-lg);
  background: url('/images/01.Illustration/template/VCT-background_Vert_parchemin_2.webp') center/cover repeat;
  box-sizing: border-box;
  padding: 2.5em 1em;
  box-shadow: inset 0 0 32px 6px rgba(68,101,70,0.18);
  margin: 30px 10px;
}

.cat-frame .btn-lire-suite {
  display: inline-block;
  color: var(--text-dark);
  font-weight: bold;
  font-size: 1.08em;
  padding: 0.65em 2em;
  margin-top: 1.1em;
  letter-spacing: 0.04em;
  text-decoration: none;
  float: right;
}

.cat-frame .btn-lire-suite:hover,
.cat-frame .btn-lire-suite:focus {
  color: #011b0d;
  box-shadow: 0 4px 18px rgba(68,101,70,0.18);
  outline: none;
}

/* ── Témoignage ── */
.testimonial-vct {
  background: var(--color-dark);
  border-radius: var(--radius-md);
  padding: 28px 36px;
  margin: 32px 0;
}

.testimonial-vct p {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-light);
  font-size: 1.05em;
  line-height: 1.7;
  margin: 0 0 10px;
}

.testimonial-vct cite {
  font-size: 0.78em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-border);
  font-style: normal;
}


/* ============================================================
   IMAGES FLOTTANTES — SYSTÈME UNIVERSEL RESPONSIVE
   Couvre : JCE natif + classes custom VCT + Bootstrap legacy
   + conteneurs .image-left / .image-right (modules Joomla)
   ============================================================ */

/* ── GAUCHE ── */
img.image-left,
figure.image-left,
span.image-left,
img.pull-left,
img.perso-float-left,
img.perso-float-left-top,
.perso-float-left img,
.perso-float-left-top img {
  display: block;
  float: left;
  max-width: min(45%, 380px);
  width: auto;
  height: auto;
  margin: 4px var(--space-md) var(--space-sm) 0;
  border-radius: var(--radius-sm);
}

/* ── DROITE ── */
img.image-right,
figure.image-right,
span.image-right,
img.pull-right,
img.perso-float-right,
img.perso-float-right-top,
.perso-float-right img,
.perso-float-right-top img {
  display: block;
  float: right;
  max-width: min(45%, 380px);
  width: auto;
  height: auto;
  margin: 4px 0 var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

/* Si JCE met la classe sur le figure, l'img à l'intérieur hérite */
figure.image-left img,
figure.image-right img,
span.image-left img,
span.image-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── CENTRÉ ── */
img.image-centre,
img.image-center,
figure.image-centre,
figure.image-center {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  height: auto;
}

figure.image-centre img,
figure.image-center img {
  width: 100%;
  height: auto;
}

/* ── Conteneurs div flottants (modules Joomla, mediabox) ── */
.image-right {
  float: right;
  margin: 0 0 1rem 1.5rem;
  max-width: 320px;
}

.image-left {
  float: left;
  margin: 0 1.5rem 1rem 0;
  max-width: 320px;
}

.image-right > *,
.image-left > * {
  max-width: 100%;
  display: block;
}

/* ── CLEARFIX universel ── */
.item-page::after,
.article-fulltext::after,
.blog-featured::after,
.highlight-box::after,
.cat-frame::after,
.intro-vintage-cars::after,
.history-ladalat::after,
.vintage-tour-desc::after,
.vmp-project::after {
  content: '';
  display: table;
  clear: both;
}

/* ── Sécurité globale toutes images articles ── */
.item-page img,
.article-fulltext img {
  max-width: 100%;
  height: auto;
}


/* ============================================================
   LAYOUT GRID — IMAGES + TEXTE / CAR SHEET
   ============================================================ */

/* ── img-text-block : image + texte côte à côte ── */
.img-text-block {
  display: grid;
  gap: var(--space-md);
  align-items: start;
  margin: var(--space-md) 0 var(--space-lg);
  clear: both;
}

.img-text-block.img-left {
  grid-template-columns: minmax(0, 280px) 1fr;
}

.img-text-block.img-right {
  grid-template-columns: 1fr minmax(0, 280px);
}

.img-text-block.img-right img {
  order: 2;
}

.img-text-block.img-right .img-text-content {
  order: 1;
}

.img-text-block img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

.img-text-block .img-text-content {
  font-size: 1em;
  line-height: 1.7;
  color: var(--text-body);
}

/* ── Car Sheet ── */
.car-sheet {
  display: grid;
  grid-template-columns: minmax(0, 320px) 1fr;
  grid-template-rows: auto 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-bottom: var(--space-xl);
  background: var(--bg-cream);
  border: 1.5px solid var(--border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}

.car-sheet-img img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: block;
}

.car-sheet h3.car {
  grid-column: 1 / -1;
  margin-top: 0;
}

.car-sheet-data h3.car {
  margin-top: 0;
}

.car-sheet-data p {
  margin-bottom: 8px;
  font-size: 0.95em;
  line-height: 1.65;
}


/* ============================================================
   MODULE CAR GALLERY
   ============================================================ */

.car-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 60px;
}

.car-gallery a {
  max-width: 20%;
  box-sizing: border-box;
  text-align: center;
}

.car-gallery img {
  width: 100%;
  height: auto;
  max-width: 350px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition);
}

.car-gallery img:hover { transform: translateY(-4px); }


/* ============================================================
   FOOTER
   ============================================================ */

.footer-cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 18px;
  margin: 10px 0;
}

.perso-footer {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 1em;
  color: var(--text-dark);
  position: relative;
}

.perso-footer h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #fff;
}

.perso-footer a {
  color: #fff;
  text-decoration: none;
  transition: color var(--transition);
}

.perso-footer a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.footer-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  border-radius: var(--radius-sm);
  position: relative;
  z-index: 1;
}

.perso-footer .footer-img::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 28%;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  box-shadow: 0 14px 24px -8px rgba(0,0,0,0.55) inset;
  pointer-events: none;
  z-index: 2;
  width: 100%;
}

/* Colonne logos : centrage vertical */
.perso-footer--logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}


/* ============================================================
   CGV - CONDITIONS GÉNÉRALES
   ============================================================ */

.cgv-cooking-container {
  max-width: 800px;
  margin: 0 auto 40px;
  background: var(--bg-cream);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(68,101,70,0.09);
  padding: 32px 28px 28px;
  font-family: var(--font-body);
  border: 1.5px solid var(--border-cream);
}

.cgv-cooking-container h2 {
  color: var(--color-primary);
  margin-top: 0.7em;
  margin-bottom: 1.2em;
  font-weight: bold;
  letter-spacing: 0.5px;
  font-size: 1.5em;
  text-align: center;
}

.cgv-cooking-container strong { color: var(--text-dark); }

.cgv-cooking-container details.dropdown-cgv {
  margin-bottom: 1.2em;
  border-radius: var(--radius-sm);
  background: var(--bg-cream);
  overflow: hidden;
  transition: box-shadow var(--transition);
}

.cgv-cooking-container details[open].dropdown-cgv {
  box-shadow: 0 4px 18px rgba(68,101,70,0.13);
}

.cgv-cooking-container details.dropdown-cgv summary {
  color: var(--color-green);
  font-weight: bold;
  font-size: 1.1em;
  border-left: 4px solid var(--color-gold);
  padding: 12px 18px 12px 14px;
  cursor: pointer;
  outline: none;
  user-select: none;
  transition: background var(--transition), color var(--transition);
  list-style: none;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cgv-cooking-container details.dropdown-cgv summary::-webkit-details-marker,
.cgv-cooking-container details.dropdown-cgv summary::marker { display: none; }

.cgv-cooking-container details.dropdown-cgv summary::after {
  content: "▼";
  font-size: 0.8em;
  color: var(--color-primary);
  transition: transform 0.3s;
  flex-shrink: 0;
}

.cgv-cooking-container details[open].dropdown-cgv summary::after {
  transform: rotate(-180deg);
}

.cgv-cooking-container details.dropdown-cgv ul {
  margin: 0.8em 0 0.8em 1.4em;
  padding: 0 6px;
  color: #444;
  font-size: 1em;
  line-height: 1.7;
}

.cgv-cooking-container details.dropdown-cgv li {
  color: #444;
  font-size: 1em;
  line-height: 1.7;
  margin-bottom: 0.6em;
}


/* ============================================================
   FAQ
   ============================================================ */

.faq-cooking-container {
  margin: 0 auto 40px;
  background: var(--bg-cream);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 12px rgba(68,101,70,0.08);
  padding: 32px 22px 22px;
  font-family: var(--font-body);
  border: 1.5px solid var(--border-cream);
}

.faq-cooking-dropdown {
  border-bottom: 1px solid var(--border-cream);
  margin-bottom: 0.5em;
}

.faq-cooking-dropdown summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.05em;
  padding: 13px 0;
  color: var(--text-dark);
  outline: none;
  transition: color var(--transition);
  list-style: none;
}

.faq-cooking-dropdown summary:hover { color: var(--color-rust); }
.faq-cooking-dropdown[open] summary { color: var(--color-gold); }

.faq-cooking-dropdown p,
.faq-cooking-dropdown ul {
  margin: 0 0 16px;
  padding-left: 0.5em;
  color: var(--text-dark);
  font-size: 1em;
  line-height: 1.7;
}


/* ============================================================
   COMPOSANTS TIMELINE & HISTOIRE LADALAT
   ============================================================ */

/* ── Labels & Séparateurs ── */
.chapter-label {
  font-family: var(--font-ui);
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-primary);
  display: block;
  margin-bottom: 6px;
}

.section-divider {
  border: none;
  border-top: 1px solid var(--color-gold-border);
  margin: 48px 0;
}

/* ── Breadcrumb ── */
.breadcrumb-vct {
  font-size: 0.8em;
  color: var(--text-muted);
  padding: 10px 0 20px;
  font-family: var(--font-body);
}

.breadcrumb-vct a { color: var(--color-primary); text-decoration: none; }
.breadcrumb-vct a:hover { text-decoration: underline; }
.breadcrumb-vct span { color: #999; margin: 0 6px; }

/* ── Key Facts Bar ── */
.keyfacts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 28px 0 36px;
  background: var(--color-gold-border);
  border: 1px solid var(--color-gold-border);
}

.keyfact {
  flex: 1 1 80px;
  background: var(--color-dark);
  padding: 18px 12px;
  text-align: center;
}

.keyfact-number {
  display: block;
  font-family: var(--font-title);
  font-size: 2em;
  color: var(--color-gold);
  line-height: 1;
  margin-bottom: 4px;
}

.keyfact-label {
  font-size: 0.7em;
  color: var(--color-gold-border);
  line-height: 1.3;
}

/* ── Models Grid ── */
.models-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
}

.model-card {
  flex: 1 1 180px;
  background: var(--bg-cream);
  border: 1.5px solid var(--color-gold-border);
  border-radius: var(--radius-sm);
  padding: 18px 16px;
  box-shadow: 0 2px 8px rgba(180,93,0,0.07);
  transition: transform var(--transition), box-shadow var(--transition);
}

.model-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(180,93,0,0.12);
}

.model-tag {
  font-family: var(--font-title);
  font-size: 2em;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 2px;
}

.model-name {
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-green);
  margin-bottom: 8px;
}

.model-card p {
  font-size: 0.88em;
  margin: 0;
  line-height: 1.55;
  color: var(--text-body);
}

/* ── Specs Table ── */
.specs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.88em;
  font-family: var(--font-body);
}

.specs-table thead tr { background: var(--color-dark); }

.specs-table th {
  color: var(--color-gold);
  font-weight: 600;
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px 14px;
  text-align: left;
}

.specs-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-cream);
  color: var(--text-dark);
}

.specs-table tr:nth-child(even) td { background: var(--bg-cream); }

.specs-table td:first-child {
  font-weight: 700;
  color: var(--color-green);
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ── Timeline ── */
.timeline { margin: 32px 0; padding: 0; }

.timeline-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 28px;
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 46px;
  bottom: -28px;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-gold));
}

.timeline-item:last-child::before { display: none; }

.timeline-dot {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: var(--color-dark);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 0.75em;
  color: var(--color-gold);
  text-align: center;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

.timeline-content h4 {
  font-family: var(--font-ui);
  font-size: 0.9em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  margin: 0 0 4px;
}

.timeline-content p {
  margin: 0;
  font-size: 0.88em;
  line-height: 1.6;
  color: #444;
}

/* ── Video Grid ── */
.video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 24px 0;
}

.video-card {
  flex: 1 1 280px;
  background: var(--color-dark);
  border: 1px solid var(--color-gold-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color var(--transition);
}

.video-card:hover { border-color: var(--color-gold); }

.video-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  opacity: 0.85;
  transition: opacity var(--transition);
}

.video-card:hover img { opacity: 1; }

.video-info { padding: 12px 14px; }

.video-info-label {
  font-family: var(--font-ui);
  font-size: 0.65em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-gold);
  display: block;
  margin-bottom: 4px;
}

.video-info p {
  font-size: 0.82em;
  color: #c0a880;
  margin: 0;
  line-height: 1.4;
}

/* ── Whereto Grid ── */
.whereto-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0;
}

.whereto-card {
  flex: 1 1 220px;
  background: var(--bg-cream);
  border: 1.5px solid var(--color-gold-border);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  box-shadow: 0 2px 10px rgba(68,101,70,0.08);
}

.whereto-card .location-tag {
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.whereto-card strong {
  font-family: var(--font-ui);
  font-size: 1em;
  display: block;
  margin-bottom: 8px;
  color: var(--text-dark);
}

.whereto-card p {
  font-size: 0.88em;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #444;
}

.whereto-card a {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-decoration: none;
}

.whereto-card a:hover {
  color: var(--color-rust);
  text-decoration: underline;
}

/* ── Sources ── */
.sources-block {
  background: var(--bg-cream);
  border: 1.5px solid var(--border-cream);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin-top: 48px;
  font-size: 0.82em;
}

.sources-block h3 {
  font-family: var(--font-ui);
  font-size: 0.8em;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-green);
  margin: 0 0 10px;
  font-weight: 700;
}

.sources-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
}

.sources-block li { color: var(--text-muted); }
.sources-block a { color: var(--color-primary); text-decoration: none; }
.sources-block a:hover { text-decoration: underline; }


/* ============================================================
   RESPONSIVE — TOUS LES BREAKPOINTS REGROUPÉS
   ============================================================ */

/* ── Tablette : 601px - 991px ── */
@media (min-width: 601px) and (max-width: 991px) {

  img.image-left,
  figure.image-left,
  span.image-left,
  img.pull-left,
  img.perso-float-left,
  img.perso-float-left-top,
  .perso-float-left img,
  .perso-float-left-top img {
    max-width: min(38%, 280px);
  }

  img.image-right,
  figure.image-right,
  span.image-right,
  img.pull-right,
  img.perso-float-right,
  img.perso-float-right-top,
  .perso-float-right img,
  .perso-float-right-top img {
    max-width: min(38%, 280px);
  }
}

/* ── Tablette : max 768px ── */
@media (max-width: 768px) {

  /* Page header */
  .page-header__topgear {
    position: static;
    text-align: center;
    margin-bottom: 1rem;
  }

  .page-header__topgear img {
    margin: 0 auto;
    width: 140px;
  }

  .band_titre {
    padding-right: 0;
    font-size: 2.3rem;
  }

  /* Footer */
  .perso-footer {
    flex: 1 1 calc(50% - 18px);
  }

  /* Floats modules */
  .image-right,
  .image-left {
    float: none;
    margin: 1rem auto;
    max-width: 100%;
  }

  /* Car sheet */
  .car-sheet {
    grid-template-columns: 1fr;
  }

  .car-sheet-img {
    max-width: 80%;
    margin: 0 auto;
  }
}

/* ── Mobile : max 600px ── */
@media (max-width: 600px) {

  h2.tours { font-size: 2rem; }
  h1.tours { font-size: 1.5rem; }

  .intro-vintage-cars,
  .history-ladalat,
  .vintage-tour-desc,
  .vmp-project { max-width: 100%; }


@media (max-width: 600px) { /* Cache des sections sur mobile */
  #sp-top-bar { /* Bar Adresse horaire et reseaux */ 
    display: none;
  }

  .tour-price-info { /* Solidres=> Price includes, Price Excludes, policy*/
    display: none;
  }
}

  /* Bandeau titre */
  .band_titre { font-size: 2rem; margin-left: 16px; margin-top: 20px; }
  .sp-page-title .sp-page-title-heading { font-size: 1.5rem; }

  /* Footer */
  .perso-footer { max-width: 100%; min-width: 0; }

  /* Car gallery : 1 colonne */
  .car-gallery a { flex-basis: 100%; max-width: 100%; }

  /* Timeline */
  .timeline-dot { width: 36px; height: 36px; font-size: 0.65em; }
  .timeline-item::before { left: 17px; }
  .timeline-item { gap: 12px; }

  /* Keyfacts : 2 par ligne */
  .keyfacts { gap: 1px; }
  .keyfact { flex: 1 1 calc(50% - 1px); padding: 14px 8px; }
  .keyfact-number { font-size: 1.6em; }

  /* Grids : 1 colonne */
  .models-grid,
  .video-grid,
  .whereto-grid { flex-direction: column; }
  .model-card,
  .video-card { flex: 1 1 100%; }

  /* img-text-block : 1 colonne */
  .img-text-block.img-left,
  .img-text-block.img-right {
    grid-template-columns: 1fr;
  }

  .img-text-block.img-right img { order: unset; }
  .img-text-block.img-right .img-text-content { order: unset; }

  /* Specs table : scroll horizontal */
  .specs-table { font-size: 0.78em; display: block; overflow-x: auto; }
  .specs-table th,
  .specs-table td { padding: 7px 8px; }

  /* Floats images */
  img.image-left,
  figure.image-left,
  span.image-left,
  img.image-right,
  figure.image-right,
  span.image-right,
  img.pull-left,
  img.pull-right,
  img.perso-float-left,
  img.perso-float-left-top,
  img.perso-float-right,
  img.perso-float-right-top,
  .perso-float-left img,
  .perso-float-left-top img,
  .perso-float-right img,
  .perso-float-right-top img {
    float: none;
    display: block;
    max-width: 90%;
    width: 90%;
    margin: 0 auto var(--space-sm);
  }

  /* Override float inline JCE */
  .item-page img[style*="float"],
  .article-fulltext img[style*="float"] {
    float: none !important;
    display: block !important;
    max-width: 90% !important;
    margin: 0 auto var(--space-sm) !important;
  }

  /* CGV */
  .cgv-cooking-container { padding: 16px 8px; }
  .cgv-cooking-container details.dropdown-cgv summary { font-size: 1em; padding: 9px 8px; }
  .cgv-cooking-container details.dropdown-cgv ul { margin-left: 1em; }

  /* CTA */
  .cta-section { padding: 20px 16px; }
  .btn-reservation { font-size: 0.9rem; padding: 14px 22px; }
}

/* ── Très petit mobile : max 400px ── */
@media (max-width: 400px) {

  h2.tours { font-size: 1.8rem; }
  h3.tours { font-size: 1.4rem; }
  .band_titre { font-size: 2rem; margin-left: 16px; }
  .vct-answer-first { padding: 16px 18px; }
  .keyfact-number { font-size: 1.4em; }
  .keyfact { padding: 12px 6px; }
  .perso-footer { max-width: 100%; min-width: 0; }
}

/* ── Mobile footer : max 480px ── */
@media (max-width: 480px) {

  .page-header__topgear img { width: 110px; }
  .band_titre { font-size: 1.9rem; }
  .page-header__ladalat img { max-width: 90%; }

  .perso-footer {
    flex: 1 1 100%;
  }
}


/* ============================================================
   FIN DU FICHIER
   ============================================================ */