:root {
  --rose: #ff69b4;
  --rose-clair: #ffc0cb;
  --blanc: #fffafc;
  --doré: #d4af37;
  --gris: #333;
}

body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--blanc);
  color: var(--gris);
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
}

header {
  background-color: var(--rose);
  color: white;
  padding: 15px;
  text-align: center;
}

nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 0 10px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.hero {
  text-align: center;
  padding: 50px;
  background: linear-gradient(to right, var(--rose), var(--rose-clair));
  color: white;
}

.hero h2 {
  animation: fadeInDown 1.5s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn {
  background: var(--doré);
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  transition: transform 0.3s ease, background 0.3s ease;
}

.btn:hover {
  transform: scale(1.1);
  background: var(--rose);
}

.produits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 30px;
}

.produit {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: white;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.produit:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.produit img {
  width: 100%;
  border-radius: 10px;
  transition: opacity 0.5s ease;
}

.produit img:hover {
  opacity: 0.8;
}

/* Galerie accueil */
.galerie {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
}

.galerie .modele {
  text-align: center;
  transition: transform 0.3s ease;
}

.galerie .modele:hover {
  transform: translateY(-10px);
}

.galerie img {
  width: 200px;
  border-radius: 10px;
}

/* Formulaires inscription/connexion */

/* =========================================================
   CONNEXION + INSCRIPTION UNIQUEMENT
   ========================================================= */

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 20%, var(--rose-clair), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(196, 154, 90, 0.15), transparent 30%),
    #fffaf6;
  color: #35262a;
  font-family: Georgia, "Times New Roman", serif;
}


/* =========================================================
   CONTENEUR PRINCIPAL
   ========================================================= */

.auth-page .auth-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 45% 55%;
  padding: 30px;
}


/* =========================================================
   PARTIE GAUCHE
   ========================================================= */

.auth-page .auth-showcase {
  position: relative;
  min-height: calc(100vh - 60px);
  overflow: hidden;
  border-radius: 30px;
  padding: 55px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  background:
    linear-gradient(
      145deg,
      #542832,
      var(--rose)
    );
  box-shadow: 0 25px 70px rgba(84, 40, 50, 0.15);
}


.auth-page .auth-showcase::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  right: -250px;
  top: -180px;
  background: rgba(255, 255, 255, 0.08);
}


.auth-page .auth-showcase::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  left: -200px;
  bottom: -150px;
  background: rgba(255, 255, 255, 0.07);
}


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

.auth-page .brand {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 15px;
}


/* NOUVEAU LOGO PRINCIPAL CIRCULAIRE */

.auth-page .brand-logo {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;

  /* Forme circulaire */
  border-radius: 50%;

  /* Fond propre autour du logo */
  background: #fff;

  /* Petit espace intérieur */
  padding: 5px;
  box-sizing: border-box;

  /* Finition élégante */
  border: 1px solid rgba(196, 154, 90, 0.35);

  /* Petite profondeur */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}


.auth-page .brand h1 {
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 1px;
}


.auth-page .brand > div > span {
  display: block;
  margin-top: 4px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.75;
}


/* =========================================================
   TEXTE DE PRÉSENTATION
   ========================================================= */

.auth-page .showcase-content {
  position: relative;
  z-index: 5;
  max-width: 450px;
}


.auth-page .small-title {
  margin-bottom: 18px;
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #e5c994;
  font-weight: bold;
}


.auth-page .showcase-content h2 {
  margin-bottom: 25px;
  font-size: clamp(45px, 5vw, 70px);
  line-height: 1.05;
  font-weight: normal;
}


.auth-page .showcase-content h2 span {
  color: #e5c994;
  font-style: italic;
}


.auth-page .showcase-content > p:last-child {
  max-width: 390px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}


/* =========================================================
   DÉCORATIONS
   ========================================================= */

.auth-page .showcase-decoration {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.13);
}


.auth-page .decoration-one {
  width: 280px;
  height: 280px;
  right: -80px;
  bottom: 80px;
}


.auth-page .decoration-two {
  width: 180px;
  height: 180px;
  right: 20px;
  bottom: 130px;
}


.auth-page .copyright {
  position: relative;
  z-index: 5;
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  opacity: 0.55;
}


/* =========================================================
   PARTIE DROITE
   ========================================================= */

.auth-page .auth-form-area {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
}


/* =========================================================
   CARTE DU FORMULAIRE
   ========================================================= */

.auth-page .auth-card {
  width: 100%;
  max-width: 500px;
  padding: 55px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(183, 110, 121, 0.12);
  border-radius: 25px;
  box-shadow: 0 20px 60px rgba(84, 40, 50, 0.08);
  backdrop-filter: blur(10px);
}


/* =========================================================
   EN-TÊTE
   ========================================================= */

.auth-page .form-header {
  margin-bottom: 35px;
}


.auth-page .form-mini-title {
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--rose);
  font-weight: bold;
}


.auth-page .form-header h2 {
  margin-bottom: 12px;
  font-size: 42px;
  font-weight: normal;
  color: #542832;
}


.auth-page .form-header > p:last-child {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gris, #806c70);
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.auth-page .auth-card form {
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}


.auth-page .input-group {
  margin-bottom: 22px;
}


.auth-page .input-group label {
  display: block;
  margin-bottom: 9px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #35262a;
}


.auth-page .input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}


.auth-page .input-icon {
  position: absolute;
  left: 17px;
  z-index: 2;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: var(--rose);
}


.auth-page .input-wrapper input {
  width: 100%;
  height: 54px;
  padding: 0 18px 0 48px;
  border: 1px solid #eadbdd;
  border-radius: 12px;
  outline: none;
  background: #fff7f7;
  font-family: Arial, sans-serif;
  font-size: 13px;
  color: #35262a;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


.auth-page .input-wrapper input::placeholder {
  color: #b9a7aa;
}


.auth-page .input-wrapper input:focus {
  border-color: var(--rose);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(183, 110, 121, 0.09);
}


/* =========================================================
   OPTIONS CONNEXION
   ========================================================= */

.auth-page .form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 25px;
  font-family: Arial, sans-serif;
  font-size: 11px;
}


.auth-page .remember {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--gris, #806c70);
}


.auth-page .remember input {
  accent-color: var(--rose);
}


.auth-page .forgot-password {
  color: #8e4b58;
  text-decoration: none;
  transition: color 0.3s ease;
}


.auth-page .forgot-password:hover {
  color: var(--doré);
}


/* =========================================================
   BOUTON
   ========================================================= */

.auth-page .auth-button {
  width: 100%;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 24px;
  border: none;
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      #542832,
      #8e4b58
    );
  color: white;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(84, 40, 50, 0.2);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.auth-page .auth-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(84, 40, 50, 0.25);
}


.auth-page .button-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  font-size: 18px;
  transition: transform 0.3s ease;
}


.auth-page .auth-button:hover .button-arrow {
  transform: translateX(4px);
}


/* =========================================================
   SÉPARATEUR
   ========================================================= */

.auth-page .separator {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 30px 0;
  font-family: Arial, sans-serif;
  font-size: 9px;
  color: #b7a5a8;
  letter-spacing: 2px;
}


.auth-page .separator::before,
.auth-page .separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #eadbdd;
}


/* =========================================================
   LIEN CONNEXION / INSCRIPTION
   ========================================================= */

