/* =========================================================
   THEME / VARIABLES
========================================================= */
:root{
  --bronze:  #928573;
  --bronze1: #D9975F;
  --dark:    #1C1B1A;

  --pale:   #DEE0DA;
  --pale-1: #dcdad6;
  --navbar: rgba(176, 122, 58, 0.8);

  --bg:     #3a3834;
  --footer: #928573;

  --text:  #3a3834;
  --muted: rgba(244,240,234,.72);

  --radius: 18px;
  --headerH: 72px;
  --padX: clamp(20px, 4vw, 80px);
}
.bg-bronze{
  background-color: var(--pale);
}
.dark{
  color: var(--bg);
}
.bronze1{
color: var(--bronze1);
}
.bg-pale-1{
  background: var(--pale-1);

}
/* =========================================================
   RESET / BASE
========================================================= */
*{ box-sizing:border-box; }

/* DEBUG (à activer si besoin) */
/*
 *{ outline:1px solid red !important; }*/


html, body{
  margin:0;
  padding:0;
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:"Mona Sans", sans-serif;
}

body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
body.is-locked{
  position: fixed;
  width: 100%;
  overflow-y: scroll; /* garde la largeur identique (sinon layout shift) */
}


/* iOS : supprime le flash gris au tap */
a, button, input, textarea, label, select{
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a{
  color:inherit;
  text-decoration:none;
}

img.responsive{
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
}

/* scroll lock (menu mobile) */
html.no-scroll,
body.no-scroll{
  overflow:hidden;
  height:100%;
}
body.no-scroll{
  touch-action:none;
  overscroll-behavior:none;
}
@media (max-width: 668px){
  main{ padding-top: 50px; }
}


/* =========================================================
   TYPOGRAPHY
========================================================= */
h1{
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(40px, 4vw, 50px);
  font-weight: 100;
  margin:0;
  color: var(--footer);
  text-align:left;
  line-height:1.2;
  text-align: right;
}

@media (max-width: 900px){
  h1{
    text-align: left;
  }
}

#main h1, main h1, #galerie h1{
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(40px, 4vw, 50px);
  font-weight: 100;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing:3px;
  margin:30px 0 ;
  text-align: center;
}

h2{
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(25px, 4vw, 45px);
  font-weight: 100;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: clamp(0.05em, 1vw, 0.55em);
  margin:30px 0;
}

#main h2{
  font-size: clamp(25px, 3vw, 30px);
  letter-spacing: 0;
  margin:30px 0;
  text-align: center;
}

h3{
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(17px, 1.2vw, 20px);
  color: var(--bronze1);
  font-weight:100;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  padding: 0;
}

@media (max-width: 668px){
  h3{
    font-size:22px;
  }
}

.galerie :is(h3){
  text-align: left;
  margin-bottom: 15px;
}

p{
  font-family: "Spectral", serif;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight:100;
  color: var(--pale);
  text-align:left;
  line-height:1.6;
  margin:0;
}



.bg-pale-1 p{
  color:var(--text);
  font-family: "Spectral", serif;
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 20px);
}

p + p{ margin-top:.75em; }


:is(footer) a{
  text-decoration: underline;
  transition: all .15s ease;
}
:is(footer) a:hover{
  text-decoration: underline;
}

/* =========================================================
   UTILITIES / LAYOUT
========================================================= */
main{
  flex: 1 0 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.container{
  margin:0 auto;
}


.spacer{
  margin-block: clamp(35px, 6vw, 60px);
}

.bronze1{ color: var(--bronze1); }

#suite{
  scroll-margin-top: calc(var(--headerH));
}
#disclaimer {
  max-width: 1300px;
  margin: 100px auto;
}

#disclaimer p{
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight:100;
  color: var(--pale);
  text-align:justify;
  line-height:1.6;
  margin:0;
}

#disclaimer  p + p
{ margin-top:.75em;}

#disclaimer h3{
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(17px, 1.2vw, 20px);
  color: var(--bronze1);
  font-weight:100;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 20px 0;

}

#disclaimer a{
  font-family:"Mona Sans", sans-serif;
  font-size: inherit;
  font-weight:100;
  color: var(--pale);
  text-decoration: underline;
  text-align:left;
  line-height:1.6;
  margin:0;
}

#mentions a:hover{
  color: var(--bronze1);
}

/* CONTENEUR UNIQUE SITE */
.wrap{
  width:100%;
  max-width:1800px;
  margin-inline:auto;
  padding-inline:var(--padX);
}

/* =========================================================
   TITLE LINES (H1 anim)
========================================================= */
.title-lines{ line-height:0.95; }
.title-lines .line{ display:block; overflow:hidden; }
.title-lines .line span{
  display:block;
  transform: translateY(110%);
  opacity:0;
  transition: transform 1.8s cubic-bezier(.22,.65,.15,1),
              opacity 1.8s ease;
  will-change: transform, opacity;
}
.title-lines.is-in .line span{
  transform: translateY(0);
  opacity:1;
}
.title-lines .line:nth-child(1) span{ transition-delay:.15s; }
.title-lines .line:nth-child(2) span{ transition-delay:.40s; }
.title-lines .line:nth-child(3) span{ transition-delay:.65s; }


/* =========================================================
   HEADER
========================================================= */

:root{
  --headerH:72px;
}

/* barre */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--headerH);
  z-index:1000;

  background: rgba(18,14,9,0.6);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);

  isolation:isolate;
}

.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,4vw,80px);
}

