/* =====================================================
   NIA — habillage « Kider » (inspiré du modèle Kider de HTML Codex)
   Chargé APRÈS style.css : il ne change que l'apparence.
   Ambiance : douce et joyeuse, coins très arrondis, pastels, titres manuscrits.
   ===================================================== */
:root{
  --berry:#E0322C; --berry-dark:#B8231E; --berry-soft:#FFE6E1;   /* rouge Nia, un peu plus chaud */
  --mint:#2BB673; --mint-soft:#E3F6EC;
  --sun:#FFC93C; --sun-soft:#FFF4D6;
  --sky:#3D8BFD; --sky-soft:#E6F0FF;
  --dragee:#FFF5F3;            /* fond rosé de Kider */
  --nuit:#103741;              /* bleu-vert profond de Kider */
  --muted:#5E7177; --line:#F1E3DF;
  --display:'Heebo',system-ui,sans-serif;
  --titre:'Lobster Two','Heebo',cursive;
  --ombre:0 10px 30px rgba(16,55,65,.08);
  --ombre-forte:0 18px 40px rgba(16,55,65,.14);
}
body{font-family:var(--display);font-variation-settings:normal;color:#3b4b50}
h1,h2,h3,h4{font-family:var(--titre);font-weight:700;font-stretch:100%;font-variation-settings:normal;letter-spacing:0;color:var(--nuit);line-height:1.12}
h3{font-family:var(--display);font-weight:700;font-size:1.1rem}
.item h3{font-family:var(--display)}
:focus-visible{outline-color:var(--berry)}

/* ----- Bandeau & en-tête ----- */
.ribbon{background:var(--nuit);font-weight:500}
.site-header{border-bottom:0;box-shadow:0 4px 18px rgba(16,55,65,.07)}
.header-inner{height:84px}
.main-nav a{font-weight:500;color:var(--nuit)}
.main-nav a:hover{background:var(--dragee);color:var(--berry)}
.main-nav a[aria-current]{color:var(--berry);text-decoration:none;background:var(--dragee)}
.langs{border:0;background:var(--dragee)}
.langs a.on{background:var(--berry)}
.bag{border:0;background:var(--berry);color:#fff;box-shadow:0 8px 18px rgba(224,50,44,.28)}
.bag b{background:#fff;color:var(--berry)}
.menu-btn span,.menu-btn span::before{background:var(--nuit)}

/* ----- Boutons : pilules sans contour noir ----- */
.btn{border:0;background:var(--nuit);font-family:var(--display);font-weight:700;padding:13px 28px;box-shadow:0 8px 18px rgba(16,55,65,.18)}
.btn-berry,.btn-accent{background:var(--berry)} .btn-berry:hover,.btn-accent:hover{background:var(--berry-dark)}
.btn-line,.btn-ghost{background:#fff;color:var(--nuit);box-shadow:inset 0 0 0 2px var(--nuit)}
.btn-line:hover,.btn-ghost:hover{background:var(--nuit);color:#fff}
.btn-sun{background:var(--sun);color:var(--nuit)}
.btn-wa{background:#1FAF55}
.round{border:0;background:#fff;box-shadow:var(--ombre);color:var(--berry)}
.round:hover{background:var(--berry);color:#fff}
.icon-btn{border-color:var(--line)}
.more{color:var(--berry);text-decoration:none}
.more::after{content:' →'}

/* ----- Héros : fond rosé et bord ondulé comme Kider ----- */
.hero{background:var(--dragee);padding:56px 0 120px}
.hero::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 Q 60 0 120 30 T 240 30 T 360 30 T 480 30 T 600 30 T 720 30 T 840 30 T 960 30 T 1080 30 T 1200 30 T 1320 30 T 1440 30 V60 H0Z' fill='%23ffffff'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.hero h1{color:var(--nuit)}
.hero-lead{color:#3b4b50}
.ph-main{border:0;box-shadow:var(--ombre-forte);border-radius:40px;transform:none}
.polaroid{border:0;box-shadow:var(--ombre-forte);border-radius:18px}
.polaroid img{border-radius:12px}
.gift-box{border:0;box-shadow:var(--ombre-forte)}
.gift-tag,.collage .gift-tag{border:0;box-shadow:var(--ombre)}
.tag-hole{border-color:var(--berry)}

/* ----- Sections ----- */
.band-head{justify-content:center;text-align:center;flex-direction:column;align-items:center}
.band-head p{max-width:60ch}
.page-head{background:var(--dragee);text-align:center;padding:56px 0 48px;border-radius:0 0 48px 48px}
.band-sun{background:var(--sun-soft)}
.band-soft,.band-dragee{background:var(--dragee)}

/* Catégories : cartes arrondies, étiquette flottante */
.cat-photo{border-radius:28px;box-shadow:var(--ombre)}
.cat-label{border:0;box-shadow:var(--ombre);border-radius:999px;text-align:center;padding:8px 12px}
.tile{border-radius:36px;box-shadow:var(--ombre)}

/* Produits : carte blanche sur fond rosé, image arrondie */
.item{background:#fff;border-radius:28px;padding:12px 12px 18px;box-shadow:var(--ombre);transition:transform .2s,box-shadow .2s}
.item:hover{transform:translateY(-4px);box-shadow:var(--ombre-forte)}
.item-pic{border:0;border-radius:22px}
.item-pic:hover{border:0}
.item h3,.item-desc,.item-price,.item-flags,.item .stock{padding:0 6px}
.item-price{color:var(--berry)}
.sticker{border:0;background:var(--sun);box-shadow:var(--ombre)}
.flag-perso{background:var(--mint-soft);color:#1A7A4C}
.flag-best{background:var(--sun-soft)}

/* Étapes : pastilles pastel comme les « facilities » de Kider */
.steps li::before{width:64px;height:64px;font-family:var(--titre);font-size:1.8rem;background:var(--berry);color:#fff;box-shadow:0 0 0 8px var(--berry-soft)}
.steps li:nth-child(2)::before{background:var(--mint);box-shadow:0 0 0 8px var(--mint-soft)}
.steps li:nth-child(3)::before{background:var(--sun);color:var(--nuit);box-shadow:0 0 0 8px var(--sun-soft)}
.steps li:nth-child(4)::before{background:var(--sky);box-shadow:0 0 0 8px var(--sky-soft)}
.steps li{padding-top:88px}
.steps li:not(:last-child)::after{top:32px;left:84px;border-top:3px dotted var(--line)}
.facts{border-top:0;background:var(--dragee);border-radius:32px;padding:28px}

/* Bande Not Any Box : kraft adouci */
.kraft{background:#F3E4D3}
.kraft-photos img{border:0;box-shadow:var(--ombre-forte);border-radius:28px}
.kp-2{box-shadow:var(--ombre-forte)}

/* Réalisations */
.masonry figure{border:0;box-shadow:var(--ombre);border-radius:22px}

/* ----- Boutique ----- */
.tabs{border:0;background:var(--dragee)}
.tabs a.active{background:var(--berry)}
.search input,.search select{border-color:var(--line)}
.chip{border-color:var(--line);background:#fff}
.chip:hover{border-color:var(--berry);color:var(--berry)}

/* ----- Fiche produit ----- */
.product-photo{border:0;box-shadow:var(--ombre-forte);border-radius:36px}
.designer{border:0;box-shadow:var(--ombre-forte);border-radius:36px}
.custom-panel{background:var(--dragee);border-radius:32px}
.opt input[type=text],.opt input[type=tel],.opt input[type=email],.opt input[type=number],.opt select,.opt textarea{border-color:var(--line);border-radius:16px;background:#fff}
.opt input:focus,.opt select:focus,.opt textarea:focus{border-color:var(--berry)}
.swatch.active{border-color:var(--berry)}
.qty{border:2px solid var(--line)}
.price.big{font-family:var(--titre);color:var(--berry);font-stretch:100%;font-variation-settings:normal}

/* ----- Panier, merci, suivi ----- */
.card-box{border:0;box-shadow:var(--ombre);border-radius:32px}
.cart-lines{border-top:0}
.summary{background:var(--dragee);box-shadow:none}
.promo-form input{border:2px solid var(--line)}
.radio:has(input:checked){border-color:var(--berry);background:var(--berry-soft)}
.notice{background:var(--dragee)}
.mini-table tr.total td{border-bottom-color:var(--berry)}
.thanks-mark{color:var(--mint);display:flex;justify-content:center;margin-bottom:8px}
.timeline li.done span{border-color:var(--mint)}
.timeline li.current span{border-color:var(--berry)}

/* ----- Contact, FAQ, à propos ----- */
.contact-card{border:0;background:#fff;box-shadow:var(--ombre)}
.contact-card.wa{background:var(--mint-soft)}
.faq{border-top:0}
.faq details{background:#fff;border:0;border-radius:20px;padding:18px 22px;margin-bottom:12px;box-shadow:var(--ombre)}
.faq summary{font-family:var(--display)}
.values>div{border-radius:32px}
.about-photo img{border:0;box-shadow:var(--ombre-forte);border-radius:36px}

/* ----- Pied de page sombre, comme Kider ----- */
.site-footer{background:var(--nuit);color:rgba(255,255,255,.75);border-top:0;border-radius:48px 48px 0 0;margin-top:40px}
.site-footer h2{color:var(--sun);font-family:var(--titre);font-size:1.35rem}
.site-footer a:not(.btn){color:rgba(255,255,255,.75)}
.site-footer a:not(.btn):hover{color:#fff}
.footer-top{border-bottom:1px solid rgba(255,255,255,.12)}
.footer-big{font-family:var(--titre);color:#fff;font-weight:700;font-stretch:100%;font-variation-settings:normal}
.footer-big span{color:var(--sun)}
.footer-brand img{background:#fff;border-radius:20px;padding:10px 14px}
.footer-name{font-family:var(--titre);font-size:2rem;color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.6);margin-top:36px;padding:18px 0}
.footer-bottom-inner{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.footer-bottom a{display:inline !important;color:#fff !important;text-decoration:underline !important}
.site-footer .muted{color:rgba(255,255,255,.6)}
.wa-float{border:0;box-shadow:0 10px 24px rgba(31,175,85,.4)}

/* ----- Téléphone ----- */
@media (max-width:860px){
  .main-nav{border-bottom:0;box-shadow:0 14px 24px rgba(16,55,65,.1)}
  .header-inner{height:72px}
  .main-nav{top:72px}
}
@media (max-width:620px){
  .hero{padding:36px 0 90px}
  .item{padding:8px 8px 14px;border-radius:22px}
  .item-pic{border-radius:16px}
  .site-footer{border-radius:32px 32px 0 0}
  .page-head{border-radius:0 0 32px 32px;padding:40px 0 34px}
  .bag{box-shadow:none}
}

/* ----- Darija : on garde les polices arabes festives ----- */
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h4,[dir=rtl] .footer-big,[dir=rtl] .site-footer h2,[dir=rtl] .price.big,[dir=rtl] .footer-name{font-family:'Lalezar','Tajawal',sans-serif;font-weight:400}
[dir=rtl] h3,[dir=rtl] .item h3{font-family:'Tajawal',var(--display)}
[dir=rtl] .steps li:not(:last-child)::after{left:-16px;right:84px}
@media (max-width:620px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px 18px}
  .footer-brand{grid-column:1/-1}
  .footer-grid>div:last-child{grid-column:1/-1}
}

/* ----- Fiche produit : onglets Photo / Mon aperçu ----- */
.media-tabs{display:flex;gap:6px;background:var(--dragee);border-radius:999px;padding:5px;margin-bottom:14px;width:max-content;max-width:100%}
.media-tab{border:0;background:transparent;padding:9px 18px;border-radius:999px;font:600 .95rem var(--display);color:var(--nuit);cursor:pointer;min-height:40px}
.media-tab.on{background:#fff;color:var(--berry);box-shadow:var(--ombre)}
[dir=rtl] .media-tab{font-family:'Tajawal',var(--display)}

/* ----- Avis clients ----- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.review{margin:0;background:#fff;border-radius:28px;padding:26px 26px 22px;box-shadow:var(--ombre);position:relative}
.review::before{content:'\201C';position:absolute;top:-14px;left:22px;width:44px;height:44px;border-radius:50%;background:var(--berry);color:#fff;font:700 2.2rem/52px var(--titre);text-align:center}
[dir=rtl] .review::before{left:auto;right:22px}
.review blockquote{margin:12px 0 16px;font-size:1.02rem;color:#3b4b50;line-height:1.6}
.review figcaption{color:var(--nuit)}
.review figcaption small{display:block;color:var(--muted);font-size:.85rem}

/* ----- Bouton WhatsApp flottant : plus discret sur téléphone ----- */
@media (max-width:860px){
  .wa-float{width:50px;height:50px;right:14px;bottom:14px}
  .page-product .wa-float{display:none}   /* sur la fiche produit, les boutons d'achat suffisent */
}