/* ============================================================
   MARIAGE MATHILDE & ANTOINE — Feuille de style
   Mobile-first · responsive · charte Provence festive
   ============================================================ */

/* ---------- Police manuscrite locale (titres courts) ---------- */
@font-face {
  font-family: "Amsterdam Fair";
  src: url("fonts/amsterdam-four.woff2") format("woff2"),
       url("fonts/amsterdam-four.ttf") format("truetype");
  font-display: swap;
}

/* ============================================================
   VARIABLES (charte graphique)
   ============================================================ */
:root {
  /* Couleurs principales */
  --bordeaux:     #5D1328;
  --framboise:    #B34F59;
  --rose-poudre:  #EAC2C0;
  --vert-tilleul: #AEC06A;
  --vert-amande:  #CDCEAA;
  --vert-olive:   #626C45;
  --blanc-casse:  #EFEFEF;
  --aubergine:    #2A0410;

  /* Off-white pâle et chaleureux pour les fonds clairs (plus doux que #EFEFEF) */
  --blanc-pale:   #F7F5F2;

  /* Rôles */
  --color-primary:   var(--bordeaux);
  --color-accent:    var(--framboise);
  --color-bg:        var(--blanc-pale);
  --color-text:      var(--aubergine);
  /* Textes du corps en aubergine quasi noir (au lieu du vert olive) */
  --color-text-soft: var(--aubergine);
  --color-surface:   var(--rose-poudre);
  --color-highlight: var(--vert-tilleul);
  --color-muted:     var(--vert-amande);

  /* Typographie */
  --font-titre:   "Amsterdam Fair", "Dancing Script", cursive;
  --font-corps:   "Amiri", Georgia, serif;
  --font-callout: "Inter", system-ui, -apple-system, sans-serif;

  /* Divers */
  --header-h: 68px;
  --maxw: 1100px;
  --radius: 14px;
  --shadow: 0 14px 40px rgba(42, 4, 16, .12);
  --shadow-soft: 0 6px 20px rgba(42, 4, 16, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  /* Légère "rebondie", réservée aux petits éléments interactifs (boutons) :
     invite discrètement au clic sans jouer sur le contenu éditorial. */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Décalage des ancres pour ne pas passer sous le menu sticky */
  scroll-padding-top: calc(var(--header-h) + 10px);
}

body {
  font-family: var(--font-corps);
  font-size: 17px;   /* taille unique pour tous les paragraphes en Amiri */
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: var(--color-accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--color-primary); }

:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Conteneurs ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}
.wrap--narrow { max-width: 760px; }
.center { text-align: center; }

/* ============================================================
   TYPOGRAPHIE PARTAGÉE
   ============================================================ */
.eyebrow {
  font-family: var(--font-callout);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .7rem;
  font-weight: 600;
  color: var(--color-accent);
}
.eyebrow--light { color: var(--rose-poudre); }

.section__title {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: clamp(2.8rem, 9vw, 4.6rem);
  line-height: 1.18;
  color: var(--color-primary);
  /* Amsterdam Four déborde de sa boîte : on lui donne de l'air en haut/bas */
  margin: .6em 0 .7em;
}
.section__title--light { color: #fff; }

.lead { font-size: 17px; color: var(--color-text-soft); margin-bottom: 26px; }

/* ---------- Section « Quelques listes » : deux colonnes ---------- */
.lists-grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile : empilé */
  gap: 22px;
}
.list-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Colonnes épurées : fond transparent, sans ombre ni bords arrondis */
  background: transparent;
  border-radius: 0;
  padding: 6px 8px;
  box-shadow: none;
}
.list-card__title {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 2.8rem);
  line-height: 1.05;
  color: var(--color-primary);
  margin: .35em 0 .45em;
}
.list-card__text {
  flex: 1;                       /* aligne les boutons en bas */
  color: var(--color-text-soft);
  margin: 14px 0 24px;
}
/* Conteneur aligné sur la largeur standard (mêmes bords extérieurs que la galerie photo) */
.lists-wrap { max-width: var(--maxw); text-align: center; }
/* Boutons des listes un peu plus fins en hauteur que le standard */
.lists-grid .btn { padding-top: 11px; padding-bottom: 11px; }

@media (min-width: 760px) {
  .lists-grid { grid-template-columns: 1fr 1fr; gap: 120px; }
  .lists-grid .list-card { padding: 6px 0; }
  /* Filet de séparation court et centré entre les deux colonnes */
  .lists-grid .list-card:nth-child(2) { position: relative; }
  .lists-grid .list-card:nth-child(2)::before {
    content: "";
    position: absolute;
    left: -60px;            /* moitié du gap (120/2) */
    top: 22%;
    height: 56%;            /* trait raccourci, centré verticalement */
    width: 1px;
    background: rgba(42, 4, 16, .16);
  }
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-callout);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Trait super fin (1px, comme les dividers) ; se remplit au survol */
  padding: 14px 44px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
