/* ================================================================
   MAISON LORYNA — VERSION 6 — "Vivante"

   V6 = V5 + animations organiques + micro-interactions + vie.
   Corrections : lisibilité expanding cards, btn-outline sombre.
   Nouveautés : tracé des textes outlined, parallax curseur,
   respiration des couches, flottement équipe, shimmer filets.

   Préfixe .m6- pour isolation totale.
   ================================================================ */

/* ── Variables V6 ───────────────────────────────────────────────── */
:root {
  --m6-parchemin:    #F7F4EF;
  --m6-parchemin-2:  #EFEBE3;
  --m6-rouge:        #C0392B;
  --m6-rouge-fonce:  #7A1520;
  --m6-bleu:         #0D2035;
  --m6-bleu-mid:     #1B3A5C;
  --m6-bleu-clair:   #8CB5C8;
  --m6-encre:        #0E0C0A;
  --m6-encre-2:      #1A1510;
  --m6-gris:         #6B6560;
  --m6-gris-clair:   rgba(14,12,10,0.12);
  --m6-ease:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --m6-ease-long:    cubic-bezier(0.16, 1, 0.3, 1);
  --m6-ease-organic: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Corps ──────────────────────────────────────────────────────── */
body.m6-page {
  background: var(--m6-parchemin);
  color: var(--m6-encre);
  -webkit-font-smoothing: antialiased;
}
body.m6-page .page-content { padding-top: 0; }


/* ================================================================
   NAVIGATION
   ================================================================ */
body.m6-page .m6-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.m6-page .m6-nav .m6-nav-logo {
  color: var(--m6-encre);
  font-size: 0.88rem;
  letter-spacing: 0.22em;
  transition: color 0.4s ease;
}
body.m6-page .m6-nav .nav-links a {
  color: rgba(14,12,10,0.5);
  transition: color 0.3s ease;
}
body.m6-page .m6-nav .nav-links a:hover {
  color: var(--m6-encre);
  background: transparent;
}
body.m6-page .m6-nav .hamburger { color: var(--m6-encre); }
body.m6-page .m6-nav.m6-nav-scrolled {
  background: rgba(247,244,239,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--m6-gris-clair);
  border-bottom: 1px solid var(--m6-gris-clair);
}
body.m6-page .nav-mobile {
  background: var(--m6-parchemin);
  border-top: 1px solid var(--m6-gris-clair);
}
body.m6-page .nav-mobile a { color: var(--m6-encre); opacity: 0.7; }
body.m6-page .nav-mobile a:hover { opacity: 1; background: rgba(14,12,10,0.04); }


/* ── Dots nav ───────────────────────────────────────────────────── */
.m6-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: m6-apparaitre 1s 2s ease forwards;
}
@keyframes m6-apparaitre { to { opacity: 1; } }

.m6-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;
  text-decoration: none;
}
.m6-dot:hover,
.m6-dot--actif {
  background: var(--m6-rouge);
  transform: scale(1.4);
}


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

/* ── Filigrane — tracé gauche→droite à l'entrée ── */
.m6-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.052);
  text-stroke: 1px rgba(14,12,10,0.052);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  will-change: transform;
  /* Clip reveal de gauche à droite — effet écriture */
  clip-path: inset(0 101% 0 0);
  animation: m6-text-draw 3s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.m6-ouv-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  pointer-events: none;
  will-change: transform;
}
.m6-ouv-photo--1 {
  background-position: center 40%;
  opacity: 0.07;
  filter: grayscale(1) contrast(0.78);
  animation: m6-breathe-a 28s ease-in-out infinite alternate;
}
.m6-ouv-photo--2 {
  background-position: 75% center;
  opacity: 0.038;
  filter: grayscale(1) blur(1.5px) contrast(0.72);
  animation: m6-breathe-b 34s ease-in-out infinite alternate;
}
.m6-ouv-photo--3 {
  background-position: 15% 65%;
  opacity: 0.025;
  filter: grayscale(1) blur(4px) contrast(0.68);
  animation: m6-breathe-c 40s ease-in-out infinite alternate;
}

.m6-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;
}

.m6-ouv-haut { text-align: right; }

.m6-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: m6-glisse-bas 1.2s ease both;
}

.m6-ouv-titre-wrap {
  position: relative;
  padding-bottom: 1.5rem;
  will-change: transform;
  transition: transform 1.0s cubic-bezier(0.16, 1, 0.3, 1);
}

.m6-filet-trace {
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(to right, var(--m6-rouge), rgba(192,57,43,0.18));
  transition: width 1.2s var(--m6-ease-long);
}
.m6-filet-trace--actif {
  width: 100%;
  /* Shimmer sweep après révélation */
  background: linear-gradient(
    90deg,
    var(--m6-rouge) 0%,
    rgba(192,57,43,0.18) 40%,
    rgba(255,200,180,0.6) 50%,
    rgba(192,57,43,0.18) 60%,
    var(--m6-rouge) 100%
  );
  background-size: 300% 100%;
  animation: m6-shimmer-sweep 3s cubic-bezier(0.16, 1, 0.3, 1) 1.4s both;
}
@keyframes m6-shimmer-sweep {
  from { background-position: 200% center; }
  to   { background-position: -100% center; }
}

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

