/* =====================================================
   Nicolas Portes — accueil.css
   Habillage de la page d'accueil refondue : formes/courbes + Fraunces.
   Chargé UNIQUEMENT sur index.php (voir header.php), APRÈS style.css :
   surcharge le style global pour la home. Les autres pages ne le chargent pas
   et restent inchangées. Le nav et le footer (chrome partagé) ne sont pas
   redéfinis ici : ils gardent le style global du site.
   ===================================================== */

/* ===== composants repris (titres en Fraunces sur la home) ===== */
.hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.75rem; }
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
.section-label { font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); display: flex; align-items: center; gap: 0.75rem; margin-bottom: 2rem; }
.section-label::before { content: ''; display: block; width: 28px; height: 1px; background: var(--gold); }
.section-title { font-family: 'Fraunces', serif; font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700; color: var(--cream); line-height: 1.2; margin-bottom: 1.5rem; }
.section-title em { font-style: italic; font-weight: 400; color: var(--gold); }
.body-text { font-size: 0.95rem; color: var(--muted); max-width: 640px; line-height: 1.95; margin-bottom: 1.25rem; }
/* .btn-primary / .btn-secondary : voir style.css (pastille unifiée pour tout le site) */

/* ===== arrivée sur l'accueil : PAS de fondu d'entrée ===== */
/* Le hero plein écran est la page : pendant les 0,3s du fondu global, tout le
   viewport restait noir puis le hero clair surgissait — perçu comme un flash au
   retour sur l'accueil. On le fait apparaître dès le premier rendu ; le contenu
   sous la ligne de flottaison se révèle au scroll comme avant, et le fondu de
   SORTIE (html.page-sortie, style.css) reste actif. Cette feuille étant chargée
   après style.css, la règle l'emporte à spécificité égale. */
html.js main { animation: none; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 2.5rem; }
section { padding: 5rem 0; position: relative; } /* un peu plus d'air entre les sections (respiration) */

/* ===== HERO : le showreel sous un dôme ===== */
.hero-wrap { position: relative; height: 100vh; min-height: 640px; overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 60px 60px;
  display: flex; align-items: center; }
.showreel-ph { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(52% 60% at 74% 30%, rgba(200,151,42,0.30), transparent 65%),
    radial-gradient(40% 45% at 22% 75%, rgba(200,151,42,0.12), transparent 70%),
    linear-gradient(180deg, #1a1308 0%, #0c0904 100%); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; }
.showreel-tag { position: absolute; right: 2.5rem; bottom: 7rem; z-index: 3;
  font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(240,226,184,0.4);
  display: flex; align-items: center; gap: 0.6rem; }
.showreel-tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: 0.15; } }
.hero-overlay { position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to right, rgba(19,15,8,0.85) 0%, rgba(19,15,8,0.6) 50%, rgba(19,15,8,0.2) 100%); }
.hero-content { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto;
  padding: 0 2.5rem; width: 100%; }
.hero-title { font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700; color: var(--cream); line-height: 1.05; margin-bottom: 1.75rem; max-width: 760px; }
.hero-title em { font-style: italic; font-weight: 400; color: var(--gold); display: block; }
.hero-body { font-size: 1.05rem; color: var(--cream-dim); max-width: 620px; line-height: 1.85; margin-bottom: 2.25rem; }
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(200,151,42,0.6);
  animation: scrollB 2s infinite; }
.hero-scroll svg { width: 26px; height: 12px; }
.hero-scroll svg path { fill: none; stroke: rgba(200,151,42,0.6); stroke-width: 1.2; }
@keyframes scrollB { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } }

/* ===== OFFRES : trois arches qui montent dans le dôme ===== */
.arches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem;
  margin-top: -110px; position: relative; z-index: 5; align-items: start;
  transition: opacity 0.6s ease; }
.arche { display: flex; flex-direction: column; gap: 0.65rem; background: var(--bg-2);
  border: 1px solid var(--border-light); border-radius: 999px 999px 26px 26px;
  padding: 5.4rem 2rem 2.4rem; min-height: 480px; position: relative;
  transform-origin: top center; transition: border-color 0.35s ease, background 0.3s; }