/* Contour bordeaux sur fonds clairs */
.btn--primary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary);
  color: #fff;
}
/* Contour blanc sur fonds sombres / image */
.btn--light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.btn--light:hover {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
}

/* ============================================================
   MENU / HEADER STICKY
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  background: transparent;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), height .35s var(--ease);
}
/* État compact (ajouté par JS au scroll) */
.site-header.is-scrolled {
  background: rgba(239, 239, 239, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-soft);
}

.nav {
  height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__brand {
  display: flex;
  align-items: center;
  font-family: var(--font-titre);
  color: var(--color-accent);      /* framboise */
  font-size: 1.4rem;
  line-height: 1;
  white-space: nowrap;
  padding: 0 .4em;                 /* marge pour les déliés de la police script */
}
.nav__brand:hover { color: var(--color-accent); }

/* Liens du menu */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
}
.nav__link {
  font-family: var(--font-callout);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  padding-bottom: 3px;
  border-bottom: 1.5px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.site-header.is-scrolled .nav__link { color: var(--color-text); }
.nav__link:hover { border-bottom-color: var(--color-highlight); color: var(--color-highlight); }

.nav__link--cta {
  background: var(--color-primary);
  color: #fff;
  padding: 7px 24px;
  border-radius: 999px;
  border: none;
}
.site-header.is-scrolled .nav__link--cta { color: #fff; }
.nav__link--cta:hover { background: var(--color-accent); color: #fff; }
.site-header.is-scrolled .nav__link--cta { color: #fff; }

/* Burger (caché sur desktop) */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease);
}
.site-header.is-scrolled .nav__burger span { background: var(--color-text); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: #fff;
}
/* Image de fond (placeholder en dégradé + couche image) avec parallax léger */
.hero__bg {
  position: absolute;
  inset: -8% 0 -8% 0;        /* marge verticale pour la marge de parallax */
  background-color: var(--bordeaux);
  will-change: transform;
}
/* Photo du hero : cachée par défaut, révélée seulement au survol du CTA */
.hero__photo {
  position: absolute;
  inset: -8% 0 -8% 0;
  background-image: url("images/hero.jpg");
  background-size: cover;
  background-position: center;
  filter: grayscale(100%);   /* photo du hero en noir et blanc */
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.hero.hero--cta-hover .hero__photo { opacity: 1; }
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 20%, transparent 35%, rgba(93, 19, 40, .35) 100%),
    linear-gradient(to bottom, rgba(42, 4, 16, .25), rgba(42, 4, 16, .45));
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 940px;
  padding: 86px 22px 72px;
}
.hero__eyebrow {
  font-family: var(--font-callout);
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: .72rem;
  font-weight: 600;
}
.hero__title {
  font-family: var(--font-titre);
  font-weight: 400;
  /* Plafond réduit sur petits écrans pour limiter l'ampleur des déliés */
  font-size: clamp(3.4rem, 13vw, 8rem);
  line-height: .95;
  /* Le logo (SVG) porte déjà un peu de marge interne : on resserre le bas */
  margin: .3em 0 .15em;
  text-shadow: 0 4px 30px rgba(42, 4, 16, .4);
}
.hero__title .amp { font-size: .62em; vertical-align: middle; opacity: .92; }
/* « Antoine » légèrement décalé vers la droite, marge différente de « Mathilde » */
.hero__n1 { display: inline-block; }
.hero__n2 { display: inline-block; margin-left: .1em; transform: translateX(.28em); }
/* Logo manuscrit « Mathilde & Antoine » (SVG blanc) à la place du titre texte */
.hero__logo {
  display: block;
  width: min(560px, 78%);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 4px 30px rgba(42, 4, 16, .4));
}
.hero__date {
  font-family: var(--font-callout);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero__place {
  font-family: var(--font-callout);
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .9;
  margin-top: 6px;
}
.hero__text {
  /* Largeur proportionnelle à l'écran : moins de lignes → le hero tient sans scroll */
  max-width: min(560px, 94%);   /* étroit : la 1re phrase tient sur une ligne */
  margin: 14px auto 24px;
  font-size: 17px;
  line-height: 1.5;
}

/* Apparition lente en fondu + léger glissement du bas vers le haut
   (texte d'intro puis bouton du hero, en léger décalé) */
@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.hero__text { animation: heroRise 1.3s var(--ease) .25s both; }
.hero__cta  { animation: heroRise 1.3s var(--ease) .55s both; }
/* Bouton du hero : plein bordeaux (comme un onglet actif), plus fin, framboise au clic */
.hero__cta {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  padding-top: 10px;
  padding-bottom: 10px;
}
.hero__cta:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.hero__cta:active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* Indicateur de scroll */
.hero__scroll {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.hero__scroll span {
  display: block;
  width: 24px; height: 38px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 14px;
  position: relative;
}
.hero__scroll span::after {
  content: "";
  position: absolute;
  top: 7px; left: 50%;
  width: 4px; height: 8px;
  background: #fff;
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 1.8s infinite;
}
@keyframes scrollDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  80%, 100% { opacity: 0; transform: translate(-50%, 12px); }
}

/* ============================================================
   SECTIONS — fonds alternés
   ============================================================ */
.section {
  padding: clamp(64px, 11vw, 120px) 0;
}
.section--bg      { background: var(--color-bg); }
.section--surface { background: var(--color-surface); }
.section--muted   { background: var(--color-muted); }
.section--primary { background: var(--color-primary); color: #fff; }

/* Sur fond bordeaux : titres, eyebrows et textes passent en clair */
.section--primary .section__title { color: #fff; }
.section--primary .eyebrow        { color: var(--rose-poudre); }
.section--primary .section__intro { color: rgba(255, 255, 255, .9); }
.section--primary .lieu__desc     { color: rgba(255, 255, 255, .92); }
.section--primary .lieu__address  { color: rgba(255, 255, 255, .82); }

/* RSVP : photo de fond avec voile bordeaux qui s'estompe au survol */
.section--rsvp {
  position: relative;
  overflow: hidden;
}
.rsvp__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("images/outro.jpg");
  background-size: cover;
  background-position: center 35%;
}
.rsvp__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--bordeaux);
  opacity: 1;                    /* masque la photo par défaut */
  transition: opacity .6s var(--ease);
}
.section--rsvp > .wrap { position: relative; z-index: 2; }
/* Affichages avec souris (laptop/desktop) : la photo apparaît au survol
   du CTA « Confirmez votre présence », comme sur le hero. */
