/* =========================================================
   Thème Noir & Or — Style global (sans dégradés)
   ========================================================= */
:root{
  /* Couleurs */
  --gold: #D4AF37;         /* or principal */
  --gold-10: #D4AF3714;    /* or pâle (fonds légers) */

  --bg: #0C0C0C;           /* fond page */
  --surface: #121212;      /* cartes / blocs */
  --surface-2: #161616;    /* variante */
  --line: #1F1F1F;         /* bordures */

  --ink: #F5F5F5;          /* texte principal */
  --ink-dim: #D8D8D8;      /* texte secondaire */
  --muted: #9B9B9B;        /* texte atténué */

  --shadow: 0 10px 28px rgba(0,0,0,.5);
  --radius: 18px;
}

/* =========================================================
   Reset & bases
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body{
  font-family: 'Raleway', system-ui, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
}

/* Liens */
a { color: var(--gold); text-decoration: none; }
a:hover { color: #fff; }

/* Médias */
img, video, canvas { max-width: 100%; height: auto; display: block; }

/* Titres */
h1,h2,h3,h4 { margin: 0 0 .5rem 0; line-height: 1.25; }

/* Utilitaires */
.card{
  background: var(--surface);
  color: var(--ink-dim);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.card h4 { color: var(--ink); }

/* Focus accessible */
:focus-visible{
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* =========================================================
   Navigation (centrée, sans débordement)
   ========================================================= */
.nav{
  height: 180px;
  width: 100%;
  background: #0E0E0E; /* uni */
  position: relative;
  border-bottom: 1px solid var(--line);
}
.nav-logo{
  display: block;
  margin-left: 12px;
  background: #fff;              /* pastille blanche = logo visible */
  padding: 6px 10px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
}

/* Liens nav centrés proprement */
.nav > .nav-links{
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 36px;
  font-size: 15px;
  white-space: nowrap;
}
.nav > .nav-links > a{
  color: var(--ink);
  opacity: .9;
  position: relative;
  padding: 8px 2px;
  transition: color .25s ease, opacity .25s ease;
}
.nav > .nav-links > a:hover{ color:#fff; opacity:1; }
.nav > .nav-links > a::after{
  content:"";
  position:absolute; left:4px; right:4px; bottom:-6px; height:3px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav > .nav-links > a:hover::after{ transform: scaleX(1); }

/* Burger */
.nav > #nav-check{ display:none; }
.nav > .nav-btn{ display:none; }

/* Responsive nav (menu déroulant) */
@media (max-width: 1311px){
  .nav > .nav-btn{
    display:inline-block; position:absolute; right:0; top:0;
  }
  .nav > .nav-btn > label{
    display:inline-block; width:50px; height:50px; padding:13px; cursor:pointer;
    color: var(--ink);
  }
  .nav > .nav-btn > label:hover,
  .nav #nav-check:checked ~ .nav-btn > label{ background: rgba(255,255,255,.05); }
  .nav > .nav-btn > label > span{
    display:block; width:25px; height:10px; border-top:2px solid var(--ink);
  }

  .nav > .nav-links{
    position:absolute; left:0; top:180px; transform: none;
    width: 100%;
    display: block;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 0 12px;
    transition: all .3s ease-in;
    overflow-y: hidden;
  }
  .nav > .nav-links > a{
    display:block; width:100%; padding:14px 10px;
  }
  .nav > #nav-check:not(:checked) ~ .nav-links{ height: 0; padding: 0 12px; }
  .nav > #nav-check:checked ~ .nav-links{ height: calc(50vh - 50px); overflow-y: auto; z-index: 1; }
}

/* =========================================================
   Sections / Hero
   ========================================================= */
.apropos{
  text-align: center;
  background: var(--surface); /* uni */
  min-height: 560px;
  display: grid; place-items: center;
  padding: 30px 16px;
}
.image{
  height: 200px; margin-top: 30px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}
img.image.in-view {
    border-radius: 50%;
}
.apropos h1{
  margin:0; padding-top:20px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink);
}
.apropos h2{ margin:.25rem 0; color: var(--ink-dim); }
.apropos p{ color: var(--ink-dim); }
.apropos p span{ font-weight:700; color: var(--gold); }

#Expertise h2, #tarif h2, .galleryh2, #rdv h2{
  text-transform: uppercase; text-align: center; color: var(--gold);
}
#Expertise h2{ font-size: 250%; margin-top: 5%; }
#Expertise p{
  text-align: center; margin: 5% 10%;
  line-height: 2.1rem; font-size: 120%; color: var(--muted);
}

/* =========================================================
   Tarifs
   ========================================================= */
#tarif{ text-align:center; margin-bottom:5%; }
#tarif h2{ font-size: 250%; }
#tarif h3{ font-size: 150%; color: var(--ink); }

.displaytp, .displaytp1{
  display: flex; justify-content: center; align-items: center; gap: 24px;
}

.tariful{
  background: var(--surface);
  width: 50%; margin: auto;
  border-radius: 25px; padding: 14px 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold);   /* or bien visible */
  color: var(--ink-dim);
}
.tariful p strong, .tariful p b{ color: var(--ink); }

.img{
  width: 230px; height: 290px; object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold);
}
.tilt{ transition: transform .3s ease, box-shadow .3s ease; transform-style: preserve-3d; }
.tilt:hover{ transform: translateY(-6px) rotateX(3deg) rotateY(-2deg); box-shadow: 0 18px 36px rgba(0,0,0,.6); }

