/* ====================================================================
   IS PHOTO V2 — Overrides (Phase 1 — Architecture)
   Direction artistique : top bar minimal + hero global + menu sous hero
   Réutilisable pour toutes les pages V2 (Phases 2+)
   --------------------------------------------------------------------
   IMPORTANT : ce fichier est chargé UNIQUEMENT par les pages -v3.html.
   V1 (index.html, parcours.html, etc.) n'est jamais touchée.
   ==================================================================== */


/* ====================================================================
   1. SCOPE V2 — body.v2-mode garantit zéro fuite vers V1
   ==================================================================== */

body.v2-mode {
  /* Reset éventuel en cas d'override global futur */
}


/* ====================================================================
   2. TOP UTILITY BAR V2 — minimaliste
   Conserve : logo + brand + Accès privé + DIMA
   Cache : onglets de navigation (descendent sous le hero)
           réseaux sociaux + langue (descendent en footer en Phase 5)
   ==================================================================== */

/* Onglets retirés du top — déplacés dans .menu-secondary sous le hero */
body.v2-mode .nav--v2 .nav-links {
  display: none !important;
}

/* Réseaux sociaux + sélecteur de langue retirés du top en V2
   (placeholder Phase 5 — descente vers le footer harmonisé) */
body.v2-mode .nav--v2 .nav-edge {
  display: none !important;
}

/* ====================================================================
   MICRO-HEADER LUXE V2 — alignement extrême gauche/droite
   Largeur visuelle identique au menu principal (--container-max + space-md)
   Brand collé bord gauche · cluster collé bord droit · grand vide central
   Référence : Dior · Hermès · galerie internationale · ISphoto historique
   ==================================================================== */