@media (hover: hover) {
  .section--rsvp.rsvp--cta-hover .rsvp__overlay { opacity: .4; }
}
/* Écrans tactiles (mobile/tablette) : pas de survol fiable, la photo se
   révèle simplement dès que la section apparaît au scroll. */
@media (hover: none) {
  .section--rsvp.is-visible .rsvp__overlay { opacity: .4; }
}

/* Découvrir les environs : fond bordeaux → tous les textes du guide en clair */
#les-environs .guide-block__title { color: #fff; }
#les-environs .guide-block__sub   { color: rgba(255, 255, 255, .85); }
#les-environs .guide-block__sub b { color: #fff; }
#les-environs .zone               { color: rgba(255, 255, 255, .82); }
#les-environs .zone::after        { background: rgba(255, 255, 255, .25); }
#les-environs .entry              { border-bottom-color: rgba(255, 255, 255, .16); }
#les-environs .entry__top h4      { color: #fff; }
#les-environs .entry__note        { color: rgba(255, 255, 255, .7); }
#les-environs .entry__desc        { color: rgba(255, 255, 255, .84); }
#les-environs .entry__desc .tag   { color: var(--rose-poudre); }
#les-environs .entry__info        { color: rgba(255, 255, 255, .72); }
#les-environs .entry__info b      { color: #fff; }
#les-environs .entry__info a      { color: var(--rose-poudre); }
#les-environs .meta               { color: rgba(255, 255, 255, .75); }
#les-environs .meta b             { color: var(--vert-tilleul); }
#les-environs .meta .star         { color: var(--vert-tilleul); }
#les-environs .arrival            { border-color: rgba(255, 255, 255, .22); }
#les-environs .arrival > div + div{ border-left-color: rgba(255, 255, 255, .22); }
#les-environs .arrival__k         { color: var(--rose-poudre); }
#les-environs .arrival__v         { color: #fff; }
#les-environs .arrival__d         { color: rgba(255, 255, 255, .75); }
#les-environs .anecdote {
  background: rgba(255, 255, 255, .08);
  border-left-color: var(--rose-poudre);
  color: rgba(255, 255, 255, .85);
}
#les-environs .anecdote b         { color: #fff; }
#les-environs .delices            { border-top-color: rgba(255, 255, 255, .2); border-bottom-color: rgba(255, 255, 255, .2); }
#les-environs .delice             { border-left-color: rgba(255, 255, 255, .2); border-top-color: rgba(255, 255, 255, .2); }
#les-environs .delice h5          { color: var(--rose-poudre); }
#les-environs .delice p           { color: rgba(255, 255, 255, .82); }
#les-environs .badge,
#les-environs .note               { background: rgba(255, 255, 255, .18); color: #fff; }
/* Onglets sur fond bordeaux : contour clair, actif en blanc plein */
#les-environs .tabs__btn          { color: #fff; border-color: rgba(255, 255, 255, .55); }
#les-environs .tabs__btn:hover    { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
#les-environs .tabs__btn.is-active{ background: #fff; border-color: #fff; color: var(--bordeaux); }

