/* ==========================================================================
   GNLF Consulting — jetons de design, version 1.0 (17/10/2026)
   Source unique de la charte. Chaque projet COPIE ce fichier, ou le
   référence, et branche son framework dessus (Tailwind, Filament,
   Bootstrap) : il n'écrit plus de valeur hexadécimale lui-même.

   Règles :
   - le clair est défini sur :root ; le sombre suit le SYSTÈME
     (prefers-color-scheme), sauf si le compte force [data-theme] ;
   - un produit ne change que les jetons --produit-* (DigiClinic seul,
     voir en bas) ; tout le reste est commun ;
   - contrastes vérifiés WCAG 2.1 : ratio indiqué en commentaire, sur le
     fond où le jeton est employé.
   ========================================================================== */

:root {
  /* ── Marque GNLF (fixes, ne changent PAS en sombre : logo, documents) ── */
  --gnlf-marine:        #14367E; /* lettres du logo. Blanc dessus 11,3:1 */
  --gnlf-marine-fonce:  #0F2A66; /* survol, appui. Blanc dessus 13,6:1 */
  --gnlf-nuit:          #0C2440; /* pieds de page, bandeaux sombres. Blanc dessus 15,7:1 */
  --gnlf-vert:          #5FB847; /* flèche du logo. DÉCOR SEULEMENT : 2,49:1 sur blanc */
  --gnlf-vert-texte:    #2F7A22; /* le vert quand il faut l'écrire. 5,35:1 sur blanc */
  --gnlf-bleu:          #3878B8; /* pistes du logo, illustrations, séries de graphiques */
  --gnlf-marine-pale:   #EEF2FA; /* aplats doux. Marine dessus 10,1:1 */

  /* ── Couleur du produit (marine GNLF par défaut) ── */
  --produit:            var(--gnlf-marine);
  --produit-fonce:      var(--gnlf-marine-fonce);
  --produit-doux:       var(--gnlf-marine-pale);
  --produit-sur:        #FFFFFF;   /* texte posé sur --produit */
  --produit-accent:     var(--gnlf-vert);

  /* ── Surfaces et texte ── */
  --fond:               #F4F7FB;   /* fond de page, gris teinté marine */
  --surface:            #FFFFFF;   /* cartes, tableaux, modales */
  --surface-2:          #F8FAFD;   /* en-têtes de tableau, zones secondaires */
  --texte:              #1F2A37;   /* corps. 14,5:1 sur blanc, 13,5:1 sur --fond */
  --texte-2:            #4A5868;   /* libellés, secondaire. 7,3:1 sur blanc */
  --texte-3:            #5B6B7C;   /* aide, métadonnées. 5,5:1 sur blanc (minimum pour du texte) */
  --filet:              #DDE3EC;   /* séparateurs (décoratif) */
  --bordure-champ:      #7D8A9C;   /* contour des champs. 3,5:1 (WCAG 1.4.11) */
  --lien:               var(--produit);
  --focus:              #3878B8;   /* anneau de focus, 2 px + 2 px d'écart */

  /* ── États (texte sur fond doux : tous AA) ── */
  --succes:             #027A48;  --succes-doux:  #ECFDF3;  /* 5,1:1 */
  --alerte:             #B54708;  --alerte-doux:  #FFFAEB;  /* 5,2:1 */
  --danger:             #B42318;  --danger-doux:  #FEF3F2;  /* 6,1:1 */
  --info:               #175CD3;  --info-doux:    #EFF8FF;  /* 5,6:1 */

  /* ── Typographie ── */
  --police-titre:  "Poppins", "Segoe UI", system-ui, sans-serif;
  --police-texte:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-vitrine:"Mulish", "Segoe UI", system-ui, sans-serif;     /* vitrine et marketing seulement */
  --police-arabe:  "Cairo", "Segoe UI", Tahoma, sans-serif;
  --police-mono:   "JetBrains Mono", Consolas, "Courier New", monospace;
  /* échelle (rem, base 16 px) : 12 · 14 · 16 · 18 · 22 · 28 · 36 */
  --t-xs: .75rem; --t-sm: .875rem; --t-md: 1rem; --t-lg: 1.125rem;
  --t-xl: 1.375rem; --t-2xl: 1.75rem; --t-3xl: 2.25rem;

  /* ── Formes et espacements ── */
  --rayon-sm: 6px;    /* badges, puces */
  --rayon:    8px;    /* boutons, champs */
  --rayon-lg: 12px;   /* cartes, modales */
  --rayon-xl: 16px;   /* photos de vitrine */
  --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;
  --ombre-1: 0 1px 2px rgba(12,36,64,.06), 0 1px 3px rgba(12,36,64,.08);
  --ombre-2: 0 4px 12px rgba(12,36,64,.10);
  --hauteur-controle: 40px;      /* boutons et champs ; 44 px sur mobile */
}

