/* ================================================================
   MAISON LORYNA — VERSION 2 — "MANIFESTE"
   Direction éditoriale / architecturale / galerie d'art.
   Préfixe .m2- pour isoler totalement de v1 et style.css.

   Concept : Tout l'opposé de la v1.
   V1 = sombre · photo dominant · horizontal · nocturne
   V2 = clair · typographie dominant · vertical · diurne
   ================================================================ */


/* ── Variables V2 ──────────────────────────────────────────────── */
:root {
  --m2-parchemin:    #F7F4EF;   /* Fond principal — blanc cassé chaud */
  --m2-parchemin-2:  #EFEBE3;   /* Fond légèrement plus sombre */
  --m2-rouge:        #C0392B;   /* Rouge vif — élément graphique héroïque */
  --m2-rouge-fonce:  #7A1520;   /* Rouge profond — footer, coming cta */
  --m2-bleu:         #0D2035;   /* Bleu nuit — texte, équipe, coming */
  --m2-bleu-mid:     #1B3A5C;
  --m2-encre:        #0E0C0A;   /* Quasi noir — titres */
  --m2-gris:         #6B6560;   /* Texte corps */
  --m2-gris-clair:   rgba(14,12,10,0.12); /* Séparateurs */
  --m2-or:           rgba(192,57,43,0.15); /* Tinte rouge très diluée */
  --m2-ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --m2-ease-long:    cubic-bezier(0.16, 1, 0.3, 1);
}


/* ── Corps ─────────────────────────────────────────────────────── */
body.m2-page {
  background: var(--m2-parchemin);
  color: var(--m2-encre);
  -webkit-font-smoothing: antialiased;
}

body.m2-page .page-content {
  padding-top: 0;
}


/* ================================================================
   NAVIGATION
   ================================================================ */

/* Par défaut : transparente sur l'ouverture claire */
body.m2-page .m2-nav {
  background: transparent;
  box-shadow: none;
  transition: background 0.6s ease, box-shadow 0.6s ease, border-bottom 0.6s ease;
  border-bottom: 1px solid transparent;
}

body.m2-page .m2-nav .m2-nav-logo {
  color: var(--m2-encre);
  font-size: 0.88rem;
  letter-spacing: 0.22em;
  transition: color 0.4s ease;
}

body.m2-page .m2-nav .nav-links a {
  color: rgba(14,12,10,0.5);
  transition: color 0.3s ease;
}
body.m2-page .m2-nav .nav-links a:hover {
  color: var(--m2-encre);
  background: transparent;
}

body.m2-page .m2-nav .hamburger { color: var(--m2-encre); }

/* Après scroll (sur sections sombres ou neutres) */
body.m2-page .m2-nav.m2-nav-scrolled {
  background: rgba(247, 244, 239, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--m2-gris-clair);
  border-bottom: 1px solid var(--m2-gris-clair);
}

/* Mobile nav */
body.m2-page .nav-mobile {
  background: var(--m2-parchemin);
  border-top: 1px solid var(--m2-gris-clair);
}
body.m2-page .nav-mobile a {
  color: var(--m2-encre);
  opacity: 0.7;
}
body.m2-page .nav-mobile a:hover {
  opacity: 1;
  background: rgba(14,12,10,0.04);
}


/* ── Navigation dots latérale ──────────────────────────────────── */
.m2-dots-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  opacity: 0;
  animation: m2-apparaitre 1s 2s ease forwards;
}

@keyframes m2-apparaitre {
  to { opacity: 1; }
}

.m2-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(14,12,10,0.2);
  transition: background 0.3s ease, transform 0.3s ease;
}
.m2-dot:hover,
.m2-dot--actif {
  background: var(--m2-rouge);
  transform: scale(1.4);
}


/* ================================================================
   OUVERTURE — Hero typographique
   Fond parchemin clair, composition architecturale
   ================================================================ */
.m2-ouverture {
  height: 100vh;
  min-height: 600px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--m2-parchemin);
}

