/* ============================================================
   SITE V2 — étape 4 : modales
   Chargée par _partials/site-v2.tpl (jamais sur le tunnel de commande).
   ============================================================ */

/* Domaine : conteneurs, voile, en-tête, titre, bouton de fermeture, espacements.
   Les boutons et les champs à l'intérieur relèvent de boutons.css et formulaires.css.
   Toutes les règles visent un conteneur de modale (jamais un élément nu) : aucune
   ne peut atteindre les blocs .home-v2 de l'accueil.
   Bootstrap 4 alpha du thème : état ouvert = classe .in (pas .show). */

/* ---------- Voile ---------- */

.modal-backdrop { background-color: #1F1813; }
.modal-backdrop.in { opacity: 0.55; }

/* Voiles des volets leoquicklogin et leofeature (panier latéral) : même teinte */
.leoquicklogin-mask,
.leo-fly-cart-mask { background-color: #1F1813; }

/* ---------- Conteneur ---------- */

.modal .modal-dialog {
  width: calc(100% - 1.5rem);
  margin: 0.75rem auto;
}

.modal .modal-content {
  background-color: #FBF7EF;
  color: #6B5B4E;
  border: 1px solid #E2D6C2;
  border-radius: 4px;
  box-shadow: 0 18px 48px -16px rgba(39, 30, 24, 0.32);
}

@media (min-width: 768px) {
  .modal .modal-dialog { margin: 2rem auto; }
}

/* ---------- En-tête : titre à gauche, fermeture à droite ---------- */

.modal .modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #E2D6C2;
}

/* Le clearfix devient un élément flex vide : inutile ici */
.modal .modal-header::after { display: none; }

.modal .modal-header .modal-title {
  flex: 1 1 auto;
  order: 1;
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  color: #332720;
}

/* ---------- Bouton de fermeture ----------
   Zone de 44 px, contraste plein (le thème : opacité 0,2), focus visible.
   Propriétés de position réécrites : popnewsletter/views/css/style.css pose,
   sous 640 px, une règle .close globale (absolue, bordure grise) sur tout le site. */

.modal .modal-header .close {
  order: 2;
  float: none;
  position: relative;
  top: auto;
  right: auto;
  z-index: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  margin: -0.5rem -0.5rem -0.5rem auto;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #332720;
  opacity: 1;
  text-shadow: none;
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.modal .modal-header .close:hover {
  background-color: #F3EADA;
  color: #8F4210;
  opacity: 1;
}

.modal .modal-header .close:focus { opacity: 1; }

.modal .modal-header .close:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: 2px;
}

.modal .modal-header .close .material-icons { font-size: 1.5rem; line-height: 1; }

/* ---------- Corps et pied ---------- */

.modal .modal-body { padding: 1.25rem; }

.modal .modal-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid #E2D6C2;
}

@media (min-width: 768px) {
  .modal .modal-body { padding: 1.5rem 1.75rem; }
}

/* ============================================================
   Connexion / inscription rapide (leoquicklogin, modale)
   ============================================================ */

/* L'en-tête ne contient que la croix : posée dans le coin, sans bandeau */
.modal.leo-quicklogin-modal .modal-header {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  padding: 0;
  border: 0;
}

.modal.leo-quicklogin-modal .modal-header .close { margin: 0; }

.modal.leo-quicklogin-modal .modal-body { padding: 2rem 1.25rem 1.5rem; }

.modal.leo-quicklogin-modal .modal-footer:empty { display: none; }

/* Titres du formulaire (h3) : place laissée à la croix, filet terracotta dessous */
.leo-quicklogin-modal .leo-login-title,
.leo-quicklogin-modal .leo-register-title,
.leo-quicklogin-modal .leo-resetpass-form h3 {
  margin: 0 0 1.25rem;
  padding-right: 2.5rem;
  font-size: 1.5rem;
  line-height: 1.2;
  color: #332720;
}

.leo-quicklogin-modal .leo-login-title::after,
.leo-quicklogin-modal .leo-register-title::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin-top: 0.75rem;
  background-color: #B05315;
}

/* Liens texte (mot de passe oublié, créer un compte) */
.leo-quicklogin-modal .leo-quicklogin-form a:not(.btn) {
  color: #A1480F;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.leo-quicklogin-modal .leo-quicklogin-form a:not(.btn):hover { color: #8F4210; }

/* « Souviens-toi de moi » : libellé aligné à gauche, contre sa case */
.leo-quicklogin-modal .lql-form-content-element .form-control-label {
  margin-left: 0.25rem;
  text-align: left;
}

.leo-quicklogin-modal .lql-callregister,
.leo-quicklogin-modal .lql-calllogin {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid #E2D6C2;
  text-align: center;
}

@media (min-width: 768px) {
  .modal.leo-quicklogin-modal .modal-body { padding: 2.5rem 2.25rem 2rem; }
}

/* Variante en volet (non utilisée par le header actuel, gardée cohérente) */
.leoquicklogin-slidebar {
  background-color: #FBF7EF;
  color: #6B5B4E;
}

/* ============================================================
   Produit ajouté au panier (#blockcart-modal, ps_shoppingcart)
   Le thème : bandeau noir, nom du produit jaune, filets gris.
   ============================================================ */

#blockcart-modal { color: #6B5B4E; }

#blockcart-modal .modal-dialog { max-width: 60rem; }

#blockcart-modal .modal-header {
  background-color: #F3EADA;
  border-radius: 4px 4px 0 0;
}

