/* --- HOME: show hero image band --- */
body[data-page="index"] .home-hero{ position:relative; }


/* HOME hero image — tuned: smaller, higher, not cropped */
body[data-page="index"] .home-hero{ position:relative; }


/* --- APROPOS: masked B/W background behind text --- */
body[data-page="apropos"] .section{ position:relative; overflow:hidden; isolation:isolate; }
body[data-page="apropos"] .section::before{
  content:""; position:absolute; inset:0;
  background:url('../img/apropos/bg.jpg') left center / cover no-repeat;
  filter:grayscale(100%) contrast(1.05);
  opacity:.38; z-index:-1;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 0 70%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 0 70%, rgba(0,0,0,0) 100%);
}
@media (max-width:640px){ body[data-page="apropos"] .section::before{ opacity:.32 } }


/* HOME hero — portrait choice: centered, contain, show more top (30%), subtle */
body[data-page="index"] .home-hero{ position:relative; }



/* === HOME — bande image sépia derrière la citation === */
body[data-page="index"] .home-hero{ 
  position: relative; 
  max-width: 1100px;
}

/* Image sépia douce, large, qui remonte sous le bouton */

/* Renforcer légèrement le contraste du texte pour la lisibilité */
body[data-page="index"] .home-hero em{
  color: rgba(40,36,32,.92);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
@media (max-width: 600px){
  
}


/* Give the hero some top padding so the image band reaches the button */
body[data-page="index"] .wrapper { padding-top: 18px; }


/* === HOME — Version sans image de fond === */
body[data-page="index"] .home-hero{
  max-width: 980px;
  margin: 18px auto 28px;
  padding: 8px 6px;
}
/* stronger readable quote, no card */
body[data-page="index"] .home-hero em{
  color: #4f463e;
  text-shadow: none;
}
/* subtle divider line above the quote */
body[data-page="index"] .home-hero::after{
  content:"";
  display:block;
  height:1px;
  margin: 18px auto 0;
  width:min(680px, 72vw);
  background: linear-gradient(90deg, rgba(0,0,0,0), rgba(90,82,74,.25), rgba(0,0,0,0));
}



/* === Brand ornament removal (the little circle next to the logotype) === */
header .brand::after,
header .brand::before { content: none !important; display: none !important; }
header .brand + .ornament,
header .brand .ornament { display: none !important; visibility: hidden !important; }

/* === Home feature: Matière & Geste === */
.feature-matiere{
  margin: 40px auto 64px;
  padding: 12px 0;
}
.feature-matiere .feature-wrap{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* Image avec bords fantômes (dégradé doux) */
.feature-matiere .feature-visual{
  margin: 0; position: relative; overflow: hidden; border-radius: 22px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
.feature-matiere .feature-visual img{
  width: 100%; height: auto; display: block;
  filter: contrast(1.05) saturate(1.05);
}

/* Texte */
.feature-matiere .feature-text h3{
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing: .04em;
  margin: 0 0 8px;
}
.feature-matiere .feature-text p{
  color: #4e473f;
  line-height: 1.55;
  margin: 0 0 14px;
}
.feature-matiere .btn{
  background: #6c8298;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  display: inline-block;
  text-decoration: none;
}

/* Mobile */
@media (max-width: 860px){
  .feature-matiere .feature-wrap{ grid-template-columns: 1fr; gap: 18px; }
  .feature-matiere .feature-visual{ order: 1; }
  .feature-matiere .feature-text{ order: 2; }
}

/* Espace avant le footer */
footer {
  margin-top: 120px;
  padding-top: 30px;
}

/* Centrage et respiration */
footer p {
  margin: 4px 0;
  line-height: 1.4;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer {
  margin-top: auto;
}
/* Crédit : lisible sur le fond beige */
footer .site-credits {
  color: #4a6272; /* bleu gris profond, doux */
  opacity: 0.95;
}
/* ————— Feature : Matière & Geste ————— */
.feature-matiere{ 
  margin: 40px auto 64px;
  padding: 12px 0;
}
.feature-matiere .feature-wrap{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items:center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}
.feature-matiere .feature-visual{
  margin:0; position:relative; overflow:hidden;
  border-radius: 22px;
  /* bords fantôme doux */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 74%, rgba(0,0,0,0) 100%);
}
.feature-matiere .feature-visual img{
  width:100%; height:auto; display:block;
  filter: contrast(1.05) saturate(1.05);
}
.feature-matiere .feature-text h3{
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(22px, 3.2vw, 34px);
  letter-spacing:.04em;
  margin: 0 0 10px;
}
.feature-matiere .feature-text p{
  color:#fff;                 /* lisible, en blanc */
  font-size: clamp(16px, 2.1vw, 20px);
  line-height: 1.6;
  text-shadow: 0 1px 8px rgba(0,0,0,.35); /* contraste doux sur fond bleu */
  margin: 0 0 14px;
}
.feature-matiere .btn{
  background: #6c8298;
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  text-decoration:none;
}

/* Réactivité */
@media (max-width: 860px){
  .feature-matiere .feature-wrap{ grid-template-columns: 1fr; gap: 18px; }
  .feature-matiere .feature-visual{ order:1; }
  .feature-matiere .feature-text{ order:2; }
}

/* ————— Footer unique, lisible sur le beige ————— */
.footer{
  margin: 48px auto 18px;
  text-align:center;
}
.footer-text{
  color:#3a5972;               /* bleu lisible sur le beige */
  font-size: 14px;
  line-height: 1.5;
}

/* Masque d’éventuels anciens crédits injectés ailleurs */
.footer-inner{ display:none !important; }
/* Footer pleine largeur + texte blanc */
footer.footer {
  background: #6c8298;
  width: 100%;
  padding: 28px 0;
  text-align: center;
  margin-top: 60px;
}

.footer-text {
  color: #ffffff !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}
/* ---- Section Matière & Geste : texte bleu avec ombre douce ---- */
.feature-matiere .feature-text p {
  color: #50677A; /* Bleu du site */
  text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.25); /* Ombre lisible */
  font-weight: 400;
}
/* === Ajustements CONTACT === */

/* Bouton WhatsApp adouci */
.btn-whatsapp {
  background-color: #77bfa3; /* vert minéral, plus doux */
  color: #fff;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}
.btn-whatsapp:hover {
  background-color: #5aa98b;
  transform: translateY(-2px);
}

/* Option : texture douce sur la section contact */
.contact-section {
  background-image: url("images/textures/poussiere_argile.png"); /* à créer ou choisir */
  background-repeat: repeat;
  background-size: 400px;
  background-blend-mode: multiply;
  opacity: 0.98;
}
/* --- Contact : adoucir le bouton WhatsApp, quoi qu'il arrive --- */
body[data-page="contact"] a[href*="wa.me"],
body[data-page="contact"] a[href*="whatsapp"],
body[data-page="contact"] .btn-whatsapp {
  background-image: none !important;
  background-color: #77bfa3 !important;   /* vert minéral, plus doux */
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  transition: transform .2s ease, background-color .2s ease !important;
}
body[data-page="contact"] a[href*="wa.me"]:hover,
body[data-page="contact"] a[href*="whatsapp"]:hover,
body[data-page="contact"] .btn-whatsapp:hover {
  background-color: #5aa98b !important;
  transform: translateY(-2px);
}

/* (Option) matière très légère sur la page Contact entière */
body[data-page="contact"] {
  background-image: url("assets/img/textures/poussiere_argile.png"); /* mets ta texture ici si tu veux */
  background-size: 380px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}
/* CONTACT : C18 en fond + voile léger pour la lisibilité */
body[data-page="contact"] .contact-section,
body[data-page="contact"] main,
body[data-page="contact"] .page {
  position: relative;
  background: none !important;
}

body[data-page="contact"] .contact-section::before,
body[data-page="contact"] main::before,
body[data-page="contact"] .page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/img/ceramique/C4.webp"); /* Création 18 */
  background-size: cover;
  background-position: center;
  background-attachment: scroll; /* mets fixed si tu veux un léger effet parallax */
  filter: none;
  opacity: 0.35; /* 0.35-0.55 selon ta préférence */
}

/* Remet le contenu au-dessus de l'image */
body[data-page="contact"] .contact-section > *,
body[data-page="contact"] main > *,
body[data-page="contact"] .page > * {
  position: relative;
  z-index: 1;
}
/* --- FOND MATÉRIEL : Photo C18 derrière la section Contact --- */
body[data-page="contact"] main {
  position: relative;
  background: none !important;
  overflow: hidden;
}

/* Image en fond avec opacité douce */
body[data-page="contact"] main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("assets/img/ceramique/C4.webp"); /* Création 18 */
  background-size: cover;
  background-position: center;
  opacity: 0.35; /* Ajuste entre 0.25 et 0.5 selon ton goût */
  filter: saturate(80%) contrast(95%);
}

/* Contenu par-dessus */
body[data-page="contact"] main > * {
  position: relative;
  z-index: 1;
}

/* Option : léger fond flouté sous les boutons pour la lisibilité */
body[data-page="contact"] .contact-section,
body[data-page="contact"] .contact-container {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 1rem 1.5rem;
}
/* === CONTACT : photo C18 en fond global, inratable === */

/* 1) On neutralise tout fond uni posé ailleurs */
body[data-page="contact"],
body[data-page="contact"] main,
body[data-page="contact"] .page,
body[data-page="contact"] .contact-section {
  background: transparent !important;
}

/* 2) Fond photo fixé sur tout l'écran (via <html> et <body>) */
html::before,
body[data-page="contact"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1; /* derrière tout */
  background-image: url("assets/img/ceramique/C4.webp"); /* Création 18 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.35;                   /* ajuste 0.25–0.5 selon goût */
  filter: saturate(85%) contrast(95%);
}

/* 3) Si un conteneur met un fond par-dessus, on le rend translucide et lisible */
body[data-page="contact"] .contact-section,
body[data-page="contact"] .contact-container {
  background: rgba(255,255,255,0.30) !important; /* léger voile */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
/* CONTACT : fond photo Création 18 (C4.webp) */
body[data-page="contact"] {
  background:
    linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.20)),
    url("../img/ceramique/C4.webp") center/cover no-repeat fixed !important;
  /* si ton dossier s'appelle 'ceramiques', dé-commente la ligne suivante et commente la précédente */
  /* background: linear-gradient(rgba(255,255,255,0.20), rgba(255,255,255,0.20)), url("../img/ceramiques/C4.webp") center/cover no-repeat fixed !important; */
}

/* Petit voile pour garder le texte lisible */
body[data-page="contact"] main,
body[data-page="contact"] .contact-section,
body[data-page="contact"] .page {
  background: transparent !important;
}
/* adoucir l'image de fond sur la page contact */
body[data-page="contact"]::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.5); /* augmente à 0.6 ou 0.7 si tu veux plus doux */
  backdrop-filter: blur(4px);            /* floute très légèrement le fond */
  z-index: -1;
}

