/* ============================================================
   MyShop — structure et composants
   ------------------------------------------------------------
   AUCUNE COULEUR EN DUR ICI : tout passe par les variables du theme
   (tokens-<client>.css). C'est ce qui permet d'habiller MyShop aux couleurs d'un
   autre client en changeant un seul fichier. Si une couleur manque, on ajoute
   un token dans le theme — on ne pose pas un hex dans cette feuille.

   Deux familles de classes :
     .sib-*  composants de la charte SI Breeze, repris de MyProd / du skill
             sibreeze-charte. Ne pas les reecrire.
     .MyShop-*  ce que MyShop ajoute : accueil, formulaires de parametrage, planning.
   ============================================================ */

/* ======================== ossature ======================== */

.sib-page { max-width: 1500px; margin: 0 auto; padding: var(--sib-4); }
.sib-grid { display: grid; grid-template-columns: 1fr; gap: var(--sib-4); }
@media (min-width: 700px) { .sib-page { padding: var(--sib-6); } }

/* ======================== logo ======================== */

.sib-logo { display: inline-flex; align-items: center; }
.sib-logo img { height: 36px; width: auto; display: block; }
/* Au moins aussi specifique que « .sib-logo img », sinon les deux logos
   s'affichent cote a cote — defaut connu du CSS de la charte. */
.sib-logo img.sib-logo__sombre { display: none; }
.sib-logo__repli { display: none; font-weight: var(--sib-fw-hero); font-size: 1.2rem;
                   letter-spacing: -.02em; color: currentColor; }
.sib-logo.is-repli img { display: none; }
.sib-logo.is-repli .sib-logo__repli { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sib-logo img.sib-logo__clair { display: none; }
  :root:not([data-theme="light"]) .sib-logo img.sib-logo__sombre { display: block; }
}
:root[data-theme="dark"] .sib-logo img.sib-logo__clair { display: none; }
:root[data-theme="dark"] .sib-logo img.sib-logo__sombre { display: block; }

/* ======================== bandeau et rubriques ======================== */

/* UNE SEULE LIGNE (16/10/2026) : logo, MyShop, les rubriques, puis le client, l'utilisateur et le
   theme. Hauteur fixe — la barre laterale et les ancres se calent dessus. */
:root { --MyShop-barre-h: 60px; }
.sib-app-bar { background: var(--sib-bandeau); color: var(--sib-sur-bandeau);
               position: sticky; top: 0; z-index: 30; }
.sib-app-bar__haut { display: flex; align-items: center; gap: var(--sib-4);
                     min-height: var(--MyShop-barre-h); padding: 0 var(--sib-5); }
.sib-app-bar__titre { margin: 0; font-weight: 600; font-size: var(--sib-fs-body);
                      color: var(--sib-blanc); white-space: nowrap; }
.sib-app-bar__titre span { color: var(--sib-sur-bandeau-2); font-weight: 500; }
.sib-app-bar__actions { margin-left: auto; display: flex; align-items: center;
                        gap: var(--sib-3); flex-shrink: 0; }
.sib-app-bar__user { font-size: var(--sib-fs-sm); color: var(--sib-sur-bandeau-2); white-space: nowrap; }

/* Les rubriques DEFILENT, elles ne passent pas a la ligne : un retour a la ligne change la
   hauteur du bandeau et fait sauter tout le contenu. */
.sib-nav { display: flex; align-items: center; gap: var(--sib-1); flex: 1 1 auto; min-width: 0;
           overflow-x: auto; scrollbar-width: none; }
.sib-nav::-webkit-scrollbar { display: none; }
.sib-nav a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
             padding: 8px var(--sib-4); border-radius: var(--sib-r-pill);
             font-size: var(--sib-fs-sm); font-weight: 600; text-decoration: none;
             color: var(--sib-sur-bandeau-2); transition: background-color .25s, color .25s; }
.sib-nav a:hover { background: var(--sib-bandeau-survol); color: var(--sib-blanc); }
/* L'orange est le seul signal chaud, et sa force vient de sa rarete :
   une rubrique active par ecran, rien d'autre. */
