/* ═══════════════════════════════════════════════════════════════════════
   LES JEANNINE — NORMALISATION TYPOGRAPHIQUE GLOBALE — v2
   ───────────────────────────────────────────────────────────────────────
   v2 : correction du bug de sélecteur (:not enchaînés sur plusieurs
        lignes = combinateurs descendants) + §4 recadré sur le texte
        courant uniquement, pour ne plus toucher menu / boutons / footer.

   ⚠ À CHARGER EN DERNIER dans stylesheets.tpl
   Chemin : themes/classic-lj/assets/css/lj-global-typo.css
   ═══════════════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 1. TOKENS                                                         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

:root {
  /* ⚠ Nom exact du @font-face à vérifier dans ton CSS de thème */
  --lj-font-body:   'agrandir-regular', 'Agrandir', Helvetica, Arial, sans-serif;
  --lj-font-marker: 'Permanent Marker', cursive;
  --lj-fs-base: 16px;
}

a{
	color: #d41e8b!important;
}

/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 2. AGRANDIR PARTOUT                                               ║
   ║    ⚠ Les :not() DOIVENT rester collés, sans espace ni retour      ║
   ║      à la ligne, sinon la règle change complètement de sens.      ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

body,
body *:not(i):not(.material-icons):not(.material-icons-outlined):not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not([class^="fa-"]):not([class*=" fa-"]):not(.eicon):not([class^="eicon-"]):not([class*=" eicon-"]):not([class^="icon-"]):not([class*=" icon-"]) {
  font-family: var(--lj-font-body);
}

/* Les champs de formulaire n'héritent pas de la police par défaut */
input, textarea, select, button, optgroup {
  font-family: var(--lj-font-body);
}

/* Filet de sécurité pour les polices d'icônes */
.material-icons,
.material-icons-outlined { font-family: 'Material Icons' !important; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 3. PERMANENT MARKER — LISTE BLANCHE                               ║
   ║    ➜ AJOUTE ICI les sélecteurs qui doivent rester en Marker       ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

h1,
.lj-marker,
body#product .product-title,
body#product .ce-breadcrumb__item,
body#cart .cart-title,
.lj-cart-header h3,
.lj-cart-empty p,
.lj-h-block__title,
.lj-cats__title {
  font-family: var(--lj-font-marker) !important;
  font-weight: 400 !important;
}

/* Utilitaire : class="lj-marker" sur n'importe quel widget CE */
.lj-marker,
.lj-marker * { font-family: var(--lj-font-marker) !important; }


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 4. TAILLE 16px — TEXTE COURANT UNIQUEMENT                         ║
   ║    Volontairement PAS appliqué à : menu, boutons, footer, prix,   ║
   ║    badges, breadcrumb, titres. Ils gardent leurs tailles.         ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

html { font-size: 100%; }   /* base 16px — ne casse pas les rem */

body { line-height: 1.6; }

/* Formulaires */
input, textarea, select, .form-control, label {
  font-size: var(--lj-fs-base);
}

.lj-cat__arrow{
	font-size: var(--lj-fs-base)!important;
}


#product-details > div.elementor-section-wrap > section.elementor-element.elementor-element-32aa1aa.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default.elementor-section.elementor-top-section > div {
width: 70%!important;
}

/* ─── Texte courant à 16px ─────────────────────────────── */
.lj-histoire {
  font-size: 16px;
}
.lj-histoire p,
.lj-histoire li,
.lj-histoire .lj-h-block__content p,
.lj-histoire .lj-h-values li,
.lj-histoire .lj-h-values strong {
  font-size: 16px;
}

/* Labels et boutons remontés de 12-15px à 16px */
.lj-histoire .lj-h-block__date,
.lj-histoire .lj-h-cta-inline,
.lj-histoire .lj-h-portrait__badge,
.lj-histoire .lj-h-tag,
.lj-histoire .lj-h-mood figcaption {
  font-size: 16px;
}