/* Photo très atténuée en fond — suggestion, pas présence */
.m2-ouv-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0.055;
  filter: grayscale(1) contrast(0.8);
  transform: scale(1.04);
}

/* Filigrane géant "MAISON" — lettre fantôme */
.m2-filigrane {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  font-size: clamp(12vw, 20vw, 28vw);
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,12,10,0.055);
  text-stroke: 1px rgba(14,12,10,0.055);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

/* Contenu principal */
.m2-ouv-contenu {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  padding: 0 3rem;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2.5rem;
}

/* Haut : surtitre */
.m2-ouv-haut {
  text-align: right;
}

.m2-ouv-surtitre {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(14,12,10,0.3);
  animation: m2-glisse-bas 1.2s ease both;
}

/* Titre principal — composition asymétrique */
.m2-ouv-titre-wrap {
  position: relative;
  padding-bottom: 1.5rem;
}

/* Filet qui se trace de gauche à droite */
.m2-filet-trace {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--m2-rouge), rgba(192,57,43,0.2));
  transition: width 1.2s var(--m2-ease-long);
}
.m2-filet-trace--actif { width: 100%; }

.m2-ouv-titre {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}

/* "LORYNA" — gros, rouge, héroïque */
.m2-mot-loryna {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(5rem, 14vw, 12rem);
  color: var(--m2-rouge);
  letter-spacing: -0.02em;
  line-height: 0.92;
  animation: m2-glisse-bas 1.4s 0.1s ease both;
  display: block;
}

/* "Maison" — petit, encre, posé au-dessus */
.m2-mot-maison {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.1rem, 2.8vw, 2.2rem);
  color: rgba(14,12,10,0.45);
  letter-spacing: 0.15em;
  margin-bottom: 0.4rem;
  order: -1;
  animation: m2-glisse-bas 1.2s ease both;
}

/* Bas : ligne d'univers + CTA scroll */
.m2-ouv-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  animation: m2-glisse-bas 1.8s 0.35s ease both;
}

.m2-ouv-univers {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(14,12,10,0.4);
  margin: 0;
}

.m2-sep { color: var(--m2-rouge); opacity: 0.6; }

/* Flèche scroll */
.m2-decouvrir {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  text-decoration: none;
  color: rgba(14,12,10,0.38);
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.m2-decouvrir:hover { color: var(--m2-rouge); }

.m2-fleche-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.m2-fleche-ligne {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(14,12,10,0.2), rgba(14,12,10,0.05));
  animation: m2-fil-pulse 2.4s ease-in-out infinite;
}

@keyframes m2-fil-pulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  60%       { transform: scaleY(1);   opacity: 1;   }
}

.m2-fleche-scroll i {
  font-size: 0.6rem;
  animation: m2-bounce 2.4s ease-in-out infinite;
}

@keyframes m2-bounce {
  0%, 100% { transform: translateY(0); }
  60%       { transform: translateY(4px); }
}

/* Lien "Version 1" discret en bas de l'ouverture */
.m2-switch-version {
  position: absolute;
  bottom: 2.5rem;
  left: 3rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(14,12,10,0.22);
  text-decoration: none;
  transition: color 0.3s ease;
  z-index: 3;
}
.m2-switch-version:hover { color: var(--m2-rouge); }

/* Animation entrée commune */
@keyframes m2-glisse-bas {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   MARQUEE — Défilement éditorial horizontal
   ================================================================ */
.m2-marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--m2-gris-clair);
  border-bottom: 1px solid var(--m2-gris-clair);
  padding: 1.1rem 0;
  background: var(--m2-parchemin);
}

.m2-marquee-piste {
  display: inline-flex;
  white-space: nowrap;
  animation: m2-scroll-marquee 40s linear infinite;
  will-change: transform;
}

@keyframes m2-scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.m2-marquee-texte {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(14,12,10,0.28);
  padding-right: 3rem;
}

/* Mise en valeur des noms propres dans le marquee */
.m2-marquee-texte strong {
  color: var(--m2-rouge);
  font-weight: 400;
}