/* Top bar — largeur visuelle = menu principal (alignement parfait) */
body.v2-mode .nav--v2 .nav-inner {
  max-width: var(--container-max, 1440px);
  margin: 0 auto;
  padding-left: var(--space-md, 2rem);
  padding-right: var(--space-md, 2rem);
  gap: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Brand → bord gauche absolu · cluster → bord droit absolu */
body.v2-mode .nav--v2 .nav-brand {
  margin: 0;
  margin-right: auto;
  flex-shrink: 0;
  align-items: center;
  display: inline-flex;
}

body.v2-mode .nav--v2 .nav-utility {
  gap: 0.7rem;
  margin: 0;
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  display: inline-flex;
}


/* ----- BRANDING GAUCHE — micro-header ultra fin ----- */

/* Logo IS — micro-agrandissement final (signature visuelle plus présente) */
body.v2-mode .nav--v2 .nav-logo-mark {
  width: 44px;
  height: 44px;
}

body.v2-mode .nav--v2 .nav-logo-mark .logo-base {
  width: 44px;
  height: 44px;
}

/* "Isabelle Schmitt" du MICRO-HEADER (à gauche, sous le logo IS)
   ≠ hero principal (.hero-title-name) qui reste intact
   Calibré au pixel près sur le rouge brique profond du logo IS
   Plus raffiné, plus aéré, signature haute couture */
body.v2-mode .nav--v2 .nav-brand-name {
  font-size: 1.12rem;
  font-weight: 300;
  letter-spacing: 0.16em;
  line-height: 1.1;
  color: #A8181A;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* "Capture the Moment" (anglais) — légère réduction pour hiérarchie plus élégante
   Couleur blanche pleine, placement et police inchangés */
body.v2-mode .nav--v2 .nav-brand-tagline {
  font-size: 0.54rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--blanc, #FFFFFF);
  opacity: 1;
  margin-top: 2px;
}

/* Espacement logo/texte resserré */
body.v2-mode .nav--v2 .nav-brand-text {
  margin-left: 0.65rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ----- CLUSTER DROITE — boutons couture extrêmes + icônes ultra-fines ----- */

/* Bouton "Accès privé" — finesse maximale */
body.v2-mode .nav-private-btn--v2 {
  gap: 0.38rem;
  padding: 0.28rem 0.6rem;
  min-height: 22px;
  white-space: nowrap;
  border-width: 0.5px;
  border-radius: 1px;
}

body.v2-mode .nav-private-btn--v2 svg {
  width: 8px;
  height: 8px;
}

body.v2-mode .nav-private-btn--v2 span {
  font-family: var(--font-sans);
  font-size: 0.48rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

/* Bouton DIMA — finesse harmonisée */
body.v2-mode .nav--v2 .nav-dima-btn {
  padding: 0.28rem 0.6rem;
  min-height: 22px;
  font-size: 0.48rem;
  letter-spacing: 0.28em;
  border-width: 0.5px;
  border-radius: 1px;
  gap: 0.38rem;
}

body.v2-mode .nav--v2 .nav-dima-btn .dima-text {
  font-size: inherit;
  letter-spacing: inherit;
  font-weight: 300;
}

body.v2-mode .nav--v2 .nav-dima-btn .dima-arrow {
  font-size: 0.56rem;
  margin-left: 0.18rem;
}


/* ----- RÉSEAUX SOCIAUX V2 — 4 micro-icônes très fines, très petites ----- */
body.v2-mode .nav-socials-v2 {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
  padding-left: 0.7rem;
  border-left: 0.5px solid rgba(255, 255, 255, 0.1);
  height: 16px;
}

body.v2-mode .nav-social-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.4s var(--ease-out, ease),
              transform 0.4s var(--ease-out, ease);
}

body.v2-mode .nav-social-v2:hover {
  color: var(--blanc, #FFFFFF);
  transform: translateY(-1px);
}

body.v2-mode .nav-social-v2 svg {
  display: block;
  width: 10px;
  height: 10px;
}


/* ----- RESPONSIVE — micro-header s'efface sur mobile ----- */
@media (max-width: 900px) {
  body.v2-mode .nav-socials-v2 {
    display: none;
  }
}

@media (max-width: 700px) {
  body.v2-mode .nav--v2 .nav-brand-tagline {
    display: none;
  }
  body.v2-mode .nav--v2 .nav-inner {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


/* ====================================================================
   3. HERO V2 — réduction du nom Isabelle Schmitt + harmonisation rouge
   IMPORTANT : non final. Sera ajusté après réception des captures
   du site historique ISphoto.fr fournies par Isabelle.
   --------------------------------------------------------------------
   Le rouge est explicitement aligné sur var(--rouge) #CC1414, identique
   au branding logo header — cohérence absolue de la signature rouge.
   ==================================================================== */

body.v2-mode .hero-title-name {
  font-size: clamp(2rem, 5vw, 4.2rem);
  letter-spacing: 0.05em;
  font-weight: 400;
  color: var(--rouge);
}


/* ====================================================================
   4. MENU SECONDAIRE — sous le hero, sticky en haut au scroll
   Pattern luxe : Hermès, Cartier, LVMH
   Ligne fine couture, séparateurs · rouge ISPHOTO discrets
   ==================================================================== */

.menu-secondary {
  position: sticky;
  top: var(--nav-height, 52px);
  z-index: 90;
  background: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-top: 0.5px solid rgba(255, 255, 255, 0.04);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  transition: background 0.5s var(--ease-out, ease);
  width: 100%;
  /* Respiration verticale entre la dernière ligne de l'opening
     ("Direction artistique · Commissariat · Scénographie") et le menu
     Affinée pour respiration éditoriale luxe maximale */
  margin-top: clamp(2.8rem, 6.5vh, 6rem);
}

.menu-secondary-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--space-md, 2rem);
  max-width: var(--container-max, 1440px);
  height: 44px;
  flex-wrap: nowrap;
}

.menu-secondary-list li {
  display: flex;
  align-items: center;
}

/* Séparateur · entre items, rouge ISPHOTO discret */
.menu-secondary-list li + li::before {
  content: '·';
  color: rgba(204, 20, 20, 0.55);
  margin: 0 1.4rem;
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 0.95rem;
  font-weight: 300;
  user-select: none;
}

.menu-secondary-list a {
  font-family: var(--font-sans, 'Manrope', sans-serif);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  padding: 0.55rem 0.1rem;
  text-decoration: none;
  transition: color 0.4s var(--ease-out, ease),
              letter-spacing 0.5s var(--ease-out, ease);
  position: relative;
  display: inline-block;
}

.menu-secondary-list a:hover {
  color: var(--blanc, #FFFFFF);
}

/* Onglet actif — rouge ISPHOTO + soulignement fin */
.menu-secondary-list a.is-active {
  color: var(--rouge, #CC1414);
}

.menu-secondary-list a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 1px;
  background: var(--rouge, #CC1414);
  opacity: 0.85;
}

/* Responsive — tablette : compression douce */
@media (max-width: 1000px) {
  .menu-secondary-list { padding: 0 1rem; }
  .menu-secondary-list li + li::before { margin: 0 0.9rem; }
  .menu-secondary-list a {
    font-size: 0.66rem;
    letter-spacing: 0.22em;
  }
}

/* Responsive — mobile : passage en wrap fluide, 2 lignes possibles */
@media (max-width: 700px) {
  .menu-secondary {
    top: var(--nav-height, 52px);
  }
  .menu-secondary-list {
    height: auto;
    padding: 0.5rem 0.6rem;
    flex-wrap: wrap;
    gap: 0.2rem 0;
    justify-content: center;
  }
  .menu-secondary-list li + li::before {
    margin: 0 0.55rem;
  }
  .menu-secondary-list a {
    font-size: 0.6rem;
    letter-spacing: 0.16em;
    padding: 0.35rem 0;
  }
}


/* ====================================================================
   5. PLACEHOLDERS POUR LES PHASES SUIVANTES
   Aucun style appliqué pour l'instant — sections-clés réservées.
   ==================================================================== */

/* --- PHASE 2 — Hero global sur les pages internes ---
   Réutilisera la structure .hero existante de V1 mais avec
   pool d'images thématique par page (parcours, photographie, etc.).
   Sera implémenté via classes : .hero--page-parcours, .hero--page-photo, etc.
   --------------------------------------------------------------------
   .hero--page-parcours { ... }
   .hero--page-photographie { ... }
   .hero--page-art-digital { ... }
   .hero--page-institutions { ... }
   .hero--page-expositions { ... }
   .hero--page-contact { ... }
   .hero--page-fonds { ... }
   .hero--page-ai-visual { ... }
*/

/* --- PHASE 3 — Typographies finales (en attente captures) ---
   À écrire après réception des captures ISphoto.fr historique.
   Sera implémenté via overrides des familles existantes Italiana,
   Cormorant, Great Vibes, ou ajout d'une nouvelle police signature.
*/

/* --- PHASE 4 — Distinctions overlay sur images du curtain hero ---
   Distinctions UNESCO · Toile d'Or · Salon d'Automne · Tokyo · Luxembourg
   posées en cascade gauche→droite, fade-in animé puis stables.
   Sera implémenté via .hero-distinction-overlay.
*/

/* --- PHASE 5 — Footer harmonisé ---
   Réseaux sociaux fins (TikTok ×3 + LinkedIn + Facebook + DIMA)
   Liens légaux harmonisés.
   Sera implémenté via .footer--v2.
*/

/* --- PHASE 6 — Bouton Accès privé affiné + logique fonds d'œuvres ---
   Préparation du formulaire d'accès et de la logique code privé.
   Sera implémenté via .access-private-form-v2.
*/


/* ====================================================================
   DIAPORAMA VERTICALES V2 — Installation éditoriale premium
   Apple cinematic × Fondation Cartier × Dior heritage × musée
   --------------------------------------------------------------------
   Option A stricte : aspect-ratio portrait préservé · zéro crop brutal
   Le cadre s'adapte à l'image (image foreground centrée, contain)
   Fond ambient : la même image floutée à 40px, sombre 0.4
   Transitions opacité 1.8s · durée par image 5.8s · respiration zoom 1.025
   Mouvement presque imperceptible · silence cinématographique
   ==================================================================== */

.page-hero--diaporama {
  position: relative;
  width: 100%;
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0A0A0A;
  padding: clamp(102px, 14vh, 140px) 0 clamp(40px, 6vh, 72px);
}

.page-hero-diaporama {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.diaporama-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.diaporama-slide.is-active {
  opacity: 1;
}

/* Layer 1 : fond ambient flouté (la même image étirée + blur + sombre) */
.diaporama-slide-blur {
  position: absolute;
  inset: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(48px) brightness(0.38) saturate(110%);
  transform: scale(1.05);
  z-index: 0;
}

/* Layer 2 : image foreground centrée, aspect-ratio préservé, anti-crop */
.diaporama-slide-img {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 76vh;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 8px 24px rgba(0,0,0,0.45);
}

/* Respiration zoom ultra subtile pendant l'affichage actif */
.diaporama-slide.is-active .diaporama-slide-img {
  animation: diaporama-breathe 6s ease-in-out forwards;
}

@keyframes diaporama-breathe {
  from { transform: scale(1.000); }
  to   { transform: scale(1.025); }
}

/* Voile gradient pour lisibilité texte par-dessus le diaporama */
.page-hero--diaporama .page-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.75) 100%),
    radial-gradient(ellipse 60% 40% at 50% 60%, rgba(204,20,20,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Contenu typographique au-dessus du diaporama */
.page-hero--diaporama .page-hero-content {
  position: relative;
  z-index: 2;
  max-width: 820px;
  padding: 0 var(--space-md, 2rem);
}

/* Reduced-motion : on suspend toute animation */
@media (prefers-reduced-motion: reduce) {
  .diaporama-slide,
  .diaporama-slide.is-active .diaporama-slide-img {
    transition: none !important;
    animation: none !important;
  }
}

/* Mobile : le diaporama reste plein écran, l'image vert. occupe la majorité */
@media (max-width: 700px) {
  .page-hero--diaporama {
    min-height: 78vh;
    padding-top: 92px;
  }
  .diaporama-slide-img {
    max-width: 92vw;
    max-height: 64vh;
  }
}


/* ====================================================================
   DIAPORAMA HORIZONTAL V2 — variant pleine largeur · frise musée
   Pour pages Photographie, Contact (et autres horizontales)
   ==================================================================== */

.page-hero--diaporama-h .diaporama-slide-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  box-shadow: none;
}

/* Pas de blur background quand l'image remplit déjà le cadre */
.page-hero--diaporama-h .diaporama-slide-blur {
  display: none;
}

/* Voile diaporama horizontal : plus marqué pour lisibilité texte par-dessus */
.page-hero--diaporama-h .page-hero-veil {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.18) 35%, rgba(0,0,0,0.78) 100%),
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(204,20,20,0.08) 0%, transparent 65%);
}

@media (max-width: 700px) {
  .page-hero--diaporama-h .diaporama-slide-img {
    max-width: none;
    max-height: none;
  }
}


/* ====================================================================
   DIAPORAMA BIO V2 — Cadre vertical élégant dans le bloc biographie
   Tirages signés · transitions 1.8s · esprit musée / archive
   ==================================================================== */

.bio-hero-image--diaporama {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #0A0A0A;
}

.bio-hero-image--diaporama .bio-diaporama {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.bio-hero-image--diaporama .diaporama-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.bio-hero-image--diaporama .diaporama-slide.is-active {
  opacity: 1;
}

.bio-hero-image--diaporama .diaporama-slide-blur {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(36px) brightness(0.4) saturate(110%);
  transform: scale(1.05);
  z-index: 0;
}

.bio-hero-image--diaporama .diaporama-slide-img {
  position: relative;
  z-index: 1;
  max-width: 92%;
  max-height: 96%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  display: block;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 5px 16px rgba(0,0,0,0.4);
}

.bio-hero-image--diaporama .diaporama-slide.is-active .diaporama-slide-img {
  animation: diaporama-breathe 6s ease-in-out forwards;
}

.bio-hero-image--diaporama .bio-hero-credit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 1.2rem 1.6rem 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.75) 100%);
  color: rgba(255,255,255,0.82);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-align: center;
}


/* ====================================================================
   H1 TRIPTYQUE EXPOSITIONS V2 — Plus de 25 ans, / 5 continents, / des...
   Hiérarchie typographique en 3 lignes aérées, esprit éditorial
   ==================================================================== */

body.v2-mode .stub-h1--triptyque {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  line-height: 1.05;
}

body.v2-mode .stub-h1--triptyque .stub-h1-line {
  display: block;
}

body.v2-mode .stub-h1--triptyque em {
  color: #A8181A;
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
}


/* ====================================================================
   FRISE EXPOSITIONS V2 — Pellicule défilante d'images d'expo
   Esprit générique cinéma · pause au hover · images 320×240
   ==================================================================== */

.expo-frise {
  position: relative;
  width: 100%;
  padding: 4rem 0 5rem;
  background: linear-gradient(180deg, #050505 0%, #0A0A0A 100%);
  overflow: hidden;
  border-top: 0.5px solid rgba(255,255,255,0.05);
  border-bottom: 0.5px solid rgba(255,255,255,0.05);
}

.expo-frise-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.expo-frise-track {
  display: flex;
  width: max-content;
  animation: expo-frise-scroll 80s linear infinite;
}

.expo-frise-track:hover {
  animation-play-state: paused;
}

.expo-frise-set {
  display: flex;
  gap: 1.4rem;
  padding-right: 1.4rem;
}

.expo-frise-frame {
  position: relative;
  flex: 0 0 auto;
  width: 340px;
  height: 380px;
  margin: 0;
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,0.1);
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, #161616 0%, #050505 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.expo-frise-frame img {
  position: relative;
  z-index: 1;
  max-width: 92%;
  max-height: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: brightness(0.95);
  transition: filter 0.6s var(--ease-out, ease),
              transform 0.8s var(--ease-out, ease);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55), 0 4px 14px rgba(0,0,0,0.45);
}