.sib-nav a[aria-current="page"] { background: var(--sib-orange); color: var(--sib-on-orange); }
/* L'administration se range a droite des modules : ce n'est pas ce qu'on vient faire. */
.sib-nav__service { margin-left: auto; }

.sib-nav__moi { position: relative; }
.sib-nav__moi > summary { list-style: none; cursor: pointer; white-space: nowrap;
                          padding: 8px var(--sib-4); border-radius: var(--sib-r-pill);
                          font-size: var(--sib-fs-sm); font-weight: 600;
                          color: var(--sib-blanc); border: 1px solid var(--sib-sur-bandeau-2); }
.sib-nav__moi > summary::-webkit-details-marker { display: none; }
.sib-nav__moi > summary::after { content: " ▾"; }
.sib-nav__moi-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
                     display: grid; gap: var(--sib-1); padding: var(--sib-3);
                     background: var(--sib-surface); color: var(--sib-ink);
                     border-radius: 12px; box-shadow: 0 8px 24px rgba(7, 16, 56, .18); }
.sib-nav__moi-menu a, .sib-nav__moi-menu button { all: unset; cursor: pointer; padding: 6px 8px; border-radius: 8px;
                     font-size: var(--sib-fs-sm); color: inherit; display: flex; align-items: center; gap: 8px; }
.sib-nav__moi-menu a:hover, .sib-nav__moi-menu button:hover { background: var(--sib-surface-2); }
.sib-nav__moi-menu form { margin: 0; }
.sib-nav__moi-menu .MyShop-icone { width: 16px; height: 16px; }

/* Le bandeau est sombre dans les deux themes : le logo y est toujours la version blanche. */
.sib-app-bar .sib-logo img.sib-logo__clair { display: none; }
.sib-app-bar .sib-logo img.sib-logo__sombre { display: block; }