/* LORYNA — les lettres sont créées dynamiquement par JS (.m6-char) */
.m6-mot-loryna {
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  font-size: clamp(5rem, 14vw, 12rem);
  color: var(--m6-rouge);
  letter-spacing: -0.02em;
  line-height: 0.92;
  display: block;
  overflow: hidden;
  /* Sans JS : animation de fallback */
  animation: m6-glisse-bas 1.4s 0.1s ease both;
}

/* Si JS a splitté les lettres, désactiver l'animation container */
.m6-mot-loryna.m6-chars-active {
  animation: none;
  opacity: 1;
  transform: none;
}

/* Chaque lettre de LORYNA — rise from below */
.m6-char {
  display: inline-block;
  clip-path: inset(110% 0 0 0);
  animation: m6-char-up 0.9s var(--m6-ease-long) both;
}

.m6-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: m6-glisse-bas 1.2s 0.05s ease both;
}

.m6-ouv-bas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  animation: m6-glisse-bas 1.8s 0.35s ease both;
}

.m6-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;
}
.m6-sep { color: var(--m6-rouge); opacity: 0.6; }

.m6-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;
}
.m6-decouvrir:hover { color: var(--m6-rouge); }

.m6-fleche-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.m6-fleche-ligne {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(14,12,10,0.2), rgba(14,12,10,0.04));
  animation: m6-fil-pulse 2.4s ease-in-out infinite;
}
@keyframes m6-fil-pulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.3; }
  60%       { transform: scaleY(1);   opacity: 1; }
}
.m6-fleche-scroll i {
  font-size: 0.6rem;
  animation: m6-bounce 2.4s ease-in-out infinite;
}
@keyframes m6-bounce {
  0%, 100% { transform: translateY(0); }
  60%       { transform: translateY(4px); }
}

.m6-version-links {
  position: absolute;
  bottom: 2.5rem;
  left: 3rem;
  display: flex;
  gap: 1.8rem;
  z-index: 3;
}
.m6-version-link {
  font-family: 'Lato', sans-serif;
  font-size: 0.63rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(14,12,10,0.2);
  text-decoration: none;
  transition: color 0.3s ease;
}
.m6-version-link:hover { color: var(--m6-rouge); }


/* ================================================================
   MARQUEE
   ================================================================ */
.m6-marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--m6-gris-clair);
  padding: 1.1rem 0;
  background: var(--m6-parchemin);
}
.m6-marquee-piste {
  display: inline-flex;
  white-space: nowrap;
  animation: m6-scroll-marquee 40s linear infinite;
  will-change: transform;
}
@keyframes m6-scroll-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.m6-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;
}


/* ================================================================
   PONTS DE TRANSITION
   ================================================================ */
.m6-bridge {
  height: 0;
  pointer-events: none;
}
.m6-bridge--to-dark,
.m6-bridge--to-light { background: transparent; }


/* ================================================================
   LES UNIVERS — V6 : Colonnes vivantes
   ─────────────────────────────────────────────────────────────────
   Corrections V6 :
   - btn-outline dans les cards : sombre sur fond clair ✓
   - gradient corps plus solide pour meilleure lisibilité ✓
   - brand-bg : révélation clip-path au hover ✓
   - numéros : matérialisation à l'entrée viewport ✓
   - parallax interne : photo suit le curseur ✓
   ================================================================ */
.m6-univers {
  display: flex;
  height: 100vh;
  min-height: 560px;
  position: relative;
  overflow: hidden;
  background: var(--m6-parchemin);
  border-top: 1px solid var(--m6-gris-clair);
  border-bottom: 1px solid var(--m6-gris-clair);
}