.expo-frise-frame:hover img {
  filter: brightness(1);
  transform: scale(1.04);
}

.expo-frise-frame figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.9rem 1rem 0.7rem;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.expo-frise-frame figcaption .dot {
  color: rgba(204,20,20,0.6);
}

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

@media (max-width: 700px) {
  .expo-frise-frame { width: 240px; height: 180px; }
  .expo-frise-set { gap: 1rem; padding-right: 1rem; }
}

/* "En cours de référencement" — pastille discrète plutôt que lien éteint */
body.v2-mode .stub-corpus-link--muted {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.35rem 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  border: 0.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.02);
  cursor: default;
}


/* ====================================================================
   DIAPORAMA DANS STUB-HERO V2 — variant pour pages internes contact/etc
   Les slides remplissent le .stub-hero-bg en cover
   ==================================================================== */

.stub-hero .page-hero-diaporama {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.stub-hero .diaporama-slide-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  box-shadow: none;
  display: block;
}

.stub-hero .diaporama-slide-blur {
  display: none;
}


/* ====================================================================
   FRISE CONTACT V2 — Signature visuelle horizontale sobre
   (Conservée pour réutilisation éventuelle · actuellement non instanciée)
   Pellicule continue 8 photos · 90s · pause au hover · sans cadre
   ==================================================================== */

