/* =========================================================================
   HOSTÉA — Feuille de style
   ========================================================================= */

:root{
  --cream:      #efe8dd;
  --cream-2:    #e8dfd1;
  --cream-3:    #f5f0e8;
  --ink:        #3f362b;
  --ink-soft:   #5d5245;
  --muted:      #8c7d67;
  --line:       rgba(63,54,43,.18);
  --white:      #fbf8f3;
  --shadow:     0 18px 40px -24px rgba(52,43,32,.55);
  --f-title: "Cinzel", "Times New Roman", serif;
  --f-display: "Playfair Display", "Cormorant Garamond", serif;
  --f-head: "Cormorant Garamond", "Times New Roman", serif;
  --f-body: "EB Garamond", Georgia, serif;
  --maxw: 1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 26px; }

.eyebrow{
  font-family:var(--f-head);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:.82rem;
  color:var(--muted);
  font-weight:600;
}
.section-title{
  font-family:var(--f-head);
  font-weight:600;
  font-size:2.5rem;
  letter-spacing:.04em;
  color:var(--ink);
  margin:0;
}
.small-caps{ font-variant:small-caps; letter-spacing:.06em; }

/* ---------- Header / nav ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 26px;
  transition:background .4s ease, box-shadow .4s ease;
}
.topbar.scrolled{
  background:rgba(239,232,221,.92);
  backdrop-filter:blur(8px);
  box-shadow:0 1px 0 var(--line);
}
.topbar .brand{
  font-family:var(--f-title);
  letter-spacing:.28em; font-size:1.05rem; font-weight:600;
  color:var(--white); text-decoration:none; padding-left:.28em;
}
.topbar.scrolled .brand{ color:var(--ink); }
.topbar nav{ display:flex; gap:26px; }
.topbar nav a{
  font-family:var(--f-head); text-transform:uppercase;
  letter-spacing:.2em; font-size:.78rem; font-weight:600;
  color:var(--white); text-decoration:none; opacity:.9;
}
.topbar.scrolled nav a{ color:var(--ink-soft); }
.topbar nav a:hover{ opacity:1; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; }

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--white);
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(30,34,29,.55) 0%,rgba(28,32,27,.35) 45%,rgba(24,28,23,.72) 100%);
}
.hero__inner{ position:relative; z-index:2; padding:0 24px; }
.hero__logo{ width:min(560px,82vw); margin:0 auto 6px;
  filter:brightness(0) invert(1) drop-shadow(0 6px 22px rgba(0,0,0,.35)); }
.hero__sub{
  font-family:var(--f-head); text-transform:uppercase;
  letter-spacing:.55em; font-size:1rem; margin:0; padding-left:.55em;
  opacity:.95;
}
.hero__tagline{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:20px 26px;
  background:linear-gradient(180deg,transparent,rgba(20,24,19,.55));
  font-family:var(--f-head); text-transform:uppercase;
  letter-spacing:.22em; font-size:.86rem; text-align:center;
}
.scroll-cue{
  position:absolute; z-index:2; bottom:78px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid rgba(255,255,255,.7); border-radius:14px;
}
.scroll-cue::before{
  content:""; position:absolute; top:7px; left:50%; width:3px; height:7px;
  background:#fff; border-radius:2px; transform:translateX(-50%);
  animation:cue 1.8s infinite;
}
@keyframes cue{ 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* ---------- À propos ---------- */
.about{ padding:110px 0 90px; }
.about__grid{
  display:grid; grid-template-columns:1.4fr .9fr; gap:56px; align-items:center;
}
.about h2{
  font-family:var(--f-head); font-weight:600; font-size:1.9rem;
  font-variant:small-caps; letter-spacing:.05em; margin:0 0 22px;
}
.about p{ margin:0 0 16px; color:var(--ink-soft); }
.about__photo{
  border-radius:2px; box-shadow:var(--shadow); aspect-ratio:3/4; object-fit:cover; width:100%;
}
.about__photo-wrap{ position:relative; }
.about__photo-wrap::before{
  content:""; position:absolute; inset:-14px -14px 14px 14px; border:1px solid var(--line); z-index:-1;
}