/* =========================================================
   LOGO
========================================================= */

.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
}

.brand-logo{
  height:12px;
  width:auto;
  display:block;
  transform-origin:center;
  transition:transform .25s cubic-bezier(.22,.8,.22,1);
}

.brand:hover .brand-logo{
  transform:scale(1.08);
}

/* =========================================================
   DESKTOP NAV
========================================================= */

.site-nav{
  position:relative;
}

.nav-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:18px;
}

.nav-links li{
  width:105px;
  text-align:center;
}

.nav-links a{
  font-family:"Livvic",sans-serif;
  font-size:clamp(15px,1.55vw,17px);
  font-weight:200;
  color:var(--pale);
  text-transform:uppercase;
  letter-spacing:.10em;
  display:inline-block;
  padding:6px 0;
  transition:color .2s ease;
}

.nav-links a:hover{ color:var(--bronze1); }
.nav-links a.active{ color:var(--bronze1); pointer-events:none; }

/* socials */
/* socials desktop */
.socials{
  display:flex;
  align-items:center;
  gap:14px;
  height:var(--headerH);
}

/* zone cliquable */
.social-link{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:var(--pale);
  transition: color .25s ease, transform .25s ease;
transform: translateY(5px);}

/* taille réelle du pictogramme */
.social-link svg{
  width:23px;
  height:23px;
  display:block;
  fill:currentColor;
  transition: fill .25s ease;
}

/* hover */
.social-link:hover{
  color:var(--bronze1);
}

/* =========================================================
   BURGER
========================================================= */

.burger{
  width:46px;
  height:46px;
  display:none;
  position:relative;
  background:none;
  border:0;
  cursor:pointer;
  z-index:1002;
}

.burger span{
  position:absolute;
  left:10px;
  right:10px;
  height:1px;
  background:var(--pale);
  transition:.25s;
}

.burger span:nth-child(1){top:15px;}
.burger span:nth-child(2){top:22px;}
.burger span:nth-child(3){top:29px;}

.site-nav.is-open .burger span:nth-child(1){top:22px;transform:rotate(45deg);}
.site-nav.is-open .burger span:nth-child(2){opacity:0;}
.site-nav.is-open .burger span:nth-child(3){top:22px;transform:rotate(-45deg);}

/* =========================================================
   MOBILE OVERLAY MENU
========================================================= */

:root{ --headerH:72px; }

/* overlay plein écran */
.nav-overlay{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--headerH);
  height: calc(100dvh - var(--headerH));   /* ✅ plein écran réel */
  min-height: calc(100vh - var(--headerH));/* ✅ fallback */
  z-index: 10000;

  background: rgba(38,41,38,.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;;   /* ← centre verticalement */

  padding-top:0;
  padding-bottom:0;
  padding-top: clamp(26px, 6vh, 60px);
  padding-bottom: 24px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility 0s linear .25s;
}

/* ouverture */
.site-nav.is-open .nav-overlay{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s ease;
}


/* Stagger */
.nav-overlay .overlay-links > li{
  opacity:0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

.site-nav.is-open .nav-overlay .overlay-links > li{
  opacity:1;
  transform:none;
}


/* liens mobile */
.overlay-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:28px;
  margin-top:7vh;
}

.overlay-links a{
  font-family:"Livvic",sans-serif;
  font-size:clamp(25px,5.6vw,28px);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pale);
  text-decoration:none;
  transition: all .15s ease;
}

.overlay-links a:hover{ color:var(--bronze1);
font-weight: 500;
}

.overlay-links a.active{ color:var(--bronze1);
pointer-events: none;}

/* socials mobile */
.overlay-social-item{
  margin-top:10px;
}

.overlay-social-item .nav-social-link{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
}

.overlay-social-item svg{
  width:35px;
  height:35px;
  fill:var(--pale);
  transition: all .25s ease;
}
/* zoom */
.overlay-social-item .nav-social-link:hover svg{
  transform: scale(1.25);
}
/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 968px){
  .nav-links{display:none;}
  .burger{display:block;}
}

@media (min-width: 969px){
  .burger{display:none;}
  .nav-overlay{display:none;}
}




/* =========================================================
   HERO / CAROUSEL
========================================================= */
.hero{
  height:100svh;
  position:relative;
}

.hero-carousel{
  height:100%;
  position:relative;
  overflow:hidden;
}

.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform: scale(1.03);
  transition: opacity 1.1s ease, transform 1.4s ease;
}
.hero-slide.is-active{
  opacity:1;
  transform: scale(1);
}

/* chevron */
.scroll-down{
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  background:none;
  border:0;
  cursor:pointer;
  opacity:.85;
  transition: opacity .3s ease;
  z-index:6;
  pointer-events:auto;
}
.scroll-down:hover{ opacity:1; }
.scroll-down svg{ animation: chevronFloat 1.8s ease-in-out infinite; }

@keyframes chevronFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(8px); }
  100% { transform: translateY(0); }
}


/* =========================================================
   SECTIONS
========================================================= */
.section{
  height:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;}