/* ================================================================
   CHAPITRES — Split éditorial texte/photo
   Chaque chapitre = 1 univers sur minimum 100vh
   Interaction : hover chapitre → photo s'éveille
   ================================================================ */
.m2-chapitre {
  display: flex;
  min-height: 100vh;
  position: relative;
  background: var(--m2-parchemin);
  transition: background 0.8s ease;
}

/* Teinte de fond au hover — signal d'éveil */
.m2-c--restaurant:hover { background: #FFF4F3; }
.m2-c--epicerie:hover   { background: #FBF8F2; }

/* ── Colonne texte ─────────────────────────────────────────────── */
.m2-c-texte {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
}

.m2-c-texte-inner {
  padding: 8rem 5rem 8rem 7vw;
  max-width: 560px;
  position: relative;
}

/* Numéro géant en arrière-plan — identité par chapitre */
.m2-c-num {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(8rem, 16vw, 18rem);
  color: transparent;
  line-height: 1;
  position: absolute;
  top: 4rem;
  left: 5vw;
  z-index: -1;
  transition: transform 0.9s var(--m2-ease-long), opacity 0.5s ease;
  user-select: none;
  pointer-events: none;
}

/* Couleur du numéro par chapitre */
.m2-c--restaurant .m2-c-num {
  -webkit-text-stroke: 1px rgba(192,57,43,0.1);
  text-stroke: 1px rgba(192,57,43,0.1);
}
.m2-c--epicerie .m2-c-num {
  -webkit-text-stroke: 1px rgba(150,90,20,0.1);
  text-stroke: 1px rgba(150,90,20,0.1);
}

/* Rotation légère du numéro au hover — "se réveille" */
.m2-c--restaurant:hover .m2-c-num,
.m2-c--epicerie:hover .m2-c-num {
  transform: rotate(3deg) translateX(0.5rem);
  -webkit-text-stroke-color: rgba(192,57,43,0.22);
}

/* Meta : tag + filet */
.m2-c-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}

.m2-c-tag {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--m2-rouge);
}

.m2-c-filet {
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--m2-rouge);
  opacity: 0.35;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s var(--m2-ease-long);
}

/* Filet se trace quand le chapitre est visible */
.m2-c--visible .m2-c-filet { transform: scaleX(1); }

/* Titre du chapitre — italic Playfair, grand */
.m2-c-titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(3rem, 5.5vw, 5.5rem);
  line-height: 1.0;
  color: var(--m2-encre);
  margin: 0 0 1.4rem;
  transition: transform 0.6s var(--m2-ease);
}

.m2-c-titre em {
  font-style: italic;
  color: var(--m2-rouge);
  font-weight: 900;
}

/* Montée légère du titre au hover du chapitre */
.m2-c--restaurant:hover .m2-c-titre,
.m2-c--epicerie:hover .m2-c-titre {
  transform: translateY(-4px);
}

/* Accroche — une ligne forte */
.m2-c-accroche {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(14,12,10,0.55);
  line-height: 1.55;
  margin: 0 0 2rem;
  border-left: 2px solid rgba(192,57,43,0.22);
  padding-left: 1.2rem;
}

/* Corps de texte */
.m2-c-details p {
  font-family: 'Lato', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--m2-gris);
  margin: 0 0 1rem;
}

/* Actions */
.m2-c-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* Bouton éditorial : texte + filet animé qui croît sous le texte */
.m2-btn-editorial {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--m2-encre);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  gap: 0.4rem;
  transition: color 0.3s ease;
}
.m2-btn-editorial:hover { color: var(--m2-rouge); }

.m2-btn-editorial--disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.m2-btn-filet {
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.45s var(--m2-ease-long);
}
.m2-btn-editorial:hover .m2-btn-filet { transform: scaleX(1); }


/* ── Colonne photo (sticky) ────────────────────────────────────── */
.m2-c-photo {
  flex: 0 0 50%;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  overflow: hidden;
}