.auth-page .switch-page {
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: var(--gris, #806c70);
}


.auth-page .switch-page a {
  margin-left: 4px;
  color: #8e4b58;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}


.auth-page .switch-page a:hover {
  color: var(--doré);
  border-color: var(--doré);
}


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

.auth-page .mobile-brand {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}


/* NOUVEAU LOGO PRINCIPAL MOBILE CIRCULAIRE */

.auth-page .mobile-brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;

  /* Forme circulaire */
  border-radius: 50%;

  /* Fond blanc */
  background: #fff;

  /* Petit espace intérieur */
  padding: 4px;
  box-sizing: border-box;

  /* Finition élégante */
  border: 1px solid rgba(196, 154, 90, 0.35);

  /* Petite profondeur */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


.auth-page .mobile-brand strong {
  color: #542832;
  font-size: 17px;
  font-weight: normal;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1000px) {

  .auth-page .auth-container {
    grid-template-columns: 40% 60%;
    padding: 20px;
  }


  .auth-page .auth-showcase {
    min-height: calc(100vh - 40px);
    padding: 35px;
  }


  .auth-page .auth-form-area {
    min-height: calc(100vh - 40px);
    padding: 25px;
  }


  .auth-page .auth-card {
    padding: 40px;
  }


  .auth-page .showcase-content h2 {
    font-size: 45px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

  .auth-page .auth-container {
    display: block;
    padding: 0;
    min-height: 100vh;
  }


  .auth-page .auth-showcase {
    display: none;
  }


  .auth-page .auth-form-area {
    min-height: 100vh;
    padding: 25px 18px;
    align-items: center;
  }


  .auth-page .auth-card {
    max-width: 500px;
    padding: 35px 25px;
    border-radius: 22px;
  }


  .auth-page .mobile-brand {
    display: flex;
  }


  .auth-page .mobile-brand-logo {
    width: 58px;
    height: 58px;
  }


  .auth-page .form-header {
    text-align: center;
  }


  .auth-page .form-header h2 {
    font-size: 34px;
  }


  .auth-page .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

}


/* =========================================================
   PETIT TÉLÉPHONE
   ========================================================= */

@media (max-width: 400px) {

  .auth-page .auth-form-area {
    padding: 15px;
  }


  .auth-page .auth-card {
    padding: 28px 20px;
  }


  .auth-page .form-header h2 {
    font-size: 30px;
  }


  .auth-page .input-wrapper input {
    height: 50px;
  }


  .auth-page .mobile-brand-logo {
    width: 52px;
    height: 52px;
  }

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
  text-align: center;
  padding: 20px;
  background: var(--rose-clair);
  margin-top: 40px;
  color: var(--gris);
}


/* =========================================================
   MISS VOGUE LINE
   BOUTIQUE
   ========================================================= */


/* =========================================================
   PAGE BOUTIQUE
   ========================================================= */

.boutique-page {

  --shop-rose: #d76b88;
  --shop-rose-light: #f8dfe5;
  --shop-pink: #fff4f6;
  --shop-dark: #542832;
  --shop-text: #38282d;
  --shop-muted: #8a7479;
  --shop-gold: #c49a5a;
  --shop-white: #fffdfc;

  margin: 0;

  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(248, 223, 229, 0.8),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #fffaf8,
      #fff1f4
    );

  color: var(--shop-text);
  font-family: "Raleway", sans-serif;
}


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

.boutique-page .shop-header {

  min-height: 85px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  padding: 16px 6%;

  background: rgba(255, 253, 252, 0.95);

  border-bottom: 1px solid rgba(215, 107, 136, 0.12);

  backdrop-filter: blur(15px);
}


/* LOGO */

.boutique-page .shop-logo {

  display: flex;
  align-items: center;

  gap: 12px;

  color: inherit;

  text-decoration: none;
}


/* NOUVEAU LOGO PRINCIPAL */

.boutique-page .shop-logo-image {

  width: 78px;
  height: 78px;

  object-fit: contain;

  display: block;

  flex-shrink: 0;
}


.boutique-page .shop-logo strong {

  display: block;

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: 17px;

  font-weight: 500;
}


.boutique-page .shop-logo small {

  display: block;

  margin-top: 2px;

  color: var(--shop-muted);

  font-size: 7px;

  letter-spacing: 2.5px;

  text-transform: uppercase;
}


/* NAVIGATION */

.boutique-page .shop-nav {

  display: flex;

  align-items: center;

  gap: 28px;
}


.boutique-page .shop-nav a {

  position: relative;

  color: var(--shop-text);

  text-decoration: none;

  font-size: 11px;

  font-weight: 500;

  transition: color 0.3s ease;
}


.boutique-page .shop-nav a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -7px;

  width: 0;

  height: 1px;

  background: var(--shop-rose);

  transition: width 0.3s ease;
}


.boutique-page .shop-nav a:hover,
.boutique-page .shop-nav a.active {

  color: var(--shop-rose);
}


.boutique-page .shop-nav a:hover::after,
.boutique-page .shop-nav a.active::after {

  width: 100%;
}


/* HEADER ACTIONS */

.boutique-page .shop-header-actions {

  display: flex;

  align-items: center;

  gap: 12px;
}


.boutique-page .shop-account {

  padding: 9px 17px;

  border: 1px solid rgba(215, 107, 136, 0.3);

  border-radius: 25px;

  color: var(--shop-dark);

  text-decoration: none;

  font-size: 9px;

  font-weight: 600;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}


.boutique-page .shop-account:hover {

  background: var(--shop-dark);

  color: white;
}


.boutique-page .shop-language {

  width: 36px;
  height: 36px;

  border: 1px solid rgba(215, 107, 136, 0.3);

  border-radius: 50%;

  background: transparent;

  color: var(--shop-dark);

  font-size: 9px;

  cursor: pointer;
}


/* =========================================================
   INTRO
   ========================================================= */

.boutique-page .shop-intro {

  max-width: 850px;

  margin: auto;

  padding: 80px 25px 45px;

  text-align: center;
}


.boutique-page .shop-eyebrow {

  margin-bottom: 14px;

  color: var(--shop-rose);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 4px;
}


.boutique-page .shop-intro h1 {

  margin: 0 0 18px;

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(48px, 6vw, 72px);

  font-weight: 400;

  line-height: 1;
}


.boutique-page .shop-intro h1 em {

  color: var(--shop-rose);

  font-style: italic;
}


.boutique-page .shop-description {

  max-width: 560px;

  margin: auto;

  color: var(--shop-muted);

  font-size: 13px;

  line-height: 1.9;
}


/* =========================================================
   CHOIX VÊTEMENTS / ACCESSOIRES
   ========================================================= */

.boutique-page .shop-collection-switch {

  max-width: 1200px;

  margin: 10px auto 35px;

  padding: 0 30px;

  display: flex;

  justify-content: center;

  align-items: stretch;

  gap: 15px;
}


/* BOUTONS COLLECTION */

.boutique-page .collection-tab {

  position: relative;

  min-width: 230px;
  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  gap: 14px;

  padding: 14px 22px;

  border: 1px solid rgba(215, 107, 136, 0.18);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.75);

  color: var(--shop-dark);

  font-family: "Raleway", sans-serif;

  text-align: left;

  cursor: pointer;

  box-shadow:
    0 8px 25px rgba(84, 40, 50, 0.04);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* ICÔNE */

.boutique-page .collection-tab > span {

  width: 42px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--shop-pink);

  font-size: 19px;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


/* TEXTE */

.boutique-page .collection-tab > div {

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.boutique-page .collection-tab strong {

  display: block;

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: 16px;

  font-weight: 600;
}


.boutique-page .collection-tab small {

  display: block;

  color: var(--shop-muted);

  font-size: 9px;

  letter-spacing: 0.3px;
}


/* HOVER */

.boutique-page .collection-tab:hover {

  transform: translateY(-4px);

  border-color: rgba(215, 107, 136, 0.4);

  background: white;

  box-shadow:
    0 15px 35px rgba(84, 40, 50, 0.1);
}


.boutique-page .collection-tab:hover > span {

  transform: scale(1.08);
}


/* BOUTON ACTIF */

.boutique-page .collection-tab.active {

  background: var(--shop-dark);

  border-color: var(--shop-dark);

  box-shadow:
    0 15px 35px rgba(84, 40, 50, 0.18);
}


.boutique-page .collection-tab.active strong {

  color: white;
}


.boutique-page .collection-tab.active small {

  color: rgba(255, 255, 255, 0.72);
}


.boutique-page .collection-tab.active > span {

  background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   TITRE DE LA COLLECTION
   ========================================================= */

.boutique-page .collection-title {

  max-width: 1200px;

  margin: 0 auto 25px;

  padding: 0 30px;
}


.boutique-page .collection-title p:first-child {

  margin: 0 0 12px;

  color: var(--shop-rose);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;
}


.boutique-page .collection-title h2 {

  margin: 0 0 10px;

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: 34px;

  font-weight: 400;
}


.boutique-page .collection-title h2 em {

  color: var(--shop-rose);

  font-style: italic;
}


.boutique-page .collection-title p:last-child {

  max-width: 650px;

  margin: 0;

  color: var(--shop-muted);

  font-size: 12px;

  line-height: 1.8;
}


/* =========================================================
   OUTILS
   ========================================================= */

.boutique-page .shop-tools {

  max-width: 1200px;

  margin: 15px auto 25px;

  padding: 0 30px;

  display: grid;

  grid-template-columns: 1fr auto auto;

  gap: 15px;

  align-items: center;
}


/* RECHERCHE */

.boutique-page .shop-search {

  height: 52px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 0 18px;

  background: white;

  border: 1px solid rgba(215, 107, 136, 0.18);

  border-radius: 12px;

  box-shadow:
    0 8px 25px rgba(84, 40, 50, 0.04);
}


.boutique-page .search-icon {

  color: var(--shop-rose);

  font-size: 22px;

  line-height: 1;
}


.boutique-page .shop-search input {

  width: 100%;

  border: none;

  outline: none;

  background: transparent;

  color: var(--shop-text);

  font-family: "Raleway", sans-serif;

  font-size: 12px;
}


.boutique-page .shop-search input::placeholder {

  color: #b4a3a7;
}


/* FILTRES */

.boutique-page .shop-filter,
.boutique-page .shop-sort {

  height: 52px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 0 15px;

  background: white;

  border: 1px solid rgba(215, 107, 136, 0.18);

  border-radius: 12px;
}


.boutique-page .shop-filter label,
.boutique-page .shop-sort label {

  color: var(--shop-muted);

  font-size: 8px;

  text-transform: uppercase;

  letter-spacing: 1px;
}


.boutique-page .shop-filter select,
.boutique-page .shop-sort select {

  border: none;

  outline: none;

  background: transparent;

  color: var(--shop-dark);

  font-family: "Raleway", sans-serif;

  font-size: 10px;

  cursor: pointer;
}


/* =========================================================
   BARRE RÉSULTATS
   ========================================================= */

.boutique-page .shop-results-bar {

  max-width: 1200px;

  margin: 0 auto;

  padding: 10px 30px 25px;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.boutique-page #productCount {

  margin: 0;

  color: var(--shop-muted);

  font-size: 10px;
}


.boutique-page .shop-cart-link {

  padding: 11px 18px;

  border-radius: 25px;

  background: var(--shop-dark);

  color: white;

  text-decoration: none;

  font-size: 10px;

  font-weight: 600;

  box-shadow:
    0 8px 20px rgba(84, 40, 50, 0.14);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}


.boutique-page .shop-cart-link:hover {

  background: var(--shop-rose);

  transform: translateY(-2px);
}


/* =========================================================
   GRILLE PRODUITS
   ========================================================= */

.boutique-page .produits {

  max-width: 1200px;

  margin: auto;

  padding: 0 30px 80px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 25px;
}


/* =========================================================
   CARTE PRODUIT
   ========================================================= */

.boutique-page .produit {

  position: relative;

  overflow: hidden;

  background: var(--shop-white);

  border: 1px solid rgba(215, 107, 136, 0.1);

  border-radius: 18px;

  box-shadow:
    0 12px 35px rgba(84, 40, 50, 0.06);

  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}


.boutique-page .produit:hover {

  transform: translateY(-8px);

  box-shadow:
    0 25px 50px rgba(84, 40, 50, 0.12);
}


/* =========================================================
   IMAGE
   ========================================================= */

.boutique-page .produit-image-container {

  position: relative;

  height: 420px;

  overflow: hidden;

  background: var(--shop-pink);
}


.boutique-page .produit-image {

  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 0.6s ease;
}


.boutique-page .produit:hover .produit-image {

  transform: scale(1.04);
}


/* BADGE */

.boutique-page .produit-badge {

  position: absolute;

  top: 15px;
  left: 15px;

  padding: 7px 10px;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.9);

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: 9px;

  letter-spacing: 1px;
}


/* COEUR */

.boutique-page .quick-cart {

  position: absolute;

  top: 15px;
  right: 15px;

  width: 38px;
  height: 38px;

  border: none;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.93);

  color: var(--shop-rose);

  font-size: 17px;

  cursor: pointer;

  box-shadow:
    0 6px 15px rgba(84, 40, 50, 0.1);

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}


.boutique-page .quick-cart:hover {

  transform: scale(1.08);

  background: var(--shop-rose);

  color: white;
}


/* =========================================================
   INFORMATIONS PRODUIT
   ========================================================= */

.boutique-page .produit-info {

  padding: 22px;
}


.boutique-page .produit-category {

  margin: 0 0 7px;

  color: var(--shop-rose);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.boutique-page .produit h3 {

  margin: 0 0 8px;

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: 22px;

  font-weight: 500;
}


.boutique-page .produit-description {

  min-height: 35px;

  margin: 0 0 18px;

  color: var(--shop-muted);

  font-size: 10px;

  line-height: 1.6;
}


/* =========================================================
   PRIX + BOUTON
   ========================================================= */

.boutique-page .produit-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  padding-top: 15px;

  border-top: 1px solid rgba(215, 107, 136, 0.1);
}


.boutique-page .produit-price {

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.boutique-page .produit-price strong {

  color: var(--shop-dark);

  font-size: 12px;
}


.boutique-page .produit-price span {

  color: var(--shop-muted);

  font-size: 9px;
}


/* BOUTON AJOUT */

.boutique-page .add-cart-btn {

  height: 38px;

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 0 13px;

  border: none;

  border-radius: 9px;

  background: var(--shop-rose);

  color: white;

  font-family: "Raleway", sans-serif;

  font-size: 9px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.boutique-page .add-cart-btn:hover {

  background: var(--shop-dark);

  transform: translateY(-2px);
}


.boutique-page .add-cart-btn strong {

  font-size: 16px;

  font-weight: 400;
}


/* =========================================================
   AUCUN PRODUIT
   ========================================================= */

.boutique-page .no-products {

  max-width: 500px;

  margin: 20px auto 80px;

  padding: 50px 25px;

  text-align: center;

  background: white;

  border-radius: 20px;

  box-shadow:
    0 15px 40px rgba(84, 40, 50, 0.06);
}


.boutique-page .no-products-icon {

  margin-bottom: 15px;

  color: var(--shop-rose);

  font-size: 35px;
}


.boutique-page .no-products h3 {

  margin-bottom: 10px;

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: 25px;

  font-weight: 400;
}


.boutique-page .no-products p {

  color: var(--shop-muted);

  font-size: 11px;
}


/* =========================================================
   ERREUR
   ========================================================= */

.boutique-page .shop-error {

  grid-column: 1 / -1;

  padding: 60px;

  text-align: center;

  background: white;

  border-radius: 20px;
}


.boutique-page .shop-error span {

  color: var(--shop-rose);

  font-size: 35px;
}


.boutique-page .shop-error h3 {

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-weight: 400;
}


/* =========================================================
   NOTIFICATION PANIER
   ========================================================= */

.boutique-page .cart-notification {

  position: fixed;

  z-index: 9999;

  right: 25px;
  bottom: 25px;

  padding: 15px 22px;

  border-radius: 12px;

  background: var(--shop-dark);

  color: white;

  font-size: 11px;

  box-shadow:
    0 15px 35px rgba(84, 40, 50, 0.25);

  opacity: 0;

  transform: translateY(15px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.boutique-page .cart-notification.show {

  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   FOOTER
   ========================================================= */

.boutique-page .shop-footer {

  min-height: 100px;

  padding: 30px 6%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 25px;

  background: white;

  border-top: 1px solid rgba(215, 107, 136, 0.1);
}


.boutique-page .shop-footer-brand {

  display: flex;

  align-items: center;

  gap: 10px;
}


/* NOUVEAU LOGO PRINCIPAL FOOTER */

.boutique-page .shop-footer-logo {

  width: 58px;
  height: 58px;

  object-fit: contain;

  display: block;

  flex-shrink: 0;
}


.boutique-page .shop-footer-brand strong {

  display: block;

  color: var(--shop-dark);

  font-family: "Playfair Display", serif;

  font-size: 13px;
}


.boutique-page .shop-footer-brand small {

  display: block;

  color: var(--shop-muted);

  font-size: 7px;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.boutique-page .shop-footer > p {

  margin: 0;

  color: #a69499;

  font-size: 9px;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 950px) {

  .boutique-page .shop-header {

    padding: 15px 4%;
  }


  .boutique-page .shop-nav {

    gap: 15px;
  }


  .boutique-page .shop-account {

    display: none;
  }


  .boutique-page .shop-tools {

    grid-template-columns: 1fr 1fr;
  }


  .boutique-page .shop-search {

    grid-column: 1 / -1;
  }


  .boutique-page .produits {

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


  /* COLLECTION */

  .boutique-page .shop-collection-switch {

    padding: 0 25px;
  }


  .boutique-page .collection-tab {

    flex: 1;

    min-width: 0;
  }


  .boutique-page .collection-title {

    padding: 0 25px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

  .boutique-page .shop-header {

    flex-wrap: wrap;

    padding: 15px 20px;
  }


  /* LOGO MOBILE */

  .boutique-page .shop-logo-image {

    width: 58px;
    height: 58px;
  }


  .boutique-page .shop-nav {

    order: 3;

    width: 100%;

    justify-content: center;

    overflow-x: auto;

    padding-bottom: 5px;
  }


  .boutique-page .shop-nav a {

    white-space: nowrap;

    font-size: 9px;
  }


  .boutique-page .shop-intro {

    padding: 60px 20px 35px;
  }


  .boutique-page .shop-intro h1 {

    font-size: 45px;
  }


  /* COLLECTION MOBILE */

  .boutique-page .shop-collection-switch {

    flex-direction: column;

    gap: 10px;

    margin-bottom: 30px;

    padding: 0 20px;
  }


  .boutique-page .collection-tab {

    width: 100%;

    min-height: 65px;

    padding: 12px 17px;
  }


  .boutique-page .collection-tab strong {

    font-size: 15px;
  }


  .boutique-page .collection-tab small {

    font-size: 8px;
  }


  .boutique-page .collection-tab > span {

    width: 38px;
    height: 38px;

    font-size: 17px;
  }


  /* TITRE COLLECTION */

  .boutique-page .collection-title {

    padding: 0 20px;

    margin-bottom: 25px;
  }


  .boutique-page .collection-title h2 {

    font-size: 30px;
  }


  .boutique-page .collection-title p:last-child {

    font-size: 11px;
  }


  /* OUTILS */

  .boutique-page .shop-tools {

    grid-template-columns: 1fr;

    padding: 0 20px;
  }


  .boutique-page .shop-search {

    grid-column: auto;
  }


  .boutique-page .shop-filter,
  .boutique-page .shop-sort {

    justify-content: space-between;
  }


  /* RÉSULTATS */

  .boutique-page .shop-results-bar {

    padding: 10px 20px 20px;
  }


  .boutique-page .shop-cart-link {

    font-size: 8px;

    padding: 9px 12px;
  }


  /* PRODUITS */

  .boutique-page .produits {

    grid-template-columns: 1fr;

    padding: 0 20px 60px;
  }


  .boutique-page .produit-image-container {

    height: 430px;
  }


  /* FOOTER */

  .boutique-page .shop-footer {

    flex-direction: column;

    text-align: center;

    padding: 30px 20px;
  }


  .boutique-page .shop-footer-logo {

    width: 52px;
    height: 52px;
  }
}
/* =====================================================
   MISS VOGUE LINE — BOUTIQUE RESPONSIVE
   ===================================================== */

/* Grille des produits : 3 colonnes sur ordinateur */
.boutique-page #listeProduits,
.boutique-page .produits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 60px;

    align-items: stretch;
    box-sizing: border-box;
}

/* Cartes de produits */
.boutique-page .produit {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;

    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(215, 107, 136, 0.14);
    border-radius: 18px;

    box-shadow: 0 10px 28px rgba(84, 40, 50, 0.07);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    box-sizing: border-box;
}

.boutique-page .produit:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(84, 40, 50, 0.12);
}

/* Cadre de la photo */
.boutique-page .produit-image-container {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;

    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff7f9;
}

/* Bouton contenant la photo */
.boutique-page .produit-image-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
    padding: 0;

    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;

    cursor: zoom-in;
    overflow: hidden;
}

/* Photo complète, sans découpage */
.boutique-page .produit-image {
    display: block;
    width: 100%;
    height: 100%;
    padding: 8px;

    object-fit: contain;
    object-position: center;

    border: none;
    outline: none;
    border-radius: 0;
    box-shadow: none;

    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.boutique-page .produit-image-button:hover .produit-image {
    transform: scale(1.025);
}

/* Informations produit */
.boutique-page .produit-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;

    padding: 18px;
    box-sizing: border-box;
}

.boutique-page .produit-category {
    margin-bottom: 8px;
}

.boutique-page .produit h3 {
    overflow-wrap: anywhere;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 10px;
}

.boutique-page .produit-description {
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Sélecteur de quantité */
.boutique-page .produit-quantite {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;

    margin-top: 14px;
}

.boutique-page .produit-quantite label {
    color: #78545f;
    font-size: 12px;
    font-weight: 600;
}

.boutique-page .quantite-controle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    width: fit-content;

    border: 1px solid #e7c5d0;
    border-radius: 30px;
    background: #fff;
}

.boutique-page .quantite-controle button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;
    padding: 0;

    border: none;
    background: transparent;
    color: #713b4b;

    font-size: 20px;
    cursor: pointer;

    transition: background 0.2s ease;
}

.boutique-page .quantite-controle button:hover {
    background: #fff0f4;
}

.boutique-page .quantite-controle input {
    width: 38px;
    height: 36px;
    padding: 0;

    border: none;
    outline: none;
    background: transparent;

    color: #713b4b;
    text-align: center;
    font-size: 14px;
    font-weight: 600;

    appearance: textfield;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.boutique-page .quantite-controle input::-webkit-inner-spin-button,
.boutique-page .quantite-controle input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* Prix et bouton Ajouter */
.boutique-page .produit-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: auto;
    padding-top: 18px;
}

.boutique-page .produit-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.boutique-page .produit-price strong {
    overflow-wrap: anywhere;
}

.boutique-page .add-cart-btn {
    max-width: 100%;
    cursor: pointer;
}

/* =====================================================
   AGRANDISSEMENT DES PHOTOS
   ===================================================== */

.boutique-page .mvl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;

    padding: 24px;
    background: rgba(35, 20, 26, 0.90);
    box-sizing: border-box;
}

.boutique-page .mvl-lightbox.is-open {
    display: flex;
}

.boutique-page .mvl-lightbox img {
    display: block;

    width: auto;
    height: auto;
    max-width: min(900px, 92vw);
    max-height: 82vh;

    object-fit: contain;
    background: #fff;

    border: none;
    outline: none;
    border-radius: 8px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
}

.boutique-page .mvl-lightbox-close {
    position: absolute;
    top: 18px;
    right: 22px;

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

    width: 44px;
    height: 44px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.12);
    color: #fff;

    font-size: 28px;
    cursor: pointer;
}

.boutique-page .mvl-lightbox-caption {
    max-width: 90%;
    margin: 0;

    color: #fff;
    text-align: center;
    font-size: 14px;
}

/* =====================================================
   TABLETTES
   ===================================================== */

@media (max-width: 950px) {
    .boutique-page #listeProduits,
    .boutique-page .produits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .boutique-page .produit-info {
        padding: 14px;
    }
}

/* =====================================================
   TÉLÉPHONES : TOUJOURS DEUX PRODUITS PAR LIGNE
   ===================================================== */

@media (max-width: 650px) {
    .boutique-page #listeProduits,
    .boutique-page .produits {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        padding: 0 10px 40px;
    }

    .boutique-page .produit {
        border-radius: 13px;
        transform: none;
    }

    .boutique-page .produit-image-container {
        aspect-ratio: 3 / 4;
    }

    .boutique-page .produit-image {
        padding: 4px;
    }

    .boutique-page .produit-info {
        padding: 10px;
    }

    .boutique-page .produit h3 {
        font-size: 14px;
        line-height: 1.35;
    }

    .boutique-page .produit-description {
        font-size: 12px;
    }

    .boutique-page .produit-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 12px;
    }

    .boutique-page .produit-price strong {
        font-size: 13px;
    }

    .boutique-page .produit-price span {
        font-size: 11px;
    }

    .boutique-page .add-cart-btn {
        width: 100%;
        justify-content: center;
    }

    .boutique-page .quantite-controle button {
        width: 30px;
        height: 32px;
    }

    .boutique-page .quantite-controle input {
        width: 30px;
        height: 32px;
    }

    .boutique-page .produit-badge {
        top: 8px;
        left: 8px;
        padding: 5px 7px;
        font-size: 10px;
    }

    .boutique-page .quick-cart {
        top: 8px;
        right: 8px;
        width: 32px;
        height: 32px;
    }

    .boutique-page .mvl-lightbox {
        padding: 12px;
    }

    .boutique-page .mvl-lightbox img {
        max-width: 94vw;
        max-height: 78vh;
    }
}
/* =====================================================
   MISS VOGUE LINE — AJUSTEMENTS FINAUX DE LA BOUTIQUE
   ===================================================== */

/* 1. ORDINATEUR : 4 PRODUITS PAR LIGNE */
@media (min-width: 1200px) {
    .boutique-page #listeProduits,
    .boutique-page .produits {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px;
        padding-right: 24px;
        padding-left: 24px;
    }
}

/* 2. ALIGNEMENT DES CARTES ET DES SÉLECTEURS */
.boutique-page .produit {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.boutique-page .produit-info {
    display: flex;
    flex: 1;
    flex-direction: column;
}

/* Réserve une hauteur identique aux titres */
.boutique-page .produit-info h3 {
    min-height: 2.8em;
    margin-bottom: 10px;
}

/* Les descriptions occupent la même hauteur,
   même si certains produits n'en ont pas */
.boutique-page .produit-description {
    min-height: 3em;
    line-height: 1.5;
}

/* Le sélecteur de quantité est placé au même niveau */
.boutique-page .produit-quantite {
    margin-top: auto;
    padding-top: 14px;
    min-height: 76px;
    box-sizing: border-box;
}

/* Prix et bouton restent en bas des cartes */
.boutique-page .produit-bottom {
    margin-top: auto;
    padding-top: 14px;
}

/* 3. PHOTOS : COINS LÉGÈREMENT ARRONDIS */
.boutique-page .produit-image-container {
    overflow: hidden;
    border-radius: 14px;
}

/* Arrondit les quatre coins de la photo */
.boutique-page .produit-image {
    border-radius: 12px;
    object-fit: contain;
    object-position: center;
}

/* Le bouton qui contient la photo respecte aussi les arrondis */
.boutique-page .produit-image-button {
    overflow: hidden;
    border-radius: 14px;
}

/* 4. TABLETTE : 3 PRODUITS PAR LIGNE */
@media (min-width: 651px) and (max-width: 1199px) {
    .boutique-page #listeProduits,
    .boutique-page .produits {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .boutique-page .produit-info {
        padding: 12px;
    }

    .boutique-page .produit-info h3 {
        font-size: 17px;
    }
}

/* 5. TÉLÉPHONE : ON CONSERVE 2 PRODUITS PAR LIGNE */
@media (max-width: 650px) {
    .boutique-page #listeProduits,
    .boutique-page .produits {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px;
        padding-right: 10px;
        padding-left: 10px;
    }

    .boutique-page .produit-info h3 {
        min-height: 2.8em;
        font-size: 14px;
    }

    .boutique-page .produit-description {
        min-height: 3em;
        font-size: 12px;
    }

    .boutique-page .produit-quantite {
        min-height: 70px;
        padding-top: 10px;
    }

    .boutique-page .produit-image-container {
        border-radius: 10px;
    }

    .boutique-page .produit-image-button {
        border-radius: 10px;
    }

    .boutique-page .produit-image {
        border-radius: 9px;
        padding: 4px;
    }
}
/* ================================================
   MISS VOGUE LINE — AJUSTEMENT FINAL DES PHOTOS
   ================================================ */

/* On conserve le cadre rose, mais on réduit sa marge intérieure */
.boutique-page .produit-image-container {
    padding: 4px !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    box-sizing: border-box;
}

/* La photo remplit presque entièrement le cadre rose */
.boutique-page .produit-image-button {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
    border: none !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Coins arrondis et photo bien cadrée */
.boutique-page .produit-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 11px !important;

    box-sizing: border-box;
}

/* Petit effet au survol, sans déformer la carte */
.boutique-page .produit-image-button:hover .produit-image {
    transform: scale(1.015);
}

/* Téléphone : cadre fin et coins légèrement arrondis */
@media (max-width: 650px) {
    .boutique-page .produit-image-container {
        padding: 3px !important;
        border-radius: 11px !important;
    }

    .boutique-page .produit-image-button,
    .boutique-page .produit-image {
        border-radius: 9px !important;
    }
}
/* =========================================
   MISS VOGUE LINE
   AGRANDISSEMENT DES PHOTOS
========================================= */

.produit-image-container {
    position: relative;
    overflow: hidden;
}

.produit-image {
    cursor: zoom-in;
    transition: transform 0.35s ease;
}

.produit-image:hover {
    transform: scale(1.04);
}

.zoom-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 7px 11px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    color: #222;
    font-size: 12px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.produit-image-container:hover .zoom-hint {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   FENÊTRE PHOTO AGRANDIE
========================================= */

.mvl-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(5px);
}

.mvl-lightbox.active {
    display: flex;
}

.mvl-lightbox-content {
    width: min(900px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mvl-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.4);
}

.mvl-lightbox-caption {
    margin: 15px 0 5px;
    color: #fff;
    font-family: "Playfair Display", serif;
    font-size: 20px;
    text-align: center;
}

.mvl-lightbox-help {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    text-align: center;
}

.mvl-lightbox-close {
    position: absolute;
    top: 18px;
    right: 24px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mvl-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

body.mvl-no-scroll {
    overflow: hidden;
}


/* =========================================
   CHOIX DE LA QUANTITÉ
========================================= */

.mvl-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0;
}

.mvl-quantity label {
    font-size: 13px;
    font-weight: 500;
}

.mvl-quantity-control {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #dedede;
    border-radius: 5px;
    background: #fff;
}

.mvl-quantity-control button {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: #f7f7f7;
    color: #222;
    font-size: 21px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.mvl-quantity-control button:hover {
    background: #eaeaea;
}

.mvl-quantity-input {
    width: 42px;
    height: 36px;
    padding: 0;
    border: none;
    border-right: 1px solid #dedede;
    border-left: 1px solid #dedede;
    border-radius: 0;
    background: #fff;
    color: #222;
    font-size: 14px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.mvl-quantity-input::-webkit-inner-spin-button,
.mvl-quantity-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}


/* =========================================
   BOUTON AJOUTER AU PANIER
========================================= */

.produit .add-cart-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.produit .quick-cart {
    cursor: pointer;
}


/* =========================================
   AFFICHAGE SUR MOBILE
========================================= */

@media (max-width: 600px) {
    .mvl-lightbox {
        padding: 12px;
    }

    .mvl-lightbox-image {
        max-height: 72vh;
    }

    .mvl-lightbox-close {
        top: 12px;
        right: 12px;
    }

    .mvl-quantity {
        gap: 8px;
    }

    .zoom-hint {
        opacity: 1;
        transform: none;
        font-size: 11px;
    }
}
/* =========================================
   MISS VOGUELINE — FINITIONS ÉLÉGANTES
========================================= */

/* 1. Masquer le texte « Agrandir » */
.boutique-page .zoom-hint {
    display: none !important;
}

/* La photo reste cliquable */
.boutique-page .produit-image {
    cursor: zoom-in;
}

/* 2. Boutons de quantité plus raffinés */
.boutique-page .mvl-quantity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin: 8px 0 18px;
}

.boutique-page .mvl-quantity label {
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    color: #573344;
}

.boutique-page .mvl-quantity-control {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
    border: 1px solid #ead5dd;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(90, 35, 60, 0.05);
}

.boutique-page .mvl-quantity-control button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #fff8fa;
    color: #a74768;
    font-family: "Raleway", sans-serif;
    font-size: 21px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.boutique-page .mvl-quantity-control button:hover {
    background: #d96687;
    color: #fff;
}

.boutique-page .mvl-quantity-input {
    width: 44px;
    height: 38px;
    padding: 0;
    border: none;
    border-left: 1px solid #f0e2e7;
    border-right: 1px solid #f0e2e7;
    border-radius: 0;
    background: #fff;
    color: #512238;
    font-family: "Raleway", sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
    appearance: textfield;
    -moz-appearance: textfield;
}

.boutique-page .mvl-quantity-input::-webkit-inner-spin-button,
.boutique-page .mvl-quantity-input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* 3. Bouton flottant « Voir mon panier » */
.mvl-panier-flottant {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    background: #d96687;
    color: #fff;
    box-shadow: 0 8px 25px rgba(126, 45, 75, 0.25);
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mvl-panier-flottant:hover {
    background: #bd4f70;
    color: #fff;
    transform: translateY(-2px);
}

.mvl-panier-icone {
    font-size: 19px;
    line-height: 1;
}

.mvl-panier-compteur {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    padding: 0 5px;
    border-radius: 50%;
    background: #fff;
    color: #bd4f70;
    font-size: 12px;
}

/* Les boutons de collection restent accessibles */
.collection-tab {
    cursor: pointer;
    scroll-margin-top: 90px;
}

/* Sur téléphone */
@media (max-width: 600px) {
    .mvl-panier-flottant {
        right: 14px;
        bottom: 18px;
        min-height: 48px;
        padding: 0 17px;
        font-size: 13px;
    }

    .boutique-page .mvl-quantity-control button {
        width: 38px;
        height: 38px;
    }
}
/* Bouton flottant Voir mon panier : compact */
.mvl-panier-flottant {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    min-height: 34px !important;
    padding: 0 10px !important;

    background: #512631 !important;
    color: #fff !important;

    border: none !important;
    border-radius: 22px !important;
    box-shadow: 0 3px 10px rgba(81, 38, 49, 0.15) !important;

    font-family: "Raleway", sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transform: none !important;
}

.mvl-panier-flottant:hover {
    background: #512631 !important;
    color: #fff !important;
    transform: none !important;
}

.mvl-panier-flottant .mvl-panier-icone {
    font-size: 13px !important;
}

.mvl-panier-flottant .mvl-panier-compteur {
    min-width: 16px !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin-left: 2px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50% !important;
    background: #fff !important;
    color: #512631 !important;
    font-size: 10px !important;
}

@media (max-width: 600px) {
    .mvl-panier-flottant {
        right: 10px;
        bottom: 12px;
        min-height: 32px !important;
        padding: 0 9px !important;
        font-size: 10px !important;
    }
}
/* =========================================================
   MISS VOGUE LINE — ESPACE ADMIN
   ========================================================= */

body.admin {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at top right, rgba(255, 190, 215, 0.35), transparent 30%),
    linear-gradient(135deg, #fff7f9 0%, #ffe9f0 50%, #fffaf7 100%);
  color: #552737;
  font-family: 'Raleway', sans-serif;
}


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

.admin-header {
  width: 100%;
  box-sizing: border-box;
  padding: 22px 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(113, 43, 67, 0.08);
  backdrop-filter: blur(15px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #642b3e;
  color: #e8c879;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  box-shadow: 0 8px 25px rgba(100, 43, 62, 0.18);
}

.admin-brand h1 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #642b3e;
}

.admin-brand span {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #b07b89;
}

.admin-shop-btn {
  text-decoration: none;
  color: #642b3e;
  border: 1px solid #e6cbd2;
  padding: 11px 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.7);
  transition: 0.3s ease;
}

.admin-shop-btn span {
  margin-left: 6px;
}

.admin-shop-btn:hover {
  background: #642b3e;
  color: #fff;
  transform: translateY(-2px);
}


/* =========================================================
   CONTENEUR
   ========================================================= */

.admin-container {
  width: min(1120px, 90%);
  margin: 0 auto;
  padding: 60px 0 80px;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.admin-intro {
  margin-bottom: 35px;
}

.admin-kicker {
  color: #ff4f9a;
  font-size: 0.72rem;
  letter-spacing: 4px;
  font-weight: 700;
}

.admin-intro h2 {
  margin: 8px 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem, 5vw, 4.2rem);
  color: #642b3e;
  line-height: 1.1;
}

.admin-intro h2 span {
  color: #e8c879;
  font-size: 0.55em;
  vertical-align: middle;
}

.admin-intro p {
  max-width: 600px;
  color: #9b7b85;
  font-size: 1rem;
  line-height: 1.7;
}


/* =========================================================
   STATISTIQUES
   ========================================================= */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 45px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 188, 211, 0.5);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(104, 42, 64, 0.07);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff0f5;
  font-size: 1.3rem;
}

.stat-card span {
  display: block;
  color: #a88a94;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.stat-card strong {
  display: block;
  margin-top: 4px;
  color: #642b3e;
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.admin-section {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(235, 207, 216, 0.8);
  border-radius: 28px;
  padding: 38px;
  margin-bottom: 35px;
  box-shadow: 0 20px 50px rgba(99, 40, 61, 0.07);
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}

.section-number {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #642b3e;
  color: #e8c879;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Playfair Display', serif;
}

.section-heading span {
  color: #ff4f9a;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 3px;
}

.section-heading h3 {
  margin: 5px 0;
  color: #642b3e;
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
}

.section-heading p {
  margin: 0;
  color: #a98a94;
}


/* =========================================================
   FORMULAIRE
   ========================================================= */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

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

.form-group.full {
  grid-column: 1 / -1;
}

.form-group label {
  margin-bottom: 8px;
  color: #642b3e;
  font-weight: 600;
}

.form-group label span {
  color: #b69ca5;
  font-size: 0.8rem;
  font-weight: 400;
}


/* =========================================================
   CHAMPS INPUT + SELECT
   ========================================================= */

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid #ead1da;
  border-radius: 13px;
  background: #fffafd;
  color: #642b3e;
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
  outline: none;
  transition: 0.3s ease;
}


/* Nouveau : style des menus Vêtement / Accessoire */

.form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #b07b89 50%),
    linear-gradient(135deg, #b07b89 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
  padding-right: 42px;
}

.form-group select:hover {
  border-color: #dca6b7;
  background-color: #fff7fa;
}

.form-group select:focus {
  border-color: #ff75ae;
  box-shadow: 0 0 0 4px rgba(255, 117, 174, 0.1);
  background-color: #fff;
}

.form-group select option {
  background: #fff;
  color: #642b3e;
  padding: 10px;
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.form-group textarea {
  resize: vertical;
  min-height: 110px;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: #ff75ae;
  box-shadow: 0 0 0 4px rgba(255, 117, 174, 0.1);
  background: #fff;
}


/* =========================================================
   IMAGE
   ========================================================= */

.file-upload {
  position: relative;
}

.file-upload input {
  padding: 14px;
  cursor: pointer;
}

.file-message {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  color: #9e7f89;
  font-size: 0.85rem;
}

.file-message span {
  font-size: 1.5rem;
}

.file-message strong,
.file-message small {
  display: block;
}

.file-message strong {
  color: #642b3e;
}

.file-message small {
  margin-top: 3px;
}


/* =========================================================
   BOUTON AJOUT
   ========================================================= */

.add-product-btn {
  width: 100%;
  margin-top: 28px;
  padding: 16px 25px;
  border: none;
  border-radius: 14px;
  background: #d8ad2f;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  transition: 0.3s ease;
}

.add-product-btn span {
  margin-right: 7px;
  font-size: 1.2rem;
}

.add-product-btn:hover {
  background: #642b3e;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(100, 43, 62, 0.18);
}

.add-product-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}


/* =========================================================
   RECHERCHE
   ========================================================= */

.admin-search {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 550px;
  margin: 0 auto 30px;
  padding: 13px 18px;
  background: #fff7fa;
  border: 1px solid #efd6de;
  border-radius: 30px;
}

.admin-search span {
  color: #ff4f9a;
  font-size: 1.5rem;
}

.admin-search input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: #642b3e;
  font-family: 'Raleway', sans-serif;
  font-size: 0.95rem;
}

.admin-search input::placeholder {
  color: #bda4ad;
}


/* =========================================================
   PRODUITS
   ========================================================= */

.admin-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.admin-product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f0dce3;
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(100, 43, 62, 0.07);
  transition: 0.3s ease;
}