@media (max-width: 1100px) { .sib-app-bar__user { display: none; } }
@media (max-width: 700px) {
  .sib-app-bar__haut { gap: var(--sib-2); padding: 0 var(--sib-3); }
  /* Connecte, la place va aux rubriques ; sur la page de connexion, le logo reste. */
  .sib-app-bar:has(.sib-nav) .sib-logo, .sib-app-bar:has(.sib-nav) .sib-app-bar__titre { display: none; }
  .sib-nav__moi > summary { padding: 8px var(--sib-3); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* ======================== barre laterale de la rubrique ======================== */

/* Les pages de la rubrique ouverte (16/10/2026). Absente quand la rubrique n'a qu'une page :
   la place va au contenu. */
.MyShop-icone { width: 18px; height: 18px; flex-shrink: 0; }
.MyShop-cadre--laterale { display: flex; align-items: flex-start; }
.MyShop-cadre--laterale > .sib-page { flex: 1 1 auto; min-width: 0; margin: 0; }
.MyShop-laterale { flex: 0 0 216px; position: sticky; top: var(--MyShop-barre-h);
                height: calc(100vh - var(--MyShop-barre-h)); overflow-y: auto;
                display: flex; flex-direction: column; gap: var(--sib-1);
                padding: var(--sib-4) var(--sib-3); background: var(--sib-surface);
                border-right: 1px solid var(--sib-border-2); transition: flex-basis .2s; }
.MyShop-laterale__titre { margin: 0 0 var(--sib-2); padding: 0 var(--sib-3); font-size: var(--sib-fs-xs);
                       font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sib-ink-3);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.MyShop-laterale__nav { display: grid; gap: 2px; }
.MyShop-laterale__lien { display: flex; align-items: center; gap: var(--sib-3); padding: 9px var(--sib-3);
                      border-radius: var(--sib-r-sm); color: var(--sib-ink-2); text-decoration: none;
                      font-size: var(--sib-fs-sm); font-weight: 600; white-space: nowrap; }
.MyShop-laterale__lien:hover { background: var(--sib-survol); color: var(--sib-ink); }
.MyShop-laterale__lien[aria-current="page"] { background: var(--sib-surface-2); color: var(--sib-ink);
                                           box-shadow: inset 3px 0 0 var(--sib-orange); }
.MyShop-laterale__texte { overflow: hidden; text-overflow: ellipsis; }
.MyShop-laterale__sommaire { display: grid; margin: 2px 0 var(--sib-2) 26px; padding-left: var(--sib-3);
                          border-left: 1px solid var(--sib-border-2); }
.MyShop-laterale__sommaire a { padding: 5px var(--sib-2); font-size: var(--sib-fs-xs); color: var(--sib-ink-3);
                            text-decoration: none; border-radius: 6px; }
.MyShop-laterale__sommaire a:hover { color: var(--sib-ink); background: var(--sib-survol); }
.MyShop-laterale__sommaire a[aria-current] { color: var(--sib-orange-ink); font-weight: 600; }
.MyShop-laterale__replier { all: unset; cursor: pointer; margin-top: auto; display: flex; align-items: center;
                         gap: var(--sib-3); padding: 9px var(--sib-3); border-radius: var(--sib-r-sm);
                         font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }
.MyShop-laterale__replier:hover { background: var(--sib-survol); color: var(--sib-ink); }
.MyShop-laterale__replier:focus-visible, .MyShop-laterale__lien:focus-visible { outline: 2px solid var(--sib-orange); outline-offset: 1px; }
/* Une ancre ne doit pas finir sous le bandeau colle en haut. */
.MyShop-cadre--laterale [id] { scroll-margin-top: calc(var(--MyShop-barre-h) + var(--sib-4)); }

/* Repliee : les icones seules ; le libelle reste dans l'infobulle (title). */
@media (min-width: 801px) {
  .MyShop-laterale-repliee .MyShop-laterale { flex-basis: 64px; }
  .MyShop-laterale-repliee .MyShop-laterale__texte,
  .MyShop-laterale-repliee .MyShop-laterale__sommaire { display: none; }
  .MyShop-laterale-repliee .MyShop-laterale__titre { visibility: hidden; }
  .MyShop-laterale-repliee .MyShop-laterale__lien,
  .MyShop-laterale-repliee .MyShop-laterale__replier { justify-content: center; padding-inline: 0; }
  .MyShop-laterale-repliee .MyShop-laterale__replier .MyShop-icone { transform: rotate(180deg); }
}

/* Petit ecran : la barre laterale devient une rangee de pages au-dessus du contenu. */
@media (max-width: 800px) {
  .MyShop-cadre--laterale { display: block; }
  .MyShop-laterale { position: static; height: auto; flex-direction: row; overflow-x: auto;
                  padding: var(--sib-2) var(--sib-3); border-right: 0; border-bottom: 1px solid var(--sib-border-2);
                  scrollbar-width: none; }
  .MyShop-laterale__titre, .MyShop-laterale__sommaire, .MyShop-laterale__replier { display: none; }
  .MyShop-laterale__nav { display: flex; gap: var(--sib-1); }
}

/* Les comptes dans /Parametres (repris de MyProd le 20/10/2026) : une colonne par reglage,
   tout aligne en haut, des champs de 32 px. */
.MyShop-comptes td { vertical-align: top; white-space: nowrap; }
.MyShop-comptes td > b, .MyShop-comptes__etat { display: inline-block; line-height: 32px; }
.MyShop-comptes td > b { line-height: 1.3; padding-top: 6px; }
.MyShop-comptes th, .MyShop-comptes td { padding-left: 6px; padding-right: 6px; }
/* Plus precis que « .sib-table th », pose plus bas dans la feuille : l'en-tete passe a la ligne. */
.sib-table.MyShop-comptes th { white-space: normal; vertical-align: bottom; }
/* Tenir dans 1 000 px (ecran a 125 %, barre laterale ouverte) : les boutons restent visibles. */
.MyShop-comptes input:not([type=checkbox]), .MyShop-comptes select { height: 32px; min-width: 0; width: 112px; }
.MyShop-comptes select { width: 124px; }
.MyShop-comptes .MyShop-deroulant { width: 164px; }
/* Le compte Divalto se lit en entier (« prenom.nom@C610130.divalto.com ») : la colonne a la place depuis le 30/10/2026. */
.MyShop-comptes input[name=CompteExterne] { width: 300px; }
.MyShop-comptes .sib-btn { min-height: 32px; height: 32px; padding: 0 var(--sib-3); font-size: var(--sib-fs-xs); }
/* Les boutons l'un sous l'autre : un second bouton n'elargit pas la ligne. */
.MyShop-comptes__actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }

/* Les menus d'un utilisateur : un deroulant de cases a cocher, le resume dans le bouton ferme. */
.MyShop-deroulant { position: relative; }
.MyShop-deroulant > summary { list-style: none; cursor: pointer; height: 32px; box-sizing: border-box; line-height: 20px;
                           padding: 5px 28px 5px 10px; border: 1px solid var(--sib-border-fort); border-radius: 6px;
                           background: var(--sib-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                           position: relative; font-size: var(--sib-fs-sm); }
.MyShop-deroulant > summary::-webkit-details-marker { display: none; }
.MyShop-deroulant > summary::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.MyShop-deroulant[open] > summary::after { content: "▴"; }
/* Ouvert DANS la ligne (pas en surimpression) : le tableau defile dans son cadre, qui couperait une liste flottante. */
.MyShop-deroulant__liste { margin-top: 4px; display: grid; gap: 4px; padding: 8px 12px; background: var(--sib-surface);
                        border: 1px solid var(--sib-border-fort); border-radius: 6px; }
.MyShop-coche { display: flex; align-items: center; gap: var(--sib-2); white-space: nowrap; font-size: var(--sib-fs-sm); }
.MyShop-coche input { width: 16px; height: 16px; accent-color: var(--sib-orange); }
/* Connexion, mot de passe, acces refuse : une carte etroite au centre. */
.MyShop-connexion { max-width: 440px; margin: var(--sib-6) auto; }
.sib-nav__avenir { font-size: var(--sib-fs-xs); font-weight: 500; opacity: .75;
                   border: 1px solid currentColor; border-radius: var(--sib-r-pill);
                   padding: 1px 7px; }

/* ======================== cartes ======================== */

.sib-card { background: var(--sib-surface); border: var(--sib-bd); border-radius: var(--sib-r);
            padding: var(--sib-6); transition: background .25s, border-color .25s, transform .25s; }
.sib-card__head { display: flex; align-items: baseline; justify-content: space-between;
                  gap: var(--sib-3); flex-wrap: wrap; margin-bottom: var(--sib-4); }
.sib-card__head h2 { margin: 0; font-size: var(--sib-fs-h3); font-weight: var(--sib-fw-title); }
.sib-card__meta { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }

/* ======================== boutons ======================== */

.sib-btn { font: 600 var(--sib-fs-sm)/1 var(--sib-font); padding: 12px var(--sib-5);
           border-radius: var(--sib-r-pill); border: 2px solid transparent; cursor: pointer;
           min-height: 42px; text-decoration: none; display: inline-flex; align-items: center;
           justify-content: center; gap: 6px;
           transition: background-color .25s, border-color .25s, color .25s; }
.sib-btn--primary { background: var(--sib-grad-orange); color: var(--sib-on-orange); }
.sib-btn--primary:hover { background: var(--sib-grad-orange-survol); }
.sib-btn--secondary { background: var(--sib-bleu); color: var(--sib-blanc); }
.sib-btn--ghost { background: var(--sib-blanc); color: var(--sib-bleu); border-color: var(--sib-border-fort); }
.sib-btn--ghost:hover { background: var(--sib-survol); }
.sib-btn:disabled { opacity: .45; cursor: not-allowed; }
.sib-btn--bandeau { background: transparent; color: var(--sib-blanc);
                    border-color: var(--sib-bandeau-filet); padding: 9px var(--sib-4);
                    min-height: 40px; font-size: var(--sib-fs-sm); }
.sib-btn--bandeau:hover { background: var(--sib-bandeau-survol); }
.sib-btn--rond { width: 40px; height: 40px; min-height: 40px; padding: 0; }
.sib-btn--petit { min-height: 34px; padding: 7px var(--sib-4); font-size: var(--sib-fs-xs); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sib-btn--secondary,
  :root:not([data-theme="light"]) .sib-btn--ghost {
    background: var(--sib-surface-2); color: var(--sib-ink); border-color: var(--sib-border-fort);
  }
}
:root[data-theme="dark"] .sib-btn--secondary,
:root[data-theme="dark"] .sib-btn--ghost {
  background: var(--sib-surface-2); color: var(--sib-ink); border-color: var(--sib-border-fort);
}

/* ======================== badges et alertes ======================== */

.sib-badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--sib-fs-xs);
             font-weight: 600; line-height: 1; padding: 6px 11px; border-radius: var(--sib-r-pill);
             border: 1px solid; white-space: nowrap; }