.arche:hover { background: var(--bg-3); border-color: var(--gold-dim); }
/* Le balancement est porté par une classe, plus par :hover. Sur :hover il était coupé net
   au départ de la souris et l'arche se remettait droite d'un coup ; posé par accueil.js,
   il va maintenant au bout de son oscillation, comme une enseigne qui revient au repos. */
.arche.swinging { animation: swing 1.4s ease; }
@keyframes swing {
  0%   { transform: rotate(0deg); }
  26%  { transform: rotate(0.8deg); }
  52%  { transform: rotate(-0.5deg); }
  74%  { transform: rotate(0.28deg); }
  100% { transform: rotate(0deg); }
}
.arche:nth-child(2) { margin-top: 8px; }
.arche:nth-child(3) { margin-top: 0; }
.arche-num { position: absolute; top: 1.6rem; left: 50%; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', serif; font-size: 0.85rem; font-weight: 700;
  color: var(--gold); letter-spacing: 0.1em; background: var(--bg); }
.offre-title { font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700;
  color: var(--cream); line-height: 1.2; }
.offre-sub { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1rem; line-height: 1.5; }
.offre-desc { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.85; flex: 1; }
.offre-link { font-size: 0.78rem; color: var(--gold); letter-spacing: 0.05em;
  margin-top: 1.25rem; transition: color 0.2s; }
.arche:hover .offre-link { color: var(--gold-light); }

/* ===== AUDIENCE : la vesica, deux cercles, un recouvrement ===== */
.audience { text-align: center; margin-top: 3rem; }
.audience .section-label { justify-content: center; }
.audience .section-label::before { display: none; }
.vesica { display: flex; justify-content: center; align-items: center; margin: 4.5rem 0 4.5rem; position: relative; }
.vesica::before { content: ''; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 200px; height: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200,151,42,0.16), transparent); filter: blur(8px); }
.v-circle { width: min(380px, 42vw); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--border-light); background: rgba(28,22,9,0.55);
  position: relative; transition: background 0.35s, border-color 0.35s; }
.v-circle.left { margin-right: -56px; z-index: 2; transform: translateY(-30px); }
.v-circle.right { margin-left: -56px; z-index: 1; transform: translateY(30px); }
.v-circle:hover { background: rgba(24,18,8,0.96); border-color: var(--gold-dim); z-index: 5; }
.v-diamond { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  background: var(--gold); transform: translate(-50%, -50%) rotate(45deg); z-index: 6; }
.audience-col-label { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 0.9rem; }
.audience-col-text { font-size: 0.95rem; color: var(--cream-dim); line-height: 1.85; }
.v-circle .inner { position: absolute; top: 50%; transform: translateY(-50%);
  width: 54%; text-align: center; }
.v-circle.left .inner { left: 7%; }
.v-circle.right .inner { right: 7%; }
.audience-conclude { font-family: 'Fraunces', serif; font-style: italic;
  font-size: 0.95rem; color: var(--cream-dim); max-width: 640px; margin: 0 auto; line-height: 1.85; }

/* ===== APPROCHE : citation courbe + chiffres en bokeh ===== */
.approche-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4rem; align-items: start; }
.quote { border-left: 2px solid var(--gold); border-radius: 0 80px 80px 0;
  background: var(--bg-2); padding: 1.4rem 2.6rem 1.4rem 1.75rem; margin: 2rem 0; }
.quote p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.05rem;
  color: var(--cream-dim); line-height: 1.8; }
.cluster { position: relative; height: 460px; }
.bulle { position: absolute; border-radius: 50%; background: var(--bg-2);
  border: 1px solid var(--border-light); display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; padding: 1.2rem;
  transition: transform 0.35s ease, border-color 0.35s; }
.bulle:hover { transform: scale(1.04); border-color: var(--gold-dim); }
.bulle .chiffre-val { font-family: 'Fraunces', serif; font-weight: 700;
  color: var(--gold); line-height: 1; margin-bottom: 0.5rem; font-size: 1.9rem; }
.bulle .chiffre-label { font-size: 0.68rem; color: var(--muted); line-height: 1.5; max-width: 130px; }
.bulle.b1 { width: 195px; height: 195px; left: 0; top: 0; }
.bulle.b2 { width: 175px; height: 175px; right: 0; top: 110px; border-color: var(--gold-dim);
  box-shadow: 0 0 50px rgba(200,151,42,0.10); }