/* ── Sombre : suit le système, sauf choix explicite du compte ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --produit:        #8FB0F0;   /* fond de bouton ; texte --produit-sur 8,5:1 */
    --produit-fonce:  #B3CAF5;
    --produit-doux:   #1A2945;
    --produit-sur:    #0B1424;
    --produit-accent: #7ED36A;
    --fond:           #0B1424;
    --surface:        #131F35;
    --surface-2:      #1A2945;
    --texte:          #E6ECF5;   /* 13,9:1 sur surface */
    --texte-2:        #B6C2D3;
    --texte-3:        #9AA8BC;   /* 6,8:1 sur surface */
    --filet:          #263654;
    --bordure-champ:  #6B7D9C;   /* 3,95:1 */
    --focus:          #8FB0F0;
    --succes: #6CE9A6;  --succes-doux: #0E2A22;
    --alerte: #FDB022;  --alerte-doux: #2B2111;
    --danger: #F97066;  --danger-doux: #2E1618;
    --info:   #84CAFF;  --info-doux:   #10243F;
    --ombre-1: 0 1px 2px rgba(0,0,0,.4);
    --ombre-2: 0 4px 12px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --produit: #8FB0F0; --produit-fonce: #B3CAF5; --produit-doux: #1A2945;
  --produit-sur: #0B1424; --produit-accent: #7ED36A;
  --fond: #0B1424; --surface: #131F35; --surface-2: #1A2945;
  --texte: #E6ECF5; --texte-2: #B6C2D3; --texte-3: #9AA8BC;
  --filet: #263654; --bordure-champ: #6B7D9C; --focus: #8FB0F0;
  --succes: #6CE9A6; --succes-doux: #0E2A22;
  --alerte: #FDB022; --alerte-doux: #2B2111;
  --danger: #F97066; --danger-doux: #2E1618;
  --info:   #84CAFF; --info-doux:   #10243F;
  --ombre-1: 0 1px 2px rgba(0,0,0,.4);
  --ombre-2: 0 4px 12px rgba(0,0,0,.45);
  color-scheme: dark;
}

/* ── DigiClinic : la seule exception de couleur (décision du 17/10/2026) ── */
[data-produit="digiclinic"] {
  --produit:        #1A6E3C;   /* blanc dessus 6,3:1 */
  --produit-fonce:  #14532D;   /* blanc dessus 9,1:1 */
  --produit-doux:   #ECFDF3;   /* vert dessus 6,0:1 */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-produit="digiclinic"],
  :root:not([data-theme="light"])[data-produit="digiclinic"] {
    --produit: #5CC98A; --produit-fonce: #86D9A8; --produit-doux: #10291C;
  }
}
:root[data-theme="dark"] [data-produit="digiclinic"],
:root[data-theme="dark"][data-produit="digiclinic"] {
  --produit: #5CC98A; --produit-fonce: #86D9A8; --produit-doux: #10291C;
}