.sib-badge--good { color: var(--sib-good); background: var(--sib-good-bg); border-color: var(--sib-good-br); }
.sib-badge--warn { color: var(--sib-warn); background: var(--sib-warn-bg); border-color: var(--sib-warn-br); }
.sib-badge--serious { color: var(--sib-serious); background: var(--sib-serious-bg); border-color: var(--sib-serious-br); }
.sib-badge--crit { color: var(--sib-crit); background: var(--sib-crit-bg); border-color: var(--sib-crit-br); }
.sib-badge--neutre { color: var(--sib-neutre); background: var(--sib-neutre-bg); border-color: var(--sib-neutre-br); }

.sib-alert { display: flex; flex-direction: column; gap: 2px; padding: var(--sib-3) var(--sib-4);
             border-radius: var(--sib-r-sm); border: 1px solid; border-left-width: 4px;
             font-size: var(--sib-fs-sm); }
.sib-alert strong { font-weight: 700; }
.sib-alert--good { color: var(--sib-good); background: var(--sib-good-bg); border-color: var(--sib-good-br); }
.sib-alert--warn { color: var(--sib-warn); background: var(--sib-warn-bg); border-color: var(--sib-warn-br); }
.sib-alert--serious { color: var(--sib-serious); background: var(--sib-serious-bg); border-color: var(--sib-serious-br); }
.sib-alert--crit { color: var(--sib-crit); background: var(--sib-crit-bg); border-color: var(--sib-crit-br); }

