/* ============================================================================
   EL MODE — la page du rayon Pack

   CHARGÉE APRÈS marque.css ET SEULEMENT SUR /pack.html.
   Elle ne redéfinit rien du socle : tout ce qu'elle décrit — la vignette à
   deux boutons, la fenêtre « Voir l'article », la liste de la sélection, le
   bandeau fixe — n'existe que sur cette page.

   AUCUNE VALEUR HEX ICI. Règle n°3 du socle : les couleurs vivent dans
   css/tokens.css, sinon elles échapperont au prochain changement d'identité.

   LES VIGNETTES SONT CARRÉES, ET C'EST UN CHOIX
   Le socle cadre ses cartes en 4:5 avec object-fit:cover. Une montre, une
   ceinture ou un portefeuille sont photographiés à l'horizontale : en 4:5,
   cover leur coupe près de la moitié de la largeur. Les photos ont donc été
   recadrées en carré, sur leur propre fond, et la vignette est carrée. Rien
   n'est coupé, et deux photos de proportions différentes s'alignent quand
   même.
   ========================================================================== */

/* ==========================================================================
   L'intro
   ========================================================================== */
.pack-intro{
  max-width:52ch;margin:14px auto 0;
  color:var(--texte-3);font-size:.95rem;line-height:1.6;text-align:center;
}

/* ==========================================================================
   La grille d'articles
   --------------------------------------------------------------------------
   Deux colonnes sur téléphone comme le reste de la boutique : une seule
   colonne ferait défiler seize articles sur seize écrans avant d'atteindre le
   formulaire, qui est en bas.
   ========================================================================== */
.pack-grille{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:26px 12px;margin-top:26px;list-style:none;padding:0;
}
@media (min-width:980px){ .pack-grille{grid-template-columns:repeat(3,1fr);gap:34px 22px;} }
@media (min-width:1240px){ .pack-grille{grid-template-columns:repeat(4,1fr);} }

.pack-article{
  position:relative;
  display:flex;flex-direction:column;
  background:transparent;border:0;
  animation:carte-arrive .5s both;animation-delay:calc(var(--i,0) * 45ms);
}
@media (prefers-reduced-motion:reduce){ .pack-article{animation:none;} }

.pack-article-image{
  aspect-ratio:1 / 1;background:var(--fond-1);overflow:hidden;
  border:1px solid transparent;transition:border-color .25s;
}
.pack-article-image img{display:block;width:100%;height:100%;object-fit:cover;}

/* L'article choisi se voit sans avoir à lire : un filet clair autour de la
   photo et une pastille. Le socle n'a pas d'état « sélectionné » — le pack
   est la première page où un article peut être dedans ou dehors. */
.pack-article-choisi .pack-article-image{border-color:var(--bande);}

.pack-article-marque{
  position:absolute;inset-inline-end:8px;top:8px;
  width:26px;height:26px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:var(--bande);color:var(--sur-bande);
  font-size:.8rem;line-height:1;
}
.pack-article-choisi .pack-article-marque{display:flex;}

.pack-article-corps{display:flex;flex-direction:column;gap:6px;padding:12px 2px 0;flex:1;}
.pack-article-corps h3{
  margin:0;font-size:.74rem;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--texte-1);
  line-height:1.45;
}
:root[lang="ar"] .pack-article-corps h3{letter-spacing:0;text-transform:none;font-size:.9rem;}

.pack-article-prix{margin:0;font-size:.9rem;color:var(--texte-0);letter-spacing:.04em;}

.pack-article-actions{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:10px;}

/* Le socle interdit le retour à la ligne dans un .btn — ses libellés sont
   courts. « Ajouter à la sélection » ne tient pas dans une colonne de 160 px :
   ici, et ici seulement, le libellé a le droit de passer sur deux lignes. */
.pack-article-actions .btn{
  white-space:normal;line-height:1.3;
  padding:11px 10px;font-size:.66rem;letter-spacing:.12em;
  text-align:center;
}
:root[lang="ar"] .pack-article-actions .btn{font-size:.82rem;letter-spacing:0;}
@media (min-width:640px){ .pack-article-actions .btn{font-size:.7rem;padding:12px 14px;} }

