/* =========================================================
   TRC PROD — Portfolio Ethan Trincanato
   Design system basé sur la charte graphique
   ========================================================= */

/* ---------- Variables ---------- */
:root {
  --c-bg:        #14151a;   /* anthracite / fond principal */
  --c-bg-2:      #1c1e26;   /* surface secondaire */
  --c-bg-3:      #23252f;   /* cartes / hover */
  --c-gold:      #c9b47c;   /* or champagne (accent) */
  --c-gold-soft: #d9c89a;
  --c-lavender:  #8c8fa3;   /* gris-lavande */
  --c-text:      #ece9e2;   /* texte clair */
  --c-text-dim:  #9a9a9f;   /* texte secondaire */
  --c-line:      rgba(201, 180, 124, 0.18);

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Helvetica Neue", Helvetica, Arial, sans-serif;

  --maxw: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }

body {
  background-color: var(--c-bg);
  /* Brume douce (façon fumée) + fines lignes diagonales, fixées au scroll */
  background-image:
    radial-gradient(60% 50% at 15% -5%, rgba(201, 180, 124, 0.06), transparent 60%),
    radial-gradient(55% 45% at 88% 12%, rgba(140, 143, 163, 0.05), transparent 60%),
    radial-gradient(65% 55% at 50% 108%, rgba(201, 180, 124, 0.045), transparent 60%),
    repeating-linear-gradient(120deg, transparent 0 33px, rgba(201, 180, 124, 0.018) 33px 34px);
  background-attachment: fixed;
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain fin (texture fumée) — couche fixe, derrière le contenu */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ---------- Curseur personnalisé (flèche dessinée, sans JS = sans bug) ---------- */
body {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5,2.5L5,18.5L9.3,14.5L12.4,21L14.8,19.9L11.8,13.6L17.5,13.6Z'%20fill='%2316171c'%20stroke='%23c9b47c'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
}
a, button, .card, .filter, label, select, summary, .to-top {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5,2.5L5,18.5L9.3,14.5L12.4,21L14.8,19.9L11.8,13.6L17.5,13.6Z'%20fill='%23c9b47c'%20stroke='%2316171c'%20stroke-width='1.2'%20stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer;
}
input, textarea { cursor: text; }
ul { list-style: none; }

/* ---------- Typo ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.6rem, 7vw, 6rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--c-gold);
  margin-bottom: 1.2rem;
  display: inline-block;
}

.lead { font-size: 1.1rem; color: var(--c-text-dim); max-width: 60ch; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.2rem, 5vw, 4rem); }
.section { padding: clamp(4.5rem, 11vw, 9rem) 0; }
.section--tight { padding: clamp(3rem, 7vw, 5rem) 0; }

/* Fond texturé « fumée » — alterne avec les sections unies / à fines lignes */
.section--smoke {
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 19, 24, 0.91) 0%, rgba(18, 19, 24, 0.84) 50%, rgba(18, 19, 24, 0.95) 100%),
    url("../assets/img/fond-fumee.jpg") center / cover no-repeat;
}

/* ---------- Header / Nav ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem clamp(1.2rem, 5vw, 4rem);
  transition: background 0.4s var(--ease), padding 0.4s var(--ease);
}
.header.scrolled {
  background: rgba(20, 21, 26, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding-top: 1rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-line);
}
.header__logo img { height: 38px; width: auto; }

.nav { display: flex; align-items: center; gap: 2.4rem; }
.nav a {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-text); position: relative; padding: 0.3rem 0;
  transition: color 0.3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--c-gold); transition: width 0.3s var(--ease);
}
.nav a:hover, .nav a.active { color: var(--c-gold); }
.nav a:hover::after, .nav a.active::after { width: 100%; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; flex-direction: column; gap: 5px; }
.nav__toggle span { width: 26px; height: 2px; background: var(--c-text); transition: 0.3s var(--ease); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 1rem 2.4rem; border: 1px solid var(--c-gold); color: var(--c-gold);
  background: transparent; cursor: pointer; transition: all 0.4s var(--ease);
}
.btn:hover { background: var(--c-gold); color: var(--c-bg); }
.btn--solid { background: var(--c-gold); color: var(--c-bg); }
.btn--solid:hover { background: var(--c-gold-soft); border-color: var(--c-gold-soft); }

/* ---------- Hero ---------- */
.hero {
  min-height: 100vh; display: flex; align-items: center; position: relative;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(120% 90% at 72% 18%, rgba(42, 44, 54, 0.5) 0%, transparent 58%),
              url("assets/img/lamborghini-2.jpg") center 30% / cover no-repeat;
  transform: scale(1.06);
  animation: heroDrift 34s ease-in-out infinite alternate;
}
/* Voiles sombres : lisibilité du texte (gauche) + fondu vers le fond (bas) */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--c-bg) 0%, rgba(20, 21, 26, 0.72) 42%, rgba(20, 21, 26, 0.32) 100%),
    linear-gradient(180deg, rgba(20, 21, 26, 0.55) 0%, transparent 28%, var(--c-bg) 100%);
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.13) translate(-1.5%, -1%); }
}

