/* =======================================================================
   pages-premium.css — pages de contenu à la charte MaxDeal (Meme HOUEIBIB, 09/10/2026)
   Même langage que les pages « À propos » et « Livraison » (custom.css, bloc .md-about) :
   hero en carte dégradée (rayon 20, disque vert), eyebrow vert, grands titres marine 850,
   cartes blanches 15px à icône verte, chiffres, checklists, sections douces, CTA bleu.
   Chargé sur : pages CMS (page_name = cms) et page 404 (pagenotfound).
   Jetons : --md-bleu #21409A · --md-marine #172B66 · --md-vert #7AC143 · --md-vert-d #5FA32E
            --md-bord #E3E8F4 · --md-gris #5A6478 (docs/design-system.md)
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. Pages CMS construites avec le squelette .md-about : le titre de page du thème
      ferait doublon avec le H1 du hero → masqué quand la page contient .md-about.
   ----------------------------------------------------------------------- */
body#cms #center-column:has(.md-about) > .page-header { display: none; }
body#cms .page-content--cms:has(.md-about) { max-width: none; }

/* -----------------------------------------------------------------------
   2. Pages locales (.md-about.md-local) — compléments au bloc .md-about
   ----------------------------------------------------------------------- */
.md-local .material-icons { font-size: 22px; line-height: 1; }

/* hero : texte à gauche, carte « dépôt » à droite */
.md-local .md-about-hero__content {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  min-height: 0;
}
.md-local .md-about-hero h1 { max-width: 720px; }
.md-local-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.md-local-btn,
.md-local-btn--outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 11px 20px; border-radius: 9px;
  font-size: 13px; font-weight: 800; text-decoration: none !important;
  transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