/* Afficher les codes AT* sous les céramiques */
#galleryCeramiques figcaption.caption {
  display: block !important;
  text-align: center;
  margin-top: 6px;
  font-size: 0.9rem;
  opacity: 0.8;
}
/* Afficher les captions sous les céramiques */
.gallery .caption {
    display: block !important;
    font-size: 14px;
    color: var(--texte);
    text-align: center;
    margin-top: 6px;
    opacity: 1 !important;
}/* Harmonisation des H1 — titres principaux de page */
.page-title {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: 2.6rem;          /* ajuste si tu veux plus grand */
  letter-spacing: 0.06em;     /* élégance */
  text-transform: none;       /* laisse comme dans le texte */
  text-align: center;
  color: var(--texte, #3f3b36);
  margin-bottom: 12px;
}

.section-label {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 14px;
  margin: 40px 0 6px;
}

.page-title {
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.3;
  margin: 0 0 18px;
}
.footer-logo {
  text-align: center;
  margin: 24px 0 10px;
}

.footer-logo img {
  max-width: 170px;
  width: 40%;
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25));
}
/* ==== PAPOU LIGHTBOX — FLECHES DOREES GALERIE D'ART ==== */

.lightbox-prev,
.lightbox-next {
  top: 50% !important;
  transform: translateY(-50%) !important;

  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: 999px !important;

  /* Anneau doré */
  border: 2px solid rgba(230, 190, 110, 0.96) !important;

  /* Centre sombre transparent */
  background: rgba(20, 14, 8, 0.78) !important;

  /* Flèche ivoire dorée */
  color: #FBE9BD !important;

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 8px 22px rgba(0,0,0,0.70),
    0 0 18px rgba(240, 205, 120, 0.80) !important;

  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;

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

/* Position latérale douce */
.lightbox-prev {
  left: 16px !important;
}
.lightbox-next {
  right: 16px !important;
}

/* Hover (PC) : bijou qui s'allume */
@media (hover:hover) {
  .lightbox-prev:hover,
  .lightbox-next:hover {
    transform: translateY(-50%) scale(1.07) !important;
    background: rgba(28, 20, 10, 0.92) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.40),
      0 10px 26px rgba(0,0,0,0.80),
      0 0 22px rgba(245, 210, 130, 0.95) !important;
  }
}
/* ===== STYLE DORÉ GALERIE POUR VIEWER-PREV ET VIEWER-NEXT ===== */

