/* ══════════════════════════════════════════════════════════════════════════
   W3CAM — Panneau lateral « Mon compte » (#offcanvas_account)
   Refonte du 2026-08-26. Gabarit :
   /www/themes/PRS028/templates/_partials/_partials/offcanvas-modal.tpl
   Charge par _partials/head.tpl du theme (present sur TOUTES les pages, y
   compris les fiches produit ou head.tpl d'ets_seo n'est pas injecte).

   ⛔ Tout est borne a #offcanvas_account : la classe
   .modal-dialog__offcanvas--right est PARTAGEE avec le panier volant
   (#offcanvas_sidecart), une regle non bornee le deformerait aussi.
   ⛔ Les variables sont declarees sur #offcanvas_account et ne servent qu'a
   ses descendants — jamais de var() dont la declaration vit ailleurs.
   ⛔ La largeur native du tiroir (400px bureau/tablette, 326px mobile) est
   VOLONTAIREMENT conservee : la changer desaccorderait ce panneau du panier
   volant, qui partage le meme gabarit de tiroir.
   ══════════════════════════════════════════════════════════════════════════ */

#offcanvas_account {
  /* Padding reel du .modal-body du theme : sert aux bleeds negatifs pour que
     l'en-tete et le pied touchent les bords du tiroir. */
  --ac-pad: 13px;
  --ac-orange: #ff6501;
  --ac-orange-voile: rgba(255, 101, 1, .14);
  --ac-orange-pale: #fff4ec;
  --ac-orange-filet: #ffd9bf;
  --ac-titre: #666666;
  --ac-corps: #5f646b;
  --ac-discret: #85898f;
  --ac-filet: #e7e9eb;
  --ac-filet-fort: #d7dade;
  --ac-creux: #fafbfc;
}

#offcanvas_account .w3c-ac,
#offcanvas_account .w3c-ac * { box-sizing: border-box; }

/* ── En-tete d'identite ─────────────────────────────────────────────────── */
#offcanvas_account .w3c-ac-tete {
  display: flex; align-items: center; gap: 14px;
  margin: calc(-1 * var(--ac-pad)) calc(-1 * var(--ac-pad)) 4px;
  padding: 26px 22px 22px;
  background: var(--ac-orange-pale);
  border-bottom: 1px solid var(--ac-orange-filet);
}
#offcanvas_account .w3c-ac-avatar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--ac-orange-filet);
  color: var(--ac-orange);
  font-size: 17px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase;
}
#offcanvas_account .w3c-ac-ident { min-width: 0; }
#offcanvas_account .w3c-ac-nom {
  margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25;
  color: var(--ac-titre);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#offcanvas_account .w3c-ac-voir {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 2px; font-size: 13px; font-weight: 500;
  color: var(--ac-orange); text-decoration: none;
}
#offcanvas_account .w3c-ac-voir:hover,
#offcanvas_account .w3c-ac-voir:focus { color: var(--ac-orange); text-decoration: underline; }
#offcanvas_account .w3c-ac-voir svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* ── Groupes ────────────────────────────────────────────────────────────── */
#offcanvas_account .w3c-ac-groupe + .w3c-ac-groupe {
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ac-filet);
}
#offcanvas_account .w3c-ac-groupe-titre {
  margin: 0; padding: 12px 10px 6px;
  font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--ac-discret);
}

/* ── Entrees ────────────────────────────────────────────────────────────── */
#offcanvas_account .w3c-ac-entree {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 9px 10px; border-radius: 10px;
  color: var(--ac-corps); text-decoration: none;
  transition: background .18s ease;
}
#offcanvas_account .w3c-ac-entree:hover,
#offcanvas_account .w3c-ac-entree:focus {
  background: var(--ac-orange-pale) !important;
  color: var(--ac-corps); text-decoration: none;
}
#offcanvas_account .w3c-ac-entree:focus-visible {
  outline: 2px solid var(--ac-orange); outline-offset: -2px;
}
#offcanvas_account .w3c-ac-ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--ac-orange-pale); color: var(--ac-orange);
}
#offcanvas_account .w3c-ac-ico svg { width: 17px; height: 17px; }
#offcanvas_account .w3c-ac-libelle {
  flex: 1 1 auto; min-width: 0;
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--ac-titre);
}
#offcanvas_account .w3c-ac-chevron {
  flex: 0 0 auto; width: 15px; height: 15px; color: #b9bdc2;
}