/* =========================================================
   PHOTO BAND
========================================================= */
.photo-band{
  /* mobile-first : pas trop haut, stable */
  height: clamp(220px, 32dvh, 520px);
  position:relative;

  background-image:url("../img/photos/fusion-a.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* fallback vieux navigateurs sans dvh */
@supports not (height: 1dvh){
  .photo-band{ height: clamp(220px, 42vh, 520px); }
}

/* desktop : plus généreux */
@media (min-width: 1024px){
  .photo-band{ height: clamp(320px, 65vh, 820px); }
}

/* très grands écrans : on assume */
@media (min-width: 1600px){
  .photo-band{ height: clamp(420px, 100vh, 1300px); }
}



/* =========================================================
   GRID / CARDS
========================================================= */
.grid-1{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;

  column-gap: clamp(20px, 5vw, 60px);
  row-gap: clamp(40px, 7vw, 100px);

  max-width:1700px;
  margin:0 auto;
}

.grid-1-inner{
  flex:0 1 420px;
  width:100%;
}

@media (max-width: 668px){
  .grid-1{
  gap: 80px;
  }
}

.grid-1 p{
  text-align:center;
  font-size: clamp(16px, .9vw, 20px);
  margin:0;
}


.grid-1-inner img{
  width:100%;
  height:auto;
  display:block;
  border-radius:3px;
}

/* =========================================
   Cards — aligner le départ du texte (mobile)
   ========================================= */


/* Le titre : on réserve 2 lignes */
.grid-1-inner h3{
  margin:0;
  line-height:1.15;
  text-align:center;

}

/* Le texte blanc : démarre donc au même niveau */
.grid-1-inner p{
  font-size: clamp(17px, 1.5vw, 20px);
  text-align:center;
  margin-bottom: 30px;
}

/* Le bouton : si tu veux qu’il reste plus bas, on le pousse */
.grid-1-inner .btn,
.grid-1-inner .button,
.grid-1-inner a.btn{
  margin-top:auto;
}


/* =========================================================
   BUTTON
========================================================= */
.btn{
  display:inline-block;
  background-color: var(--bronze1);
  color: var(--bg);
  font-family:"Livvic",sans-serif;

  font-size:16px;
  text-transform: uppercase;
  font-weight:400;
  padding:15px 25px;
  border-radius:50px;
  margin:20px 0 0;
  transition:
    background-color .35s ease,
    color .25s ease,
    transform .35s cubic-bezier(.22,.8,.22,1);
    border:0;
}
.btn:hover{
  background-color: var(--bronze);
  color:#fff;
  transform: translateY(-2px);
}


/* =========================================================
   SPLIT GRID
========================================================= */
.centered-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.centered-container :is(.grid-1-inner){
  display:flex;
  flex-direction:column;
  justify-content:flex-start; /* au lieu de center */
  width:100%;
}

.split-grid{
  display:grid;
  grid-template-columns: 1fr 3fr;
  gap:70px;
  align-items:center;
  width:100%;
  margin:0 auto;
}

@media (max-width: 900px){
  .split-grid{
    grid-template-columns:1fr;
    gap:45px;
  }
}
.split-left{
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;   /* desktop : pousse le titre à droite */
}

@media (max-width:900px){
  .split-left{
    justify-content:flex-start;   /* mobile : à gauche */
  }
}

/* =========================================================
   FOOTER
========================================================= */
.site-footer{
  background: var(--footer);
  padding:90px 0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  margin-top:auto;
}

.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:15px;
}

.footer-copy{
  font-family:"Livvic", sans-serif;
  font-weight:300;
  opacity:.7;
  line-height:1.5;
  font-size:15px;
  color:#fff;
  letter-spacing:.005em;
}

.footer-links{
  font-size:14px;
  font-weight:300;
}
.footer-links a{
  font-family:"Livvic", sans-serif;
  font-weight:300;
  color:#fff;
  opacity:.75;
}
.footer-links a:hover{ opacity:1; }





/* ---------------------------
   GALERIE PHOTO
----------------------------*/


.centered-container :is(h3){
  margin: 30px 0 20px;
}
/* grille */
.galerie-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 50px;
}

/* tablette */
@media (max-width: 1100px){
  .galerie-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 668px){
  .galerie-grid{
    gap: 20px;
  }
}



/* ---- les tuiles ---- */
.galerie-grid figure{
  margin:0;
  position:relative;
  overflow:hidden;
  border-radius:3px;

  aspect-ratio: 1 / 1;   /* ← paysage */
}


/* image */
.galerie-grid img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}


/* le texte */
.galerie-grid figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  padding:14px 14px 12px;
  font-family:"Mona Sans", sans-serif;
  font-weight: 100;
  font-size:14px;
  line-height:1.25;
  letter-spacing:.02em;

  color:#fff;

  /* dégradé lisibilité */
  background: linear-gradient(
    to top,
    rgba(0,0,0,.55),
    rgba(0,0,0,.0)
  );

  opacity:0;
  transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
}
.galerie-grid figure:hover figcaption{
  opacity:1;
  transform:none;
}

@media (hover:none){
  .galerie-grid figcaption{
    opacity:1;
    transform:none;
  }
}


.js-stagger-item{ opacity:1; transform:none; }

.js-stagger.is-stagger-ready .js-stagger-item{
  opacity:0;
  transform: translateY(10px);
  will-change: transform, opacity;
}


.typo-marquee{
  overflow:hidden;
  padding: 30px 0;
}
/* Cette section NE DOIT PAS faire 100vh */
.section-marquee{
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;

  /* si ton CSS global met les sections en flex */
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
}

/* le bandeau lui-même : hauteur = texte + padding */
.section-marquee .typo-marquee{
  padding: 14px 0;
  overflow: hidden;
}

/* la fenêtre visible */
.typo-marquee__viewport{
  display:flex;
  width:max-content;
  animation: marqueeMove 24s linear infinite;
}

