/* espace-client.css — espace client /<lang>/account et /<lang>/saved (14.10.2026, config/espace_client.inc.php).
   Maquette « Vous » d'Etsy (Micael) en clair : nom du client en haut, carrousel des dernières commandes (image à gauche), tuiles grises
   arrondies (icône, titre, sous-titre), liste à chevrons séparée par des traits. Titres en Paytone One (--font-bold, h1 du site).
   Pages du compte : menu latéral sur ordinateur (≥ 992 px), lien « ‹ Mon compte » sur mobile. Jetons de rupteur.css. */
.ec { --ec-encre: var(--color-ink, #181a1d); --ec-mut: #64748b; --ec-trait: rgba(15, 23, 42, .09); --ec-fond: #f3f3f6; --ec-fond-2: #e9e9ee;
  --ec-rouge: var(--color-primary, #f1283b); --ec-bord: 40px;
  --ec-ok: #16a34a; --ec-info: #2563eb; --ec-attente: #d97706; --ec-neutre: #64748b;
  max-width: 1180px; margin: 0 auto; color: var(--ec-encre); font-size: 16px; line-height: 1.45; }
.ec *, .ec *::before, .ec *::after { box-sizing: border-box; }
.ec i.icon { margin: 0; height: auto; width: auto; }
.ec a { text-decoration: none; }
.ec [hidden] { display: none !important; }
@media (max-width: 575.98px) { .ec { --ec-bord: 15px; } }

/* ------------------------------------------------------------------ coque : menu latéral + contenu */
.ec.is-page { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start; }
.ec.is-accueil { max-width: 1100px; }
.ec-corps { min-width: 0; }

.ec-cote { position: sticky; top: 110px; display: flex; flex-direction: column; }
.ec-moi { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: var(--ec-encre) !important; transition: background .15s; }
.ec-moi:hover { background: var(--ec-fond); }
.ec-moi-txt { display: flex; flex-direction: column; min-width: 0; }
.ec-moi-txt b { font-size: 16px; font-weight: 800; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-moi-txt small { color: var(--ec-mut); font-size: 13.5px; }
.ec-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ec-encre); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.ec-avatar.is-grand { width: 68px; height: 68px; font-size: 24px; }
.ec-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; }
.ec-nav.is-bas { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ec-trait); }
.ec-nav-l { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: 12px; color: var(--ec-encre) !important;
  font-size: 15.5px; font-weight: 600; transition: background .15s; }
.ec-nav-ico { flex: none; width: 22px; text-align: center; font-size: 18px; line-height: 1; color: #475569; }
.ec-nav-l:hover { background: var(--ec-fond); }
.ec-nav-l.is-actif { background: var(--ec-fond); font-weight: 800; }
.ec-nav-l.is-actif .ec-nav-ico { color: var(--ec-rouge); }
.ec-nav-l em, .ec-pastille { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--ec-rouge);
  color: #fff; font-size: 12px; font-style: normal; font-weight: 800; line-height: 1; }
.ec-nav-l em { margin-left: auto; }
/* mobile et tablette : pas de menu latéral, l'accueil du compte sert de menu (lien « ‹ Mon compte » en tête de page) */
@media (max-width: 991.98px) {
  .ec.is-page { display: block; }
  .ec .ec-cote { display: none; }
}

/* ------------------------------------------------------------------ en-tête des pages */
.ec-tete { margin: 0 0 22px; }
.ec-retour { display: none; align-items: center; gap: 8px; min-height: 40px; margin: -6px 0 6px -4px; padding: 0 4px; color: var(--ec-encre) !important;
  font-size: 15px; font-weight: 700; }
.ec-retour i.icon { font-size: 15px; }
@media (max-width: 991.98px) { .ec-retour { display: inline-flex; } }
.ec-tete-l { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; }
.ec .ec-h1, .ec .ec-nom { margin: 0; font-family: var(--font-bold), var(--font-primary); font-size: clamp(30px, 6.2vw, 40px); font-weight: normal; line-height: 1.08;
  letter-spacing: -.03em; color: var(--ec-encre); }
.ec .ec-h2 { margin: 0; font-family: var(--font-bold), var(--font-primary); font-size: clamp(22px, 4.8vw, 28px); font-weight: normal; line-height: 1.15;
  letter-spacing: -.03em; color: var(--ec-encre); }
.ec .ec-h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ boutons, onglets, état vide */
.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--ec-encre); color: #fff !important; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: filter .15s, background .15s; }
.ec-btn:hover { filter: brightness(1.12); }
.ec-btn.is-plein { background: var(--ec-rouge); }
.ec-btn.is-second { background: #fff; color: var(--ec-encre) !important; box-shadow: inset 0 0 0 1px #d4d4d8; }
.ec-btn.is-second:hover { filter: none; box-shadow: inset 0 0 0 1px var(--ec-encre); }
.ec-btn.is-petit { min-height: 38px; padding: 0 14px; font-size: 14.5px; }
.ec-btn:focus-visible, .ec-tuile:focus-visible, .ec-ligne:focus-visible, .ec-cmd:focus-visible, .ec-onglet:focus-visible, .ec-nav-l:focus-visible {
  outline: 2px solid var(--ec-encre); outline-offset: 2px; }
.ec-onglets { display: flex; gap: 8px; margin: 0 calc(-1 * var(--ec-bord)) 20px; padding: 0 var(--ec-bord) 2px; overflow-x: auto; scrollbar-width: none; }
.ec-onglets::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .ec-onglets { margin: 0 0 22px; padding: 0; } }
.ec-onglet { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 17px; border-radius: 999px; background: var(--ec-fond);
  color: var(--ec-encre) !important; font-size: 15px; font-weight: 700; white-space: nowrap; transition: background .15s; }