/* ── Pied : la deconnexion reste visible sans defiler ───────────────────── */
#offcanvas_account .w3c-ac-pied {
  position: sticky; bottom: calc(-1 * var(--ac-pad)); z-index: 1;
  margin: 10px calc(-1 * var(--ac-pad)) calc(-1 * var(--ac-pad));
  padding: 14px 22px calc(14px + var(--ac-pad));
  background: #fff;
  border-top: 1px solid var(--ac-filet);
}
/* CHARTE BOUTON W3CAM revision 2, referenece `.favorite.styled` : fantome
   blanc, filet 1,5px #ff6501, radius 8, 15px/600, sans majuscules, survol
   rgba(255,101,1,.14).
   ⛔ Les !important sont OBLIGATOIRES : la classe .logout porte des styles du
   theme, et une regle globale de niveau racine reformate fond, texte, bordure
   et radius de tous les boutons — monter la specificite ne suffit pas. */
#offcanvas_account .w3c-ac-deco {
  display: flex !important; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 46px; margin: 0 !important; padding: 13px 24px !important;
  border: 1.5px solid var(--ac-orange) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ac-orange) !important;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none !important; text-transform: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#offcanvas_account .w3c-ac-deco:hover,
#offcanvas_account .w3c-ac-deco:focus {
  background: var(--ac-orange-voile) !important;
  border-color: var(--ac-orange) !important;
  color: var(--ac-orange) !important;
}
#offcanvas_account .w3c-ac-deco:focus-visible {
  outline: 2px solid var(--ac-orange); outline-offset: 2px;
}
#offcanvas_account .w3c-ac-deco svg { flex: 0 0 auto; width: 16px; height: 16px; }
#offcanvas_account .w3c-ac-deco span { font: inherit; color: inherit; }

/* ── Tablette : le tiroir garde 400px, on resserre juste les marges ─────── */
@media (max-width: 1024px) {
  #offcanvas_account .w3c-ac-tete { padding: 24px 20px 20px; }
  #offcanvas_account .w3c-ac-pied { padding-left: 20px; padding-right: 20px; }
}