/* ── Impression : toujours clair ; tickets thermiques en noir pur ── */
@media print {
  :root { --fond: #FFFFFF; --surface: #FFFFFF; --texte: #000000; --texte-2: #000000; --texte-3: #333333; color-scheme: light; }
  .ticket, .ticket * { color: #000 !important; background: #fff !important; font-family: Arial, Helvetica, sans-serif !important; }
}

/* ==========================================================================
   Espace client Cauris Market : composants du lot H, posés sur les jetons GNLF.
   Aucune valeur de couleur ici : tout passe par gnlf-tokens.css, clair et sombre.
   Pensé d'abord pour un téléphone de 375 px sur réseau lent.
   ========================================================================== */

body:has(.ec) { background: var(--fond); color: var(--texte); }

.ec, .ec * { box-sizing: border-box; }
.ec { color: var(--texte); font-family: var(--police-texte); font-size: var(--t-md); line-height: 1.5; font-variant-numeric: tabular-nums; }
.ec a { color: var(--lien); text-underline-offset: .15em; }
.ec :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ec h1, .ec h2, .ec h3 { font-family: var(--police-titre); font-weight: 600; color: var(--texte); line-height: 1.25; margin: 0; }
.ec h1 { font-size: var(--t-xl); }
.ec h2 { font-size: var(--t-lg); }
.ec h3 { font-size: var(--t-md); }
.ec p { margin: 0; }
.ec img { max-width: 100%; }

/* ── Structure de Mon compte ── */
.ec-compte { min-width: 0; flex: 1 1 auto; width: 100%; display: grid; gap: var(--esp-4); padding: 0 var(--esp-4) var(--esp-6); }
.ec-entete { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--esp-3); }
.ec-aide { color: var(--texte-3); font-size: var(--t-sm); }
.ec-texte-2 { color: var(--texte-2); }
.ec-pile { display: grid; gap: var(--esp-3); }
.ec-rangee { display: flex; align-items: center; flex-wrap: wrap; gap: var(--esp-2); }
.ec-entre { display: flex; justify-content: space-between; gap: var(--esp-3); }
.ec-fort { font-weight: 600; }

/* ── Navigation du compte : barre latérale au bureau, puces défilantes au téléphone ── */
.ec-nav { display: none; }
.ec-nav-puces { display: flex; gap: var(--esp-2); overflow-x: auto; padding: var(--esp-2) var(--esp-4) var(--esp-3); scrollbar-width: none; }
.ec-nav-puces::-webkit-scrollbar { display: none; }
.ec-nav-puces a { flex: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--esp-4); border: 1px solid var(--filet); border-radius: 22px; background: var(--surface); color: var(--texte-2); font-size: var(--t-sm); text-decoration: none; }
.ec-nav-puces a[aria-current="page"] { background: var(--produit); border-color: var(--produit); color: var(--produit-sur); font-weight: 600; }

@media (min-width: 768px) {
    .ec-nav-puces { display: none; }
    .ec-nav { display: grid; gap: var(--esp-4); width: 280px; flex: none; }
    .ec-compte { padding: 0 0 var(--esp-6); }
    .ec h1 { font-size: var(--t-2xl); }
}

.ec-nav-profil { display: flex; align-items: center; gap: var(--esp-3); }
.ec-nav-avatar { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--produit-doux); color: var(--produit); font-family: var(--police-titre); font-weight: 600; font-size: var(--t-lg); }
.ec-nav-liste { display: grid; padding: var(--esp-2); gap: 2px; }
.ec-nav-liste a { min-height: 44px; display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-3); border-radius: var(--rayon); color: var(--texte-2); text-decoration: none; font-size: var(--t-sm); }
.ec-nav-liste a:hover { background: var(--surface-2); color: var(--texte); }
.ec-nav-liste a[aria-current="page"] { background: var(--produit-doux); color: var(--produit); font-weight: 600; }
.ec-nav-liste a span[class^="icon-"] { font-size: 20px; }
.ec-deconnexion { background: none; border: 0; cursor: pointer; width: 100%; min-height: 44px; display: flex; align-items: center; gap: var(--esp-3); padding: 0 var(--esp-3); border-radius: var(--rayon); color: var(--texte-2); font: inherit; font-size: var(--t-sm); }
.ec-deconnexion:hover { background: var(--surface-2); color: var(--texte); }

/* ── Cartes ── */
.ec-carte { background: var(--surface); border-radius: var(--rayon-lg); box-shadow: var(--ombre-1); padding: var(--esp-4); }
.ec-carte > * + * { margin-top: var(--esp-3); }
.ec-carte-titre { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); }
.ec-separe { border-top: 1px solid var(--filet); padding-top: var(--esp-3); }

/* ── Raccourcis par statut ── */
.ec-raccourcis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--esp-1); }
.ec-raccourci { display: grid; justify-items: center; gap: var(--esp-1); padding: var(--esp-2) 2px; min-height: 44px; border-radius: var(--rayon); color: var(--texte-2) !important; text-decoration: none; text-align: center; font-size: var(--t-xs); line-height: 1.25; }
.ec-raccourci:hover { background: var(--surface-2); }
.ec-raccourci b { font-family: var(--police-titre); font-size: var(--t-xl); line-height: 1; color: var(--texte-3); font-weight: 600; }
.ec-raccourci.est-actif b { color: var(--produit); }