.section__head { margin-bottom: 44px; }
.section__head--center { text-align: center; }
.section__intro {
  font-size: 17px;
  color: var(--color-text-soft);
  margin-top: 14px;
  max-width: 640px;
}
.section__head--center .section__intro { margin-left: auto; margin-right: auto; }
.section--primary .section__intro--light { color: rgba(255,255,255,.9); margin: 0 auto 28px; }

/* ============================================================
   TIMELINE — Le week-end
   ============================================================ */
.timeline {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
}
/* Position horizontale du rail (bord droit de la colonne « heure ») */
.timeline {
  --rail-x: 104px;
}
/* Barre de progression : fine comme les séparateurs du site,
   bordeaux sur la partie parcourue, transparente sinon (pas de rail de fond) */
.timeline__progress {
  position: absolute;
  left: var(--rail-x);
  top: 4px;
  width: 1.5px;
  height: 0;                 /* mis à jour par JS au scroll */
  background: var(--bordeaux);
  transition: height .15s linear;
  z-index: 0;
}
/* En-tête de journée (Samedi / Dimanche) — masque le rail derrière son libellé */
.timeline__day {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  font-family: var(--font-corps);
  font-weight: 400;                  /* pas en gras */
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 1.05rem;
  color: var(--color-text);          /* aubergine #2A0410 */
  margin: 30px 0 16px 34px;          /* léger décalage à droite, vers la barre */
}
.timeline__day:first-of-type { margin-top: 0; }
/* Une étape : colonne heure | rail | contenu */
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;   /* heure (jusqu'à 88px) puis contenu */
  column-gap: 32px;                  /* le rail à 104px tombe dans cet espace */
  padding: 4px 0 22px;
}
.timeline__time {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-align: right;
  padding-top: .7em;                 /* aligne l'heure avec le nom script */
}
.timeline__name {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-primary);
  margin: .3em 0 .35em;
}
.timeline__desc { color: var(--color-text-soft); }

/* ============================================================
   LE LIEU
   ============================================================ */
.lieu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: start;
}
.lieu__photo {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.lieu__cover { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.lieu__photo:hover .lieu__cover { transform: scale(1.04); }
/* Voile bordeaux à 50 % au survol */
.lieu__overlay {
  position: absolute;
  inset: 0;
  background: var(--bordeaux);
  opacity: .5;                       /* voile bordeaux affiché par défaut */
  transition: opacity .4s var(--ease);
  z-index: 1;
}
.lieu__photo:hover .lieu__overlay { opacity: 0; }   /* le bordeaux disparaît au survol */
/* Logo du Prieuré : blanc, grand, centré ; s'efface avec le voile au survol */
.lieu__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(170px, 48%, 290px);
  height: auto;
  z-index: 2;
  filter: brightness(0) invert(1);   /* blanc */
  transition: opacity .4s var(--ease);
}
.lieu__photo:hover .lieu__logo { opacity: 0; }
.lieu__photo-pin {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 2;
  font-family: var(--font-callout);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  background: rgba(42, 4, 16, .78);
  color: #fff;
  padding: 8px 14px;
  border-radius: 999px;
}
.lieu__desc { font-size: 17px; margin-bottom: 18px; }
.lieu__address {
  margin-bottom: 22px;
  color: var(--color-text-soft);
  line-height: 1.6;
}
.lieu__venue {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.section--primary .lieu__venue { color: var(--rose-poudre); }

/* Distances utiles — traité comme du texte, pas de bloc/carte */
.distances { margin-top: 42px; }
.distances__title {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 6px;
}
.section--primary .distances__title { color: var(--rose-poudre); }
.distances__grid { list-style: none; }
.distances__grid li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(42, 4, 16, .18);
}
.distances__grid li:last-child { border-bottom: none; }
.distances__where { color: var(--color-text); font-size: .96rem; }
.distances__time {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: .78rem;
  color: var(--color-primary);
  white-space: nowrap;
}
.section--primary .distances__grid li { border-bottom-color: rgba(255, 255, 255, .25); }
.section--primary .distances__where   { color: rgba(255, 255, 255, .85); }
.section--primary .distances__time    { color: #fff; }

/* ============================================================
   BLOCS GUIDE (où séjourner / environs) — entrées, zones, badges
   ============================================================ */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: center;
  padding: 16px 0;
  margin-bottom: 18px;
  border-top: 1px solid rgba(98, 108, 69, .25);
  border-bottom: 1px solid rgba(98, 108, 69, .25);
}
.subnav a {
  font-family: var(--font-callout);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .7rem;
  font-weight: 500;
  color: var(--color-text-soft);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
}
.subnav a:hover { color: var(--color-primary); border-bottom-color: var(--color-highlight); }

/* ---------- BOUTONS (où séjourner / environs) ---------- */
.tabs__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  justify-content: center;
  margin-bottom: 36px;
}
/* Desktop large : les boutons tiennent sur une seule ligne (testé : 3 et 5
   boutons passent dès ~960px). En dessous (tablette/mobile), ils continuent
   de s'enrouler sur plusieurs lignes comme aujourd'hui. */