#blockcart-modal .modal-title {
  font-size: 1.125rem;
  font-weight: 500;
  color: #332720;
  text-align: left;
}

#blockcart-modal .modal-title i.material-icons {
  margin-right: 0.5rem;
  vertical-align: -0.2em;
  color: #B05315;
}

#blockcart-modal .modal-header .close { color: #332720; }

#blockcart-modal .modal-body {
  background-color: #FBF7EF;
  padding: 1.25rem;
  border-radius: 0 0 4px 4px;
}

/* Photo encadrée, taille limitée (pleine largeur de l'écran sur mobile sinon).
   Largeur et non max-width : custom.css impose img { max-width: 100% !important } sous 768 px. */
#blockcart-modal .product-image {
  display: block;
  width: 12rem;
  margin: 0 auto 1rem;
  padding: 0.5rem;
  background-color: #FFFFFF;
  border: 1px solid #E2D6C2;
  border-radius: 2px;
}

#blockcart-modal .product-name {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.3;
  color: #332720;
}

#blockcart-modal .modal-body .divide-right p { color: #332720; }

/* Bloc texte du produit : nom, prix, déclinaisons (« Format »), quantité, chacun sur sa ligne */
#blockcart-modal .divide-right .product-name { margin: 0 0 0.5rem; }

#blockcart-modal .modal-body .divide-right .product-price {
  display: block;
  margin: 0 0 0.75rem;
}

#blockcart-modal .modal-body .divide-right span:not(.product-price) {
  display: block;
  margin: 0 0 0.375rem;
  line-height: 1.4;
}

/* Le gabarit sépare les déclinaisons par des <br> : inutiles une fois les lignes en bloc */
#blockcart-modal .divide-right br { display: none; }

/* Colonnes empilées sur mobile : filet horizontal entre produit et panier */
#blockcart-modal .divide-right {
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-right: 0;
  border-bottom: 1px solid #E2D6C2;
}

#blockcart-modal .cart-content { padding-left: 0; }

#blockcart-modal .cart-content .product-total {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #E2D6C2;
  color: #332720;
}

/* Boutons « Continuer » / « Commander » : retour à la ligne plutôt que débordement */
#blockcart-modal .cart-content .cart-content-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

#blockcart-modal .cart-content .cart-content-btn button,
#blockcart-modal .cart-content .cart-content-btn .btn { margin: 0; }

@media (min-width: 768px) {
  #blockcart-modal .modal-body { padding: 2rem; }

  #blockcart-modal .divide-right {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    border-right: 1px solid #E2D6C2;
  }

  #blockcart-modal .cart-content { padding-left: 1.5rem; }

  /* Photo et texte côte à côte avec un vrai espace (thème : deux demi-colonnes
     de 150 px où la photo débordait sur le nom) */
  #blockcart-modal .divide-right > .row {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin: 0;
    padding-right: 1.25rem;
  }

  #blockcart-modal .divide-right > .row > [class*="col-"] {
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
  }

  #blockcart-modal .divide-right > .row > [class*="col-"]:first-child { flex: 0 0 8.5rem; }
  #blockcart-modal .divide-right > .row > [class*="col-"]:last-child { flex: 1 1 auto; min-width: 0; }

  #blockcart-modal .product-image {
    width: 100%;
    margin: 0;
  }
}

/* ============================================================
   Aperçu rapide (quickview)
   ============================================================ */

.modal.quickview .modal-header {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 10;
  padding: 0;
  border: 0;
}

.modal.quickview .modal-header .close { margin: 0; }

/* Sur mobile la photo est masquée par le thème : pas de hauteur minimale vide */
.modal.quickview .modal-content,
.modal.quickview .modal-body { min-height: 0; }

.modal.quickview .modal-body { padding: 2.5rem 1.25rem 1.25rem; }

/* Nom du produit : titre de la modale (thème : .h1 en capitales noires) */
.modal.quickview .modal-body h1.h1 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
  padding-right: 2.5rem;
  font-size: 1.75rem;
  line-height: 1.15;
  color: #332720;
}