.pack-aucun{margin-top:26px;text-align:center;color:var(--texte-3);}

/* ==========================================================================
   La fenêtre « Voir l'article »
   --------------------------------------------------------------------------
   Pas une page : le formulaire est en bas de celle-ci, et partir ferait
   perdre la sélection et la position dans la grille.
   ========================================================================== */
.pack-fenetre{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px;}
.pack-fenetre[hidden]{display:none;}
.pack-fenetre-fond{position:absolute;inset:0;background:var(--voile-barre);border:0;padding:0;cursor:pointer;}

.pack-fenetre-boite{
  position:relative;z-index:1;
  width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;
  background:var(--fond-2);border:1px solid var(--ligne);
  box-shadow:var(--shadow);
  padding:0 0 22px;
}
.pack-fenetre-boite img{display:block;width:100%;aspect-ratio:1 / 1;object-fit:cover;background:var(--fond-1);}
.pack-fenetre-corps{padding:20px 22px 0;display:flex;flex-direction:column;gap:10px;}
.pack-fenetre-corps h3{margin:0;font-size:1rem;color:var(--texte-0);}
.pack-fenetre-prix{margin:0;font-size:1.15rem;color:var(--texte-0);letter-spacing:.04em;}
.pack-fenetre-detail{margin:0;color:var(--texte-2);font-size:.92rem;line-height:1.65;}
.pack-fenetre-corps .btn{margin-top:6px;}

.pack-fenetre-fermer{
  position:absolute;inset-inline-end:10px;top:10px;z-index:2;
  width:36px;height:36px;border:1px solid var(--ligne);
  background:var(--voile-barre);color:var(--texte-0);
  font-size:1.1rem;line-height:1;cursor:pointer;
}
.pack-fenetre-fermer:hover{border-color:var(--orange);color:var(--orange-vif);}

/* Le fond ne défile pas derrière la fenêtre : sur téléphone, le doigt qui
   croit faire défiler la fiche fait défiler la grille en dessous. */
body.pack-fige{overflow:hidden;}

/* ==========================================================================
   Le formulaire — sous tous les articles
   ========================================================================== */
.pack-commande{scroll-margin-top:80px;}

.pack-bloc{margin-bottom:22px;}
.pack-bloc-titre{
  margin:0 0 10px;font-size:.72rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--texte-3);
}
:root[lang="ar"] .pack-bloc-titre{letter-spacing:0;text-transform:none;font-size:.86rem;}

/* ---- La sélection ---- */
.pack-selection{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.pack-choix{
  display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--ligne);
}
.pack-choix:first-child{border-top:1px solid var(--ligne);}
.pack-choix-nom{flex:1;min-width:0;color:var(--texte-1);font-size:.9rem;line-height:1.4;}
.pack-choix-prix{color:var(--texte-0);font-size:.9rem;letter-spacing:.04em;white-space:nowrap;}
.pack-choix-oter{
  background:none;border:0;padding:4px 2px;cursor:pointer;
  color:var(--texte-3);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
}
.pack-choix-oter:hover{color:var(--alerte);}
:root[lang="ar"] .pack-choix-oter{letter-spacing:0;text-transform:none;font-size:.85rem;}

.pack-vide{margin:0;color:var(--texte-3);font-size:.9rem;line-height:1.6;}
.pack-minimum{margin:10px 0 0;color:var(--ambre);font-size:.85rem;line-height:1.5;}

/* ---- L'emballage ---- */
.pack-options{display:flex;flex-direction:column;gap:2px;}
.pack-option{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;cursor:pointer;
  border:1px solid var(--ligne);
  background:var(--fond-1);
}
.pack-option + .pack-option{margin-top:6px;}
.pack-option:hover{border-color:var(--voile-accent-moyen);}
.pack-option input{
  width:18px;height:18px;flex:none;margin:0;
  accent-color:var(--bande);cursor:pointer;
}
/* Une case cochée qu'on ne peut pas décocher doit le DIRE : sans ça, le
   client clique, rien ne bouge, et il croit la page cassée. */