.admin-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(100, 43, 62, 0.13);
}

.product-image-wrapper {
  width: 100%;
  height: 280px;
  overflow: hidden;
  background: #fff4f7;
}

.admin-product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.5s ease;
}

.admin-product-card:hover .admin-product-image {
  transform: scale(1.04);
}

.admin-product-info {
  padding: 23px 23px 10px;
}

.product-label {
  display: inline-block;
  color: #ff4f9a;
  font-size: 0.62rem;
  letter-spacing: 3px;
  font-weight: 700;
}


/* =========================================================
   NOUVEAU : CATÉGORIE DU PRODUIT
   ========================================================= */

.product-category-admin {
  display: inline-block;
  margin-left: 8px;
  padding: 5px 10px;
  border-radius: 20px;
  background: #fff3f7;
  border: 1px solid #f2d7e0;
  color: #9b6677;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.admin-product-info h4 {
  margin: 10px 0 8px;
  color: #642b3e;
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
}

.product-price {
  color: #642b3e;
  font-size: 1.1rem;
  font-weight: 700;
}

.product-euro {
  margin-top: 3px;
  color: #a88a94;
  font-size: 0.78rem;
}

.product-description {
  margin: 12px 0 0;
  color: #947780;
  font-size: 0.85rem;
  line-height: 1.6;
}