@media (max-width: 700px){
  .tariful{ width: 85%; }
  .displaytp{ display:block; }
  .displaytp1{ flex-direction: column-reverse; }
}

/* =========================================================
   Galerie
   ========================================================= */
.galleryh2{ font-size: 250%; margin-top: 120px; }
#gallery{
  display: flex; flex-wrap: wrap; /* wrap pour éviter l’overflow */
  padding: 2px; justify-content: center; margin-top: 80px; gap: 20px; max-width: 100%;
}
.gallery__column{ margin: 0 2%; flex: 1 1 300px; min-width: 260px; }

.gallery__thumb, .gallery__thumb1, .gallery__thumb2{
  position: relative; overflow: hidden; border-radius: 16px; /* contient le zoom */
}
.gallery__image{
  width: 100%; border-radius: 16px; box-shadow: var(--shadow);
  border: 1px solid var(--gold);
}
.hover-zoom{ transition: transform .5s cubic-bezier(.2,.65,.2,1), box-shadow .4s ease; will-change: transform; }
.hover-zoom:hover{ transform: scale(1.06) translateZ(0); box-shadow: 0 22px 48px rgba(0,0,0,.6); }

.gallery__caption{
  position:absolute; inset:auto 0 0 0; padding:25px 15px 15px; width:100%;
  font-size:16px; color:#fff; opacity:0;
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 100%);
  transition: opacity .3s ease;
}
.gallery__thumb:hover .gallery__caption,
.gallery__thumb1:hover .gallery__caption,
.gallery__thumb2:hover .gallery__caption{ opacity:1; }

@media (max-width: 1365px){
  .gallery__column{ margin:auto; }
  .gallery__thumb1{ display:none; }
}
@media (max-width: 846px){
  .gallery__thumb1, .gallery__thumb2{ display:none; }
}

/* =========================================================
   RDV / Paiement
   ========================================================= */
#rdv{ text-align: center; margin: 0 10%; }
#rdv h2{ font-size: 250%; margin-top: 120px; }

.rdv1{
  background: var(--surface);
  min-height: 130px; border-radius: 25px; padding: 10px;
  display: flex; justify-content: center; margin-top: 30px;
  box-shadow: var(--shadow);
  border: 1px solid var(--gold);
  color: var(--ink-dim);
}
.rdv1 a{ color: var(--gold); }
.rdv1 a:hover{ color: #fff; }

.Paiement img{
  display: inline-flex;
  background: #fff;             /* plaque blanche = visible */
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  border: 1px solid #fff;
}
.Paiement1{ height:150px; width:150px; }
.Paiement2{ height:100px; width:150px; margin-bottom:35px; }

/* =========================================================
   Footer
   ========================================================= */
.footflex{
  display: flex;
  margin-top: 120px;
  background: var(--surface);
  text-align: center; justify-content: space-around; gap: 16px; padding: 18px;
  border-top: 1px solid var(--line);
}
@media (max-width: 680px){
  .footflex{ display: block; }
}

.Copyright{
  background: #0E0E0E;
  color: var(--ink-dim);
  text-align: center; height: 50px; display: flex; justify-content: center; align-items: center;
  border-top: 1px solid var(--line);
}

/* =========================================================
   Animations (tes variantes)
   ========================================================= */
[data-animate]{ opacity:0; transform: translateY(10px); }
.in-view{
  opacity:1; transform:none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.2,1);
}

/* Variants */
[data-animate="clip"]{ clip-path: inset(0 0 100% 0); transform: none; }
.in-view[data-animate="clip"]{ clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.22,.61,.36,1); }

[data-animate="skew"]{ transform: skewY(6deg); }
.in-view[data-animate="skew"]{ transform: skewY(0); }

[data-animate="slide-up"]{ transform: translateY(24px); }
[data-animate="slide-right"]{ transform: translateX(-32px); }
[data-animate="slide-left"]{ transform: translateX(32px); }

[data-animate="fade"]{ transform:none; }
.in-view[data-animate="fade"]{ transition: opacity .8s ease; }

[data-animate="pop"]{ transform: scale(.94); }
.in-view[data-animate="pop"]{ transform: scale(1); transition: transform .35s ease, opacity .4s ease;  }

/* Stagger */
[data-stagger] > *{ transition-delay: calc(var(--stagger, 0) * 90ms); }

/* Réduction animations */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  [data-animate]{ opacity: 1 !important; transform: none !important; clip-path: none !important; }
}