.contact-frise {
  position: relative;
  width: 100%;
  padding: 3rem 0 3.5rem;
  background: #050505;
  overflow: hidden;
  border-top: 0.5px solid rgba(255,255,255,0.04);
  border-bottom: 0.5px solid rgba(255,255,255,0.04);
}

.contact-frise-marquee {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.contact-frise-track {
  display: flex;
  width: max-content;
  animation: contact-frise-scroll 90s linear infinite;
}

.contact-frise-track:hover {
  animation-play-state: paused;
}

.contact-frise-set {
  display: flex;
  gap: 1.2rem;
  padding-right: 1.2rem;
}

.contact-frise-frame {
  position: relative;
  flex: 0 0 auto;
  width: 280px;
  height: 200px;
  margin: 0;
  overflow: hidden;
  background: #0F0F0F;
}

.contact-frise-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.8) saturate(105%);
  transition: filter 0.7s var(--ease-out, ease),
              transform 1s var(--ease-out, ease);
}

.contact-frise-frame:hover img {
  filter: brightness(1) saturate(115%);
  transform: scale(1.03);
}

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

@media (max-width: 700px) {
  .contact-frise-frame { width: 220px; height: 160px; }
  .contact-frise-set { gap: 0.9rem; padding-right: 0.9rem; }
}