/* =========================================================
   NOUVEAU : PETITE DISTINCTION ACCESSOIRE / VÊTEMENT
   ========================================================= */

.admin-product-card:has(.product-label:first-child) {
  /* garde le style général existant */
}

.product-label {
  text-transform: uppercase;
}


/* =========================================================
   BOUTON SUPPRESSION
   ========================================================= */

.delete-product {
  align-self: flex-start;
  margin: 10px 23px 23px;
  padding: 9px 15px;
  border: 1px solid #efd2db;
  border-radius: 20px;
  background: #fff6f8;
  color: #a84f68;
  font-family: 'Raleway', sans-serif;
  cursor: pointer;
  transition: 0.3s ease;
}

.delete-product span {
  margin-right: 5px;
  font-size: 1.1rem;
}

.delete-product:hover {
  background: #642b3e;
  border-color: #642b3e;
  color: white;
}


/* =========================================================
   AUCUN PRODUIT
   ========================================================= */

.admin-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  border: 1px dashed #e8cdd6;
  border-radius: 20px;
  background: #fffafd;
}

.empty-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.admin-empty h3 {
  margin: 0 0 8px;
  color: #642b3e;
  font-family: 'Playfair Display', serif;
}

.admin-empty p {
  margin: 0;
  color: #a58a93;
}


