.impressions h2 {
  font-family: "Cormorant Garamond", "Playfair Display", serif !important;
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.3px;
}
.impressions {
  max-width: 650px;
  margin: 3rem auto;
  padding: 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  backdrop-filter: blur(4px);
}

.impressions h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #554a42;
  letter-spacing: 0.5px;
}

.impressions .intro {
  font-style: italic;
  color: #6a6058;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.impressions textarea {
  width: 100%;
  height: 160px;
  padding: 1rem;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 8px rgba(0,0,0,0.08);
  resize: vertical;
  font-size: 1rem;
  color: #4b413b;
}

.impressions button {
  margin-top: 1rem;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 12px;
  background: #7c8a97;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s, transform .2s;
}

.impressions button:hover {
  background: #6b7a86;
  transform: scale(1.04);
}
:root{
  --fond:#F7F3EF;
  --texte:#5A524A;
  --bleu:#6E8BA6;
  --bleu2:#4A5F7A;
  --line:rgba(0,0,0,.06)
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--fond);
  color:var(--texte);
  scroll-behavior:smooth
}
a{color:inherit}

/* HEADER */
header{
  text-align:center;
  padding:28px 20px;
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg,#F8F5F1 0%, #EFE8DF 40%, #E4D9CC 100%);
}
.brand{
  font-family:'Cormorant Garamond',serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  font-size:24px;
  color:#6E6A63;
  margin-top:8px
}
.nav{
  display:flex;
  justify-content:center;
  margin:8px 0 16px
}
.nav ul{
  list-style:none;
  display:flex;
  gap:18px;
  margin:0;
  padding:0;
  font-size:14px
}
.nav a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px
}
.nav a:hover{background:rgba(110,139,166,.12)}
.active{background:rgba(110,139,166,.14)}
.logo{
  width:140px;
  height:auto;
  display:block;
  margin:0 auto
}

.wrapper{
  max-width:960px;
  margin:0 auto;
  padding:40px 20px
}

.hero-title{
  font-family:'Cormorant Garamond',serif;
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:600;
  font-size:42px;
  text-align:center;
  margin:10px 0 20px;
  color:#6E6A63
}
.hero-text{
  font-size:18px;
  line-height:1.55;
  text-align:center;
  max-width:700px;
  margin:0 auto 24px
}

.cta{
  display:inline-block;
  background:var(--bleu);
  color:#fff;
  padding:12px 24px;
  border-radius:8px;
  text-decoration:none
}

.section{
  max-width:1120px;
  margin:0 auto;
  padding:26px 20px
}
.section h2{
  font-family:'Cormorant Garamond',serif;
  text-transform:uppercase;
  letter-spacing:.10em;
  font-weight:600;
  font-size:28px;
  text-align:center;
  margin:0 0 16px;
  color:#6E6A63
}

/* =========================
   Masonry – version propre
   ========================== */
.masonry{
  column-count:3;
  column-gap:2.2rem;
  margin:2.5rem auto 3.5rem;
  max-width:1120px;
}
.masonry .item{
  display:inline-block;
  width:100%;
  margin:0 0 2rem;
  break-inside:avoid;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.masonry .item a{
  display:block;
}
.masonry .item img{
  width:100%;
  display:block;
  height:auto;
}
.caption{
  padding:10px 12px 12px;
  font-size:14px;
  opacity:.85;
}

/* Immersive videos - grid of 2 */
.immersive-grid{
  max-width:1120px;
  margin:12px auto 28px;
  padding:0 20px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px
}
.immersive{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  background:#EDE7DF;
}
.immersive video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.poster{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:blur(2px) brightness(1.03);
  transform:scale(1.02);
  transition:opacity .3s ease;
  opacity:1;
}
.gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(247,243,239,0.55) 0%, rgba(238,231,222,0.3) 40%, rgba(228,217,204,0.3) 100%);
}
.play-btn{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:rgba(110,139,166,.92);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:12px 16px;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.2)
}
.sound-btn{
  position:absolute;
  right:12px;
  bottom:10px;
  background:rgba(0,0,0,.45);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:7px 9px;
  font-size:12px;
  cursor:pointer;
  display:none
}
.immersive.playing .poster{opacity:0;pointer-events:none}
.immersive.playing .sound-btn{display:block}