.m6-territoire {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition:
    flex       1.0s cubic-bezier(0.16, 1, 0.3, 1),
    filter     0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.m6-territoire + .m6-territoire {
  border-left: 1px solid rgba(14,12,10,0.07);
}
.m6-territoire:focus-visible {
  outline: 2px solid rgba(192,57,43,0.55);
  outline-offset: -2px;
}

/* ── Expansion ──────────────────────────────────────────────────── */
.m6-univers:has(.m6-t--restaurant:hover) .m6-t--restaurant { flex: 2.4; }
.m6-univers:has(.m6-t--epicerie:hover)   .m6-t--epicerie   { flex: 2.4; }
.m6-univers:has(.m6-t--coming:hover)     .m6-t--coming     { flex: 2.4; }

.m6-univers:has(.m6-t--restaurant:hover) .m6-t--epicerie,
.m6-univers:has(.m6-t--restaurant:hover) .m6-t--coming  { flex: 0.8; filter: brightness(0.90) saturate(0.40) blur(0.5px); }
.m6-univers:has(.m6-t--epicerie:hover)   .m6-t--restaurant,
.m6-univers:has(.m6-t--epicerie:hover)   .m6-t--coming  { flex: 0.8; filter: brightness(0.90) saturate(0.40) blur(0.5px); }
.m6-univers:has(.m6-t--coming:hover)     .m6-t--restaurant,
.m6-univers:has(.m6-t--coming:hover)     .m6-t--epicerie { flex: 0.8; filter: brightness(0.90) saturate(0.40) blur(0.5px); }

/* ── Fond photographique ───────────────────────────────────────── */
.m6-t-fond {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center 30%;
  /* Opacité des images de fond des card */
  opacity: 0.2;
  filter: grayscale(1) contrast(0.80) brightness(0.95);
  transform: scale(1.05);
  transition: transform 12s ease, opacity 0.9s ease, background-position 0.6s ease;
  z-index: 1;
  will-change: transform, background-position;
}
.m6-territoire:hover .m6-t-fond {
  opacity: 0.5;
  transform: scale(1.0);
}

.m6-t--restaurant .m6-t-fond {
  background-image: url('../assets/images/restaurant/galerie/55df6543-7093-4813-8d1b-dbf371d346d4-1024x683.jpg');
  background-position: center 25%;
}
.m6-t--epicerie .m6-t-fond {
  background-image: url('../assets/images/restaurant/galerie/IMG_9230.jpg');
  background-position: center 35%;
}
.m6-t--coming .m6-t-fond { display: none; }

/* ── Grain — dérive organique lente ───────────────────────────── */
.m6-t-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
  animation: m6-grain-drift 9s ease-in-out infinite;
}
@keyframes m6-grain-drift {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(-1.5px, 0.8px); }
  50%       { transform: translate(0.8px, -1.5px); }
  75%       { transform: translate(1.2px, 0.6px); }
}

/* ── Numéro — matérialise à l'entrée viewport (via JS) ─────────── */
.m6-t-numero {
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(9rem, 29vh, 40vh);
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,12,10,0.052);
  text-stroke: 1px rgba(14,12,10,0.052);
  line-height: 1;
  letter-spacing: -0.05em;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  /* État initial : invisible */
  opacity: 0;
  filter: blur(14px);
  /* Pas de transition ici — géré par la classe m6-num-visible */
}

/* Transition douce activée par JS après IntersectionObserver */
.m6-t-numero.m6-num-visible {
  animation: m6-numero-in 2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.m6-territoire:hover .m6-t-numero {
  -webkit-text-stroke-color: rgba(14,12,10,0.10);
}

/* ── Corps — gradient plus solide pour lisibilité V6 ──────────── */
.m6-t-corps {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 2.8rem 3.2rem;
  /* V6 : zone opaque plus étendue — texte toujours lisible */
  background: linear-gradient(
    to top,
    rgba(247,244,239,1.00)  0%,
    rgba(247,244,239,0.98) 20%,
    rgba(247,244,239,0.94) 36%,
    rgba(247,244,239,0.65) 56%,
    transparent            76%
  );
  color: var(--m6-encre);
  overflow: hidden;
}

/* ── Catégorie ─────────────────────────────────────────────────── */
.m6-t-categorie {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 4.2rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,12,10,0.26);
  text-stroke: 1px rgba(14,12,10,0.26);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin: 0 0 0.85rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: -webkit-text-stroke-color 0.8s ease, letter-spacing 0.8s var(--m6-ease-long);
}
.m6-territoire:hover .m6-t-categorie {
  -webkit-text-stroke-color: rgba(14,12,10,0.65);
  letter-spacing: 0.23em;
}

/* ── Filet brand ─────────────────────────────────────────────── */
.m6-t-filet-brand {
  width: 0;
  height: 1px;
  margin-bottom: 0.95rem;
  background: linear-gradient(
    90deg,
    var(--m6-rouge) 0%,
    rgba(192,57,43,0.22) 60%
  );
  transition: width 0.7s var(--m6-ease-long);
  position: relative;
  overflow: hidden;
}
.m6-territoire:hover .m6-t-filet-brand {
  width: 46px;
}
/* Shimmer après révélation du filet */
.m6-territoire:hover .m6-t-filet-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,200,180,0.8) 50%,
    transparent 100%
  );
  animation: m6-filet-shimmer 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}
@keyframes m6-filet-shimmer {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(200%);  opacity: 1; }
}

/* ── Brand wrap ─────────────────────────────────────────────────── */
.m6-t-brand-wrap {
  position: relative;
  margin-bottom: 0.35rem;
  overflow: visible;
}

/* Brand-bg — V6 : clip-path reveal au hover (tracé) */
.m6-t-brand-bg {
  position: absolute;
  bottom: -0.1em;
  left: -0.02em;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(4rem, 10.5vh, 14vh);
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,12,10,0.055);
  text-stroke: 1px rgba(14,12,10,0.055);
  line-height: 1;
  letter-spacing: 0.03em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* V6 : débute caché, se dessine au hover */
  clip-path: inset(0 101% 0 0);
  transition: clip-path 1.0s cubic-bezier(0.16, 1, 0.3, 1),
              -webkit-text-stroke-color 0.9s ease;
}
.m6-territoire:hover .m6-t-brand-bg {
  clip-path: inset(0 -1% 0 0);
  -webkit-text-stroke-color: rgba(14,12,10,0.11);
}