/* =========================================================
   BAS DE PAGE
   ========================================================= */

.admin-bottom {
  text-align: center;
}

.back-shop {
  color: #642b3e;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}

.back-shop:hover {
  color: #ff4f9a;
}

.admin-footer {
  padding: 25px;
  text-align: center;
  border-top: 1px solid rgba(100, 43, 62, 0.08);
  color: #a68b94;
  font-size: 0.8rem;
}

.admin-footer span {
  margin: 0 8px;
  color: #e8c879;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {

  .admin-stats {
    grid-template-columns: 1fr;
  }

  .admin-products {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .form-group.full {
    grid-column: auto;
  }

  .admin-section {
    padding: 25px;
  }

}


@media (max-width: 600px) {

  .admin-header {
    padding: 16px 5%;
  }

  .admin-brand h1 {
    font-size: 1.05rem;
  }

  .admin-logo {
    width: 45px;
    height: 45px;
  }

  .admin-shop-btn {
    padding: 9px 12px;
    font-size: 0.8rem;
  }

  .admin-container {
    width: 92%;
    padding-top: 40px;
  }

  .section-heading {
    align-items: flex-start;
  }

  .section-heading h3 {
    font-size: 1.4rem;
  }

  .product-image-wrapper {
    height: 250px;
  }

  /* Nouveau : éviter que les badges se collent sur petit écran */
  .product-label,
  .product-category-admin {
    margin-bottom: 5px;
  }

  .product-category-admin {
    margin-left: 4px;
  }

}
/* ========================================
   LOGO PRINCIPAL - PAGE ADMIN
======================================== */

.admin-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.admin-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* =========================================================
   PANIER - MISS VOGUE LINE
   ========================================================= */

body.panier {
  margin: 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 182, 193, 0.22), transparent 30%),
    linear-gradient(135deg, #fff8f9 0%, #ffe5eb 50%, #ffd5df 100%);
  color: #542635;
  font-family: 'Raleway', sans-serif;
  min-height: 100vh;
}


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

.panier-header {
  width: 100%;
  padding: 25px 6%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(255, 250, 251, 0.94);
  border-bottom: 1px solid rgba(104, 42, 62, 0.08);

  backdrop-filter: blur(10px);
}


.panier-logo {
  display: flex;
  align-items: center;
  gap: 15px;
}


/* NOUVEAU LOGO PRINCIPAL */
.panier-logo-image {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}


.logo-circle {
  width: 58px;
  height: 58px;

  border-radius: 50%;

  background: #63283c;
  color: #e8c86a;

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

  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;

  box-shadow: 0 8px 20px rgba(99, 40, 60, 0.18);
}


.logo-text {
  display: flex;
  flex-direction: column;
}


.logo-text span {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  color: #63283c;
}


.logo-text small {
  margin-top: 3px;

  font-size: 0.65rem;
  letter-spacing: 3px;

  color: #9c7d86;
}


.retour-boutique {
  text-decoration: none;

  padding: 11px 22px;

  border: 1px solid #e8cfd5;
  border-radius: 30px;

  color: #63283c;

  font-size: 0.9rem;

  transition: 0.3s ease;
}


.retour-boutique:hover {
  background: #63283c;
  color: white;
  transform: translateY(-2px);
}


/* =========================================================
   CONTENEUR
   ========================================================= */

.panier-container {
  width: min(1200px, 90%);
  margin: auto;
  padding: 60px 0;
}


/* =========================================================
   INTRODUCTION
   ========================================================= */

.page-intro {
  text-align: center;
  margin-bottom: 60px;
}


.page-intro span {
  color: #ff4f91;

  font-size: 0.75rem;
  font-weight: 700;

  letter-spacing: 5px;
}


.page-intro h1 {
  margin: 12px 0 8px;

  font-family: 'Playfair Display', serif;

  font-size: clamp(2.5rem, 6vw, 4.5rem);

  font-weight: 500;

  color: #63283c;
}


.page-intro p {
  color: #987d85;
  font-size: 1rem;
}


/* =========================================================
   SECTIONS
   ========================================================= */

.panier-section,
.livraison-section,
.commande-section,
.paiement-section {

  background: rgba(255, 255, 255, 0.86);

  border: 1px solid rgba(99, 40, 60, 0.08);

  border-radius: 30px;

  padding: 35px;

  margin-bottom: 30px;

  box-shadow:
    0 20px 50px rgba(99, 40, 60, 0.08);
}


.section-title {
  display: flex;
  align-items: center;
  gap: 18px;

  margin-bottom: 30px;
}


.section-number {

  width: 50px;
  height: 50px;

  flex-shrink: 0;

  border-radius: 50%;

  background: #63283c;
  color: #e8c86a;

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

  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
}


.section-title h2 {

  margin: 0;

  font-family: 'Playfair Display', serif;

  font-size: 2rem;

  font-weight: 500;

  color: #63283c;
}


.section-title p {

  margin: 5px 0 0;

  color: #a0848d;

  font-size: 0.9rem;
}


/* =========================================================
   PRODUITS DU PANIER
   ========================================================= */

.panier-produits {
  display: flex;
  flex-direction: column;
  gap: 15px;
}


.item {

  position: relative;

  display: flex;
  align-items: center;

  gap: 30px;

  padding: 25px;

  background: #fffafb;

  border: 1px solid #f0dce1;

  border-radius: 24px;

  transition: 0.3s ease;
}


.item:hover {

  transform: translateY(-3px);

  box-shadow:
    0 15px 30px rgba(99, 40, 60, 0.08);
}


.item-image {
  width: 145px;
  height: 145px;

  flex-shrink: 0;

  overflow: hidden;

  border-radius: 18px;

  background: #f7e8ec;
}


.item-image img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.5s ease;
}


