/* ============================================================================
   ATELIER — home : COLLE TECHNIQUE PrestaShop UNIQUEMENT.
   Tout le style décoratif (.hero/.universes/.prow/.trust/.rachat/.occ-*…)
   vit dans atelier-maquette.css (style.css de la maquette, verbatim).
   ============================================================================ */

/* ---------- home pleine largeur : neutraliser les colonnes du layout ---------- */
body#index #content-wrapper{ width:100%; max-width:100%; flex:0 0 100%; }
body#index #left-column,
body#index #right-column{ display:none !important; }
.atelier-home{ padding:0; }

/* ---------- grille produits .prow : battre le <style> inline du layout ----------
   (le layout force .products{display:flex;max-width:320px} ; on remonte la
   spécificité avec .atelier-home pour réimposer la grille 4 colonnes maquette) */
.atelier-home .products.prow{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:stretch; }
.atelier-home .products.prow .product-miniature{ max-width:none; width:auto; margin:0; }
.atelier-home .products.prow .thumbnail-container,
.atelier-home .products.prow .product-thumbnail{ max-width:none; }
.atelier-home .products.prow .thumbnail-container img,
.atelier-home .products.prow .product-thumbnail img{ min-height:0; }

/* ---------- emblème SVG inline : dimensionnement dans .pic/.vignette ----------
   (la maquette dimensionne des <img class="engrave"> ; ici l'asset est un SVG
   inline, on lui donne la même emprise pour qu'il tienne dans le conteneur) */
.ucard .pic .vbs-emblem{ width:64%; height:64%; }
.rachat .vignette .vbs-emblem{ width:86%; height:86%; }

/* ---------- occasions : apparition en cascade au chargement (effet « ça tombe ») ----------
   La pastille « live » pulse déjà (occPulse, maquette). Ici on fait arriver les
   items du flux un par un, avec un léger flash terracotta façon « nouvel arrivage ». */
@keyframes vbsOccDrop{
  0%{ opacity:0; transform:translateY(-12px); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:none; }
}
.occ-feed .occ-item{ animation:vbsOccDrop .5s cubic-bezier(.2,.7,.3,1) both; }
.occ-feed .occ-item:nth-child(1){ animation-delay:.05s; }
.occ-feed .occ-item:nth-child(2){ animation-delay:.13s; }
.occ-feed .occ-item:nth-child(3){ animation-delay:.21s; }
.occ-feed .occ-item:nth-child(4){ animation-delay:.29s; }
.occ-feed .occ-item:nth-child(5){ animation-delay:.37s; }
.occ-feed .occ-item:nth-child(6){ animation-delay:.45s; }
.occ-feed .occ-item:nth-child(7){ animation-delay:.53s; }
.occ-feed .occ-item:nth-child(8){ animation-delay:.61s; }
/* liseré terracotta qui s'estompe sur le 1er (le plus récent) */
.occ-feed .occ-item:first-child{ box-shadow:inset 3px 0 0 var(--terracotta); }
/* accessibilité : pas d'animation si l'utilisateur la désactive */
@media(prefers-reduced-motion:reduce){
  .occ-feed .occ-item{ animation:none; }
  .occ-dot{ animation:none; }
}

/* ---------- responsive grille produits ---------- */
@media(max-width:820px){ .atelier-home .products.prow{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .atelier-home .products.prow{ grid-template-columns:1fr; } }

/* ============================================================================
   RESPONSIVE MOBILE — home (breakpoints 768 / 480, baseline 360).
   La maquette gère déjà l'effondrement des grilles (1000/820/560) ; ici on
   affine pour le mobile : titres fluides, paddings réduits, boutons pleine
   largeur, et garde-fous anti-débordement horizontal. Couleurs/fontes/filets
   inchangés (esthétique Atelier préservée).
   ============================================================================ */
@media(max-width:768px){
  /* garde-fou global : rien ne dépasse à droite */
  .atelier-home{ overflow-x:hidden; }

  /* ----- HERO : 1 colonne (texte puis visuel), paddings réduits ----- */
  .atelier-home .hero .wrap{ padding:44px 20px; gap:30px; }
  .atelier-home .hero::after{ inset:10px; }          /* filet intérieur resserré */
  /* h1 fluide : ne déborde plus, casse les mots longs si besoin */
  .atelier-home .hero h1{ font-size:clamp(28px,8.5vw,40px); line-height:1.08; overflow-wrap:break-word; }
  .atelier-home .hero p{ font-size:16px; max-width:none; }
  /* boutons : wrappent et prennent toute la largeur dispo (labels FR longs) */
  .atelier-home .hero .wrap > div > div{ flex-wrap:wrap; gap:12px; }
  .atelier-home .hero .btn{ flex:1 1 160px; text-align:center; }

  /* ----- UNIVERS : titres de section resserrés ----- */
  .atelier-home .universes{ gap:18px; }

  /* ----- RÉASSURANCE : passe en 2 col (la maquette le fait à 820, on garde) ----- */
  .atelier-home .trust .wrap{ padding:34px 20px; gap:22px; }

  /* ----- RACHAT : empilé, vignette + bouton lisibles ----- */
  .atelier-home .rachat .wrap{ padding:32px 20px; gap:22px; }
  .atelier-home .rachat .wrap > div:last-child{ flex-wrap:wrap; }
  .atelier-home .rachat .btn{ flex:1 1 auto; text-align:center; }

  /* ----- OCCASIONS : item compact, pas de débordement ----- */
  .atelier-home .occ-head{ gap:12px; }
  .atelier-home .occ-item{ gap:12px; padding:10px 12px; }
}

@media(max-width:480px){
  /* h1 un cran plus petit, encore plus de marge anti-coupe */
  .atelier-home .hero h1{ font-size:clamp(25px,8vw,34px); }
  .atelier-home .hero .wrap{ padding:36px 16px; }
  .atelier-home .hero .btn{ width:100%; flex:1 1 100%; }

  /* univers/trust/rachat : 1 colonne (déjà à 560 maquette) + paddings serrés */
  .atelier-home .trust .wrap{ padding:30px 16px; }
  .atelier-home .rachat .wrap{ padding:28px 16px; }
  .atelier-home .rachat .wrap > div:last-child{ gap:14px; }
  .atelier-home .rachat .btn{ width:100%; }

  /* occasions : thumb + texte resserrés, prix garde sa place */
  .atelier-home .occ-item{ gap:10px; padding:9px 11px; }
  .atelier-home .occ-item .occ-thumb{ width:50px; height:50px; }
}