/* ======================== tableau dense ======================== */

.sib-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--sib-r-sm); }
.sib-table { width: 100%; border-collapse: collapse; font-size: var(--sib-fs-sm); }
.sib-table th, .sib-table td { padding: 10px var(--sib-3); border-bottom: 1px solid var(--sib-border);
                               text-align: left; vertical-align: top; }
.sib-table td.num, .sib-table th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sib-table thead th { position: sticky; top: 0; z-index: 1; background: var(--sib-surface-2);
                      color: var(--sib-ink-2); font-size: var(--sib-fs-xs); font-weight: 600;
                      text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
                      border-bottom: 2px solid var(--sib-border); }

/* ======================== formulaires ======================== */

.MyShop-champ { display: block; margin: var(--sib-4) 0 0; font-size: var(--sib-fs-xs);
             font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
             color: var(--sib-ink-3); }
.MyShop-champ input, .MyShop-champ select {
  display: block; width: 100%; margin-top: 6px;
  font: 400 var(--sib-fs-sm)/1.4 var(--sib-font);
  padding: 10px var(--sib-3); border-radius: var(--sib-r-sm);
  border: 1px solid var(--sib-border-fort); background: var(--sib-surface);
  color: var(--sib-ink); text-transform: none; letter-spacing: normal;
}
.MyShop-champ input:focus, .MyShop-champ select:focus { outline: var(--sib-focus); outline-offset: 1px; }
.MyShop-champ input::placeholder { color: var(--sib-ink-3); }
.MyShop-champ textarea { display: block; width: 100%; margin-top: 6px; font: 400 var(--sib-fs-sm)/1.45 var(--sib-font);
                      padding: 10px var(--sib-3); border-radius: var(--sib-r-sm); border: 1px solid var(--sib-border-fort);
                      background: var(--sib-surface); color: var(--sib-ink); text-transform: none; letter-spacing: normal; resize: vertical; }
