/* ==========================================================================
   Bannières de l'accueil et de la page Promotions (09/10/2026, validées par le patron).
   Contenu : includes/bannieres.php. Chargé par index.php et promotions.php seulement.
   ========================================================================== */

/* --- Accueil : même fond partout (la section Produits était blanche sur un fond gris clair) --- */
#products-section{background:transparent!important}

/* 10/10/2026 (patron) : bannières fidélité et retrait au comptoir remises dans leur version
   d'origine (css/banners.css), sans réduction ni carte/sac sur téléphone. */

/* --- Grandes bannières : Nouveaux arrivages (jaune) et APPLI (bleue) --- */
.tnx-wrap{padding:28px 0 16px}
.tnx-wrap-appli{padding-bottom:28px}
.tnx{position:relative;overflow:hidden;border-radius:20px;min-height:260px;display:flex;align-items:center;padding:28px 32px;text-decoration:none!important;box-sizing:border-box}
.tnx-jaune{background:#ffe14d}
.tnx-bleu{background:#a5dcff;min-height:300px;padding:32px 40px}
.tnx-mot{position:absolute;top:18px;right:104px;font-weight:900;font-size:clamp(56px,8vw,140px);line-height:.8;color:#fff;letter-spacing:-.04em;white-space:nowrap}
.tnx-texte{position:relative;z-index:2;max-width:280px}
.tnx-texte h3{font-size:28px;font-weight:900;line-height:1.05;color:#111;margin:0 0 8px;max-width:240px}
.tnx-texte p{font-size:14px;color:#1f2937;margin:0 0 16px;line-height:1.35}
.tnx-btn{display:inline-flex;align-items:center;gap:8px;background:#111;color:#fff!important;font-weight:700;font-size:14px;padding:11px 18px;border-radius:10px}
.tnx-produits{position:absolute;right:3%;bottom:18px;display:flex;align-items:center}
.tnx-produits img{background:#fff;border-radius:50%;padding:14px;box-shadow:0 12px 28px rgba(0,0,0,.18);object-fit:contain}
.tnx-produits img:nth-child(1){width:128px;height:128px;transform:rotate(-8deg) translateY(10px);margin-right:-26px}
.tnx-produits img:nth-child(2){width:170px;height:170px;position:relative;z-index:2}
.tnx-produits img:nth-child(3){width:124px;height:124px;transform:rotate(8deg) translateY(12px);margin-left:-26px}
.tnx-pastille{position:absolute;z-index:3;top:16px;right:16px;width:76px;height:76px;border-radius:50%;background:#111;color:#ffe14d;font-weight:900;font-size:11px;line-height:1.1;display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(12deg)}
.tnx-bleu .tnx-mot{top:26px;right:420px;font-size:132px}
.tnx-bleu .tnx-texte{max-width:430px}
.tnx-bleu .tnx-texte h3{font-size:30px;max-width:300px;margin-bottom:10px}
.tnx-bleu .tnx-texte p{font-size:15px;max-width:330px;margin-bottom:18px}
.tnx-stores{display:flex;flex-wrap:wrap;gap:8px}
.tnx-stores img{height:40px;width:auto;border-radius:8px;display:block}
.tnx-tels{position:absolute;right:70px;bottom:-90px;width:330px;height:390px;z-index:1}
.tnx-tel{position:absolute;width:160px;border-radius:26px;background:#111;padding:7px;box-shadow:0 22px 44px rgba(0,0,0,.28)}
.tnx-tel img{display:block;width:100%;height:auto;border-radius:20px}
.tnx-tel.t1{left:0;top:0;transform:rotate(-7deg);z-index:2}
.tnx-tel.t2{right:0;top:44px;transform:rotate(8deg)}

/* --- 4 petites bannières (Domotique, Caméras, Montres, Home) --- */
.tnm-wrap{padding:28px 0 16px}
.tnm-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.tnm{position:relative;overflow:hidden;border-radius:18px;padding:16px;min-height:200px;text-decoration:none!important;color:#111;display:flex;flex-direction:column}
.tnm h4{font-size:21px;font-weight:900;line-height:1.05;margin:0;max-width:62%;color:#111}
.tnm-prix{margin-top:auto;align-self:flex-start;background:#111;color:#fff;font-weight:800;font-size:12px;padding:6px 10px;border-radius:999px;position:relative;z-index:2}
.tnm img{position:absolute;right:-8px;bottom:-8px;width:58%;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:50%;padding:10px;box-shadow:0 10px 24px rgba(0,0,0,.15)}

/* --- Page Promotions : bannière WhatsApp --- */
.twa-section{padding:40px 0 48px}
.twa{position:relative;overflow:hidden;border-radius:20px;min-height:300px;display:flex;align-items:center;padding:32px 40px;box-sizing:border-box;background:#5ee29a;text-decoration:none!important}
.twa-mot{position:absolute;top:30px;right:340px;font-weight:900;font-size:112px;line-height:.8;color:#fff;letter-spacing:-.04em;white-space:nowrap}
.twa-texte{position:relative;z-index:2;max-width:400px}
.twa-titre{font-size:32px;font-weight:900;line-height:1.05;color:#111;margin:0 0 10px;max-width:330px}
.twa-texte p{font-size:15px;color:#1f2937;margin:0 0 20px;line-height:1.4;max-width:320px}
.twa-btn{display:inline-flex;align-items:center;gap:10px;background:#111;color:#fff;font-weight:800;font-size:15px;padding:13px 22px;border-radius:999px;white-space:nowrap}
.twa-btn i{color:#25d366;font-size:22px}
.twa-pastille{position:absolute;z-index:3;bottom:22px;right:305px;width:84px;height:84px;border-radius:50%;background:#111;color:#5ee29a;font-weight:900;font-size:10.5px;line-height:1.15;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(12deg);gap:3px}
.twa-pastille i{font-size:18px}
.twa-tel{position:absolute;right:70px;bottom:-110px;width:220px;border-radius:30px;background:#111;padding:8px;box-shadow:0 22px 44px rgba(0,0,0,.28);transform:rotate(-6deg);z-index:1}
.twa-ecran{border-radius:23px;overflow:hidden;background:#efeae2;height:390px}
.twa-tete{background:#008069;color:#fff;display:flex;align-items:center;gap:8px;padding:12px 12px 10px}
.twa-tete img{width:30px;height:30px;border-radius:50%;background:#fff;padding:5px;box-sizing:border-box;object-fit:contain}
.twa-tete b{display:block;font-size:12.5px;font-weight:700}
.twa-tete small{font-size:10px;opacity:.85}
.twa-fil{padding:10px;display:flex;flex-direction:column;gap:8px}
.twa-msg{background:#fff;border-radius:10px;padding:6px;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.twa-msg img{display:block;width:100%;height:96px;object-fit:contain;background:#fff;border-radius:7px}
.twa-msg b{display:block;font-size:11.5px;color:#111;margin:5px 2px 1px}
.twa-msg span{display:block;font-size:11px;font-weight:700;color:#008069;margin:0 2px 2px}

/* --- Téléphone --- */
@media (max-width:640px){
  .tnx-wrap,.tnm-wrap{padding:20px 0 12px}
  .tnx-wrap-appli{padding-bottom:24px}
  .tnx{min-height:232px;padding:18px;align-items:flex-start}
  .tnx-texte{max-width:none}
  .tnx-texte h3{font-size:23px;margin-bottom:12px;max-width:190px}
  .tnx-jaune .tnx-texte p{display:none}
  .tnx-btn{white-space:nowrap;font-size:12.5px;padding:9px 12px;gap:6px}
  .tnx-mot{top:auto;bottom:8px;right:auto;left:50%;transform:translateX(-50%);font-size:66px}
  .tnx-produits{right:8px;bottom:66px}
  .tnx-produits img:nth-child(1){width:60px;height:60px;padding:7px;margin-right:-16px}
  .tnx-produits img:nth-child(2){width:80px;height:80px;padding:8px}
  .tnx-produits img:nth-child(3){width:58px;height:58px;padding:7px;margin-left:-16px}
  .tnx-pastille{width:54px;height:54px;font-size:8.5px;top:12px;right:12px}
  .tnx-bleu{min-height:300px;padding:20px 18px}
  .tnx-bleu .tnx-texte{max-width:178px}
  .tnx-bleu .tnx-texte h3{font-size:21px;max-width:none;margin-bottom:8px}
  .tnx-bleu .tnx-texte p{font-size:12.5px;margin-bottom:12px}
  .tnx-stores{flex-direction:column;align-items:flex-start;gap:6px}
  .tnx-stores img{height:32px}
  .tnx-bleu .tnx-mot{top:16px;bottom:auto;left:auto;right:12px;transform:none;font-size:46px}
  .tnx-tels{right:-6px;bottom:-74px;width:176px;height:232px}
  .tnx-tel{width:90px;border-radius:16px;padding:4px}
  .tnx-tel img{border-radius:12px}
  .tnx-tel.t2{top:28px}
  .tnm-grille{grid-template-columns:repeat(2,1fr);gap:14px}
  .tnm{min-height:170px;padding:12px}
  .tnm h4{font-size:17px}
  .tnm-prix{font-size:10.5px;padding:5px 8px}
  .twa-section{padding:20px 0 24px}
  .twa{min-height:0;align-items:flex-start;padding:22px 20px 74px}
  .twa-titre{font-size:24px;max-width:220px;margin-bottom:8px}
  .twa-texte p{font-size:13.5px;margin-bottom:16px;max-width:240px}
  .twa-btn{font-size:14px;padding:11px 18px}
  .twa-mot{top:auto;bottom:12px;right:16px;transform:none;font-size:58px}
  .twa-tel{display:none}
  .twa-pastille{width:62px;height:62px;font-size:8px;top:14px;right:14px;bottom:auto}
  .twa-pastille i{font-size:13px}
}

/* ==========================================================================
   10/10/2026 (patron) : fidélité + retrait au comptoir en 2 puzzles de petites tuiles
   (remplace les deux grandes bannières de css/banners.css sur l'accueil). index.php.
   ========================================================================== */
/* Fidélité + retrait au comptoir en petites tuiles qui s'emboîtent (aperçu 10/10/2026) */
.tpz-wrap{padding:28px 0 16px}
.tpz{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(118px,auto);gap:14px}
.tpz-t{position:relative;overflow:hidden;border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;text-decoration:none!important;color:#1f2937}
.tpz-t i.tpz-ic{font-size:20px;width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 4px 12px rgba(15,23,42,.08)}
.tpz-t b{font-size:15px;font-weight:800;line-height:1.25;color:#111827}
.tpz-t span{font-size:12.5px;line-height:1.35;color:#4b5563}
/* Grandes tuiles */
.tpz-A{grid-column:1/3;grid-row:1/3;background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 55%,#d97706 100%);color:#1f2937;padding:22px 24px;justify-content:space-between}
.tpz-R{grid-column:3/5;grid-row:3/5;background:linear-gradient(135deg,#14b8a6 0%,#0d9488 55%,#0f766e 100%);color:#fff;padding:22px 24px;justify-content:space-between}
.tpz-badge{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.35)}
.tpz-R .tpz-badge{background:rgba(255,255,255,.95);color:#0f766e}
.tpz-titre{font-size:26px;font-weight:900;line-height:1.1;letter-spacing:-.4px;margin:6px 0 0;max-width:290px}
.tpz-A .tpz-titre{color:#1f2937}.tpz-R .tpz-titre{color:#fff}
.tpz-note{font-size:12.5px;opacity:.85;max-width:300px}
.tpz-btn{align-self:flex-start;font-size:13.5px;font-weight:700;padding:9px 16px;border-radius:10px;background:#1f2937;color:#fff!important}
.tpz-R .tpz-btn{background:#fff;color:#0f766e!important}
.tpz-illu{position:absolute;right:18px;top:50%;transform:translateY(-50%)}
.tpz-carte{width:170px;aspect-ratio:16/10;border-radius:14px;background:linear-gradient(135deg,#18181b,#1f2937 50%,#0f172a);color:#fff;padding:14px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 18px 36px rgba(0,0,0,.4);transform:rotate(-6deg);font-family:inherit}
.tpz-carte .l{font-weight:900;font-size:15px}.tpz-carte .l em{color:#fbbf24;font-style:normal}
.tpz-carte .p{width:26px;height:19px;border-radius:4px;background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.tpz-carte .n{font:700 11px ui-monospace,monospace;letter-spacing:2px;opacity:.9}
.tpz-sac{font-size:96px;color:rgba(255,255,255,.92);filter:drop-shadow(0 12px 22px rgba(0,0,0,.25))}
/* Petites tuiles : teinte de leur grande tuile */
.tpz-f{background:#fef3c7}.tpz-f i.tpz-ic{color:#d97706}
.tpz-r{background:#ccfbf1}.tpz-r i.tpz-ic{color:#0f766e}
.tpz-b1{grid-column:3;grid-row:1}.tpz-b2{grid-column:4;grid-row:1}.tpz-b3{grid-column:3/5;grid-row:2;flex-direction:row;align-items:center;gap:14px}
.tpz-c1{grid-column:1/3;grid-row:3;flex-direction:row;align-items:center;gap:14px}.tpz-c2{grid-column:1;grid-row:4}.tpz-c3{grid-column:2;grid-row:4}
.tpz-b3 div,.tpz-c1 div{display:flex;flex-direction:column;gap:4px}
@media (max-width:767px){
  .tpz-wrap{padding:20px 0 12px}
  .tpz{grid-template-columns:1fr 1fr;grid-auto-rows:auto;gap:10px}
  .tpz-A,.tpz-R{grid-column:1/3;grid-row:auto;min-height:190px;padding:18px}
  .tpz-titre{font-size:20px;max-width:58%}
  .tpz-note{display:none}
  .tpz-carte{width:118px;padding:10px}.tpz-carte .l{font-size:12px}.tpz-carte .n{font-size:8px;letter-spacing:1px}.tpz-carte .p{width:20px;height:14px}
  .tpz-illu{right:12px}
  .tpz-sac{font-size:72px}
  .tpz-b1,.tpz-b2,.tpz-c2,.tpz-c3{grid-column:auto;grid-row:auto}
  .tpz-b3,.tpz-c1{grid-column:1/3;grid-row:auto}
  .tpz-t{padding:13px 14px}
  .tpz-t b{font-size:14px}
  .tpz-t i.tpz-ic{width:34px;height:34px;font-size:17px}
  /* ordre téléphone : fidélité et ses 3 tuiles, puis retrait et ses 3 tuiles */
  .tpz-A{order:1}.tpz-b1{order:2}.tpz-b2{order:3}.tpz-b3{order:4}.tpz-R{order:5}.tpz-c2{order:6}.tpz-c3{order:7}.tpz-c1{order:8}
}

/* 2 puzzles : à gauche Fidélité (grande pièce en haut), à droite Retrait (grande pièce en bas) */
.tpz2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.tpz2 .tpz{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(104px,auto);gap:12px}
.tpz2 .tpz-A{grid-column:1/3;grid-row:1;min-height:230px}
.tpz2 .tpz-b1{grid-column:1;grid-row:2}.tpz2 .tpz-b2{grid-column:2;grid-row:2}.tpz2 .tpz-b3{grid-column:1/3;grid-row:3}
.tpz2 .tpz-c1{grid-column:1/3;grid-row:1}.tpz2 .tpz-c2{grid-column:1;grid-row:2}.tpz2 .tpz-c3{grid-column:2;grid-row:2}
.tpz2 .tpz-R{grid-column:1/3;grid-row:3;min-height:230px}
@media (max-width:767px){
  .tpz2{grid-template-columns:1fr;gap:16px}
  .tpz2 .tpz{gap:10px}
  .tpz2 .tpz-A,.tpz2 .tpz-R{min-height:190px}
}
/* Seuil de livraison offerte désactivé : la tuile Remises prend toute la largeur */
.tpz2 .tpz-plein{grid-column:1/3}


/* 10/10/2026 (patron) : bouton panier des cartes Produits de l accueil = celui des Offres du moment (.taonsa-deal-add) */
#productsGrid .product-info > .flex.gap-2 > .add-to-cart-btn:not([disabled]){border-radius:10px}
#productsGrid .product-info > .flex.gap-2 > .add-to-cart-btn:not([disabled]) i{font-size:14px}

/* 10/10/2026 (patron, audit des fonds) : Offres du moment sur le même fond que le reste de l accueil (gris très clair du body), plus de jointure blanc puis gris */
#taonsaDealsSection{background:transparent!important}