@media (min-width: 961px) {
  .tabs__nav { flex-wrap: nowrap; }
}
.tabs__btn {
  font-family: var(--font-callout);
  font-weight: 500;
  font-size: .73rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
  padding: 10px 28px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0; /* le texte du bouton reste sur une seule ligne, jamais compressé */
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .4s var(--ease-pop),
              opacity .4s var(--ease-pop);
}
.tabs__btn:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-1px);
}
.tabs__btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
/* Invitation au clic : à l'arrivée au scroll, les boutons montent et
   apparaissent en fondu, légèrement échelonnés (léger effet « rebond »
   via --ease-pop). Se joue une seule fois. Respecte prefers-reduced-motion
   (voir script.js, qui affiche alors les boutons directement, sans anim). */
.tabs__nav .tabs__btn {
  opacity: 0;
  transform: translateY(16px);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.tabs__nav.is-revealed .tabs__btn {
  opacity: 1;
  transform: none;
}
.tabs__nav.is-revealed .tabs__btn:hover { transition-delay: 0s; }

/* Panneau actif : léger fondu d'apparition au changement d'onglet */
.tabs__panel[hidden] { display: none; }
.tabs__panel { animation: panelFade .45s var(--ease); }
@keyframes panelFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.guide-block {
  scroll-margin-top: calc(var(--header-h) + 16px);
  padding: 38px 0 8px;
}
.guide-block__head { margin-bottom: 18px; }
.guide-block__title {
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1.2;
  color: var(--color-primary);
  margin: .55em 0 .55em;
}
.guide-block__sub { color: var(--color-text-soft); margin-top: 8px; max-width: 640px; font-size: 17px; }
.guide-block__sub b { color: var(--color-text); }

/* Étiquette de zone */
.zone {
  font-family: var(--font-callout);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .74rem;
  font-weight: 600;
  color: var(--color-text-soft);
  margin: 30px 0 6px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.zone::after { content: ""; flex: 1; height: 1px; background: rgba(98, 108, 69, .3); }

/* Entrée individuelle */
.entry {
  padding: 16px 0;
  border-bottom: 1px dotted rgba(98, 108, 69, .35);
}
.entry:last-child { border-bottom: none; }
.entry__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.entry__top h4 {
  font-family: var(--font-corps);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--color-text);
}
.entry__note {
  font-family: var(--font-callout);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--color-text-soft);
  font-weight: 400;
}
.meta {
  font-family: var(--font-callout);
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--color-text-soft);
}
.meta b { color: var(--color-primary); font-weight: 600; }
.meta .star { color: var(--color-highlight); }
.entry__desc { margin-top: 6px; color: var(--color-text-soft); font-size: 17px; }
.entry__desc .tag { font-style: italic; color: var(--color-olive, var(--vert-olive)); }
.entry__info {
  margin-top: 8px;
  font-family: var(--font-callout);
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--color-text-soft);
}
.entry__info b { color: var(--color-text); font-weight: 600; }

/* Badge / pastille */
.badge,
.note {
  font-family: var(--font-callout);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--color-text-soft);
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 8px;
  white-space: nowrap;
}
.note--alt  { background: var(--color-accent); }
.note--gold { background: var(--color-primary); }

/* Lien « réserver » */
.book {
  font-family: var(--font-callout);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .7rem;
  font-weight: 600;
  color: var(--color-accent);
  border-bottom: 1px solid rgba(179, 79, 89, .4);
  padding-bottom: 1px;
}
.book:hover { color: var(--color-primary); border-bottom-color: var(--color-highlight); }