.ec-tuiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-3); }
.ec-tuile { background: var(--surface); border-radius: var(--rayon-lg); box-shadow: var(--ombre-1); padding: var(--esp-3); color: var(--texte-2) !important; text-decoration: none; font-size: var(--t-sm); display: grid; gap: 2px; min-height: 44px; }
.ec-tuile b { font-family: var(--police-titre); font-size: var(--t-lg); color: var(--texte); }
.ec-tuile:hover { box-shadow: var(--ombre-2); }

/* ── Boutons : un seul principal par vue ── */
.ec-bouton { display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2); min-height: 44px; padding: 0 var(--esp-4); border-radius: var(--rayon); border: 1px solid var(--bordure-champ); background: var(--surface); color: var(--texte) !important; font: inherit; font-size: var(--t-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color 150ms; }
.ec-bouton:hover { background: var(--surface-2); }
.ec-bouton[disabled] { opacity: .6; cursor: not-allowed; }
.ec-bouton--principal { background: var(--produit); border-color: var(--produit); color: var(--produit-sur) !important; }
.ec-bouton--principal:hover { background: var(--produit-fonce); border-color: var(--produit-fonce); }
.ec-bouton--danger { color: var(--danger) !important; border-color: var(--danger); }
.ec-bouton--large { width: 100%; }
.ec-lien { background: none; border: 0; padding: 0; cursor: pointer; color: var(--lien); font: inherit; text-decoration: underline; text-underline-offset: .15em; }

/* ── Formulaires ── */
.ec-formulaire { display: grid; gap: var(--esp-4); }
.ec-deux { display: grid; gap: var(--esp-4); }
@media (min-width: 600px) { .ec-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ec-champ { display: grid; gap: var(--esp-1); min-width: 0; }
.ec-champ label, .ec-libelle { font-size: var(--t-sm); font-weight: 600; color: var(--texte-2); }
.ec-champ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .ec-champ select, .ec-champ textarea { width: 100%; min-height: 44px; padding: var(--esp-2) var(--esp-3); border: 1px solid var(--bordure-champ); border-radius: var(--rayon); background: var(--surface); color: var(--texte); font: inherit; font-size: var(--t-md); }
.ec-champ textarea { min-height: 112px; resize: vertical; }
.ec-champ input::placeholder, .ec-champ textarea::placeholder { color: var(--texte-3); }
.ec-tel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--esp-2); }
.ec-erreur { color: var(--danger); font-size: var(--t-sm); }
.ec-coche { display: flex; align-items: flex-start; gap: var(--esp-2); min-height: 44px; padding-top: var(--esp-2); font-size: var(--t-sm); color: var(--texte-2); cursor: pointer; }
.ec-coche input { width: 20px; height: 20px; flex: none; accent-color: var(--produit); }
.ec-alerte { padding: var(--esp-3); border-radius: var(--rayon); background: var(--info-doux); color: var(--info); font-size: var(--t-sm); }
.ec-alerte--danger { background: var(--danger-doux); color: var(--danger); }
.ec-alerte--succes { background: var(--succes-doux); color: var(--succes); }

/* Onglets e-mail / téléphone, sans script : un bouton radio pilote le panneau affiché. */
.ec-onglets-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ec-onglets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface-2); border-radius: var(--rayon); padding: var(--esp-1); }
.ec-onglets label { min-height: 40px; display: grid; place-items: center; border-radius: var(--rayon-sm); cursor: pointer; color: var(--texte-2); font-size: var(--t-sm); font-weight: 600; }
.ec-panneau { display: none; }
#ec-mode-email:checked ~ .ec-onglets label[for="ec-mode-email"],
#ec-mode-telephone:checked ~ .ec-onglets label[for="ec-mode-telephone"] { background: var(--surface); color: var(--produit); box-shadow: var(--ombre-1); }
#ec-mode-email:focus-visible ~ .ec-onglets label[for="ec-mode-email"],
#ec-mode-telephone:focus-visible ~ .ec-onglets label[for="ec-mode-telephone"] { outline: 2px solid var(--focus); outline-offset: 2px; }
#ec-mode-email:checked ~ .ec-panneau--email,
#ec-mode-telephone:checked ~ .ec-panneau--telephone { display: grid; gap: var(--esp-1); }