/* Brand principal */
.m6-t-brand {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 6rem);
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  transition: transform 0.9s var(--m6-ease-long), letter-spacing 0.9s var(--m6-ease-long);
}
.m6-territoire:hover .m6-t-brand {
  transform: translateY(-4px);
  letter-spacing: 0.02em;
}

/* Couleurs brand */
.m6-t--restaurant .m6-t-brand {
  color: rgba(192,57,43,0.75);
  transition: color 0.8s ease, transform 0.9s var(--m6-ease-long), letter-spacing 0.9s var(--m6-ease-long);
}
.m6-t--restaurant:hover .m6-t-brand { color: var(--m6-rouge); }

.m6-t--epicerie .m6-t-brand {
  color: rgba(27,58,92,0.62);
  transition: color 0.8s ease, transform 0.9s var(--m6-ease-long), letter-spacing 0.9s var(--m6-ease-long);
}
.m6-t--epicerie:hover .m6-t-brand { color: var(--m6-bleu-mid); }

.m6-t--coming .m6-t-brand {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(14,12,10,0.26);
  font-style: italic;
  letter-spacing: 0.12em;
  transition:
    -webkit-text-stroke-color 0.8s ease,
    transform 0.9s var(--m6-ease-long),
    letter-spacing 0.9s var(--m6-ease-long);
}
.m6-t--coming:hover .m6-t-brand {
  -webkit-text-stroke-color: rgba(14,12,10,0.50);
}

/* ── Contenu hover — contrastes améliorés ──────────────────────── */
.m6-t-citation {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.66rem;
  color: rgba(14,12,10,0.55);
  margin: 0.9rem 0 0.55rem;
  padding-left: 0.8rem;
  border-left: 1px solid rgba(14,12,10,0.12);
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.8s ease, transform 0.8s var(--m6-ease-long);
}
.m6-territoire:hover .m6-t-citation { opacity: 1; transform: translateY(0); }

.m6-t-accroche {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 0.86rem;
  color: rgba(14,12,10,0.62);
  margin: 0 0 0.55rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.8s 0.06s ease, transform 0.8s 0.06s var(--m6-ease-long);
}
.m6-territoire:hover .m6-t-accroche { opacity: 1; transform: translateY(0); }

.m6-t-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.79rem;
  font-weight: 300;
  color: rgba(14,12,10,0.60);
  margin: 0 0 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s 0.12s ease, transform 0.8s 0.12s var(--m6-ease-long);
}
.m6-territoire:hover .m6-t-desc { opacity: 1; transform: translateY(0); }

/* ── CTA — V6 : btn-outline sombre sur fond clair ──────────────── */
.m6-t-cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s 0.20s ease, transform 0.7s 0.20s var(--m6-ease-long);
}
.m6-territoire:hover .m6-t-cta { opacity: 1; transform: translateY(0); }
.m6-t-cta .btn { font-size: 0.80rem; padding: 0.52rem 1.4rem; }

/* Override btn-outline pour fond clair */
.m6-t-cta .btn-outline {
  border: 1px solid rgba(14,12,10,0.22) !important;
  color: rgba(14,12,10,0.72) !important;
  background: transparent !important;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease !important;
}
.m6-t-cta .btn-outline:hover {
  background: rgba(192,57,43,0.07) !important;
  border-color: var(--m6-rouge) !important;
  color: var(--m6-rouge) !important;
}

/* Filet architectural au hover */
.m6-territoire::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: transparent;
  z-index: 5;
  transition: background 0.9s ease;
}
.m6-territoire:hover::before {
  background: linear-gradient(to right, transparent, rgba(14,12,10,0.06), transparent);
}

/* Fonds par univers */
.m6-t--restaurant {
  background: linear-gradient(170deg, #FDFAF7 0%, #F5EDE3 100%);
}
.m6-t--epicerie {
  background: linear-gradient(170deg, #FAFBFD 0%, #ECF1F6 100%);
}
.m6-t--coming { background: #FAFAF8; }

.m6-t--coming .m6-t-categorie {
  -webkit-text-stroke-color: rgba(14,12,10,0.16);
  letter-spacing: 0.28em;
}
.m6-t--coming:hover .m6-t-categorie {
  -webkit-text-stroke-color: rgba(14,12,10,0.36);
}


/* ================================================================
   NOTRE HISTOIRE
   ================================================================ */
.m6-histoire {
  background: var(--m6-parchemin);
  padding: 9rem 2rem;
  position: relative;
  overflow: hidden;
}

.m6-histoire-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.m6-label {
  color: var(--m6-rouge) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.45em !important;
  text-transform: uppercase;
  font-weight: 700;
  font-family: 'Lato', sans-serif;
}

.m6-histoire-titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  color: var(--m6-encre);
  line-height: 1.15;
  margin: 0.6rem 0 1.8rem;
}
.m6-histoire-titre em { color: var(--m6-rouge); font-style: italic; }

.m6-histoire-filet {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--m6-rouge), rgba(192,57,43,0.12));
  margin-bottom: 2.2rem;
  transition: width 1.1s var(--m6-ease-long);
  position: relative;
  overflow: hidden;
}
.m6-histoire-filet--actif { width: 56px; }
.m6-histoire-filet--actif::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,200,180,0.7), transparent);
  animation: m6-filet-shimmer 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}