.MyShop-champ textarea:focus { outline: var(--sib-focus); outline-offset: 1px; }
/* Une liste reglee (/Parametres) : une valeur par ligne, colonnes alignees. */
.MyShop-champ textarea.MyShop-liste { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--sib-fs-xs); white-space: pre; overflow-x: auto; }
.MyShop-listes { display: grid; gap: var(--sib-2) var(--sib-6); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .MyShop-listes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.MyShop-listes h3 { margin: var(--sib-3) 0 0; font-size: var(--sib-fs-h3); font-weight: var(--sib-fw-title); }
/* Sous-partie d'une carte (l'écriture, dans la carte de l'API REST). */
.MyShop-sous-titre { margin: var(--sib-4) 0 0; font-size: var(--sib-fs-h3); font-weight: var(--sib-fw-title); }
/* Les jours jamais livres (/Parametres, carte « Commande et livraison ») : une case par jour, a la suite. */
.MyShop-jours { display: flex; flex-wrap: wrap; gap: var(--sib-2) var(--sib-4); margin-top: var(--sib-2); }
.MyShop-duo { display: flex; gap: var(--sib-3); flex-wrap: wrap; }
.MyShop-duo .MyShop-champ { flex: 1; min-width: 120px; }
/* Un bouton aligne sur le bas du champ voisin (Comptes clients : « Chercher dans Divalto »). */
.MyShop-actions--bas { align-self: flex-end; margin: 0; }
.MyShop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sib-4);
               margin-top: var(--sib-5); }
.MyShop-note { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); line-height: var(--sib-lh-body); margin: 6px 0 0; }
.MyShop-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
            font-size: var(--sib-fs-xs); }
.MyShop-extrait { margin: 6px 0 0; padding: var(--sib-3); border-radius: var(--sib-r-sm);
               background: var(--sib-surface-2); border: 1px solid var(--sib-border);
               font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
               font-size: var(--sib-fs-xs); line-height: 1.45; white-space: pre-wrap;
               word-break: break-word; max-height: 220px; overflow: auto; }
.MyShop-defs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px var(--sib-5);
            margin: 0; font-size: var(--sib-fs-sm); }
.MyShop-defs dt { color: var(--sib-ink-3); font-size: var(--sib-fs-xs); text-transform: uppercase;
               letter-spacing: .05em; padding-top: 2px; }
/* Un chemin long (reglages, racine) se coupe : sans cela, /Etat debordait de l'ecran (29/10/2026). */
.MyShop-defs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ======================== accueil ======================== */

.MyShop-accueil { display: grid; gap: var(--sib-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .MyShop-accueil { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .MyShop-accueil { grid-template-columns: repeat(3, 1fr); } }

/* Une tuile cliquable se souleve de 2px au survol — le mouvement de la charte. */
.MyShop-tuile { display: flex; flex-direction: column; gap: var(--sib-3); text-decoration: none;
             color: inherit; }
.MyShop-tuile:hover { background: var(--sib-survol); transform: translateY(-2px); }
.MyShop-tuile--attente { opacity: .92; }
.MyShop-tuile h2 { margin: 0; font-size: var(--sib-fs-h3); font-weight: var(--sib-fw-title);
                color: var(--sib-ink); }
.MyShop-tuile p { margin: 0; font-size: var(--sib-fs-sm); line-height: var(--sib-lh-body);
               color: var(--sib-ink-2); }
.MyShop-tuile__pied { margin-top: auto; padding-top: var(--sib-3); }

/* La pastille de la charte : bleu-clair au repos, inversee au survol. */
.MyShop-pastille { width: 38px; height: 38px; border-radius: var(--sib-r-pill); flex-shrink: 0;
                display: inline-flex; align-items: center; justify-content: center;
                background: var(--sib-bleu-clair); color: var(--sib-bleu);
                font-weight: 700; font-size: var(--sib-fs-sm);
                transition: background-color .25s, color .25s; }
.MyShop-tuile:hover .MyShop-pastille { background: var(--sib-bleu); color: var(--sib-blanc); }

/* Un bouton primaire desactive ne doit pas garder l'orange : il signalerait une action
   possible qui ne l'est pas. Repris du CRM a la fusion (05/10/2026). */
.sib-btn--primary:disabled { background: var(--sib-surface-2); color: var(--sib-ink-3);
                             border-color: var(--sib-border); opacity: 1; }

/* Case a cocher sur une ligne, dans un formulaire de parametrage. */
.MyShop-case { display: flex; align-items: center; gap: var(--sib-2); margin-top: var(--sib-4);
            font-size: var(--sib-fs-sm); font-weight: 600; color: var(--sib-ink); }
.MyShop-case input { width: auto; margin: 0; }

/* Liste de manques sous une carte : lisible, sans crier. */
.MyShop-liste { margin: 6px 0 0; padding-left: 18px; font-size: var(--sib-fs-xs);
             color: var(--sib-ink-2); line-height: var(--sib-lh-body); }

/* ======================== portail : la commande (lot 2, 29/10/2026) ======================== */

/* Les quatre etapes. L'orange reste a la rubrique active du bandeau : l'etape courante est en bleu. */
.MyShop-etapes { display: flex; flex-wrap: wrap; gap: var(--sib-2); margin: 0; padding: 0; list-style: none; }
.MyShop-etapes li > a, .MyShop-etapes li > span { display: inline-flex; align-items: center; gap: 8px;
  padding: 6px var(--sib-4) 6px 6px; border-radius: var(--sib-r-pill); border: 1px solid var(--sib-border);
  font-size: var(--sib-fs-sm); font-weight: 600; color: var(--sib-ink-3); text-decoration: none; background: var(--sib-surface); }
.MyShop-etapes li > a:hover { background: var(--sib-survol); color: var(--sib-ink); }
.MyShop-etapes__n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--sib-surface-2); color: var(--sib-ink-2); font-size: var(--sib-fs-xs); }
.MyShop-etapes li.is-faite > a { color: var(--sib-ink-2); }
.MyShop-etapes li.is-active > span { background: var(--sib-surface); color: var(--sib-ink); border-color: var(--sib-ink); box-shadow: inset 0 0 0 1px var(--sib-ink); }
.MyShop-etapes li.is-active .MyShop-etapes__n { background: var(--sib-ink); color: var(--sib-surface); }