/* ── Pages de connexion ── */
.ec-auth { max-width: 460px; margin: 0 auto; padding: var(--esp-5) var(--esp-4) var(--esp-6); display: grid; gap: var(--esp-4); }
.ec-auth-logo { display: flex; justify-content: center; }
.ec-signature { text-align: center; color: var(--texte-3); font-size: var(--t-xs); }

/* ── Badges : la couleur est toujours doublée du mot ── */
.ec-badge { display: inline-flex; align-items: center; padding: 2px var(--esp-2); border-radius: var(--rayon-sm); font-size: var(--t-xs); font-weight: 600; background: var(--surface-2); color: var(--texte-2); white-space: nowrap; }
.ec-badge--succes { background: var(--succes-doux); color: var(--succes); }
.ec-badge--alerte { background: var(--alerte-doux); color: var(--alerte); }
.ec-badge--danger { background: var(--danger-doux); color: var(--danger); }
.ec-badge--info { background: var(--info-doux); color: var(--info); }

/* ── Filtres par statut ── */
.ec-filtres { display: flex; gap: var(--esp-2); overflow-x: auto; margin: 0 calc(var(--esp-4) * -1); padding: 2px var(--esp-4); scrollbar-width: none; }
.ec-filtres::-webkit-scrollbar { display: none; }
.ec-filtres a { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: var(--esp-1); padding: 0 var(--esp-3); border-radius: var(--rayon); background: var(--surface); box-shadow: var(--ombre-1); color: var(--texte-2); text-decoration: none; font-size: var(--t-sm); }
.ec-filtres a[aria-current="page"] { background: var(--produit); color: var(--produit-sur); font-weight: 600; }
@media (min-width: 768px) { .ec-filtres { margin: 0; padding: 2px; flex-wrap: wrap; } }

/* ── Lignes d'articles ── */
.ec-article { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--esp-3); align-items: start; }
.ec-article img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--rayon); background: var(--surface-2); }
.ec-article-nom { font-size: var(--t-sm); font-weight: 600; color: var(--texte); overflow-wrap: anywhere; }
.ec-vignettes { display: flex; gap: var(--esp-2); overflow: hidden; }
.ec-vignettes img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--rayon); background: var(--surface-2); flex: none; }
.ec-carte-lien { color: inherit !important; text-decoration: none; display: block; }
.ec-vendeur { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); flex-wrap: wrap; font-weight: 600; font-size: var(--t-sm); }
.ec-montant { font-weight: 600; white-space: nowrap; }

/* ── Frise de commande : verticale au téléphone, horizontale au bureau ── */
.ec-frise { list-style: none; margin: 0; padding: 0; display: grid; }
.ec-frise li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--esp-3); padding-bottom: var(--esp-3); font-size: var(--t-sm); color: var(--texte-3); }
.ec-frise li:last-child { padding-bottom: 0; }
.ec-frise li::before { content: ""; position: absolute; left: 11px; top: 24px; bottom: 0; width: 2px; background: var(--filet); }
.ec-frise li:last-child::before { display: none; }
.ec-frise-point { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bordure-champ); background: var(--surface); display: grid; place-items: center; font-size: 13px; font-weight: 700; z-index: 1; }
.ec-frise li.est-atteinte { color: var(--texte); }
.ec-frise li.est-atteinte::before { background: var(--produit); }
.ec-frise li.est-atteinte .ec-frise-point { background: var(--produit); border-color: var(--produit); color: var(--produit-sur); }
.ec-frise li.est-courante { font-weight: 600; }
.ec-frise small { display: block; color: var(--texte-3); font-size: var(--t-xs); font-weight: 400; }
@media (min-width: 768px) {
    .ec-frise { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .ec-frise li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--esp-2); padding: 0 var(--esp-1); }
    .ec-frise li::before { left: 50%; right: -50%; top: 11px; bottom: auto; width: auto; height: 2px; }
}

/* ── Totaux ── */
.ec-totaux { display: grid; gap: var(--esp-2); font-size: var(--t-sm); }
.ec-totaux > div { display: flex; justify-content: space-between; gap: var(--esp-3); }
.ec-total { font-weight: 700; font-size: var(--t-md); border-top: 1px solid var(--filet); padding-top: var(--esp-2); }

/* ── Actions de commande ── */
.ec-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-2); }
.ec-actions form { display: contents; }

