/* ============================================================
   CUSTOMIA — feuille de style « application » pour téléphones
   Chargée après boutique.css et packs.css sur toutes les pages
   publiques. Réutilise leurs tokens, n'en redéfinit aucun.
   Règle d'or : le bureau ne bouge pas. Tout ce qui touche une
   classe existante vit sous @media (max-width:760px) ; hors
   media query ne vivent que les nouveaux composants (A à E)
   et la règle globale tactile (F).
   ============================================================ */

/* ---------- nouveaux tokens (hauteurs des barres, zones sûres) ---------- */
:root{
  --h-onglets:64px;
  --h-action:72px;
  --zs-bas:env(safe-area-inset-bottom,0px);
  --zs-haut:env(safe-area-inset-top,0px);
}

/* ---------- F. règle globale tactile ---------- */
html{-webkit-text-size-adjust:100%}
button,a,label,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:transparent}


/* ---------- E1. vignette photo dans un choix d'option (toutes tailles) ---------- */
/* .choix label est un flex « space-between » : l'image se glisse avant le
   libellé, qui prend alors l'espace libre pour repousser .delta à droite. */
.vig-choix{
  flex:0 0 40px;width:40px;height:40px;object-fit:cover;
  border-radius:4px;border:1px solid var(--hair-noir);background:var(--noir-3);
}
.vig-choix + span{flex:1 1 auto;min-width:0}
.choix label:has(.vig-choix){padding-top:10px;padding-bottom:10px;padding-left:10px}

/* ---------- E2. zone de dépôt du logo (toutes tailles) ---------- */
/* label.depot-zone égale la spécificité de « .champ label » et passe après. */
label.depot-zone{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  margin:0;padding:22px;text-align:center;cursor:pointer;
  border:1px dashed rgba(200,163,90,.45);border-radius:10px;background:transparent;
  font-size:inherit;letter-spacing:0;text-transform:none;color:var(--sur-noir);
  transition:border-color var(--d2) var(--e-out),background var(--d2) var(--e-out);
}
label.depot-zone::before{
  content:"";width:28px;height:28px;margin-bottom:4px;opacity:.9;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c8a35a' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M7 18a4 4 0 0 1-.6-7.95A6 6 0 0 1 18 8.5a3.8 3.8 0 0 1 .5 7.5'/><path d='M12 21v-8m0 0-3 3m3-3 3 3'/></svg>");
}
label.depot-zone .depot{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;
}
label.depot-zone .dz-titre{font-family:var(--f-display);font-weight:500;font-size:18px;line-height:1.2;color:var(--ivoire)}
label.depot-zone .dz-sous{font-size:12px;line-height:1.5;color:var(--sur-noir-2)}
label.depot-zone:hover,label.depot-zone:focus-within{border:1px solid var(--or);background:var(--noir-3)}
label.depot-zone:focus-within{outline:2px solid var(--or);outline-offset:3px}


/* ---------- A. barre d'onglets d'application ---------- */
.onglets-app{
  position:fixed;left:0;right:0;bottom:0;z-index:140;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  height:calc(var(--h-onglets) + var(--zs-bas));padding-bottom:var(--zs-bas);
  background:rgba(11,10,8,.92);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border-top:1px solid var(--hair-noir);
}
.onglets-app .og{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-width:0;min-height:44px;text-decoration:none;color:var(--sur-noir-2);
  transition:color var(--d2) var(--e-out);
}
.onglets-app .og::before{
  content:"";position:absolute;top:0;left:50%;width:18px;height:2px;
  background:var(--or);transform:translateX(-50%) scaleX(0);
  transition:transform var(--d2) var(--e-out);
}
.onglets-app .og.actif{color:var(--or-vif)}
.onglets-app .og.actif::before{transform:translateX(-50%) scaleX(1)}
.onglets-app .og svg{
  width:24px;height:24px;flex:0 0 24px;
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.onglets-app .og span{
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%;padding:0 2px;
}
.og-pastille{
  position:absolute;top:8px;left:calc(50% + 6px);
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--or);color:var(--noir);
  font-family:var(--f-sans);font-weight:500;font-size:10px;line-height:1;letter-spacing:0;
}
.og-pastille:empty{display:none}


