@charset "UTF-8";

/* =============================================================================
   FONTS — amU Monument Grotesk
   ========================================================================== */
@font-face { font-family:'AMUMonumentGrotesk-Regular'; src:local('AMUMonumentGrotesk-Regular'), url('../font/AMUMonumentGrotesk-Regular.woff') format('woff'); font-style:normal; font-weight:normal; }
@font-face { font-family:'AMUMonumentGrotesk-RegularItalic'; src:local('AMUMonumentGrotesk-RegularItalic'), url('../font/AMUMonumentGrotesk-RegularItalic.woff') format('woff'); font-style:normal; font-weight:normal; }
@font-face { font-family:'AMUMonumentGrotesk-Medium'; src:local('AMUMonumentGrotesk-Medium'), url('../font/AMUMonumentGrotesk-Medium.woff') format('woff'); font-style:normal; font-weight:normal; }
@font-face { font-family:'AMUMonumentGrotesk-MediumItalic'; src:local('AMUMonumentGrotesk-MediumItalic'), url('../font/AMUMonumentGrotesk-MediumItalic.woff') format('woff'); font-style:normal; font-weight:normal; }
@font-face { font-family:'AMUMonumentGrotesk-Bold'; src:local('AMUMonumentGrotesk-Bold'), url('../font/AMUMonumentGrotesk-Bold.woff') format('woff'); font-style:normal; font-weight:normal; }
@font-face { font-family:'AMUMonumentGrotesk-BoldItalic'; src:local('AMUMonumentGrotesk-BoldItalic'), url('../font/AMUMonumentGrotesk-BoldItalic.woff') format('woff'); font-style:normal; font-weight:normal; }

/* =============================================================================
   VARIABLES & RESET
   ========================================================================== */
:root {
  --amu-yellow:  #FED100;
  --amu-purple:  #9966ff;
  --black:       #111;
  --white:       #ffffff;
  --grey:        #f5f6fa;
  --font-title:  'AMUMonumentGrotesk-Bold', sans-serif;
  --font-medium: 'AMUMonumentGrotesk-Medium', sans-serif;
  --font-text:   'AMUMonumentGrotesk-Regular', sans-serif;
  --radius: 6px;
  --gap: 10px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; width: 100%;
  background: var(--white); color: var(--black);
  font-family: var(--font-text); font-optical-sizing: auto;
  overflow-x: clip; text-wrap: balance;
}
::selection { background: var(--amu-yellow); color: var(--black); }
a { color: inherit; }

/* =============================================================================
   HEADER — bandeau fixe (logo blanc à gauche, panier + menu burger à droite),
   comportement façon racisme : logo réduit à la hauteur du bandeau au scroll,
   masquage au scroll vers le bas, légère animation d'intro à l'arrivée.
   ========================================================================== */
body { padding-top: 70px; }
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; height: 70px; z-index: 1000;
  background: var(--amu-purple); display: flex; justify-content: space-between; align-items: flex-start;
  padding-right: 0; transition: transform 0.3s ease; /* bloc pictos collé au bord droit */
}
.site-header.hidden { transform: translateY(-100%); }
.site-header.scrolled-up { transform: translateY(0); }
.sh-logo { display: block; height: 70px; flex-shrink: 0; }
.sh-logo img {
  display: block; height: 112px; max-height: 112px; width: auto; object-fit: contain;
  padding: 8px 14px; background: #fff; /* logo sur fond blanc */
  transition: height 0.3s ease, max-height 0.3s ease;
  transform-origin: left top; animation: sh-logo-intro 0.6s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes sh-logo-intro { from { transform: scale(1.12); } to { transform: scale(1); } }
/* Au scroll : logo réduit à la hauteur du bandeau */
.site-header.header-secondaire .sh-logo img { height: 70px; max-height: 70px; }
/* Très grands écrans (>=2000px, ex. 27") : logo un peu plus grand (état déplié uniquement) */
@media (min-width: 2000px) {
  .sh-logo img { height: 140px; max-height: 140px; }
}
/* Côté droit : panier + bouton burger */
/* Panier + burger collés (gap:0), même fond blanc qui glisse du haut au hover */
.sh-right { display: flex; align-items: stretch; gap: 0; height: 70px; }
/* Le blanc glisse via background-size (clippé par la boîte) → pas d'overflow:hidden,
   donc le badge n'est pas coupé. */
.panier-flottant {
  position: relative; width: 70px; height: 70px; padding: 0; box-shadow: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border: none; color: #fff;
  background-color: transparent; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: top center; background-size: 100% 0;
  transition: background-size 0.4s ease-in-out, color 0.2s ease;
}
.panier-flottant:hover { background-size: 100% 100%; color: var(--black); } /* sac noir sur fond blanc */
/* Sac + badge : le badge est ancré sur le SAC (pas sur le bouton) → reste au coin quelle que soit la largeur */
.panier-ico { position: relative; display: inline-flex; align-items: center; }
/* Picto panier amU + rebond à l'ajout au panier */
.amu-cart { overflow: visible; }   /* évite que le haut du chariot soit coupé pendant le rebond */
.amu-cart-g { transform-box: fill-box; transform-origin: center; }
@keyframes amu-cart-bump {
  0% { transform: translateY(0); } 25% { transform: translateY(-30%); }
  45% { transform: translateY(0); } 62% { transform: translateY(-13%); }
  80% { transform: translateY(0); } 90% { transform: translateY(-5%); }
  100% { transform: translateY(0); }
}
.amu-cart.bump .amu-cart-g { animation: amu-cart-bump 0.7s ease-out; }
/* Badge compteur — style Sartine : petit cercle plein noir, au coin haut-droit du sac */
#panier-badge {
  display: none; position: absolute; top: -6px; right: -8px; z-index: 3;
  min-width: 16px; height: 16px; padding: 0 3px;
  background: var(--black); color: #fff;
  border-radius: 8px; font-size: 0.55rem; font-weight: 700; font-family: var(--font-title);
  align-items: center; justify-content: center; pointer-events: none; line-height: 1;
}
/* Bouton burger — réplique racisme : fond blanc qui glisse du haut au hover, croix blanche→noire,
   croix→X au clic. Collé au panier. */