/* ─── Réponses à 16px ───────────────────────────────────── */
.lj-faq-answer,
.lj-faq-answer p,
.lj-faq-answer ul li {
    font-size: 16px;
}

/* Ton média query à 700px redescendait à 15px */
@media (max-width: 700px) {
    .lj-faq-answer,
    .lj-faq-answer p,
    .lj-faq-answer ul li,
    .lj-faq-item summary {
        font-size: 16px;
    }
}

.lj-bang::after {
    content: '';
    position: absolute;
    bottom: -0em;
    left: 29%;
    transform: translateX(-50%);
    width: .5em;
    height: .5em;
    background-image: url(/img/cms/heart-leopard.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}


















/* ═══════════════════════════════════════════════════════════════════════
   LES JEANNINE — PAGES CATÉGORIE
   Chemin : themes/classic-lj/assets/css/categories-lj.css
   À charger dans stylesheets.tpl, après les autres CSS :

   <link rel="stylesheet" href="{$urls.theme_assets}css/categories-lj.css?v=1"
         type="text/css" media="all">
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --lj-pink: #d41e8b;
  --lj-pink-soft: #fce4f0;
  --lj-black: #050A0F;
  --lj-white: #ffffff;
  --lj-font-body: 'agrandir-regular', 'Agrandir', Helvetica, Arial, sans-serif;
  --lj-font-marker: 'Permanent Marker', cursive;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 1. TRI "PERTINENCE" — une seule flèche                            ║
   ║    Le <i class="material-icons"> est vide dans ton template :     ║
   ║    les deux flèches viennent de règles ::after. On les coupe      ║
   ║    toutes et on en recrée UNE seule.                              ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.products-sort-order::after,
.products-sort-order::before,
.products-sort-order .select-title::after,
.products-sort-order .select-title::before,
.products-sort-order .select-title .material-icons::after,
.products-sort-order .select-title .material-icons::before {
  content: none !important;
  display: none !important;
}

/* L'unique flèche, en rose */
.products-sort-order .select-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 44px 10px 18px;
  background: var(--lj-white);
  border: 2px solid var(--lj-black);
  border-radius: 50px;
  font-family: var(--lj-font-body);
  font-size: 16px;
  color: var(--lj-black);
  text-align: left;
  cursor: pointer;
}

.products-sort-order .select-title::after {
  content: '' !important;
  display: block !important;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2.5px solid var(--lj-pink);
  border-bottom: 2.5px solid var(--lj-pink);
  transform: rotate(45deg);
  transition: transform .25s ease;
}

/* Flèche retournée quand le menu est ouvert */
.products-sort-order .select-title[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

/* L'icône vide ne doit plus occuper d'espace */
.products-sort-order .select-title .material-icons {
  display: none;
}

/* Le menu déroulant */
.products-sort-order .dropdown-menu {
  border: 2px solid var(--lj-black);
  border-radius: 6px;
  box-shadow: 4px 4px 0 var(--lj-pink);
  padding: 6px 0;
}

.products-sort-order .dropdown-menu .select-list {
  display: block;
  padding: 9px 18px;
  font-family: var(--lj-font-body);
  font-size: 16px;
  color: var(--lj-black);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}

.products-sort-order .dropdown-menu .select-list:hover {
  background: var(--lj-pink-soft);
  color: var(--lj-pink);
}

.products-sort-order .dropdown-menu .select-list.current {
  background: var(--lj-pink);
  color: var(--lj-white);
}

/* Libellé "Trier par :" */
.sort-by-row .sort-by {
  font-family: var(--lj-font-marker);
  font-size: 16px;
  color: var(--lj-black);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
}

/* Compteur "Il y a 14 produits." */
.total-products p,
#js-product-list-top .total-products {
  font-family: var(--lj-font-body);
  font-size: 16px;
  color: var(--lj-black);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 2. BADGE PRODUIT — rose                                           ║
   ║    Le libellé "News" vient de l'override product-flags.tpl        ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.product-flags {
  list-style: none;
  padding: 0;
  margin: 0;
}

