/*
 * ═══════════════════════════════════════════════════════════════
 *   L'ERMITAGE — LOURDES — Feuille de style principale
 *   Version 1.0
 * ═══════════════════════════════════════════════════════════════
 *
 *  TABLE DES MATIÈRES
 *  ─────────────────────────────────────────────────────────────
 *  01. Variables CSS (couleurs, typographie, espacements)
 *  02. Reset & Base
 *  03. Utilitaires (conteneur, boutons, badges)
 *  04. Navigation
 *  05. Hero
 *  06. Section Histoire
 *  07. Section Collections
 *  08. Section Témoignages
 *  09. Section Visiter
 *  10. Footer
 *  11. Animations & Transitions
 *  12. Responsive (media queries)
 * ═══════════════════════════════════════════════════════════════
 */


/* ═══════════════════════════════════════════════════════════════
   01. VARIABLES CSS
   MODIFIER ICI : couleurs, polices, espacements
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* — Palette de couleurs (inspirée du Grand Hôtel L'Ermitage : crème chaud + terres) —
     Note : les noms de variables restent "--bleu…" pour compatibilité, mais les
     valeurs sont désormais des tons chauds (espresso, taupe, terracotta). */
  --creme:         #F0ECE9; /* Fond principal, crème chaud */
  --creme-fonce:   #E5DCD3; /* Fond secondaire, légèrement plus profond */
  --pierre:        #C1A58B; /* Taupe, couleur d'accent principale */
  --pierre-clair:  #D8C6B4; /* Version plus claire */
  --or:            #9D3416; /* Terracotta profond pour les hover / accents forts */
  --bleu:          #2A211B; /* Espresso : nav, footer, sections sombres */
  --bleu-moyen:    #3D2F25; /* Brun moyen */
  --bleu-clair:    #5A4636; /* Brun clair */
  --texte:         #241C16; /* Texte principal, quasi-noir chaud */
  --texte-doux:    #5C5048; /* Texte secondaire */
  --texte-pale:    #8A7C70; /* Texte tertiaire */
  --blanc:         #FFFFFF;
  --noir:          #120D0A;

  /* — Typographie (équivalents gratuits des polices du Grand Hôtel L'Ermitage) — */
  --police-titre:  'Playfair Display', Georgia, 'Times New Roman', serif;  /* ~ PP Editorial New (test) */
  --police-corps:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ~ GT America */

  /* — Tailles de police (responsive, clamp) — */
  --taille-hero:    clamp(2.8rem, 7vw, 5.5rem);
  --taille-h2:      clamp(2rem, 4vw, 3.2rem);
  --taille-h3:      clamp(1.2rem, 2vw, 1.6rem);
  --taille-corps:   clamp(0.95rem, 1.5vw, 1.05rem);

  /* — Espacements — */
  --espace-2xs: 0.25rem;
  --espace-xs:  0.5rem;
  --espace-sm:  1rem;
  --espace-md:  1.5rem;
  --espace-lg:  2.5rem;
  --espace-xl:  4rem;
  --espace-2xl: 6rem;
  --espace-3xl: 9rem;

  /* — Conteneur — */
  --largeur-max: 1180px;
  --padding-lateral: clamp(1.25rem, 5vw, 3rem);

  /* — Ombres — */
  --ombre-xs:  0 1px 4px rgba(0,0,0,0.06);
  --ombre-sm:  0 4px 16px rgba(0,0,0,0.08);
  --ombre-md:  0 8px 32px rgba(0,0,0,0.10);
  --ombre-lg:  0 16px 56px rgba(0,0,0,0.14);
  --ombre-or:  0 8px 30px rgba(157,52,22,0.25);

  /* — Transitions — */
  --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-rapide: 0.2s ease;

  /* — Rayons — */
  --rayon-sm:  4px;
  --rayon-md:  8px;
  --rayon-lg:  16px;
  --rayon-xl:  24px;

  /* — Navigation — */
  --nav-hauteur: 72px;
  --nav-hauteur-mobile: 64px;
}


/* ═══════════════════════════════════════════════════════════════
   02. RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--police-corps);
  font-size: var(--taille-corps);
  color: var(--texte);
  background-color: var(--creme);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

address {
  font-style: normal;
}

button {
  cursor: pointer;
  font-family: inherit;
}

/* Accessibilité : focus visible */
:focus-visible {
  outline: 3px solid var(--pierre);
  outline-offset: 3px;
  border-radius: var(--rayon-sm);
}

/* Skip link pour l'accessibilité clavier */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--bleu);
  color: var(--blanc);
  padding: 0.75rem 1.25rem;
  border-radius: var(--rayon-md);
  font-weight: 500;
  z-index: 9999;
  transition: top var(--transition-rapide);
}
.skip-link:focus {
  top: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   03. UTILITAIRES
   ═══════════════════════════════════════════════════════════════ */

/* Conteneur centré */
.conteneur {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--padding-lateral);
}

/* Section générique */
.section {
  padding-block: var(--espace-3xl);
}

/* En-tête de section */
.section-entete {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--espace-2xl);
}

.section-etiquette {
  display: inline-block;
  font-family: var(--police-corps);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pierre);
  margin-bottom: var(--espace-sm);
}
.section-etiquette--or {
  color: var(--pierre-clair);
}

.section-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-h2);
  font-weight: 600;
  color: var(--bleu);
  line-height: 1.2;
  margin-bottom: var(--espace-md);
}
.section-titre--blanc {
  color: var(--blanc);
}

.section-chapeau {
  font-size: 1.05rem;
  color: var(--texte-doux);
  line-height: 1.75;
}
.section-chapeau--blanc {
  color: rgba(255,255,255,0.8);
}

/* Bouton principal */
.btn-principal {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  background: var(--bleu);
  color: var(--blanc);
  padding: 0.85rem 2rem;
  border-radius: var(--rayon-md);
  font-family: var(--police-corps);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 2px solid var(--bleu);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition-rapide);
  cursor: pointer;
  text-decoration: none;
}
.btn-principal:hover,
.btn-principal:focus-visible {
  background: var(--bleu-moyen);
  border-color: var(--bleu-moyen);
  box-shadow: var(--ombre-md);
  transform: translateY(-2px);
}
.btn-principal:active {
  transform: translateY(0);
}