.m6-histoire-corps {
  font-family: 'Lato', sans-serif;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.88;
  color: var(--m6-gris);
  margin: 0 0 1.2rem;
}

.m6-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(--m6-encre);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  gap: 0.4rem;
  transition: color 0.3s ease;
}
.m6-btn-editorial:hover { color: var(--m6-rouge); }

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

.m6-histoire-visuel { position: relative; }

.m6-histoire-img-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.m6-histoire-img {
  width: 100%;
  display: block;
  box-shadow: 0 20px 60px rgba(14,12,10,0.13);
  transition: transform 1.2s var(--m6-ease-long);
}
.m6-histoire-img-wrap:hover .m6-histoire-img { transform: scale(1.028); }

.m6-histoire-cadre {
  position: absolute;
  top: -16px; right: -16px; bottom: 16px; left: 16px;
  border: 1px solid rgba(192,57,43,0.14);
  border-radius: 2px;
  z-index: -1;
  pointer-events: none;
  /* V6 : légère animation du cadre */
  transition: transform 0.9s var(--m6-ease-long), opacity 0.9s ease;
}
.m6-histoire-img-wrap:hover ~ .m6-histoire-cadre,
.m6-histoire-visuel:hover .m6-histoire-cadre {
  transform: translate(-3px, 3px);
  opacity: 0.7;
}

.m6-histoire-citation {
  margin: 1.8rem 0 0;
  padding: 0 0 0 1.5rem;
  border-left: 2px solid rgba(192,57,43,0.18);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1rem;
  color: rgba(14,12,10,0.4);
  line-height: 1.6;
}


/* ================================================================
   NOTRE UNIVERS — Respiration organique V6
   ================================================================ */
.m6-univers-section {
  height: 68vh;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-radius: 10px;
  margin: 0 clamp(1rem, 2.5vw, 2.5rem);
}

.m6-uv-fond {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center 38%;
  opacity: 0.45;
  filter: saturate(0.60) contrast(0.9) grayscale(0.3);
  /* V6 : breathing organique */
  animation: m6-uv-fond-breathe 14s ease-in-out infinite;
}
@keyframes m6-uv-fond-breathe {
  0%   { transform: scale(1.06) translateY(0); }
  33%  { transform: scale(1.08) translateY(-4px); }
  66%  { transform: scale(1.05) translateY(2px); }
  100% { transform: scale(1.06) translateY(0); }
}
.m6-univers-section:hover .m6-uv-fond {
  animation-play-state: paused;
}

/* Voile bleu — respiration douce V6 */
.m6-uv-voile {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(13,32,53,0.90) 0%,
    rgba(13,32,53,0.58) 48%,
    rgba(13,32,53,0.25) 100%
  );
  animation: m6-voile-breathe 10s ease-in-out infinite;
}
@keyframes m6-voile-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.91; }
}

.m6-uv-contenu {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: 0 5vw;
}

.m6-uv-surtitre {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.45);
  font-weight: 300;
  display: block;
  margin-bottom: 1.8rem;
}

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

.m6-uv-citation {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.52;
  color: rgba(247,244,239,0.82);
  margin: 0;
  padding: 0 0 0 1.8rem;
  border-left: 2px solid rgba(192,57,43,0.42);
}
.m6-uv-citation em  { color: rgba(247,244,239,0.62); }
.m6-uv-citation cite {
  display: block;
  margin-top: 1.6rem;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(247,244,239,0.42);
}

.m6-uv-ornement {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-left: 1.8rem;
}
.m6-uv-ornement-ligne {
  flex: 1;
  max-width: 50px;
  height: 1px;
  background: rgba(247,244,239,0.1);
  display: block;
}
.m6-uv-ornement-etoile {
  font-size: 0.6rem;
  color: rgba(192,57,43,0.38);
  /* V6 : légère rotation lente */
  animation: m6-etoile-spin 20s linear infinite;
}
@keyframes m6-etoile-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* ================================================================
   ÉQUIPE — V6 : flottement organique
   ================================================================ */
.m6-equipe {
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem;
  background: var(--m6-parchemin);
}
.m6-equipe::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--m6-gris-clair);
  pointer-events: none;
  z-index: 0;
}
.m6-equipe .container { position: relative; z-index: 1; }

.m6-equipe-header {
  text-align: center;
  margin-bottom: 3.5rem;
}
.m6-equipe-label {
  font-family: 'Lato', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--m6-rouge);
  display: block;
  margin-bottom: 0.8rem;
}
.m6-equipe-titre {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: var(--m6-encre);
  margin: 0 0 1rem;
  line-height: 1.15;
}
.m6-equipe-sous {
  font-family: 'Lato', sans-serif;
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--m6-gris);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.75;
}
.m6-equipe-divider {
  text-align: center;
  color: var(--m6-rouge);
  opacity: 0.35;
  font-size: 0.8rem;
  margin: 0 0 3.5rem;
  letter-spacing: 0.5em;
}
.m6-equipe-grille {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  max-width: 740px;
  margin: 0 auto;
}
.m6-equipe-carte { text-align: center; }

