/* Western Macadam — feuille de style unique (charte officielle WP.com)
   noir #0F0F0F · mustard #FCC861 · crème warm #f7f5e7 · overlay navy #101323
   Font : Plus Jakarta Sans (Google Fonts) — mêmes que le thème WP officiel. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
  --ink: #0F0F0F;
  --mustard: #FCC861;
  --cream: #f7f5e7;         /* warmer que #F5F0E4 (charte visible sur site public) */
  --cream-2: #F5F0E4;
  --white: #FFFFFF;
  --navy: #101323;          /* overlay hero */
  --muted: #6b6b6b;
  --border: #e8e2d0;
  --shadow: 0 2px 12px rgba(0, 0, 0, .06);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, .12);
  --radius: 14px;
  --wrap: 1200px;
  --header-h: 76px;
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font: 400 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-h);
}

img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--mustard);
  transition: text-decoration-color .15s;
}
a:hover { text-decoration-color: var(--ink); }

h1, h2, h3 { font-family: var(--font); letter-spacing: -.015em; font-weight: 700; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ============ HEADER sticky, fond noir ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,.08);
  z-index: 100;
}
.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--white);
  text-decoration: none;
}
.site-brand img {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--mustard);   /* bordure mustard visible sur fond noir */
}
.site-nav {
  display: flex;
  gap: 6px;
  align-items: center;
}
.site-nav a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: rgba(255,255,255,.08); color: var(--white); }
.site-nav a.cur { color: var(--mustard); background: rgba(252,200,97,.12); }
.site-nav a.cta {
  background: var(--mustard);
  color: var(--ink);
  padding: 10px 22px;
  border-radius: 999px;
  margin-left: 8px;
}
.site-nav a.cta:hover { background: var(--white); color: var(--ink); }

.burger { display: none; background: transparent; border: 0; cursor: pointer; padding: 8px; }
.burger span { display: block; width: 24px; height: 2.5px; background: var(--white); margin: 5px 0; border-radius: 2px; transition: transform .2s; }

@media (max-width: 820px) {
  :root { --header-h: 64px; }
  .burger { display: block; }
  .site-brand span { display: none; }
  .site-nav {
    position: absolute;
    top: var(--header-h); left: 0; right: 0;
    background: var(--ink);              /* drawer mobile fond noir */
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    padding: 8px;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 18px; border-radius: 6px; }
  .site-nav a.cta { margin: 8px; text-align: center; }
}

/* ============ HERO cover (image + overlay + texte blanc) ============ */
.hero-cover {
  position: relative;
  min-height: min(794px, 78vh);   /* même valeur que le theme WP (794px fixe) */
  display: flex;
  align-items: center;
  color: var(--white);
  padding: 60px 0;
  overflow: hidden;
  background: var(--navy);
}
.hero-cover {
  --hero-img: url('/assets/img/hero-a60.jpg');
  --hero-pos: 17% 33%;   /* même object-position que le theme WP */
  --hero-dim-top: .45;
  --hero-dim-bot: .55;
  text-align: center;    /* WP theme utilise has-text-align-center */
}
.hero-cover::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,19,35,var(--hero-dim-top)), rgba(16,19,35,var(--hero-dim-bot))),
    var(--hero-img) var(--hero-pos) / cover no-repeat;
  z-index: 0;
}
.hero-cover .wrap { position: relative; z-index: 1; }
.hero-cover .hero-pretitle {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  margin: 0 auto 16px;
  opacity: .9;
  font-weight: 400;
  max-width: 720px;
}
/* Accroche logée dans le h1 : même rendu que le <p> au-dessus du titre, mais
   les mots que l'on cherche (« location de camping-car à Rennes ») comptent
   comme titre de la page pour les moteurs de recherche. */