/* Bouton secondaire */
.btn-secondaire {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  background: transparent;
  color: var(--blanc);
  padding: 0.85rem 2rem;
  border-radius: var(--rayon-md);
  font-family: var(--police-corps);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1.5px solid rgba(255,255,255,0.5);
  transition: background var(--transition), border-color var(--transition), transform var(--transition-rapide);
  cursor: pointer;
  text-decoration: none;
}
.btn-secondaire:hover,
.btn-secondaire:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.9);
  transform: translateY(-2px);
}
.btn-secondaire:active {
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════════
   04. NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
.nav-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-hauteur);
  transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition);
}

/* État initial : transparent (sur le hero) */
.nav-header {
  background: transparent;
}

/* État défilé : fond solide */
.nav-header.nav--defilée {
  background: rgba(27, 58, 92, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.2);
}

.nav-contenu {
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--padding-lateral);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-md);
}

/* Logo image avec détourage CSS
 *
 * Technique : le logo est noir sur fond blanc (PNG).
 * Sur fond sombre (nav, footer) :
 *   1. filter: invert(1)  → noir devient blanc, blanc devient noir
 *   2. mix-blend-mode: screen → le noir "fusionne" avec le fond et disparaît
 *   Résultat : logo blanc sans fond visible, sur n'importe quel fond sombre.
 */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-rapide);
}
.nav-logo:hover {
  opacity: 0.85;
}

.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
  /*
   * Le logo PNG a déjà un fond transparent.
   * brightness(0) : tous les pixels opaques deviennent noirs
   * invert(1)     : noir → blanc
   * Résultat : logo blanc propre sur fond sombre.
   */
  filter: brightness(0) invert(1);
}

/* Logo footer */
.footer-logo {
  margin-bottom: var(--espace-sm);
}
.footer-logo-img {
  height: 80px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

/* Liens de navigation */
.nav-liens {
  display: flex;
  align-items: center;
  gap: var(--espace-lg);
}

.nav-lien {
  font-family: var(--police-corps);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1.5px solid transparent;
  transition: color var(--transition-rapide), border-color var(--transition-rapide);
}
.nav-lien:hover,
.nav-lien.actif {
  color: var(--pierre);
  border-bottom-color: var(--pierre);
}

/* Lien CTA dans la nav */
.nav-lien--cta {
  border: none;
  background: var(--pierre);
  color: var(--blanc);
  padding: 0.5rem 1.2rem;
  border-radius: var(--rayon-md);
  font-weight: 500;
  transition: background var(--transition-rapide), transform var(--transition-rapide);
}
.nav-lien--cta:hover {
  background: var(--or);
  border-bottom-color: transparent;
  color: var(--blanc);
  transform: translateY(-1px);
}

/* Hamburger — masqué sur desktop */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  z-index: 110;
}
.nav-hamburger-trait {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--blanc);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition-rapide);
  transform-origin: center;
}

/* Hamburger en croix (état ouvert) */
.nav-hamburger[aria-expanded="true"] .nav-hamburger-trait:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-trait:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-hamburger[aria-expanded="true"] .nav-hamburger-trait:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Menu mobile */
.nav-mobile {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bleu);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espace-lg);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
}
.nav-mobile.nav-mobile--ouverte {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-mobile-liens {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-lg);
  text-align: center;
}

.nav-mobile-lien {
  font-family: var(--police-titre);
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 500;
  color: var(--blanc);
  text-decoration: none;
  opacity: 0.9;
  transition: color var(--transition-rapide), opacity var(--transition-rapide);
}
.nav-mobile-lien:hover {
  color: var(--pierre);
  opacity: 1;
}

.nav-mobile-contact {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
}
.nav-mobile-contact a {
  color: var(--pierre-clair);
  letter-spacing: 0.05em;
}


/* ═══════════════════════════════════════════════════════════════
   05. HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;

  /*
   * MODIFIER ICI : image de fond du hero
   * Remplacez 'images/hero.jpg' par le chemin de votre photo.
   * Taille recommandée : 1920x1080px minimum.
   * Formats acceptés : JPG (optimisé), WebP (encore mieux).
   * Si vous n'avez pas encore de photo, le dégradé bleu s'affiche à la place.
   */
  background-image:
    /* voile sombre centré derrière le texte, pour la lisibilité */
    radial-gradient(
      ellipse 85% 60% at center 46%,
      rgba(18, 13, 10, 0.62) 0%,
      rgba(18, 13, 10, 0.20) 55%,
      rgba(18, 13, 10, 0) 78%
    ),
    linear-gradient(
      to bottom,
      rgba(42, 33, 27, 0.5) 0%,     /* haut : nav lisible */
      rgba(42, 33, 27, 0.32) 45%,   /* centre : photo mise en valeur */
      rgba(42, 33, 27, 0.55) 100%   /* bas : léger fondu */
    ),
    url('images/hero-facade.jpg'); /* Façade L'Ermitage en lumière dorée (photo pro) */

  background-color: var(--bleu);       /* Couleur de secours si pas de photo */
  background-size: cover;
  background-position: center 30%;     /* Cadrage : montre l'enseigne en priorité */
  background-repeat: no-repeat;
}

/* Grain subtil pour l'ambiance (optionnel) */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

.hero-contenu {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding-inline: var(--padding-lateral);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-md);
}

/* Badge note Google */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-xs);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(193,165,139,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-size: 0.8rem;
  color: var(--blanc);
  letter-spacing: 0.02em;
}

.hero-badge-etoiles {
  display: flex;
  gap: 1px;
  color: var(--pierre);
}

.hero-badge-texte {
  font-weight: 400;
  opacity: 0.9;
}

/* Titre principal */
.hero-titre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;
  line-height: 1;
}