.m6-equipe-photo {
  width: 220px;
  height: 280px;
  border-radius: 16px;
  object-fit: cover;
  object-position: center top;
  filter: grayscale(0.12);
  box-shadow: 0 8px 32px rgba(14,12,10,0.10);
  border: 3px solid var(--m6-parchemin-2);
  display: block;
  margin: 0 auto;
  /* V6 : flottement organique permanent */
  animation: m6-float 7s ease-in-out infinite;
  transition: filter 0.6s ease, box-shadow 0.6s ease, transform 0.4s ease;
}
.m6-equipe-carte:nth-child(2) .m6-equipe-photo {
  animation-delay: -3.5s; /* déphasage pour naturel */
}
.m6-equipe-carte:hover .m6-equipe-photo {
  filter: grayscale(0);
  box-shadow: 0 14px 40px rgba(14,12,10,0.15);
}

.m6-equipe-nom {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--m6-encre);
  margin: 1.2rem 0 0.3rem;
  line-height: 1.2;
}
.m6-equipe-role {
  font-family: 'Lato', sans-serif;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--m6-rouge);
  opacity: 0.8;
}


/* ================================================================
   TYPOGRAPHIE OUTLINE — Bg-texts décoratifs
   V6 : révélation par tracé (clip-path) via IntersectionObserver
   ================================================================ */
.m6-section-bg-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(11vw, 17vw, 21vw);
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,12,10,0.038);
  text-stroke: 1px rgba(14,12,10,0.038);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  letter-spacing: -0.02em;
  line-height: 1;
  z-index: 0;
  /* État initial : caché */
  clip-path: inset(0 101% 0 0);
}
.m6-section-bg-text--light {
  -webkit-text-stroke: 1px rgba(14,12,10,0.036);
  text-stroke: 1px rgba(14,12,10,0.036);
}
.m6-section-bg-text--adresse { top: 62%; }

/* Classe ajoutée par JS — révélation tracé */
.m6-section-bg-text.m6-drawn {
  animation: m6-text-draw 2.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* infos-bg-word "VISITE" */
.m6-infos-bg-word {
  position: absolute;
  bottom: -0.3em;
  left: -0.1em;
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: clamp(7rem, 14vw, 18rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,12,10,0.042);
  text-stroke: 1px rgba(14,12,10,0.042);
  line-height: 0.88;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  white-space: nowrap;
  clip-path: inset(0 101% 0 0);
}
.m6-infos-bg-word.m6-drawn {
  animation: m6-text-draw 2.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

/* Isolation z-index */
.m6-histoire  { overflow: hidden; }
.m6-infos     { position: relative; overflow: hidden; }
.m6-histoire .container,
.m6-infos .container { position: relative; z-index: 1; }


/* ================================================================
   NOUS TROUVER
   ================================================================ */
.m6-infos {
  background: var(--m6-parchemin);
  padding: 6.5rem 2rem;
  border-top: 1px solid var(--m6-gris-clair);
}
.m6-infos-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 6rem;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  align-items: start;
}
.m6-infos-gauche {
  padding-top: 0.5rem;
  position: relative;
}
.m6-infos-titre-gauche {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  color: var(--m6-encre);
  line-height: 1.1;
  margin: 0.6rem 0 0;
  position: relative;
  z-index: 1;
}
.m6-infos-titre-gauche em { color: var(--m6-rouge); font-style: italic; }

.m6-infos-filet-gauche {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--m6-rouge), rgba(192,57,43,0.10));
  margin: 1.5rem 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  transition: width 1.1s var(--m6-ease-long);
}
.m6-infos-filet-gauche--actif { width: 56px; }
.m6-infos-filet-gauche--actif::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,200,180,0.7), transparent);
  animation: m6-filet-shimmer 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s both;
}

.m6-infos-editorial-text {
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--m6-gris);
  position: relative;
  z-index: 1;
  margin: 0 0 0.9rem;
}
.m6-infos-editorial-text--small {
  font-size: 0.85rem;
  opacity: 0.62;
  font-style: italic;
  margin-bottom: 1.8rem;
}

.m6-infos-droite {
  display: flex;
  flex-direction: column;
}

.m6-infos-carte-v {
  padding: 1.5rem 1.8rem;
  background: var(--m6-parchemin-2);
  border: 1px solid var(--m6-gris-clair);
  transition: border-color 0.45s ease, box-shadow 0.45s ease, transform 0.45s var(--m6-ease-long);
  position: relative;
}
.m6-infos-carte-v:first-child {
  border-radius: 2px 2px 0 0;
  border-bottom: none;
}
.m6-infos-carte-v:last-child {
  border-radius: 0 0 2px 2px;
  background: var(--m6-parchemin);
  border-top: 1px solid var(--m6-gris-clair);
}
/* V6 : légère élévation au hover */
.m6-infos-carte-v:hover {
  border-color: rgba(192,57,43,0.18);
  box-shadow: 0 4px 20px rgba(14,12,10,0.06);
  transform: translateY(-2px);
  z-index: 1;
}