.ec-onglet:hover { background: var(--ec-fond-2); }
.ec-onglet.is-actif { background: var(--ec-encre); color: #fff !important; }
.ec-onglet em { font-style: normal; font-weight: 600; opacity: .7; }
.ec-vide { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; border-radius: 16px; background: var(--ec-fond); }
.ec-vide p { margin: 0; color: #334155; font-size: 16px; }
.ec-vide-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ec-encre); font-size: 20px; }
.ec-carte { padding: 20px 22px; border: 1px solid var(--ec-trait); border-radius: 16px; background: #fff; }
.ec-note { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--ec-fond); color: #334155; font-size: 15px; }
.ec-note > i.icon { flex: none; font-size: 18px; color: var(--ec-encre); }
.ec-note a { margin-left: auto; color: var(--ec-encre) !important; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ------------------------------------------------------------------ états des commandes */
.ec-etat { --ton: var(--ec-neutre); display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.ec-etat::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 18%, transparent); }
.ec-etat.is-ok { --ton: var(--ec-ok); } .ec-etat.is-info { --ton: var(--ec-info); } .ec-etat.is-attente { --ton: var(--ec-attente); } .ec-etat.is-neutre { --ton: var(--ec-neutre); }

/* ------------------------------------------------------------------ accueil */
.ec-hero { display: flex; align-items: center; gap: 16px; margin: 0 0 28px; }
.ec-hero-txt { min-width: 0; }
.ec-mail { margin: 6px 0 0; color: var(--ec-mut); font-size: 15px; overflow-wrap: anywhere; }
.ec-sec { margin: 0 0 26px; }
.ec-sec-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.ec-voir { flex: none; color: var(--ec-encre) !important; font-size: 15px; font-weight: 700; text-decoration: underline !important; text-underline-offset: 4px; }

/* carrousel : cartes de 86 % (la suivante dépasse), défilement par cran ; 2 cartes et demie sur tablette, 3 sur ordinateur */
.ec-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; margin: 0 calc(-1 * var(--ec-bord)); padding: 0 var(--ec-bord) 6px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ec-bord); scrollbar-width: none; }
.ec-rail::-webkit-scrollbar { display: none; }
@media (min-width: 600px) { .ec-rail { grid-auto-columns: 44%; } }
@media (min-width: 992px) { .ec-rail { grid-auto-columns: calc((100% - 24px) / 3); margin: 0; padding: 0 0 6px; scroll-padding: 0; } }
.ec-cmd { scroll-snap-align: start; display: flex; min-height: 172px; overflow: hidden; border-radius: 18px; background: var(--ec-fond); color: var(--ec-encre) !important;
  transition: background .15s; }