.hero-titre-nom {
  font-family: var(--police-titre);
  font-size: var(--taille-hero);
  font-weight: 700;
  color: var(--blanc);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 4px 40px rgba(0,0,0,0.5);
}

.hero-titre-sous {
  font-family: var(--police-titre);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 400;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  font-style: italic;
  color: var(--pierre-clair);
  letter-spacing: 0.01em;
}

.hero-annee {
  font-style: normal;
  border-bottom: 1px dashed rgba(193,165,139,0.6);
  /* Indique visuellement le placeholder à remplir */
  cursor: help;
}
.hero-annee::after {
  content: ' ← à remplir';
  font-size: 0.6em;
  font-style: normal;
  color: rgba(193,165,139,0.7);
  vertical-align: middle;
}

/* Accroche */
.hero-accroche {
  font-family: var(--police-corps);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
  margin-top: -0.25rem;
}

/* CTA Hero */
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--pierre);
  color: var(--blanc);
  padding: 1rem 2.2rem;
  border-radius: var(--rayon-md);
  font-family: var(--police-corps);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  margin-top: var(--espace-xs);
  border: 2px solid var(--pierre);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition-rapide);
}
.hero-cta:hover,
.hero-cta:focus-visible {
  background: var(--or);
  border-color: var(--or);
  box-shadow: var(--ombre-or);
  transform: translateY(-3px);
}
.hero-cta svg {
  transition: transform var(--transition-rapide);
}
.hero-cta:hover svg {
  transform: translateX(4px);
}
.hero-cta:active {
  transform: translateY(-1px);
}

/* Indicateur de scroll */
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero-scroll-fleche {
  width: 26px;
  height: 26px;
  border-right: 2px solid rgba(255,255,255,0.5);
  border-bottom: 2px solid rgba(255,255,255,0.5);
  transform: rotate(45deg);
  margin: 0 auto;
  animation: scroll-bas 1.8s ease-in-out infinite;
}

@keyframes scroll-bas {
  0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.7; }
  50%       { transform: rotate(45deg) translateY(6px); opacity: 0.3; }
}


/* ═══════════════════════════════════════════════════════════════
   06. SECTION HISTOIRE
   ═══════════════════════════════════════════════════════════════ */
.histoire {
  background-color: var(--blanc);
}

.histoire-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-2xl);
  align-items: center;
}

/* Texte */
.histoire-texte {
  max-width: 540px;
}

.histoire-separateur {
  width: 48px;
  height: 2px;
  background: linear-gradient(to right, var(--pierre), var(--pierre-clair));
  margin-block: var(--espace-md);
  border-radius: 2px;
}

.histoire-paragraphe {
  color: var(--texte-doux);
  line-height: 1.85;
  margin-bottom: var(--espace-md);
}
.histoire-paragraphe:last-of-type {
  margin-bottom: var(--espace-lg);
}
.histoire-signature {
  color: var(--texte-pale);
  font-size: 0.95rem;
}

/* Valeurs */
.histoire-valeurs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-sm);
  margin-top: var(--espace-sm);
}

.histoire-valeur {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--bleu);
  background: var(--creme);
  border: 1px solid var(--creme-fonce);
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  letter-spacing: 0.01em;
}
.histoire-valeur-icone {
  color: var(--pierre);
  font-size: 1em;
}

/* Photo */
.histoire-photo-cadre {
  position: relative;
}

.histoire-figure {
  position: relative;
}

.histoire-photo-placeholder {
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre-lg);
  background: var(--creme-fonce); /* Visible si l'image ne charge pas */
}

.histoire-photo {
  width: 100%;
  height: 420px;           /* Format paysage pour la photo d'équipe */
  object-fit: cover;
  object-position: center top; /* Privilégie les visages */
  transition: transform var(--transition);
  border-radius: var(--rayon-lg);
}
.histoire-photo-placeholder:hover .histoire-photo {
  transform: scale(1.02);
}

/* Fallback si image manquante */
.histoire-photo--manquante {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  font-size: 0.85rem;
  color: var(--texte-pale);
  letter-spacing: 0.05em;
}
.histoire-photo--manquante::after {
  content: '📷 Photo à ajouter\A images/histoire.jpg';
  white-space: pre;
  text-align: center;
}

.histoire-legende {
  font-size: 0.8rem;
  color: var(--texte-pale);
  text-align: center;
  margin-top: 0.75rem;
  font-style: italic;
}

/* Décoration dorée (coin de cadre) */
.histoire-decoration {
  position: absolute;
  bottom: -16px;
  right: -16px;
  width: 80px;
  height: 80px;
  border-right: 3px solid var(--pierre);
  border-bottom: 3px solid var(--pierre);
  border-radius: 0 0 var(--rayon-lg) 0;
  pointer-events: none;
  z-index: -1;
}


/* ═══════════════════════════════════════════════════════════════
   07. SECTION COLLECTIONS
   ═══════════════════════════════════════════════════════════════ */
.collections {
  background-color: var(--creme);
}

.collections-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-md);
}

/* Carte collection */
.collection-carte {
  background: var(--blanc);
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre-sm);
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
}
.collection-carte:hover {
  box-shadow: var(--ombre-lg);
  transform: translateY(-6px);
}

/* Image */
.collection-image-cadre {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--creme-fonce);
}

.collection-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.collection-carte:hover .collection-image {
  transform: scale(1.07);
}

/* Fallback si image manquante */
.collection-image--manquante {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--texte-pale);
  letter-spacing: 0.05em;
}
.collection-image--manquante::after {
  content: '📷 Photo à ajouter';
  text-align: center;
}

/* Overlay subtil */
.collection-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(27,58,92,0.15) 0%, transparent 50%);
  transition: background var(--transition);
}
.collection-carte:hover .collection-image-overlay {
  background: linear-gradient(to top, rgba(27,58,92,0.3) 0%, transparent 60%);
}

/* Contenu de la carte */
.collection-contenu {
  padding: var(--espace-md) var(--espace-lg);
  position: relative;
}