.product-flags .product-flag {
  display: inline-block;
  background: var(--lj-pink) !important;
  color: var(--lj-white) !important;
  font-family: var(--lj-font-marker);
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 5px 14px;
  border: none;
  border-radius: 50px;
  box-shadow: 2px 2px 0 var(--lj-black);
  transform: rotate(-3deg);
  line-height: 1.1;
}

/* Promo / réduction : on inverse pour la distinguer */
.product-flags .product-flag.discount,
.product-flags .product-flag.on-sale {
  background: var(--lj-black) !important;
  color: var(--lj-pink) !important;
  box-shadow: 2px 2px 0 var(--lj-pink);
  transform: rotate(2deg);
}

/* Rupture de stock : neutre */
.product-flags .product-flag.out_of_stock {
  background: #888 !important;
  color: var(--lj-white) !important;
  box-shadow: 2px 2px 0 var(--lj-black);
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 3. PAGINATION — rose au lieu du bleu par défaut                   ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

.pagination {
  font-family: var(--lj-font-body);
  font-size: 16px;
}

.pagination .page-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  background: transparent !important;
}

.pagination a,
.pagination .page-list a,
.pagination .page-list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  color: var(--lj-black) !important;   /* c'était le bleu par défaut */
  background: var(--lj-white);
  border: 2px solid var(--lj-black);
  border-radius: 50px;
  text-decoration: none !important;
  font-size: 16px;
  transition: all .2s ease;
}

.pagination a:hover,
.pagination .page-list li a:hover {
  background: var(--lj-pink);
  border-color: var(--lj-pink);
  color: var(--lj-white) !important;
  transform: translateY(-2px);
}

/* Page courante */
.pagination .page-list li.current a,
.pagination .page-list li.current span,
.pagination .current a {
  background: var(--lj-pink) !important;
  border: 2px solid var(--lj-pink) !important;
  color: var(--lj-white) !important;
  font-family: var(--lj-font-marker);
  box-shadow: 2px 2px 0 var(--lj-black);
}

/* Liens Précédent / Suivant */
.pagination .previous,
.pagination .next {
  font-family: var(--lj-font-marker);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.pagination .disabled,
.pagination .disabled a {
  opacity: .35;
  pointer-events: none;
}

/* Les chevrons Material Icons de la pagination en rose */
.pagination .material-icons {
  color: var(--lj-pink);
  font-size: 20px;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 4. DESCRIPTION DE CATÉGORIE — mise en forme                       ║
   ║    ⚠ Vérifie le conteneur en F12. Selon ta version PrestaShop     ║
   ║      c'est #category-description, .category-description           ║
   ║      ou .block-category. Les trois sont ciblés ci-dessous.        ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

#category-description,
.category-description,
#js-product-list-bottom .block-category,
.category-bottom-description {
  max-width: 820px;          /* longueur de ligne lisible */
  margin: 70px auto 40px;
  padding: 0 20px;
  font-family: var(--lj-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: #2a2a2a;
  text-align: left;
}

/* ─── Titres de section ─── */
#category-description h2,
.category-description h2,
.category-bottom-description h2 {
  font-family: var(--lj-font-marker);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--lj-black);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 56px 0 18px;
  transform: rotate(-.5deg);
  position: relative;
}

/* Trait rose sous chaque H2 */
#category-description h2::after,
.category-description h2::after,
.category-bottom-description h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--lj-pink);
  margin-top: 12px;
  transform: rotate(-1.5deg);
}

/* Les H2 vides de ton contenu ne doivent pas créer de trous */
#category-description h2:empty,
.category-description h2:empty,
.category-bottom-description h2:empty {
  display: none;
}