/* Voile de fumée / brume — texture animée (bruit fractal SVG, aucun fichier) */
.hero__smoke {
  position: absolute; inset: -25%; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016 0.006' numOctaves='5' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
  background-size: 600px 600px;
  opacity: 0.16;
  mix-blend-mode: screen;
  filter: blur(6px) contrast(1.3) brightness(1.15);
  -webkit-mask-image: radial-gradient(135% 78% at 50% 2%, #000 0%, rgba(0,0,0,0.6) 45%, transparent 85%);
          mask-image: radial-gradient(135% 78% at 50% 2%, #000 0%, rgba(0,0,0,0.6) 45%, transparent 85%);
  animation: smokeDrift 18s linear infinite, smokeBreathe 9s ease-in-out infinite;
}
.hero__smoke::after {
  content: ""; position: absolute; inset: 0;
  background: inherit; background-size: 900px 900px;
  mix-blend-mode: screen; opacity: 0.7;
  animation: smokeDrift2 13s linear infinite;
}
/* Déplacement = exactement la taille de la tuile -> boucle sans couture (pas de cut) */
@keyframes smokeDrift {
  from { background-position: 0 0; }
  to   { background-position: 600px -600px; }
}
@keyframes smokeDrift2 {
  from { background-position: 0 0; }
  to   { background-position: -900px 900px; }
}
@keyframes smokeBreathe {
  0%, 100% { opacity: 0.10; }
  50%      { opacity: 0.20; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg { animation: none; }
  .hero__smoke, .hero__smoke::after { animation: none; }
}
.hero__inner { max-width: 900px; }
.hero h1 { margin-bottom: 1.5rem; }
.hero h1 em { font-style: italic; color: var(--c-gold); }
.hero .lead { margin-bottom: 2.5rem; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Hero "signature" (nom en grand) ---------- */
.hero--name {
  text-align: center;
  isolation: isolate; /* crée un contexte d'empilement -> la fumée/les cercles passent au-dessus du dégradé */
  background: radial-gradient(125% 100% at 50% 32%, #21232f 0%, #15161c 52%, #0e0f13 100%);
}
.hero--name .hero__inner { max-width: none; margin: 0 auto; }
.hero--name .hero__actions { justify-content: center; margin-top: 2.6rem; }

.hero__name { font-family: var(--font-display); font-weight: 500; line-height: 0.92; margin: 0 0 1.6rem; }
.hero__name span { display: block; }
.hero__first { color: #f3f1ea; font-size: clamp(3.4rem, 12vw, 9.5rem); letter-spacing: 0.01em; }
.hero__last  { color: var(--c-gold); font-style: italic; font-size: clamp(3.4rem, 12vw, 9.5rem); margin-top: -0.08em; }
.hero__role {
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.38em;
  font-size: clamp(0.68rem, 1.4vw, 0.95rem); color: var(--c-text-dim); margin: 0; padding-left: 0.38em;
}
.hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.62rem; color: var(--c-text-dim); padding-left: 0.3em;
}
.hero__scroll::after {
  content: ""; display: block; width: 1px; height: 34px; margin: 0.7rem auto 0;
  background: linear-gradient(var(--c-gold), transparent);
}

/* ---------- Galerie (grid) ---------- */
.gallery { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.gallery--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  position: relative; overflow: hidden; background: var(--c-bg-2);
  aspect-ratio: 4/5; cursor: pointer;
}
.card--wide { aspect-ratio: 16/9; }
.card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.92) brightness(0.92);
}
.card:hover img { transform: scale(1.06); filter: saturate(1) brightness(1); }
.card__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 1.6rem; opacity: 0; transition: opacity 0.4s var(--ease);
  background: linear-gradient(0deg, rgba(20,21,26,0.85) 0%, transparent 60%);
}
.card:hover .card__overlay { opacity: 1; }
.card__title { font-family: var(--font-display); font-size: 1.4rem; color: #fff; }
.card__tag { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold); }
.card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 64px; height: 64px; border: 1px solid rgba(255,255,255,0.7); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: 0.4s var(--ease);
}
.card:hover .card__play { background: var(--c-gold); border-color: var(--c-gold); }
.card__play::after { content: ""; border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.card:hover .card__play::after { border-left-color: var(--c-bg); }

/* ---------- Galerie (format réel, lecture ligne par ligne ←→) ---------- */
.gallery--masonry { align-items: start; }
.gallery--masonry .card { aspect-ratio: auto; }
.gallery--masonry .card img { height: auto; display: block; }

/* ---------- Section titres ---------- */
.section-head { margin-bottom: 3.5rem; max-width: 700px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- À propos ---------- */
.about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.about__img { position: relative; }
.about__img img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.about__img::before {
  content: ""; position: absolute; inset: -14px -14px 14px 14px; border: 1px solid var(--c-gold);
  z-index: -1;
}
.about p + p { margin-top: 1.2rem; }
.about__bio p { font-size: 1.08rem; line-height: 1.7; color: var(--c-text-dim); }
.stats { display: flex; gap: 3rem; margin-top: 2.5rem; flex-wrap: wrap; }
.stats__num { font-family: var(--font-display); font-size: 2.6rem; color: var(--c-gold); }
.stats__label { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-dim); }

/* ---------- Services ---------- */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.service {
  border: 1px solid var(--c-line); padding: 2.5rem 2rem; transition: 0.4s var(--ease);
  background: var(--c-bg-2);
}
.service:hover { background: var(--c-bg-3); transform: translateY(-6px); }
.service__num { font-family: var(--font-display); font-size: 1.2rem; color: var(--c-gold); margin-bottom: 1rem; }
.service h3 { margin-bottom: 1rem; }
.service p { color: var(--c-text-dim); font-size: 0.95rem; }
.service__list { list-style: none; margin: 0; padding: 0; }
.service__list li {
  position: relative; padding-left: 1.1rem; margin-bottom: 0.4rem;
  color: var(--c-text); font-size: 0.95rem;
}
.service__list li:last-child { margin-bottom: 0; }
.service__list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-gold);
}