/* ---------- Prestations ---------- */
.presta{ padding:40px 0 100px; text-align:center; }
.presta > .wrap > .section-title{ margin-bottom:52px; }
.presta__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:38px; text-align:left; }
.presta__card img{ width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow); }
.presta__card h3{
  font-family:var(--f-head); font-variant:small-caps; letter-spacing:.05em;
  font-weight:600; font-size:1.5rem; margin:20px 0 8px;
}
.presta__card p{ margin:0; color:var(--ink-soft); font-size:1.02rem; }

/* ---------- Shooting / galeries ---------- */
.shooting{ background:var(--cream-2); padding:96px 0; text-align:center; }
.shooting__title{ font-family:var(--f-display); font-weight:700; font-size:3rem; margin:6px 0 4px; letter-spacing:.01em; }
.gallery{ margin-top:64px; }
.gallery__head{ margin:0 0 26px; }
.gallery__head .eyebrow{ display:block; }

.grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:270px; grid-auto-flow:dense; gap:30px;
}
.grid .tile{
  position:relative; overflow:hidden; background:var(--cream-3); cursor:pointer;
  margin:0; /* annule la marge par défaut des <figure> (source du vide entre les photos) */
}
/* Mise en page maquette : quand la galerie a exactement 5 photos, la 2e est large
   ([petite][large] / [3 égales]). Avec 6 photos, grille uniforme 3+3 (rangées pleines). */
.grid .tile:nth-child(2):nth-last-child(4){ grid-column:span 2; }
.grid .tile img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.grid .tile:hover img{ transform:scale(1.06); }
.grid .tile::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(28,26,22,.35));
  opacity:0; transition:opacity .4s;
}
.grid .tile:hover::after{ opacity:1; }
.tile__label{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  background:rgba(251,248,243,.9); color:var(--ink);
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem; font-weight:600; padding:7px 16px; white-space:nowrap;
  box-shadow:0 6px 18px -10px rgba(0,0,0,.5);
}

/* ---------- Reels / vidéo ---------- */
.reels{ padding:96px 0; }
.reels__layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:46px; align-items:center; }
.reels__wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.reels__aside{ display:flex; flex-direction:column; align-items:center; gap:22px; }