.viewer-prev,
.viewer-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 52px !important;
  height: 52px !important;

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

  font-size: 26px !important;
  line-height: 1 !important;

  border-radius: 50% !important;

  /* Anneau doré */
  border: 2px solid rgba(230, 190, 110, 0.96) !important;

  /* Centre sombre élégant */
  background: rgba(20, 14, 8, 0.80) !important;

  /* Flèche dorée */
  color: #FBE9BD !important;

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 8px 20px rgba(0,0,0,0.65),
    0 0 14px rgba(240, 205, 120, 0.75) !important;

  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;

  cursor: pointer !important;
  transition: .2s ease;
}

.viewer-prev { left: 14px !important; }
.viewer-next { right: 14px !important; }

.viewer-prev:hover,
.viewer-next:hover {
  transform: translateY(-50%) scale(1.08) !important;
  background: rgba(28, 20, 10, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.30),
    0 10px 26px rgba(0,0,0,0.75),
    0 0 20px rgba(245, 210, 130, 0.95) !important;
}
/* ==== FLECHES DOREES POUR MODAL VIEWER (LA BONNE VERSION !) ==== */

.modal-prev,
.modal-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 52px !important;
  height: 52px !important;

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

  font-size: 26px !important;
  line-height: 1 !important;

  border-radius: 50% !important;

  border: 2px solid rgba(230, 190, 110, 0.96) !important;
  background: rgba(20, 14, 8, 0.78) !important;

  color: #FBE9BD !important;

  box-shadow:
    0 0 0 1px rgba(0,0,0,0.45),
    0 8px 20px rgba(0,0,0,0.65),
    0 0 14px rgba(240, 205, 120, 0.75) !important;

  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;

  cursor: pointer !important;
  transition: .2s ease;
}

.modal-prev { left: 14px !important; }
.modal-next { right: 14px !important; }

.modal-prev:hover,
.modal-next:hover {
  transform: translateY(-50%) scale(1.08) !important;
  background: rgba(28, 20, 10, 0.92) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.30),
    0 10px 26px rgba(0,0,0,0.75),
    0 0 20px rgba(245, 210, 130, 0.95) !important;
}