/* Photo elle-même */
.m2-c-photo-inner {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Par défaut : désaturée, douce — attend l'éveil */
  filter: grayscale(0.65) contrast(0.88) brightness(0.9);
  transform: scale(1.05);
  transition:
    filter    0.9s ease,
    transform 1.2s var(--m2-ease-long);
  will-change: transform, filter;
}

/* ÉVEIL au hover du chapitre : couleurs vraies + zoom léger vers l'intérieur */
.m2-c--restaurant:hover .m2-c-photo-inner {
  filter: grayscale(0) contrast(1.0) brightness(0.92) saturate(1.1);
  transform: scale(1.02);
}
.m2-c--epicerie:hover .m2-c-photo-inner {
  filter: grayscale(0) contrast(0.95) brightness(0.88) saturate(1.05) sepia(0.08);
  transform: scale(1.02);
}

/* Aura de couleur — émerge au hover, déborde légèrement */
.m2-c-aura {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  z-index: 1;
}

.m2-c--restaurant .m2-c-aura {
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(192,57,43,0.28) 0%, transparent 70%);
  box-shadow: 0 0 80px rgba(192,57,43,0.25);
}
.m2-c--epicerie .m2-c-aura {
  background: radial-gradient(ellipse 60% 80% at 50% 100%,
    rgba(160,100,30,0.28) 0%, transparent 70%);
  box-shadow: 0 0 80px rgba(160,100,30,0.2);
}

/* L'aura se révèle au hover */
.m2-c--restaurant:hover .m2-c-aura,
.m2-c--epicerie:hover .m2-c-aura {
  opacity: 1;
}

/* Badge numéro sur la photo */
.m2-c-photo-badge {
  position: absolute;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 2;
}

.m2-c-photo-num {
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  font-size: 1.1rem;
  letter-spacing: 0.35em;
  color: rgba(255,255,255,0.32);
  transition: color 0.6s ease;
}

.m2-c--restaurant:hover .m2-c-photo-num,
.m2-c--epicerie:hover .m2-c-photo-num {
  color: rgba(255,255,255,0.7);
}

/* Overlay dégradé bas pour lecture */
.m2-c-photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── Version inversée (épicerie) ───────────────────────────────── */
.m2-c--inverse { flex-direction: row-reverse; }

.m2-c--inverse .m2-c-texte-inner {
  padding: 8rem 7vw 8rem 5rem;
}

.m2-c--inverse .m2-c-num { right: 5vw; left: auto; }


/* ── Séparateur entre chapitres ────────────────────────────────── */
.m2-inter-section {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 7vw;
  background: var(--m2-parchemin);
}

.m2-inter-ligne {
  flex: 1;
  height: 1px;
  background: var(--m2-gris-clair);
}

.m2-inter-ornement {
  font-size: 0.65rem;
  color: rgba(192,57,43,0.35);
  letter-spacing: 0.1em;
}


/* ================================================================
   COMING SOON — Îlot bleu nuit
   Seule zone sombre dans la page claire — rupture volontaire
   Minimal, mystérieux, silencieux — aucune photo
   ================================================================ */
.m2-coming {
  background: var(--m2-bleu);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: 8rem 2rem;
}

/* Particules flottantes — points de lumière froide */
.m2-coming-particules {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.m2-coming-particules span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  animation: m2-flotter 8s ease-in-out infinite;
}

.m2-coming-particules span:nth-child(1) { top: 20%; left: 15%; }
.m2-coming-particules span:nth-child(2) { top: 65%; left: 28%; width: 3px; height: 3px; }
.m2-coming-particules span:nth-child(3) { top: 35%; left: 72%; }
.m2-coming-particules span:nth-child(4) { top: 78%; left: 58%; width: 1px; height: 1px; }
.m2-coming-particules span:nth-child(5) { top: 15%; left: 85%; }
.m2-coming-particules span:nth-child(6) { top: 55%; left: 92%; width: 3px; height: 3px; }

@keyframes m2-flotter {
  0%, 100% { transform: translateY(0) scale(1);   opacity: 0.18; }
  50%       { transform: translateY(-18px) scale(1.6); opacity: 0.5; }
}

.m2-coming-contenu {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 680px;
}