.phone{
  width:100%; border-radius:24px; padding:6px; position:relative;
  background:#1b1712; box-shadow:var(--shadow);
}
.phone::before{ /* barre / encoche */
  content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:32px; height:4px; border-radius:3px; background:#3a332c; z-index:4;
}
.phone__screen{ position:relative; border-radius:18px; overflow:hidden; aspect-ratio:9/19.5; background:#000; }
.reel-poster,.reel-gif,.reel-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.reel-gif{ opacity:0; transition:opacity .4s ease; }
.phone.playing .reel-gif{ opacity:1; }

/* Colonne de droite : lecteurs au format PAYSAGE */
.phone--feature{ width:280px; }
.phone--feature .phone__screen{ aspect-ratio:16/10; border-radius:15px; }
.phone--feature::before{ display:none; }

/* Interface reel (icônes, navigation, lecture) */
.reel-ui{ position:absolute; inset:0; pointer-events:none; color:#fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.reel-ui svg{ fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ru-actions{ position:absolute; right:6px; bottom:50px; display:flex; flex-direction:column; gap:12px; }
.ru-actions svg{ width:18px; height:18px; }
.ru-actions svg:first-child{ fill:#fff; }        /* cœur plein */
.ru-actions svg:last-child{ fill:#fff; stroke:none; } /* points */
.ru-bottom{ position:absolute; left:0; right:0; bottom:0; }
.ru-seek{ position:absolute; left:8px; right:8px; bottom:28px; height:2.5px; background:rgba(255,255,255,.35); border-radius:2px; }
.ru-seek span{ position:absolute; left:0; top:0; bottom:0; width:34%; background:#fff; border-radius:2px; }
.ru-seek span::after{ content:""; position:absolute; right:-3px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:#fff; }
.ru-nav{ position:absolute; left:0; right:0; bottom:6px; display:flex; justify-content:space-around; padding:0 5px; }
.ru-nav svg{ width:14px; height:14px; }
.ru-cap{ position:absolute; top:7px; right:8px; display:flex; align-items:center; gap:2px; font-size:9px; opacity:.9; }
.ru-cap svg{ width:8px; height:8px; fill:#fff; stroke:none; }

/* Habillage lecteur (téléphones paysage de droite) */
.player-ui{ position:absolute; inset:0; pointer-events:none; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.player-ui svg{ fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.pu-dot{ position:absolute; top:9px; left:50%; transform:translateX(-50%); width:7px; height:7px; border-radius:50%; background:#7fb2ff; }
.pu-rail{ position:absolute; left:7px; top:14px; bottom:20px; display:flex; flex-direction:column; gap:13px; align-items:center; }
.pu-rail svg{ width:15px; height:15px; }
.pu-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center;
  transition:opacity .3s; }
.pu-play svg{ width:16px; height:16px; fill:#fff; stroke:none; margin-left:2px; }
.phone.playing .pu-play{ opacity:0; }
.pu-seek{ position:absolute; left:28px; right:10px; bottom:9px; height:3px; background:rgba(255,255,255,.4); border-radius:2px; }
.pu-seek span{ position:absolute; left:0; top:0; bottom:0; width:16%; background:#fff; border-radius:2px; }
.pu-seek span::after{ content:""; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:#fff; }

.reels__text{
  font-family:var(--f-head); font-size:1.3rem; color:var(--ink-soft);
  font-style:italic; line-height:1.55; text-align:center; margin:2px 0;
}

/* ---------- Bloc final HOSTEA ---------- */
.closing{ background:var(--cream-2); padding:104px 0; text-align:center; }
.closing__logo{ width:210px; margin:0 auto 26px; }
.closing h2{ font-family:var(--f-title); letter-spacing:.3em; font-size:2rem; margin:0 0 30px; padding-left:.3em; }
.closing p{ max-width:760px; margin:0 auto 14px; color:var(--ink-soft); }
.closing .sign{ font-family:var(--f-display); font-style:italic; font-size:1.5rem; margin-top:26px; }

footer.site{
  background:var(--ink); color:#d8cdbc; text-align:center;
  padding:26px; font-family:var(--f-head); letter-spacing:.14em;
  text-transform:uppercase; font-size:.74rem;
}
footer.site a{ color:#e8dcc8; text-decoration:none; opacity:.8; }

/* ---------- Lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:100; display:none;
  background:rgba(24,21,17,.94); align-items:center; justify-content:center;
}
.lb.open{ display:flex; }
.lb img{ max-width:92vw; max-height:86vh; box-shadow:0 30px 80px -30px #000; }
.lb__cap{
  position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#f1e9db;
  font-family:var(--f-head); text-transform:uppercase; letter-spacing:.2em; font-size:.8rem;
}
.lb__close,.lb__nav{
  position:absolute; background:none; border:0; color:#fff; cursor:pointer;
  font-size:2.4rem; line-height:1; opacity:.8; padding:14px;
}
.lb__close{ top:14px; right:18px; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3rem; }
.lb__nav.prev{ left:10px; } .lb__nav.next{ right:10px; }
.lb__close:hover,.lb__nav:hover{ opacity:1; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  body{ font-size:18px; }
  .section-title{ font-size:2.1rem; }
  .about__grid{ grid-template-columns:1fr; gap:34px; }
  .about__photo{ aspect-ratio:4/3; max-width:420px; }
  .presta__grid{ grid-template-columns:1fr; gap:30px; max-width:460px; margin:0 auto; }
  .grid{ grid-auto-rows:230px; gap:20px; }
  .reels__layout{ grid-template-columns:1fr; gap:34px; }
  .reels__aside{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .reels__aside .reels__text{ flex:1 1 100%; order:-1; }
  .topbar nav{
    display:none; position:absolute; top:100%; right:14px; flex-direction:column;
    background:var(--cream-3); padding:16px 22px; gap:14px; box-shadow:var(--shadow); border-radius:4px;
  }
  .topbar nav.open{ display:flex; }
  .topbar nav a{ color:var(--ink-soft)!important; }
  .nav-toggle{ display:block; color:var(--white); font-size:1.6rem; }
  .topbar.scrolled .nav-toggle{ color:var(--ink); }
}
@media (max-width:640px){
  .grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:210px; gap:14px; }
  .shooting__title{ font-size:2.3rem; }
  .hero__sub{ letter-spacing:.4em; font-size:.82rem; }
  .reels__wall{ grid-template-columns:repeat(2,1fr); }
  .phone--feature{ width:150px; }
}