.bulle.b2 .chiffre-val { font-size: 2.2rem; }
.bulle.b3 { width: 165px; height: 165px; left: 26px; bottom: 0; }
.bulle.b4 { width: 135px; height: 135px; right: 64px; bottom: 6px; }
.bulle.b4 .chiffre-val { font-size: 1.7rem; }
/* animation retenue : halo qui respire (proposition 2) */
@keyframes bulle-halo { 0%, 100% { box-shadow: 0 0 26px rgba(200,151,42,0.05); } 50% { box-shadow: 0 0 58px rgba(200,151,42,0.19); } }
.bulle { animation: bulle-halo 4.5s ease-in-out infinite; }
.bulle.b2 { animation-delay: -1.1s; }
.bulle.b3 { animation-delay: -2.2s; }
.bulle.b4 { animation-delay: -3.3s; }
@media (prefers-reduced-motion: reduce) { .bulle { animation: none; } }

/* ===== TÉMOIGNAGES : cartons d'intertitre notés en étoiles ===== */
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.ticket { position: relative; background: var(--bg-2); border: 1px solid var(--gold-dim);
  padding: 2.4rem 2.6rem; text-align: center; display: flex; flex-direction: column; align-items: center;
  transition: border-color 0.3s, background 0.3s; }
.ticket::before { content: ''; position: absolute; inset: 6px; border: 1px solid var(--border-light); pointer-events: none; }
.ticket:hover { border-color: var(--gold); background: var(--bg-3); }
.ticket > * { position: relative; z-index: 1; }
.stars { display: flex; gap: 6px; margin-bottom: 1.5rem; }
.star { display: inline-block; color: var(--gold); font-size: 1rem; line-height: 1; cursor: default; }
.star:hover { animation: twinkle 0.6s ease; }
@keyframes twinkle {
  0%   { transform: scale(1) rotate(0); }
  40%  { transform: scale(1.45) rotate(9deg); color: var(--gold-light); filter: drop-shadow(0 0 6px var(--gold-light)); }
  100% { transform: scale(1) rotate(0); }
}
.temoignage-text { font-family: 'Fraunces', serif; font-style: italic;
  font-size: 1.02rem; color: var(--cream-dim); line-height: 1.75; }
.star-sep { color: var(--gold); font-size: 0.95rem; line-height: 1; margin: 1.3rem 0; opacity: 0.85; }
.temoignage-author { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.temoignage-role { font-size: 0.76rem; color: var(--muted); margin-top: 0.2rem; }

/* ===== CLIENTS : cercle REC + générique défilant ===== */
.rec { flex: 0 0 auto; width: 158px; height: 158px; border-radius: 50%;
  border: 1px solid var(--gold-dim);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.45rem;
  background: radial-gradient(circle at 50% 38%, rgba(200,151,42,0.10), transparent 70%); }
.rec .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--gold);
  animation: blink 1.6s infinite; }