/* ── Mobile : tiroir plus etroit (326px), on gagne de la place ──────────── */
@media (max-width: 767px) {
  #offcanvas_account .w3c-ac-tete { gap: 12px; padding: 22px 18px 18px; }
  #offcanvas_account .w3c-ac-avatar { width: 46px; height: 46px; font-size: 16px; }
  #offcanvas_account .w3c-ac-nom { font-size: 16px; }
  #offcanvas_account .w3c-ac-entree { gap: 11px; padding: 9px 8px; }
  #offcanvas_account .w3c-ac-libelle { font-size: 14.5px; }
  #offcanvas_account .w3c-ac-pied { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #offcanvas_account .w3c-ac-entree,
  #offcanvas_account .w3c-ac-deco { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Colonne gauche vide — 2026-08-26
   Sur les pages sans arborescence de categories (recherche, pages du compte
   client comme « Vos devis »), #left-column restait affichee alors qu'elle ne
   contenait plus rien : 300 px de large et toute la hauteur de la page voles
   au contenu, ramene a 900 px sur un ecran de 1366 px. Le gabarit
   ps_categorytree ne rend plus de cadre vide ; il reste a retirer la colonne
   elle-meme, qui appartient au layout du theme.
   `:has()` est supporte par les navigateurs cibles (verifie en production) ;
   les navigateurs qui ne le connaissent pas ignorent simplement ces deux
   regles et retrouvent le comportement actuel — aucune degradation.
   ⚠ La condition porte sur l'ABSENCE D'ENFANT, pas sur :empty : la colonne
   contient des blancs de gabarit, qui font echouer :empty.
   ══════════════════════════════════════════════════════════════════════════ */
#left-column:not(:has(*)) { display: none !important; }
#left-column:not(:has(*)) + #content-wrapper {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   ESPACE CLIENT — page /mon-compte (2026-08-26)
   Gabarit : themes/PRS028/templates/customer/my-account.tpl
   ⛔ Borne a `.ec` (et `#my-account` pour les regles de page) : ces classes
   n'existent que sur cette page, aucun risque de fuite ailleurs.
   ══════════════════════════════════════════════════════════════════════════ */

.ec {
  --ec-orange: #ff6501;
  --ec-orange-voile: rgba(255, 101, 1, .14);
  --ec-orange-pale: #fff4ec;
  --ec-orange-filet: #ffd9bf;
  --ec-titre: #666666;
  --ec-corps: #5f646b;
  --ec-discret: #85898f;
  --ec-filet: #e7e9eb;
  --ec-filet-fort: #d7dade;
  --ec-creux: #fafbfc;
  color: var(--ec-corps);
  font-size: 15px;
  line-height: 1.55;
}
.ec, .ec *, .ec *::before, .ec *::after { box-sizing: border-box; }

/* Le titre natif « Bienvenu … » ferait doublon avec l'en-tete d'identite. */
#my-account .page-header { display: none; }

/* ── En-tete d'identite ─────────────────────────────────────────────────── */
.ec-tete {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 26px 28px; margin: 0 0 26px;
  background: var(--ec-orange-pale);
  border: 1px solid var(--ec-orange-filet); border-radius: 16px;
}
.ec-tete::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--ec-orange), #cc4e00);
}
.ec-avatar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--ec-orange-filet);
  color: var(--ec-orange);
  font-size: 19px; font-weight: 600; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase;
}
.ec-ident { flex: 1 1 240px; min-width: 0; }
.ec-bonjour { margin: 0 0 2px; font-size: 13px; font-weight: 500; color: var(--ec-discret); }
.ec-nom {
  margin: 0; font-size: 25px; font-weight: 600; line-height: 1.2;
  color: var(--ec-titre); letter-spacing: -.01em;
}
.ec-mail { margin: 3px 0 0; font-size: 14px; color: var(--ec-corps); word-break: break-word; }
.ec-tete-actions { flex: 0 0 auto; }

/* CHARTE BOUTON W3CAM revision 2 — !important obligatoire (regle globale du
   theme sur tous les boutons et liens .btn). */
.ec-btn {
  display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px !important;
  border: 1.5px solid var(--ec-orange) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--ec-orange) !important;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none !important; text-transform: none !important;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ec-btn:hover, .ec-btn:focus {
  background: var(--ec-orange-voile) !important;
  border-color: var(--ec-orange) !important;
  color: var(--ec-orange) !important;
}
.ec-btn:focus-visible { outline: 2px solid var(--ec-orange); outline-offset: 2px; }
.ec-btn svg { flex: 0 0 auto; width: 16px; height: 16px; }

/* ── Raccourcis en vedette ─────────────────────────────────────────────── */
.ec-vedettes {
  display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 30px;
}
.ec-vedette {
  display: flex; align-items: center; gap: 15px;
  padding: 20px 22px; border-radius: 14px;
  background: #fff; border: 1px solid var(--ec-filet);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  color: var(--ec-corps); text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.ec-vedette:hover, .ec-vedette:focus {
  border-color: var(--ec-orange-filet); color: var(--ec-corps); text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 24px rgba(16, 24, 40, .06);
  transform: translateY(-2px);
}
.ec-vedette:focus-visible { outline: 2px solid var(--ec-orange); outline-offset: 2px; }
.ec-vedette-ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--ec-orange-pale); color: var(--ec-orange);
}
.ec-vedette-ico svg { width: 22px; height: 22px; }
.ec-vedette h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ec-titre); }
.ec-vedette p { margin: 1px 0 0; font-size: 13px; color: var(--ec-discret); }

/* ── Groupes et tuiles ─────────────────────────────────────────────────── */
.ec-groupe { margin-bottom: 28px; }
.ec-groupe-titre {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: 13px; font-weight: 600; color: var(--ec-discret);
  text-transform: none; letter-spacing: normal;
}
.ec-groupe-titre::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--ec-filet); }