.menu-btn {
  position: relative; cursor: pointer; border: 0 none; box-shadow: none; padding: 0;
  display: flex; align-items: center; justify-content: center; width: 70px; height: 70px;
  background-color: transparent; background-image: linear-gradient(#fff, #fff); background-repeat: no-repeat; background-position: top center; background-size: 100% 0;
  transition: background-size 0.4s ease-in-out;
}
.menu-btn:hover, .menu-btn.active { background-size: 100% 100%; }
.menu-btn svg { display: block; width: 42px; height: 42px; overflow: visible; }
.croix { fill: none; stroke: #fff; stroke-width: 2; stroke-miterlimit: 10; transform-box: fill-box; transform-origin: center; transition: stroke 0.2s ease; }
.menu-btn:hover .croix, .menu-btn.active .croix { stroke: #000; } /* croix noire au hover (sur fond blanc) */
.menu-btn.active .croix01 { animation: croix-rotate01 0.5s forwards; }
.menu-btn.active .croix03 { animation: croix-opacity 0s forwards; }
.menu-btn.active .croix02 { animation: croix-rotate02 0.5s forwards; }
@keyframes croix-rotate01 { 0% { transform: rotate(0); } 100% { transform: rotate(45deg) translate(3.5px, 3.5px); } }
@keyframes croix-rotate02 { 0% { transform: rotate(0); } 100% { transform: rotate(-45deg) translate(3.5px, -3.5px); } }
@keyframes croix-opacity { 0% { opacity: 1; } 100% { opacity: 0; } }
/* Overlay menu collections (déroulé sous le bandeau, à droite) */
.sh-overlay { display: none; position: fixed; top: 70px; right: 0; z-index: 999; background: #fff; min-width: 250px; max-width: 92vw; box-shadow: -4px 10px 30px rgba(0,0,0,0.14); padding: 26px 40px 32px; }
.sh-overlay.active { display: block; animation: sh-overlay-in 0.25s ease both; }
@keyframes sh-overlay-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.sh-menu-list { list-style: none; margin: 0; padding: 0; }
.sh-menu-list li { margin: 0; }
.sh-menu-list a { display: block; padding: 2px 0; font-family: var(--font-title); font-weight: 700; font-size: 15px; line-height: 20px; color: var(--black); text-decoration: none; transition: transform 0.3s ease, color 0.2s ease; }
.sh-menu-list a:hover { transform: translateX(10px); color: var(--black); } /* reste noir, juste le décalage animé */

/* ===== Bandeau PROMO (pleine largeur, juste sous le header, police charte) ===== */
.promo-bandeau { width: 100%; background: var(--amu-purple); color: var(--white); }
.promo-bandeau-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px 28px; box-sizing: border-box; font-family: var(--font-title); }
.promo-bandeau-left { display: flex; align-items: center; gap: 18px; }
.promo-bandeau-msg { font-weight: 700; font-size: 1rem; letter-spacing: 0.2px; }
.promo-bandeau-cta { display: inline-block; padding: 7px 16px; border: 1px solid var(--white); border-radius: 3px; color: var(--white); text-decoration: none; font-weight: 700; font-size: 0.9rem; transition: background 0.2s ease, color 0.2s ease; }
.promo-bandeau-cta:hover { background: var(--white); color: var(--amu-purple); }
.promo-bandeau-cta.is-on { background: var(--white); color: var(--amu-purple); }
/* Prix remisé par la promo (« En profiter ») : ancien prix barré + nouveau prix */
.format-prix .prix-old { opacity: 0.55; text-decoration: line-through; font-weight: 400; margin-right: 4px; }
.format-prix .prix-new { color: var(--amu-purple); font-weight: 700; }
.promo-bandeau-more { display: inline-flex; align-items: center; gap: 6px; color: var(--white); background: none; border: 0; cursor: pointer; font-family: var(--font-title); font-weight: 700; font-size: 0.9rem; white-space: nowrap; padding: 0; line-height: 1; }
/* Soulignement animé façon footer — uniquement sous le libellé, pas la flèche */
.promo-bandeau-label { position: relative; display: inline-block; padding-bottom: 2px; }
.promo-bandeau-label::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: #fff; transform: translateX(-50%); transition: width 0.3s ease; }
.promo-bandeau-more:hover .promo-bandeau-label::after { width: 100%; }
.promo-bandeau-chev { display: block; flex-shrink: 0; transition: transform 0.25s ease; }
.promo-open .promo-bandeau-chev { transform: rotate(180deg); }
/* Panneau détail déplié par « Plus d'infos » */
.promo-bandeau-details { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.promo-open .promo-bandeau-details { max-height: 120px; }
.promo-bandeau-details p { margin: 0; padding: 0 28px 12px; text-align: center; font-family: var(--font-medium); font-weight: 600; font-size: 0.85rem; color: rgba(255,255,255,0.92); }
@media (max-width: 640px) {
  /* Texte promo aligné à GAUCHE, « Plus d'infos » reste à DROITE (space-between conservé). */
  .promo-bandeau-in { gap: 10px 14px; padding: 10px 16px; text-align: left; }
  .promo-bandeau-left { flex-wrap: wrap; justify-content: flex-start; gap: 8px 12px; }
  .promo-bandeau-msg { font-size: 0.85rem; }
}

/* HERO — carrousel aligné à DROITE (bloc + margin-left:auto) + bandeau jaune dessous */
.hero { position: relative; display: block; background-color: var(--amu-yellow); }
.bandeau { position: relative; width: 100%; height: 80px; background-color: var(--amu-yellow); }
.swiper { position: relative; display: block; z-index: 0; }
.swiper-boutique { display: block; width: 80%; margin-left: auto; margin-right: 0; position: relative; height: 460px; overflow-x: hidden; } /* margin-left:auto = collé à droite */
.image-wrapper { overflow: hidden; width: 100%; height: 100%; }
.image-wrapper img, .image-wrapper video { width: 100%; height: 100%; transition: transform 0.3s ease-in-out; display: block; }
.cover { object-fit: cover; object-position: center; }
.image-wrapper img:hover, .image-wrapper video:hover { transform: scale(1.2); }
.swiper-pagination-bullet, .swiper-pagination-bullet-active { height: 10px; width: 10px; background: #000; }

/* =============================================================================
   MAIN / GALERIE PRODUITS — cartes 2 colonnes
   ========================================================================== */
main.boutique-main { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 50px; }
#galerie { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 0 120px; }
.empty-shop { text-align: center; padding: 80px 20px; color: #888; font-family: var(--font-text); font-size: 1rem; }

.galerie-section { width: 100%; }
.section-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 48px; align-items: start; max-width: 940px; margin: 0 auto; } /* duo textile centré */

/* Séparateur : trait qui grandit depuis le centre au scroll */
.sep-line { width: 100%; max-width: 1180px; margin: 80px auto; }
.sep-line span { display: block; height: 1px; background: rgba(17,17,17,0.55); transform: scaleX(0); transform-origin: center; transition: transform 0.9s cubic-bezier(0.4,0,0.2,1); }
.sep-line.in span { transform: scaleX(1); }

/* Séparateur collection textile — façon amUNews (carré couleur + petit « Collection » + nom en gros) */
/* Séparateur collection textile, façon amUNews : trait fin pleine largeur,
   grand nom à gauche, petit label + carré couleur à droite (alignés en bas). */
.coll-sep { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; max-width: 1100px; margin: 110px auto 40px; padding-bottom: 26px; border-bottom: 1px solid var(--black); }
.coll-sep[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.coll-sep.in { opacity: 1; transform: none; }
.coll-sep-name { font-family: 'AMUMonumentGrotesk-Regular', sans-serif; font-weight: normal; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -1.5px; margin: 0; line-height: 0.95; color: var(--black); }
.coll-sep-right { display: flex; align-items: center; gap: 12px; padding-bottom: 6px; }
.coll-sep-label { font-family: 'AMUMonumentGrotesk-Regular', sans-serif; font-weight: normal; font-size: 1rem; letter-spacing: -0.2px; color: var(--black); }
.coll-sep-carre { width: 18px; height: 18px; display: block; flex-shrink: 0; }
/* Boutons ▲▼ de déplacement d'une collection (mode édition) */
.coll-move { display: flex; flex-direction: column; gap: 3px; margin: 0 0 4px 14px; }
.coll-move button { width: 26px; height: 20px; line-height: 1; padding: 0; border: 1px solid rgba(17,17,17,0.25); background: #fff; border-radius: 4px; cursor: pointer; font-size: 11px; color: var(--black); transition: background 0.15s ease, border-color 0.15s ease; }
.coll-move button:hover:not(:disabled) { background: var(--amu-purple); border-color: var(--amu-purple); color: #fff; }
.coll-move button:disabled { opacity: 0.3; cursor: default; }

/* Séparateur SVG entre les affiches (identique au site Sartine) */
svg.dots-separator {
    display: block;
    width: 150px;
    height: auto;
    margin: 100px auto;
    overflow: visible;
}
svg.dots-separator circle {
    fill: var(--black);
    transform-box: fill-box;
    transform-origin: center;
    animation: pulseSVG 1.5s infinite ease-in-out;
    animation-delay: calc(var(--i) * 0.1s);
    opacity: 0.2;
}
@keyframes pulseSVG {
    0%, 100% { transform: scale(1);   opacity: 0.2; }
    50%       { transform: scale(2.2); opacity: 0.8; }
}

/* Polices Sartine shop (Raleway + Bitter) UNIQUEMENT dans les produits — footer non touché */
#galerie { --font-title: 'Raleway', sans-serif; --font-medium: 'Raleway', sans-serif; --font-text: 'Bitter', serif; }

/* Carte produit verticale */
.produit-card { display: flex; flex-direction: column; position: relative; }
.collection-label { font-family: var(--font-medium); font-weight: 600; font-size: 0.95rem; letter-spacing: 2px; color: var(--black); display: block; margin-bottom: 18px; }
/* Nom produit textile = même police + taille que le label de collection */
.produit-card .title { font-family: var(--font-medium); font-weight: 600; font-size: 0.95rem; line-height: 1.25; letter-spacing: 2px; margin: 0 0 24px; }
/* Titre : « gros » en italique coloré (style Sartine), pas de fond jaune */
#galerie .title { font-family: var(--font-title); font-weight: 800; }
/* Sauf les cartes textile : nom calé sur le label de collection (police + poids + taille) */
#galerie .produit-card .title { font-family: var(--font-medium); font-weight: 600; font-size: 0.95rem; letter-spacing: 2px; }
#galerie .highlight { background: none; padding: 0; box-shadow: none; -webkit-box-shadow: none; font-style: italic; color: var(--amu-purple); }

/* =============================================================================
   AFFICHES — mise en page Sartine (un produit/ligne, texte + 2 images tetris)
   ========================================================================== */
.affiche-list { display: flex; flex-direction: column; gap: 70px; }
/* Tetris Sartine, bloc CENTRÉ dans la page :
   rang 1 = titre (gauche) | rang 2 = info+prix (gauche) + poster (droite, aligné sur l'info) | rang 3 = mise en situation (sous l'info, vers le poster) */
.affiche-grid {
  position: relative;   /* ancre l'overlay d'édition (✏ ✕ ▲▼) */
  display: grid; justify-content: center; align-items: start; gap: 12px 18px;   /* col-gap réduit = image droite plus proche de la gauche */
  grid-template-columns: minmax(0, 480px) 350px;
  grid-template-rows: auto auto auto;
}
.affiche-head { grid-column: 1 / 2; grid-row: 1 / 2; }
.affiche-body { grid-column: 1 / 2; grid-row: 2 / 3; display: flex; flex-direction: column; }
.affiche-before { font-family: var(--font-medium); font-weight: 600; font-size: 1rem; letter-spacing: 2px; color: var(--black); display: block; margin-bottom: 18px; }
/* Titre affiche : noir, légèrement réduit (tient dans la colonne 480px) */
.affiche-grid .title { font-family: var(--font-title); font-weight: 800; font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 0.92; letter-spacing: -2px; margin: 0; overflow-wrap: break-word; }
.affiche-grid .highlight { color: var(--black); font-style: normal; }
.affiche-grid .produit-buy { margin-top: 4px; max-width: none; }
/* Bloc info stock (logique Sartine) */
.produit-info {
  font-family: var(--font-text); font-size: 0.84rem; line-height: 1.65;
  color: rgba(17,17,17,0.6); margin: 0 0 22px; padding-bottom: 18px;
  border-bottom: 1px solid rgba(17,17,17,0.12);
}
.produit-info strong { font-family: var(--font-medium); color: rgba(17,17,17,0.85); }
/* Images affiches : coins Sartine (var(--radius)=6px) + ombre Sartine */
.affiche-grid .images-container { display: contents; }   /* transparent au grid en desktop */
.affiche-grid .item { position: relative; overflow: hidden; border-radius: var(--radius); box-shadow: 0px 5px 5px rgba(0,0,0,0.1); }
.affiche-grid .item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.affiche-grid .item:hover img { transform: scale(1.05); }
.affiche-img-1 { grid-column: 2 / 3; grid-row: 2 / 4; width: 350px; aspect-ratio: 2 / 3; align-self: start; }   /* poster : haut aligné sur l'info, à droite */
.affiche-img-2 { grid-column: 1 / 2; grid-row: 3 / 4; width: 375px; height: 250px; justify-self: end; align-self: start; margin-top: 40px; background: var(--amu-yellow); } /* mise en situation, sous l'info (avec espace), vers le poster */
/* Responsive (logique Sartine shop) */
@media (max-width: 1023px) {
  /* bloc centré dans une colonne (pas pleine largeur), comme Sartine */
  .affiche-grid { display: flex; flex-direction: column; align-items: stretch; margin: 0 auto; max-width: 640px; }
  .affiche-head { margin-bottom: 14px; }
  .affiche-body { margin-bottom: 30px; }
  .affiche-grid .produit-buy { max-width: none; }
  .affiche-grid .title { font-size: clamp(2.6rem, 7vw, 4.4rem); letter-spacing: -1px; }
  /* 2 images côte à côte, colonnes EXACTEMENT égales + même ratio 2/3 → hauteurs identiques.
     Sélecteur très spécifique pour écraser tout reliquat desktop (margin-top, height, etc.). */
  .affiche-grid .images-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; align-items: start; }
  .affiche-grid .images-container .item { grid-column: auto; grid-row: auto; width: 100%; height: auto; margin: 0; align-self: start; justify-self: stretch; aspect-ratio: 2 / 3; }
  .affiche-grid .images-container .item img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
@media (max-width: 800px) {
  .affiche-grid .title { font-size: 2.5rem; }
}
@media (max-width: 520px) {
  .affiche-grid .images-container { grid-template-columns: 1fr; }   /* empilé sur petit mobile */
}

/* ===== Carrousel d'affiches (index-carrousel.php) ===== */
.affiche-carrousel { position: relative; padding: 0 4px; }
/* le .swiper interne rogne (overflow:hidden) → la pagination est SA SŒUR, jamais dedans */
/* coupe nette sur les bords (pas de fondu blanc) — comme la galerie Sartine */
.affiche-car-swiper {
  width: 100%;
}
/* PAS d'autoHeight : toutes les slides s'alignent sur la plus haute → position des puces FIXE
   (les slides s'étirent à la hauteur max via le flex du .swiper-wrapper) */
.affiche-carrousel .swiper-slide { width: 100%; height: auto; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; }
.affiche-carrousel .affiche-grid { width: 100%; align-self: flex-start; }
/* Responsive : rendu galerie Sartine — images EMPILÉES en une seule colonne centrée
   (poster portrait au-dessus, mise en situation en dessous), chacune à son ratio naturel.
   Plus contenu / moins large que deux images côte à côte. */
@media (max-width: 1023px) {
  .affiche-carrousel .affiche-grid { max-width: 640px; }
  .affiche-carrousel .affiche-grid .images-container {
    grid-template-columns: 1fr;          /* une seule colonne → images empilées */
    max-width: max(280px, 55%); margin: 0 auto; gap: 16px;   /* images plus étroites que les blocs prix, centrées (comme Sartine) ; plancher 280px pour rester lisibles sur petit mobile */
  }
  .affiche-carrousel .affiche-grid .images-container .item {
    width: 100%; aspect-ratio: auto;     /* ratio naturel de chaque image (pas de 2/3 forcé) */
  }
  .affiche-carrousel .affiche-grid .images-container .item img { width: 100%; height: auto; }
}
/* pagination : ~30px sous le slide le plus haut, ne chevauche jamais les images */
.affiche-car-pagination { position: static; margin-top: 100px; display: flex; justify-content: center; gap: 8px; }
.affiche-car-pagination .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 50%; background: rgba(17,17,17,.22); opacity: 1; cursor: pointer; transition: background .2s ease; }
.affiche-car-pagination .swiper-pagination-bullet-active { background: var(--amu-purple); }

/* Zone d'achat (largeur limitée : boutons prix moins larges) */
.produit-buy { display: flex; flex-direction: column; gap: 10px; max-width: 340px; }

/* — SIMPLE : lignes format (bouton + ajout) — */
.format-row { display: flex; gap: 8px; align-items: stretch; }
.format-btn {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 18px; flex: 1; text-align: left; cursor: pointer;
  background: rgba(153,102,255,0.08); border: 1.5px solid var(--amu-purple); border-radius: var(--radius);
  font-family: var(--font-medium); font-weight: 600; color: var(--amu-purple); transition: background 0.2s ease;
}
.format-btn:hover { background: rgba(153,102,255,0.16); }
.format-label { font-size: 0.88rem; letter-spacing: 0.3px; }
.format-prix { font-family: var(--font-title); font-weight: 700; font-size: 0.95rem; }

/* Bouton ajouter (mauve par défaut, noir au survol) — partagé */
.format-add-btn, .apparel-add {
  flex-shrink: 0; background: var(--amu-purple); color: #fff; border: none; border-radius: var(--radius);
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: background 0.2s ease, transform 0.15s ease;
}
.format-add-btn { width: 48px; }
.format-add-btn:hover, .apparel-add:hover { background: var(--black); transform: translateY(-1px); }
.format-add-btn:disabled, .apparel-add:disabled { opacity: 0.5; cursor: wait; transform: none; }

/* Compteur inline (spans, jamais <button> imbriqué) */
.format-inline-qty { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.qty-span { width: 22px; height: 22px; border: 1.5px solid var(--amu-purple); border-radius: 50%; cursor: pointer; font-size: 0.9rem; line-height: 1; user-select: none; color: var(--amu-purple); display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; }
.qty-span:hover { background: var(--amu-purple); color: #fff; }
.qty-num { font-family: var(--font-title); font-size: 0.85rem; min-width: 14px; text-align: center; }

/* — TEXTILE : couleurs (petites, 1 ligne) + boîte [taille | quantité | prix] + ajouter — */
/* Titres textile : entre le visuel (et les points du swiper) et les sélecteurs, centrés, aérés */
.apparel-head { text-align: center; margin: 26px 0 22px; }
.apparel-head .collection-label { margin-bottom: 8px; }
.apparel-head .title { margin: 0; }
.apparel-controls { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 0; }
/* pastilles couleur réduites, centrées, jamais 2 lignes (scroll horizontal si trop nombreuses) */
.swatch-row { display: flex; flex-wrap: nowrap; justify-content: center; max-width: 100%; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 7px 9px; }
.swatch { flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; cursor: pointer; padding: 0; border: 1px solid rgba(17,17,17,0.25); transition: transform 0.15s ease; }
.swatch:hover { transform: scale(1.2); }
.swatch.selected { box-shadow: 0 0 0 1.5px var(--white), 0 0 0 3px var(--black); }
/* Couleur indisponible (scan live) : grisée, barrée, non cliquable */
.swatch--off { display: none; }   /* couleurs indisponibles : masquées (non affichées) */
.swatch-row--single { display: none; }   /* une seule couleur : pas de sélecteur (swatch conservé pour le panier) */
/* taille modifiable intégrée à la boîte prix — bloc réduit */
.apparel-controls .format-row { max-width: 300px; }
.apparel-box { gap: 8px; padding: 10px 14px; }
.apparel-box .format-prix { font-size: 0.9rem; }
.apparel-box .qty-span { width: 20px; height: 20px; }
.size-select { border: none; background: transparent; color: var(--amu-purple); font-family: var(--font-medium); font-weight: 600; font-size: 0.88rem; cursor: pointer; padding: 2px 2px; border-radius: 4px; max-width: 45%; }
.size-select:focus { outline: 1.5px solid var(--amu-purple); }
.size-select option:disabled { color: #bbb; }

/* Photo / carrousel produit (textile : sous les titres). aspect-ratio 1/1 (visuels Spreadshirt carrés)
   → hauteur définie tout de suite, même en lazy-load → le swiper s'affiche. */
.produit-photo { border-radius: var(--radius); overflow: hidden; background: var(--grey); aspect-ratio: 1 / 1; }
.produit-photo img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.6s ease; }
.produit-photo:hover img { transform: scale(1.04); }
/* taille raisonnable du visuel produit, centré (sinon carré plein écran en 1 colonne) */
.produit-card > .produit-photo,
.produit-swiper { width: 100%; max-width: 360px; margin: 18px auto 0; }
.produit-swiper .swiper-slide { height: auto; }
.produit-swiper .produit-photo { aspect-ratio: 1 / 1; margin: 0; }
.produit-swiper .swiper-pagination { position: static; margin-top: 10px; display: flex; justify-content: center; gap: 6px; }
.produit-swiper .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: rgba(17,17,17,0.22); opacity: 1; cursor: pointer; }
.produit-swiper .swiper-pagination-bullet-active { background: var(--amu-purple); }

.format-error { font-size: 0.82rem; color: #c0392b; font-family: var(--font-text); margin-top: 4px; }

/* =============================================================================
   DRAWER PANIER + OVERLAY + TOAST
   ========================================================================== */
#panier-drawer {
  position: fixed; top: 0; right: -520px; width: 480px; max-width: 100vw;
  height: 100vh; height: 100dvh; background: var(--white); z-index: 9000;
  transition: right 0.35s cubic-bezier(0.4,0,0.2,1); box-shadow: -4px 0 40px rgba(0,0,0,0.10);
  display: flex; flex-direction: column; font-family: var(--font-text);
}
#panier-drawer.is-open { right: 0; }
#panier-overlay { display: none; position: fixed; inset: 0; background: rgba(17,17,17,0.35); z-index: 8999; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#panier-overlay.is-open { display: block; }

.drawer-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 28px 20px; border-bottom: 1px solid rgba(17,17,17,0.1); flex-shrink: 0; }
.drawer-titre { font-family: var(--font-title); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 2px; margin: 0; }
.drawer-close { background: none; border: none; font-size: 1.1rem; cursor: pointer; color: var(--black); opacity: 0.4; transition: opacity 0.2s; padding: 4px; line-height: 1; }
.drawer-close:hover { opacity: 1; }

#drawer-items { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 28px; display: flex; flex-direction: column; gap: 20px; }
.drawer-vide { font-family: var(--font-text); font-size: 0.95rem; color: rgba(17,17,17,0.45); font-style: italic; margin: 40px 0; text-align: center; }
.drawer-item { display: flex; gap: 16px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(17,17,17,0.08); }
.drawer-item:last-child { border-bottom: none; padding-bottom: 0; }
.drawer-item img { width: 72px; height: 90px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,0.10); background: var(--grey); }
.drawer-item-info { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.drawer-item-name { font-family: var(--font-medium); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }
.drawer-item-format { font-size: 0.78rem; color: rgba(17,17,17,0.55); }
.drawer-item-qty { font-size: 0.78rem; font-weight: 700; color: rgba(17,17,17,0.45); }
.drawer-item-prix { font-family: var(--font-title); font-size: 0.95rem; color: var(--black); margin-top: 4px; }
.drawer-item-trash { background: none; border: none; padding: 4px; cursor: pointer; color: rgba(17,17,17,0.22); transition: color 0.2s; line-height: 0; flex-shrink: 0; margin-left: auto; align-self: center; }
.drawer-item-trash:hover { color: #c0392b; }

.drawer-footer { padding: 20px 28px 36px; border-top: 1px solid rgba(17,17,17,0.1); flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; }
.drawer-total-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(17,17,17,0.55); }
.drawer-note-port { font-size: 0.7rem; color: rgba(17,17,17,0.38); font-style: italic; text-align: right; margin-top: -4px; }
.btn-commander {
  display: block; margin-top: 12px; padding: 16px 24px; background: var(--black); color: var(--amu-yellow);
  text-align: center; text-decoration: none; font-family: var(--font-title); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 1.5px; border-radius: var(--radius); border: none; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.btn-commander:hover { background: var(--amu-purple); color: #fff; transform: translateY(-1px); }

#panier-toast {
  position: fixed; z-index: 1300; background: var(--amu-purple); color: var(--black);
  padding: 10px 14px; border-radius: var(--radius); font-family: var(--font-medium); font-size: 0.78rem; line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); pointer-events: none; opacity: 0; transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease; max-width: 300px;
}
#panier-toast.is-visible { opacity: 1; transform: translateY(0); }

/* =============================================================================
   FOOTER amU (réseaux, menu, logo animé)
   ========================================================================== */
footer.amu-footer { position: relative; font-size: 12px; color: #fff; display: flex; flex-direction: column; background-color: var(--amu-purple); margin-top: 80px; }
.footer-haut { display: flex; flex-direction: column; gap: 20px; padding: 20px; min-height: 420px; }
.rs { display: flex; align-items: center; justify-content: space-between; }
.rs > div { display: flex; align-items: center; }
.rs > div > div { margin-right: 20px; }
.rs a { transition: filter 0.3s ease; }
.rs a:hover { filter: brightness(0) invert(0); }
.rs img { height: 20px; width: 20px; margin: 0 2px; border: 0.5px solid #fff; }
.footer-separateur { border-bottom: 0.5px solid #fff; width: 100%; }
.footer-menu { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 10px; text-align: left; }
.footer-menu div { align-content: center; }
.footer-menu a { color: #fff; text-decoration: none; position: relative; display: inline-block; padding-bottom: 2px; }
.footer-menu a::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1px; background: #fff; transform: translateX(-50%); transition: width 0.3s ease; }
.footer-menu a:hover::after { width: 100%; }
.footer-bas { display: flex; gap: 20px; }
.copyright { flex: 1; white-space: nowrap; display: flex; align-items: flex-end; padding-left: 20px; }
.footer-logo { align-self: flex-end; display: flex; justify-content: flex-end; align-items: flex-end; width: 100%; opacity: 0; transition: opacity 0.3s ease; }
.footer-logo.active { opacity: 1; }
.footer-logo svg { width: 500px; height: auto; max-width: 100%; }
.footer-logo-01 { fill: #000; }
.footer-logo-02 { fill: #fff; }
.footer-logo.active #blocA, .footer-logo.active #lettre_a { animation: footer-logo-translate 1s 1 both; }
.footer-logo.active #blocM, .footer-logo.active #lettre_m { animation: footer-logo-translate 1s 0.3s 1 both; }
.footer-logo.active #blocU, .footer-logo.active #lettre_U { animation: footer-logo-translate 1s 0.6s 1 both; }
@keyframes footer-logo-translate { 0% { transform: translateY(200%); } 100% { transform: translateY(0); } }

/* Colonnes infos boutique / Spreadshirt */
.footer-cols { display: flex; flex-wrap: wrap; gap: 24px 50px; }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-heading { font-family: var(--font-medium); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; margin: 0 0 6px; color: #fff; }
.footer-link { color: #fff; text-decoration: none; font-size: 12px; width: fit-content; position: relative; }
.footer-link:not(.footer-link--plain)::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 0; height: 1px; background: #fff; transform: translateX(-50%); transition: width 0.3s ease; }
.footer-link:not(.footer-link--plain):hover::after { width: 100%; }
.footer-link--plain { opacity: 0.7; cursor: default; }
.footer-taglines { font-style: italic; opacity: 0.55; font-size: 11px; }
.footer-taglines p { margin: 2px 0; }

/* Nom amU sous le logo + hover (trait qui grandit depuis le centre) */
.footer-logo-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; width: 100%; }
.footer-amu-name { color: #fff; text-decoration: none; font-family: var(--font-medium); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; position: relative; padding-bottom: 4px; }
.hover-grow::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 0; height: 1.5px; background: #fff; transform: translateX(-50%); transition: width 0.3s ease; }
.hover-grow:hover::after { width: 100%; }

/* =============================================================================
   ADMIN — overlays produit + barre + modal (mode édition)
   ========================================================================== */
.shop-edit-overlay { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; opacity: 0; transition: opacity .2s; z-index: 20; }
.produit-card:hover .shop-edit-overlay,
.affiche-grid:hover .shop-edit-overlay { opacity: 1; }   /* affiches aussi éditables/supprimables */
.shop-edit-btn, .shop-del-btn, .shop-toggle-btn, .shop-move { height: 28px; min-width: 28px; padding: 0 9px; border-radius: 4px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; font-family: var(--font-medium); }
.shop-move { background: rgba(26,26,46,0.8); color: #fff; padding: 0 8px; }
.shop-move:hover { background: #1a1a2e; }
.shop-edit-btn { background: #1a1a2e; color: #fff; }
.shop-del-btn { background: #ef4444; color: #fff; }
.shop-toggle-btn--active { background: rgba(74,222,128,0.2); color: #166534; border: 1px solid rgba(74,222,128,0.5); }
.shop-toggle-btn--inactive { background: rgba(148,163,184,0.15); color: #64748b; border: 1px solid rgba(148,163,184,0.3); }
.shop-product--inactive { opacity: 0.35; }
.shop-product--inactive .shop-edit-overlay { opacity: 1; }

#amu-admin-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: #1a1a2e; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; z-index: 9500; font-family: var(--font-medium); font-size: 13px; }
#amu-admin-bar .sab-left, #amu-admin-bar .sab-right { display: flex; align-items: center; gap: 10px; }
.sab-btn { padding: 7px 14px; border-radius: 5px; background: rgba(255,255,255,0.12); color: #fff; border: none; cursor: pointer; text-decoration: none; font-size: 13px; font-family: var(--font-medium); }
.sab-btn:hover { background: rgba(255,255,255,0.22); }
.sab-btn-primary { background: var(--amu-yellow); color: #1a1a2e; font-weight: 700; }
.sab-btn-logout { background: rgba(239,68,68,0.85); }

#bab-modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.7); z-index: 9600; align-items: center; justify-content: center; }
#bab-modal-overlay.open { display: flex; }
#bab-modal { background: #fff; border-radius: 8px; width: min(920px, 94vw); max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; font-family: var(--font-medium); }
.bab-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
.bab-modal-header h2 { font-size: 15px; margin: 0; color: #1a1a2e; }
.bab-modal-close { background: none; border: none; font-size: 18px; cursor: pointer; color: #6b7280; }
.bab-modal-body { flex: 1; overflow-y: auto; padding: 20px; }
.bab-step-indicator { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; font-size: 12px; color: #6b7280; }
.bab-step-indicator .step { padding: 2px 10px; border-radius: 20px; background: #f3f4f6; font-weight: 600; }
.bab-step-indicator .step.active { background: #1a1a2e; color: #fff; }
#bab-sprd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 12px; }
.bab-sprd-card { border: 2px solid #e5e7eb; border-radius: 6px; padding: 10px; cursor: pointer; transition: border-color .15s; text-align: center; position: relative; }
.bab-sprd-card:hover { border-color: #1a1a2e; }
.bab-sprd-card.selected { border-color: var(--amu-purple); background: #f6f2ff; }
.bab-sprd-card.already-added { opacity: .45; cursor: not-allowed; }
.bab-sprd-card.already-added::after { content: 'Déjà ajouté'; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 9px; color: #6b7280; }
.bab-sprd-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; border-radius: 3px; margin-bottom: 6px; background: #f8f8f8; }
.bab-card-name { font-size: 11px; font-weight: 600; color: #1a1a2e; line-height: 1.2; }
#bab-step2 { display: none; }
.bab-title-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.bab-field label { display: block; font-size: 11px; font-weight: 600; color: #6b7280; margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; }
.bab-field input, .bab-field select, .bab-field textarea { width: 100%; padding: 7px 10px; border: 1px solid #d1d5db; border-radius: 4px; font-size: 13px; font-family: var(--font-medium); }
.bab-upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.bab-upload-zone { border: 2px dashed #d1d5db; border-radius: 6px; padding: 20px; text-align: center; cursor: pointer; transition: border-color .15s; position: relative; }
.bab-upload-zone:hover { border-color: #1a1a2e; }
.bab-upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bab-upload-zone .bab-preview { width: 100%; max-height: 200px; object-fit: contain; margin-top: 10px; display: none; border-radius: 4px; }
.bab-upload-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #1a1a2e; }
.bab-upload-label { font-size: 12px; color: #6b7280; pointer-events: none; }
.bab-modal-footer { padding: 14px 20px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 10px; }
.bab-btn-cancel { padding: 8px 16px; border: 1px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; font-family: var(--font-medium); }
.bab-btn-save { padding: 8px 20px; background: var(--amu-purple); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--font-medium); }
.bab-btn-save:disabled { opacity: .5; cursor: not-allowed; }
.bab-loader { text-align: center; padding: 40px; color: #6b7280; font-size: 13px; }

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1023px) {
  main.boutique-main { padding: 0 20px; }
  #galerie { padding: 40px 0 80px; }
  .section-grid { gap: 56px 36px; }
  .sep-line { margin: 56px auto; }
  .footer-cols { gap: 20px 30px; }
  .footer-haut { min-height: 320px; }
}
@media (max-width: 760px) {
  body { padding-top: 64px; }
  .bandeau { display: none; }   /* bandeau jaune masqué en responsive */
  .site-header { height: 64px; padding-right: 0; }
  .sh-logo { height: 64px; }
  .sh-logo img { height: 64px; max-height: 64px; } /* logo = hauteur du bandeau en responsive */
  .site-header.header-secondaire .sh-logo img { height: 64px; max-height: 64px; }
  /* Mêmes pictos qu'en desktop : panier + burger collés, même hover blanc, badge ancré au sac */
  .sh-right { height: 64px; gap: 0; }
  .panier-flottant, .menu-btn { width: 56px; height: 64px; }
  .menu-btn svg { width: 34px; height: 34px; }
  .sh-overlay { top: 64px; }
  .swiper-boutique { width: 100%; height: 300px; }
  .produit-photo, .produit-buy { max-width: 100%; }
  .section-grid { grid-template-columns: 1fr; gap: 60px; }
  .footer-bas { flex-direction: column; gap: 20px; }
  .footer-logo-wrap { align-items: flex-start; }
  .footer-menu { flex-direction: column; align-items: flex-start; }
  .footer-cols { flex-direction: column; }
  #panier-drawer { width: 100vw; right: -100vw; }
  #panier-drawer.is-open { right: 0; }
  svg.dots-separator { margin: 40px auto; }
}
/* Vrais téléphones : logo encore réduit, pictos identiques (mêmes comportements) */
@media (max-width: 480px) {
  body { padding-top: 56px; }
  .site-header { height: 56px; }
  .sh-logo { height: 56px; }
  .sh-logo img { height: 56px; max-height: 56px; }
  .site-header.header-secondaire .sh-logo img { height: 56px; max-height: 56px; }
  .sh-right { height: 56px; }
  .panier-flottant, .menu-btn { width: 50px; height: 56px; }
  .menu-btn svg { width: 30px; height: 30px; }
  .sh-overlay { top: 56px; min-width: 190px; padding: 22px 26px 26px; }
  svg.dots-separator { margin: 30px auto; }
}

/* =============================================================================
   « + d'infos » (carte textile) + PAGE PRODUIT
   ========================================================================== */
.pp-link-wrap { width: 100%; max-width: 300px; margin-top: -2px; text-align: left; }
.pp-link { display: inline-block; position: relative; font-family: var(--font-medium); font-size: 0.82rem; color: var(--black); text-decoration: none; padding-bottom: 3px; }

/* Page produit : polices Sartine */
#pp { --font-title: 'Raleway', sans-serif; --font-medium: 'Raleway', sans-serif; --font-text: 'Bitter', serif; }
.pp { width: 100%; max-width: 1100px; margin: 0 auto; padding: 48px 0 90px; }
.pp-back { display: inline-flex; align-items: center; gap: 6px; position: relative; font-family: var(--font-medium); font-weight: 600; font-size: 0.85rem; color: var(--black); text-decoration: none; padding-bottom: 4px; margin-bottom: 26px; }
.pp-back-arrow { width: 26px; height: 26px; display: block; transform: scaleX(-1); transform-origin: center; } /* flèche animée retournée vers la gauche */
.pp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: start; }

/* Galerie : swiper carré à hauteur fixe (aspect-ratio) → indépendant du chargement image */
.pp-swiper { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; background: var(--grey); }
.pp-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pp-pagination { position: static; margin-top: 12px; display: flex; justify-content: center; gap: 6px; }
.pp-pagination .swiper-pagination-bullet { width: 8px; height: 8px; border-radius: 50%; background: rgba(17,17,17,0.22); opacity: 1; cursor: pointer; }
.pp-pagination .swiper-pagination-bullet-active { background: var(--amu-purple); }

/* Panneau achat */
.pp-buy .collection-label { color: var(--black); margin-bottom: 8px; }
.pp-buy .title { font-family: var(--font-title); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.1; letter-spacing: -0.5px; margin: 0 0 16px; }
#pp .highlight { color: var(--black); font-style: normal; background: none; }
.pp-price { font-family: var(--font-title); font-weight: 800; font-size: 1.6rem; color: var(--black); margin-bottom: 22px; }
.pp-price-note { display: block; font-family: var(--font-text); font-weight: 400; font-size: 0.72rem; color: rgba(17,17,17,0.5); margin-top: 2px; }
/* Bloc infos sous le prix */
.pp-meta { margin: -6px 0 24px; }
.pp-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-family: var(--font-text); font-size: 0.85rem; color: var(--black); margin-bottom: 16px; }
.pp-meta-fit { display: inline-flex; align-items: center; gap: 6px; color: rgba(17,17,17,0.7); }
.pp-meta-link { color: var(--black); text-decoration: none; position: relative; font-family: var(--font-medium); padding-bottom: 2px; }
.pp-meta-sys { color: var(--black); font-family: var(--font-medium); }
.pp-stock { display: flex; align-items: flex-start; gap: 8px; font-family: var(--font-text); font-size: 0.9rem; line-height: 1.5; color: var(--black); margin: 0 0 12px; }
.pp-stock svg { color: var(--amu-purple); flex-shrink: 0; margin-top: 2px; }
.pp-livraison { font-family: var(--font-text); font-size: 0.92rem; color: var(--black); margin: 0 0 8px; }
.pp-short-desc { font-family: var(--font-text); font-size: 0.85rem; line-height: 1.55; color: rgba(17,17,17,0.6); margin: 0; }
.pp-block { margin-bottom: 18px; }
.pp-block .ctrl-label { font-family: var(--font-medium); font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(17,17,17,0.55); margin-bottom: 8px; display: block; }
.pp-swatch-row { justify-content: flex-start; }
.pp-buy-row { display: flex; gap: 8px; align-items: stretch; max-width: 360px; margin-top: 6px; }
.pp-box { flex: 1; }
.pp-fit { font-family: var(--font-text); font-size: 0.8rem; color: rgba(17,17,17,0.55); margin-top: 12px; }

/* Description + tailles + aperçus */
.pp-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: start; }
.pp-h2 { font-family: var(--font-title); font-weight: 800; font-size: 1.4rem; color: var(--black); margin: 0 0 18px; }
.pp-desc-design { font-family: var(--font-text); font-style: italic; color: rgba(17,17,17,0.6); margin: 0 0 14px; line-height: 1.6; }
.pp-desc-body { font-family: var(--font-text); font-size: 0.9rem; line-height: 1.7; color: rgba(17,17,17,0.72); }
.pp-desc-body ul { padding-left: 1.1em; margin: 0; }
.pp-desc-body li { margin-bottom: 6px; }
.pp-sizes-note { font-family: var(--font-text); font-size: 0.85rem; color: rgba(17,17,17,0.55); margin: 0 0 12px; }
.pp-size-table { width: 100%; border-collapse: collapse; font-family: var(--font-text); font-size: 0.88rem; }
.pp-size-table th { text-align: left; font-family: var(--font-medium); font-weight: 700; padding: 9px 10px; border-bottom: 1.5px solid rgba(17,17,17,0.18); }
.pp-size-table td { padding: 9px 10px; border-bottom: 1px solid rgba(17,17,17,0.08); }
.pp-size-table .row-out { color: rgba(17,17,17,0.3); }
.pp-apercus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pp-apercu img { width: 100%; height: auto; display: block; border-radius: var(--radius); background: var(--grey); }

@media (max-width: 860px) {
  .pp-top, .pp-info { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pp-apercus-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================================================================
   COLLECTION « JEUNESSE 2027 » — DA dédiée (bandeau navy plein largeur), scopée.
   N'affecte QUE les collections dont le nom contient « jeunesse ».
   ========================================================================== */
@font-face{ font-family:"CyGroteskGrand"; src:url("../font/CyGroteskStd-GrandLight.otf")   format("opentype"); font-weight:300; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../font/CyGroteskStd-GrandRegular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../font/CyGroteskStd-GrandMedium.otf")  format("opentype"); font-weight:500; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../font/CyGroteskStd-GrandBold.otf")    format("opentype"); font-weight:700; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../font/CyGroteskStd-GrandHeavy.otf")   format("opentype"); font-weight:800; font-display:swap; }
@font-face{ font-family:"CyGroteskGrand"; src:url("../font/CyGroteskStd-GrandBlack.otf")   format("opentype"); font-weight:900; font-display:swap; }

/* Bandeau navy pleine largeur (sort de la colonne #galerie max 1180px) */
.jeunesse-band{
  --j-navy:#1a0a3d; --j-navy2:#241452; --j-navy3:#30206b;
  --j-green:#11d761; --j-pink:#ff385f; --j-acid:#c8f402; --j-yellow:#f3ff47;
  --j-font:"CyGroteskGrand","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--j-navy); color:#fff;
  margin: 70px calc(50% - 50vw) 0;
  padding: clamp(84px,8vw,150px) calc(50vw - 50%) clamp(96px,9vw,160px);
  /* fond en biais (parallélogramme), façon site Jeunesse 2027 */
  clip-path: polygon(0 0, 100% 2.6vw, 100% 100%, 0 calc(100% - 2.6vw));
}
/* toutes les polices de la zone passent en CyGrotesk */
#galerie .theme-jeunesse{ --font-title:var(--j-font); --font-medium:var(--j-font); --font-text:var(--j-font); }

/* ----- séparateur de collection ----- */
.jeunesse-band .coll-sep.theme-jeunesse{ margin: 0 auto 46px; max-width:1100px; border-bottom-color:rgba(255,255,255,.28); }
#galerie .theme-jeunesse .coll-sep-label{ font-family:var(--j-font); color:var(--j-acid); text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:.82rem; }
#galerie .theme-jeunesse .coll-sep-name{ font-family:var(--j-font); color:#fff; text-transform:uppercase; font-weight:900; letter-spacing:-.02em; line-height:.84; }
/* titre Jeunesse en logo SVG (au lieu du texte) */
.coll-sep-name--logo{ display:flex; align-items:flex-end; line-height:0; }
.coll-sep-name--logo img{ height:clamp(48px,7vw,96px); width:auto; max-width:62vw; display:block; }
.theme-jeunesse .jeunesse-dot{ width:18px; height:18px; background:var(--j-acid); border-radius:4px; display:block; }

/* ----- cartes textile : fond BLANC (les visuels Spreadshirt sont des JPG fond blanc
   → ils se fondent, plus de « carré » bleu disgracieux). Texte navy, accents rose/citrine. ----- */
#galerie .theme-jeunesse .produit-card{ background:#fff; color:var(--j-navy); border-radius:12px; padding:16px 14px 18px; box-shadow:0 14px 34px rgba(0,0,0,.28); }
#galerie .theme-jeunesse .produit-photo,
#galerie .theme-jeunesse .produit-swiper{ background:#fff; }
#galerie .theme-jeunesse .collection-label{ display:none; }   /* pas de rappel du nom de collection sous le produit */
#galerie .theme-jeunesse .title{ color:var(--j-navy); text-transform:uppercase; font-weight:800; letter-spacing:0; }
#galerie .theme-jeunesse .highlight{ color:var(--j-navy); font-style:normal; }
#galerie .theme-jeunesse .format-prix{ color:var(--j-navy); font-weight:800; }
#galerie .theme-jeunesse .size-select{ color:var(--j-navy); }
#galerie .theme-jeunesse .qty-span,
#galerie .theme-jeunesse .qty-num{ color:var(--j-navy); }
#galerie .theme-jeunesse .format-btn,
#galerie .theme-jeunesse .apparel-box{ background:#fff; border:1.5px solid var(--j-navy); border-radius:999px; color:var(--j-navy); }
#galerie .theme-jeunesse .format-add-btn,
#galerie .theme-jeunesse .apparel-add{ background:var(--j-acid); color:var(--j-navy); border-radius:999px; }
#galerie .theme-jeunesse .format-add-btn:hover,
#galerie .theme-jeunesse .apparel-add:hover{ background:var(--j-green); }
#galerie .theme-jeunesse .pp-link{ color:var(--j-navy); }
#galerie .theme-jeunesse .swatch{ outline:1px solid rgba(26,10,61,.18); }
/* détails interactifs : plus de violet amU → vert + bleu marine (charte Jeunesse) */
#galerie .theme-jeunesse .qty-span{ border-color:var(--j-navy); color:var(--j-navy); font-family:Arial,system-ui,sans-serif; line-height:1; align-items:center; justify-content:center; }
#galerie .theme-jeunesse .qty-span:hover{ background:var(--j-green); border-color:var(--j-green); color:var(--j-navy); }
#galerie .theme-jeunesse .size-select:focus{ outline-color:var(--j-navy); }
#galerie .theme-jeunesse .prix-new{ color:var(--j-green); }
#galerie .theme-jeunesse .produit-swiper .swiper-pagination-bullet{ background:rgba(26,10,61,.25); }
#galerie .theme-jeunesse .produit-swiper .swiper-pagination-bullet-active{ background:var(--j-green); }
/* contrôles compacts : CyGrotesk (display) est trop large → police neutre + tailles réduites,
   pour que la pastille taille/prix + le bouton d'ajout tiennent dans la carte (gourde, tote…) */
#galerie .theme-jeunesse .apparel-box,
#galerie .theme-jeunesse .size-select,
#galerie .theme-jeunesse .format-prix,
#galerie .theme-jeunesse .qty-num{ font-family:Arial,system-ui,sans-serif; }
#galerie .theme-jeunesse .size-select{ font-size:.8rem; max-width:42%; }
#galerie .theme-jeunesse .format-prix{ font-size:.82rem; }
#galerie .theme-jeunesse .apparel-box{ padding:9px 12px; gap:6px; min-width:0; flex:0 1 auto; }
/* bloc d'achat (taille + qté + prix + ajout) centré dans la carte */
#galerie .theme-jeunesse .apparel-controls .format-row{ justify-content:center; max-width:100%; }
/* toutes les cartes Jeunesse à la même hauteur (= la plus haute) ; bloc d'achat aligné en bas */
#galerie .theme-jeunesse .section-grid{ align-items:stretch; grid-auto-rows:1fr; grid-template-columns:repeat(3, minmax(0,1fr)); max-width:none; gap:clamp(24px,2.4vw,46px) clamp(20px,2vw,36px); }
@media (max-width:900px){ #galerie .theme-jeunesse .section-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ #galerie .theme-jeunesse .section-grid{ grid-template-columns:minmax(0,1fr); } }
#galerie .theme-jeunesse .produit-card{ height:100%; display:flex; flex-direction:column; }
#galerie .theme-jeunesse .produit-card .apparel-controls{ margin-top:auto; }
/* Hauteurs égales pour TOUTES les grilles produits (textile + accessoires, pas que Jeunesse) */
#galerie .section-grid{ align-items:stretch; grid-auto-rows:1fr; }
#galerie .section-grid .produit-card{ height:100%; display:flex; flex-direction:column; }
#galerie .section-grid .produit-card .apparel-controls{ margin-top:auto; }

/* ----- bloc de présentation (entre séparateur et produits) ----- */
.jeunesse-intro{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center; margin:0 auto clamp(42px,5vw,68px); }
.jeunesse-intro-eyebrow{ display:inline-block; font-family:var(--j-font); color:var(--j-acid); text-transform:uppercase; letter-spacing:.18em; font-weight:800; font-size:.8rem; margin-bottom:14px; }
.jeunesse-intro-titre{ font-family:var(--j-font); color:#fff; text-transform:uppercase; font-weight:900; font-size:clamp(2rem,4.4vw,3.6rem); line-height:.9; letter-spacing:-.02em; margin:0 0 18px; }
.jeunesse-intro-logo{ display:block; height:clamp(112px,15vw,188px); width:auto; max-width:100%; margin:0 0 18px; }
.jeunesse-intro-desc{ color:rgba(255,255,255,.88); font-family:var(--j-font); font-weight:400; font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.45; margin:0; max-width:42ch; }
/* collage staggered façon Sartine : 1 image haute à gauche, 2 empilées à droite */
.jeunesse-intro-imgs{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; }
.jeunesse-intro-imgs img{ width:100%; height:100%; object-fit:cover; border-radius:8px; display:block; }
.jii-tall{ grid-column:1; grid-row:1 / span 2; }
.jii-wide{ grid-column:2; grid-row:1; aspect-ratio:4/3; }
.jii-square{ grid-column:2; grid-row:2; aspect-ratio:4/3; }
@media (max-width:860px){ .jeunesse-intro{ grid-template-columns:1fr; gap:24px; } }

/* ----- affiches (carrousel + liste admin) ----- */
#galerie .theme-jeunesse .affiche-before{ color:var(--j-acid); }
#galerie .theme-jeunesse .affiche-grid .title{ color:#fff; }
#galerie .theme-jeunesse .affiche-grid .highlight{ color:var(--j-acid); }
#galerie .theme-jeunesse .produit-info{ color:rgba(255,255,255,.72); border-bottom-color:rgba(255,255,255,.18); }
#galerie .theme-jeunesse .produit-info strong{ color:#fff; }
#galerie .theme-jeunesse .dots-separator circle{ fill:rgba(255,255,255,.6); }
#galerie .theme-jeunesse .affiche-car-pagination .swiper-pagination-bullet{ background:rgba(255,255,255,.3); }
#galerie .theme-jeunesse .affiche-car-pagination .swiper-pagination-bullet-active{ background:var(--j-acid); }

/* ----- admin : collection présente mais non publiée ----- */
.jeunesse-band--off{ outline:2px dashed rgba(200,244,2,.5); outline-offset:-12px; }
.jeunesse-badge{ display:inline-block; background:var(--j-acid,#c8f402); color:#1a0a3d; font:700 .7rem/1 system-ui,sans-serif; text-transform:uppercase; letter-spacing:.04em; padding:6px 10px; border-radius:999px; }
.jeunesse-band-admin{ display:flex; justify-content:flex-end; align-items:center; gap:12px; margin-bottom:14px; }