/* Pages commerce : laisser la place au compte, aux produits et à la sélection.
   Ces règles restent limitées aux pages portant .commerce-page. */
.commerce-page {
    --commerce-ink: #0A1628;
    --commerce-muted: #52647A;
    --commerce-paper: #FFFFFF;
    --commerce-wash: #F4F7FB;
    --commerce-line: #DCE4EE;
    background: var(--commerce-paper);
    color: var(--commerce-ink);
}
.commerce-page #wiz-ash { display: none !important; }
/* Le bandeau interne fixe doit laisser accessibles les dernières actions. */
.commerce-page:has(#ouverture-commerce-apercu) {
    padding-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
}
/* L'aperçu garde son lien de suivi malgré le rideau global. Cette classe
   n'est ajoutée au reçu que pour une visite explicitement en ?apercu=1. */
.commerce-page .commande-succes .commande-lien--apercu:not([hidden]) { display: inline-flex !important; }
.commerce-page .commerce-lien-apercu:not([hidden]) { display: inline-flex !important; }

.commerce-page .commerce-hero {
    padding: 32px 0 28px;
    background: var(--commerce-wash);
    color: var(--commerce-ink);
    text-align: left;
    border-bottom: 1px solid var(--commerce-line);
}
.commerce-page .commerce-hero h1 {
    max-width: 850px;
    margin: 0 0 10px;
    color: var(--commerce-ink);
    font-size: clamp(1.8rem, 3.2vw, 2.65rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.025em;
}
.commerce-page .commerce-hero .commerce-intro {
    max-width: 64ch;
    margin: 0;
    padding: 0;
    color: var(--commerce-muted);
    font-size: 1rem;
    line-height: 1.55;
}
.commerce-page .zone-breadcrumb {
    margin-bottom: 14px;
    gap: 8px;
    font-size: .8rem;
}
.commerce-page .zone-breadcrumb a,
.commerce-page .zone-breadcrumb span { color: var(--commerce-muted); }
.commerce-page .zone-breadcrumb a:hover { color: var(--primary-dark); }

.commerce-page .commerce-content { padding: 28px 0 44px; }
.commerce-page .commerce-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* La première action suit l'introduction, dans la même colonne de lecture. */
.commerce-compte .commerce-hero > .container,
.commerce-compte .commerce-content > .container { max-width: 760px; }
.commerce-page #compte-connexion,
.commerce-page .compte-panel {
    max-width: none;
    margin: 0;
    padding: 24px;
    border: 1px solid var(--commerce-line);
    border-radius: 14px;
    background: var(--commerce-paper);
    box-shadow: none;
}
.commerce-page .saa-cnx-titre { color: var(--commerce-ink); font-size: 1.12rem; }
.commerce-page .saa-cnx-intro,
.commerce-page .saa-cnx-aide,
.commerce-page .compte-aide { color: var(--commerce-muted); line-height: 1.5; }
.commerce-page .saa-cnx-intro { font-size: .92rem; }
.commerce-page .saa-cnx-aide { margin-top: 12px; font-size: .82rem; }
.commerce-page .saa-cnx-ligne { display: flex; gap: 12px; align-items: stretch; }
.commerce-page .saa-cnx-ligne input { flex: 1 1 180px; min-width: 0; }
.commerce-page .saa-cnx-ligne .btn { flex: 0 0 auto; white-space: nowrap; }
.commerce-page .saa-cnx-champ,
.commerce-page .compte-input { min-height: 48px; font-size: 16px; }
.commerce-page .saa-cnx-bouton,
.commerce-page .compte-row .btn { min-height: 48px; }
.commerce-compte .compte-note { margin: 18px 0 0; font-size: .84rem; }
.commerce-page .commerce-archives-lien { margin-top: 16px; color: var(--commerce-ink); text-decoration: underline; }
.commerce-compte .commerce-aide { padding: 0 0 36px; }
.commerce-compte .commerce-aide > .container { max-width: 760px; }
.commerce-compte .compte-aide-bloc { padding: 20px; border-radius: 14px; box-shadow: none; }
.commerce-compte .saa-cnx-etape-connecte { text-align: left; }
.commerce-compte .saa-cnx-identite { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.commerce-compte .saa-cnx-identite .btn { margin: 0; }
.commerce-compte .saa-espace-bloc { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--commerce-line); }
.commerce-compte .saa-espace-reference { overflow-wrap: anywhere; min-width: 0; }
.commerce-compte .saa-espace-carte { border-color: var(--commerce-line); box-shadow: none; }
.commerce-compte .saa-espace-etat { margin: 12px 0; color: var(--commerce-muted); }
.commerce-compte .saa-espace-reessayer { min-height: 44px; margin-bottom: 12px; }
.commerce-compte .saa-espace-actions { flex-wrap: wrap; }
.commerce-compte .saa-fiche-bouton { margin-right: 8px; white-space: normal; text-align: left; }
.commerce-compte .saa-fiche-conflit { padding: 16px; margin: 12px 0; border: 1px solid var(--commerce-line); border-radius: 6px; background: #f8fafc; }
.commerce-compte .saa-fiche-nom, .commerce-compte .saa-fiche-conflit p { overflow-wrap: anywhere; }
.commerce-compte #compte-espace-verifie { scroll-margin-top: 100px; }

.commerce-suivi .commerce-hero > .container,
.commerce-suivi .commerce-content > .container { max-width: 760px; }
.commerce-suivi .commerce-suivi-acces { display: grid; gap: 14px; }
.commerce-suivi .commerce-suivi-acces h2 { font-size: 1.25rem; margin: 0; }
.commerce-suivi .commerce-suivi-acces p { color: var(--commerce-muted); margin: 0; }
.commerce-suivi .commerce-suivi-acces .btn { justify-self: start; white-space: normal; text-align: center; }
.commerce-suivi .commerce-archives { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--commerce-line); }
.commerce-suivi .commerce-archives summary { cursor: pointer; padding: 10px 0; min-height: 44px; font-weight: 600; }
.commerce-suivi .commerce-archives > p { margin: 12px 0; color: var(--commerce-muted); }
.commerce-suivi .suivi-form { display: grid; gap: 10px; margin-top: 20px; }
.commerce-suivi .suivi-form input { width: 100%; min-width: 0; border: 1px solid var(--commerce-line); border-radius: 8px; padding: 12px; }
.commerce-suivi .suivi-form .btn { justify-self: start; white-space: normal; }
.commerce-suivi .suivi-resultats { margin-top: 20px; }

/* Le premier produit arrive juste après les rayons, sans bandeau décoratif. */
.commerce-produits .shop-filter { padding: 16px 0 8px; }
.commerce-produits #produits-onglets { justify-content: flex-start; flex-wrap: nowrap; gap: 8px; }
.commerce-produits #produits-onglets .filter-btn { min-height: 44px; padding: 8px 16px; font-size: .88rem; }
.commerce-produits .shop-section { padding: 8px 0 44px; }
.commerce-produits #produits-grille { margin-top: 0; gap: 20px; }
.commerce-produits .product-card { box-shadow: none; border-color: var(--commerce-line); }
.commerce-produits #produits-attente,
.commerce-produits #produits-panne,
.commerce-produits #produits-vide { padding: 24px 16px; }
.commerce-produits #produit-fiche { padding-top: 16px; }

/* Le récapitulatif reste lisible sans multiplier les cadres imbriqués. */
.commerce-panier .panier-layout { gap: 24px; }
/* Un track 1fr garde sinon la largeur minimale du contenu (fieldset, prix,
   actions) et agrandit la carte au-delà de la colonne sur les petits écrans. */
.commerce-panier .panier-layout > *,
.commerce-panier .panier-ligne,
.commerce-panier .panier-actions,
.commerce-panier .livraison-choix,
.commerce-panier .livraison-groupe,
.commerce-panier .livraison-option { min-width: 0; max-width: 100%; }
.commerce-panier .livraison-groupe { grid-template-columns: minmax(0, 1fr); }
.commerce-panier .panier-infos { overflow-wrap: anywhere; }
.commerce-panier .panier-actions { flex-wrap: wrap; gap: 10px 14px; }
.commerce-panier .panier-resume .btn { max-width: 100%; white-space: normal; text-align: center; }
.commerce-panier .panier-titre,
.commerce-panier .panier-resume-titre { margin-bottom: 14px; color: var(--commerce-ink); font-size: 1.15rem; }
.commerce-panier .panier-ligne { padding: 14px; border-color: var(--commerce-line); border-radius: 12px; box-shadow: none; }
.commerce-panier .panier-resume { padding: 20px; border-color: var(--commerce-line); border-radius: 14px; box-shadow: none; }
.commerce-panier #compte-connexion { padding: 16px 0; margin: 0 0 16px; border-width: 1px 0; border-radius: 0; }
.commerce-panier .panier-principal > .panier-titre:not(:first-child) { margin-top: 24px; }
.commerce-panier .saa-cnx-ligne { flex-direction: column; }
.commerce-panier .saa-cnx-ligne input { flex: 0 0 auto; width: 100%; }
.commerce-panier .zone-services.acc-section { padding: 32px 0; }

.commerce-page .zone-why { padding: 44px 0; }
.commerce-page .zone-why .section-title { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.commerce-page .zone-why-grid { gap: 20px; }
.commerce-page .zone-why-item { box-shadow: none; }

@media (max-width: 900px) {
    .commerce-panier .panier-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    .commerce-page .container { padding-left: 20px; padding-right: 20px; }
    .commerce-page .commerce-hero { padding: 22px 0 20px; }
    .commerce-page .commerce-hero h1 { font-size: 1.85rem; }
    .commerce-page .commerce-hero .commerce-intro { font-size: .92rem; line-height: 1.5; }
    .commerce-page .zone-breadcrumb { margin-bottom: 12px; }
    .commerce-page .commerce-content { padding: 20px 0 32px; }
    .commerce-page #compte-connexion,
    .commerce-page .compte-panel { padding: 18px; }
    .commerce-page .saa-cnx-ligne,
    .commerce-page .compte-row { flex-direction: column; gap: 10px; }
    .commerce-page .saa-cnx-ligne input,
    .commerce-page .compte-input { flex: 0 0 auto; width: 100%; }
    .commerce-page .saa-cnx-ligne .btn,
    .commerce-page .compte-row .btn { width: 100%; }
    .commerce-produits .shop-filter { padding-top: 12px; }
    /* Quatre onglets au téléphone (Hicham, 02/10 : Tous, Appareils, Accessoires,
       Protections) : à 16 px de marge, la rangée faisait 428 px pour 350 visibles
       et « Protections » sortait du champ. Marges serrées, onglets qui se
       partagent la largeur : les quatre tiennent dès 390 px ; plus étroit, la
       rangée défile et produits.js ramène l'onglet actif dans le champ. */
    .commerce-produits #produits-onglets { gap: 6px; }
    .commerce-produits #produits-onglets .filter-btn { flex: 1 0 auto; padding: 8px 7px; }
    .commerce-produits #produits-grille { gap: 16px; }
    .commerce-panier .panier-layout { gap: 20px; }
    .commerce-panier .panier-resume { padding: 18px; }
    .commerce-panier #compte-connexion { padding: 14px 0; }
    .commerce-page .zone-why { padding: 32px 0; }
}

/* ═════════════ Les trois étapes du panier portent leur NUMÉRO ═════════════
 *
 * Demande de Rami, 2026-09-23 : « dans les étapes du panier il y a trois
 * bulles, il faudrait afficher 1 2 et 3 en fonction de l'ordre de l'étape ».
 * Les bulles contenaient une icône (liste, WhatsApp, boutique) : trois dessins
 * différents pour une SÉQUENCE, ce qui ne dit pas l'ordre. Un chiffre le dit.
 *
 * Le « 1. » qui ouvrait chaque titre est retiré du même coup : la bulle le
 * porte désormais, et l'afficher deux fois se lit « 1 / 1. Vous sélectionnez ».
 *
 * 🪤 Classe DOUBLE (`.why-icon.why-icon-etape`) et non simple : `.why-icon`
 * est défini dans `style.css`, à spécificité égale, et l'ordre de chargement
 * des feuilles n'est pas le même sur toutes les pages. Une classe simple
 * gagnerait ici et perdrait ailleurs.
 *
 * Le bloc `.zone-why-item` sert sur 93 pages : ce style ne vise QUE la classe
 * ajoutée sur le panier, aucune autre page ne bouge.
 */
.why-icon.why-icon-etape {
  font-family: var(--police, inherit);
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1;
  /* Le chiffre est une information, pas une décoration : il reste lisible par
     un lecteur d'écran, puisque le titre ne porte plus l'ordre. */
  font-variant-numeric: tabular-nums;
}

/* ═════════════ Achat avec reprise : la question avant l'envoi ═════════════
 *
 * Rami, 29/09 : avant une demande d'achat qui contient un appareil, le panier
 * demande si le client veut faire reprendre son téléphone actuel
 * (js/commande.js). Un encadré sobre, deux boutons pleine largeur l'un sous
 * l'autre (48 px, jamais côte à côte : à 390 px deux libellés longs se
 * couperaient). Le lien « Faire estimer ma reprise » du reçu passe à la ligne
 * plutôt que de déborder.
 */
.commerce-panier .commande-reprise {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid var(--commerce-line);
  border-radius: 12px;
  background: var(--commerce-wash);
}
.commerce-panier .commande-reprise-titre { margin: 0 0 4px; font-weight: 700; color: var(--commerce-ink); }
.commerce-panier .commande-reprise-texte { margin: 0 0 12px; font-size: 0.92rem; color: var(--commerce-muted); }
.commerce-panier .commande-reprise .btn { min-height: 48px; white-space: normal; text-align: center; }
.commerce-panier .commande-reprise .btn + .btn { margin-top: 8px; }
.commerce-panier .commande-succes .commande-lien-reprise { max-width: 100%; white-space: normal; }