/* =========================================================
   GALERIE PHOTO — Feuille de style
   Palette imposée : vert #009952 · jaune #f8e423 · rouge #ec3237
   ========================================================= */

:root{
  --vert:#009952;
  --jaune:#f8e423;
  --rouge:#ec3237;

  --bg:#faf9f5;      /* blanc chaud */
  --ink:#1b1a17;     /* texte principal */
  --muted:#6f6d66;   /* texte secondaire */
  --line:#e8e5dc;    /* filets */
  --white:#ffffff;

  --radius:14px;
  --shadow:0 10px 30px rgba(27,26,23,.10);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
i[data-icon]{ display:inline-flex; }
i[data-icon] svg{ width:1em; height:1em; }

/* ---------- SLIDER ---------- */
.hero{ position:relative; }

.slider{
  position:relative;
  width:100%;
  height:42vh;
  min-height:230px;
  max-height:440px;
  overflow:hidden;
  background:#151412;
}
.slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
  transition:opacity 1s ease;
  will-change:opacity, transform;
}
.slide.active{
  opacity:1;
  animation:kenburns 8s ease-out forwards;
}
@keyframes kenburns{ from{ transform:scale(1.05); } to{ transform:scale(1.16); } }

/* dégradé bas pour fondre avec le blanc de l'identité */
.slider::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, var(--bg) 100%);
}

.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:3; width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,.32); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  backdrop-filter:blur(4px); transition:background .2s, transform .15s;
}
.slider-nav:active{ transform:translateY(-50%) scale(.9); }
.slider-nav.prev{ left:10px; }
.slider-nav.next{ right:10px; }

.slider-dots{
  position:absolute; bottom:44px; left:0; right:0; z-index:3;
  display:flex; gap:7px; justify-content:center;
}
.slider-dots button{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5);
  transition:all .3s;
}
.slider-dots button.on{ width:22px; border-radius:4px; background:var(--jaune); }

/* ---------- IDENTITÉ ---------- */
.identity{
  position:relative; z-index:4;
  text-align:center;
  margin-top:-56px;
  padding:0 22px 6px;
}
.logo-ring{
  width:108px; height:108px; margin:0 auto 16px;
  border-radius:50%;
  background:conic-gradient(var(--vert) 0 33.33%, var(--jaune) 0 66.66%, var(--rouge) 0);
  padding:4px;
  box-shadow:var(--shadow);
  animation:pop .7s cubic-bezier(.2,.9,.3,1.2) both;
}
.logo-inner{
  width:100%; height:100%; border-radius:50%;
  background:var(--white);
  padding:9px;
  display:flex; align-items:center; justify-content:center;
}
.logo-inner img{ width:100%; height:100%; object-fit:contain; }
.logo-fallback::after{ content:"🎓"; font-size:38px; }
@keyframes pop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }

.title{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600;
  font-size:clamp(27px, 7.5vw, 42px);
  line-height:1.06;
  letter-spacing:-.01em;
  color:var(--ink);
  animation:rise .7s .1s ease both;
}
.title-rule{
  display:block; width:66px; height:5px; margin:14px auto 0; border-radius:3px;
  background:linear-gradient(to right, var(--vert) 0 33.33%, var(--jaune) 33.33% 66.66%, var(--rouge) 66.66% 100%);
  animation:rise .7s .18s ease both;
}
.subtitle{
  margin-top:12px; color:var(--muted); font-size:15px;
  animation:rise .7s .24s ease both;
}
.date-pill{
  display:inline-flex; align-items:center; gap:7px;
  margin-top:16px; padding:8px 16px; border-radius:999px;
  background:rgba(0,153,82,.10); color:var(--vert);
  font-size:13px; font-weight:600;
  animation:rise .7s .3s ease both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

/* ---------- MOSAÏQUE ---------- */
.mosaic{
  display:flex; gap:10px;
  padding:26px 12px 42px;
  align-items:flex-start;
  max-width:1200px; margin:0 auto;
}
.mosaic .col{ flex:1; display:flex; flex-direction:column; gap:10px; min-width:0; }

.tile{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#eceae2;
  cursor:zoom-in;
  opacity:0; transform:translateY(16px);
  transition:opacity .55s ease, transform .55s ease;
}
.tile.in{ opacity:1; transform:none; }
.tile img{ width:100%; height:auto; transition:transform .5s ease; }
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.28), rgba(0,0,0,0) 40%);
  opacity:0; transition:opacity .3s;
}
.tile .dl{
  position:absolute; bottom:8px; right:8px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-size:16px;
  opacity:0; transform:translateY(6px);
  transition:opacity .25s, transform .25s, background .2s;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
@media (hover:hover){
  .tile:hover img{ transform:scale(1.05); }
  .tile:hover::after{ opacity:1; }
  .tile:hover .dl{ opacity:1; transform:none; }
  .tile .dl:hover{ background:var(--jaune); }
}
/* Sur mobile (pas de survol) : bouton toujours légèrement visible */
@media (hover:none){
  .tile .dl{ opacity:.9; transform:none; }
}

/* ---------- LOADER ---------- */
.loader{
  text-align:center; color:var(--muted); font-size:14px;
  padding:20px 0 60px; display:flex; align-items:center; justify-content:center; gap:10px;
}
.spin, .lb-spin{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid var(--line); border-top-color:var(--vert);
  animation:rot .8s linear infinite;
}
@keyframes rot{ to{ transform:rotate(360deg); } }

/* ---------- PIED DE PAGE ---------- */
.foot{ text-align:center; padding:10px 20px 46px; color:var(--muted); font-size:14px; }
.foot-rule{
  display:block; width:100%; max-width:120px; height:3px; margin:0 auto 20px; border-radius:2px;
  background:linear-gradient(to right, var(--vert) 0 33.33%, var(--jaune) 33.33% 66.66%, var(--rouge) 66.66% 100%);
}

/* ---------- LIGHTBOX ---------- */
.lb{
  position:fixed; inset:0; z-index:100;
  background:rgba(12,11,10,.96);
  display:none; flex-direction:column;
  touch-action:none;
  opacity:0; transition:opacity .25s ease;
}
.lb.open{ display:flex; opacity:1; }
.lb-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  color:#fff; z-index:2;
}
.lb-count{ font-size:14px; font-weight:600; letter-spacing:.02em; opacity:.85; }
.lb-btn{
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.lb-stage{
  flex:1; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:0 8px;
}
.lb-stage img{
  max-width:100%; max-height:100%;
  object-fit:contain; border-radius:6px;
  opacity:0; transition:opacity .3s ease;
  user-select:none; -webkit-user-drag:none;
}
.lb-stage img.ready{ opacity:1; }
.lb-spin{ position:absolute; }
.lb-spin.hide{ display:none; }

.lb-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  transition:transform .15s, background .2s;
}
.lb-arrow:active{ transform:translateY(-50%) scale(.9); }
.lb-prev{ left:12px; }
.lb-next{ right:12px; }

.lb-actions{
  display:flex; gap:12px; justify-content:center;
  padding:14px 16px calc(env(safe-area-inset-bottom) + 18px);
  z-index:2;
}
.lb-action{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:999px;
  font-size:15px; font-weight:600; text-decoration:none;
  background:#fff; color:var(--ink);
  transition:transform .15s, background .2s;
}
.lb-action:active{ transform:scale(.96); }
#lbShare{ background:var(--vert); color:#fff; }

/* Desktop : flèches plus discrètes, mosaïque plus dense */
@media (min-width:700px){
  .slider{ height:46vh; max-height:520px; }
  .lb-arrow{ width:52px; height:52px; }
}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.05ms !important; }
  .slide.active{ animation:none; transform:none; }
}