.modal.quickview .modal-footer { border-top-color: #E2D6C2; }

@media (min-width: 768px) {
  .modal.quickview .modal-content { min-height: 31.25rem; }
  .modal.quickview .modal-body { padding: 2.5rem 2rem 1.5rem; }
  .modal.quickview .modal-body h1.h1 { font-size: 2rem; }
}

/* ============================================================
   Messages leofeature (liste de souhaits, comparateur, quantité)
   ============================================================ */

.leo-modal .modal-content { border-radius: 4px; }

/* Le thème : 250 px de marge haute et aucune marge latérale sur mobile */
.leo-modal-cart .modal-dialog,
.leo-modal-compare .modal-dialog,
.leo-modal-wishlist .modal-dialog {
  width: calc(100% - 1.5rem);
  max-width: 32rem;
  margin: 6rem auto;
}

.leo-modal-cart .modal-header,
.leo-modal-compare .modal-header,
.leo-modal-wishlist .modal-header { border-bottom: 0; }

.leo-modal-cart .modal-title,
.leo-modal-compare .modal-title,
.leo-modal-wishlist .modal-title {
  font-weight: 500;
  color: #332720;
  text-align: left;
}

.leo-modal-cart .modal-title a,
.leo-modal-compare .modal-title a,
.leo-modal-wishlist .modal-title a {
  font-weight: 600;
  color: #A1480F;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Bandeaux d'information (thème : bleu vif et saumon, titre blanc) */
.leo-modal .modal-header.info-mess,
.leo-modal .modal-header.warning-mess { background-color: #F3EADA; }

.leo-modal .modal-header.block-mess { background-color: #F6E3D6; }

.leo-modal .modal-header.block-mess .modal-title { color: #8F4210; }

.leo-modal .modal-title .material-icons {
  vertical-align: -0.2em;
  color: #B05315;
}

.leo-modal-wishlist.enable-action .modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.leo-modal-wishlist .modal-footer .btn { margin: 0; }

/* Avis produit : titre en capitales dans le thème */
.leo-modal-review .modal-title { text-transform: none; }

/* ============================================================
   Agrandissement de la photo (fiche produit, #product-modal)
   Fond transparent conservé ; ombre adoucie.
   ============================================================ */

#product-modal .modal-content { box-shadow: 0 18px 48px -16px rgba(39, 30, 24, 0.4); }

/* ============================================================
   Alertes et notifications (#notifications, .alert)
   Teintes de l'accueil ; texte AA (contraste ≥ 5,7:1 sur chaque fond).
   ============================================================ */

.alert {
  border-radius: 2px;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Messages en liste sans retrait (PrestaShop met chaque message dans un <li>) */
#notifications .alert ul { padding-left: 0; }

.alert-success {
  background-color: #EDF2E4;
  border-color: #C9D6B3;
  color: #3D5A2A;
}

.alert-info {
  background-color: #F3EADA;
  border-color: #E2D6C2;
  color: #332720;
}

.alert-warning {
  background-color: #FBEBDD;
  border-color: #E9B98F;
  color: #8F4210;
}

.alert-warning .material-icons { color: #B05315; }

.alert-danger {
  background-color: #F8E4E1;
  border-color: #E5B5AE;
  color: #8E2A1E;
}

.alert-success .alert-link,
.alert-info .alert-link,
.alert-danger .alert-link { color: inherit; text-decoration: underline; }

/* ============================================================
   Popup newsletter (module popnewsletter, fenêtre Shadowbox)
   Le module écrit couleurs et polices en style en ligne (Arial, noir, fond
   blanc posé en JS) : seul !important peut les remplacer.
   ============================================================ */

/* Voile : couleur posée en ligne par shadowbox.js (#000) */
#sb-overlay { background-color: #1F1813 !important; /* bat le style en ligne */ }

#sb-wrapper-inner {
  border: 1px solid #E2D6C2;
  border-radius: 4px;
  box-shadow: 0 18px 48px -16px rgba(39, 30, 24, 0.32);
}

/* Fond blanc posé en ligne par js_1-7.js (main_bg_color) */
#sb-body,
#sb-loading,
#sb-body-inner { background-color: #FBF7EF !important; /* bat le style en ligne */ }

/* Titre « Offre de bienvenue » (div à style en ligne : l'id du module est mal échappé) */
#popnewsletter_block > div:first-child div[style] {
  font-family: "Fraunces", Georgia, "Times New Roman", serif !important; /* style en ligne */
  font-weight: 500;
  font-size: 1.625rem !important; /* style en ligne */
  line-height: 1.15 !important; /* style en ligne */
  color: #332720 !important; /* style en ligne */
}

/* Texte d'accroche et mention sous le bouton */
#popnewsletter_content > div[style] {
  font-family: "Karla", "Helvetica Neue", Arial, sans-serif !important; /* style en ligne */
  color: #6B5B4E !important; /* style en ligne */
}

#popnewsletter_content > div[style]:last-child {
  font-size: 0.75rem !important; /* style en ligne : 10 px */
}

/* Contenu jamais plus large que la fenêtre (mobile : le module passe la fenêtre en plein écran) */
#sb-player.html { max-width: 100%; }

/* Croix du mode mobile (le module la stylise par la règle .close globale) */
/* (le module la force en display: block !important : centrage par le padding) */
#sb-player .close {
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  padding: 13px;
  line-height: 0;
  text-align: center;
  border: 1px solid #E2D6C2;
  background-color: #FBF7EF;
  color: #332720;
  opacity: 1;
  text-shadow: none;
}

#sb-player .close:focus-visible {
  outline: 2px solid #B05315;
  outline-offset: -4px;
}