/* ─── Sous-titres (FAQ) ─── */
#category-description h3,
.category-description h3,
.category-bottom-description h3 {
  font-family: var(--lj-font-marker);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--lj-pink);
  margin: 34px 0 10px;
  padding-left: 26px;
  position: relative;
}

/* Étoile devant chaque question */
#category-description h3::before,
.category-description h3::before,
.category-bottom-description h3::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--lj-pink);
  font-size: 16px;
  transform: rotate(-12deg);
}

/* ─── Paragraphes ─── */
#category-description p,
.category-description p,
.category-bottom-description p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 16px;
  color: #2a2a2a;
}

#category-description strong,
.category-description strong,
.category-bottom-description strong {
  color: var(--lj-black);
  font-weight: 700;
}

/* ─── Listes ─── */
#category-description ul,
.category-description ul,
.category-bottom-description ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}

#category-description ul li,
.category-description ul li,
.category-bottom-description ul li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: 16px;
  line-height: 1.6;
  border-bottom: 1px dashed rgba(212, 30, 139, .22);
}

#category-description ul li:last-child,
.category-description ul li:last-child,
.category-bottom-description ul li:last-child {
  border-bottom: none;
}

#category-description ul li::before,
.category-description ul li::before,
.category-bottom-description ul li::before {
  content: '★';
  position: absolute;
  left: 4px;
  top: 9px;
  color: var(--lj-pink);
  font-size: 15px;
  transform: rotate(-12deg);
}

/* ─── Liens internes ─── */
#category-description a,
.category-description a,
.category-bottom-description a {
  color: var(--lj-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .2s ease;
}

#category-description a:hover,
.category-description a:hover,
.category-bottom-description a:hover {
  color: var(--lj-black);
}

/* ─── Séparation visuelle avant le bloc FAQ ─── */
#category-description h2 + h3,
.category-description h2 + h3,
.category-bottom-description h2 + h3 {
  margin-top: 24px;
}


/* ╔═══════════════════════════════════════════════════════════════════╗
   ║ 5. RESPONSIVE                                                     ║
   ╚═══════════════════════════════════════════════════════════════════╝ */

@media (max-width: 767px) {
  #category-description,
  .category-description,
  .category-bottom-description {
    margin-top: 44px;
    padding: 0 4px;
  }

  #category-description h2,
  .category-description h2,
  .category-bottom-description h2 {
    font-size: 24px;
    margin-top: 40px;
  }

  #category-description h3,
  .category-description h3,
  .category-bottom-description h3 {
    font-size: 18px;
  }

  .products-sort-order .select-title { font-size: 16px; }

  .pagination .page-list { flex-wrap: wrap; gap: 6px; }
  .pagination a { min-width: 36px; height: 36px; }
}

#products .product-miniature .product-flags li.product-flag,
.products .product-miniature .product-flags li.product-flag,
#js-product-list .product-flags li.product-flag {
  background: #d41e8b !important;
  color: #fff !important;
  border-color: #d41e8b !important;
}


































/* ═══════════════════════════════════════════════════════════════════════
   LES JEANNINE — DESCRIPTION DE CATÉGORIE
   ═══════════════════════════════════════════════════════════════════════ */
 
.lj-cd {
  --lj-pink: #d41e8b;
  --lj-pink-soft: #fce4f0;
  --lj-black: #050A0F;
  --lj-white: #ffffff;
  --lj-ink: #2a2a2a;
  --lj-font-body: 'agrandir-regular', 'Agrandir', Helvetica, Arial, sans-serif;
  --lj-font-marker: 'Permanent Marker', cursive;
 
  max-width: 820px;
  margin: 80px auto 60px;
  padding: 0 20px;
  font-family: var(--lj-font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--lj-ink);
  text-align: left;
}
 
/* ─── Sections ─── */
.lj-cd__section {
  margin-bottom: 56px;
}
 
.lj-cd h2 {
  font-family: var(--lj-font-marker);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--lj-black);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 0 0 20px;
  transform: rotate(-.5deg);
}
 