.collection-icone {
  position: absolute;
  top: -22px;
  left: var(--espace-md);
  width: 44px;
  height: 44px;
  background: var(--pierre);
  color: var(--blanc);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(157,52,22,0.35);
  transition: background var(--transition), transform var(--transition-rapide);
}
.collection-carte:hover .collection-icone {
  background: var(--or);
  transform: scale(1.1);
}

.collection-titre {
  font-family: var(--police-titre);
  font-size: var(--taille-h3);
  font-weight: 600;
  color: var(--bleu);
  margin-top: 0.75rem;
  margin-bottom: var(--espace-xs);
  line-height: 1.3;
}

.collection-description {
  font-size: 0.9rem;
  color: var(--texte-doux);
  line-height: 1.7;
}


/* ═══════════════════════════════════════════════════════════════
   08. SECTION TÉMOIGNAGES
   ═══════════════════════════════════════════════════════════════ */
.temoignages {
  background: linear-gradient(135deg, var(--bleu) 0%, #0E2438 100%);
  position: relative;
  overflow: hidden;
}

/* Décoration de fond subtile */
.temoignages::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(193,165,139,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.temoignages-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-md);
  margin-bottom: var(--espace-xl);
}

/* Carte témoignage */
.temoignage-carte {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(193,165,139,0.2);
  border-radius: var(--rayon-lg);
  padding: var(--espace-lg) var(--espace-md);
  position: relative;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.temoignage-carte:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(193,165,139,0.4);
  transform: translateY(-4px);
}

.temoignage-guillemets {
  font-family: var(--police-titre);
  font-size: 5rem;
  font-weight: 700;
  color: var(--pierre);
  opacity: 0.35;
  line-height: 0.8;
  margin-bottom: var(--espace-sm);
  pointer-events: none;
  user-select: none;
}

.temoignage-texte {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: var(--espace-md);
}

.temoignage-auteur {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.temoignage-etoiles {
  color: var(--pierre);
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.temoignage-nom {
  font-style: normal;
  font-weight: 500;
  color: var(--blanc);
  font-size: 0.95rem;
}

.temoignage-origine {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.03em;
}

/* Lien vers Google */
.temoignages-lien-google {
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   09. SECTION VISITER
   ═══════════════════════════════════════════════════════════════ */
.visiter {
  background-color: var(--blanc);
}

.visiter-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-xl);
  align-items: start;
}

/* Carte Google Maps */
.visiter-carte {
  border-radius: var(--rayon-lg);
  overflow: hidden;
  box-shadow: var(--ombre-lg);
}

.visiter-map {
  display: block;
  width: 100%;
  border-radius: var(--rayon-lg);
}

/* Infos pratiques */
.visiter-infos {
  display: flex;
  flex-direction: column;
  gap: var(--espace-lg);
}

.info-bloc {
  display: flex;
  gap: var(--espace-md);
  align-items: flex-start;
  padding: var(--espace-md);
  background: var(--creme);
  border-radius: var(--rayon-md);
  border: 1px solid var(--creme-fonce);
  transition: box-shadow var(--transition);
}
.info-bloc:hover {
  box-shadow: var(--ombre-sm);
}

.info-icone {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--bleu);
  color: var(--blanc);
  border-radius: var(--rayon-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-contenu {
  flex: 1;
}

.info-titre {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--bleu);
  margin-bottom: 0.3rem;
}

.info-texte {
  font-size: 0.92rem;
  color: var(--texte-doux);
  line-height: 1.7;
}

.info-lien {
  color: var(--bleu);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-rapide);
}
.info-lien:hover {
  border-bottom-color: var(--bleu);
}

/* Tableau horaires */
.info-horaires {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.info-horaires td {
  padding: 0.25rem 0;
  color: var(--texte-doux);
}
.info-horaire-jour {
  font-weight: 500;
  color: var(--texte);
  width: 55%;
}
.info-horaire-heure {
  color: var(--bleu);
  font-weight: 400;
}

.info-note {
  font-size: 0.78rem;
  color: var(--texte-pale);
  font-style: italic;
  margin-top: 0.5rem;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   10. FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--bleu);
  color: rgba(255,255,255,0.75);
  padding-top: var(--espace-2xl);
  padding-bottom: var(--espace-xl);
}

.footer-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-xl);
  margin-bottom: var(--espace-xl);
  padding-bottom: var(--espace-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* .footer-logo et .footer-logo-img sont définis dans la section Navigation */

.footer-description {
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 300px;
  margin-bottom: var(--espace-md);
}

/* Réseaux sociaux */
.footer-reseaux {
  display: flex;
  gap: var(--espace-sm);
}

.footer-reseau {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--rayon-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  transition: background var(--transition-rapide), color var(--transition-rapide), border-color var(--transition-rapide), transform var(--transition-rapide);
}
.footer-reseau:hover {
  background: var(--pierre);
  border-color: var(--pierre);
  color: var(--blanc);
  transform: translateY(-2px);
}

/* Titre colonne footer */
.footer-titre-col {
  font-family: var(--police-titre);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--blanc);
  margin-bottom: var(--espace-md);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(193,165,139,0.3);
}

/* Navigation footer */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-lien {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--transition-rapide);
  width: fit-content;
}
.footer-lien:hover {
  color: var(--pierre-clair);
}

/* Contact footer */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Bas de footer */
.footer-bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-sm);
}

.footer-copyright,
.footer-mention {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.45);
}

.footer-legal {
  display: flex;
  gap: var(--espace-md);
}
.footer-lien-legal {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color var(--transition-rapide);
}
.footer-lien-legal:hover {
  color: var(--pierre-clair);
}


/* ═══════════════════════════════════════════════════════════════
   11. ANIMATIONS & TRANSITIONS (IntersectionObserver)
   ═══════════════════════════════════════════════════════════════ */

/* État initial avant animation (éléments cachés) */
[data-anime] {
  opacity: 0;
  transition:
    opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--delai, 0ms);
}

[data-anime="fade-bas"] {
  transform: translateY(32px);
}
[data-anime="fade-gauche"] {
  transform: translateX(32px);
}
[data-anime="fade-droite"] {
  transform: translateX(-32px);
}