/* ====================================================================
   CTA AI VISUAL SYSTEMS — Bridge stratégique Art Digital → B2B
   Bloc discret premium · esprit galerie contemporaine
   ==================================================================== */

.avs-bridge {
  position: relative;
  padding: clamp(4rem, 8vh, 7rem) 0 clamp(5rem, 9vh, 8rem);
  background:
    radial-gradient(ellipse 90% 60% at 50% 40%, rgba(168,24,26,0.08) 0%, transparent 60%),
    linear-gradient(180deg, #060606 0%, #0A0A0A 100%);
  text-align: center;
  border-top: 0.5px solid rgba(255,255,255,0.05);
}

.avs-bridge-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #A8181A;
  margin-bottom: 1.4rem;
}

.avs-bridge-title {
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--blanc, #FFFFFF);
  margin: 0 auto 1.6rem;
  max-width: 22ch;
}

.avs-bridge-title em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  color: #A8181A;
}

.avs-bridge-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  margin: 0 auto 2.4rem;
}

.avs-bridge-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.8rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blanc, #FFFFFF);
  background: transparent;
  border: 0.5px solid rgba(255,255,255,0.7);
  border-radius: 1px;
  text-decoration: none;
  transition: background 0.5s var(--ease-out, ease),
              border-color 0.5s var(--ease-out, ease),
              transform 0.5s var(--ease-out, ease);
}