.rec .lbl { font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream); }
.rec .since { font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.clients-row { display: flex; align-items: center; gap: 2.5rem; }
.clients-marquees { flex: 1; min-width: 0; }
.marquee { position: relative; overflow: hidden; padding: 0.2rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.marquee + .marquee { margin-top: 0.4rem; }
.mq-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform;
  animation: mq 60s linear infinite; }
.marquee.rev .mq-track { animation-direction: reverse; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq-item { display: inline-flex; align-items: center; }
.mq-name { font-size: 1rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cream-dim); padding: 0 1.5rem; }
.mq-sep { color: var(--gold); font-size: 0.6rem; opacity: 0.85; }

/* ===== CTA : diapositive montée ===== */
.ct-title { font-family: 'Fraunces', serif; font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.12; color: var(--cream); }
.ct-title em { font-style: italic; font-weight: 400; color: var(--gold); display: block; }
.ct-body { font-size: 0.92rem; color: var(--muted); line-height: 1.85; margin: 1.2rem 0 2rem; max-width: 430px; }
.ct-note { font-size: 0.82rem; color: var(--dark-muted); line-height: 1.7; margin: 1.6rem 0 0; max-width: 430px; }
.ct-note a { color: var(--gold); }
.btns { display: flex; gap: 1rem; flex-wrap: wrap; }
.cta { display: grid; grid-template-columns: 320px minmax(0, 460px); justify-content: center;
  gap: 3.5rem; align-items: center; }
.fB { position: relative; aspect-ratio: 51/56; width: 100%; max-width: 320px; background: #181206;
  border: 1px solid var(--border-light); padding: 18px 18px 40px; box-shadow: 0 26px 55px rgba(0,0,0,.5); }
.fB .img { width: 100%; height: 100%; background: url('/img/a-propos/cta-portrait-01.webp') center/cover, var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45); }
.fB .label { position: absolute; left: 0; right: 0; bottom: 13px; text-align: center; font-size: 0.56rem;
  letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.fB .label b { color: var(--cream-dim); font-weight: 500; }

/* ===== révélation au scroll ===== */
/* État masqué gardé par html.js : sans JavaScript, rien n'est caché (doctrine du
   site, cf. header.php). accueil.js n'ajoutant jamais .in sans JS, une règle .r
   non gardée rendait tout le contenu sous le hero invisible en permanence. */
html.js .r { opacity: 0; transform: translateY(20px); }
.r { transition: opacity 0.7s ease, transform 0.7s ease; }
/* La règle de révélation doit être PLUS spécifique que « html.js .r » (0,2,1),
   sinon le masquage l'emporte et le contenu ne réapparaît jamais au scroll. */
.r.in, html.js .r.in { opacity: 1; transform: none; }

/* ===== responsive ===== */
@media (max-width: 900px) {
  .arches { grid-template-columns: 1fr; gap: 1.5rem; margin-top: -70px; }
  .arche, .arche:nth-child(2), .arche:nth-child(3) { margin-top: 0; min-height: 0; max-width: 420px; margin-left: auto; margin-right: auto; width: 100%; }
  .approche-grid { grid-template-columns: 1fr; gap: 3rem; }
  .tickets { grid-template-columns: 1fr; }
  .cluster { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
  .bulle { position: static; }
  .bulle.b2 { margin: -28px 0 0 -22px; }
  .bulle.b3 { margin-top: -30px; }
  .bulle.b4 { margin: -24px 0 0 -26px; }
}
@media (max-width: 768px) {
  .wrap { padding: 0 1.25rem; }
  .hero-wrap { height: 100svh; border-radius: 0 0 50% 50% / 0 0 70px 70px; }
  .hero-content { padding: 0 1.25rem; }
  .hero-overlay { background: rgba(19,15,8,0.75); }
  .showreel-tag { right: 1.25rem; }
  .vesica { flex-direction: column; }
  .v-circle { width: min(330px, 86vw); }
  .v-circle.left { margin: 0 0 -56px 0; z-index: 2; transform: none; }
  .v-circle.right { margin: 0; z-index: 1; transform: none; }
  .v-circle.left .inner { left: 10%; right: 10%; width: auto; top: 30%; }
  .v-circle.right .inner { left: 10%; right: 10%; width: auto; top: auto; bottom: 30%; transform: none; }
  .vesica::before { width: 280px; height: 190px; }
  .rec { margin: 0 auto 1.8rem; }
  .clients-row { flex-direction: column; align-items: stretch; }
  .cta { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ===== habillage photo immersif ===== */
/* arches illustrées : une photo en haut, le texte dessous */
.arche.dressed { padding: 0; overflow: hidden; gap: 0; }
.arche.dressed .arche-photo { width: 100%; height: 210px; background-size: cover; background-position: center; position: relative; }
.arche.dressed .arche-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,22,9,0.5) 0%, rgba(28,22,9,0) 26%, rgba(28,22,9,0) 44%, rgba(28,22,9,1) 100%); }
.arche.dressed .arche-num { top: 1.6rem; }
.arche.dressed .arche-body { padding: 2.2rem 2rem 2.4rem; display: flex; flex-direction: column; gap: 0.65rem; flex: 1; }
/* offres masquées tant que la vidéo est plein écran (haut de page), révélées au scroll */
/* Masquées dès le premier rendu grâce à html.js (drapeau posé dans le <head>), et non
   plus après coup par le script : c'est ce décalage qui faisait clignoter les arches.
   Sans JS, html.js n'existe pas et les arches restent visibles. */
html.js .arches { opacity: 0; pointer-events: none; }
html.js body.hb-scrolled .arches { opacity: 1; pointer-events: auto; }
/* fond photo de section : apparaît et disparaît en fondu (haut + bas) */
.has-bg { position: relative; }
.has-bg > .wrap { position: relative; z-index: 1; }
.sect-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); }
.sect-bg::after { content: ''; position: absolute; inset: 0; background: rgba(19,15,8,0.72); }