/* État visible (classe ajoutée par JavaScript) */
[data-anime].visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Quand l'année est renseignée, masquer le texte indicateur */
.hero-annee--renseignee::after {
  display: none;
}
.hero-annee--renseignee {
  border-bottom: none;
  cursor: default;
}

/* Respect du paramètre d'accessibilité "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  [data-anime] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-scroll-fleche {
    animation: none;
  }
  .hero {
    background-attachment: scroll;
  }
}


/* ═══════════════════════════════════════════════════════════════
   12. RESPONSIVE (mobile-first)
   ═══════════════════════════════════════════════════════════════ */

/* ── Tablette : ≥ 640px ─────────────────────────────────────── */
@media (min-width: 640px) {
  .collections-grille {
    grid-template-columns: repeat(2, 1fr);
  }

  .temoignages-grille {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 3e témoignage : centré sur 2 colonnes */
  .temoignage-carte:last-child {
    grid-column: 1 / -1;
    max-width: 560px;
    margin-inline: auto;
  }

  .footer-grille {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Desktop : ≥ 900px ──────────────────────────────────────── */
@media (min-width: 900px) {

  /* Navigation : afficher les liens, masquer le hamburger */
  .nav-liens {
    display: flex;
  }
  .nav-hamburger {
    display: none;
  }

  /* Histoire : deux colonnes */
  .histoire-grille {
    grid-template-columns: 1fr 1fr;
    gap: var(--espace-3xl);
  }
  .histoire-texte {
    max-width: 100%;
  }

  /* Collections : 4 colonnes */
  .collections-grille {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Témoignages : 3 colonnes */
  .temoignages-grille {
    grid-template-columns: repeat(3, 1fr);
  }
  .temoignage-carte:last-child {
    grid-column: auto;
    max-width: 100%;
    margin-inline: 0;
  }

  /* Visiter : deux colonnes */
  .visiter-grille {
    grid-template-columns: 1fr 1fr;
    gap: var(--espace-2xl);
  }

  /* Footer : 3 colonnes */
  .footer-grille {
    grid-template-columns: 1.5fr 1fr 1fr;
  }
}

/* ── Hamburger visible : < 900px ────────────────────────────── */
@media (max-width: 899px) {
  .nav-liens {
    display: none;
  }
  .nav-hamburger {
    display: flex;
  }

  /* Hero : éviter le chevauchement sur petits écrans */
  .hero {
    padding-top: var(--nav-hauteur-mobile);
  }
}

/* ── Grand écran : ≥ 1280px ─────────────────────────────────── */
@media (min-width: 1280px) {
  .histoire-grille {
    gap: var(--espace-3xl);
  }
}


/* ═══════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE (FR / EN / IT / ES)
   ═══════════════════════════════════════════════════════════════ */

/* Version desktop : masquée par défaut, affichée à partir de 900px */
.lang-switch {
  display: none;
  position: relative;
  margin-left: var(--espace-sm);
}
@media (min-width: 900px) {
  .lang-switch {
    display: block;
  }
}

.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.7rem;
  border-radius: var(--rayon-md);
  font-family: var(--police-corps);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background var(--transition-rapide), border-color var(--transition-rapide);
}
.lang-switch-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--pierre);
}
.lang-switch-globe { opacity: 0.85; }
.lang-switch-chevron {
  transition: transform var(--transition-rapide);
}
.lang-switch-btn[aria-expanded="true"] .lang-switch-chevron {
  transform: rotate(180deg);
}

/* Menu déroulant */
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 168px;
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  background: var(--blanc);
  border: 1px solid var(--creme-fonce);
  border-radius: var(--rayon-md);
  box-shadow: var(--ombre-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-rapide), transform var(--transition-rapide), visibility var(--transition-rapide);
  z-index: 200;
}
.lang-switch-menu--ouvert {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-switch-option {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  background: transparent;
  border: none;
  border-radius: var(--rayon-sm);
  font-family: var(--police-corps);
  font-size: 0.9rem;
  color: var(--texte);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-rapide);
}
.lang-switch-option:hover {
  background: var(--creme);
}
.lang-switch-option.actif {
  background: var(--creme-fonce);
  color: var(--or);
  font-weight: 500;
}
.lang-switch-code {
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--pierre);
  min-width: 1.6rem;
}
.lang-switch-option.actif .lang-switch-code { color: var(--or); }
.lang-switch-name { color: inherit; }