/* chaque moitié IDENTIQUE */
.typo-marquee__group{
  display:flex;
  gap: clamp(40px,6vw,120px);
  padding-right: clamp(60px,8vw,120px);
}

/* le texte */
.typo-marquee span{
  white-space:nowrap;
  font-family: "Spectral", serif;
  font-weight: 100;
  font-size: clamp(42px,18vw,190px);
  color: var(--bronze);

  line-height:.9;
  letter-spacing:.03em;
  opacity: .15;
}

/* le secret : on déplace EXACTEMENT une largeur de groupe */
@keyframes marqueeMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}


.reveal{
  opacity:0;
  transform: translateY(20px);
  animation: revealUp .8s ease forwards;
}

/* décalage automatique */
.reveal:nth-child(1){ animation-delay: .1s; }
.reveal:nth-child(2){ animation-delay: .3s; }
.reveal:nth-child(3){ animation-delay: .5s; }

@keyframes revealUp{
  to{
    opacity:1;
    transform: translateY(0);
  }
}



/* =========================
   Lightbox
   ========================= */

   .lightbox{
     position:fixed;
     inset:0;
     z-index:99999;
     display:none;
   }

   .lightbox.is-open{ display:block; }

   /* ordre des couches */
   .lightbox__backdrop{
     position:absolute;
     inset:0;
     background: rgba(38,37,35,.96); /* #262523 */
     z-index:1;
   }

   .lightbox__figure{
     position:absolute;
     inset:0;
     display:grid;
     place-items:center;
     margin:0;
     pointer-events:none;
     z-index:2;
   }
   .lightbox__stage{
     position:relative;
     width: min(90vw, 1200px);
   }

   .lightbox__img{
     width:100%;
     height:auto;
     max-height:80vh;
     object-fit:contain;
     display:block;
   }

   .lightbox__ui{
     position:absolute;
     inset:0;              /* ← maintenant c’est INSET SUR L’IMAGE */
     pointer-events:none;
     z-index:3;
   }

   .lightbox__img{
     pointer-events:auto;
     max-width:80vw;
     max-height:80vh;
     width:auto;
     height:auto;
     object-fit:contain;
     display:block;
     border-radius: 5px;
   }

   /* UI */
   .lightbox__ui{
     position:absolute;
     inset:0;
     pointer-events:none; /* UI container non cliquable */
     z-index:3;          /* MAIS au-dessus */
   }

   /* boutons cliquables */
   .lightbox__btn{
     pointer-events:auto;
     position:absolute;
     width:40px;
     height:32px;
     display:flex;
     align-items:center;
     justify-content:center;
     cursor:pointer;

     /* ✅ ICI : enlève le style natif du bouton */
     background: transparent !important;
     border: 0 !important;
     padding: 0 !important;
     box-shadow: none !important;
     outline: none !important;
     appearance: none !important;
     -webkit-appearance: none !important;
   }
   .lightbox__btn:focus,
   .lightbox__btn:active{
     background: transparent !important;
     outline: none !important;
     box-shadow: none !important;
   }

   .lightbox__btn{ color:#fff; opacity:.75; }   /* couleur des SVG via currentColor */
   .lightbox__btn svg{ stroke: currentColor; }


   /* icones fines */
   .lightbox__btn svg{
     width:40px;
     height:40px;
     display:block;
     stroke:currentColor;
     stroke-width:0.95;       /* ← épaisseur */
     fill:none;
     stroke-linecap:round;
     stroke-linejoin:round;
   }

   .lightbox__btn:hover{ opacity:1; }

   /* positions */
   .lightbox__close{ top:26px; right:32px; }
   .lightbox__prev{ left:34px; top:50%; transform:translateY(-50%); }
   .lightbox__next{ right:34px; top:50%; transform:translateY(-50%); }

   /* Mobile */
@media (max-width: 668px){
  .lightbox__img{
    max-width:90vw;
    max-height:75vh;
  }

  /* on remonte un peu le X aussi (sinon trop proche de l'image) */
  .lightbox__close{
    top:14px;
    right:16px;
  }

  /* flèches légèrement plus extérieures */
  .lightbox__prev{ left:20px; }
  .lightbox__next{ right:20px; }
}
/* =========================
   BOUTIQUE (listing)
========================= */

.shop-header h2{
  text-align:center;
  margin:30px 0 40px;
}

/* grille responsive simple, stable */
.shop-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:60px;
  margin-top:50px;
}

.shop-card{
  box-sizing:border-box;
  flex: 0 1 clamp(200px, 25vw, 400px);
  max-width:500px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.shop-card:last-child{
margin-bottom: 100px;
}


/* media carré */
.shop-card__media{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#f3f3f3;
  border-radius:3px;
  display:block;
}

.shop-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.shop-card__title{
  margin:20px 0;
}

.shop-card__price{
  font-family:"Livvic",sans-serif;
  font-size:19px;
  color:#fff;
  font-weight:200;
  text-align:center;
}

.shop-card__cta{
  margin-top:18px;
}

/* Mobile */
@media (max-width:968px){
  .shop-grid{ gap:50px; }
  .shop-card{
    flex-basis:100%;
    max-width:520px;
  }
}


/* =========================
   PAGE PRODUIT (PDP) Product Detail Page.
========================= */

.pdp-breadcrumb{
  max-width:1300px;     /* même valeur que .pdp-grid */
  margin: 10px auto 25px;
  padding-left: 40px;           /* on neutralise le 40px */
}

@media (max-width:968px){
  .pdp-breadcrumb{
    margin: 10px 0 25px;
    padding-left: 0;           /* on neutralise le 40px */

  }
}

.pdp-breadcrumb a{
  color: var(--bronze1);
  font-family:"Livvic",sans-serif;
  opacity:.75;
  transition: opacity .2s ease;
}


.pdp-breadcrumb a:hover{ opacity:1; }

.pdp-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:40px;
  align-items:center;
  margin: 40px auto 80px;
  max-width:1300px;
}