.md-local-btn { color: #FFFFFF !important; background: var(--md-vert); box-shadow: 0 8px 22px rgba(122, 193, 67, .25); }
.md-local-btn:hover { color: #FFFFFF !important; background: var(--md-vert-d); transform: translateY(-2px); }
.md-local-btn--outline { color: var(--md-bleu) !important; background: #FFFFFF; border: 2px solid var(--md-bleu); }
.md-local-btn--outline:hover { color: #FFFFFF !important; background: var(--md-bleu); }
.md-local-btn .material-icons, .md-local-btn--outline .material-icons { font-size: 20px; }

.md-local-hero__card {
  position: relative;
  padding: 28px 26px;
  background: #FFFFFF;
  border: 1px solid rgba(227, 232, 244, .9);
  border-radius: 18px;
  box-shadow: 0 15px 40px rgba(23, 43, 102, .09);
}
.md-local-hero__card .md-about-eyebrow { margin-bottom: 12px; }
.md-local-hero__km { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; color: var(--md-vert-d); font-weight: 850; line-height: 1; }
.md-local-hero__km strong { font-size: 56px; letter-spacing: -.04em; color: var(--md-vert-d); }
.md-local-hero__km span { font-size: 18px; font-weight: 800; }
.md-local-hero__card > p { margin: 0 0 14px !important; color: var(--md-gris); font-size: 13px; }
.md-local-hero__lines { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.md-local-hero__lines li { display: flex; align-items: flex-start; gap: 10px; color: #3F4961; font-size: 13px; line-height: 1.45; }
.md-local-hero__lines .material-icons { flex: 0 0 auto; font-size: 20px; color: var(--md-vert-d); }
.md-local-hero__lines a { color: var(--md-bleu); font-weight: 700; }
.md-local-hero__lines strong { color: var(--md-marine); }

/* grille des familles d'appareils : cartes blanches à icône verte, compteur et prix */
.md-local-families { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.md-local-family { display: flex; flex-direction: column; text-decoration: none !important; }
.md-local-family .md-about-card__icon { margin-bottom: 14px; }
.md-local-family .md-about-card__icon .material-icons { font-size: 24px; }
.md-local-family h3 { margin-bottom: 4px !important; }
.md-local-family__count { display: block; margin: 0 0 12px; color: var(--md-gris); font-size: 13px; }
.md-local-family__count strong { color: var(--md-vert-d); font-size: 15px; font-weight: 850; }
.md-local-family__price { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--md-bord); }
.md-local-family__price strong { color: var(--md-marine); font-size: 16px; font-weight: 850; }
.md-local-family__price span { color: var(--md-bleu); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.md-local-family:hover .md-local-family__price span { text-decoration: underline; }

/* étapes « Comment ça se passe » : 4 cartes */
.md-local-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.md-local-steps .md-about-card__icon { width: 46px; height: 46px; }
.md-local-steps .md-about-card__icon .material-icons { font-size: 24px; }
.md-local-steps .md-about-card h3 { font-size: 16px !important; }
.md-local-tag { display: inline-block; margin-bottom: 10px; padding: 4px 10px; color: var(--md-marine); background: var(--md-about-soft-green, #F1F8E9); border: 1px solid #D5EBB9; border-radius: 30px; font-size: 12px; font-weight: 800; }

/* « Et aussi » : liens en checklist, 2 colonnes */
.md-local-more.md-about-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0 !important; }
.md-local-more li strong a { color: var(--md-marine); text-decoration: none; }
.md-local-more li strong a:hover { color: var(--md-bleu); text-decoration: underline; }

/* FAQ : cartes dépliables */
.md-local-faq { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.md-local-faq details { background: #FFFFFF; border: 1px solid var(--md-bord); border-radius: 12px; overflow: hidden; }
.md-local-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; cursor: pointer; color: var(--md-marine); font-size: 15px; font-weight: 800; list-style: none; }
.md-local-faq summary::-webkit-details-marker { display: none; }
.md-local-faq summary::after { content: "+"; flex: 0 0 26px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; color: #FFFFFF; background: var(--md-vert); border-radius: 50%; font-size: 16px; font-weight: 800; }
.md-local-faq details[open] summary::after { content: "–"; background: var(--md-bleu); }
.md-local-faq details p { margin: 0 !important; padding: 0 20px 18px; color: var(--md-gris); font-size: 14px; line-height: 1.7; }

/* nous trouver + villes voisines (réutilise .md-about-why) */
.md-local-find .md-about-contact { margin-top: 18px; }
.md-local-find p { margin-bottom: 10px !important; }
.md-local-hours { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.md-local-hours li { display: flex; gap: 10px; align-items: flex-start; color: #3F4961; font-size: 14px; }
.md-local-hours .material-icons { font-size: 20px; color: var(--md-vert-d); }
.md-local-hours a { color: var(--md-bleu); font-weight: 700; }
.md-local-towns { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.md-local-towns li a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 7px 14px;
  color: var(--md-marine); background: #FFFFFF; border: 1px solid #DCE3F1; border-radius: 30px;
  font-size: 13px; font-weight: 700; text-decoration: none !important; transition: border-color .2s ease, color .2s ease;
}
.md-local-towns li a:hover { color: var(--md-bleu); border-color: var(--md-bleu); }
.md-local-towns li a .material-icons { font-size: 16px; color: var(--md-vert-d); }
.md-local-towns li a small { color: var(--md-gris); font-weight: 600; }

/* texte courant des pages locales */
.md-local .md-about-intro a { color: var(--md-bleu); font-weight: 700; }

@media (max-width: 991px) {
  .md-local .md-about-hero__content { grid-template-columns: 1fr; }
  .md-local-families, .md-local-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .md-local-families, .md-local-steps, .md-local-more.md-about-checklist { grid-template-columns: 1fr; }
  .md-local-hero__km strong { font-size: 44px; }
  .md-local-hero__card { padding: 20px 18px; }
  .md-local-hero__actions a { width: 100%; }
  .md-local-faq summary { padding: 14px 16px; font-size: 14px; }
}

/* -----------------------------------------------------------------------
   3. Page 404 (layout CE 8, classes mx-404) : carte hero dégradée à la charte
   ----------------------------------------------------------------------- */
body#pagenotfound #wrapper { background: #FFFFFF; }
body#pagenotfound .mx-404.elementor-section { padding: 30px 0 10px; }
body#pagenotfound .mx-404 .mx-404__card > .elementor-column-wrap {
  position: relative;
  max-width: 1180px;
  padding: 58px 48px 54px;
  background: linear-gradient(135deg, #F6F9FF 0%, #EEF2FB 55%, #F1F8E9 100%);
  border: 1px solid var(--md-bord);
  border-radius: 20px;
  box-shadow: none;
  overflow: hidden;
}
body#pagenotfound .mx-404 .mx-404__card > .elementor-column-wrap::after {
  content: ""; position: absolute; right: -110px; bottom: -150px; width: 330px; height: 330px;
  background: rgba(122, 193, 67, .13); border-radius: 50%; pointer-events: none;
}
body#pagenotfound .mx-404 .mx-404__card > .elementor-column-wrap > .elementor-widget-wrap { position: relative; z-index: 2; }
body#pagenotfound .mx-404__code .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 10px; color: var(--md-vert-d) !important;
  font-size: 12px !important; font-weight: 800 !important; line-height: 1.2 !important;
  text-transform: uppercase; letter-spacing: .09em;
}
body#pagenotfound .mx-404__code .elementor-heading-title::before { content: ""; width: 22px; height: 3px; background: var(--md-vert); border-radius: 10px; }
body#pagenotfound .mx-404__code .elementor-heading-title::after { content: " — page introuvable"; display: inline; width: auto; height: auto; margin: 0; background: none; letter-spacing: .09em; }
body#pagenotfound .mx-404__title .elementor-heading-title {
  max-width: 760px; margin: 0 auto 14px;
  font-size: clamp(32px, 4vw, 50px) !important; font-weight: 850 !important; line-height: 1.06 !important; letter-spacing: -.035em;
  color: var(--md-marine) !important;
}
body#pagenotfound .mx-404__text { max-width: 640px; color: #505A70; font-size: 17px; line-height: 1.7; }
body#pagenotfound .mx-404__text p { margin-bottom: 0; }
body#pagenotfound .mx-404__search { max-width: 640px; margin: 22px auto 18px !important; }
body#pagenotfound .mx-404__search .elementor-search-form, body#pagenotfound .mx-404__search form { box-shadow: 0 10px 30px rgba(23, 43, 102, .08); border-radius: 9px; }
body#pagenotfound .elementor-widget-ajax-search input.elementor-search__input, body#pagenotfound .elementor-search__input { background: #FFFFFF; border-radius: 9px 0 0 9px !important; }
body#pagenotfound .elementor-search__submit { border-radius: 0 9px 9px 0 !important; padding: 0 22px; }
body#pagenotfound .mx-404 .elementor-widget-button { display: inline-block; margin: 0 4px !important; }
body#pagenotfound .mx-404 .elementor-widget-button .elementor-button {
  min-height: 48px; padding: 12px 22px; border-radius: 9px !important; font-size: 13px; font-weight: 800; line-height: 1.2;
  box-shadow: none; transition: background-color .2s ease, transform .2s ease, border-color .2s ease;
}
body#pagenotfound .mx-404__home .elementor-button { background: var(--md-vert) !important; border: 2px solid var(--md-vert) !important; color: #FFFFFF !important; box-shadow: 0 8px 22px rgba(122, 193, 67, .25) !important; }
body#pagenotfound .mx-404__home .elementor-button:hover { background: var(--md-vert-d) !important; border-color: var(--md-vert-d) !important; transform: translateY(-2px); }
body#pagenotfound .mx-404__arrivals .elementor-button { background: #FFFFFF !important; border: 2px solid var(--md-bleu) !important; color: var(--md-bleu) !important; }
body#pagenotfound .mx-404__arrivals .elementor-button:hover { background: var(--md-bleu) !important; color: #FFFFFF !important; }
body#pagenotfound .mx-404-products.elementor-section { padding: 30px 0 50px; }
body#pagenotfound .mx-404-products > .elementor-container { max-width: 1180px !important; }
body#pagenotfound .mx-404__products .elementor-heading-title, body#pagenotfound .mx-404__products h2 {
  margin: 0 0 20px; color: var(--md-marine) !important; font-size: clamp(24px, 3vw, 32px) !important; font-weight: 850 !important; letter-spacing: -.025em; line-height: 1.15;
}
@media (max-width: 767px) {
  body#pagenotfound .mx-404 .mx-404__card > .elementor-column-wrap { padding: 30px 18px 28px; border-radius: 14px; }
  body#pagenotfound .mx-404__text { font-size: 15px; }
  body#pagenotfound .mx-404 .elementor-widget-button { display: block; margin: 0 0 10px !important; }
  body#pagenotfound .mx-404 .elementor-widget-button .elementor-button { width: 100%; }
}

/* -----------------------------------------------------------------------
   4. Descriptions de catégorie (.md-cat) — 12/10/2026, Meme HOUEIBIB
   Le widget « listing-description » s'affiche entre le titre et les produits : le bloc doit rester
   compact pour ne pas repousser le catalogue. Résumé + chiffres + marques visibles, le texte long
   et la FAQ dans un dépliant (présent dans le HTML, donc lu par les moteurs).
   ----------------------------------------------------------------------- */
.md-cat { margin: 2px 0 6px; color: var(--md-gris); font-size: 14.5px; line-height: 1.7; }
.md-cat * { box-sizing: border-box; }
.md-cat__lead { margin: 0 0 14px; max-width: 900px; color: #3F4961; }
.md-cat__lead strong { color: var(--md-marine); font-weight: 700; }

.md-cat__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.md-cat__facts li {
  display: flex; flex-direction: column; gap: 1px; min-width: 132px; padding: 9px 14px;
  background: #FFFFFF; border: 1px solid var(--md-bord); border-radius: 12px;
}
.md-cat__facts strong { color: var(--md-vert-d); font-size: 17px; font-weight: 850; line-height: 1.2; }
.md-cat__facts span { color: var(--md-gris); font-size: 12px; font-weight: 600; }

.md-cat__brands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; font-size: 12px; }
.md-cat__brands > span { color: var(--md-gris); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }
.md-cat__brands li a, .md-cat__brands li {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 11px;
  color: var(--md-marine); background: #FFFFFF; border: 1px solid #DCE3F1; border-radius: 30px;
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.md-cat__brands li a:hover { color: var(--md-bleu); border-color: var(--md-bleu); }

.md-cat__more { background: var(--md-about-soft, #F7F9FD); border: 1px solid var(--md-bord); border-radius: 12px; overflow: hidden; }
.md-cat__more > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px;
  cursor: pointer; color: var(--md-marine); font-size: 14px; font-weight: 800; list-style: none;
}
.md-cat__more > summary::-webkit-details-marker { display: none; }
.md-cat__more > summary::after {
  content: "+"; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; color: #FFFFFF; background: var(--md-vert); border-radius: 50%; font-size: 15px; font-weight: 800;
}
.md-cat__more[open] > summary::after { content: "–"; background: var(--md-bleu); }
.md-cat__more[open] > summary { border-bottom: 1px solid var(--md-bord); background: #FFFFFF; }
.md-cat__corps { padding: 16px 18px 18px; background: #FFFFFF; }
.md-cat__corps h2 { margin: 0 0 10px; color: var(--md-marine); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.md-cat__corps h2 + p, .md-cat__corps h2 + ul { margin-top: 0; }
.md-cat__corps h3 { margin: 14px 0 4px; color: var(--md-marine); font-size: 14.5px; font-weight: 800; }
.md-cat__corps p { margin: 0 0 12px; color: var(--md-gris); font-size: 14px; }
.md-cat__corps > section + section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--md-bord); }
.md-cat__tips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 4px; padding: 0; list-style: none; }
.md-cat__tips li { position: relative; padding: 10px 13px 10px 36px; background: var(--md-about-soft, #F7F9FD); border: 1px solid var(--md-bord); border-radius: 10px; font-size: 13.5px; color: var(--md-gris); }
.md-cat__tips li::before {
  content: "✓"; position: absolute; top: 11px; left: 11px; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; color: #FFFFFF; background: var(--md-vert); border-radius: 50%; font-size: 10px; font-weight: 800;
}
.md-cat__tips strong { color: var(--md-marine); }
.md-cat__liens { margin: 0 !important; font-size: 13.5px; }
.md-cat__liens a { color: var(--md-bleu); font-weight: 700; }

@media (max-width: 767px) {
  .md-cat { font-size: 14px; }
  .md-cat__facts li { min-width: calc(50% - 4px); flex: 1 1 calc(50% - 4px); }
  .md-cat__tips { grid-template-columns: 1fr; }
}

/* le texte de catégorie est rendu dans un conteneur « rich-text » qui réimpose les puces : on les retire */
.md-cat ul, .md-cat ol { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.md-cat li { list-style: none !important; }
.md-cat li::marker { content: none; }
@media (max-width: 767px) {
  .md-cat__facts li { min-width: 0; padding: 8px 11px; }
  .md-cat__facts strong { font-size: 15px; }
  .md-cat__facts span { font-size: 11.5px; }
  .md-cat__brands { gap: 5px; }
  .md-cat__brands li { padding: 3px 9px; font-size: 11.5px; min-height: 25px; }
}