.hero-cover h1 .hero-pretitle { display: block; letter-spacing: 0; }
.hero-cover h1 {
  font-size: clamp(42px, 7vw, 84px);
  line-height: 1.05;
  margin: 0 auto 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  max-width: 1000px;
}
.hero-cover .tagline {
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.4;
  margin: 0 auto 32px;
  max-width: 620px;
  opacity: .92;
}
.hero-cover .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ============ HERO simple (pages internes, sur cream) ============ */
.hero {
  background: var(--cream);
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}
.hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.hero .tagline {
  font-size: 18px;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 680px;
  line-height: 1.5;
}
.hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============ BOUTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform .1s, background .15s, color .15s, border-color .15s;
  cursor: pointer;
  line-height: 1;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--mustard); color: var(--ink); border-color: var(--mustard); }
.btn-primary:hover { background: var(--ink); color: var(--mustard); border-color: var(--ink); }
.btn-secondary { background: transparent; color: var(--white); border-color: var(--white); }
.btn-secondary:hover { background: var(--white); color: var(--ink); }

/* Sur les pages internes (hero cream) le secondary reprend le style noir */
.hero:not(.hero-cover) ~ * .btn-secondary,
.hero .btn-secondary { color: var(--ink); border-color: var(--ink); background: transparent; }
.hero .btn-secondary:hover { background: var(--ink); color: var(--white); }

/* ============ SECTIONS ============ */
section { padding: 80px 0; }
section h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin: 0 0 20px;
  letter-spacing: -.02em;
  font-weight: 700;
  line-height: 1.15;
}
section .section-intro {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 48px;
  max-width: 640px;
}
section h2.center, section .section-intro.center { text-align: center; }
section .section-intro.center { margin-left: auto; margin-right: auto; }

/* ============ CARDS de fonctionnalités (layout WP officiel) ============
   Structure : titre en haut, image dessous, texte, bouton bas full-width.
   Chaque card = boîte bordurée 1px avec padding généreux. */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 28px;
}
/* auto-fit etire la derniere ligne : avec une seule carte (escapades) elle
   occupait les 1200px du wrap, image comprise. On borne la grille au nombre
   de cartes plutot que de brider les pages a 3 cartes. */
.features:has(> :nth-child(1):last-child) { max-width: 420px; margin: 0 auto; }
.features:has(> :nth-child(2):last-child) { max-width: 800px; margin: 0 auto; }
/* Meme raison a quatre cartes : auto-fit en posait trois puis une quatrieme
   seule, etiree sur toute la largeur. Deux colonnes donnent un carre propre.
   Vaut aussi pour les temoignages, qui sont passes a quatre le 04/09/2026. */
.features:has(> :nth-child(4):last-child),
.testimonials-grid:has(> :nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 940px;
  margin: 0 auto;
}
@media (max-width: 780px) {
  .features:has(> :nth-child(4):last-child),
  .testimonials-grid:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
}
.feat-card {
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 4px;             /* WP theme: coin subtil, pas rond */
  padding: 28px;                  /* --wp--preset--spacing--50 = 28px */
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .25s, box-shadow .25s;
  text-decoration: none;
  color: var(--ink);
}
.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.feat-card h3 {
  margin: 0;
  font-size: 26px;                /* has-large-font-size ≈ 24-28px */
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  order: 1;
}
.feat-card .thumb {
  order: 2;
  aspect-ratio: 16 / 9;           /* image large size-large */
  overflow: hidden;
  border-radius: 0;               /* WP: pas d'arrondi sur les images des cards */
}
.feat-card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s;
}
.feat-card:hover .thumb img { transform: scale(1.03); }
.feat-card p {
  margin: 0;
  color: var(--ink);
  font-size: 14.5px;              /* WP small-font-size */
  line-height: 1.55;
  flex: 1;
  order: 3;
}
.feat-card .more {
  order: 4;
  display: block;
  width: 100%;
  text-align: center;
  color: var(--white);
  background: var(--ink);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 16px 20px;
  border-radius: 999px;
  letter-spacing: .01em;
  border: 2px solid var(--ink);
  transition: background .15s, color .15s, border-color .15s;
}
.feat-card:hover .more { background: var(--mustard); color: var(--ink); border-color: var(--mustard); }

/* ============ TESTIMONIALS ============
   Fond mustard #FCC861 comme le theme WP officiel
   (has-secondary-background-color + has-contrast-color) */