.pack-option:has(input:disabled){cursor:default;}
.pack-option:has(input:disabled) input{cursor:default;opacity:.8;}
.pack-option:has(input:checked){border-color:var(--voile-accent-fort);background:var(--voile-accent-tres-doux);}

.pack-option-nom{flex:1;color:var(--texte-1);font-size:.92rem;}
.pack-option-prix{color:var(--texte-3);font-size:.85rem;white-space:nowrap;letter-spacing:.03em;}
.pack-option:has(input:checked) .pack-option-prix{color:var(--texte-1);}

/* ==========================================================================
   Le bandeau fixe
   --------------------------------------------------------------------------
   Le formulaire est tout en bas, après seize articles. Sans rappel, le client
   qui vient d'ajouter son deuxième article ne sait pas où aller.
   ========================================================================== */
.pack-barre{
  position:fixed;inset-inline:0;bottom:0;z-index:50;
  background:var(--voile-barre);
  border-top:1px solid var(--ligne);
  backdrop-filter:blur(10px);
}
.pack-barre[hidden]{display:none;}
.pack-barre-inner{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;
}
.pack-barre-etat{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.pack-barre-compte{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--texte-3);}
:root[lang="ar"] .pack-barre-compte{letter-spacing:0;text-transform:none;font-size:.85rem;}
.pack-barre-total{font-size:1rem;color:var(--texte-0);letter-spacing:.04em;}
.pack-barre .btn{flex:none;}

/* La barre masque le bas de la page : on rend la hauteur au document, sinon
   le bouton « Confirmer » se retrouve dessous et devient incliquable. */
body.pack-page{padding-bottom:78px;}

/* Le bouton WhatsApp flottant du socle se pose exactement là où la barre
   arrive. On le remonte au-dessus d'elle. */
body.pack-page .wa-float{bottom:94px;}

/* ==========================================================================
   LE VERSEMENT CCP
   --------------------------------------------------------------------------
   Pas un champ : un numéro qu'on DONNE. Il est écrit gros, en chiffres
   tabulaires pour que l'œil puisse les compter, et il se copie d'un bouton.
   ========================================================================== */
.pack-ccp-ligne{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--ligne);background:var(--fond-1);
}
.pack-ccp-numero{
  flex:1;min-width:0;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  font-size:1.02rem;letter-spacing:.08em;color:var(--texte-0);
  word-break:break-all;user-select:all;
}
.pack-ccp-copier{
  flex:none;cursor:pointer;
  background:transparent;border:1px solid var(--ligne);
  color:var(--texte-1);padding:8px 14px;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  font-family:inherit;
}
.pack-ccp-copier:hover{border-color:var(--bande);color:var(--bande-vif);}
.pack-ccp-copier-fait{border-color:var(--vert);color:var(--vert);}
:root[lang="ar"] .pack-ccp-copier{letter-spacing:0;text-transform:none;font-size:.85rem;}

.pack-ccp-note{margin:10px 0 0;color:var(--texte-3);font-size:.85rem;line-height:1.6;}

/* ==========================================================================
   LES BOUTONS D'ACHAT PORTENT LA COULEUR DE LA BANDE
   --------------------------------------------------------------------------
   Demande du propriétaire : le doré de la bande roulante, pas l'aplat neutre
   du socle. --bande et --sur-bande sont les seules couleurs d'accent que les
   palettes ne redéfinissent pas : le bouton garde donc le même doré en clair
   comme en sombre, quelle que soit la palette choisie. L'encre sur le doré
   tient 8,26:1.

   L'OMBRE COLORÉE DU SOCLE EST RETIRÉE. --shadow-accent est calculée pour
   l'aplat neutre ; sous un bouton doré, elle le salit sans rien souligner.

   La pastille ✓ et le filet de l'article choisi suivent le même doré : ce
   sont les deux marques de l'action que le bouton déclenche. Les laisser
   orange aurait donné deux accents pour un seul geste.
   ========================================================================== */
body.pack-page .btn-primary{
  background:var(--bande);color:var(--sur-bande);box-shadow:none;
}
body.pack-page .btn-primary:hover{background:var(--bande-vif);}
body.pack-page .btn-ghost:hover{border-color:var(--bande);color:var(--bande-vif);}