/* Bandeau arrivée */
.arrival {
  margin: 30px 0;
  border-top: 1px solid rgba(98, 108, 69, .28);
  border-bottom: 1px solid rgba(98, 108, 69, .28);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.arrival > div { padding: 22px 16px; text-align: center; }
.arrival > div + div { border-left: 1px solid rgba(98, 108, 69, .28); }
.arrival__k {
  font-family: var(--font-callout);
  font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-accent); font-weight: 600;
}
.arrival__v {
  font-family: var(--font-titre);
  font-size: 2.1rem; line-height: 1; color: var(--color-primary); margin: .3em 0 .35em;
}
.arrival__d { font-size: .92rem; color: var(--color-text-soft); font-style: italic; }

/* Anecdote / encart citation */
.anecdote {
  background: rgba(255,255,255,.55);
  border-left: 3px solid var(--color-accent);
  padding: 20px 24px;
  margin: 22px 0;
  font-style: italic;
  color: var(--color-text-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.anecdote b { font-style: normal; color: var(--color-text); }

/* Délices d'ici : grille type bandeau « Depuis Aix » — cellules centrées, dividers fins */
.delices {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(42, 4, 16, .15);
  border-bottom: 1px solid rgba(42, 4, 16, .15);
}
.delice {
  padding: 28px 24px;
  text-align: center;
}
/* Dividers verticaux entre colonnes */
.delice:not(:nth-child(3n + 1)) { border-left: 1px solid rgba(42, 4, 16, .15); }
/* Divider horizontal entre les deux lignes */
.delice:nth-child(n + 4) { border-top: 1px solid rgba(42, 4, 16, .15); }
.delice h5 {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}
.delice p { font-size: .95rem; color: var(--color-text-soft); }
/* Mobile : empilé, dividers horizontaux (même responsivité que le bandeau d'arrivée) */
@media (max-width: 560px) {
  .delices { grid-template-columns: 1fr; }
  .delice { padding: 22px 8px; }
  .delice:not(:nth-child(3n + 1)) { border-left: none; }
  .delice:nth-child(n + 2) { border-top: 1px solid rgba(42, 4, 16, .15); }
}

/* ============================================================
   GALERIE + LIGHTBOX
   ============================================================ */
/* Grille régulière : toutes les vignettes au même format 4:5 → espace vertical identique */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 760px;      /* grille resserrée → vignettes plus petites */
  margin: 0 auto;
}
.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 0;            /* pas de coins arrondis */
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 5;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.05); }
/* Léger voile bordeaux transparent sur toutes les photos de la galerie */
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(93, 19, 40, .18);
  pointer-events: none;
}

/* Vignettes avec deux photos (survol) : les deux images sont superposées,
   celle du survol se révèle en fondu par-dessus celle par défaut. */
.gallery__item--pair img {
  position: absolute;
  inset: 0;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.gallery__item--pair .gallery__item-img--hover { opacity: 0; }
.gallery__item--pair:hover .gallery__item-img--default { opacity: 0; }
.gallery__item--pair:hover .gallery__item-img--hover { opacity: 1; }

/* Écrans tactiles (mobile) : pas de survol fiable → la 2e photo apparaît en fondu
   quand la vignette arrive au centre de l'écran au scroll (classe posée par le JS). */
@media (hover: none) {
  .gallery__item--pair.show-photo2 .gallery__item-img--default { opacity: 0; }
  .gallery__item--pair.show-photo2 .gallery__item-img--hover { opacity: 1; }
}

/* Vignette « citation » (ex. 2020) : un voile noir avec une quote apparaît au survol */
.gallery__quote {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 22px;
  background: #000;
  color: #fff;
  font-family: var(--font-corps);
  font-style: italic;
  font-size: .85rem;
  line-height: 1.35;
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.gallery__item--quote:hover .gallery__quote { opacity: 1; }

/* Étiquette année, façon petit tag collé un peu de travers, centrée en haut de chaque photo */
.gallery__year {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 3;
  background: var(--aubergine);
  color: #fff;
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .04em;
  line-height: 1;
  padding: 5px 8px;
  transform: translateX(-50%) rotate(-3deg);
}
.gallery__item:nth-child(even) .gallery__year { transform: translateX(-50%) rotate(3deg); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(42, 4, 16, .92);
}
.lightbox.is-open { display: flex; }
.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.lightbox__close {
  position: absolute;
  top: 18px; right: 24px;
  font-size: 2.6rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}

/* ============================================================
   COMPTE À REBOURS
   ============================================================ */
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 30px;
  flex-wrap: wrap;
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
}
.countdown__num {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  font-family: var(--font-callout);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rose-poudre);
  margin-top: 8px;
}
.countdown__sep {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  color: rgba(255,255,255,.5);
  line-height: 1.1;
  padding-top: 2px;
}

/* ============================================================
   CONTACTS (FAQ)
   ============================================================ */