.testimonials {
  background: var(--mustard);
  color: var(--ink);
}
.testimonials h2 { color: var(--ink); }
.testimonials .section-intro { color: var(--ink); opacity: .75; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
}
.quote {
  background: var(--white);
  padding: 32px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  position: relative;
}
.quote::before {
  content: "\201C"; /* “ */
  position: absolute;
  top: 8px; right: 20px;
  font-size: 72px;
  line-height: 1;
  color: var(--mustard);
  font-family: Georgia, serif;
  opacity: .8;
}
.quote .stars { color: var(--mustard); font-size: 18px; margin-bottom: 12px; letter-spacing: 2px; }
.quote p { margin: 0 0 16px; font-style: italic; line-height: 1.65; color: var(--ink); }
.quote .author { font-weight: 700; color: var(--ink); font-size: 14px; }

/* ============ SPECS (icon grid) ============ */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 24px;
  text-align: center;
  padding: 48px 32px;
  background: var(--cream);
  border-radius: var(--radius);
  margin: 40px 0;
}
.spec { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.spec img { width: 44px; height: 44px; opacity: .85; }
.spec span { font-weight: 700; font-size: 14px; }
.spec small { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }

/* ============ GALLERY ============ */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 14px;
  margin: 40px 0;
}
.gallery img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform .3s, box-shadow .3s;
}
.gallery img:hover { transform: scale(1.02); box-shadow: var(--shadow); }

/* ============ ARTICLE / prose ============ */
.article {
  max-width: 820px;
  margin: 0 auto;
}
.article h1 {
  font-size: clamp(32px, 5vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  font-weight: 700;
}
.article .meta { color: var(--muted); font-size: 14px; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 1px; }
.article h2 { font-size: 30px; margin: 56px 0 20px; letter-spacing: -.015em; }
.article h3 { font-size: 22px; margin: 36px 0 14px; }
.article p { margin: 0 0 20px; font-size: 17px; line-height: 1.7; }
.article figure { margin: 32px 0; }
.article figure img { border-radius: var(--radius); }
.article figcaption { color: var(--muted); font-size: 14px; text-align: center; margin-top: 12px; }
.article ul, .article ol { padding-left: 24px; margin: 0 0 24px; font-size: 17px; }
.article li { margin-bottom: 10px; line-height: 1.7; }
.article a { color: var(--ink); font-weight: 600; }

/* ============ CONTACT block ============ */
.contact-block {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 60px 40px;
  text-align: center;
}
.contact-block h2 { margin: 0 0 16px; }
.contact-block p { max-width: 540px; margin: 0 auto 28px; color: var(--muted); font-size: 17px; }
.contact-details { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.contact-details a { color: var(--ink); text-decoration: none; font-weight: 700; padding: 10px 20px; background: var(--white); border-radius: 999px; border: 1px solid var(--border); }
.contact-details a:hover { background: var(--ink); color: var(--mustard); }
/* .btn-secondary est dessine pour un hero sombre : texte et bordure blancs.
   Dans un .contact-block (fond cream) il etait donc blanc sur cream, soit
   invisible -- c'etait le cas du bouton "Nous ecrire" de l'accueil. La regle
   de rattrapage existante ne visait que les pages ayant un .hero, or l'accueil
   n'a qu'un .hero-cover. */
.contact-block .btn-secondary { color: var(--ink); border-color: var(--ink); }
.contact-block .btn-secondary:hover { background: var(--ink); color: var(--white); }

/* Meme piege pour les deux liens vers les documents voyageurs de la page
   camping-car : ils sont dans le corps de page (fond blanc), donc blancs sur
   blanc, donc invisibles depuis toujours. Et .cta-row n'est mise en flex que
   dans un hero -- ailleurs elle ne fait rien du tout. */
.docs-voyageurs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 28px; }
.docs-voyageurs .btn-secondary { color: var(--ink); border-color: var(--ink); }
.docs-voyageurs .btn-secondary:hover { background: var(--ink); color: var(--white); }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--ink);
  color: var(--cream);
  padding: 60px 0 20px;
}
.site-footer .wrap {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.site-footer h4 { color: var(--mustard); font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 16px; font-weight: 700; }
.site-footer a { color: var(--cream); text-decoration: none; display: block; padding: 6px 0; font-size: 14px; }
.site-footer a:hover { color: var(--mustard); }
.site-footer p { color: var(--cream); margin: 0 0 12px; font-size: 14px; line-height: 1.6; opacity: .85; }
.site-footer .legal { padding: 20px 20px 0; border-top: 1px solid rgba(255,255,255,.1); margin-top: 40px; font-size: 12px; opacity: .6; text-align: center; grid-column: 1 / -1; }

/* ============ Utilities ============ */
.center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 40px; }