/* Grand numéro fantôme */
.m2-coming-num {
  display: block;
  font-family: 'Lato', sans-serif;
  font-weight: 100;
  font-size: clamp(6rem, 15vw, 14rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  text-stroke: 1px rgba(255,255,255,0.06);
  line-height: 1;
  margin-bottom: -2rem;
  user-select: none;
}

.m2-coming-filet {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.15);
  margin: 1.5rem auto;
}

.m2-coming-tag {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin: 0 0 1.8rem;
}

.m2-coming-titre {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  color: rgba(255,255,255,0.7);
  line-height: 1.25;
  margin: 0 0 1.8rem;
}
.m2-coming-titre em {
  color: rgba(255,255,255,0.42);
  font-style: italic;
}

.m2-coming-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255,255,255,0.22);
  line-height: 1.8;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Trois points animés */
.m2-coming-points {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 3rem;
}
.m2-coming-points span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  animation: m2-points-pulse 2.8s ease-in-out infinite;
}
.m2-coming-points span:nth-child(2) { animation-delay: 0.4s; }
.m2-coming-points span:nth-child(3) { animation-delay: 0.8s; }

@keyframes m2-points-pulse {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%       { opacity: 0.6;  transform: scale(1.8); }
}


/* ================================================================
   CITATION — Typographie pleine largeur
   ================================================================ */
.m2-citation {
  background: var(--m2-parchemin-2);
  padding: 8rem 3rem;
  text-align: center;
  border-top: 1px solid var(--m2-gris-clair);
  border-bottom: 1px solid var(--m2-gris-clair);
}

.m2-citation-inner {
  max-width: 820px;
  margin: 0 auto;
}

.m2-guillemet {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 5rem;
  color: rgba(192,57,43,0.18);
  line-height: 0.6;
  margin-bottom: 0.5rem;
  user-select: none;
}

.m2-citation blockquote {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--m2-encre);
  margin: 0;
  padding: 0;
  border: none;
}

.m2-citation blockquote em {
  color: var(--m2-rouge);
}

.m2-citation blockquote cite {
  display: block;
  margin-top: 2rem;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(14,12,10,0.3);
}


/* ================================================================
   ÉQUIPE — Fond rouge foncé (opposé de v1 qui l'avait sur blanc)
   ================================================================ */
.m2-equipe {
  background: var(--m2-rouge-fonce);
  padding: 8rem 2rem;
}

.m2-label-clair    { color: rgba(255,255,255,0.45) !important; }
.m2-titre-clair    { color: rgba(255,255,255,0.9)  !important; }
.m2-sub-clair      { color: rgba(255,255,255,0.45) !important; }
.m2-divider-clair  { color: rgba(255,255,255,0.25) !important; }

.m2-team-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}
.m2-team-card h3   { color: rgba(255,255,255,0.88) !important; }
.m2-team-card .role { color: rgba(255,255,255,0.42) !important; }
.m2-team-card .team-photo { border-color: rgba(255,255,255,0.15) !important; }


/* ================================================================
   RÉSERVATION — Blanc sobre, grille éditorial
   ================================================================ */
.m2-resa {
  background: var(--m2-parchemin);
  padding: 8rem 2rem;
  border-top: 1px solid var(--m2-gris-clair);
}

.m2-resa .section-label { color: var(--m2-rouge); }

.m2-resa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

.m2-resa-titre {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--m2-encre);
  line-height: 1.18;
  margin: 0.5rem 0 2.5rem;
}

.m2-resa-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.m2-resa-liste li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  font-size: 0.92rem;
  color: var(--m2-gris);
  font-weight: 300;
  line-height: 1.6;
}

.m2-resa-liste li i {
  color: var(--m2-rouge);
  margin-top: 0.15rem;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.m2-resa-liste a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.m2-resa-liste a:hover { color: var(--m2-rouge); }

/* Carte de réservation */
.m2-resa-carte {
  background: var(--m2-parchemin-2);
  border: 1px solid var(--m2-gris-clair);
  padding: 3.5rem;
  border-radius: 2px;
}

.m2-resa-carte-sur {
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--m2-rouge);
  margin: 0 0 1rem;
  font-weight: 700;
}