/* témoignages : cartes d'avis raffinées (esprit carton d'intertitre, sans photo) */
.ticket { padding: 2.5rem 2.6rem 2.1rem; background: linear-gradient(165deg, var(--bg-3), var(--bg-2));
  border-color: var(--border); overflow: hidden;
  transition: border-color .35s, background .35s, transform .35s, box-shadow .35s; }
.ticket::before { inset: auto; top: 0; left: 0; right: 0; height: 2px; border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ticket::after { content: '\201C'; position: absolute; top: .45rem; left: 50%; transform: translateX(-50%);
  font-family: 'Fraunces', serif; font-weight: 900; font-size: 3.4rem; line-height: 1;
  color: var(--gold); opacity: .16; pointer-events: none; z-index: 0; }
.ticket:hover { border-color: var(--gold-dim); background: linear-gradient(165deg, #2a210d, #201909);
  transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.ticket:hover::after { opacity: .28; }
.ticket .stars { margin-top: .25rem; margin-bottom: 1rem; }
.ticket .temoignage-text { color: var(--cream); font-size: 1.05rem; }
.ticket .star-sep { display: flex; align-items: center; justify-content: center; gap: .65rem; margin: .9rem 0; }
.ticket .star-sep::before, .ticket .star-sep::after { content: ''; width: 30px; height: 1px; }
.ticket .star-sep::before { background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.ticket .star-sep::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }

/* témoignages : ligne unique qui défile horizontalement à l'infini */
.tickets-marquee { position: relative; overflow: hidden; padding: 1.2rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tickets-track { display: flex; width: max-content; align-items: stretch; will-change: transform;
  animation: tickets-mq 160s linear infinite; }
.tickets-marquee:hover .tickets-track { animation-play-state: paused; }
@keyframes tickets-mq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tickets-track .ticket { flex: 0 0 clamp(255px, 80vw, 310px); margin: 0 0.75rem;
  justify-content: center; padding: 1.7rem 1.7rem 1.5rem; }
.tickets-track .ticket .temoignage-text { font-size: 0.9rem; line-height: 1.6; }
.tickets-track .ticket:hover { transform: none; box-shadow: 0 12px 28px rgba(0,0,0,.4); }
@media (prefers-reduced-motion: reduce) { .tickets-track { animation: none; } }

/* ===== RÉALISATIONS : galerie coverflow (façon vitrine d'exemples) ===== */
.galerie { text-align: center; }
.galerie-head { max-width: 760px; margin: 0 auto; padding: 0 2.5rem; }
.galerie .section-label { justify-content: center; }
.galerie .section-label::before { display: none; }
.galerie-head .section-title { text-align: center; }

.galerie .stage { position: relative; height: clamp(200px, 34vw, 400px); max-width: 1280px;
  margin: 1.3rem auto 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.galerie .track { position: relative; width: 100%; height: 100%; }
.galerie .card { position: absolute; top: 50%; left: 50%;
  width: clamp(280px, 58vw, 640px); aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s, filter .55s, box-shadow .55s;
  will-change: transform, opacity; border: 1px solid var(--border); background: var(--bg-2); }
.galerie .card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 1.5rem .9rem;
  background: linear-gradient(0deg, rgba(10,8,4,.92), rgba(10,8,4,.45) 55%, transparent);
  text-align: left; opacity: 0; transform: translateY(8px); transition: opacity .4s .1s, transform .4s .1s; }
.galerie .cap .t { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-light); }
.galerie .cap .n { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.25rem; color: #fff; margin-top: .15rem; }
.galerie .card[data-pos="0"] { z-index: 5; opacity: 1; filter: none;
  box-shadow: 0 20px 52px rgba(0,0,0,.55), 0 0 0 1px var(--gold-dim), 0 0 34px rgba(200,151,42,.16); }
.galerie .card[data-pos="0"] .cap { opacity: 1; transform: none; }
.galerie .card[data-pos="-1"], .galerie .card[data-pos="1"] { z-index: 3; opacity: .5; filter: brightness(.42) saturate(.85); }
.galerie .card[data-pos="-2"], .galerie .card[data-pos="2"] { z-index: 2; opacity: .22; filter: brightness(.3) saturate(.7); }
.galerie .card[data-pos="hidden"] { z-index: 1; opacity: 0; pointer-events: none; }

.galerie .gnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: rgba(19,15,8,.6); border: 1px solid var(--border-light); color: var(--cream);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .25s, border-color .25s, color .25s; }
.galerie .gnav:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
.galerie .gnav.prev { left: max(1rem, calc(50% - 600px)); }
.galerie .gnav.next { right: max(1rem, calc(50% - 600px)); }
.galerie .gnav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.galerie .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2.2rem;
  max-width: 900px; margin: 1.5rem auto 0; padding: 0 2.5rem; }
.galerie .tab { background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .92rem; color: var(--muted); padding: .4rem 0; position: relative; transition: color .25s; }
.galerie .tab::after { content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--gold); transition: right .3s ease; }
.galerie .tab:hover { color: var(--cream-dim); }
.galerie .tab.active { color: var(--cream); }
.galerie .tab.active::after { right: 0; }

.galerie-foot { margin-top: 1.6rem; }
.galerie-foot a { color: var(--gold); font-size: .9rem; border-bottom: 1px solid var(--border-light);
  padding-bottom: 2px; transition: color .2s, border-color .2s; }
.galerie-foot a:hover { color: var(--gold-light); border-color: var(--gold); }

/* pastille play sur les cartes vidéo */
.galerie .card .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 60px; height: 60px; border-radius: 50%; background: rgba(19, 15, 8, 0.62); border: 1px solid var(--gold);
  display: flex; align-items: center; justify-content: center; pointer-events: none;
  transition: background .25s, transform .25s; }