.ec-cmd:hover { background: var(--ec-fond-2); }
.ec-cmd-img { flex: 0 0 40%; display: grid; place-items: center; padding: 12px; background: #fff; border: 1px solid var(--ec-fond); border-radius: 18px 0 0 18px; color: #94a3b8; font-size: 34px; }
.ec-cmd-img picture { display: contents; }
.ec-cmd-img img { display: block; width: 100%; height: 100%; max-height: 150px; object-fit: contain; }
.ec-cmd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 15px 16px 14px; }
.ec-cmd-detail { color: #475569; font-size: 15px; line-height: 1.35; }
.ec-cmd-pied { margin-top: auto; padding-top: 10px; font-size: 15.5px; font-weight: 700; }
.ec-cmd-no { color: var(--ec-mut); font-size: 13.5px; }

/* tuiles : 2 colonnes, 3 dès la tablette */
.ec-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 26px; }
@media (min-width: 768px) { .ec-tuiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.ec-tuile { position: relative; display: flex; flex-direction: column; gap: 2px; min-height: 124px; padding: 16px 16px 15px; border-radius: 18px; background: var(--ec-fond);
  color: var(--ec-encre) !important; transition: background .15s, transform .15s; }
.ec-tuile:hover { background: var(--ec-fond-2); }
.ec-tuile:active { transform: scale(.985); }
.ec-tuile-ico { display: block; margin: 0 0 14px; font-size: 26px; line-height: 1; }
.ec-tuile b { font-size: 17.5px; font-weight: 700; line-height: 1.25; }
.ec-tuile span { color: var(--ec-mut); font-size: 14.5px; line-height: 1.3; }
.ec-tuile .ec-pastille { position: absolute; top: 14px; right: 14px; }
.ec-tuile.is-boost { color: #fff !important; box-shadow: 0 10px 24px -14px rgba(193, 18, 37, .7);
  background: linear-gradient(100deg, transparent 58%, rgba(255, 255, 255, .10) 58.4%, transparent 59.4%),
              linear-gradient(135deg, #f43a4c 0%, var(--ec-rouge) 42%, #b9142a 100%); }
.ec-tuile.is-boost:hover { filter: brightness(1.04); }
.ec-tuile.is-boost span { color: rgba(255, 255, 255, .92); font-weight: 600; }

/* liste à chevrons */
.ec-liste { display: flex; flex-direction: column; }
@media (min-width: 992px) { .ec-liste { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } }
.ec-ligne { display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 8px 2px; border-bottom: 1px solid var(--ec-trait); color: var(--ec-encre) !important;
  font-size: 17.5px; font-weight: 600; transition: background .15s; }
a.ec-ligne:hover { background: linear-gradient(90deg, transparent, var(--ec-fond) 12%, var(--ec-fond) 88%, transparent); }
.ec-ligne-ico { flex: none; width: 26px; text-align: center; font-size: 21px; line-height: 1; color: #334155; }
.ec-ligne-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.ec-ligne-txt small { color: var(--ec-mut); font-size: 14px; font-weight: 500; }
.ec-chevron { flex: none; color: #94a3b8; font-size: 15px; }
.ec-ligne.is-sortie { color: #b91c1c !important; }
.ec-ligne.is-sortie .ec-ligne-ico { color: #b91c1c; }
.ec-langues { display: flex; align-items: center; gap: 8px; }
.ec-langues img { height: 26px !important; width: auto; border-radius: 4px; }

/* 2FA d'un admin */
.ec-2fa { max-width: 420px; margin: 0 auto; text-align: center; }
.ec-2fa form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.ec-2fa-msg { margin: 0; color: #334155; font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .ec-tuile, .ec-cmd, .ec-btn, .ec-ligne, .ec-nav-l { transition: none; }
  .ec-tuile:active { transform: none; }
}

/* ------------------------------------------------------------------ « Mes commandes » (modules/account/order_list.php) */
.ec-cmds { display: flex; flex-direction: column; gap: 14px; }
.ec-cmds > .ec-onglets { margin-bottom: 6px; }
.ec-commande { overflow: hidden; border: 1px solid var(--ec-trait); border-radius: 18px; background: #fff; }
.ec-commande-tete { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--ec-encre) !important; transition: background .15s; }
.ec-commande-tete:hover { background: #fafafb; }
.ec-commande-etat { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ec-commande-etat > span { color: #475569; font-size: 15px; }
.ec-commande-art { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0 18px 14px; list-style: none; }
.ec-commande-art li { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ec-art-img { flex: none; display: grid; place-items: center; width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid var(--ec-trait); color: #94a3b8; }
.ec-art-img picture { display: contents; }
.ec-art-img img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ec-art-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ec-art-nom { font-size: 15px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-art-txt small { color: var(--ec-mut); font-size: 13.5px; }
.ec-commande-pied { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 13px 18px; border-top: 1px solid var(--ec-trait); background: #fafafb; }
.ec-commande-info { display: flex; flex-direction: column; min-width: 0; }
.ec-commande-info b { font-size: 16.5px; font-weight: 800; }
.ec-commande-info span { color: var(--ec-mut); font-size: 13.5px; }
.ec-commande-act { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 575.98px) {
  .ec-commande-act { width: 100%; }
  .ec-commande-act .ec-btn { flex: 1; }
}

/* ------------------------------------------------------------------ Favoris /<lang>/saved (includes/saved.php, assets/pages/saved.js) */
.ec.is-seul { max-width: 1180px; }
.ec-sous { margin: 10px 0 0; color: var(--ec-mut); font-size: 15px; }
/* véhicules : sur une ligne qui défile (accueil des favoris), en grille dans la vue Véhicules */
.ec-rail.is-veh { grid-auto-columns: 72%; }
@media (min-width: 600px) { .ec-rail.is-veh { grid-auto-columns: 40%; } }
@media (min-width: 992px) { .ec-rail.is-veh { grid-auto-columns: calc((100% - 36px) / 4); } }
.ec-veh-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
@media (max-width: 575.98px) { .ec-veh-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.ec-veh { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 18px; background: var(--ec-fond);
  transition: background .15s, opacity .15s; }
.ec-veh:hover { background: var(--ec-fond-2); }
.ec-veh.is-occupe { opacity: .55; pointer-events: none; }
.ec-veh.is-actuel { box-shadow: inset 0 0 0 2px var(--ec-encre); }
.ec-veh-media { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; padding: 10px 14px; background: #fff; border: 1px solid var(--ec-fond); border-radius: 18px 18px 0 0; }
.ec-veh-media picture { display: contents; }
.ec-veh-media img { width: 100%; height: 100%; object-fit: contain; }
.ec-veh-media img.is-logo { width: 46%; height: 70%; opacity: .9; }
.ec-veh-badge { position: absolute; left: 10px; bottom: 10px; padding: 4px 9px; border-radius: 999px; background: var(--ec-fond); color: #334155; font-size: 12.5px; font-weight: 700; }
.ec-veh-badge.is-actuel { background: var(--ec-encre); color: #fff; }
.ec-veh-coeur, .ec-veh-x { position: absolute; top: 9px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .94); color: #475569; font-size: 17px; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .10);
  transition: color .15s, transform .15s; -webkit-tap-highlight-color: transparent; }
.ec-veh-coeur { right: 9px; }
.ec-veh-coeur.is-on { color: var(--ec-rouge); }
.ec-veh-coeur .ec-c-on, .ec-veh-coeur.is-on .ec-c-off { display: none; }
.ec-veh-coeur.is-on .ec-c-on { display: inline-block; }
.ec-veh-coeur:active { transform: scale(.92); }
.ec-veh-x { right: 55px; font-size: 18px; }
@media (hover: hover) and (pointer: fine) { .ec-veh-coeur:hover, .ec-veh-x:hover { color: var(--ec-rouge); } }
.ec-veh-coeur:focus-visible, .ec-veh-x:focus-visible, .ec-veh-ajout:focus-visible { outline: 2px solid var(--ec-encre); outline-offset: 2px; }
.ec-veh-nom { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px 0; color: var(--ec-encre) !important; }
.ec-veh-nom b { font-size: 16.5px; font-weight: 800; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ec-veh-nom span { color: #475569; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-veh-meta { padding: 4px 14px 0; color: var(--ec-mut); font-size: 13.5px; }
.ec-veh-pieces { display: inline-flex; align-items: center; gap: 7px; margin: auto 0 0; padding: 12px 14px 14px; color: var(--ec-encre) !important; font-size: 14.5px; font-weight: 800; }
.ec-veh-pieces i.icon { font-size: 13px; transition: transform .15s; }
.ec-veh-pieces:hover i.icon { transform: translateX(3px); }
.ec-veh-ajout { scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 230px; padding: 18px;
  border: 2px dashed #cfd2d8; border-radius: 18px; background: transparent; color: var(--ec-encre); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.ec-veh-ajout:hover { border-color: var(--ec-encre); background: var(--ec-fond); }
.ec-veh-ajout-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ec-encre); color: #fff; font-size: 20px; }
.ec-veh-ajout b { font-size: 15.5px; font-weight: 800; }
.ec-veh-grille .ec-veh-ajout { min-height: 180px; }
/* articles favoris : grille des cartes de la recherche (recherche-propo.css), titre de section aligné sur l'espace client */
.ec .rp-fav-module { padding-bottom: 10px; }
.ec .rp-fav-n { margin-left: 4px; color: var(--ec-mut); font-family: var(--font-primary); font-size: .62em; font-weight: 700; letter-spacing: 0; }
.ec .rp-fav-grille { margin-top: 4px; }

/* ------------------------------------------------------------------ Mes avoirs (modules/account/avoirs.php) */
.ec-avoir-resume { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: 18px; background: #fff7e6; color: #7a4a00; }
.ec-avoir-resume-ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; font-size: 20px; }
.ec-avoir-resume b { display: block; font-family: var(--font-bold), var(--font-primary); font-size: 26px; font-weight: normal; letter-spacing: -.02em; line-height: 1.1; }
.ec-avoir-resume small { font-size: 15px; font-weight: 600; }
.ec-avoirs-liste { display: grid; gap: 12px; }
@media (min-width: 1200px) { .ec-avoirs-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ec-avoir { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--ec-fond); color: var(--ec-encre) !important; transition: background .15s; }
.ec-avoir:hover { background: var(--ec-fond-2); }
.ec-avoir-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ec-avoir-type { color: #475569; font-size: 15px; font-weight: 700; }
.ec-avoir-montant { font-family: var(--font-bold), var(--font-primary); font-size: 24px; font-weight: normal; letter-spacing: -.02em; white-space: nowrap; }
.ec-avoir-cmd, .ec-avoir-frais { color: var(--ec-mut); font-size: 14px; }
.ec-avoir-etat { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ec-trait); }
.ec-avoir-etat .ec-etat { font-size: 16px; }
.ec-avoir-etat > span { color: #475569; font-size: 14.5px; }

/* ------------------------------------------------------------------ gardiennages (modules/account/gardiennages.php) */
.ec-gard-grille { display: flex; flex-direction: column; gap: 10px; }
.ec-gard-carte { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: var(--ec-fond); flex-wrap: wrap; }
.ec-gard-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; font-size: 22px; }
.ec-gard-txt { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.ec-gard-txt b { font-size: 17px; font-weight: 800; line-height: 1.25; }
.ec-gard-txt span { color: #475569; font-size: 15px; }
.ec-gard-txt small { color: var(--ec-mut); font-size: 13.5px; }

/* ------------------------------------------------------------------ notifications (modules/account/notifications.php, lignes de push-app.css) */
.ec .rp-pn.ec-carte { max-width: 760px; }
/* à côté du menu latéral (≈ 880 px de contenu) : 2 colonnes de cartes au lieu de 3, titres lisibles */
@media (min-width: 1200px) { .ec.is-page .wz.pp-s.rp-fav-grille { grid-template-columns: repeat(2, 1fr); } }