/* ==========================================================================
   refonte.css — couche d'harmonisation des pages de voyages
   --------------------------------------------------------------------------
   Se charge APRÈS style.css et responsive.css : c'est une couche de reskin,
   pas un remplacement. Le balisage des pages n'est pas touché — seules les
   couleurs, la typographie et les rythmes sont réalignés sur la page
   d'accueil refondue (index.html).

   Portée volontairement limitée aux pages qui incluent ce fichier :
   voyages.html et les trois articles de voyage. Les pages de recettes et
   l'aide de Tramontane (aide/) ne l'incluent pas et sont donc intactes.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=Libre+Baskerville:ital@0;1&family=Mulish:wght@300;400;600&display=swap');

:root {
  --creme:        #f0e8de;
  --sable:        #e2d9cd;
  --tan:          #cebfa7;
  --sarcelle-pal: #ccdddc;
  --sarcelle:     #a4c4c3;
  --sarcelle-txt: #748c8c;
  --gris:         #434343;

  --serif:  "Playfair Display", "Times New Roman", serif;
  --serif2: "Libre Baskerville", Georgia, serif;
  --sans:   "Mulish", Arial, Helvetica, sans-serif;
}

/* ---------- fond et texte courant ---------- */

body {
  background: #fff;
  color: var(--gris);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.85;
}

p, li { font-family: var(--sans); font-weight: 300; color: var(--gris); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; }

a { color: inherit; }

/* ---------- en-tête ---------- */

.minimal-header {
  background: #fff;
  border-bottom: 1px solid var(--sable);
  box-shadow: none;
}

.header-nav .nav-left a,
.header-nav .nav-right a {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris);
  text-decoration: none;
}
.header-nav .nav-left a:hover { color: var(--sarcelle-txt); }

/* Le titre du site était en Zen Loop (script) : on l'aligne sur le
   lettrage de la page d'accueil. */
.site-title {
  font-family: var(--serif) !important;
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gris);
}

.social-links .social-icon,
.header-nav .nav-right .social-icon {
  color: var(--sarcelle-txt);
  background: transparent;
  border: none;
}

/* ---------- titres de section ---------- */

.category-main-title,
.services-title,
.section-title,
.elegant-title-main {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gris);
}

.category-main-title { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 3rem; }

/* ---------- grille des voyages ---------- */

.voyages-category-section { background: #fff; }

.voyage-card a { text-decoration: none; }

.voyage-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform .8s cubic-bezier(.2,.7,.3,1);
}
.voyage-card { overflow: hidden; }
.voyage-card a { display: block; overflow: hidden; }
.voyage-card:hover img { transform: scale(1.05); }

.voyage-title,
.voyage-title a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: var(--gris);
  text-decoration: none;
}
.voyage-title a:hover { color: var(--sarcelle-txt); }

/* ---------- corps d'article ---------- */

/* Dernier vestige de Zen Loop : le titre d'article. Même spécificité que la
   règle de style.css, mais refonte.css se charge après, donc elle l'emporte. */
.article-hero-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}

/* style.css:3439 donne à la seule page Manic-5 un titre en Arapey
   (`body[data-page="manic5"] .article-hero-title`, spécificité 0-2-1). Sans
   cette règle, le site afficherait deux serifs différents selon l'article. */
body[data-page] .article-hero-title { font-family: var(--serif); }

.article-hero-text h2,
.article-hero-content h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .01em;
}

.article-hero-text p,
.article-hero-content p { font-family: var(--sans); font-weight: 300; }

.gallery-item img,
.gallery-item-large img,
.story-full-image img {
  border-radius: 0;
  box-shadow: none;
}

.hero-title-overlay { letter-spacing: .18em; text-transform: uppercase; }

/* style.css:4210 déclare `.hero-title-overlay .elegant-title-main` en Zen Loop
   (script) avec une spécificité 0-2-0, qui battait la règle groupée plus haut.
   La règle de base `.elegant-title-main` était déjà en Playfair : seule la
   variante en surimpression déviait. */
.hero-title-overlay .elegant-title-main { font-family: var(--serif); }

/* Étiquette de catégorie (« Voyage ») posée sur l'image d'ouverture. */
.featured-tag,
.product-category {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sarcelle-txt);
  background: transparent;
}

/* ---------- cartes latérales et bas de page ---------- */

.top-intro-section { background: var(--creme); }

.about-card,
.tags-card,
.subscribe-card {
  background: #fff;
  border: 1px solid var(--sable);
  border-radius: 0;
  box-shadow: none;
}

.about-title,
.tags-title,
.subscribe-title,
.friends-header {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sarcelle-txt);
}

.tag-item {
  font-family: var(--sans);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gris);
  background: transparent;
  border: 1px solid var(--tan);
  border-radius: 0;
  text-decoration: none;
}
.tag-item:hover { background: var(--tan); color: #fff; }

.subscribe-card { background: var(--sable); }
.subscribe-overlay { background: transparent; }

.service-btn,
.subscribe-btn,
.browse-all-btn,
.btn-read-more {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gris);
  background: transparent;
  border: 1px solid var(--gris);
  border-radius: 0;
  padding: .9rem 2rem;
  cursor: pointer;
  text-decoration: none;
  transition: background .35s ease, color .35s ease;
}
.service-btn:hover,
.subscribe-btn:hover,
.browse-all-btn:hover,
.btn-read-more:hover { background: var(--gris); color: var(--creme); }

.service-card {
  background: #fff;
  border: 1px solid var(--sable);
  border-radius: 0;
  box-shadow: none;
}
.service-icon { color: var(--tan); }
.service-card h3 { font-family: var(--serif2); font-weight: 400; font-size: 1.05rem; }

.product-card img { border-radius: 0; box-shadow: none; aspect-ratio: 4 / 5; object-fit: cover; }
.product-card h3 { font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.4; }

/* ---------- pied de page ---------- */

.site-footer {
  background: var(--gris);
  color: var(--creme);
  border-top: none;
}
.site-footer p { color: var(--creme); }
.site-footer a { color: var(--creme); }
.footer-tramontane { opacity: .7; }