/* Footer */
footer{
  padding:28px 20px;
  color:#fff;
  background:linear-gradient(180deg,var(--bleu) 0%, var(--bleu2) 100%);
  text-align:center;
}
.footer-inner{
  max-width:960px;
  margin:0 auto;
  text-align:center;
  line-height:1.5;
  font-size:15px;
  opacity:.95
}

/* Music btn */
.music-btn{
  position:fixed;
  top:12px;
  right:12px;
  background:rgba(110,139,166,.15);
  border:1px solid rgba(110,139,166,.35);
  color:#2A2A2A;
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer
}
.music-btn[aria-pressed="true"]{background:rgba(110,139,166,.35)}

/* Responsive colonne pour masonry + vidéos */
@media(max-width:960px){
  .masonry{
    column-count:2;
    column-gap:1.6rem;
    margin:2rem 1.4rem 3rem;
  }
  .immersive-grid{
    grid-template-columns:1fr
  }
}
@media(max-width:560px){
  .masonry{
    column-count:1;
    column-gap:0;
    margin:1.6rem 1.2rem 2.8rem;
  }
  .hero-title{font-size:34px}
  .logo{width:100px}
}

/* Lightbox for photo zoom (V9/V10 fusion) */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:92vw;
  max-height:92vh;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  cursor:grab;
  transition:transform .1s linear
}
.lb-close{
  position:absolute;
  top:14px;
  right:16px;
  color:#fff;
  font-size:28px;
  cursor:pointer
}
.lb-help{
  position:absolute;
  bottom:14px;
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:13px;
  opacity:.85
}

/* V10 — Videobox compacte, carrée */
.videobox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:10000;
}
.videobox.open{display:flex;}
.videobox-inner{
  position:relative;
  width:min(72vmin, 640px);
}
.vb-frame{
  position:relative;
  aspect-ratio: 1 / 1;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.vb-frame video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: contain;
  background:#000;
}
.vb-close{
  position:absolute;
  top:10px;
  right:12px;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}
.vb-amb{
  position:absolute;
  bottom:10px;
  right:12px;
  background:rgba(0,0,0,.5);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  cursor:pointer;
}

/* Effet flottant subtil pour les galeries */
#galerie-ceramiques .item img,
#galerie-tableaux .item img,
#galerie-carreaux .item img,
#galerie-3d .item img,
#galerie-murales .item img{
  transition: transform .25s ease, box-shadow .25s ease;
  transform-origin: center;
}
#galerie-ceramiques .item:hover img,
#galerie-tableaux .item:hover img,
#galerie-carreaux .item:hover img,
#galerie-3d .item:hover img,
#galerie-murales .item:hover img{
  transform: translateY(-6px);
  box-shadow:
    0 1px 8px rgba(0,0,0,0.10),
    0 6px 16px rgba(0,0,0,0.12),
    0 12px 28px rgba(0,0,0,0.10);
}

/* Canvas 3D */
.masonry .item .canvas3d{
  display:block;
  background:#FAFAF8;
  border:1px solid rgba(0,0,0,.06);
  outline:1px solid rgba(255,255,255,.8);
  outline-offset:-4px;
  padding:6px;
  box-shadow:
    0 1px 1px rgba(0,0,0,.06),
    0 6px 14px rgba(0,0,0,.10),
    0 16px 30px rgba(0,0,0,.06);
  transform-origin:center;
  transition:transform .2s ease, box-shadow .2s ease;
  border-radius:4px;
}
.masonry .item:nth-child(odd) .canvas3d{
  transform: perspective(800px) rotateX(.6deg) rotateZ(.2deg);
}
.masonry .item:nth-child(even) .canvas3d{
  transform: perspective(800px) rotateX(.6deg) rotateZ(-.2deg);
}
.masonry .item .canvas3d:hover{
  transform: perspective(800px) rotateX(.3deg) translateY(-2px);
  box-shadow:
    0 2px 3px rgba(0,0,0,.06),
    0 10px 22px rgba(0,0,0,.12),
    0 26px 44px rgba(0,0,0,.08);
}

/* Légère lumière pour Carreaux */
.masonry img[src^="assets/img/carreaux/"]{
  filter: brightness(1.12) contrast(1.06);
}

/* Center and enlarge Murales images (si tu utilises .murales-center) */
.murales-center{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:24px;
}
.murales-center .item{
  flex:0 1 auto;
}
.murales-center .item img{
  width:auto;
  max-width:520px;
  height:auto;
  margin:auto;
  display:block;
}