.pdp-media{
  justify-self:center;
}

.pdp-media__frame{
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:3px;
  background: var(--bg);
}

.pdp-media__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.pdp-summary{
  display:flex;
  flex-direction:column;
  justify-content: center;
  gap:14px;
}

.pdp-summary h1{
color: var(--bronze1);
}

/* On override ton H1 global (sinon trop énorme) */
.pdp-title{
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 200;
  color: var(--pale);
  line-height: 1.05;
  text-align:left;
  margin:0;
}

.pdp-price{
  font-family:"Livvic",sans-serif;
  font-size:22px;
  color:#fff;
  font-weight:200;
}

.pdp-desc p{
  margin:0;
}

/* petites infos */
.pdp-meta{
  margin-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:14px;
  display:grid;
  gap:10px;
}
.pdp-meta__row{
  display:flex;
  justify-content:space-between;
  gap:14px;
}
.pdp-meta__label{
  font-family:"Livvic",sans-serif;
  font-size:16px;
  font-weight: 200;
  letter-spacing:.05em;
  text-transform:none;
  line-height: 1.5;
  color: var(--bronze1);
}

.pdp-cta{
  margin-top:18px;
}

/* Responsive */
@media (max-width:968px){
  .pdp-grid{
    grid-template-columns:1fr;
    max-width:none;
    margin: 25px 0 70px;
  }
}
/* La colonne media devient une pile : photo puis infos */
.pdp-media{
  justify-self:start;
  display:flex;
  flex-direction:column;
  gap:18px;
}



/* ✅ et son <img> ne doit pas remplir la hauteur de la ligne */
.pdp-info--svg img{
  width:100%;
  height:auto;            /* au lieu de 100% */
  display:block;
  object-fit:contain;
  padding:0;              /* ou garde 14px si tu veux, mais ça ajoute de la “hauteur visuelle” */
}



.pdp-infos{
  display:grid;
  grid-template-columns: 1fr .5fr .5fr;
  gap:16px;
  align-items:start;
}

/* blocs */
.pdp-info{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top: 30px;
}

/* images matières carrées */
.pdp-info--mat img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:3px;
}

/* label matière */
.pdp-info__label{
  margin-top:8px;
  font-size:13px;
  text-align:center;
  line-height:1.2;
  color:#d6d3cf;
  font-family:"Livvic",sans-serif;
}

/* SVG tailles */
.pdp-info--svg img{
  width:100%;
  height:auto;
  object-fit:contain;
}
@media (max-width: 680px){

  .pdp-infos{
    grid-template-columns: 1fr 1fr;
  }

  /* le SVG prend toute la largeur */
  .pdp-info--svg{
    grid-column: 1 / -1;
  }
}
/* =========================
   PDP — Quantité
========================= */
.pdp-qty{
  margin-top: 8px;
  display:grid;
  gap:8px;
}

.pdp-qty__label{
  opacity:.7;
  font-family:"Livvic",sans-serif;
  font-size:14px;
  letter-spacing:.05em;
  text-transform:uppercase;
}

@media (max-width:668px){
  .pdp-qty__label{
  display: none;
  }
}

.pdp-qty__field{
  position:relative;
  width: min(200px, 100%);
}

.pdp-qty__select{
  width:100%;
  height:46px;
  padding: 0 44px 0 14px;

  background: rgba(255,255,255,.06);
  border-radius: 3px;

  color: var(--pale);
  font-family:"Livvic",sans-serif;
  font-size: 15px;
  font-weight: 200;

  outline:none;
  appearance:none;
  -webkit-appearance:none;
}


/* =========================
   PDP — Quantity stepper
========================= */


.pdp-qty-stepper{
  width: 150px;
  height: 48px;

  display:grid;
  grid-template-columns: 44px 62px 44px; /* ← cohérent avec la nouvelle largeur */


  border-radius: 5px;
  background: rgba(222,224,218,.92);
  overflow:hidden;
}



.checkout-panel .pdp-qty-stepper{
  width: 150px;
  height: 40px;

  display:grid;
  grid-template-columns: 44px 62px 44px; /* ← cohérent avec la nouvelle largeur */


  border-radius: 5px;
  background: #fff;
  overflow:hidden;
}

@media (max-width: 668px){
  .checkout-panel .pdp-qty-stepper{
    width: 145px;
    height: 40px;

    display:grid;
    grid-template-columns: 40px 65px 40px; /* ← cohérent avec la nouvelle largeur */

    border-radius: 5px;
    background: #fff;
    overflow:hidden;
  }
  }


/* boutons = vrais centres géométriques */
.pdp-qty-stepper__btn{
  border:0;
  background:transparent;
  cursor:pointer;

  display:grid;
  place-items:center;

  color: rgba(58,56,52,.75);
  transition: background .18s ease, transform .18s ease, color .18s ease;
}


.pdp-qty-stepper__btn:first-child{
  border-right: 1px solid rgba(0,0,0,0.15);
}

.pdp-qty-stepper__btn:last-child{
  border-left: 1px solid rgba(0,0,0,0.15);
}


