/* =========================
   VITRINE — deuxtroistrucs
   Clean CSS (2025-10-22)
   ========================= */

:root {
  --grid-max: 1400px;
  --gutter: clamp(16px, 3.5vw, 28px);
  --overlay-bg: rgba(255,255,255,.85);
  --text: #111;
  --accent: #111; /* couleur de base — surchargée via JS pour la marque */
}

/* BASE */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 16px/1.45 "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}

/* ACCESSIBILITÉ FOCUS */
a { outline: none; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* HEADER */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px var(--gutter);
  border: none; /* pas de ligne grise */
}

.brand {
  font-family: "greycliff-cf", sans-serif;
  font-weight: 900;
  text-decoration: none;
  color: var(--accent);
  font-size: clamp(1.3rem, 2.6vw, 2.2rem);
}

/* NAVIGATION */
.nav a {
  text-decoration: none;
  color: inherit;
  margin-left: 1rem;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  transition: color .25s ease;
}

.insta-link {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  margin-left: 1rem;
  color: inherit;
  text-decoration: none;
  transition: color .25s ease;
}

.insta-icon {
  display: block;
  width: 1em;
  height: 1em;
  transform: translateY(2px);
}

/* Hover cohérent (logo/couleur d’accent) */
.nav a:hover,
.insta-link:hover {
  color: var(--accent);
}

/* HERO */
.hero-intro {
  position: relative;
  height: clamp(280px, 42vh, 560px);
  margin: 0 0 clamp(24px, 5vw, 48px) 0;
  display: flex;
  align-items: center;
}

.hero-intro .intro-abs {
  width: 100%;
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hero-intro p {
  font-family: "greycliff-cf", sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.12;
  color: #111;
  margin: 0;
  text-wrap: balance;
}

/* VITRINE / GRILLE */
.vitrine {
  max-width: var(--grid-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 10vh;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  grid-auto-flow: row dense;
  align-items: start;
}
@media (max-width:1100px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:900px) { .grid { grid-template-columns: 1fr; } }

/* ESPACES BLANCS */
.blank {
  aspect-ratio: 4 / 3;
  background: #fff;
}

/* CARTES */
.card { display: block; }

.media-link {
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
}

.media {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
@media (max-width:900px) {
  .media { aspect-ratio: 3 / 4; }
}

/* Médias (images/vidéos) */
.media > img,
.media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* OVERLAY */
.overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  opacity: 0;
  transition: opacity .22s ease;
  display: flex;
  align-items: flex-end;
  padding: clamp(12px, 2.5vw, 28px);
}
@media (hover: hover) {
  .media-link:hover .overlay,
  .media-link:focus .overlay { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .overlay { transition: none; }
}

.ovl-caption {
  color: #000;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
.ovl-caption .t {
  display: block;
  font-family: "greycliff-cf", sans-serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  margin: 0 0 .15em 0;
}
.ovl-caption .d {
  display: block;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  color: var(--accent);
  opacity: .9;
  margin: 0;
}

/* LÉGENDE MOBILE */
.m-caption {
  display: none;
  font-size: .9rem;
  text-align: right;
  margin-top: .5rem;
}
.m-caption strong { font-weight: 600; }

@media (max-width:900px) {
  .overlay { display: none; }
  .m-caption { display: block; }
}

/* ÉLÉMENTS MAJEURS (span 2) */
.card.major { grid-column: span 2; }
@media (max-width:1100px) {
  .card.major { grid-column: span 1; }
}


/* Désactive tout soulignement ou text-decoration sur les liens de navigation */
.nav a,
.nav a:visited,
.nav a:active,
.nav a[aria-current="page"] {
  text-decoration: none !important;
  border: none !important;
  outline: none !important;
}


/* ===== Bouton visible seulement en mobile ===== */
.menu-toggle{
  display: none;
  background: transparent;
  border: 0;
  font: 900 1.4rem/1 "greycliff-cf", sans-serif;
  cursor: pointer;
  color: var(--text);
  padding: 6px 8px;
  margin-left: auto; /* pousse à droite */
}

/* Cache le panneau par défaut, même si quelqu'un enlève "hidden" */
.mobile-menu{ display: none; }

/* Respect strict de [hidden] */
.mobile-menu[hidden]{ display: none !important; }

@media (max-width:900px){
  .menu-toggle{ display: inline-flex; align-items:center; justify-content:center; }
  .nav{ display: none; }               /* cache la nav desktop en mobile */
}

/* Panneau plein écran ; la colonne est à droite */

@media (max-width:900px){
  .mobile-menu.is-open{
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9998;
    /* le panneau lui-même ne gère plus l’alignement, c’est la colonne .mm-col qui le fait */
    display: block;
  }

  /* Colonne de liens ferrée à droite, à ~mi-hauteur */
  .mobile-menu .mm-col{
    position: absolute;
    right: var(--gutter);
    top: 50vh;                        /* mi-hauteur (ajuste 45–55vh si besoin) */
    transform: translateY(-0%);       /* tu peux mettre -20% si tu veux la remonter un poil */
    display: flex;
    flex-direction: column;
    align-items: flex-end;            /* texte ferré à droite */
    gap: .25em;
  }

  .mobile-menu .mm-col a{
    text-decoration: none;
    color: #111;
    font-family: "greycliff-cf", sans-serif;
    font-weight: 900;
    font-size: clamp(1.2rem, 5.4vw, 2rem);
    line-height: 1.2;
    text-align: right;
  }
}


  /* empêche le scroll fond quand menu ouvert */
  body.no-scroll{ overflow: hidden; }


/* ===== brand visible pendant le menu mobile ===== */
@media (max-width:900px){
  body.no-scroll .brand{
    position: fixed;
    top: var(--gutter, 1.5rem);
    left: var(--gutter, 1.5rem);
    z-index: 10000;                 /* au-dessus du panneau */
    color: #111;                    /* couleur lisible sur fond blanc */
    pointer-events: auto;           /* pas cliquable pendant l’ouverture */
  }
}