/* ── Étoiles : choix par boutons radio, sans script ── */
.ec-etoiles-choix { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: var(--esp-1); border: 0; padding: 0; margin: 0; }
.ec-etoiles-choix input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ec-etoiles-choix label { width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--bordure-champ); }
.ec-etoiles-choix svg { width: 32px; height: 32px; fill: currentColor; }
.ec-etoiles-choix input:checked ~ label, .ec-etoiles-choix label:hover, .ec-etoiles-choix label:hover ~ label { color: var(--produit); }
.ec-etoiles-choix input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--rayon-sm); }
.ec-etoiles { display: inline-flex; gap: 1px; color: var(--produit); }
.ec-etoiles svg { width: 16px; height: 16px; fill: currentColor; }
.ec-etoiles svg.est-vide { color: var(--filet); }
.ec-photos { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.ec-photos img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--rayon); }

/* ── État vide et squelettes ── */
.ec-vide { text-align: center; padding: var(--esp-6) var(--esp-4); color: var(--texte-2); display: grid; gap: var(--esp-3); justify-items: center; }
.ec-squelette { display: block; border-radius: var(--rayon); background: var(--surface-2); background-image: linear-gradient(90deg, transparent, var(--filet), transparent); background-size: 200% 100%; animation: ec-luire 1.4s linear infinite; min-height: 16px; }
.ec-squelette--carte { min-height: 112px; border-radius: var(--rayon-lg); }
@keyframes ec-luire { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ec-squelette { animation: none; } .ec-bouton { transition: none; } }

/* ── Pagination ── */
.ec-pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-3); }

/* ── Coupons ── */
.ec-coupon { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-3); align-items: center; border: 1px dashed var(--bordure-champ); border-radius: var(--rayon-lg); padding: var(--esp-3); background: var(--surface); }
.ec-coupon-remise { font-family: var(--police-titre); font-weight: 600; font-size: var(--t-lg); color: var(--produit); }
.ec-code { font-family: var(--police-mono); font-weight: 600; letter-spacing: .04em; }

/* ── Commande : page en deux colonnes au bureau, barre fixe au téléphone ── */
.ec-commander { display: grid; gap: var(--esp-4); padding-bottom: 96px; }
@media (min-width: 1024px) {
    .ec-commander { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; gap: var(--esp-5); padding-bottom: var(--esp-6); }
    .ec-commander-recap { position: sticky; top: var(--esp-4); }
}
.ec-barre-achat { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: center; gap: var(--esp-3); padding: var(--esp-2) var(--esp-4) calc(var(--esp-2) + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -2px 8px rgba(12, 36, 64, .16); }
.ec-barre-achat-total { font-weight: 700; white-space: nowrap; }
@media (min-width: 1024px) {
    .ec-barre-achat { position: static; display: grid; grid-template-columns: minmax(0, 1fr); padding: 0; background: none; box-shadow: none; }
    .ec-barre-achat-total { display: none; }
}
.ec-etapes-suite { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-3); }
.ec-etapes-suite li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--esp-3); font-size: var(--t-sm); }
.ec-etapes-suite li > span { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--produit-doux); color: var(--produit); font-weight: 700; }
.ec-confirmation { max-width: 560px; margin: 0 auto; padding: var(--esp-5) var(--esp-4) var(--esp-6); display: grid; gap: var(--esp-4); }
.ec-coche-ok { width: 56px; height: 56px; border-radius: 50%; background: var(--succes-doux); color: var(--succes); display: grid; place-items: center; margin: 0 auto; }

@media print {
    .ec-nav, .ec-nav-puces, .ec-actions, .ec-barre-achat { display: none !important; }
}

@media (min-width: 768px) { .ec-seulement-mobile { display: none !important; } }

/* Formulaires du checkout (Bagisto, lot Livraison) : cible de 44 px au doigt. */
@media (max-width: 767px) {
    .ec-commander input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .ec-commander select { min-height: 44px; }
}

/* Liens isolés : cible de 44 px au doigt. */
.ec-carte-titre > a, .ec-seulement-mobile > a, .ec-seulement-mobile .ec-lien { display: inline-flex; align-items: center; min-height: 44px; }
.ec-seulement-mobile { gap: 0; }
.ec-auth a.ec-aide { display: inline-flex; align-items: center; min-height: 44px; }