.m6-infos-cv--epicerie { border-top-style: dashed !important; }

.m6-infos-cv-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}
.m6-infos-cv-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  justify-content: center;
}
.m6-infos-cv-num-outline {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
  font-size: 2rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(14,12,10,0.15);
  text-stroke: 1px rgba(14,12,10,0.15);
  line-height: 1;
  letter-spacing: -0.04em;
  flex-shrink: 0;
}
.m6-infos-cv--epicerie .m6-infos-cv-num-outline {
  -webkit-text-stroke-color: rgba(14,12,10,0.08);
}
.m6-infos-cv-label-tag {
  font-family: 'Lato', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--m6-rouge);
}
.m6-infos-cv-nom {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--m6-encre);
  margin: 0;
  line-height: 1;
}
.m6-infos-cv-desc {
  font-family: 'Lato', sans-serif;
  font-size: 0.74rem;
  font-weight: 300;
  color: var(--m6-gris);
  margin: 0 0 1rem;
  font-style: italic;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--m6-gris-clair);
}
.m6-infos-liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.m6-infos-liste li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.82rem;
  color: var(--m6-gris);
  font-weight: 300;
  line-height: 1.45;
}
.m6-infos-liste li i {
  color: var(--m6-rouge);
  margin-top: 0.12rem;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.m6-infos-liste a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.m6-infos-liste a:hover { color: var(--m6-rouge); }

.m6-infos-cv-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.m6-infos-coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Lato', sans-serif;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--m6-gris);
  opacity: 0.6;
}
.m6-infos-coming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--m6-rouge);
  flex-shrink: 0;
  animation: m6-dot-pulse 2.5s ease-in-out infinite;
}
@keyframes m6-dot-pulse {
  0%, 100% { opacity: 0.38; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.5); }
}


/* ================================================================
   FOOTER
   ================================================================ */