/* ---------- Web / Sites internet ---------- */
/* Galerie de sites réalisés (extensible : un .webproject par site) */
/* Rail horizontal : une seule ligne, défilement à la molette, aux flèches ou au doigt.
   Il sort du bloc de texte pour prendre toute la largeur utile de l'écran, et les
   cartes se dimensionnent pour qu'il en tienne trois sans coupure. */
.webrail {
  position: relative;
  --pad-x: clamp(1.2rem, 5vw, 4rem);
  --card-gap: clamp(1.6rem, 4vw, 2.6rem);
  --rail-w: min(1720px, calc(100vw - var(--sbw, 0px) - 2 * var(--pad-x)));
  --card-w: max(290px, min(540px, calc((var(--rail-w) - 2 * var(--card-gap)) / 3)));
  width: var(--rail-w);
  margin-inline: calc((100% - var(--rail-w)) / 2);
}
.webgrid {
  display: flex;
  align-items: stretch;
  justify-content: safe center;
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 1.4rem;
  scrollbar-width: thin;
  scrollbar-color: var(--c-gold) rgba(255, 255, 255, 0.08);
}
.webgrid:focus-visible { outline: 1px solid var(--c-gold); outline-offset: 8px; }
.webgrid::-webkit-scrollbar { height: 5px; }
.webgrid::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.08); }
.webgrid::-webkit-scrollbar-thumb { background: var(--c-gold); }

/* Flèches de défilement, posées au centre des mosaïques (ratio 4/3) */
.webrail__nav {
  position: absolute; top: calc(var(--card-w) * 0.375); z-index: 5;
  transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-bg-2); color: var(--c-gold);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: opacity 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.webrail__nav--prev { left: calc(var(--card-gap) * -0.5 - 23px); }
