/* Design system Mosqity PS — https://claude.ai/artifact/QWBdUXnhfxhm2PDsekCXev — version 5 du 30/10/2026. Recopié tel quel : ne pas modifier ici, modifier le design system puis resynchroniser. */
/* Feuille commune des cartes (classes mq-*). Les @container des cartes deviennent des @media dans les gabarits du thème. */
/* Mosqity PS — bundle.css · v1 · 30/10/2026
   Variables lues par les composants de l'ENE (tokens/typography.css et spacing.css de la source)
   que tokens.json ne peut pas porter : valeurs fluides, graisses, approches, mouvement.
   Les couleurs, espacements, rayons et ombres viennent de tokens.css (généré depuis tokens.json). */
:root {
  --weight-medium: 500;
  --weight-bold: 700;
  --text-hero: clamp(3.5rem, 6.8vw, 6.125rem);
  --text-h2: clamp(2.25rem, 3.5vw, 3.1875rem);
  --text-h3: 1.6875rem;
  --text-body: 1.4375rem;
  --text-body-sm: 1.0625rem;
  --text-label: 0.75rem;
  --text-eyebrow: 0.5625rem;
  --leading-tight: 1.0;
  --leading-heading: 1.02;
  --leading-body: 1.45;
  --tracking-caps: 0.08em;
  --tracking-eyebrow: 0.14em;
  --tracking-heading: -0.01em;
  --tracking-display: 0.16em;
  --page-margin: clamp(24px, 7vw, 100px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}
body { font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--text-body); background: var(--surface-page); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* =====================================================================
   Pages de la boutique (cartes A à N) — classes mq-*
   Chaque écran d'une carte est un conteneur (container queries) : .mq-ecran
   (1 440 px) ou .mq-ecran--tel (390 px). Dans le thème PrestaShop, chaque
   @container (max-width: X) devient @media (max-width: X).
   ===================================================================== */
.mq-ecran { container-type: inline-size; width: 1440px; background: var(--surface-page); color: var(--text-body); font-family: var(--font-sans); font-weight: var(--weight-medium); overflow: hidden; }
.mq-ecran--tel { width: 390px; }
.mq-ecran *, .mq-ecran *::before, .mq-ecran *::after { box-sizing: border-box; }
:where(.mq-ecran) a { color: inherit; }
.mq-conteneur { max-width: calc(var(--page-max) + 2 * var(--page-margin)); margin: 0 auto; padding-left: var(--page-margin); padding-right: var(--page-margin); }
@container (max-width: 899px) { .mq-conteneur { padding-left: var(--space-4); padding-right: var(--space-4); } }

/* Textes */
.mq-label { font-size: var(--text-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-medium); }
.mq-surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; font-weight: var(--weight-bold); }
.mq-surtitre::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: inset 0 0 0 1px var(--navy); }
.mq-h1 { font-size: var(--text-h2); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--weight-bold); margin: 0; text-wrap: balance; }
.mq-hero { font-size: var(--text-hero); line-height: var(--leading-tight); letter-spacing: var(--tracking-heading); font-weight: var(--weight-bold); margin: 0; text-wrap: balance; }
.mq-h3 { font-size: var(--text-h3); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); font-weight: var(--weight-bold); margin: 0; }
.mq-texte { font-size: var(--text-body-sm); line-height: var(--leading-body); margin: 0; }
.mq-chapo { font-size: var(--text-body); line-height: var(--leading-body); margin: 0; }
.mq-mention { font-size: 13px; line-height: 1.45; margin: 0; }
@container (max-width: 899px) { .mq-hero { font-size: 44px; } .mq-h1 { font-size: 34px; } .mq-h3 { font-size: 22px; } .mq-chapo { font-size: 18px; } }