body.m6-page .footer {
  background: var(--m6-encre);
  border-top: 1px solid rgba(247,244,239,0.05);
}
body.m6-page .footer-brand .footer-logo { color: #ffffff; }
body.m6-page .footer-brand p            { color: rgba(247,244,239,0.4); }
body.m6-page .footer-col h4             { color: rgba(247,244,239,0.5); }
body.m6-page .footer-col li,
body.m6-page .footer-col p              { color: rgba(247,244,239,0.38); opacity: 1; }
body.m6-page .footer-col li i           { color: rgba(192,57,43,0.7); }
body.m6-page .footer-col a:hover        { color: #ffffff; }
body.m6-page .footer-bottom {
  border-top-color: rgba(247,244,239,0.05);
  color: rgba(247,244,239,0.28);
}


/* ================================================================
   KEYFRAMES — tous les effets organiques V6
   ================================================================ */

/* Tracé gauche→droite */
@keyframes m6-text-draw {
  from { clip-path: inset(0 101% 0 0); }
  to   { clip-path: inset(0 -1% 0 0); }
}

/* Rise from below — lettres */
@keyframes m6-char-up {
  from { clip-path: inset(110% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

/* Matérialisation numéros */
@keyframes m6-numero-in {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateX(-50%) scale(0.94) translateY(16px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) scale(1) translateY(0);
  }
}

/* Photos hero — breathing organique */
@keyframes m6-breathe-a {
  0%   { transform: scale(1.04) translate(0, 0); opacity: 0.07; }
  33%  { transform: scale(1.06) translate(-3px, -2px); opacity: 0.09; }
  66%  { transform: scale(1.05) translate(2px, 1px); opacity: 0.075; }
  100% { transform: scale(1.065) translate(-1px, 2px); opacity: 0.085; }
}
@keyframes m6-breathe-b {
  0%   { transform: scale(1.07) translateX(4%); opacity: 0.038; }
  50%  { transform: scale(1.04) translateX(2.5%); opacity: 0.045; }
  100% { transform: scale(1.06) translateX(3.5%); opacity: 0.038; }
}
@keyframes m6-breathe-c {
  0%   { transform: scale(1.10) translateX(-3%); opacity: 0.025; }
  50%  { transform: scale(1.06) translateX(-1.5%); opacity: 0.030; }
  100% { transform: scale(1.08) translateX(-2.5%); opacity: 0.025; }
}

/* Flottement équipe */
@keyframes m6-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  35%       { transform: translateY(-9px) rotate(0.4deg); }
  65%       { transform: translateY(-5px) rotate(-0.3deg); }
}

/* Grain drift */
@keyframes m6-grain-drift {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(-1.5px, 0.8px); }
  50%       { transform: translate(0.8px, -1.5px); }
  75%       { transform: translate(1.2px, 0.6px); }
}

/* Voile breathing */
@keyframes m6-voile-breathe {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.91; }
}

/* Étoile ornement rotation */
@keyframes m6-etoile-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Entrée générale */
@keyframes m6-glisse-bas {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1100px) {
  .m6-ouv-contenu    { padding: 0 2rem; }
  .m6-histoire-inner { gap: 4.5rem; }
}

@media (max-width: 900px) {
  .m6-infos-layout  { grid-template-columns: 1fr; gap: 3rem; }
  .m6-infos-bg-word { font-size: 22vw; }
}

@media (max-width: 768px) {
  .m6-dots-nav { display: none; }

  .m6-filigrane  { font-size: 40vw; }
  .m6-ouv-bas    { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .m6-version-links { left: 1.5rem; bottom: 1.5rem; }

  /* Bridges — height:0 cohérent */
  .m6-bridge { height: 0; }

  /* Territoires : empilés */
  .m6-univers {
    flex-direction: column !important;
    height: auto;
  }
  .m6-territoire {
    flex: none !important;
    height: 64vw;
    min-height: 240px;
    max-height: 360px;
    transition: height 0.85s var(--m6-ease);
  }
  .m6-territoire + .m6-territoire {
    border-left: none;
    border-top: 1px solid rgba(14,12,10,0.07);
  }

  /* Toujours visible sur mobile */
  .m6-t-citation,
  .m6-t-accroche,
  .m6-t-desc,
  .m6-t-cta         { opacity: 1; transform: none; }
  .m6-t-filet-brand { width: 36px; }
  /* Brand-bg visible sur mobile */
  .m6-t-brand-bg    { clip-path: inset(0 -1% 0 0); }

  .m6-t-numero      { font-size: clamp(7rem, 20vh, 26vh); }

  .m6-histoire       { padding: 6rem 1.5rem; }
  .m6-histoire-inner { grid-template-columns: 1fr; gap: 3rem; }
  .m6-histoire-visuel { order: -1; }
  .m6-histoire-cadre  { display: none; }

  .m6-univers-section {
    height: auto;
    min-height: 360px;
    padding: 5rem 0;
    border-radius: 6px;
    margin: 0 0.8rem;
  }
  .m6-uv-contenu { padding: 0 2rem; }

  .m6-section-bg-text { font-size: 28vw; }

  .m6-equipe { padding: 5rem 1.5rem; }
  .m6-equipe-grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 100%;
  }
  .m6-equipe-photo { width: 180px; height: 230px; }

  .m6-infos              { padding: 4rem 1.5rem; }
  .m6-infos-layout       { gap: 2rem; }
  .m6-infos-bg-word      { font-size: 30vw; bottom: -0.1em; }
  .m6-infos-titre-gauche { font-size: 2.1rem; }
  .m6-infos-carte-v      { padding: 1.3rem 1.4rem; }
  /* Pas d'élévation au hover sur mobile */
  .m6-infos-carte-v:hover { transform: none; }
}

@media (max-width: 480px) {
  .m6-mot-loryna   { letter-spacing: -0.01em; font-size: clamp(2rem, 14vw, 5rem); white-space: nowrap; }
  .m6-ouv-univers  { font-size: 0.62rem; gap: 0.7rem; }
  .m6-t-brand      { font-size: 2rem; }
  .m6-t-categorie  { font-size: 1.4rem; }
  .m6-uv-citation  { font-size: 1.3rem; }
  .m6-histoire-titre { font-size: 2rem; }
  .m6-equipe-grille { grid-template-columns: 1fr; max-width: 280px; }
  .m6-equipe-photo  { width: 200px; height: 255px; }
}

/* ================================================================
   THREE.JS — Canvas particules organiques
   ================================================================ */

/* Hero — poussière de lumière parchemin */
.m6-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;        /* entre les photos (auto) et le contenu (z-index:2) */
  pointer-events: none;
  display: block;
}

/* Notre Univers — lueurs or chaud */
.m6-univers-canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 1;        /* au-dessus du voile, sous le contenu (z-index:2) */
  pointer-events: none;
  display: block;
}


/* ================================================================
   Accessibilité */
@media (prefers-reduced-motion: reduce) {
  .m6-marquee-piste,
  .m6-ouv-photo--1,
  .m6-ouv-photo--2,
  .m6-ouv-photo--3,
  .m6-equipe-photo,
  .m6-t-grain,
  .m6-uv-fond,
  .m6-uv-voile,
  .m6-uv-ornement-etoile { animation: none; }

  .m6-filigrane          { animation: none; clip-path: none; }
  .m6-section-bg-text    { clip-path: none; }
  .m6-infos-bg-word      { clip-path: none; }
  .m6-t-brand-bg         { clip-path: inset(0 -1% 0 0); transition: none; }
  .m6-t-numero           { opacity: 1; filter: none; transform: translateX(-50%); }
  .m6-char               { animation: none; clip-path: none; }

  .m6-filet-trace,
  .m6-infos-filet-gauche { transition: none; }
  .m6-fleche-ligne,
  .m6-fleche-scroll i    { animation: none; }
  .m6-infos-coming-dot   { animation: none; }
}