/* Language switcher */
.lang-switch{text-align:center}
.lang-switch a{
  padding:2px 6px;
  border-radius:6px;
  text-decoration:none
}
.lang-switch a:hover{background:rgba(0,0,0,.06)}

/* About hero block */
.about-hero{
  position:relative;
  max-width:860px;
  margin:14px auto 0;
  padding:22px 20px;
  line-height:1.75;
  font-size:18px;
  font-style:italic;
  color:var(--texte);
  border-radius:16px;
  background: transparent;
  box-shadow:0 6px 20px rgba(0,0,0,.08)
}
.about-hero::before{
  content:"";
  position:absolute;
  inset:-24px;
  z-index:-1;
  background-image:var(--about-bg);
  background-size:cover;
  background-position:center;
  opacity:.18;
  filter:grayscale(.2);
  border-radius:22px
}
@media(max-width:560px){
  .about-hero{
    font-size:16px;
    padding:18px 16px
  }
}

/* Home hero block */
.home-hero{
  position:relative;
  max-width:860px;
  margin:14px auto 0;
  padding:22px 20px;
  line-height:1.75;
  font-size:18px;
  font-style:italic;
  color:var(--texte);
  border-radius:16px;
  background: transparent;
  box-shadow:0 6px 20px rgba(0,0,0,.08)
}
.home-hero::before{
  content:"";
  position:absolute;
  inset:-24px;
  z-index:-1;
  background-image:var(--home-bg);
  background-size:cover;
  background-position:center;
  opacity:.22;
  filter:grayscale(.15);
  border-radius:22px
}
@media(max-width:560px){
  .home-hero{
    font-size:16px;
    padding:18px 16px
  }
}

/* Contact CTA */
.contact-cta{
  max-width:720px;
  margin:18px auto 10px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px
}
.btn.big{
  display:block;
  text-align:center;
  font-size:18px;
  padding:14px 18px;
  border-radius:14px;
  text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  transition:transform .08s ease, box-shadow .2s ease
}
.btn.big:active{transform:translateY(1px)}
.btn.big.whatsapp{
  background:#25D366;
  color:#0b2e16
}
.btn.big.mail{
  background:linear-gradient(180deg,#6E8BA6 0%,#4A5F7A 100%);
  color:#fff
}

.socials{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:12px 0 6px
}
.socials .social{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,.10)
}
.socials .fb{background:#1877F2;color:#fff;font-weight:700}
.socials .x{background:#000;color:#fff;font-weight:900}
.socials .tt{background:#010101;color:#fff}
.socials .social span{
  font-size:20px;
  line-height:1
}

/* Instagram */
.socials .ig{
  background:radial-gradient(30% 45% at 30% 40%, #FFDC80 0%, #FCAF45 25%, #F56040 45%, #FD1D1D 60%, #E1306C 80%, #C13584 100%);
  color:#fff;
  font-weight:700
}

/* Adjustments v10-justify */
.about-hero, .home-hero{
  margin-left:auto;
  margin-right:auto;
  text-align:justify
}
.about-hero p, .home-hero p{margin:0}
.about-hero em, .home-hero em{
  display:block;
  font-style:italic
}
@supports (text-align-last:center){
  .about-hero, .home-hero{ text-align-last: center; }
}

/* contact center adjust */
.contact-info, .contact-cta, .socials{
  text-align:center;
  justify-content:center;
}
.contact-cta{
  max-width:480px;
  margin:auto;
}

/* Renforcement du texte Matière & geste */
.texte-ceramique {
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.28rem;
  font-weight: 300;
  line-height: 1.6;
  text-shadow: 0px 3px 12px rgba(0,0,0,0.55);
}
.feature-matiere .feature-text p {
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.55;
}
.feature-matiere .feature-text p em{
  color: #fff !important;
  font-style: italic;
  font-weight: 500;
  text-shadow:
    0 3px 14px rgba(0,0,0,.45),
    0 0 2px rgba(0,0,0,.65);
  -webkit-font-smoothing: antialiased;
}

/* --- Bouton Admin d'Andros, Dieu du Clavier (version finale bas droite) --- */
.btn-admin{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 90px;
  height: 90px;
  z-index: 9999;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 240, 0.22);
  backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(220, 190, 140, 0.25);
  transition: transform 0.25s ease,
              box-shadow 0.25s ease,
              background 0.25s ease;
}
.btn-admin img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:20px;
}
.btn-admin:hover{
  transform: translateY(-3px);
  box-shadow: 0 0 16px rgba(220, 190, 140, 0.4);
  background: rgba(255, 255, 240, 0.32);
}

/* Bouton admin contact (tête d'Andros) */
.btn-admin-contact{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 55%),
              radial-gradient(circle at 80% 90%, rgba(255,215,0,.40), transparent 60%),
              #242424;
  cursor: pointer;
  z-index: 999;
  border: 1px solid rgba(255,255,255,.25);
  transform: scale(.6) translateY(20px);
  opacity: 0;
  animation: admin-pop 0.8s ease-out 0.3s forwards;
}
.btn-admin-contact img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .3s ease, filter .3s ease;
  filter: saturate(1.05) contrast(1.05);
}
.btn-admin-contact:hover img{
  transform: scale(1.06) translateY(-3px);
  filter: saturate(1.12) contrast(1.08);
}
@keyframes admin-pop{
  0%{
    opacity:0;
    transform:scale(0.6) translateY(30px);
    box-shadow:0 0 0 rgba(0,0,0,0);
  }
  70%{
    opacity:1;
    transform:scale(1.02) translateY(0);
    box-shadow:0 12px 32px rgba(0,0,0,.55);
  }
  100%{
    opacity:1;
    transform:scale(1) translateY(0);
    box-shadow:0 10px 30px rgba(0,0,0,.45);
  }
}