.contacts { list-style: none; margin-top: 14px; }
.contacts li {
  padding: 9px 0;
  border-top: 1px dotted rgba(98, 108, 69, .35);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
}
.contacts li span:first-child {
  font-family: var(--font-callout);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  min-width: 130px;
}

/* ============================================================
   FAQ ACCORDÉON
   ============================================================ */
.faq__item {
  border-bottom: 1px solid rgba(98, 108, 69, .25);
}
.faq__qheading { margin: 0; }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-titre);
  font-weight: 400;
  font-size: 1.8rem;   /* ~29px, taille fixe et uniforme pour tous les titres FAQ */
  line-height: 1.1;
  color: var(--color-primary);
  transition: color .2s var(--ease);
}
.faq__q:hover { color: var(--color-accent); }
.faq__chevron {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
  margin-bottom: 6px;
}
.faq__q[aria-expanded="true"] .faq__chevron { transform: rotate(-135deg); margin-bottom: 0; margin-top: 6px; }
.faq__a {
  padding: 0 4px 24px;
  color: var(--color-text-soft);
}
.faq__a p + .contacts { margin-top: 12px; }

/* Deux photos d'inspiration (ex. dress code) — fond blanc fondu dans le fond de la section */
.faq-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 36px;
  align-items: end;
}
.faq-photos img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
@media (max-width: 480px) {
  .faq-photos { grid-template-columns: 1fr; }
}

/* ============================================================
   PIED DE PAGE
   ============================================================ */
.site-footer {
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 54px 22px 60px;
}
.site-footer__names {
  font-family: var(--font-titre);
  font-size: 3rem;
  line-height: 1.1;
  color: #fff;
  margin: .35em 0 .4em;
}
/* Logo image du pied de page : masqué en desktop (on garde le texte),
   affiché à la place du texte en mobile (le script se superposait). */
.site-footer__logo { display: none; }
.site-footer__meta {
  font-family: var(--font-callout);
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose-poudre);
  margin: 12px 0 18px;
}
.site-footer__link a {
  color: #fff;
  font-family: var(--font-callout);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 1.5px solid #fff;   /* soulignement blanc */
  padding-bottom: 3px;
}
.site-footer__link a:hover { color: var(--rose-poudre); border-bottom-color: var(--rose-poudre); }
.site-footer__credit {
  font-family: var(--font-callout);
  font-size: .62rem;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .55);
  margin: 22px 0 0;
}

/* ============================================================
   ANIMATIONS D'APPARITION (IntersectionObserver)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   PAGE RSVP
   ============================================================ */