.galerie .card .play svg { width: 18px; height: 18px; fill: var(--gold); margin-left: 2px; transition: fill .25s; }
.galerie .card[data-pos="0"]:hover .play { background: var(--gold); transform: translate(-50%, -50%) scale(1.06); }
.galerie .card[data-pos="0"]:hover .play svg { fill: var(--bg); }

/* lightbox vidéo de la galerie (même esprit que la page portfolio) */
.video-modal { position: fixed; inset: 0; background: rgba(8, 6, 3, 0.96); z-index: 9999;
  display: none; align-items: center; justify-content: center; padding: 2rem; }
.video-modal.active { display: flex; }
.video-modal-content { position: relative; width: 100%; max-width: 1100px; aspect-ratio: 16/9;
  background: #000; box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); }
.video-modal-content iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal-content.vertical { max-width: 380px; aspect-ratio: 9/16; max-height: 90vh; }
.video-modal .modal-close { position: absolute; top: 1.5rem; right: 1.75rem; width: 40px; height: 40px;
  background: none; border: 1px solid var(--gold-dim); color: var(--gold); cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; transition: all .2s; }
.video-modal .modal-close::before, .video-modal .modal-close::after { content: ''; position: absolute;
  width: 16px; height: 1px; background: var(--gold); transition: background .2s; }
.video-modal .modal-close::before { transform: rotate(45deg); }
.video-modal .modal-close::after { transform: rotate(-45deg); }
.video-modal .modal-close:hover { border-color: var(--gold); background: var(--gold); }
.video-modal .modal-close:hover::before, .video-modal .modal-close:hover::after { background: var(--bg); }

@media (max-width: 680px) {
  .galerie .gnav.prev { left: .4rem; }
  .galerie .gnav.next { right: .4rem; }
  .galerie .gnav { width: 42px; height: 42px; }
  .galerie .tabs { gap: .2rem 1.3rem; }
  .galerie .tab { font-size: .8rem; }
}