.lj-cd h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: var(--lj-pink);
  margin-top: 12px;
  transform: rotate(-1.5deg);
}
 
.lj-cd p {
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 16px;
  color: var(--lj-ink);
}
 
.lj-cd strong {
  color: var(--lj-black);
  font-weight: 700;
}
 
/* ─── Phrases-chocs ─── */
.lj-cd__punch {
  font-family: var(--lj-font-marker) !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  color: var(--lj-pink) !important;
  margin: 24px 0 !important;
  padding-left: 20px;
  border-left: 4px solid var(--lj-pink);
  transform: rotate(-.4deg);
}
 
/* ─── Citation ─── */
.lj-cd__quote {
  position: relative;
  margin: 32px 0;
  padding: 24px 28px 24px 60px;
  background: var(--lj-pink-soft);
  border-left: 4px solid var(--lj-pink);
  font-family: var(--lj-font-marker);
  font-size: 20px;
  line-height: 1.4;
  color: var(--lj-black);
  transform: rotate(-.4deg);
}
 
.lj-cd__quote::before {
  content: '"';
  position: absolute;
  left: 16px;
  top: 4px;
  font-family: var(--lj-font-marker);
  font-size: 56px;
  line-height: 1;
  color: var(--lj-pink);
}
 
/* ─── Checklist ─── */
.lj-cd__check {
  margin: 28px 0;
  padding: 24px 26px 20px;
  background: var(--lj-white);
  border: 2px solid var(--lj-black);
  box-shadow: 6px 6px 0 var(--lj-pink);
}
 
.lj-cd__check-title {
  display: block;
  font-family: var(--lj-font-marker);
  font-size: 19px;
  color: var(--lj-pink);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(212, 30, 139, .35);
}
 
.lj-cd__check ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.lj-cd__check li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 1px dashed rgba(212, 30, 139, .2);
}
 
.lj-cd__check li:last-child { border-bottom: none; }
 
.lj-cd__check li::before {
  content: '★';
  position: absolute;
  left: 4px;
  top: 9px;
  color: var(--lj-pink);
  font-size: 15px;
  transform: rotate(-12deg);
}
 
/* ─── Liens ─── */
.lj-cd a {
  color: var(--lj-pink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color .2s ease;
}
 
.lj-cd a:hover { color: var(--lj-black); }
 
.lj-cd__links {
  padding: 16px 20px;
  background: var(--lj-pink-soft);
  border-left: 4px solid var(--lj-pink);
  margin-top: 24px !important;
}
 
/* ─── FAQ ─── */
.lj-cd__faq {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 2px dashed rgba(212, 30, 139, .35);
}
 
.lj-cd__faq-title {
  text-align: center;
}
 
.lj-cd__faq-title::after {
  margin-left: auto;
  margin-right: auto;
}
 
.lj-cd__qa {
  margin-bottom: 28px;
  padding: 22px 24px;
  background: var(--lj-white);
  border: 2px solid var(--lj-black);
  box-shadow: 4px 4px 0 var(--lj-pink);
}
 
.lj-cd__qa:nth-child(even) {
  box-shadow: 4px 4px 0 var(--lj-black);
}
 
.lj-cd__qa h3 {
  font-family: var(--lj-font-marker);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--lj-pink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed rgba(212, 30, 139, .3);
}
 
.lj-cd__qa p:last-child { margin-bottom: 0; }
 
/* ─── Responsive ─── */
@media (max-width: 767px) {
  .lj-cd {
    margin-top: 48px;
    padding: 0 4px;
  }
 
  .lj-cd h2 { font-size: 24px; }
  .lj-cd__punch { font-size: 20px !important; }
  .lj-cd__quote { font-size: 18px; padding: 20px 20px 20px 50px; }
  .lj-cd__qa { padding: 18px 18px; }
  .lj-cd__qa h3 { font-size: 18px; }
  .lj-cd__check { padding: 20px 18px 16px; }
}