.ec-tuiles { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ec-tuiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ec-tuile {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 18px 18px 18px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--ec-filet);
  color: var(--ec-corps); text-decoration: none;
  transition: background .18s ease, border-color .18s ease;
}
.ec-tuile:hover, .ec-tuile:focus {
  background: var(--ec-orange-pale); border-color: var(--ec-orange-filet);
  color: var(--ec-corps); text-decoration: none;
}
.ec-tuile:focus-visible { outline: 2px solid var(--ec-orange); outline-offset: 2px; }
.ec-tuile-ico {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ec-orange-pale); color: var(--ec-orange);
}
.ec-tuile-ico svg { width: 18px; height: 18px; }
.ec-tuile-txt { min-width: 0; }
.ec-tuile h4 { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ec-titre); }
.ec-tuile p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ec-discret); }

/* ── Liens injectes par les modules (hook displayCustomerAccount) ────────
   Leur HTML appartient aux modules : classes Bootstrap `col-*`, un
   <span class="link-item"> et une icone material-icons parfois VIDE.
   On neutralise la grille Bootstrap et on leur redonne l'allure d'une tuile. */
.ec-modules { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ec-modules > a {
  display: flex !important; align-items: center; gap: 13px;
  flex: none !important; width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 18px 18px 18px 16px !important;
  border-radius: 12px; background: #fff; border: 1px solid var(--ec-filet);
  color: var(--ec-corps); text-decoration: none;
  font-size: 14.5px; font-weight: 600; line-height: 1.3;
  transition: background .18s ease, border-color .18s ease;
}
.ec-modules > a:hover, .ec-modules > a:focus {
  background: var(--ec-orange-pale); border-color: var(--ec-orange-filet);
  color: var(--ec-corps); text-decoration: none;
}
.ec-modules > a:focus-visible { outline: 2px solid var(--ec-orange); outline-offset: 2px; }
.ec-modules .link-item {
  display: flex; align-items: center; gap: 13px;
  font-size: 14.5px; font-weight: 600; color: var(--ec-titre);
}
.ec-modules .link-item i,
.ec-modules .link-item .icon_svg {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ec-orange-pale); color: var(--ec-orange);
  font-size: 19px;
}
.ec-modules .link-item .icon_svg svg { width: 18px; height: 18px; }
/* Plusieurs modules laissent l'icone vide : pas de pastille fantome. */
.ec-modules .link-item i:empty { display: none; }
/* Les devis sont remontes en vedette : on masque le doublon du module.
   Cible par href, le module reutilisant id="discounts-link" (deja pris). */
.ec-modules > a[href*="opartdevis/listquotation"] { display: none !important; }

/* ── Encart d'aide ─────────────────────────────────────────────────────── */
.ec-aide {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 18px;
  padding: 22px 26px; border-radius: 14px;
  background: #fff; border: 1px solid var(--ec-filet);
}
.ec-aide h3 { margin: 0 0 3px; font-size: 16px; font-weight: 600; color: var(--ec-titre); }
.ec-aide p { margin: 0; font-size: 14px; color: var(--ec-corps); }

/* ── Deconnexion mobile ────────────────────────────────────────────────── */
.ec-logout {
  display: flex !important; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 46px; margin: 24px 0 0 !important; padding: 13px 24px !important;
  border: 1.5px solid #ff6501 !important; border-radius: 8px !important;
  background: #fff !important; color: #ff6501 !important;
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none !important; text-transform: none !important;
}
.ec-logout:hover, .ec-logout:focus {
  background: rgba(255, 101, 1, .14) !important;
  border-color: #ff6501 !important; color: #ff6501 !important;
}
.ec-logout svg { flex: 0 0 auto; width: 16px; height: 16px; }

@media (max-width: 1000px) {
  .ec-vedettes, .ec-tuiles, .ec-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ec-tete { padding: 20px 18px; gap: 14px; }
  .ec-nom { font-size: 21px; }
  .ec-tete-actions { width: 100%; }
  .ec-btn { width: 100%; }
  .ec-vedettes, .ec-tuiles, .ec-tuiles--2, .ec-modules { grid-template-columns: minmax(0, 1fr); }
  .ec-aide .ec-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-vedette, .ec-tuile, .ec-btn, .ec-modules > a { transition: none; }
  .ec-vedette:hover { transform: none; }
}