.item:hover .item-image img {
  transform: scale(1.05);
}


.item-info {
  flex: 1;
}


.item-brand {

  display: block;

  margin-bottom: 8px;

  color: #ff4f91;

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 4px;
}


.item-info h3 {

  margin: 0 0 12px;

  font-family: 'Playfair Display', serif;

  font-size: 1.6rem;

  font-weight: 500;

  color: #63283c;
}


.item-price {

  margin: 0;

  font-size: 1.1rem;

  font-weight: 600;

  color: #8b6370;
}


.supprimer-btn {

  width: 45px;
  height: 45px;

  border-radius: 50%;

  border: 1px solid #f0d6dd;

  background: white;

  color: #a96779;

  font-size: 1.5rem;

  cursor: pointer;

  transition: 0.3s ease;
}


.supprimer-btn:hover {

  background: #63283c;
  color: white;

  transform: rotate(90deg);
}


/* =========================================================
   PANIER VIDE
   ========================================================= */

.panier-vide {

  text-align: center;

  padding: 60px 20px;

  background: #fffafb;

  border: 1px dashed #e7cbd3;

  border-radius: 25px;
}


.panier-vide-icon {

  font-size: 3rem;

  margin-bottom: 15px;
}


.panier-vide h3 {

  font-family: 'Playfair Display', serif;

  color: #63283c;

  font-size: 1.8rem;
}


.panier-vide p {

  color: #987d85;

  margin-bottom: 25px;
}


.panier-vide a {

  display: inline-block;

  padding: 13px 25px;

  border-radius: 30px;

  background: #63283c;

  color: white;

  text-decoration: none;

  transition: 0.3s ease;
}


.panier-vide a:hover {
  background: #ff4f91;
}


/* =========================================================
   LIVRAISON
   ========================================================= */

.livraison-card {

  padding: 30px;

  border-radius: 25px;

  background:
    linear-gradient(
      135deg,
      #fff3f6,
      #fffafb
    );

  border: 1px solid #f1d9df;
}


.livraison-intro {

  display: flex;

  align-items: flex-start;

  gap: 20px;

  margin-bottom: 30px;
}


.livraison-icon {

  width: 55px;
  height: 55px;

  flex-shrink: 0;

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

  background: white;

  border-radius: 50%;

  font-size: 1.7rem;

  box-shadow: 0 8px 20px rgba(99, 40, 60, 0.08);
}


.livraison-intro h3 {

  margin: 0 0 7px;

  font-family: 'Playfair Display', serif;

  font-size: 1.5rem;

  color: #63283c;
}


.livraison-intro p {

  margin: 0;

  color: #937680;

  line-height: 1.7;
}


/* =========================================================
   FORMULAIRE LIVRAISON
   ========================================================= */

.livraison-form {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}


.form-group {

  display: flex;

  flex-direction: column;

  gap: 8px;
}


.form-group.full-width {
  grid-column: 1 / -1;
}


.form-group label {

  color: #63283c;

  font-size: 0.85rem;

  font-weight: 600;
}


.form-group label span {

  color: #a58b93;

  font-weight: 400;
}


.form-group input,
.form-group textarea {

  width: 100%;

  box-sizing: border-box;

  padding: 14px 16px;

  border: 1px solid #ead5db;

  border-radius: 12px;

  background: white;

  color: #63283c;

  font-family: 'Raleway', sans-serif;

  font-size: 0.95rem;

  outline: none;

  transition: 0.3s ease;
}


.form-group textarea {
  resize: vertical;
}


.form-group input:focus,
.form-group textarea:focus {

  border-color: #ff75a8;

  box-shadow:
    0 0 0 4px rgba(255, 117, 168, 0.1);
}


.form-group input::placeholder,
.form-group textarea::placeholder {

  color: #bba4aa;
}


/* =========================================================
   CONTACT SERVICE
   ========================================================= */

.contact-service {

  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 25px;

  padding: 20px;

  border-radius: 18px;

  background: #63283c;

  color: white;
}


.contact-icon {

  width: 48px;
  height: 48px;

  flex-shrink: 0;

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

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.10);

  font-size: 1.5rem;
}


.contact-service h3 {

  margin: 0 0 5px;

  font-family: 'Playfair Display', serif;

  font-size: 1.2rem;
}


.contact-service p {

  margin: 0 0 8px;

  color: #f2dce2;

  font-size: 0.85rem;

  line-height: 1.5;
}


/* =========================================================
   BOUTONS APPEL + WHATSAPP
   ========================================================= */

.contact-options {

  display: flex;

  gap: 12px;

  margin-top: 16px;

  flex-wrap: wrap;
}


.contact-link {

  min-width: 205px;

  display: flex;

  align-items: center;

  gap: 10px;

  box-sizing: border-box;

  padding: 11px 16px;

  border-radius: 14px;

  text-decoration: none;

  font-family: 'Raleway', sans-serif;

  color: #ffffff;

  border: 1px solid rgba(255, 255, 255, 0.16);

  background: rgba(255, 255, 255, 0.08);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


.contact-link strong {

  display: block;

  color: #f0cf72;

  font-size: 0.85rem;

  font-weight: 700;

  line-height: 1.2;
}


.contact-link span {

  display: block;

  margin-top: 3px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 0.72rem;

  font-weight: 400;

  line-height: 1.2;
}


/* =========================================================
   BOUTON APPEL
   ========================================================= */

.contact-call {

  border-color: rgba(232, 200, 106, 0.30);
}


.contact-call:hover {

  background: rgba(232, 200, 106, 0.14);

  border-color: rgba(232, 200, 106, 0.65);

  transform: translateY(-3px);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.14);
}


/* =========================================================
   BOUTON WHATSAPP
   ========================================================= */

.contact-whatsapp {

  border-color: rgba(100, 210, 130, 0.30);
}


.contact-whatsapp strong {

  color: #7ee09a;
}


.contact-whatsapp:hover {

  background: rgba(80, 190, 110, 0.14);

  border-color: rgba(100, 210, 130, 0.65);

  transform: translateY(-3px);

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.14);
}


/* Effet lors du clic */

.contact-link:active {

  transform: translateY(0);

}


/* =========================================================
   RÉCAPITULATIF
   ========================================================= */

.recapitulatif {

  max-width: 700px;

  margin: 0 auto;

  padding: 30px;

  border-radius: 25px;

  background: #fffafb;

  border: 1px solid #efd9df;
}


.recap-ligne {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

  color: #8e727b;
}


.recap-ligne strong {

  color: #63283c;

  font-weight: 600;
}


.livraison-prix {
  color: #a9828c !important;
  font-weight: 500 !important;
}


.recap-separation {

  height: 1px;

  background: #ecd9de;

  margin: 10px 0;
}


.recap-total {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 15px;
}


.recap-total span {

  font-family: 'Playfair Display', serif;

  font-size: 1.5rem;

  color: #63283c;
}


.recap-total strong {

  font-family: 'Playfair Display', serif;

  font-size: 1.7rem;

  color: #63283c;
}


/* =========================================================
   PAIEMENT
   ========================================================= */

.paiement {

  display: flex;

  justify-content: center;

  gap: 20px;

  flex-wrap: wrap;
}


.paiement-btn {

  min-width: 260px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  padding: 16px 25px;

  border: none;

  border-radius: 15px;

  cursor: pointer;

  background: #63283c;

  color: white;

  font-family: 'Raleway', sans-serif;

  transition: 0.3s ease;

  box-shadow:
    0 10px 20px rgba(99, 40, 60, 0.12);
}


.paiement-btn:hover {

  transform: translateY(-4px);

  box-shadow:
    0 15px 30px rgba(99, 40, 60, 0.18);
}


.paiement-btn img {

  width: 42px;
  height: 42px;

  object-fit: contain;

  background: white;

  border-radius: 10px;

  padding: 4px;
}


.paiement-btn span {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  font-size: 1.05rem;

  font-weight: 600;
}


.paiement-btn small {

  font-size: 0.7rem;

  opacity: 0.75;

  margin-bottom: 2px;
}


.paiement-note {

  margin: 25px 0 0;

  text-align: center;

  color: #9b8088;

  font-size: 0.8rem;
}


/* =========================================================
   FOOTER
   ========================================================= */

.panier-footer {

  text-align: center;

  padding: 35px 20px;

  background: #63283c;

  color: white;
}


.panier-footer p {

  margin: 0 0 8px;

  font-family: 'Playfair Display', serif;

  font-size: 1rem;
}


.panier-footer span {

  color: #e8c86a;

  font-size: 0.75rem;

  letter-spacing: 2px;
}


/* =========================================================
   RESPONSIVE — TÉLÉPHONE
   ========================================================= */

@media (max-width: 768px) {

  .panier-header {

    padding: 20px;

  }


  /* Taille du logo principal sur mobile */
  .panier-logo-image {
    width: 58px;
    height: 58px;
  }


  .logo-text span {
    font-size: 1.05rem;
  }


  .logo-text small {
    font-size: 0.5rem;
    letter-spacing: 2px;
  }


  .logo-circle {

    width: 48px;
    height: 48px;

  }


  .retour-boutique {

    padding: 9px 13px;

    font-size: 0.75rem;

  }


  .panier-container {

    width: 92%;

    padding: 35px 0;

  }


  .panier-section,
  .livraison-section,
  .commande-section,
  .paiement-section {

    padding: 22px;

    border-radius: 22px;

  }


  .section-title h2 {

    font-size: 1.5rem;

  }


  .item {

    gap: 15px;

    padding: 15px;

  }


  .item-image {

    width: 95px;
    height: 110px;

  }


  .item-info h3 {

    font-size: 1.15rem;

  }


  .item-brand {

    font-size: 0.55rem;

    letter-spacing: 2px;

  }


  .supprimer-btn {

    width: 38px;
    height: 38px;

    font-size: 1.2rem;

  }


  .livraison-form {

    grid-template-columns: 1fr;

  }


  .form-group.full-width {

    grid-column: auto;

  }


  .livraison-card {

    padding: 20px;

  }


  .contact-service {

    align-items: flex-start;

  }


  /* Contact sur téléphone */
  .contact-options {

    width: 100%;

    flex-direction: column;

    gap: 10px;

  }


  .contact-link {

    width: 100%;

    min-width: 0;

  }


  .paiement-btn {

    width: 100%;

    min-width: 0;

  }

}