/* ----- ADMIN : grille des médias + bouton poubelle ----- */
.admin-media-grid{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-top:20px;
}
.admin-media-item{
  position:relative;
  width:190px;
  border-radius:12px;
  overflow:hidden;
  background:#fdfdfb;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.admin-media-thumb{
  width:100%;
  height:150px;
  object-fit:cover;
  display:block;
}
.admin-media-caption{
  padding:6px 10px 8px;
  font-size:13px;
  text-align:center;
  color:#555;
  background:#f8f4f0;
}
.admin-delete-btn{
  position:absolute;
  top:6px;
  right:6px;
  border:none;
  border-radius:999px;
  padding:4px 8px;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  background:rgba(0,0,0,.55);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.admin-delete-btn:hover{
  background:#c0392b;
  transform:scale(1.08);
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.admin-media-badge{
  position:absolute;
  bottom:8px;
  right:8px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:14px;
  padding:4px 6px;
  border-radius:999px;
}

/* =========================
   Version mobile (≤ 768px)
   ========================= */
@media (max-width: 768px){

  /* Header plus compact */
  header{
    padding:18px 12px;
  }

  .logo{
    width:100px;
  }

  .brand{
    font-size:1.35rem;
  }

  .hero-text{
    font-size:0.95rem;
  }

  /* Menu du haut */
  .nav{
    margin:6px 0 10px;
  }

  .nav ul{
    flex-wrap:wrap;
    gap:10px;
  }

  .nav a{
    padding:6px 8px;
    font-size:0.85rem;
  }

  /* Contenu principal plus respirant */
  .wrapper,
  .section{
    padding:20px 12px;
  }

  .section h2{
    font-size:1.6rem;
    margin-bottom:1.2rem;
  }
}

/* Centrage du menu du haut sur mobile */
@media (max-width: 768px){
  nav ul{
    flex-wrap:wrap;
    justify-content:center !important;
    text-align:center;
  }
  nav ul li{
    width:auto;
    margin:6px 10px;
  }
}
/* Cacher les légendes sous les photos sur la page Céramiques */
body[data-page="ceramiques"] .caption {
  display: none;
}
.masonry .item .caption {
  margin-top: 6px;
  font-size: 12px;
  text-align: center;
  color: #444;
}
/* Afficher les codes AT* sous les céramiques */
.masonry .item .caption {
  display: block !important;
  margin-top: 6px;
  font-size: 13px;
  text-align: center;
  color: #5a5244;
}
.section a {
  color: #444;
  text-decoration: none;
}

.section a:hover {
  text-decoration: underline;
}
/* Titre principal des pages (H1) */
.page-title{
  font-family: "Cormorant Garamond", "Times New Roman", serif;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 40px auto 12px;
  color: #3f3b36; /* ou laisse la couleur par défaut si tu veux */
}
/* ==== FLECHES DE NAVIGATION — VERSION PAPOU XXL ==== */

.lightbox-next,
.lightbox-prev,
.lb-next,
.lb-prev,
.gallery-next,
.gallery-prev,
.viewer-next,
.viewer-prev {
  font-size: 2.6rem !important;        /* la flèche elle-même */
  width: 54px !important;              /* zone cliquable */
  height: 54px !important;
  padding: 12px 0 !important;
  line-height: 1 !important;
  background: rgba(255, 255, 255, 0.22) !important;
  border-radius: 12px !important;
  color: #fff !important;
  backdrop-filter: blur(4px) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.2s ease, transform 0.15s ease;
}

/* Survol (PC) */
.lightbox-next:hover,
.lightbox-prev:hover,
.lb-next:hover,
.lb-prev:hover,
.gallery-next:hover,
.gallery-prev:hover,
.viewer-next:hover,
.viewer-prev:hover {
  background: rgba(255, 255, 255, 0.38) !important;
  transform: scale(1.08);
}

/* Repositionnement léger */
.lightbox-prev,
.lb-prev,
.gallery-prev,
.viewer-prev {
  left: 12px !important;
}

.lightbox-next,
.lb-next,
.gallery-next,
.viewer-next {
  right: 12px !important;
}
/* ==== FLECHES RONDES PREMIUM POUR PAPOU ==== */

.viewer-next,
.viewer-prev,
.lightbox-next,
.lightbox-prev {
  width: 52px !important;
  height: 52px !important;
  font-size: 26px !important;
  line-height: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.20) !important;
  backdrop-filter: blur(6px) !important;

  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.20),
    inset 0 0 10px rgba(255,255,255,0.15);

  cursor: pointer !important;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.viewer-next:hover,
.viewer-prev:hover,
.lightbox-next:hover,
.lightbox-prev:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: scale(1.10);
  box-shadow:
    0 6px 18px rgba(0,0,0,0.28),
    inset 0 0 14px rgba(255,255,255,0.25);
}
/* ==== FLECHES DOREES "GALERIE D'ART" POUR PAPOU ==== */