/* Le franco : une information, pas une alerte — le filet bleu, pas une couleur d'etat. */
.MyShop-franco { margin: 0; padding: var(--sib-3) var(--sib-4); border-radius: var(--sib-r-sm);
  background: var(--sib-surface); color: var(--sib-ink); font-size: var(--sib-fs-sm);
  border: 1px solid var(--sib-border); border-left: 4px solid var(--sib-ink); }

/* Le cadencier et le panier : une ligne par article, la quantite a droite, des champs de 32 px. */
.MyShop-recherche { display: flex; align-items: flex-end; gap: var(--sib-4); flex-wrap: wrap; margin-bottom: var(--sib-3); }
.MyShop-recherche .MyShop-champ { flex: 0 1 360px; margin: 0; }
.MyShop-saisie td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.MyShop-saisie td.num, .MyShop-saisie th.num { text-align: right; white-space: nowrap; }
.MyShop-qte { width: 84px; height: 32px; box-sizing: border-box; padding: 4px 8px; text-align: right;
  font: 400 var(--sib-fs-sm)/1 var(--sib-font); font-variant-numeric: tabular-nums;
  border: 1px solid var(--sib-border-fort); border-radius: 6px; background: var(--sib-surface); color: var(--sib-ink); }
.MyShop-qte:focus { outline: var(--sib-focus); outline-offset: 1px; }
.MyShop-unite { display: inline-block; min-width: 1.5em; margin-left: 4px; font-size: var(--sib-fs-xs); color: var(--sib-ink-3); text-align: left; }
.MyShop-saisie tr[hidden] { display: none; }
/* Telephone : la reference cede la place, la quantite reste entiere a l'ecran. */
@media (max-width: 600px) {
  .MyShop-saisie th:first-child, .MyShop-saisie td:first-child { display: none; }
  .MyShop-saisie th, .MyShop-saisie td { padding-left: 6px; padding-right: 6px; }
  .MyShop-qte { width: 64px; }
}

/* Les boutons de la commande restent en vue au bas de l'ecran, meme au milieu d'un long cadencier. */
.MyShop-barre-commande { position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: flex-end; gap: var(--sib-3); margin-top: var(--sib-3); padding: var(--sib-3) 0;
  background: var(--sib-surface); border-top: 1px solid var(--sib-border); }
.MyShop-barre-commande > span { margin-right: auto; font-size: var(--sib-fs-sm); color: var(--sib-ink-2); }