/* ---------- B. barre d'action principale ---------- */
.barre-action{
  position:fixed;left:0;right:0;bottom:calc(var(--h-onglets) + var(--zs-bas));z-index:135;
  display:flex;align-items:center;gap:14px;
  height:var(--h-action);padding:0 16px;
  background:rgba(11,10,8,.92);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border-top:1px solid var(--hair-noir);
  transform:translateY(110%);opacity:0;pointer-events:none;
  transition:transform var(--d2) var(--e-out),opacity var(--d2) var(--e-out);
}
.barre-action.visible{transform:translateY(0);opacity:1;pointer-events:auto}
.ba-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ba-lib{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--sur-noir-2);line-height:1}
.ba-val{
  font-family:var(--f-display);font-weight:500;font-size:19px;line-height:1.2;color:var(--ivoire);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.barre-action .ba-btn{flex:0 1 auto;max-width:66%;min-height:48px;padding:12px 16px;font-size:11px;letter-spacing:.12em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* ---------- C. invitation à installer l'application ---------- */
.invite-app{
  position:fixed;left:12px;right:12px;bottom:calc(12px + var(--zs-bas));z-index:150;
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:14px 40px 14px 14px;
  background:var(--noir-2);border:1px solid rgba(200,163,90,.34);border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  transform:translateY(24px);opacity:0;pointer-events:none;
  transition:transform var(--d2) var(--e-out),opacity var(--d2) var(--e-out);
}
.invite-app.visible{transform:translateY(0);opacity:1;pointer-events:auto}
.invite-app > img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--noir-3)}
.invite-app .ia-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.invite-app .ia-txt b{font-family:var(--f-display);font-weight:500;font-size:16px;line-height:1.2;color:var(--ivoire)}
.invite-app .ia-txt span{font-size:12.5px;line-height:1.45;color:var(--sur-noir-2)}
.ia-partage{
  display:inline-block;width:15px;height:15px;vertical-align:-3px;margin:0 2px;
  fill:none;stroke:var(--or);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.invite-app .ia-ok{white-space:nowrap}
.invite-app .ia-ok[hidden]{display:none}
.invite-app:has(.ia-ok[hidden]){grid-template-columns:44px minmax(0,1fr)}
.ia-fermer{
  position:absolute;top:6px;right:6px;width:32px;height:32px;
  display:grid;place-items:center;
  background:none;border:0;border-radius:50%;color:var(--sur-noir-2);
  font-size:13px;line-height:1;cursor:pointer;
  transition:color var(--d1),background var(--d1);
}
.ia-fermer:hover{color:var(--sur-noir);background:rgba(255,255,255,.05)}


/* ---------- D. galerie à balayer : points indicateurs ---------- */
.points-galerie{display:flex;justify-content:center;align-items:center;gap:6px;margin:12px 0 0}
.points-galerie i{
  display:block;width:6px;height:6px;border-radius:999px;background:var(--hair-noir);
  transition:width var(--d2) var(--e-out),background var(--d2);
}
.points-galerie i.actif{width:18px;background:var(--or)}


/* ---------- composants réservés au téléphone : invisibles au-delà ---------- */
@media (min-width:761px){
  .onglets-app,.barre-action,.points-galerie{display:none}
}


/* ============================================================
   G. ADAPTATIONS DES PAGES EXISTANTES — téléphone uniquement
   ============================================================ */
@media (max-width:760px){

  /* ----- socle : défilement, corps, zones réservées aux barres ----- */
  html{scroll-padding-top:72px}
  body.app-mobile{padding-bottom:calc(var(--h-onglets) + var(--zs-bas))}
  body.app-mobile.avec-action{padding-bottom:calc(var(--h-onglets) + var(--h-action) + var(--zs-bas))}
  body.app-mobile .invite-app{bottom:calc(var(--h-onglets) + var(--zs-bas) + 12px)}
  body.app-mobile.avec-action .invite-app{bottom:calc(var(--h-onglets) + var(--h-action) + var(--zs-bas) + 12px)}

  /* ----- champs : 16 px pour empêcher le zoom iOS, 48 px sous le pouce ----- */
  input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=submit]):not([type=button]),
  select,textarea{font-size:16px;min-height:48px;padding:12px 14px}
  textarea{min-height:120px}
  select{background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px}
  input[type=checkbox]{min-width:22px;width:22px;height:22px;accent-color:var(--or);flex:0 0 22px}

  /* ----- en-tête compact, encoche respectée, la barre d'onglets prend le relais ----- */
  header.nav{padding-top:var(--zs-haut)}
  .nav-in{padding:10px 0;gap:12px}
  header.nav .logo b{font-size:20px;letter-spacing:.3em}
  header.nav .logo span{display:none}
  .nav-outils{gap:10px}
  .panier-lien{min-width:44px;min-height:44px;padding:0 12px;justify-content:center;gap:0}
  .panier-lien .txt{display:none}
  .btn{min-height:48px;padding:12px 24px;font-size:12px}
  .btn--sm{min-height:44px;padding:10px 18px;font-size:11px}

  /* ----- titres de page plus ramassés ----- */
  .tete-page{padding:28px 0 20px}
  .tete-page h1{font-size:clamp(30px,9vw,40px);margin-top:14px}
  .tete-page p.chapo{margin-top:12px;font-size:15px}
  .ariane{padding-top:14px;font-size:10px}

  /* ----- filtres : une rangée qui glisse, bord à bord ----- */
  .filtres{
    flex-wrap:nowrap;gap:8px;padding:18px max(16px,4vw) 8px;
    margin-inline:calc(50% - 50vw);
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scroll-padding-inline:max(16px,4vw);
    scrollbar-width:none;
  }
  .filtres::-webkit-scrollbar{display:none}
  .filtres button{flex:0 0 auto;min-height:40px;padding:9px 16px;white-space:nowrap;scroll-snap-align:start}

  /* ----- catalogue : deux colonnes, cartes compactes ----- */
  .grille{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px 0 48px}
  .carte:hover{transform:none}
  .carte .vis{aspect-ratio:1/1}
  .carte .etiq{top:8px;left:8px;font-size:8px;letter-spacing:.22em;padding:5px 8px}
  .carte .corps{padding:12px 12px 14px;gap:6px}
  .carte h3{font-size:17px;line-height:1.15}
  .carte .accroche{display:none}
  .carte .pied{padding-top:10px;margin-top:2px;gap:8px;flex-wrap:wrap}
  .carte .prix{font-size:16px}
  .carte .prix small{font-size:9px;letter-spacing:.14em;margin-bottom:3px}
  .carte .mini{display:none}

  /* ----- fiche produit : une colonne, image bord à bord ----- */
  .produit{gap:18px;padding:10px 0 48px}
  .galerie-p{position:static}
  .galerie-p .principale{margin-inline:calc(50% - 50vw);border-left:0;border-right:0}
  .vignettes,.pf-vignettes{
    display:flex;flex-wrap:nowrap;gap:8px;margin-top:10px;padding:2px 0;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .vignettes::-webkit-scrollbar,.pf-vignettes::-webkit-scrollbar{display:none}
  .vignettes button,.pf-vignettes button,.pf-vignettes a{
    flex:0 0 64px;width:64px;height:64px;aspect-ratio:auto;scroll-snap-align:start;
  }
  .fiche h1{font-size:clamp(30px,8.6vw,40px);margin:12px 0 10px}
  .fiche .accroche{font-size:17px;margin-bottom:12px}
  .fiche .desc{font-size:15px}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr));margin:20px 0}
  .specs div{padding:12px}
  .specs dd{font-size:13.5px}
  .config{margin:20px calc(50% - 50vw) 0;padding:20px 16px;border-left:0;border-right:0}
  .config h2{font-size:24px}
  .config .sous{margin-bottom:18px}
  .champ{margin-bottom:18px}
  .qte{max-width:none}
  .qte button{width:48px;min-height:48px;font-size:22px}
  .recap .total .montant{font-size:36px}

  /* ----- choix d'options : cartes tactiles sur deux colonnes ----- */
  .choix{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .choix label{
    position:relative;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:52px;padding:10px 12px;text-align:center;font-size:13px;line-height:1.3;
    transition:border-color var(--d2) var(--e-out),background var(--d2) var(--e-out);
  }
  .choix label:hover{border-color:var(--hair-noir)}
  .choix label:has(.vig-choix){justify-content:flex-start;align-items:stretch;padding:0 0 10px}
  .choix label > span:not(.delta){
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding:0 8px;
  }
  .choix .delta{font-size:11.5px;white-space:normal;line-height:1.3;padding:0 8px}
  .vig-choix{
    flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/3;
    border:0;border-bottom:1px solid var(--hair-noir);border-radius:0;margin-bottom:6px;
  }
  .choix input{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .choix label:has(input:checked),.choix label.coche{border-color:var(--or);background:var(--noir-3)}
  .choix label.coche > span:not(.delta){color:var(--or-vif)}
  .choix label:has(input:focus-visible){outline:2px solid var(--or);outline-offset:3px}
  /* la coche : disque or (::before) portant un trait plié (::after) */
  .choix label::before{
    content:"";position:absolute;top:8px;right:8px;z-index:1;
    width:18px;height:18px;border-radius:50%;background:var(--or);
    opacity:0;transform:scale(.6);
    transition:opacity var(--d2) var(--e-out),transform var(--d2) var(--e-out);
  }
  .choix label::after{
    content:"";position:absolute;top:13px;right:12px;z-index:2;
    width:9px;height:5px;border-left:1.5px solid var(--noir);border-bottom:1.5px solid var(--noir);
    transform:rotate(-45deg);opacity:0;transition:opacity var(--d2) var(--e-out);
  }
  .choix label:has(input:checked)::before,.choix label.coche::before{opacity:1;transform:scale(1)}
  .choix label:has(input:checked)::after,.choix label.coche::after{opacity:1}

  /* ----- fiche pack ----- */
  .pastille-teinte{width:44px;height:44px;flex:0 0 44px}
  .pack-resume{position:static}
  .chiffre-clef b,.chiffre-clef strong,.chiffre-clef .valeur{font-size:32px}

  /* ----- sélection : image 88 px, prix et retrait sous le contenu ----- */
  .ligne-panier{grid-template-columns:88px minmax(0,1fr);gap:12px 14px;padding:18px 0}
  .ligne-panier h3{font-size:20px}
  .ligne-panier .droite{
    grid-column:2/-1;width:100%;
    flex-direction:row;align-items:center;justify-content:space-between;text-align:left;
  }
  .ligne-panier .droite .prix{font-size:22px}
  .ligne-panier .qte{max-width:186px}
  .ligne-panier .qte button{width:44px;min-height:44px}
  .bilan{position:static;width:100%;padding:20px}
  .bilan h2{font-size:24px}
  .vide{padding:48px 0}

  /* ----- formulaire de commande ----- */
  fieldset{padding:0;margin-bottom:24px;min-width:0}
  legend{margin-bottom:14px}
  .duo-champ{grid-template-columns:1fr;gap:0}

  /* ----- étapes : bandeau qui glisse, sans retour à la ligne ----- */
  .etapes{
    flex-wrap:nowrap;margin:18px calc(50% - 50vw) 8px;border-left:0;border-right:0;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;scroll-padding-inline:max(16px,4vw);scrollbar-width:none;
  }
  .etapes::-webkit-scrollbar{display:none}
  .etapes div{flex:0 0 auto;white-space:nowrap;padding:12px 16px;font-size:10px;letter-spacing:.18em;scroll-snap-align:start}
  .etapes div:first-child{padding-left:max(16px,4vw)}
  .etapes div:last-child{padding-right:max(16px,4vw)}

  /* ----- l'Atelier : sa barre se pose au-dessus des onglets ----- */
  body.app-mobile .atelier-barre{bottom:calc(var(--h-onglets) + var(--zs-bas));padding-bottom:12px;z-index:130}
  body.app-mobile .atelier{padding-bottom:110px}

  /* ----- pied de page et toast : jamais sous les barres fixes ----- */
  footer.pied{padding-bottom:calc(30px + var(--h-onglets) + var(--zs-bas))}
  body.app-mobile footer.pied{padding-bottom:calc(30px + var(--zs-bas))}
  #toast{bottom:calc(16px + var(--zs-bas));max-width:calc(100vw - 32px)}
  body.app-mobile #toast{bottom:calc(var(--h-onglets) + var(--zs-bas) + 16px)}
  body.app-mobile.avec-action #toast{bottom:calc(var(--h-onglets) + var(--h-action) + var(--zs-bas) + 16px)}
}


/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  .barre-action,.invite-app,.onglets-app .og::before,.points-galerie i,.choix label::before{transition:none}
  .barre-action{transform:none}
  .invite-app{transform:none}
}

/* ---------- la sélection vit dans la barre d'onglets : pas de doublon en tête ---------- */
@media (max-width:760px){
  body.app-mobile .panier-lien,body.app-mobile #lien-panier-vitrine{display:none}
}

/* la coche dorée ne chevauche plus les libellés longs */
@media (max-width:760px){
  .choix label:not(:has(.vig-choix)){padding-left:30px;padding-right:30px}
}