.webrail__nav--next { right: calc(var(--card-gap) * -0.5 - 23px); }
.webrail__nav:hover { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); }
.webrail__nav[disabled] { opacity: 0.25; cursor: default; }
.webrail__nav[disabled]:hover { background: var(--c-bg-2); color: var(--c-gold); border-color: var(--c-line); }
/* Pas de flèches quand tout tient à l'écran, ni au doigt (on glisse) */
.webrail--full .webrail__nav { display: none; }
@media (max-width: 1100px) { .webrail__nav { display: none; } }

.webproject {
  flex: 0 0 var(--card-w); width: var(--card-w);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
.webcase__media { position: relative; display: block; }
.webproject__info {
  display: flex; flex-direction: column; align-items: flex-start;
  flex: 1;
  padding: 1.2rem 0.2rem 0;
}
.webproject__tag { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-gold); }
.webproject__info h3 { margin: 0.3rem 0 0; }
.webproject__desc { color: var(--c-text-dim); font-size: 0.95rem; line-height: 1.6; margin: 0.7rem 0 1.3rem; }
.webproject__info .btn { margin-top: auto; padding: 0.8rem 1.5rem; }

/* Mosaïque façon Mondrian (« Composition en rouge, jaune, bleu et noir ») */
.mondrian {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "hero hero    work"
    "hero hero    about"
    "contact contact about";
  gap: 7px; padding: 7px; background: #0b0b0d;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(0, 0, 0, 0.6);
  box-shadow: 0 28px 60px -28px rgba(0, 0, 0, 0.75);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.webcase__media:hover .mondrian {
  transform: translateY(-6px);
  box-shadow: 0 40px 72px -28px rgba(0, 0, 0, 0.85);
}
.mondrian__tile { position: relative; overflow: hidden; background: var(--c-bg-3); }
.mondrian__tile--hero    { grid-area: hero; }
.mondrian__tile--work    { grid-area: work; }
.mondrian__tile--about   { grid-area: about; }
.mondrian__tile--contact { grid-area: contact; }

/* Capture de secours (mobile / chargement / animations coupées) */
.mondrian__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Cadres du site en direct (injectés en JS, mis à l'échelle « bureau ») */
.mondrian__frame { position: absolute; top: 0; left: 0; border: 0; pointer-events: none; }
.mondrian--live .mondrian__tile--hero .mondrian__poster { opacity: 0; transition: opacity 0.6s var(--ease); }

/* Pastille d'invitation + lien cliquable couvrant la mosaïque */
.mondrian__link {
  position: absolute; inset: 0; z-index: 2; display: flex;
  align-items: flex-end; justify-content: flex-start; padding: 1rem;
}
.mondrian__hint {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-bg); background: var(--c-gold); padding: 0.55rem 1rem;
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.webcase__media:hover .mondrian__hint { opacity: 1; transform: none; }

/* Version statique (mobile / prefers-reduced-motion) : on garde juste la capture */
.mondrian--static {
  grid-template-columns: 1fr; grid-template-rows: 1fr; grid-template-areas: "hero";
  aspect-ratio: 16 / 13;
}
.mondrian--static .mondrian__tile:not(.mondrian__tile--hero) { display: none; }

/* ---------- CTA bandeau ---------- */
.cta { text-align: center; }
.cta h2 { margin-bottom: 1.5rem; }
.cta h2 em { font-style: italic; color: var(--c-gold); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); }
.field { margin-bottom: 1.5rem; }
.field label { display: block; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-dim); margin-bottom: 0.6rem; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--c-bg-2); border: 1px solid var(--c-line); color: var(--c-text);
  padding: 0.9rem 1rem; font-family: var(--font-body); font-size: 0.95rem; transition: border 0.3s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-gold); }