/* Boutons et pastilles (mêmes formes que Button / CircleButton de l'ENE) */
.mq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px; border-radius: var(--radius-pill); border: 1.5px solid var(--navy); background: transparent; color: var(--navy); font: inherit; font-size: var(--text-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-bold); text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
.mq-btn--jaune { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }
.mq-btn--navy { background: var(--navy); color: var(--white); }
.mq-btn--navy:hover { background: var(--navy-700); }
.mq-btn--sm { min-height: 40px; padding: 0 18px; }
.mq-cercle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.mq-pastille { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--yellow); color: var(--navy); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-bold); }
.mq-pastille--neutre { background: var(--navy-100); }
.mq-pastille--contour { background: transparent; box-shadow: inset 0 0 0 1.5px var(--navy); }
.mq-a-fournir { color: var(--alerte); font-weight: var(--weight-bold); }
.mq-requis { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--off-white); color: var(--alerte); font-size: 11px; font-weight: var(--weight-bold); box-shadow: inset 0 0 0 1px var(--alerte); }
.mq-champ { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: var(--radius-pill); border: 1.5px solid var(--navy); background: var(--white); color: var(--navy); font: inherit; font-size: 15px; }
.mq-ico { width: 24px; height: 24px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* En-tête commun (carte A1) */
.mq-evitement { position: absolute; left: -9999px; }
.mq-util { background: var(--navy); color: var(--white); }
.mq-util .mq-conteneur { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); height: 40px; }
.mq-util a { text-decoration: none; }
.mq-util__offre { color: var(--yellow); }
.mq-util__liens { display: flex; gap: var(--space-6); }
.mq-barre .mq-conteneur { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6); height: 96px; }
.mq-logo { display: block; color: var(--navy); line-height: 0; }
.mq-logo svg { height: 56px; width: auto; display: block; margin: -8px -14px; }
.mq-recherche { max-width: 520px; width: 100%; justify-self: center; }
.mq-recherche span { color: var(--text-muted); }
.mq-actions { display: flex; align-items: center; gap: var(--space-5); }
.mq-actions a { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.mq-panier { position: relative; }
.mq-panier b { position: absolute; top: -6px; left: 20px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--yellow); color: var(--navy); font-size: 11px; line-height: 20px; text-align: center; box-shadow: 0 0 0 1.5px var(--navy); }
.mq-nav { border-bottom: 1px solid var(--border-subtle); position: relative; }
.mq-nav ul { list-style: none; margin: 0; padding: 0; }
.mq-nav__entrees { display: flex; justify-content: space-between; gap: var(--space-4); }
.mq-nav__entrees > li > a { display: flex; align-items: center; gap: 6px; height: 56px; text-decoration: none; font-size: var(--text-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; border-bottom: 3px solid transparent; }
.mq-nav__entrees > li > a[aria-current="page"], .mq-nav__entrees > li > a[aria-expanded="true"] { font-weight: var(--weight-bold); border-bottom-color: var(--navy); }
.mq-nav__entrees > li > a svg { width: 12px; height: 12px; }
.mq-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: var(--off-white); border-bottom: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); }
.mq-mega .mq-conteneur { display: grid; grid-template-columns: repeat(var(--mq-cols, 3), 1fr) 320px; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-6); }
.mq-mega h3 { margin: 0 0 var(--space-3); font-size: var(--text-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: var(--weight-bold); }
.mq-mega ul { display: grid; gap: var(--space-2); justify-content: start; }
.mq-mega ul a { font-size: 15px; text-decoration: none; }
.mq-mega ul a:hover { text-decoration: underline; }
.mq-mega__conseil { background: var(--navy); color: var(--white); border-radius: var(--radius-card); padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.mq-mega__conseil a { color: var(--yellow); }
.mq-burger { display: none; }
@container (max-width: 899px) {
  .mq-util .mq-conteneur { justify-content: center; height: 36px; }
  .mq-util__liens, .mq-long { display: none; }
  .mq-barre .mq-conteneur { grid-template-columns: auto 1fr; height: 64px; gap: var(--space-3); }
  .mq-logo svg { height: 40px; margin: -6px -10px; }
  .mq-recherche, .mq-actions .mq-cta, .mq-actions .mq-compte span, .mq-actions .mq-panier span { display: none; }
  .mq-actions { justify-self: end; gap: var(--space-4); }
  .mq-nav { display: none; }
  .mq-burger { display: inline-flex; }
}

/* Panneau du menu mobile (carte A1, état ouvert) */
.mq-panneau { background: var(--navy); color: var(--white); padding: var(--space-4); display: grid; gap: var(--space-5); }
.mq-panneau ul { list-style: none; margin: 0; padding: 0; display: grid; }
.mq-panneau li a { display: flex; justify-content: space-between; align-items: center; min-height: 52px; border-bottom: 1px solid rgba(255,255,255,.18); text-decoration: none; font-size: 15px; letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.mq-panneau .mq-btn--jaune { width: 100%; }

/* Pied de page commun (carte A2) */
.mq-newsletter { background: var(--yellow); color: var(--navy); border-radius: var(--radius-photo); padding: var(--space-7); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-6); align-items: center; }
.mq-newsletter form { display: flex; gap: var(--space-3); }
.mq-newsletter .mq-champ { flex: 1 1 auto; border-color: var(--navy); }
.mq-pied { background: var(--navy); color: var(--white); margin-top: var(--space-8); }
.mq-pied a { text-decoration: none; }
.mq-pied a:hover { text-decoration: underline; color: var(--yellow); }
.mq-pied__haut { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-7); }
.mq-pied__haut h2 { margin: 0 0 var(--space-4); font-size: var(--text-label); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--yellow); font-weight: var(--weight-bold); }
.mq-pied__haut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.mq-pied__marque { display: grid; gap: var(--space-4); align-content: start; }
.mq-pied__marque .mq-logo { color: var(--white); }
.mq-pied__legal { border-top: 1px solid rgba(255,255,255,.2); padding-top: var(--space-5); padding-bottom: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); font-size: 13px; }
.mq-pied__legal .mq-renoncer { color: var(--yellow); font-weight: var(--weight-bold); }
.mq-groupe { background: var(--white); color: var(--navy); }
.mq-groupe .mq-conteneur { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-6); align-items: center; padding-top: var(--space-5); padding-bottom: var(--space-5); }
.mq-groupe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.mq-groupe li a { display: grid; text-decoration: none; }
.mq-groupe li b { font-size: 15px; }
.mq-groupe li span { font-size: 12px; color: var(--navy); opacity: .8; }
@container (max-width: 899px) {
  .mq-newsletter { grid-template-columns: 1fr; padding: var(--space-5); border-radius: var(--radius-card); }
  .mq-newsletter form { flex-direction: column; }
  .mq-pied__haut { grid-template-columns: 1fr; gap: var(--space-5); padding-top: var(--space-6); }
  .mq-groupe .mq-conteneur { grid-template-columns: 1fr; gap: var(--space-3); }
}
.mq-pied--court .mq-pied__legal { border-top: 0; }

/* Annotations des cartes (hors maquette) */
.mq-carte { padding: 24px; background: var(--off-white); display: grid; gap: 24px; justify-content: start; }
.mq-carte__titre { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--navy); margin: 0; }
.mq-cartes-ligne { display: flex; gap: 24px; align-items: flex-start; }
.mq-pied .mq-a-fournir, .mq-util .mq-a-fournir, .mq-mega__conseil .mq-a-fournir { color: var(--yellow); }
@container (max-width: 899px) { .mq-pied__haut ul { gap: 0; } .mq-pied__haut li a, .mq-pied__legal a { display: inline-flex; align-items: center; min-height: 44px; } }