/* ============ CARTES DE CONTACT ============
   .feat-card attend une image (thumb) et un bouton pill pleine largeur : le
   détourner pour deux cartes sans visuel donnait un bouton noir collé aux
   bords et l'adresse mail entière en guise de libellé. Composant dédié. */
.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 24px;
  max-width: 880px;      /* sinon 2 cartes s'étirent sur les 1200px du wrap */
  margin: 0 auto;
}
.ccard {
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .25s, box-shadow .25s;
}
.ccard:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.ccard.accent { background: var(--cream); }
.ccard .ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mustard);
  font-size: 24px;
  line-height: 1;
}
.ccard h3 { margin: 0; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.ccard p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; flex: 1; }
.ccard .go {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--mustard);
  overflow-wrap: anywhere;   /* l'adresse mail est longue sur petit écran */
}
.ccard .go::after { content: "\2192"; transition: transform .2s; }
.ccard:hover .go::after { transform: translateX(4px); }

/* ============ FAQ ============ */
.faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 36px 48px;
  max-width: 900px;    /* borne a 2 colonnes : a 3, la 4e question restait orpheline */
  margin: 0 auto;
}
.faq h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }
.faq p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.faq a { color: var(--ink); font-weight: 600; }

/* .feat-card avec un wrapper .body (escapades) : le wrapper interrompt le flex
   de la carte, donc gap et order ne s'appliquaient plus au contenu. */
.feat-card .body { display: flex; flex-direction: column; gap: 16px; flex: 1; order: 3; }

/* Sous ~420px, la carte "Nous ecrire" fait 284px utiles pour une adresse de
   31 caracteres : a 15px gras elle deborde tout juste. */
@media (max-width: 420px) {
  .ccard { padding: 26px 22px; }
  .ccard .go { font-size: 14px; }
}

/* ============ Ajustements mobile ============ */
/* Constate sur un telephone (390px de large) le 04/09/2026, sur le bloc de fin
   de l'accueil : il gardait ses 60px/40px de padding a l'interieur d'un wrap
   deja marge de 24px, soit ~262px utiles. Le paragraphe centre tombait sur
   neuf lignes et « Reserver le camping-car » se coupait en deux. Trois
   corrections : moins de padding, des sections moins espacees (80px en haut ET
   en bas se voit surtout sur un ecran haut et etroit), et des boutons pleine
   largeur empiles plutot que des pastilles qui se coupent. */
@media (max-width: 640px) {
  section { padding: 56px 0; }

  .contact-block { padding: 36px 22px; }
  .contact-block p { margin-bottom: 24px; }

  /* .cta-row n'est en flex que dans un hero : il faut le poser ici avant de
     pouvoir empiler (flex-direction seul ne ferait rien sur un bloc). */
  .contact-block .cta-row,
  .cta-row.centre,
  .docs-voyageurs,
  .passerelle .cta-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .contact-block .cta-row .btn,
  .cta-row.centre .btn,
  .docs-voyageurs .btn,
  .passerelle .cta-row .btn { width: 100%; justify-content: center; }
}

/* ============ Citations de sources ============ */
/* Les <cite> des escapades affichent l'URL brute de la source : sans point de
   césure, elle déborde la page sur mobile et provoque un défilement latéral. */
cite a { overflow-wrap: anywhere; }