.pdp-qty-stepper__btn:hover{ background: rgba(0,0,0,.05); }
.pdp-qty-stepper__btn:active{ transform: scale(.98); }

.pdp-qty-stepper__icon{
  width:22px;
  height:22px;
  display:block;
}

.pdp-qty-stepper__input{
  height:100%;
  width:100%;
  border:0;
  background:transparent;
  text-align:center;

  font-family:"Livvic",sans-serif;
  font-size:22px;
  font-weight: 300;
  color: rgba(58,56,52,.85);

  padding:0;
  outline:none;
}



/* enlève les flèches du number */
.pdp-qty-stepper__input::-webkit-outer-spin-button,
.pdp-qty-stepper__input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.pdp-qty-stepper__input[type=number]{ -moz-appearance:textfield; }

.product-options{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:22px;
  margin: 10px 0 0;
}

.product-option label{
  display:block;
  font-size:14px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px;
  color:#6e6a63;
}

.product-option select{
  width:100%;
  height:48px;
  padding:0 14px;

  font-size:16px;
  font-family:inherit;

  border:1px solid #d6d2cb;
  background:#fff;
  color:#1c1c1c;

  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  cursor:pointer;
  transition:border .2s ease, box-shadow .2s ease;
  border: none;
  outline: none;
}

.product-option select:focus{
  outline:none;
  border-color:#8b7a5c;
  box-shadow:0 0 0 2px rgba(139,122,92,.15);
}


/* =========================
   PDP CAROUSEL
========================= */
.pdp-carousel{
  position:relative;
}

.pdp-carousel__viewport{
  overflow:hidden;
  width:100%;
  height:100%;
    overflow: clip;
}

.pdp-carousel__track{
  display:flex;
  width:100%;
  height:100%;
  will-change:transform;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  transform:translate3d(0,0,0);
}

.pdp-carousel__slide{
  flex:0 0 100%;
  min-width:100%;
  height:100%;
}

.pdp-carousel__slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;       /* garde ton style “frame” */
  object-position:center;
  user-select:none;
  -webkit-user-drag:none;
}

/* flèches overlay (fines) */
.pdp-carousel__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:72px;
  height:72px;
  display:grid;
  place-items:center;

  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;

  opacity:.5;
  transition:opacity .2s ease, transform .2s ease;
}


.pdp-carousel__nav svg{
  width:46px;
  height:46px;
}
.pdp-carousel__nav path{
  stroke-width: 1 !important;
}
.pdp-carousel__nav svg{
  stroke: currentColor;
  fill: none;
}

.pdp-carousel__nav--prev{ left:14px; }
.pdp-carousel__nav--next{ right:14px; }

@media (max-width: 668px){

  .pdp-carousel__nav--prev{
    left:-12px;
  }

  .pdp-carousel__nav--next{
    right:-12px;
  }

}

.pdp-carousel__nav:hover{
  opacity:1;
  transform:translateY(-50%) scale(1.03);
}

.pdp-carousel__nav:active{
  transform:translateY(-50%) scale(.98);
}

.pdp-carousel__nav:focus-visible{
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:4px;
  border-radius:999px;
}

/* dots */
.pdp-carousel__dots{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}

.pdp-carousel__dot{
  width:8px;
  height:8px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.35);
  cursor:pointer;
  padding:0;
}

.pdp-carousel__dot.is-active{
  background:rgba(255,255,255,.95);
}
/* =========================
   PDP MOBILE ALIGN FIX
========================= */
@media (max-width:968px){

  .pdp-layout{
    padding-left:18px;
    padding-right:18px;
  }

  /* on annule les centrages */
  .pdp-media{
    padding:0;
    margin:0;
  }

  .pdp-media__frame{
    margin:0;
    width:100%;
    max-width:none;
  }

  /* IMPORTANT */
  .pdp-carousel{
    overflow:hidden;
  }

  /* texte aligné EXACTEMENT avec l'image */
  .pdp-info{
    padding:0;
    margin-top:18px;
  }
}





/* =========================
   CHECKOUT — v2 (sans image)
========================= */

/* Réglage de la largeur max */
.checkout-wrap{
  --checkoutMax: 1200px;
  max-width: var(--checkoutMax);
  margin: 0 auto;
}

.checkout-title{
  font-family: "Livvic", sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  margin: 0 0 14px;
  color: var(--text);
}

/* recap (sans media) */
.checkout-recap{ margin-top: 18px; }

.recap-lines{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.recap-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.recap-row:last-child{ border-bottom:0; }

/* ✅ nom lampe plus gros */
.recap-model{
  font-family:"Livvic",sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 6px;
}

.recap-meta{
  font-size: 14px;
  opacity: .78;
}

.recap-row__right{
  display:flex;
  align-items:baseline;
  gap: 10px;
  white-space: nowrap;
}

.recap-qty{
  font-size: 20px;
  opacity: .7;
}

.recap-price{
  font-family:"Livvic",sans-serif;
  font-size: 18px;
  font-weight: 400;
}

/* Totaux HT + TVA 0 */
.recap-totals{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  display: grid;
  gap: 8px;
}

.recap-total-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size: 16px;
}
.recap-total-row strong{
  font-family:"Livvic",sans-serif;
  font-weight: 400;
  font-size: 18px;
}
.recap-total-row--grand{
  margin-top: 6px;
}
.recap-total-row--grand strong{
  font-size: 22px;
}
.recap-note{
  margin-top: 8px;
  font-size: 13px;
  opacity: .7;
}