.rsvp-page { background: var(--color-surface); }
.rsvp-hero {
  padding: calc(var(--header-h) + 60px) 22px 50px;
  text-align: center;
  background: var(--color-primary);
  color: #fff;
}
.rsvp-back {
  position: fixed;
  top: 18px; left: 18px;
  z-index: 110;
  font-family: var(--font-callout);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: rgba(255,255,255,.92);
  padding: 9px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.rsvp-back:hover { background: #fff; color: var(--color-accent); }

.rsvp-section { padding: 56px 0 90px; }
.form-frame {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  max-width: 760px;
  margin: 0 auto;
}
.form-frame iframe {
  width: 100%;
  min-height: 1400px;
  border: 0;
  border-radius: 8px;
  display: block;
}
.rsvp-thanks {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  font-style: italic;
  font-size: 1.14rem;
  color: var(--color-text-soft);
}

/* ============================================================
   RESPONSIVE — tablette / desktop
   ============================================================ */
@media (min-width: 720px) {
  .lieu { grid-template-columns: 0.8fr 1fr; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 52px; }
}

/* ---------- MOBILE : menu burger ---------- */
@media (max-width: 980px) {
  .nav__burger { display: flex; }

  .nav__menu {
    position: fixed;
    top: 0; right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    padding: 80px 36px;
    background: var(--color-primary);
    box-shadow: -10px 0 40px rgba(42, 4, 16, .3);
    transform: translateX(100%);
    transition: transform .4s var(--ease);
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__link { color: #fff; font-size: 1rem; }
  .site-header.is-scrolled .nav__link { color: #fff; }
  .nav__link--cta { color: #fff; background: var(--color-accent); }

  /* Burger animé en croix quand ouvert */
  .nav__burger.is-open span { background: #fff; }
  .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger.is-open span:nth-child(2) { opacity: 0; }
  .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Quand le menu mobile est ouvert, le header garde un fond lisible */
  .site-header.menu-open .nav__burger span { background: #fff; }
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .arrival { grid-template-columns: 1fr; }
  .arrival > div + div { border-left: none; border-top: 1px solid rgba(98, 108, 69, .28); }
  .countdown__unit { min-width: 60px; }
  .countdown { gap: 4px; }
  /* Timeline compacte sur mobile : colonne heure plus étroite, rail en son centre */
  .timeline { --rail-x: 74px; }
  .timeline__item { grid-template-columns: 62px 1fr; column-gap: 24px; }
  .timeline__name { font-size: 1.7rem; }
  .contacts li span:first-child { min-width: 100%; }

  /* Amsterdam Fair déborde à gauche : on décale les titres script pour ne pas
     que leur premier délié soit coupé sur mobile. */
  .section__title,
  .guide-block__title,
  .list-card__title,
  .timeline__name,
  .arrival__t { padding-left: .4em; }
  .faq__q { padding-left: 12px; }

  /* Intitulés des onglets (Maisons & gîtes, Hôtels & domaines, Vignobles,
     Tables, Villages & visites, Séjour prolongé, Délices d'ici…) : on décale
     encore le texte vers la droite sur mobile. */
  .tabs__btn { padding-left: 40px; }

  /* Pied de page : le script « Mathilde & Antoine » se superposait → on le
     remplace par le logo (image) en mobile. */
  .site-footer__names { display: none; }
  .site-footer__logo {
    display: block;
    width: min(200px, 64%);
    height: auto;
    margin: 0 auto 8px;
  }

  /* Photo du hero : le format portrait du mobile recadre beaucoup trop serré
     la photo desktop (paysage) pour garder les deux visages avec de l'espace
     de chaque côté des noms. On utilise donc un recadrage dédié (couple
     centré horizontalement, complété de bandes bordeaux en haut/bas pour
     garder assez de largeur visible) au lieu de la photo desktop. */
  .hero__photo {
    background-image: url("images/hero-mobile.jpg");
    background-position: center;
  }
}

/* ============================================================
   INTRO « ENVELOPPE » — overlay plein écran (vidéo détourée)
   ============================================================ */
#intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--aubergine);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  opacity: 1;
  transition: opacity .9s var(--ease);
}
#intro.intro-out { opacity: 0; pointer-events: none; }
/* centré par marges négatives (fiable même quand le canvas déborde de l'écran, ex. mobile) */
#introCanvas { display: block; position: absolute; left: 50%; top: 50%; }
/* légère respiration avant le clic (remplace le texte d'invite) */
#introCanvas.pulse { animation: introPulse 2.8s ease-in-out infinite; }
@keyframes introPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.014); }
}
/* bouton passer, discret */
#introSkip {
  position: absolute;
  bottom: 22px;
  right: 26px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-callout);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(234, 194, 192, .55);
  padding: 8px 2px;
  border-bottom: 1px solid rgba(234, 194, 192, .3);
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
#introSkip:hover { color: rgba(234, 194, 192, .95); border-bottom-color: rgba(234, 194, 192, .7); }
/* verrouille le scroll du site tant que l'intro est affichée */
body.intro-lock { overflow: hidden; }

/* ============================================================
   ACCESSIBILITÉ — prefers-reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__scroll span::after { animation: none; }
  .hero__bg { transform: none !important; }
  .tabs__nav .tabs__btn { opacity: 1; transform: none; }
}

/* ============================================================
   ANIMATION D'OUVERTURE « ENVELOPPE » (1 fois par visiteur)
   ============================================================ */
/* Cachée par défaut ; affichée uniquement quand le script précoce a posé
   la classe html.intro-play (1re visite). Aucun flash pour les autres. */
.envelope-intro {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #5d1428;         /* couleur EXACTE du fond des images d'animation */
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
html.intro-play .envelope-intro { display: flex; }
html.intro-play, html.intro-play body { overflow: hidden; }

.envelope-intro__stage { position: absolute; inset: 0; }
/* Chaque frame = une image HD qui apparaît en fondu sur le fond bordeaux uni
   (aucun placeholder flou, aucune ombre, aucune transparence sur le cadre). */
.envelope-intro__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .28s ease;
  will-change: opacity;
}
.envelope-intro__frame.is-active { opacity: 1; }
/* Image pleine résolution : le fond bordeaux uni reste visible autour (aucun recadrage) */
.envelope-intro__full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s ease;
}
.envelope-intro__full.is-loaded { opacity: 1; }

.envelope-intro__skip {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
  font-family: var(--font-callout);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  background: rgba(42, 4, 16, .35);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.envelope-intro__skip:hover {
  color: #fff;
  background: rgba(42, 4, 16, .6);
  border-color: rgba(255, 255, 255, .6);
}

/* Fondu de sortie vers le site */
.envelope-intro.is-hiding {
  opacity: 0;
  transition: opacity .9s var(--ease);
  pointer-events: none;
}