/* Livraison et recapitulatif : deux colonnes quand la place le permet. */
.MyShop-livraison, .MyShop-recap { display: grid; gap: var(--sib-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .MyShop-livraison, .MyShop-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Le carnet d'adresses : une carte par adresse, cochable a la commande. */
.MyShop-adresses { display: grid; gap: var(--sib-3); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: var(--sib-4); }
.sib-card__head + .MyShop-adresses { margin-top: 0; }
.MyShop-adresse { display: flex; flex-direction: column; gap: 2px; padding: var(--sib-3) var(--sib-4);
  border: 1px solid var(--sib-border-fort); border-radius: var(--sib-r-sm); font-size: var(--sib-fs-sm);
  color: var(--sib-ink-2); background: var(--sib-surface); position: relative; }
label.MyShop-adresse { cursor: pointer; padding-left: 40px; }
label.MyShop-adresse:hover { background: var(--sib-survol); }
.MyShop-adresse input[type=radio] { position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; margin: 0; accent-color: var(--sib-ink); }
/* --sib-ink plutot que --sib-bleu : le bleu nuit disparait sur le fond du theme sombre. */
.MyShop-adresse:has(input:checked) { border-color: var(--sib-ink); box-shadow: inset 0 0 0 1px var(--sib-ink); }
.MyShop-adresse__titre { font-weight: 700; color: var(--sib-ink); margin-bottom: 2px; }
.MyShop-adresse__actions { display: flex; gap: var(--sib-2); margin-top: var(--sib-2); }
.MyShop-adresse__actions form { margin: 0; }
.MyShop-adresse-fixe { display: flex; flex-direction: column; margin: 6px 0 0; font-size: var(--sib-fs-sm); }
.MyShop-ligne { display: block; }
.MyShop-message { white-space: pre-wrap; }

/* ======================== portail : mes commandes (lot 4, 29/10/2026) ======================== */

/* La periode : trois choix, celui en cours marque comme les etapes de la commande. */
.MyShop-periodes { display: flex; flex-wrap: wrap; gap: var(--sib-1); }
.MyShop-periodes a { padding: 5px var(--sib-3); border-radius: var(--sib-r-pill); border: 1px solid var(--sib-border);
  font-size: var(--sib-fs-xs); font-weight: 600; color: var(--sib-ink-2); text-decoration: none; background: var(--sib-surface); }
.MyShop-periodes a:hover { background: var(--sib-survol); color: var(--sib-ink); }
.MyShop-periodes a[aria-current="page"] { border-color: var(--sib-ink); color: var(--sib-ink); box-shadow: inset 0 0 0 1px var(--sib-ink); }
.MyShop-historique td { vertical-align: middle; }
.MyShop-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sib-3); margin-top: var(--sib-3); }

/* ======================== textes des e-mails (29/10/2026) ======================== */

/* Le texte a gauche, l'apercu a droite quand la place le permet. */
.MyShop-texte-courriel { display: grid; gap: var(--sib-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .MyShop-texte-courriel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.MyShop-variables { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }
.MyShop-variable { font: 600 var(--sib-fs-xs) ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--sib-ink);
  background: var(--sib-surface-2); border: 1px solid var(--sib-border); border-radius: var(--sib-r-sm); padding: 1px 6px; cursor: pointer; }
.MyShop-variable:hover { background: var(--sib-survol); }
/* L'apercu : la page de l'e-mail telle qu'un webmail la montre, sur fond blanc dans les deux themes. */
.MyShop-apercu { width: 100%; height: 440px; border: 1px solid var(--sib-border-fort); border-radius: var(--sib-r-sm); background: #fff; }

/* ======================== prix (PO-B1, 29/10/2026) ======================== */

/* « .sib-table td » aligne a gauche : la regle doit etre au moins aussi precise pour aligner les prix a droite. */
.MyShop-prix, .sib-table td.MyShop-prix { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.MyShop-prix--attente { color: var(--sib-ink-3); }
.MyShop-total { display: flex; justify-content: flex-end; gap: var(--sib-3); margin-top: var(--sib-3); font-size: var(--sib-fs-sm); }
.MyShop-total b { font-variant-numeric: tabular-nums; }