.viewer-next,
.viewer-prev,
.lightbox-next,
.lightbox-prev {
  width: 54px !important;
  height: 54px !important;
  font-size: 26px !important;
  line-height: 1 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;
  border: 1px solid rgba(218, 176, 92, 0.95) !important; /* or fin doré */
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.32), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(218,176,92,0.55), transparent 60%),
    rgba(25, 20, 10, 0.88) !important;  /* fond sombre chic */

  color: #FCEFD2 !important;  /* flèche ivoire doré */
  box-shadow:
    0 6px 18px rgba(0,0,0,0.45),
    0 0 12px rgba(218,176,92,0.55);
  backdrop-filter: blur(5px) !important;

  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease;
}

/* Hover (PC) */
.viewer-next:hover,
.viewer-prev:hover,
.lightbox-next:hover,
.lightbox-prev:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.55),
    0 0 16px rgba(245,210,120,0.75);
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.45), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(235,195,112,0.85), transparent 60%),
    rgba(20, 15, 8, 0.96) !important;
}

/* Position douce sur les côtés */
.viewer-prev,
.lightbox-prev {
  left: 14px !important;
}

.viewer-next,
.lightbox-next {
  right: 14px !important;
}
.impressions {
  max-width: 650px;
  margin: 3rem auto 0;
  padding: 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.impressions h2 {
  font-family: "Cormorant Garamond", "Playfair Display", serif !important;
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.3px;
  margin-bottom: 0.8rem;
  color: #554a42;
}

.impressions .intro {
  font-family: "Cormorant Garamond", "Playfair Display", serif !important;
  font-size: 1.05rem;
  color: #6a6058;
  margin-bottom: 1.8rem;
  line-height: 1.6;
  font-style: italic;
}

.impressions textarea {
  width: 100%;
  height: 160px;
  padding: 1rem;
  border: none;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 8px rgba(0,0,0,0.06);
  resize: vertical;
  font-size: 1rem;
  color: #4b413b;
}

.impressions button {
  margin-top: 1rem;
  padding: 0.8rem 1.6rem;
  border: none;
  border-radius: 12px;
  background: #7c8a97;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: background .25s, transform .2s, box-shadow .2s;
}

.impressions button:hover {
  background: #6b7a86;
  transform: scale(1.04);
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}