/* form */
.checkout-form{
  display:grid;
  gap: 18px;
  margin-top: 18px;
}


.field .label{
  display:block;
  font-family:"Livvic",sans-serif;
  text-transform: uppercase;
  letter-spacing:.12em;
  font-size: 13px;
  color: var(--text);
  opacity: .75;
  margin: 0 0 8px;
  font-weight: 300;
}

.checkout-form input,
.checkout-form select{
  width:100%;
  height: 54px;
  padding: 0 14px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.6);
  color: var(--text);
  font-family:"Livvic",sans-serif;
  font-size: 18px;
  font-weight: 300;
  outline:none;
}

.checkout-form select.select[disabled]{
  opacity: .85;
  cursor: not-allowed;
}

/* toggles */
.toggle, .checkout-terms{
  display:flex;
  align-items:flex-start;
  gap:12px;
  cursor:pointer;
  user-select:none;
  font-size:14px;
  line-height:1.35;
  color: var(--text);
}
.toggle input, .checkout-terms__checkbox{ display:none; }

.toggle__box, .checkout-terms__box{
  width:18px;
  height:18px;
  border:1px solid rgba(0,0,0,.35);
  border-radius:3px;
  position:relative;
  flex-shrink:0;
  margin-top:2px;
  background: rgba(255,255,255,.5);
}
.toggle input:checked + .toggle__box,
.checkout-terms__checkbox:checked + .checkout-terms__box{
  background: var(--text);
  border-color: var(--text);
}
.toggle input:checked + .toggle__box::after,
.checkout-terms__checkbox:checked + .checkout-terms__box::after{
  content:"";
  position:absolute;
  inset:4px;
  background:white;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}

.shipping-block{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.shipping-title{
  font-family:"Livvic",sans-serif;
  font-size: 16px;
  margin: 0 0 10px;
  opacity: .85;
}

/* ✅ footer : plus de mega bouton */
.checkout-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* ✅ bouton inline-block, pas full width */
.checkout-btn{
  display: inline-block;
  width: auto !important;
  padding: 14px 22px;
  border-radius: 999px;
}

button.is-disabled{
  opacity:.45;
  pointer-events:none;
}

/* responsive */
@media (max-width: 860px){
  .grid-2{ grid-template-columns: 1fr; }
  .checkout-footer{ align-items: flex-start; }
}

.pay-methods{
  display:grid;
  gap:10px;
  margin: 20px 0 14px;
}
/* la ligne ne s'étire plus sur toute la largeur */
.pay-methods{
  justify-items: start;   /* grid : aligne à gauche */
}

.pay-method{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
}

.pay-method span{
  font-family:"Livvic", sans-serif;
  font-size:17px;
  font-weight: 500;
  color: var(--text);
}


.pay-method input[type="radio"]{
  width:18px;
  height:18px;
  margin:0;
}


/* =========================
   CHECKOUT — FIX (checkbox + image + CTA)
========================= */


#checkout{
  background: #F2F2F2;
}

#checkout h1{
  text-align: center;
  margin: 30px 0;
  text-transform: uppercase;
  font-size: clamp(25px, 4vw, 45px);
  letter-spacing: 0.08em;
}

#checkout .pdp-breadcrumb{
  margin: 10px 0 25px;
  padding: 0;
}

#checkout .pdp-breadcrumb a{
color: var(--bg);
margin: 0;
padding: 0;
}

.checkout-wrap{
  max-width: 1200px; /* <= ici ta largeur */
  margin: 0 auto;
}

/* cards */
.checkout-card{
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 6px;
  margin-top: 20px;
  padding: 10px;
}

.checkout-btn{
  display:inline-block;
  padding:14px 26px;
  border-radius:999px;
  background:var(--bronze1);
  color:var(--bg);
  border:0;
  outline:0;
  appearance:none;
  cursor:pointer;
  width: auto !important;
  max-width: 320px;
  margin: 10px 0 0;
}
/* ✅ bloc produit : image proche bord gauche (10px) */
.recap-card--product{
  padding: 10px 20px 10px 10px; /* gauche 10px max */
}

/* recap layout */
.recap-product{
  display:grid;
  grid-template-columns: 180px 1fr; /* ✅ pile la taille de l’image */
  gap: 60px;
  align-items: center;
}

/* ✅ kill le “vide orange” (figure) */
.recap-media{
  margin: 0;
  padding: 0;
  background: none;
}

/* image frame */
.recap-media__frame{
  width: 180px;
  height: 180px;
  overflow:hidden;
  border-radius: 3px;
}

.recap-media__frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.recap-model{
  font-family: "Livvic", sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.3;
  margin: 0 0 10px;
}

.recap-meta{
  font-size: 20px;
  opacity: .8;
  line-height: 1.5;
  margin: 0 0 10px;

}

.recap-qty{
  font-size: 15px;
  opacity: .9;
}

/* totals */
.totals{
  display:grid;
  gap: 10px;
}
.totals-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size: 20px;
}
.totals-row strong{
  font-family: "Livvic", sans-serif;
  font-weight: 400;
}
.totals-row--grand{
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.1);
}

.totals-row--grand strong{
  font-size: 24px;
}

.totals-note{
  margin-top: 8px;
  font-size: 13px;
  opacity: .7;
}