/* =========================================================
   MISS VOGUE LINE
   PAGE ACCUEIL UNIQUEMENT
   ========================================================= */


/* =========================================================
   VARIABLES LOCALES
   ========================================================= */

.home-page {
  --home-rose: var(--rose, #b76e79);
  --home-rose-light: var(--rose-clair, #f5dfe2);
  --home-gold: var(--doré, #c49a5a);
  --home-dark: #542832;
  --home-text: #35262a;
  --home-muted: #806c70;
  --home-cream: #fffaf6;
  --home-white: #ffffff;

  margin: 0;
  padding: 0;

  background:
    radial-gradient(
      circle at 5% 10%,
      rgba(245, 223, 226, 0.55),
      transparent 25%
    ),
    var(--home-cream);

  color: var(--home-text);

  font-family: "Raleway", sans-serif;
}


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

.home-page .home-header {
  position: relative;
  z-index: 100;

  min-height: 90px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 18px 6%;

  background: rgba(255, 250, 246, 0.94);

  border-bottom: 1px solid rgba(183, 110, 121, 0.12);

  backdrop-filter: blur(15px);
}


/* LOGO */

.home-page .home-logo {
  display: flex;
  align-items: center;

  gap: 12px;

  flex-shrink: 0;
}


.home-page .home-logo-mark {
  width: 48px;
  height: 48px;

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

  border-radius: 50%;

  background: var(--home-dark);

  color: #e5c994;

  font-family: "Playfair Display", serif;

  font-size: 15px;

  letter-spacing: 1px;

  box-shadow: 0 8px 20px rgba(84, 40, 50, 0.15);
}


.home-page .home-logo-image {
  width: 70px;
  height: 70px;

  object-fit: contain;

  display: block;

  flex-shrink: 0;
}


.home-page .home-logo-text strong {
  display: block;

  color: var(--home-dark);

  font-family: "Playfair Display", serif;

  font-size: 18px;

  font-weight: 500;
}


.home-page .home-logo-text span {
  display: block;

  margin-top: 2px;

  color: var(--home-muted);

  font-size: 8px;

  letter-spacing: 2.5px;

  text-transform: uppercase;
}


/* NAVIGATION */

.home-page .home-nav ul {
  display: flex;

  align-items: center;

  gap: 30px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.home-page .home-nav a {
  position: relative;

  color: var(--home-text);

  text-decoration: none;

  font-size: 12px;

  font-weight: 500;

  transition: color 0.3s ease;
}


.home-page .home-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 0;
  height: 1px;

  background: var(--home-rose);

  transition: width 0.3s ease;
}


.home-page .home-nav a:hover,
.home-page .home-nav a.active {
  color: var(--home-rose);
}


.home-page .home-nav a:hover::after,
.home-page .home-nav a.active::after {
  width: 100%;
}


/* ACTIONS */

.home-page .home-header-actions {
  display: flex;

  align-items: center;

  gap: 15px;
}


.home-page .home-account {
  padding: 10px 18px;

  border: 1px solid rgba(183, 110, 121, 0.35);

  border-radius: 30px;

  color: var(--home-dark);

  text-decoration: none;

  font-size: 10px;

  font-weight: 600;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}


.home-page .home-account:hover {
  background: var(--home-dark);

  color: white;
}


.home-page .home-language {
  width: 38px;
  height: 38px;

  border: 1px solid rgba(183, 110, 121, 0.3);

  border-radius: 50%;

  background: transparent;

  color: var(--home-dark);

  font-size: 10px;

  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.3s ease,
    color 0.3s ease;
}


.home-page .home-language:hover {
  background: var(--home-rose);

  color: white;
}


/* =========================================================
   HERO
   ========================================================= */

.home-page .home-hero {
  min-height: 720px;

  display: grid;

  grid-template-columns: 1fr 0.9fr;

  align-items: center;

  gap: 60px;

  padding: 70px 8% 80px;

  overflow: hidden;
}


.home-page .home-hero-content {
  max-width: 650px;

  animation: homeFadeUp 0.8s ease both;
}


.home-page .home-eyebrow {
  margin-bottom: 20px;

  color: var(--home-rose);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 4px;
}


.home-page .home-hero h1 {
  margin: 0 0 25px;

  color: var(--home-dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(55px, 6vw, 85px);

  font-weight: 400;

  line-height: 0.98;

  letter-spacing: -2px;
}


.home-page .home-hero h1 em {
  color: var(--home-rose);

  font-weight: 400;

  font-style: italic;
}


.home-page .home-hero-description {
  max-width: 500px;

  margin-bottom: 35px;

  color: var(--home-muted);

  font-size: 14px;

  line-height: 1.9;
}


/* BOUTONS HERO */

.home-page .home-hero-buttons {
  display: flex;

  align-items: center;

  gap: 18px;

  margin-bottom: 45px;
}


.home-page .home-primary-btn {
  min-width: 205px;

  height: 54px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 0 17px 0 22px;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      var(--home-dark),
      #8e4b58
    );

  color: white;

  text-decoration: none;

  font-size: 11px;

  font-weight: 600;

  box-shadow: 0 12px 25px rgba(84, 40, 50, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.home-page .home-primary-btn:hover {
  transform: translateY(-3px);

  box-shadow: 0 18px 30px rgba(84, 40, 50, 0.25);
}


.home-page .home-primary-btn strong {
  width: 30px;
  height: 30px;

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

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);

  font-size: 17px;
}


.home-page .home-secondary-btn {
  color: var(--home-dark);

  text-decoration: none;

  font-size: 11px;

  font-weight: 600;

  border-bottom: 1px solid var(--home-dark);

  padding-bottom: 4px;

  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}


.home-page .home-secondary-btn:hover {
  color: var(--home-rose);

  border-color: var(--home-rose);
}


/* MINI INFORMATIONS */

.home-page .home-mini-info {
  display: flex;

  gap: 35px;
}


.home-page .home-mini-info div {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


.home-page .home-mini-info strong {
  color: var(--home-gold);

  font-family: "Playfair Display", serif;

  font-size: 18px;

  font-weight: 400;
}


.home-page .home-mini-info span {
  color: var(--home-muted);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 1px;
}


/* =========================================================
   VISUEL HERO
   ========================================================= */

.home-page .home-hero-visual {
  position: relative;

  min-height: 570px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.home-page .hero-circle-large {
  position: absolute;

  width: 450px;
  height: 450px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #f6dfe2,
      #efd0d4
    );

  box-shadow:
    inset -20px -20px 50px rgba(183, 110, 121, 0.12),
    0 30px 70px rgba(183, 110, 121, 0.12);
}


.home-page .hero-circle-small {
  position: absolute;

  width: 120px;
  height: 120px;

  border-radius: 50%;

  right: 5%;
  top: 7%;

  border: 1px solid rgba(196, 154, 90, 0.45);

  background: rgba(255, 250, 246, 0.4);
}


/* CARTE MODE */

.home-page .hero-fashion-card {
  position: relative;

  z-index: 5;

  width: 310px;
  height: 430px;

  padding: 25px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  border-radius: 160px 160px 12px 12px;

  background:
    linear-gradient(
      160deg,
      #6f3542,
      #542832
    );

  color: white;

  box-shadow:
    0 35px 60px rgba(84, 40, 50, 0.3);

  transform: rotate(3deg);

  transition:
    transform 0.5s ease;
}


.home-page .hero-fashion-card:hover {
  transform: rotate(0deg) translateY(-6px);
}


.home-page .hero-card-top,
.home-page .hero-card-bottom {
  display: flex;

  align-items: center;

  justify-content: space-between;

  font-family: Arial, sans-serif;
}


.home-page .hero-card-top span {
  width: 36px;
  height: 36px;

  display: flex;

  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.4);

  border-radius: 50%;

  color: #e5c994;

  font-family: "Playfair Display", serif;
}


.home-page .hero-card-top small {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 72px;
  min-height: 28px;
  padding: 0 10px;

  border: 1px solid rgba(229, 201, 148, 0.75);
  border-radius: 999px;

  /* Petit fond bordeaux pour faire ressortir EST. 2026 */
  background: rgba(84, 40, 50, 0.78);

  color: #e5c994;
  font-size: 8px;
  letter-spacing: 2px;
  opacity: 1;

  text-shadow: 0 1px 3px rgba(40, 18, 25, 0.55);
  box-shadow: 0 4px 12px rgba(84, 40, 50, 0.18);
}


.home-page .hero-card-monogram {
  width: 36px;
  height: 36px;

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

  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;

  color: #e5c994;
  font-family: "Playfair Display", serif;
  font-size: 9px;
  letter-spacing: 1px;
}


.home-page .hero-logo-circle {
  width: 220px;
  height: 220px;

  margin: 0 auto;

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

  border: 1px solid rgba(229, 201, 148, 0.85);
  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(255, 250, 246, 0.16) 0%,
    rgba(255, 250, 246, 0.04) 68%,
    rgba(255, 250, 246, 0) 100%
  );

  box-shadow:
    0 0 0 8px rgba(255,255,255,0.04),
    0 12px 30px rgba(40, 18, 25, 0.16);

  position: relative;
}


.home-page .hero-logo-circle::before {
  content: "";

  position: absolute;
  inset: 9px;

  border: 1px solid rgba(229, 201, 148, 0.35);
  border-radius: 50%;
}


.home-page .hero-mvl-logo {
  width: 175px;
  height: 175px;

  max-width: 78%;
  max-height: 78%;

  display: block;

  object-fit: cover;

  border-radius: 50%;

  clip-path: circle(50% at 50% 50%);

  position: relative;
  z-index: 1;

  filter: drop-shadow(0 10px 18px rgba(40, 18, 25, 0.18));
}


.home-page .hero-card-center {
  text-align: center;
}


.home-page .hero-card-center p {
  margin-bottom: 0;

  color: #e5c994;

  font-size: 10px;

  letter-spacing: 8px;
}


.home-page .hero-card-center h2 {
  margin: 8px 0;

  font-family: "Playfair Display", serif;

  font-size: 42px;

  font-weight: 400;

  letter-spacing: 3px;
}


.home-page .hero-card-center span {
  font-size: 10px;

  letter-spacing: 7px;

  opacity: 0.7;
}


.home-page .hero-card-bottom {
  padding-top: 15px;

  border-top: 1px solid rgba(255,255,255,0.15);

  font-size: 8px;

  letter-spacing: 2px;

  opacity: 0.65;
}


/* NOTE FLOTTANTE */

.home-page .hero-floating-note {
  position: absolute;

  z-index: 10;

  left: 4%;
  bottom: 18%;

  width: 115px;
  height: 115px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #fffaf6;

  border: 1px solid rgba(183, 110, 121, 0.15);

  box-shadow: 0 15px 40px rgba(84, 40, 50, 0.12);

  transform: rotate(-8deg);
}


.home-page .hero-floating-note span {
  margin-bottom: 4px;

  color: var(--home-gold);

  font-size: 8px;

  letter-spacing: 3px;

  font-weight: bold;
}


.home-page .hero-floating-note strong {
  color: var(--home-dark);

  font-family: "Playfair Display", serif;

  font-size: 18px;

  font-style: italic;
}


/* =========================================================
   BANDEAU
   ========================================================= */

.home-page .home-marquee {
  overflow: hidden;

  padding: 17px 0;

  background: var(--home-dark);

  color: white;
}


.home-page .home-marquee > div {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 30px;

  white-space: nowrap;
}


.home-page .home-marquee span {
  font-size: 9px;

  letter-spacing: 4px;
}


.home-page .home-marquee i {
  color: #e5c994;

  font-style: normal;
}


/* =========================================================
   SECTION ABOUT
   ========================================================= */

.home-page .home-about {
  max-width: 1200px;

  margin: auto;

  padding: 120px 7%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 100px;

  align-items: center;
}


.home-page .home-section-label {
  margin-bottom: 18px;

  color: var(--home-rose);

  font-size: 9px;

  font-weight: bold;

  letter-spacing: 4px;
}


.home-page .home-section-heading h2 {
  color: var(--home-dark);

  font-family: "Playfair Display", serif;

  font-size: clamp(38px, 4vw, 55px);

  font-weight: 400;

  line-height: 1.1;
}


.home-page .home-section-heading h2 em {
  color: var(--home-rose);

  font-style: italic;
}


.home-page .home-about-content {
  max-width: 450px;
}


.home-page .home-about-content p {
  margin-bottom: 25px;

  color: var(--home-muted);

  font-size: 14px;

  line-height: 2;
}


.home-page .home-text-link {
  display: inline-flex;

  align-items: center;

  gap: 15px;

  color: var(--home-dark);

  text-decoration: none;

  font-size: 11px;

  font-weight: 600;

  border-bottom: 1px solid var(--home-dark);

  padding-bottom: 6px;
}


.home-page .home-text-link span {
  font-size: 18px;

  transition: transform 0.3s ease;
}


.home-page .home-text-link:hover span {
  transform: translateX(5px);
}


/* =========================================================
   CARTES FEATURES
   ========================================================= */

.home-page .home-features {
  max-width: 1200px;

  margin: 0 auto;

  padding: 0 7% 120px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;
}


.home-page .home-feature-card {
  position: relative;

  min-height: 270px;

  padding: 35px;

  background: white;

  border: 1px solid rgba(183, 110, 121, 0.1);

  border-radius: 18px;

  box-shadow: 0 15px 40px rgba(84, 40, 50, 0.04);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


.home-page .home-feature-card:hover {
  transform: translateY(-7px);

  box-shadow: 0 25px 50px rgba(84, 40, 50, 0.09);
}


.home-page .home-feature-card.featured {
  background: var(--home-dark);

  color: white;
}


.home-page .feature-number {
  position: absolute;

  top: 25px;
  right: 28px;

  color: var(--home-gold);

  font-family: "Playfair Display", serif;

  font-size: 13px;
}


.home-page .feature-icon {
  margin-bottom: 35px;

  color: var(--home-rose);

  font-size: 25px;
}


.home-page .featured .feature-icon {
  color: #e5c994;
}


.home-page .home-feature-card h3 {
  margin-bottom: 12px;

  color: var(--home-dark);

  font-family: "Playfair Display", serif;

  font-size: 25px;

  font-weight: 400;
}


.home-page .home-feature-card.featured h3 {
  color: white;
}


.home-page .home-feature-card p {
  color: var(--home-muted);

  font-size: 12px;

  line-height: 1.8;
}


.home-page .home-feature-card.featured p {
  color: rgba(255,255,255,0.7);
}


/* =========================================================
   CTA
   ========================================================= */

.home-page .home-cta {
  margin: 0 6% 80px;

  padding: 70px 8%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;

  border-radius: 25px;

  background:
    linear-gradient(
      120deg,
      #542832,
      #8e4b58
    );

  color: white;

  overflow: hidden;

  box-shadow: 0 25px 60px rgba(84, 40, 50, 0.15);
}


.home-page .home-cta p {
  margin-bottom: 12px;

  color: #e5c994;

  font-size: 9px;

  letter-spacing: 4px;

  font-weight: bold;
}


.home-page .home-cta h2 {
  font-family: "Playfair Display", serif;

  font-size: clamp(35px, 4vw, 55px);

  font-weight: 400;

  line-height: 1.05;
}


.home-page .home-cta h2 em {
  color: #e5c994;

  font-style: italic;
}


.home-page .home-cta-btn {
  min-width: 180px;

  padding: 17px 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  border: 1px solid rgba(255,255,255,0.3);

  border-radius: 10px;

  color: white;

  text-decoration: none;

  font-size: 11px;

  font-weight: 600;

  transition:
    background 0.3s ease,
    transform 0.3s ease;
}


.home-page .home-cta-btn:hover {
  background: rgba(255,255,255,0.1);

  transform: translateY(-3px);
}


.home-page .home-cta-btn span {
  font-size: 18px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.home-page .home-footer {
  min-height: 100px;

  padding: 30px 7%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

  background: #fff;

  border-top: 1px solid rgba(183, 110, 121, 0.1);
}


.home-page .footer-brand {
  display: flex;

  align-items: center;

  gap: 10px;
}


.home-page .footer-brand > span {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: var(--home-dark);

  color: #e5c994;

  font-family: "Playfair Display", serif;

  font-size: 12px;
}


.home-page .footer-logo-circle {
  width: 50px;
  height: 50px;

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

  flex-shrink: 0;

  border: 1px solid rgba(183, 110, 121, 0.35);
  border-radius: 50%;

  background: #fffaf6;
  box-shadow: 0 5px 14px rgba(84, 40, 50, 0.10);
}


.home-page .footer-brand-image {
  width: 42px;
  height: 42px;

  object-fit: cover;

  border-radius: 50%;

  clip-path: circle(50% at 50% 50%);

  display: block;
}


.home-page .footer-brand strong {
  display: block;

  color: var(--home-dark);

  font-family: "Playfair Display", serif;

  font-size: 14px;

  font-weight: 500;
}


.home-page .footer-brand small {
  display: block;

  margin-top: 2px;

  color: var(--home-muted);

  font-size: 7px;

  letter-spacing: 2px;

  text-transform: uppercase;
}


.home-page .home-footer > p {
  margin: 0;

  color: #9d8c90;

  font-size: 9px;
}


.home-page .footer-links {
  display: flex;

  gap: 20px;
}


.home-page .footer-links a {
  color: var(--home-muted);

  text-decoration: none;

  font-size: 10px;

  transition: color 0.3s ease;
}


.home-page .footer-links a:hover {
  color: var(--home-rose);
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes homeFadeUp {

  from {
    opacity: 0;
    transform: translateY(25px);
  }

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

}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1000px) {

  .home-page .home-header {
    padding: 15px 4%;
  }


  .home-page .home-nav ul {
    gap: 16px;
  }


  .home-page .home-account {
    display: none;
  }


  .home-page .home-hero {
    grid-template-columns: 1fr 0.8fr;

    gap: 25px;

    padding: 60px 5%;
  }


  .home-page .home-hero h1 {
    font-size: 58px;
  }


  .home-page .hero-fashion-card {
    width: 270px;
    height: 390px;
  }


  .home-page .hero-circle-large {
    width: 390px;
    height: 390px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

  .home-page .home-header {
    min-height: auto;

    padding: 18px;

    flex-wrap: wrap;

    gap: 18px;
  }


  .home-page .home-logo-text strong {
    font-size: 16px;
  }


  .home-page .home-nav {
    order: 3;

    width: 100%;

    overflow-x: auto;
  }


  .home-page .home-nav ul {
    justify-content: center;

    gap: 22px;

    min-width: max-content;
  }


  .home-page .home-nav a {
    font-size: 10px;
  }


  .home-page .home-header-actions {
    margin-left: auto;
  }


  .home-page .home-language {
    width: 34px;
    height: 34px;
  }


  .home-page .home-hero {
    min-height: auto;

    grid-template-columns: 1fr;

    padding: 65px 25px 70px;

    text-align: center;
  }


  .home-page .home-hero-content {
    max-width: none;
  }


  .home-page .home-eyebrow {
    font-size: 8px;
  }


  .home-page .home-hero h1 {
    font-size: 48px;

    letter-spacing: -1px;
  }


  .home-page .home-hero-description {
    margin-right: auto;
    margin-left: auto;

    font-size: 13px;
  }


  .home-page .home-hero-buttons {
    justify-content: center;

    flex-wrap: wrap;
  }


  .home-page .home-mini-info {
    justify-content: center;

    gap: 22px;
  }


  .home-page .home-mini-info span {
    font-size: 7px;
  }


  .home-page .home-hero-visual {
    min-height: 470px;
  }


  .home-page .hero-circle-large {
    width: 350px;
    height: 350px;
  }


  .home-page .hero-fashion-card {
    width: 245px;
    height: 360px;
  }


  .home-page .hero-floating-note {
    left: 5%;

    bottom: 10%;
  }


  .home-page .home-marquee > div {
    justify-content: flex-start;

    width: max-content;
  }


  .home-page .home-about {
    grid-template-columns: 1fr;

    gap: 35px;

    padding: 80px 25px;
  }


  .home-page .home-features {
    grid-template-columns: 1fr;

    padding: 0 25px 80px;
  }


  .home-page .home-feature-card {
    min-height: 230px;
  }


  .home-page .home-cta {
    margin: 0 18px 60px;

    padding: 50px 30px;

    flex-direction: column;

    align-items: flex-start;
  }


  .home-page .home-footer {
    padding: 30px 20px;

    flex-direction: column;

    text-align: center;
  }

}


/* =========================================================
   PETIT TÉLÉPHONE
   ========================================================= */

@media (max-width: 420px) {

  .home-page .home-logo-text span {
    display: none;
  }


  .home-page .home-hero h1 {
    font-size: 40px;
  }


  .home-page .home-mini-info {
    gap: 12px;
  }


  .home-page .home-mini-info span {
    letter-spacing: 0.5px;
  }


  .home-page .hero-circle-large {
    width: 300px;
    height: 300px;
  }


  .home-page .hero-fashion-card {
    width: 215px;
    height: 325px;
  }


  .home-page .hero-mvl-logo {
    width: 145px;
    height: 145px;
  }


  .home-page .hero-logo-circle {
    width: 185px;
    height: 185px;
  }


  .home-page .hero-floating-note {
    width: 90px;
    height: 90px;
  }


  .home-page .home-section-heading h2 {
    font-size: 36px;
  }

}