.m2-resa-carte-titre {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.5vw, 2.1rem);
  font-weight: 700;
  color: var(--m2-encre);
  line-height: 1.25;
  margin: 0 0 2.2rem;
}

.m2-resa-carte-titre em {
  color: var(--m2-rouge);
  font-style: italic;
}

.m2-resa-carte-btns {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  align-items: flex-start;
}


/* ================================================================
   FOOTER — Fond très sombre
   ================================================================ */
body.m2-page .footer {
  background: #060e1c;
  border-top: 1px solid rgba(255,255,255,0.05);
}

body.m2-page .footer-brand .footer-logo { color: var(--blanc); }
body.m2-page .footer-brand p            { color: rgba(255,255,255,0.4); }
body.m2-page .footer-col h4             { color: rgba(255,255,255,0.5); }
body.m2-page .footer-col li,
body.m2-page .footer-col p              { color: rgba(255,255,255,0.38); opacity: 1; }
body.m2-page .footer-col li i           { color: #b03030; }
body.m2-page .footer-col a:hover        { color: var(--blanc); }
body.m2-page .footer-bottom {
  border-top-color: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.28);
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

/* Tablette */
@media (max-width: 1100px) {
  .m2-ouv-contenu { padding: 0 2rem; }
  .m2-c-texte-inner { padding: 6rem 3rem 6rem 5vw; }
  .m2-c--inverse .m2-c-texte-inner { padding: 6rem 5vw 6rem 3rem; }
  .m2-resa-grid { gap: 4rem; }
}

/* Mobile landscape */
@media (max-width: 900px) {
  .m2-resa-grid { grid-template-columns: 1fr; gap: 3.5rem; }
}

/* Mobile */
@media (max-width: 768px) {

  /* Dots nav : masquée */
  .m2-dots-nav { display: none; }

  /* Ouverture : titre plus compact */
  .m2-filigrane { font-size: 40vw; }
  .m2-ouv-bas { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .m2-switch-version { left: 1.5rem; bottom: 1.5rem; }

  /* Chapitres : empilés verticalement */
  .m2-chapitre {
    flex-direction: column !important;
    min-height: auto;
  }

  .m2-c-photo {
    flex: none;
    position: relative;
    height: 55vw;
    min-height: 240px;
    top: auto;
    width: 100%;
    align-self: auto;
  }

  .m2-c-texte { flex: none; width: 100%; }
  .m2-c-texte-inner {
    padding: 4rem 1.6rem 4rem;
  }
  .m2-c--inverse .m2-c-texte-inner { padding: 4rem 1.6rem 4rem; }

  .m2-c-num {
    font-size: 30vw;
    top: -1rem;
    left: 1rem;
  }

  /* Marquee */
  .m2-marquee-texte { font-size: 0.62rem; letter-spacing: 0.25em; }

  /* Coming */
  .m2-coming { min-height: 60vh; padding: 6rem 1.5rem; }

  /* Citation */
  .m2-citation { padding: 5rem 1.5rem; }

  /* Équipe */
  .m2-equipe { padding: 5rem 1.5rem; }

  /* Resa */
  .m2-resa { padding: 5rem 1.5rem; }
  .m2-resa-carte { padding: 2.2rem 1.6rem; }
}

/* Petit mobile */
@media (max-width: 480px) {
  .m2-mot-loryna { letter-spacing: -0.01em; }
  .m2-ouv-univers { font-size: 0.62rem; gap: 0.7rem; }
  .m2-c-titre { font-size: 2.6rem; }
  .m2-coming-titre { font-size: 1.8rem; }
  .m2-citation blockquote { font-size: 1.3rem; }
}

/* Accessibilité : réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  .m2-marquee-piste { animation: none; }
  .m2-filet-trace   { transition: none; }
  .m2-fil-pulse,
  .m2-bounce        { animation: none; }
  .m2-coming-particules span { animation: none; }
}