.avs-bridge-link:hover {
  background: rgba(168,24,26,0.12);
  border-color: #A8181A;
  transform: translateY(-1px);
}

.avs-bridge-link:focus-visible {
  outline: 1px solid #A8181A;
  outline-offset: 3px;
}

.avs-bridge-arrow {
  font-size: 0.8rem;
  letter-spacing: 0;
  transition: transform 0.4s var(--ease-out, ease);
}

.avs-bridge-link:hover .avs-bridge-arrow {
  transform: translateX(4px);
}


/* ====================================================================
   FORMULAIRE CONTACT V2 — Présenter votre projet
   Apple × Dior × galerie contemporaine · sobre · institutional
   Visuel uniquement (backend Google Apps Script reporté)
   ==================================================================== */

.contact-form-section {
  padding: clamp(5rem, 9vh, 8rem) 0 clamp(6rem, 10vh, 10rem);
  background: #050505;
  border-top: 0.5px solid rgba(255,255,255,0.05);
}

.contact-form-header {
  text-align: center;
  margin-bottom: clamp(3rem, 5vh, 4.5rem);
}

.contact-form-eyebrow {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: #A8181A;
  margin-bottom: 1.2rem;
}

.contact-form-title {
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.15;
  letter-spacing: 0.03em;
  color: var(--blanc, #FFFFFF);
  margin: 0 auto 1.2rem;
}

.contact-form-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  max-width: 54ch;
  margin: 0 auto;
}

.contact-form {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.contact-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.contact-form-field label {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.contact-form-field label .req {
  color: #A8181A;
}

.contact-form-field label .opt {
  color: rgba(255,255,255,0.4);
  font-size: 0.92em;
  text-transform: none;
  letter-spacing: 0.1em;
  font-style: italic;
}

.contact-form-field input[type="text"],
.contact-form-field input[type="email"],
.contact-form-field select,
.contact-form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid rgba(255,255,255,0.18);
  padding: 0.7rem 0.2rem 0.85rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 300;
  color: var(--blanc, #FFFFFF);
  outline: none;
  transition: border-color 0.4s var(--ease-out, ease);
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.contact-form-field select {
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
  cursor: pointer;
}

.contact-form-field select option {
  background: #0A0A0A;
  color: var(--blanc, #FFFFFF);
}

.contact-form-field textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  font-family: var(--font-serif);
  font-style: italic;
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
  border-bottom-color: #A8181A;
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
  color: rgba(255,255,255,0.3);
  font-style: italic;
}

/* Checkbox RGPD couture */
.contact-form-field--check {
  margin-top: 0.8rem;
}

.contact-form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  cursor: pointer;
}

.contact-form-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-form-check .check-box {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 0.5px solid rgba(255,255,255,0.4);
  background: transparent;
  position: relative;
  margin-top: 3px;
  transition: border-color 0.3s var(--ease-out, ease),
              background 0.3s var(--ease-out, ease);
}

.contact-form-check input[type="checkbox"]:checked + .check-box {
  background: #A8181A;
  border-color: #A8181A;
}

.contact-form-check input[type="checkbox"]:checked + .check-box::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid #FFFFFF;
  border-bottom: 1.5px solid #FFFFFF;
  transform: rotate(45deg);
}

.contact-form-check input[type="checkbox"]:focus-visible + .check-box {
  outline: 1px solid #A8181A;
  outline-offset: 3px;
}

.contact-form-check .check-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
}