/* Version mobile : rangée de boutons dans le menu mobile */
.lang-switch-mobile {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--espace-md) 0;
}
@media (min-width: 900px) {
  .lang-switch-mobile { display: none; }
}
.lang-switch-mobile-btn {
  min-width: 3rem;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--rayon-md);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--police-corps);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background var(--transition-rapide), border-color var(--transition-rapide);
}
.lang-switch-mobile-btn:hover { background: rgba(255, 255, 255, 0.16); }
.lang-switch-mobile-btn.actif {
  background: var(--pierre);
  border-color: var(--pierre);
  color: var(--blanc);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION CONTACT (formulaire)
   ═══════════════════════════════════════════════════════════════ */

.contact {
  background: var(--creme-fonce);
}
.contact-bloc {
  max-width: 620px;
  margin: 0 auto;
  background: var(--blanc);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  border-radius: var(--rayon-lg);
  box-shadow: var(--ombre-sm);
  border: 1px solid rgba(193, 165, 139, 0.18);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}
.contact-champ {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.contact-label {
  font-family: var(--police-corps);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--texte-doux);
}
.contact-input {
  width: 100%;
  padding: 0.8rem 1rem;
  font-family: var(--police-corps);
  font-size: 0.98rem;
  color: var(--texte);
  background: var(--creme);
  border: 1.5px solid var(--creme-fonce);
  border-radius: var(--rayon-md);
  transition: border-color var(--transition-rapide), box-shadow var(--transition-rapide);
}
.contact-input::placeholder { color: var(--texte-pale); }
.contact-input:focus {
  outline: none;
  border-color: var(--pierre);
  box-shadow: 0 0 0 3px rgba(193, 165, 139, 0.18);
  background: var(--blanc);
}
.contact-textarea {
  resize: vertical;
  min-height: 130px;
}
.contact-submit {
  align-self: flex-start;
  margin-top: var(--espace-xs);
}
.contact-submit:hover {
  background: var(--bleu-moyen);
  border-color: var(--bleu-moyen);
}
.contact-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.contact-merci {
  margin-top: var(--espace-xs);
  padding: 0.85rem 1rem;
  background: rgba(157, 52, 22, 0.08);
  border-left: 3px solid var(--bleu-moyen);
  border-radius: var(--rayon-sm);
  font-size: 0.92rem;
  color: var(--bleu);
}
.contact-honeypot { position: absolute; left: -9999px; }


/* ═══════════════════════════════════════════════════════════════
   HISTOIRE — récit long : photo « collante » sur desktop
   pour équilibrer les colonnes (le texte est plus haut que la photo)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 900px) {
  .histoire-grille {
    align-items: start;
  }
  .histoire-photo-cadre {
    position: sticky;
    top: calc(var(--nav-hauteur) + 1.5rem);
  }
}


/* ═══════════════════════════════════════════════════════════════
   VISITER — infos pratiques en rangée (la carte est dans le footer)
   ═══════════════════════════════════════════════════════════════ */
.visiter-infos--rangee {
  max-width: 960px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .visiter-infos--rangee {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--espace-lg);
    align-items: stretch;
  }
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER — carte + « Calculer l'itinéraire » (colonne 3)
   ═══════════════════════════════════════════════════════════════ */
.footer-contact {
  font-style: normal;
  margin-bottom: var(--espace-md);
}

.footer-carte {
  border-radius: var(--rayon-md);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-map {
  display: block;
  width: 100%;
  height: 200px;
  filter: grayscale(0.2) contrast(0.95);
}
.footer-itineraire {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--espace-sm);
  color: var(--pierre-clair);
  font-family: var(--police-corps);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--transition-rapide);
}
.footer-itineraire:hover,
.footer-itineraire:focus-visible {
  color: var(--blanc);
}
.footer-itineraire svg {
  color: var(--pierre);
}

/* Colonnes du footer : on donne un peu plus de place à la carte */
@media (min-width: 900px) {
  .footer-grille {
    grid-template-columns: 1.4fr 1fr 1.3fr;
    align-items: start;
  }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION HISTOIRE DE LOURDES (fond espresso, récit centré)
   ═══════════════════════════════════════════════════════════════ */
.lourdes {
  background: var(--bleu);
  color: rgba(255, 255, 255, 0.85);
}
.lourdes .section-titre--blanc {
  color: var(--blanc);
}
.lourdes-recit {
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}
.lourdes-paragraphe {
  color: rgba(255, 255, 255, 0.80);
  font-size: 1.06rem;
  line-height: 1.85;
}
.lourdes-paragraphe::first-letter {
  /* petit raffinement éditorial sur le 1er paragraphe */
}
.lourdes-recit .lourdes-paragraphe:first-child {
  font-size: 1.14rem;
  color: rgba(255, 255, 255, 0.9);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION LOURDES — deux colonnes (texte + illustration Vierge)
   ═══════════════════════════════════════════════════════════════ */
.lourdes-grille {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-xl);
  align-items: center;
}
.lourdes-contenu {
  text-align: left;
}
.lourdes-chapeau {
  font-family: var(--police-corps);
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: var(--espace-lg);
}
/* on annule le centrage précédent du récit (il est maintenant en colonne) */
.lourdes-contenu .lourdes-recit {
  max-width: none;
  margin: 0;
}
.lourdes-illustration {
  display: flex;
  justify-content: center;
}
.lourdes-vierge {
  width: auto;
  max-height: 460px;
  /* dessin noir sur fond transparent : on l'inverse en blanc pour le fond sombre */
  filter: invert(1);
  opacity: 0.9;
}
@media (min-width: 900px) {
  .lourdes-grille {
    grid-template-columns: 1.5fr 0.7fr;
    gap: var(--espace-3xl);
    align-items: center;
  }
  .lourdes-vierge { max-height: 560px; }
}
@media (max-width: 899px) {
  /* sur mobile on masque la Vierge pour ne pas alourdir la lecture */
  .lourdes-illustration { display: none; }
}


/* Section histoire : deux photos empilées (hier / aujourd'hui) */
.histoire-photo-cadre {
  display: flex;
  flex-direction: column;
  gap: var(--espace-lg);
}
.histoire-figure { margin: 0; }


/* ═══════════════════════════════════════════════════════════════
   BLOC ÉDITORIAL (image + texte, façon Grand Hôtel L'Ermitage)
   ═══════════════════════════════════════════════════════════════ */
.section-edito {
  background: var(--creme);
  padding-block: var(--espace-2xl);
}
.bloc-edito {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  max-width: var(--largeur-max);
  margin-inline: auto;
  padding-inline: var(--padding-lateral);
}
.bloc-edito + .bloc-edito {
  margin-top: var(--espace-2xl);
}
.bloc-edito-media {
  min-height: 280px;
  overflow: hidden;
}
.bloc-edito-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.bloc-edito-texte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  max-width: 640px;
}
.bloc-edito-overline {
  font-family: var(--police-corps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--texte);
  margin-bottom: var(--espace-md);
}
.bloc-edito-titre {
  font-family: var(--police-titre);
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 400;
  line-height: 1.06;
  color: var(--texte);
  margin-bottom: var(--espace-md);
}
.bloc-edito-corps p {
  font-family: var(--police-titre);   /* serif pour le corps, comme la référence */
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--texte-doux);
  margin-bottom: var(--espace-sm);
}
.bloc-edito-lien {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: var(--espace-lg);
  font-family: var(--police-corps);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--texte);
  transition: gap var(--transition-rapide), color var(--transition-rapide);
}
.bloc-edito-lien:hover,
.bloc-edito-lien:focus-visible {
  gap: 1.15rem;
  color: var(--or);
}
/* pastilles "valeurs" adaptées au fond crème */
.bloc-edito-texte .histoire-valeurs {
  margin-top: var(--espace-md);
}
.bloc-edito-texte .histoire-valeur {
  background: transparent;
  border: 1px solid rgba(42, 33, 27, 0.22);
  color: var(--texte);
}