.field textarea { resize: vertical; min-height: 140px; }
.form-status { margin-top: 1.2rem; font-size: 0.95rem; min-height: 1.2em; }
.form-status:empty { margin-top: 0; }
.form-status--ok { color: var(--c-gold); }
.form-status--err { color: #e0867d; }

/* ---------- Bouton retour en haut ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  width: 44px; height: 44px; border-radius: 50%; z-index: 90;
  border: 1px solid var(--c-line); background: var(--c-bg-2); color: var(--c-gold);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), background 0.3s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--c-gold); color: var(--c-bg); border-color: var(--c-gold); }

.contact-info { display: flex; flex-direction: column; }
.contact-row {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.3rem 0.4rem; border-top: 1px solid var(--c-line);
  color: var(--c-text); transition: background 0.3s var(--ease), padding 0.3s var(--ease);
}
.contact-info .contact-row:last-child { border-bottom: 1px solid var(--c-line); }
.contact-row__icon {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--c-line); display: grid; place-items: center;
  color: var(--c-text-dim); transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.contact-row__icon svg { width: 19px; height: 19px; }
.contact-row__text { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.contact-row__label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-text-dim); }
.contact-row__value { color: var(--c-text); font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
.contact-row__arrow { color: var(--c-text-dim); font-size: 1.2rem; transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
a.contact-row:hover { padding-left: 0.9rem; }
a.contact-row:hover .contact-row__icon { color: var(--c-gold); border-color: var(--c-gold); }
a.contact-row:hover .contact-row__value { color: var(--c-gold); }
a.contact-row:hover .contact-row__arrow { color: var(--c-gold); transform: translateX(6px); }
.contact-row--static { cursor: default; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--c-line); padding: 3.5rem 0 2.5rem; }
.footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; }
.footer__logo img { height: 46px; }
.footer__social { display: flex; gap: 1.8rem; }
.footer__social a { font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--c-text-dim); transition: color 0.3s var(--ease); }
.footer__social a:hover { color: var(--c-gold); }
.footer__bottom { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--c-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.78rem; color: var(--c-text-dim); }
.footer__bottom a:hover { color: var(--c-gold); }

/* ---------- Page header (sous-pages) ---------- */
.page-head { padding: clamp(8rem, 18vw, 12rem) 0 clamp(2.5rem, 6vw, 4rem); text-align: center; }
.page-head h1 { margin-bottom: 1rem; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(10,11,14,0.96); display: none; align-items: center; justify-content: center; padding: 2rem; }
.lightbox.open { display: flex; }
.lightbox__media { max-width: 92vw; max-height: 88vh; }
.lightbox__media img { max-height: 88vh; width: auto; margin: 0 auto; }
.lightbox__media iframe { width: min(90vw, 1100px); aspect-ratio: 16/9; border: 0; }
.lightbox__close { position: absolute; top: 1.6rem; right: 2rem; background: none; border: 0; color: #fff; font-size: 2rem; cursor: pointer; line-height: 1; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 2.5rem; cursor: pointer; padding: 1rem; opacity: 0.6; transition: opacity 0.3s; }
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }

/* ---------- Animations au scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Filtres galerie ---------- */
.filters { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3rem; }
.filter {
  background: none; border: 1px solid var(--c-line); color: var(--c-text-dim);
  padding: 0.6rem 1.4rem; font-size: 0.74rem; letter-spacing: 0.15em; text-transform: uppercase;
  cursor: pointer; transition: 0.3s var(--ease);
}
.filter:hover, .filter.active { border-color: var(--c-gold); color: var(--c-gold); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  /* iPhone/Safari : un header fixed + backdrop-filter disparaît au scroll.
     Sur mobile on utilise un fond plein opaque, sans flou. */
  .header.scrolled {
    background: rgba(20, 21, 26, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .gallery, .services { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 340px); flex-direction: column;
    align-items: flex-start; justify-content: center; gap: 1.8rem; padding: 3rem;
    background: var(--c-bg-2); transform: translateX(100%); transition: transform 0.45s var(--ease);
    border-left: 1px solid var(--c-line);
  }
  .nav.open { transform: none; }
  .nav__toggle { display: flex; z-index: 110; }
}
@media (max-width: 560px) {
  /* Galeries photo/vidéo : 2 par ligne sur téléphone (au lieu d'une seule) */
  .gallery, .gallery--2 { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .services { grid-template-columns: 1fr; }
  /* Stats : garder les 3 sur une seule ligne sur téléphone */
  .stats { gap: 1.1rem; flex-wrap: nowrap; }
  .stats__num { font-size: 1.7rem; }
  .stats__label { font-size: 0.6rem; letter-spacing: 0.1em; }
}