.contact-form-check .check-text a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-decoration-color: rgba(168,24,26,0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.4s var(--ease-out, ease);
}

.contact-form-check .check-text a:hover {
  text-decoration-color: #A8181A;
}

/* Bouton Submit couture */
.contact-form-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.4rem;
}

.contact-form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 2.2rem;
  background: #A8181A;
  color: var(--blanc, #FFFFFF);
  border: 0.5px solid #A8181A;
  border-radius: 1px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s var(--ease-out, ease),
              transform 0.4s var(--ease-out, ease),
              box-shadow 0.4s var(--ease-out, ease);
  box-shadow: 0 10px 28px rgba(168,24,26,0.22);
}

.contact-form-submit:hover {
  background: #C01D20;
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(168,24,26,0.38);
}

.contact-form-submit:focus-visible {
  outline: 1px solid #FFFFFF;
  outline-offset: 3px;
}

.contact-form-submit .submit-arrow {
  font-size: 0.78rem;
  letter-spacing: 0;
  transition: transform 0.4s var(--ease-out, ease);
}

.contact-form-submit:hover .submit-arrow {
  transform: translateX(4px);
}

.contact-form-note {
  font-family: var(--font-sans);
  font-size: 0.52rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

@media (max-width: 700px) {
  .contact-form-row {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .contact-form-submit {
    width: 100%;
    justify-content: center;
  }
}


/* ====================================================================
   FORMULAIRE V2 — Connexion CRM Apps Script
   Honeypot, états loading / success / error, spinner couture
   ==================================================================== */

/* Honeypot — caché visuellement ET aux lecteurs d'écran (anti-bot) */
.contact-form-honeypot {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

/* Bouton submit · états loading */
.contact-form-submit {
  position: relative;
  min-width: 220px;
}

.contact-form-submit .submit-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  margin-left: -7px;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  opacity: 0;
  animation: cf-spin 0.7s linear infinite;
  pointer-events: none;
}

.contact-form-submit.is-loading .submit-label,
.contact-form-submit.is-loading .submit-arrow {
  opacity: 0;
}

.contact-form-submit.is-loading .submit-spinner {
  opacity: 1;
}

.contact-form-submit:disabled {
  cursor: not-allowed;
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

/* États de réponse — success / error */
.contact-form-state {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2.4rem;
  padding: 1.4rem 1.6rem;
  border: 0.5px solid;
  border-radius: 1px;
  animation: cf-state-in 0.5s var(--ease-out, ease) both;
}

.contact-form-state[hidden] {
  display: none;
}

.contact-form-state .state-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 400;
  border: 0.5px solid;
  border-radius: 50%;
}

.contact-form-state .state-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.contact-form-state strong {
  font-family: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  color: var(--blanc, #FFFFFF);
}

.contact-form-state span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.contact-form-state a {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
  text-decoration-color: rgba(168, 24, 26, 0.5);
  text-underline-offset: 3px;
}

.contact-form-state a:hover {
  text-decoration-color: #A8181A;
}

/* Variante succès — accent rouge ISPHOTO subtil + halo lumineux */
.contact-form-state--success {
  border-color: rgba(168, 24, 26, 0.45);
  background: linear-gradient(180deg, rgba(168, 24, 26, 0.08) 0%, rgba(168, 24, 26, 0.02) 100%);
  box-shadow: 0 12px 32px rgba(168, 24, 26, 0.10);
}

.contact-form-state--success .state-icon {
  border-color: rgba(168, 24, 26, 0.7);
  color: #FFFFFF;
  background: #A8181A;
}

/* Variante erreur — ambre/orange discret (pas alarmiste) */
.contact-form-state--error {
  border-color: rgba(212, 152, 78, 0.4);
  background: linear-gradient(180deg, rgba(212, 152, 78, 0.06) 0%, rgba(0, 0, 0, 0) 100%);
}

.contact-form-state--error .state-icon {
  border-color: rgba(212, 152, 78, 0.6);
  color: rgba(212, 152, 78, 0.95);
  background: transparent;
}

@keyframes cf-state-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fallback noscript */
.contact-form-noscript {
  margin-top: 2rem;
  padding: 1.2rem 1.6rem;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.contact-form-noscript a {
  color: var(--blanc, #FFFFFF);
  text-decoration: underline;
  text-decoration-color: #A8181A;
  text-underline-offset: 3px;
}


/* ====================================================================
   TYPOGRAPHIE INSTITUTIONS V2 — hiérarchie aérée éditoriale
   Citation curatoriale en italique Cormorant + liste institutions fine
   ==================================================================== */

body.v2-mode .stub-lead--intro {
  margin-bottom: 1.4rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

body.v2-mode .stub-citation {
  font-family: 'Italiana', 'Cormorant Garamond', 'Didot', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--blanc, #FFFFFF);
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 22ch;
}

body.v2-mode .stub-citation em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: #A8181A;
  font-weight: 300;
}

body.v2-mode .stub-institutions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.8rem;
  margin: 0 auto 2.4rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  max-width: 56ch;
  text-align: center;
}

body.v2-mode .stub-institutions .dot {
  color: rgba(204, 20, 20, 0.6);
}


/* ====================================================================
   BOUTONS V2 — contraste premium · esprit maison de luxe contemporaine
   Override sur btn-rouge et btn-outline-light dans contexte V2
   ==================================================================== */

body.v2-mode .btn-rouge--v2 {
  background: #A8181A;
  color: var(--blanc, #FFFFFF);
  border: 0.5px solid #A8181A;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border-radius: 1px;
  transition: background 0.4s var(--ease-out, ease),
              transform 0.4s var(--ease-out, ease),
              box-shadow 0.4s var(--ease-out, ease);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(168, 24, 26, 0.18);
}

body.v2-mode .btn-rouge--v2:hover {
  background: #C01D20;
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(168, 24, 26, 0.32);
}

body.v2-mode .btn-rouge--v2:focus-visible {
  outline: 1px solid #FFFFFF;
  outline-offset: 3px;
}

body.v2-mode .btn-outline-light--v2 {
  background: transparent;
  color: var(--blanc, #FFFFFF);
  border: 0.5px solid rgba(255, 255, 255, 0.7);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  border-radius: 1px;
  transition: background 0.4s var(--ease-out, ease),
              border-color 0.4s var(--ease-out, ease),
              color 0.4s var(--ease-out, ease),
              transform 0.4s var(--ease-out, ease);
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}

body.v2-mode .btn-outline-light--v2:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--blanc, #FFFFFF);
  transform: translateY(-1px);
}

body.v2-mode .btn-outline-light--v2:focus-visible {
  outline: 1px solid #A8181A;
  outline-offset: 3px;
}

/* Cluster CTA V2 — espacement + responsive */
body.v2-mode .stub-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 0.8rem;
}

@media (max-width: 700px) {
  body.v2-mode .stub-cta {
    flex-direction: column;
    width: 100%;
    max-width: 280px;
  }
  body.v2-mode .btn-rouge--v2,
  body.v2-mode .btn-outline-light--v2 {
    padding: 0.95rem 1.4rem;
  }
  body.v2-mode .stub-citation {
    font-size: clamp(1.4rem, 6vw, 2rem);
  }
  body.v2-mode .stub-institutions {
    font-size: 0.55rem;
    letter-spacing: 0.24em;
  }
}