@media (min-width: 900px) {
  .bloc-edito {
    grid-template-columns: 1fr 1fr;
  }
  .bloc-edito-media {
    height: 520px;
  }
  .bloc-edito-texte {
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }
  /* bloc inversé : image à droite */
  .bloc-edito--inverse .bloc-edito-media {
    order: 2;
  }
}


/* Bloc éditorial : variante illustration (dessin au trait, pas une photo pleine cadre) */
.bloc-edito-media--illustration {
  background: var(--creme-fonce);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espace-xl);
}
.bloc-edito-media--illustration img {
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 85%;
  object-fit: contain;
}


/* ═══════════════════════════════════════════════════════════════
   TÉMOIGNAGES — bloc de note Google (sur fond sombre)
   ═══════════════════════════════════════════════════════════════ */
.avis-google {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-xs);
  margin-top: var(--espace-2xl);
  text-align: center;
}
.avis-note {
  font-family: var(--police-titre);
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--blanc);
}
.avis-etoiles {
  font-size: 1.5rem;
  letter-spacing: 0.12em;
  color: var(--pierre);
}
.avis-etoile-vide {
  color: rgba(255, 255, 255, 0.28);
}
.avis-compte {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  margin-bottom: var(--espace-sm);
}


/* Sur téléphone : n'afficher que 2 avis (on masque le plus long) */
@media (max-width: 899px) {
  .temoignage-carte--long {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════
   COLLECTIONS — cartes terracotta (façon cartes du Grand Hôtel)
   ═══════════════════════════════════════════════════════════════ */
.collection-carte {
  background: var(--or);                 /* terracotta */
  color: var(--creme);
  border-radius: var(--rayon-xl);
  overflow: visible;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
  padding: clamp(1.6rem, 3vw, 2.1rem);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition), box-shadow var(--transition);
}
/* pas de photo : on masque le cadre image (comme les cartes de l'hôtel) */
.collection-image-cadre {
  display: none;
}
.collection-contenu {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--creme);
}
/* icône = symbole en haut, en crème (plus de pastille flottante) */
.collection-icone {
  position: static;
  width: auto;
  height: auto;
  background: transparent;
  box-shadow: none;
  color: var(--creme);
  font-size: 1.8rem;
  margin: 0 0 auto;
  transition: none;
}
.collection-carte:hover .collection-icone {
  background: transparent;
  transform: none;
}
.collection-titre {
  font-family: var(--police-titre);
  color: var(--creme);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  font-weight: 500;
  margin-top: var(--espace-md);
  margin-bottom: var(--espace-xs);
}
.collection-description {
  color: rgba(240, 236, 233, 0.85);
  font-size: 0.92rem;
  line-height: 1.6;
}
/* flèche en bas de carte */
.collection-contenu::after {
  content: "→";
  margin-top: var(--espace-md);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--creme);
}
/* léger « jeu de cartes » : inclinaison alternée qui se redresse au survol */
.collection-carte:nth-child(odd)  { transform: rotate(-1.3deg); }
.collection-carte:nth-child(even) { transform: rotate(1.3deg); }
.collection-carte:hover,
.collection-carte:focus-within {
  transform: rotate(0) translateY(-5px);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.28);
}

/* Grille : 1 colonne mobile, 2 tablette, 4 desktop */
@media (min-width: 620px) {
  .collections-grille { grid-template-columns: repeat(2, 1fr); gap: var(--espace-lg); }
}
@media (min-width: 900px) {
  .collections-grille { grid-template-columns: repeat(4, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════
   COLLECTIONS (v2) : cartes terracotta AVEC photo + swipe mobile
   ═══════════════════════════════════════════════════════════════ */
.collection-carte {
  padding: 0;
  overflow: hidden;
  min-height: 0;
}
/* on remet la photo, en haut de la carte */
.collection-image-cadre {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--creme-fonce);
}
.collection-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.collection-image-overlay { display: none; }
.collection-contenu {
  padding: clamp(1.3rem, 2.5vw, 1.7rem);
}
.collection-icone { display: none; }          /* la photo suffit comme repère */
.collection-titre { margin-top: 0; }
/* plus d'inclinaison : rendu net pour le carrousel */
.collection-carte:nth-child(odd),
.collection-carte:nth-child(even) { transform: none; }
.collection-carte:hover,
.collection-carte:focus-within { transform: translateY(-5px); }

/* Mobile / tablette : défilement horizontal avec accroche (swipe) */
@media (max-width: 899px) {
  .collections-grille {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--espace-md);
    padding-bottom: var(--espace-md);
    -webkit-overflow-scrolling: touch;
  }
  .collection-carte {
    flex: 0 0 80%;
    scroll-snap-align: start;
  }
}


/* ═══════════════════════════════════════════════════════════════
   VENIR NOUS VOIR — FAQ (accordéon natif) + cartes infos pratiques
   ═══════════════════════════════════════════════════════════════ */
.visiter-grille2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espace-xl);
  align-items: start;
}
@media (min-width: 900px) {
  .visiter-grille2 { grid-template-columns: 1.4fr 0.8fr; gap: var(--espace-2xl); }
}

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--creme-fonce);
}
.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espace-md);
  padding: var(--espace-md) 0;
  font-family: var(--police-titre);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--texte);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "→";
  font-size: 1.1rem;
  color: var(--pierre);
  flex-shrink: 0;
  transition: transform var(--transition-rapide);
}
.faq-item[open] .faq-question::after { transform: rotate(90deg); }
.faq-reponse {
  padding: 0 0 var(--espace-md);
  color: var(--texte-doux);
  line-height: 1.7;
  max-width: 62ch;
}