/* form */
.block-title{
  font-family: "Livvic", sans-serif;
  font-size: 22px;
  margin: 0 0 14px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.checkout-form .field{
  margin-bottom: 15px;
}
.label{
  display:block;
  font-size: 13px;
  letter-spacing:.12em;
  text-transform: uppercase;
  margin: 0 0 7px;
  opacity: .75;
}
/* =========================
   CHECKOUT — FIX OVERFLOW FORM MOBILE
========================= */

#checkout .checkout-form,
#checkout .checkout-form .checkout-card,
#checkout .checkout-form .grid-2,
#checkout .checkout-form .field{
  min-width: 0;
}

#checkout .checkout-form input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
#checkout .checkout-form select,
#checkout .checkout-form textarea{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 860px){
  #checkout .checkout-form .grid-2{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 668px){
  #checkout .checkout-wrap{
    padding-left: 16px;
    padding-right: 16px;
  }

  #checkout .checkout-card{
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ✅ FIX CHECKBOXES */
.checkline{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-top: 12px;
  font-size: 15px;
}
.checkline input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin: 0;
  appearance: auto;
  -webkit-appearance: auto;
}

/* shipping block */
.shipping-block{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}
.shipping-title{
  font-family:"Livvic",sans-serif;
  font-size: 16px;
  opacity: .85;
  margin: 0 0 10px;
}

/* footer */
.checkout-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
}



/* responsive */
@media (max-width: 860px){
  .recap-product{
    grid-template-columns: 1fr;
  }
  .recap-media__frame{
    width: 180px;
    height: 180px;
  }
  .grid-2{
    grid-template-columns: 1fr;
  }
}

#checkout input[type="radio"]{
  accent-color: var(--bronze1);
  box-shadow:none;
}

#checkout input[type="radio"]:hover{
  box-shadow:none;
  outline:none;
}
#checkout input[type="radio"]{
  cursor:pointer;
}
/* =========================
   CHECKOUT — TYPO
========================= */

#checkout{
  font-family:"Livvic", sans-serif;
}

#checkout input,
#checkout select,
#checkout button,
#checkout label,
#checkout span,
#checkout p,
#checkout strong,
#checkout a{
  font-family:"Livvic", sans-serif;
}

#checkout textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.6);
  color: var(--text);
  font-family:"Livvic", sans-serif;
  font-size: 18px;
  font-weight: 300;
  outline:none;
  resize: vertical;
  min-height: 140px;
}


/*   PAGE CONYACT   */
.contact-form-section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 120px;
}

.contact-form-intro{
  text-align: center;
  margin-bottom: 0;
}

.contact-form-intro h1 {
  font-family:"Mona Sans", sans-serif;
  font-size: clamp(25px, 4vw, 45px);
  font-weight: 100;
  color: var(--bronze);
  text-transform: uppercase;
  letter-spacing: clamp(0.05em, 1vw, 0.55em);
  margin:30px 0;
}

.contact-form-intro p{
  margin: 0;
  text-align: center;
  line-height: 1.5;
}
.contact-form-intro p + p{
  margin-top:.75em;
}
.contact-form-intro a{
  font-weight: 300;
}
.contact-form-intro a:hover{
  color: var(--bronze1);
}
.contact-form{
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.form-group{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-title{
  display: block;
  margin-bottom: 4px;
}

.form-row{
  display: grid;
  gap: 18px;
}

.form-row--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-field{
  display: flex;
  flex-direction: column;
}

.form-field label{
  margin-bottom: 10px;
  color: var(--pale);
  font-family:"Livvic", sans-serif;
}

.form-field label span{
  opacity: .8;
}

.checkbox span{
  color:#e6e2dc;
  font-family:"Livvic", sans-serif;

}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width: 100%;
  border: 0;
  outline: none;
  border-radius: 3px;
  padding: 16px 20px;
  box-sizing: border-box;
  font: inherit;
}

.contact-form textarea{
  min-height: 180px;
  resize: vertical;
}

.checkbox-line{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.checkbox-line input[type="checkbox"]{
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 30px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 2px;
  background: transparent;
  margin: 0;
  flex: 0 0 30px;
  position: relative;
}

.checkbox-line input[type="checkbox"]:checked::after{
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 4px;
  background: var(--bronze1);
}

.form-actions{
  margin-top: 8px;
}

.form-actions button{
  min-width: 150px;
  padding: 20px 28px;
  border: 0;
  cursor: pointer;
  font: inherit;
}

@media (max-width: 768px){
  .form-row--2{
    grid-template-columns: 1fr;
  }

  .contact-form-section{
    padding: 0 20px 90px;
  }

  .contact-form-intro{
    margin-bottom: 50px;
  }
}
.paiement-virement{
  padding: 30px;
  background:#e5e4e1;
  border-radius: 3px;
}

.paiement-virement p{
  color: var(--text);
  font-weight: 300;
}
.paiement-virement strong{
  font-weight: 600;
}
.paiement-virement a{
  font-weight: 500;
}
.paiement-virement a:hover{
  color: var(--bronze1);
}


/*  FROMULAIRE */
.form-alert{
  margin: 0 0 24px;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.form-error{
  margin-top: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: #FA5C46;
}

.form-alert{
  margin-bottom: 24px;
  padding: 14px 18px;
  border-radius: 6px;
}
.form-success{
  margin: 60px auto 0;
  max-width: 720px;
  display: flex;
  justify-content: center;
}

.form-success p{
  margin: 0;
  width: 100%;
  text-align: center !important;
}

.centered{
  display: grid;
  place-items: center;
}
.captcha-question{
  margin: 0 0 12px;
  color: var(--bronze1);
  font-family: "Livvic", sans-serif;
  font-size: 18px;
  line-height: 1.4;
}