/* Cartes infos pratiques */
.infos-cartes {
  display: flex;
  flex-direction: column;
  gap: var(--espace-md);
}
.info-carte {
  background: var(--creme-fonce);
  border-radius: var(--rayon-lg);
  padding: var(--espace-lg);
}
.info-carte-titre {
  font-family: var(--police-corps);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texte);
  margin-bottom: var(--espace-xs);
}
.info-carte-texte {
  color: var(--texte-doux);
  line-height: 1.7;
  font-size: 0.95rem;
}
.info-carte-texte .info-lien { color: var(--or); }


/* Bloc histoire : deux photos empilées (hier / aujourd'hui) qui
   remplissent pile la hauteur du texte (recadrées) */
.bloc-edito-media--double {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
  overflow: hidden;
}
.bloc-edito-media--double img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
@media (min-width: 900px) {
  .bloc-edito-media--double {
    height: auto;          /* annule la hauteur fixe */
    align-self: stretch;   /* s'étire sur toute la hauteur du texte */
    gap: 10px;
  }
  .bloc-edito-media--double img {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    aspect-ratio: auto;    /* la hauteur est gérée par le flex */
  }
}


/* ═══════════════════════════════════════════════════════════════
   SECTION LOURDES (« Le lieu ») — fond marron foncé + Vierge blanche
   ═══════════════════════════════════════════════════════════════ */
.lourdes-edito {
  background: var(--bleu);            /* espresso / brun foncé */
}
.lourdes-edito .bloc-edito-overline { color: var(--pierre-clair); }
.lourdes-edito .bloc-edito-titre    { color: var(--blanc); }
.lourdes-edito .bloc-edito-corps p  { color: rgba(255, 255, 255, 0.82); }

/* Vierge détourée : traits blancs directement sur le fond sombre (pas de panneau) */
.lourdes-edito .bloc-edito-media--illustration {
  background: transparent;
}
.lourdes-edito .bloc-edito-media--illustration img {
  filter: invert(1);
  opacity: 0.92;
}


/* ═══════════════════════════════════════════════════════════════
   COLLECTIONS (v3) : panneaux extensibles au survol
   ═══════════════════════════════════════════════════════════════ */
.collections-panels {
  display: flex;
  flex-direction: column;   /* mobile : empilés, tout visible */
  gap: 10px;
}
.panel {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 220px;
  border-radius: var(--rayon-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--bleu);
  transition: flex-grow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.panel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.62);
  transition: filter var(--transition);
}
.panel-contenu {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--espace-lg);
  color: var(--creme);
  background: linear-gradient(to top, rgba(42, 33, 27, 0.88) 0%, rgba(42, 33, 27, 0.12) 55%);
}
.panel-titre {
  font-family: var(--police-titre);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  font-weight: 500;
  color: var(--creme);
  margin-bottom: var(--espace-xs);
}
.panel-desc {
  color: rgba(240, 236, 233, 0.9);
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 40ch;
}
.panel-cta {
  margin-top: var(--espace-md);
  font-size: 1.3rem;
  color: var(--creme);
}

/* Desktop : rangée de panneaux, un s'agrandit au survol */
@media (min-width: 900px) {
  .collections-panels {
    flex-direction: row;
    min-height: 460px;
  }
  .panel { min-height: 0; }
  .panel-desc,
  .panel-cta {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition);
  }
  /* quand on survole la rangée, les autres se rétractent */
  .collections-panels:hover .panel { flex-grow: 0.6; }
  .panel:hover { flex-grow: 3; background: var(--or); }
  .panel:hover .panel-img { filter: brightness(0.5); }
  .panel:hover .panel-desc,
  .panel:hover .panel-cta {
    opacity: 1;
    transform: none;
    transition-delay: 0.12s;
  }
}


/* ═══════════════════════════════════════════════════════════════
   HERO (premium) : sur-titre + grand nom serif + ligne discrète
   ═══════════════════════════════════════════════════════════════ */
.hero-surtitre {
  font-family: var(--police-corps);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 0.4em 0.32em;   /* petit décalage pour compenser le letter-spacing */
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
.hero-nom {
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 0.95;
  color: var(--blanc);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hero-sous {
  font-family: var(--police-corps);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: clamp(0.72rem, 1.3vw, 0.9rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--espace-md);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}


/* Lourdes : agrandir la Vierge pour qu'elle occupe la hauteur du texte */
@media (min-width: 900px) {
  .lourdes-edito .bloc-edito-media--illustration {
    align-self: stretch;     /* la colonne s'étire sur toute la hauteur du texte */
    height: auto;
    padding: var(--espace-md);
  }
  .lourdes-edito .bloc-edito-media--illustration img {
    max-width: 92%;
    max-height: 88%;
  }
}


/* Collections sur mobile : texte toujours lisible.
   Le contenu (relatif) définit la hauteur, la photo passe en fond, voile renforcé. */
@media (max-width: 899px) {
  .panel-img {
    filter: brightness(0.5);
  }
  .panel-contenu {
    position: relative;
    justify-content: flex-start;
    min-height: 240px;
    background: linear-gradient(
      to bottom,
      rgba(42, 33, 27, 0.80) 0%,
      rgba(42, 33, 27, 0.52) 70%,
      rgba(42, 33, 27, 0.45) 100%
    );
  }
  .panel-titre { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5); }
}


/* ═══════════════════════════════════════════════════════════════
   VISIONNEUSE (lightbox) DES COLLECTIONS
   ═══════════════════════════════════════════════════════════════ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 13, 10, 0.93);
  padding: clamp(1rem, 4vw, 3rem);
  animation: lightbox-apparition 0.2s ease;
}
.lightbox[hidden] { display: none; }
@keyframes lightbox-apparition {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-sm);
}
.lightbox-img {
  max-width: 90vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: var(--rayon-md);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.lightbox-compteur {
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--police-corps);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}
.lightbox-fermer,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-rapide);
}
.lightbox-fermer:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(255, 255, 255, 0.28);
}
.lightbox-fermer {
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
}
.lightbox-prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

/* Indice cliquable sur les panneaux */
.panel { cursor: pointer; }