.product-add-to-cart .offer-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-header {
  border: 1px solid var(--line) !important;
}

body#contact .contact-page {
  background: #f4f4f4;
  padding-bottom: 0;
}

body#contact .contact-heading {
  margin-bottom: 0;
  padding: 0;
  background: #fff;
}

body#contact .contact-heading .container-shell {
  width: min(100%, 1200px);
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

body#contact .contact-heading h1 {
  margin: 0;
  padding: 18px 0 16px;
  font-size: 30px;
  line-height: 1.1;
  font-family: "RobotoCondensed", sans-serif;
  font-weight: 700;
  color: #282828;
}

body#contact .contact-page__body {
  padding: 38px 0 34px;
}

/* Grille de la production : .col-sm-4/.col-md-3 pour la localisation et
   .col-sm-8/.col-md-7 pour le formulaire — d'ou la colonne laissee libre a
   droite. Des largeurs fixes (210 + 670) en `space-between` collaient le
   formulaire au bord droit et ne suivaient aucune largeur intermediaire. */
body#contact .contact-page__layout {
  width: min(100%, 1200px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 3fr 7fr 2fr;
  justify-content: initial;
  align-items: start;
  gap: 0;
}

body#contact .contact-page__localisation,
body#contact .contact-page__form {
  /* min-width: 0 — sans lui, l'element de grille ne descend pas sous la largeur
     mini de son contenu (le bouton de 304px) et deborde a 320px. */
  min-width: 0;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) and (max-width: 991px) {
  body#contact .contact-page__layout {
    grid-template-columns: 4fr 8fr;
  }
}

@media (max-width: 767px) {
  body#contact .contact-page__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

body#contact .contact-page__localisation {
  /* Plus de titre « Localisation » : le texte demarre en haut de la colonne
     pour s'aligner avec le premier champ du formulaire. */
  padding-top: 0;
  color: #4a4a4a;
}

body#contact .contact-page__localisation p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.35;
}

/* Premiere ligne (« Service Abonnement Flaash ») en gras. */
body#contact .contact-page__localisation p:first-of-type {
  font-weight: 700;
}

body#contact .contact-page__localisation em {
  font-style: italic;
}

body#contact .contact-page__localisation a {
  color: #5b5b5b;
  text-decoration: none;
  font-style: italic;
}

/* Plus de max-width ici : c'est la colonne (7/12) qui donne sa largeur au
   formulaire, comme en production. Cumule avec la gouttiere de 15px, il le
   retrecissait de 30px. */

body#contact .contact-prod-form {
  display: grid;
  gap: 16px;
}

body#contact .contact-prod-form__field {
  display: grid;
}

body#contact .contact-prod-form__field input,
body#contact .contact-prod-form__field textarea {
  width: 100%;
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  background: #fff;
  color: #282828;
  font-size: 14px;
  font-family: "Roboto", Arial, sans-serif;
  box-sizing: border-box;
}

body#contact .contact-prod-form__field input {
  height: 40px;
  padding: 0 12px;
}

body#contact .contact-prod-form__field textarea {
  min-height: 112px;
  padding: 12px;
  resize: vertical;
}

body#contact .contact-prod-form__field input::placeholder,
body#contact .contact-prod-form__field textarea::placeholder {
  color: #9a9a9a;
}

body#contact .contact-prod-form__field input:focus,
body#contact .contact-prod-form__field textarea:focus {
  outline: none;
  border-color: #1f1f1f;
  box-shadow: none;
}

body#contact .contact-prod-form__counter {
  margin: -8px 0 2px;
  font-size: 13px;
  line-height: 1.35;
  color: #4c4c4c;
}

body#contact .contact-prod-form__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin-top: 2px;
}

body#contact .contact-prod-form__actions > * {
  max-width: 304px;
}

body#contact .contact-prod-form__captcha {
  width: 304px;
}

body#contact .contact-prod-form__captcha-box {
  width: 304px;
  min-height: 78px;
}

body#contact .contact-prod-form__captcha.is-invalid .contact-prod-form__captcha-box {
  border-radius: 2px;
  box-shadow: 0 0 0 1px #b30000;
}

body#contact .contact-prod-form__captcha .g-recaptcha {
  display: inline-block;
}

body#contact .contact-prod-form__error {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #b30000;
}

body#contact .contact-prod-form__submit {
  width: 304px;
  min-height: 50px;
  border: 0;
  border-radius: 2px;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
}

body#contact .contact-prod-form__submit:hover {
  background: #202020;
}

body#contact .contact-prod-form__submit:focus,
body#contact .contact-prod-form__submit:focus-visible {
  outline: none;
  box-shadow: none;
}

body#contact .contact-prod-form .alert {
  margin-bottom: 12px;
}

/* Masquer le fil d'ariane sur la homepage */
body#index #site-breadcrumb {
  display: none;
}

/* Les 52px/26px qui se trouvaient ici compensaient l'absence de gouttiere sur
   les colonnes de la slide. Celles-ci portent desormais les 70px de la
   production : la section ne doit plus rien ajouter (cf. main.css .home-page). */

/* Gouttieres de 15px comme la .container Bootstrap de la production : le
   conteneur mesure alors 1170px au-dela de 1200px, et viewport-30 en dessous.
   Les fleches etant calees sur ses bords, toute autre valeur les decale. */
body#index .home-page > .container-shell {
  width: min(100%, 1200px);
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

/* La geometrie du carrousel (grille, calques de fleches, pastilles) est definie
   une seule fois dans main.css, aux valeurs exactes de la production. Ne rien
   re-surcharger ici : les blocs !important qui s'y trouvaient neutralisaient
   entre autres le decalage de 16px de la fleche droite. */

/* Gouttieres internes de la colonne de texte, valeurs de la production :
   h1 margin-bottom 15px, line-height 1.1 (soit 33px pour 30px de corps). */
body#index .hero-slide__title {
  margin-bottom: 15px;
  line-height: 1.1;
}

body#index .hero-slide__subtitle {
  display: none;
}

/* margin-bottom a 0 : l'espace avant le bouton vient de son propre
   margin-top de 20px, comme en production. */
body#index .hero-slide__body {
  gap: 10px;
  margin-bottom: 0;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: #4f4f4f;
}

body#index .hero-slide__lead {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.35;
  color: #4f4f4f;
  font-weight: 400;
}

body#index .hero-slide__body ul {
  padding-left: 40px;
}

body#index .hero-slide__body li + li {
  margin-top: 4px;
}

/* Le bouton d'achat et la bande de reassurance sont definis une seule fois dans
   main.css, aux valeurs de la production. Les surcharges qui se trouvaient ici
   imposaient un modele flex (prix 18px, survol #202020) et supprimaient la ligne
   de separation au-dessus de la reassurance (`border-top: 0`). */

/* Meme conteneur que la production : 1200px avec 15px de gouttiere. Le titre s'y
   cale, et la grille l'annule par ses marges negatives (cf. main.css). */
body#category .catalog-page > .container-shell {
  width: min(100%, 1200px);
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

body#category .catalog-card__media {
  position: relative;
  overflow: hidden;
  background: #f3f3f3;
}

body#category .catalog-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.14);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}

body#category .catalog-card__media-link {
  display: block;
}

body#category .catalog-card__image {
  display: block;
  width: 100%;
  height: 315px;
  object-fit: cover;
}

body#category .catalog-card__actions {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 1;
}

body#category .catalog-card__buy {
  min-height: 36px;
  padding: 0 18px;
  border-radius: 0;
  letter-spacing: 0.01em;
  transform: translateY(8px);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

body#category .catalog-card__content {
  display: grid;
  gap: 4px;
}

body#category .catalog-card__title {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  body#category .catalog-card:hover,
  body#category .catalog-card:focus-within {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
  }

  body#category .catalog-card:hover .catalog-card__media::after,
  body#category .catalog-card:focus-within .catalog-card__media::after {
    opacity: 1;
  }

  body#category .catalog-card:hover .catalog-card__actions,
  body#category .catalog-card:focus-within .catalog-card__actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body#category .catalog-card:hover .catalog-card__buy,
  body#category .catalog-card:focus-within .catalog-card__buy {
    transform: translateY(0);
  }
}

.product-add-to-cart .offer-buy__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.product-add-to-cart .offer-buy__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  font-family: var(--font-ui);
  text-decoration: none;
}

.product-add-to-cart .offer-buy__submit:hover:not(:disabled) {
  background: #5d5d5d;
}

.product-add-to-cart .offer-buy__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.product-add-to-cart .offer-buy__price,
.product-add-to-cart .offer-buy__label {
  white-space: nowrap;
}

.product-add-to-cart .offer-buy__divider {
  display: block;
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.24);
}

.product-add-to-cart .offer-buy__icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.subscription-config {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.subscription-config__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.subscription-step {
  display: grid;
  gap: 10px;
}

.subscription-step__label {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
}

.subscription-select,
.subscription-pill {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border: 1px solid #d7d7d7;
  background: #f7f7f7;
  color: #282828;
  font-size: 12px;
}

.subscription-select {
  background: #fff;
}

.subscription-select__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #282828;
}

.subscription-pill.is-active {
  background: #000;
  border-color: #000;
  color: #fff;
}

.related-grid--duo {
  grid-template-columns: repeat(2, minmax(220px, 240px));
  justify-content: center;
}

.footer-mid {
  display: none !important;
}

.site-footer,
.site-footer .footer-main,
.site-footer .footer-copyright {
  background: #000;
}

.site-footer {
  color: #c7c7c7;
}

.site-footer .footer-main {
  padding: 44px 0 74px;
}

/* Les colonnes du footer sont definies dans main.css : elles suivent la grille
   de la production (1/6 du conteneur au-dela de 768px, 1/3 de l'ecran en
   dessous). Les 170px fixes qui se trouvaient ici ne tenaient qu'a partir de
   1200px et ne suivaient pas les largeurs intermediaires. */

.site-footer .footer-column__title {
  margin-bottom: 15px;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}

.site-footer .footer-links {
  gap: 6px;
}

.site-footer .footer-links a {
  font-size: 13px;
  line-height: 1.7;
  color: #fff;
}

.site-footer .footer-links a:hover {
  color: #fff;
}

/* La barre de copyright est definie dans main.css aux valeurs de la production
   (pas de bordure haute, padding 15px, texte #bbb). */

/* Les reseaux sociaux sont definis dans main.css, au modele de la production
   (liste d'inline-block, images PNG). Ces surcharges visaient les anciens SVG
   et imposaient une opacite de 0.88 que la production n'a pas. */

body#authentication .auth-section {
  padding: 30px 0 60px;
}

/* Conteneur de la production : 1200px avec 15px de gouttiere. Sans elle, entre
   768 et 991px les champs partaient du bord (x = 0). */
body#authentication .auth-shell {
  width: min(100%, 1200px);
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

body#authentication .auth-title {
  margin: 0 0 35px;
  font-size: 30px;
  line-height: 1;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  color: #282828;
}

/* Colonnes plafonnees mais compressibles, l'espace restant reparti entre elles :
   des largeurs fixes (285 + 100 + 1 + 100 + 684 = 1170) debordaient sous 1200px. */
body#authentication .login-layout {
  grid-template-columns: minmax(0, 285px) 1px minmax(0, 684px);
  justify-content: space-between;
  column-gap: 30px;
  align-items: start;
}

body#authentication .login-divider {
  background: #e1e1e1;
}

body#authentication .auth-column--login,
body#authentication .auth-column--register {
  width: auto;
  max-width: none;
  min-width: 0;
}

body#authentication .panel-title {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.2;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  color: #282828;
}

body#authentication .auth-login-form .form-stack {
  display: grid;
  gap: 14px;
}

/* Deux colonnes egales, 30px d'ecart — comme la production, a TOUTES les
   largeurs (elle conserve ses deux colonnes jusqu'a 320px). */
body#authentication .auth-register-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  gap: 14px;
}

body#authentication .auth-register-columns {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 30px;
  align-items: start;
}

body#authentication .auth-register-column {
  display: grid;
  gap: 14px;
  align-content: start;
}

body#authentication .field--span-2 {
  grid-column: 1 / -1;
}

body#authentication .field input,
body#authentication .field select,
body#authentication .field textarea {
  height: 40px;
  padding: 0 14px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  background: #f4f4f4;
  color: #282828;
  font-size: 14px;
  font-family: "Roboto", Arial, sans-serif;
}

body#authentication .field input::placeholder,
body#authentication .field textarea::placeholder {
  color: #767676;
  opacity: 1;
}

body#authentication .field.is-invalid input,
body#authentication .field.is-invalid select,
body#authentication .field.is-invalid textarea,
body#authentication .checkbox-line.is-invalid input + label,
body#authentication .auth-captcha.is-invalid .auth-captcha__box,
body#authentication .auth-hook-create-account.is-invalid .auth-captcha__box--google {
  border-color: #b30000;
}

body#authentication .checkbox-line.is-invalid label {
  color: #b30000;
}

body#authentication .auth-inline-error {
  margin: 6px 0 0;
  color: #b30000;
  font-size: 11px;
  line-height: 1.45;
}

body#authentication .auth-inline-error--block {
  margin-top: 0;
  margin-bottom: 4px;
}

body#authentication .field select {
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #767676 50%),
    linear-gradient(135deg, #767676 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

body#authentication .field--password {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  column-gap: 0;
  row-gap: 6px;
  align-items: stretch;
}

body#authentication .field--password input {
  grid-column: 1;
  padding-right: 14px;
  border-right: 0;
  border-radius: 4px 0 0 4px;
}

body#authentication .field--password .auth-inline-error {
  grid-column: 1 / -1;
}

body#authentication .field__eye {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #d2d2d2;
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: #e0e0e0;
  color: #696969;
}

body#authentication .field__eye svg {
  width: 18px;
  height: 18px;
}

body#authentication .auth-forgot {
  margin: -2px 0 0;
  font-size: 14px;
  line-height: 1.2;
  font-family: "Roboto", Arial, sans-serif;
  color: #000000;
  text-decoration: none;
}

body#authentication .auth-btn-submit {
  min-height: 50px;
  border-radius: 2px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
  letter-spacing: 0;
}

body#authentication .auth-register-actions {
  display: flex;
  justify-content: flex-end;
}

body#authentication .register-btn {
  width: 304px;
  margin-left: auto;
}

body#authentication .auth-cookies {
  max-width: 285px;
  min-height: 95px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.35;
  color: #5d5d5d;
  font-family: "Roboto", Arial, sans-serif;
}

body#authentication .auth-cookies a,
body#authentication .checkbox-line a {
  color: #000000;
  text-decoration: none;
}

body#authentication .checkbox-line {
  font-size: 12px;
  line-height: 1.45;
  color: #5d5d5d;
}

body#authentication .register-mandatory {
  margin: 0;
  font-size: 12px;
}

body#authentication .auth-captcha {
  margin-top: 2px;
}

body#authentication .auth-hook-create-account {
  margin-top: 2px;
}

body#authentication .auth-hook-create-account--hidden {
  display: none !important;
}

body#authentication .auth-captcha__box {
  max-width: 304px;
  min-height: 78px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body#authentication .auth-captcha__box--google {
  display: inline-flex;
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body#authentication .auth-captcha.is-invalid .auth-captcha__box--google {
  border-radius: 2px;
  box-shadow: 0 0 0 1px #b30000;
}

/* ── Nouveau client : onglets « Créer un compte » / « Invité » ───────────────
   Deux parcours mutuellement exclusifs. Identité FLAASH stricte : noir / blanc /
   gris, typographie Roboto. Actif = plein noir, inactif = gris discret. */
body#authentication .auth-newcustomer {
  display: block;
}

body#authentication .auth-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 24px;
}

body#authentication .auth-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #d2d2d2;
  border-radius: 4px;
  background: #f4f4f4;
  color: #5d5d5d;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

body#authentication .auth-tab:hover {
  background: #ededed;
  color: #282828;
}

body#authentication .auth-tab.is-active {
  background: #000000;
  border-color: #000000;
  color: #ffffff;
  font-weight: 500;
  cursor: default;
}

body#authentication .auth-tab:focus-visible {
  outline: 2px solid #000000;
  outline-offset: 2px;
}

body#authentication .auth-tab-panel[hidden] {
  display: none;
}

/* ── Formulaire invité : information discrète + coordonnées d'expédition ──── */
body#authentication .auth-guest-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 20px;
  color: #5d5d5d;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

body#authentication .auth-guest-notice__icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #767676;
}

@media (max-width: 767px) {
  body#contact .contact-page__body {
    padding: 28px 0 24px;
  }

  /* minmax(0, 1fr) et non 1fr : sinon la colonne ne peut pas descendre sous la
     largeur mini de son contenu (le bouton de 304px) et deborde a 320px. */
  body#contact .contact-page__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  body#contact .contact-page__localisation {
    padding-top: 0;
  }

  body#contact .contact-page__form {
    max-width: none;
  }

  /* La production garde son bouton a 304px, aligne a droite, y compris en
     mobile : l'etirer en pleine largeur etait une invention du theme. */

  /* Le bouton et le captcha gardent leurs 304px, comme en production. */
  body#contact .contact-prod-form__actions > *,
  body#contact .contact-prod-form__captcha,
  body#contact .contact-prod-form__captcha-box,
  body#contact .contact-prod-form__submit {
    width: 304px;
    max-width: 100%;
    max-width: none;
  }

  body#contact .contact-prod-form__captcha .g-recaptcha {
    transform-origin: top left;
  }

  body#category .catalog-card__actions {
    display: none;
  }

  .subscription-config__grid,
  .related-grid--duo {
    grid-template-columns: 1fr;
  }

  .site-footer .footer-copyright__inner {
    gap: 16px;
  }

  body#authentication .login-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  body#authentication .auth-column--login,
  body#authentication .auth-column--register {
    width: 100%;
    max-width: none;
  }

  /* L'inscription garde ses deux colonnes en mobile : c'est ce que fait la
     production (col-xs-6), le theme la repassait en une seule. */

  body#authentication .register-btn,
  body#authentication .auth-captcha__box,
  body#authentication .auth-login-form,
  body#authentication .auth-cookies {
    max-width: none;
    width: 100%;
  }

  body#authentication .auth-register-actions {
    justify-content: stretch;
  }

  /* Onglets : gouttière et rembourrage resserrés pour deux libellés lisibles
     côte à côte jusqu'à 320px. */
  body#authentication .auth-tabs {
    gap: 6px;
  }

  body#authentication .auth-tab {
    padding: 12px 10px;
    font-size: 13px;
  }
}

body#checkout .breadcrumb-list .is-muted {
  color: #767676;
}

/* Conteneur de la production : 1200px. Le bandeau de titre porte 15px de
   gouttiere ; la grille en dessous n'en porte pas, ce sont ses colonnes qui les
   portent (comme les .col-* d'une .row Bootstrap). */
body#checkout .delivery-heading .container-shell,
body#checkout .delivery-heading .container-fluid {
  width: min(100%, 1200px);
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

body#checkout .delivery-layout--prod {
  width: min(100%, 1200px);
  max-width: 1200px;
}

body#checkout .delivery-heading {
  margin-bottom: 0;
}

body#checkout .delivery-heading h1 {
  margin: 0;
  padding: 18px 0 16px;
  font-size: 37px;
  line-height: 1.05;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  color: #282828;
}

/* Étape paiement : le bandeau titre prod (.payment-heading) = padding vertical
   20px (porté par le h1), bordure basse #e6e6e6, AUCUN padding/margin propre au
   bandeau (sinon décalage vertical vs prod : mesuré heading=74, contenu à 204).
   On neutralise le padding 20/20 et le margin-bottom 40 hérités de la livraison. */
body#checkout .delivery-page--payment .delivery-heading {
  padding: 0;
  margin-bottom: 0;
  border-bottom: 1px solid #e6e6e6;
}

body#checkout .delivery-page--payment .delivery-heading h1 {
  padding: 20px 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 33px;
  color: #282828;
}

/* Grille de la production : col-md-3 pour l'adresse (25%), le reste pour le
   recapitulatif, plafonne a 470px et cale a droite. Le `1fr + 516px` du theme
   donnait une colonne d'adresse deux fois trop large. */
body#checkout .delivery-layout--prod {
  margin: 0 auto;
  padding: 44px 0 0;
  grid-template-columns: 25% 75%;
  gap: 0;
}

body#checkout .delivery-main,
body#checkout .delivery-summary {
  padding-left: 15px;
  padding-right: 15px;
}

body#checkout .delivery-summary > * {
  width: 100%;
  max-width: 470px;
  margin-left: auto;
}

body#checkout .delivery-card {
  max-width: none;
}

@media (min-width: 768px) and (max-width: 991px) {
  body#checkout .delivery-layout--prod {
    grid-template-columns: 33.3333% 66.6667%;
  }
}

@media (max-width: 767px) {
  body#checkout .delivery-layout--prod {
    grid-template-columns: minmax(0, 1fr);
  }
}

body#checkout .delivery-main,
body#checkout .delivery-summary {
  min-width: 0;
}

body#checkout .delivery-card {
  color: #282828;
}

body#checkout .delivery-card__title {
  margin: 0 0 28px;
  font-size: 24px;
  line-height: 1.2;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  color: #282828;
}

body#checkout .delivery-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.75;
  color: #282828;
}

body#checkout .delivery-choice__input {
  width: 18px;
  height: 18px;
  margin: 3px 0 0;
  accent-color: #000;
}

body#checkout .delivery-choice__text {
  display: block;
  max-width: 540px;
}

body#checkout .delivery-choice--alternate {
  margin-bottom: 46px;
}

body#checkout .delivery-choice__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  border: 1px solid #8b8b8b;
  border-radius: 50%;
  color: #6f6f6f;
  font-size: 18px;
  line-height: 1;
  flex: 0 0 22px;
}

body#checkout .delivery-address-block {
  padding-top: 6px;
}

body#checkout .delivery-address-block__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

body#checkout .delivery-address-block__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #9a9a9a;
  text-decoration: none;
}

body#checkout .delivery-address-block__action:hover {
  color: #000;
}

body#checkout .delivery-address-block__action svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

body#checkout .delivery-address-block__content {
  max-width: 420px;
}

body#checkout .delivery-address-block__alias {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
  color: #5d5d5d;
}

body#checkout .delivery-address-block__formatted {
  font-size: 14px;
  line-height: 1.7;
  color: #5d5d5d;
}

body#checkout .delivery-address-block__zone {
  margin-top: 24px;
}

body#checkout .delivery-address-block__zone-label,
body#checkout .delivery-address-block__zone-value {
  margin: 0;
}

body#checkout .delivery-address-block__zone-label {
  font-size: 16px;
  line-height: 1.35;
  color: #282828;
}

body#checkout .delivery-address-block__zone-value {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: #5d5d5d;
}

body#checkout .delivery-summary {
  display: grid;
  gap: 28px;
  align-content: start;
}

body#checkout .delivery-summary__card {
  background: #fff;
  padding: 20px 22px 24px;
}

body#checkout .delivery-summary__product + .delivery-summary__product {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #ececec;
}

body#checkout .delivery-summary__product-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px 104px;
  gap: 16px;
  align-items: start;
}

body#checkout .delivery-summary__product-name {
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 700;
  color: #282828;
}

body#checkout .delivery-summary__metric {
  display: grid;
  gap: 2px;
}

body#checkout .delivery-summary__metric-label {
  font-size: 14px;
  line-height: 1.35;
  color: #7b7b7b;
}

body#checkout .delivery-summary__metric-value {
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
  color: #000;
}

body#checkout .delivery-summary__metric--price,
body#checkout .delivery-summary__metric--price .delivery-summary__metric-value {
  text-align: right;
}

body#checkout .delivery-summary__zones {
  margin-top: 18px;
}

body#checkout .delivery-summary__zones-label,
body#checkout .delivery-summary__zones-value {
  margin: 0;
}

body#checkout .delivery-summary__zones-label {
  font-size: 14px;
  line-height: 1.45;
  color: #282828;
}

body#checkout .delivery-summary__zones-value {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: #5d5d5d;
}

body#checkout .delivery-summary__totals {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #ececec;
}

body#checkout .delivery-summary__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  line-height: 1.45;
  color: #282828;
}

body#checkout .delivery-summary__line + .delivery-summary__line {
  margin-top: 4px;
}

body#checkout .delivery-summary__line > span:last-child {
  color: #5d5d5d;
}

body#checkout .delivery-summary__line--total {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
}

body#checkout .delivery-summary__line--total > span:last-child {
  color: #000;
}

body#checkout .delivery-summary__form {
  display: grid;
  gap: 18px;
}

body#checkout .delivery-summary__terms {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #4f4f4f;
}

body#checkout .delivery-summary__terms input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #000;
  flex: 0 0 18px;
}

body#checkout .delivery-summary__terms a {
  color: #4f4f4f;
  text-decoration: none;
}

body#checkout .delivery-summary__terms a:hover {
  text-decoration: underline;
}

body#checkout .delivery-summary__submit {
  justify-self: end;
  min-width: 198px;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  border: 0;
  border-radius: 2px;
  background: #000;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
}

body#checkout .delivery-summary__submit:hover {
  background: #1f1f1f;
}

body#checkout .delivery-summary__submit svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* La production ne passe en une colonne qu'en dessous de 768px (col-sm-4),
   pas des 991px. */
@media (max-width: 767px) {
  body#checkout .delivery-layout--prod {
    gap: 32px;
    padding-top: 28px;
  }

  body#checkout .delivery-summary__submit {
    justify-self: stretch;
    width: 100%;
  }
}

@media (max-width: 767px) {
  body#checkout .delivery-heading .container-shell,
  body#checkout .delivery-heading .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  body#checkout .delivery-heading h1 {
    font-size: 30px;
  }

  body#checkout .delivery-card__title {
    font-size: 22px;
  }

  body#checkout .delivery-summary__card {
    padding: 18px;
  }

  body#checkout .delivery-summary__product-head {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body#checkout .delivery-summary__metric--price,
  body#checkout .delivery-summary__metric--price .delivery-summary__metric-value {
    text-align: left;
  }
}

/* Checkout delivery parity with prod */
body#checkout .delivery-page {
  padding-bottom: 40px;
  background: #f4f4f4;
}

/* Étape paiement : fond BLANC comme la prod (body prod = #fff). Le formulaire
   et le récapitulatif (déjà blancs) se fondent dans la page, sans effet « carte
   grise ». Scopé au paiement pour ne pas toucher la livraison. */
body#checkout .delivery-page--payment {
  background: #fff;
}

body#checkout .delivery-heading {
  background: #fff;
  margin-bottom: 40px;
  padding-top: 20px;
  padding-bottom: 20px;
}

body#checkout .delivery-heading h1 {
  margin: 0;
  padding: 0;
  font-size: 30px;
  line-height: 1.1;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

/* Doublon retire : il imposait `1fr + 430px` et ecrasait la grille de la
   production (25% / 75%) definie plus haut. */

/* La largeur de la carte vient de sa colonne (voir la grille plus haut). */

/* Titre en NOIR : cette regle, doublon de celle plus haut, le repassait en rouge
   (#e62e2f). La production l'affiche en Roboto 20px/400, noir, mb 15px. */
body#checkout .delivery-card__title {
  margin: 0 0 15px;
  font-size: 20px;
  line-height: 1.2;
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 400;
  color: #000000;
}

body#checkout .delivery-choice {
  gap: 14px;
  margin: 0 0 16px;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #282828;
}

body#checkout .delivery-choice--gift .delivery-choice__text {
  max-width: 470px;
  text-align: left;
}

body#checkout .delivery-choice--alternate {
  margin-bottom: 48px;
}

body#checkout .delivery-choice--alternate .delivery-choice__text {
  max-width: 500px;
}

body#checkout .delivery-choice__input,
body#checkout .delivery-summary__terms input {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #8f8f8f;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
}

body#checkout .delivery-choice__input:checked,
body#checkout .delivery-summary__terms input:checked {
  border-color: #000;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.5l2.8 2.8L12.8 4.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

body#checkout .delivery-choice__input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  flex: 0 0 16px;
}

body#checkout .delivery-choice__plus {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-color: #9c9c9c;
  color: #999;
  font-size: 18px;
  flex: 0 0 20px;
}

body#checkout .delivery-address-block__actions {
  gap: 8px;
  margin-bottom: 12px;
}

body#checkout .delivery-address-block__action {
  width: 20px;
  height: 20px;
  color: #b3b3b3;
}

body#checkout .delivery-address-block__action svg {
  width: 20px;
  height: 20px;
}

body#checkout .delivery-address-block__alias,
body#checkout .delivery-address-block__formatted,
body#checkout .delivery-address-block__empty,
body#checkout .delivery-address-block__add,
body#checkout .delivery-zone-block__value,
body#checkout .delivery-summary__metric-label,
body#checkout .delivery-summary__metric-value,
body#checkout .delivery-summary__zones-label,
body#checkout .delivery-summary__zones-value,
body#checkout .delivery-summary__line,
body#checkout .delivery-summary__terms,
body#checkout .delivery-summary__error,
body#checkout .delivery-summary__submit {
  font-family: "Roboto", Arial, sans-serif;
}

body#checkout .delivery-address-block__alias {
  margin-bottom: 8px;
  color: #5c5c5c;
}

body#checkout .delivery-address-block__formatted,
body#checkout .delivery-address-block__empty {
  line-height: 1.55;
  color: #686868;
}

body#checkout .delivery-address-block__add {
  display: inline-block;
  margin-top: 8px;
  color: #000;
  text-decoration: underline;
}

body#checkout .delivery-zone-block {
  margin-top: 40px;
}

body#checkout .delivery-zone-block__label,
body#checkout .delivery-zone-block__value {
  margin: 0;
}

body#checkout .delivery-zone-block__label {
  font-size: 16px;
  line-height: 1.35;
  color: #282828;
}

body#checkout .delivery-zone-block__value {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: #5d5d5d;
}

body#checkout .delivery-summary {
  gap: 16px;
}

body#checkout .delivery-summary__card {
  padding: 28px 28px 30px;
  border-radius: 5px;
}

body#checkout .delivery-summary__product + .delivery-summary__product {
  margin-top: 24px;
  padding-top: 28px;
  border-top-color: #ece7df;
}

body#checkout .delivery-summary__product-head {
  grid-template-columns: minmax(0, 1fr) 72px 92px;
  gap: 14px;
}

body#checkout .delivery-summary__product-name {
  color: #282828;
}

body#checkout .delivery-summary__zones {
  margin-top: 20px;
}

body#checkout .delivery-summary__zones-value {
  margin-top: 10px;
  color: #66707f;
}

body#checkout .delivery-summary__totals {
  margin-top: 22px;
  padding-top: 24px;
  border-top-color: #ece7df;
}

body#checkout .delivery-summary__line {
  font-size: 15px;
  color: #596375;
}

body#checkout .delivery-summary__line > span:last-child {
  color: #2f3640;
}

body#checkout .delivery-summary__line--total {
  margin-top: 12px;
  font-size: 19px;
  color: #1f2732;
}

body#checkout .delivery-summary__line--total > span:last-child {
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

body#checkout .delivery-summary__form {
  gap: 14px;
}

body#checkout .delivery-summary__terms {
  gap: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: #535b67;
}

body#checkout .delivery-summary__terms input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  flex: 0 0 18px;
}

body#checkout .delivery-summary__terms.is-invalid input {
  border-color: #c45c52;
}

body#checkout .delivery-summary__terms a {
  color: #535b67;
}

body#checkout .delivery-summary__error {
  padding: 18px 22px;
  border: 1px solid #efc4bf;
  border-radius: 5px;
  background: #f9dedd;
  font-size: 14px;
  line-height: 1.45;
  color: #c45c52;
}

body#checkout .delivery-summary__error.is-hidden {
  display: none;
}

body#checkout .delivery-summary__submit {
  min-width: 180px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 4px;
}

body#checkout .delivery-summary__submit svg {
  width: 27px;
  height: 27px;
}

/* Une colonne seulement sous 768px : la production conserve ses deux colonnes
   (col-sm-4) jusqu'a 991px. */
@media (max-width: 767px) {
  body#checkout .delivery-layout--prod {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  body#checkout .delivery-card {
    max-width: none;
  }
}

@media (max-width: 767px) {
  body#checkout .delivery-heading h1 {
    font-size: 30px;
  }

  body#checkout .delivery-choice--gift .delivery-choice__text {
    text-align: left;
  }

  body#checkout .delivery-choice--alternate {
    margin-bottom: 40px;
  }

  body#checkout .delivery-zone-block {
    margin-top: 36px;
  }

  body#checkout .delivery-summary__card {
    padding: 22px 20px 24px;
  }
}

/* ── Panier vide ── */
.basket-empty {
  padding-bottom: 0;
}

.basket-empty__text {
  text-align: center;
  font-size: 22px;
  color: #b0b0b0;
  padding: 60px 20px;
  margin: 0;
}

/* ── Page Paiement (parité pixel mesurée sur la prod, viewport 1440) ── */
/* Colonne FORM = col-sm-7 (x=135, w=682,5). Padding interne 15px comme un
   .col-sm-* → contenu à 150. Fond transparent (la ligne prod est blanche). */
.payment-main {
  background: transparent;
  padding: 0 15px;
}

/* Bloc « moyen de paiement » = .payment-types prod : padding 30px + 15px
   (container-fluid interne) → contenu à 165 ; border-bottom 1px #f0f0f0 =
   séparateur pleine largeur colonne (652,5). */
.payment-main .payment-types {
  padding: 30px 15px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

/* Titre « Sélectionnez votre moyen de paiement » = h3 prod : 16px gras,
   #282828, margin-top 20 / margin-bottom 15. */
.payment-label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  color: #282828;
  margin: 20px 0 15px;
}

/* Encart carte = label .radio-inline prod : padding-left 20 (place du radio) ;
   l'IMAGE (img-visa.png, 90×67) porte padding 2px + bordure 2px noire →
   border-box 98×75 (identique à la prod). */
.payment-main .pay-method {
  display: block;
  width: auto;
  margin: 0;
  padding: 0 0 0 20px;
  border: 0;
  background: none;
  cursor: pointer;
}

.payment-main .pay-method__img {
  display: block;
  box-sizing: content-box;
  width: 90px;
  height: 67px;
  padding: 2px;
  border: 2px solid #000;
}

/* Variante « Prélèvement automatique » (abonnement sans engagement) : image prod
   90×90 (texte sur 2 lignes) → même largeur, hauteur 90 comme la prod. */
.payment-main .pay-method__img--prelev {
  height: 90px;
}

/* Formulaire Stripe = iframe Qiota prod : x=180, largeur 592,5. Dans le contenu
   de la colonne (150 → 802,5), une marge de 30px de chaque côté donne 180 →
   772,5 (592,5). */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 30px;
}

@media (max-width: 767px) {
  .payment-main {
    padding: 0 15px 20px;
  }
  .payment-main .payment-types {
    padding: 20px 0;
  }
  .payment-methods {
    margin: 0;
  }
}

/* ── Formulaire de paiement (parité prod Angular : Card Element éclaté) ── */

/* Encart moyen de paiement unique — aligné à gauche, logos CB+VISA sur une
   ligne puis Mastercard en dessous (parité prod). */
.payment-methods .pay-method {
  align-self: flex-start;
  width: 132px;
  border: 1px solid #111;
  border-radius: 2px;
  padding: 12px 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: #fff;
  text-align: left;
}

.payment-methods .pay-method__logos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.payment-methods .pay-method__logos-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-methods .pay-logo {
  height: 22px;
  width: auto;
}

.payment-methods .pay-logo--mc {
  height: 20px;
}

.payment-methods .pay-method__label {
  font-size: 13px;
  line-height: 1.25;
  color: #3f5f8f;
  font-weight: 400;
}

/* Grille de l'étape paiement — parité pixel avec la prod (source Angular).
   La prod est une grille Bootstrap dans un .container-fluid (max 1200, padding
   15 → contenu 1170) : FORM = col-sm-7 (58.333%) rendu à GAUCHE, RÉCAP =
   col-sm-4 (33.333%) rendu à DROITE, séparés par la colonne vide 1/12
   (8.333% ≈ 97,5px). On reproduit exactement : padding latéral 15px (→ 1170
   interne), pistes 58.333%/33.333%, gouttière 8.333%. Chaque colonne porte en
   plus son propre padding interne 15px (cf. .payment-main / .payment-panel),
   comme le padding des .col-sm-* de Bootstrap. */
body#checkout .delivery-layout--payment {
  padding: 0 15px;
  grid-template-columns: 58.3333% 33.3333%;
  column-gap: 8.3334%;
}

/* Récapitulatif paiement — reproduction EXACTE (mesurée) des 3 blocs prod
   `.payment-total` (Sous-total / Prix de livraison / Total). Chaque bloc prod :
   background #fff, padding 30px 0 + container-fluid interne 15px, border-bottom
   1px #f0f0f0 pleine largeur colonne (360), contenu inset 15px (945→1275).
   DOM = .col-sm-6 (libellé h3) + .col-sm-6 (montant .the-total.pull-right) ;
   le libellé h3 a margin-top:45px et le montant margin-top:0 → le montant (gros,
   NOIR, mesuré rgb(0,0,0)) en haut à droite, le libellé (16px #282828) plus bas
   à gauche. Le padding 30px 15px porte la bordure sur 360 et inset le contenu. */
.payment-panel {
  padding: 0 15px;
  background: transparent;
}

.payment-panel .delivery-panel__item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 30px 15px;
  border-bottom: 1px solid #f0f0f0;
}

/* Montant : gros, NOIR (#000, mesuré sur la prod), gras, calé en haut à droite. */
.payment-panel .delivery-panel__total-amount {
  order: 1;
  margin: 0;
  text-align: right;
  font-size: 30px;
  line-height: 1.1;
  font-weight: 700;
  color: #000;
  white-space: nowrap;
}

/* Libellé : 16px #282828, poussé vers le bas (margin-top:45px comme le h3 prod).
   margin-bottom:16px reproduit la marge basse du <h3> Bootstrap prod, qui porte
   la hauteur du bloc à 138,59 (30+45+17,59+16+30). */
.payment-panel .delivery-panel__total-label {
  order: 0;
  margin: 45px 0 15px;
  text-align: left;
  font-size: 16px;
  line-height: 1.1;
  color: #282828;
  font-weight: 500;
}

.payment-panel .delivery-panel__item--total .delivery-panel__total-amount {
  font-size: 30px;
}

@media (max-width: 767px) {
  body#checkout .delivery-layout--payment {
    grid-template-columns: minmax(0, 1fr);
  }
  .payment-panel .delivery-panel__item {
    padding: 20px 0;
  }
  .payment-panel .delivery-panel__total-label {
    margin-top: 0;
  }
}

.payment-methods .pay-sep {
  border: 0;
  border-top: 1px solid #f0f0f0;
  margin: 20px 0 4px;
}

/* Copie prélèvement récurrent / 3D-Secure */
.payment-methods .pay-notice {
  margin: 12px 0 8px;
}

.payment-methods .pay-notice p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #454545;
}

.payment-methods .pay-notice p:last-child {
  margin-bottom: 0;
}

.payment-methods .pay-notice strong {
  font-weight: 700;
  color: #1f1f1f;
}

/* Boutons express — parité prod : Google Pay (bouton natif) à gauche, Link
   (Stripe) à droite, deux colonnes égales de même hauteur. Les emplacements
   vides et la rangée entière sont masqués en JS (display:none). */
.payment-methods .pay-express {
  display: flex;
  align-items: stretch;
  gap: 14px;
  margin: 18px 0 4px;
}

.payment-methods .pay-express__slot {
  flex: 1 1 0;
  min-width: 0;
}

/* Le bouton Google Pay (buttonSizeMode:'fill') remplit cette boîte. */
.payment-methods .pay-express__gpay {
  height: 44px;
}

.payment-methods .pay-express__gpay > div,
.payment-methods .pay-express__gpay iframe {
  width: 100% !important;
  height: 100% !important;
}

/* Groupe carte : un seul cadre arrondi, rangées séparées par des filets. */
.payment-methods .pay-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  margin-top: 14px;
}

.payment-methods .pay-card__row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  min-height: 54px;
  padding: 0 14px;
}

.payment-methods .pay-card__row--name {
  border-bottom: 0;
}

.payment-methods .pay-card__row--number {
  justify-content: space-between;
  gap: 10px;
}

.payment-methods .pay-card__row--number .pay-el {
  flex: 1;
}

/* Le bouton d'auto-remplissage Link que Stripe injecte dans le champ Numéro
   (iframe cardNumberButton) porte un style inline `display:block !important`
   qu'aucune feuille externe ne peut battre : il est masqué en JS (voir
   checkout.tpl, hideStripeLinkButton). */

.payment-methods .pay-card__row--split {
  padding: 0;
}

.payment-methods .pay-card__row--split .pay-el {
  flex: 1;
  padding: 0 14px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.payment-methods .pay-card__row--split #flaash-card-expiry {
  border-right: 1px solid #e0e0e0;
}

.payment-methods .pay-el {
  min-width: 0;
}

.payment-methods .pay-name {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  font-family: "Roboto", Arial, sans-serif;
  color: #333;
  padding: 0;
}

.payment-methods .pay-name::placeholder {
  color: #9a9a9a;
}

/* Bouton "Préremplir" (mode test uniquement) */
.payment-methods .pay-prefill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #12261b;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.payment-methods .pay-prefill svg {
  width: 16px;
  height: 16px;
}

/* Caption Stripe */
.payment-methods .pay-secure {
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: #8a8a8a;
  margin: 20px 0 14px;
}

/* Bouton VALIDER (pilule rouge centrée) */
.payment-methods .payment-submit--validate {
  display: block;
  margin: 0 auto;
  min-width: 280px;
  height: 56px;
  padding: 0 32px;
  border: 0;
  border-radius: 30px;
  background: #d0413a;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-family: "Roboto", Arial, sans-serif;
  cursor: pointer;
  transition: background 0.15s ease;
}

.payment-methods .payment-submit--validate:hover {
  background: #c1362f;
}

.payment-methods .payment-submit--validate:disabled {
  opacity: 0.6;
  cursor: default;
}

.payment-methods .payment-error {
  font-size: 14px;
  color: #d0413a;
  margin: 12px 0 0;
}

@media (max-width: 767px) {
  .payment-methods .payment-submit--validate {
    width: 100%;
    min-width: 0;
  }
}

/* FLAASH Theme Patch v1.2.0 */

/* Le calage du hero au-dela de 1200px etait fait ici a coups de gap/padding
   arbitraires (gap: 195px, padding-left: 13px). Ces valeurs ne tenaient qu'a
   cette largeur et decalaient la grille partout ailleurs. La geometrie vient
   desormais des colonnes de 50% de main.css, qui reproduisent la production a
   toutes les largeurs. */

body#category .catalog-page .page-title {
  margin-top: 12px;
  margin-bottom: 40px;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: normal;
  color: #282828;
}

body#category .catalog-page .page-text {
  max-width: 820px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: #505050;
}

/* Fond gris de la section catalogue (derriere le titre + toutes les images produits),
   pleine largeur, du titre jusqu'a la fin de la liste ; s'arrete avant la barre de
   reassurance (Paiement securise / Livraison / Contactez-nous / Satisfaction) qui est
   dans le footer et reste blanche. Comme la prod (#f4f4f4). */
body#category .catalog-page {
  background: #f4f4f4;
}

/* Les gouttieres viennent des 15px de padding des cartes (main.css), comme les
   .col-md-3 de la production : pas de column-gap, 30px entre les rangees. */
body#category .catalog-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 30px;
  align-items: start;
}

/* Abonnements : plus aucune regle de grille ici. main.css ne donne plus de
   styles au modificateur --subscriptions, donc la categorie hérite directement
   de .catalog-grid, exactement comme --issues : meme taille de visuel, memes
   gouttieres, meme survol. Cette parite ne depend donc plus d un override. */

body#category .catalog-grid--donations {
  /* Aligne sur la prod : 4 colonnes ~270px (Dons = 4+2), comme --issues/--merch. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 30px;
}

body#category .catalog-grid--offers {
  /* Aligne sur la prod : 4 colonnes ~270px comme --issues/--merch et la base.
     L ancien repeat(3,1fr) donnait des cartes 372px trop grandes. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0;
  row-gap: 30px;
}

body#category .catalog-card {
  display: grid;
  align-content: start;
  /* 15px : la gouttiere sous le visuel de la production. */
  gap: 15px;
  transform: translateY(0);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

body#category .catalog-card__media {
  position: relative;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

body#category .catalog-card__media::after {
  background: rgba(40, 40, 40, 0.5);
}

body#category .catalog-card__media-link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 240 / 315;
  /* gris = fond de section : toute marge (padding gris cuit dans la vignette) se fond
     au repos et s'assombrit au survol comme la prod ; jamais de blanc. */
  background: #f4f4f4;
}

body#category .catalog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #f4f4f4;
}

/* Parite prod : Merch/Dons plein cadre comme les autres categories.
   Les fichiers sont deja pleins cadre (remplissent 99%) ; le padding + fond gris
   retrecissait l'image (233x317 au lieu de 270x355 en prod). */
body#category .catalog-card--merch .catalog-card__media-link,
body#category .catalog-card--donation .catalog-card__media-link {
  padding: 0;
  background: #f4f4f4;
}

/* Abonnements : AUCUNE regle specifique. La categorie rend exactement le meme
   composant que Numeros (miniatures/product.tpl) avec le meme CSS ; le fond
   #f4f4f4 vient deja de la regle generique `body#category .catalog-card__media-link`
   ci-dessus. Ne PAS ajouter ici de padding ni de column-gap pour « aerer » les
   visuels : dans cette grille de 4 colonnes a largeur totale fixe, tout espace
   gagne est pris sur la largeur de l'image (mesure : padding sur le lien ->
   246x354 ; column-gap 24px -> 252x331). Si les photos d'abonnement paraissent
   plus serrees que les couvertures, c'est parce qu'elles sont grises jusqu'au
   bord du fichier la ou les couvertures ont des bords clairs proches du fond de
   page : c'est tonal, pas geometrique, et cela se corrige dans les fichiers
   images, pas dans le CSS. */

body#category .catalog-card__actions {
  position: absolute;
  inset: auto 0 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
  z-index: 2;
}

body#category .catalog-card__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  max-width: 140px;
  min-height: 0;
  padding: 14px 16px 14px 50px;
  border-radius: 0;
  background: #000;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  font-family: "Roboto", Arial, sans-serif;
  text-decoration: none;
  box-shadow: none;
  position: relative;
}

body#category .catalog-card__buy::before {
  content: "";
  width: 24px;
  height: 22px;
  flex: 0 0 24px;
  background: url("../images/icon-basket.png") no-repeat center;
  background-size: 100%;
  /* l'icone source est noire -> la passer en blanc pour la voir sur le bouton noir (comme prod) */
  filter: invert(1);
  position: absolute;
  left: 15px;
  top: 10px;
}

body#category .catalog-card__content {
  display: grid;
  gap: 8px;
  padding-top: 2px;
}

body#category .catalog-card__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
}

body#category .catalog-card__title a {
  color: #181818;
  text-decoration: none;
}

body#category .catalog-card__price {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  color: #4e4e4e;
}

@media (hover: hover) and (pointer: fine) {
  body#category .catalog-card:hover,
  body#category .catalog-card:focus-within {
    box-shadow: none;
    transform: translateY(-3px);
  }

  body#category .catalog-card:hover .catalog-card__media::after,
  body#category .catalog-card:focus-within .catalog-card__media::after {
    opacity: 1;
  }

  body#category .catalog-card:hover .catalog-card__actions,
  body#category .catalog-card:focus-within .catalog-card__actions {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  body#category .catalog-card:hover .catalog-card__buy,
  body#category .catalog-card:focus-within .catalog-card__buy {
    background: #000;
    color: #fff;
  }
}

body#product.product-pack-collector .offer-page--collector .offer-hero {
  gap: 56px;
  align-items: start;
}

body#product.product-pack-collector .offer-page--collector .offer-hero__media img {
  display: block;
  width: 100%;
  max-width: 540px;
  background: #fff;
  object-fit: contain;
}

body#product.product-pack-collector .offer-page--collector .product-add-to-cart .offer-buy__submit {
  min-height: 46px;
  padding: 0 22px;
}

body#product.product-pack-collector .offer-page--collector .related-grid .catalog-card {
  gap: 10px;
}

/* Cascade responsive alignee sur la prod : 4/ligne >=992px, 2/ligne 576-991px,
   1/ligne <576px (breakpoints type Bootstrap). Remplace l ancien 4->3->2. */
@media (max-width: 991px) {
  body#category .catalog-grid,
  body#category .catalog-grid--subscriptions,
  body#category .catalog-grid--donations,
  body#category .catalog-grid--offers,
  body#category .catalog-grid--issues,
  body#category .catalog-grid--merch {
    /* 2 colonnes egales de 768 a 991px (col-sm-6 de la production) ; le visuel
       reste plafonne a 292px et centre dans sa colonne. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0;
    row-gap: 30px;
  }
}

@media (max-width: 767px) {
  body#category .catalog-grid,
  body#category .catalog-grid--subscriptions,
  body#category .catalog-grid--donations,
  body#category .catalog-grid--offers,
  body#category .catalog-grid--issues,
  body#category .catalog-grid--merch {
    /* 1 colonne pleine largeur sous 768px ; le visuel reste plafonne a 292px et
       centre (main.css). La production bascule a 768, pas a 576. */
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 30px;
  }
}

@media (max-width: 767px) {
  body#category .catalog-page .page-title {
    margin-bottom: 26px;
  }

  body#category .catalog-card {
    gap: 10px;
  }

  body#category .catalog-card__title {
    font-size: 13px;
    line-height: 1.3;
  }

  body#category .catalog-card__price {
    font-size: 13px;
  }

  body#category .catalog-card__media-link {
    aspect-ratio: 240 / 315;
  }

  body#category .catalog-card--merch .catalog-card__media-link,
  body#category .catalog-card--donation .catalog-card__media-link {
    padding: 0;
  }

  body#category .catalog-card__actions {
    display: none;
  }
}

/* ── Modale "J'ai oublie mon mot de passe" (parite prod) ──────────────────── */
.flaash-modal[hidden] {
  display: none !important;
}

.flaash-modal {
  position: fixed;
  z-index: 10050;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 30px 15px;
}

.flaash-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.flaash-modal__dialog {
  position: relative;
  width: min(100%, 800px);
  margin-top: 30px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.flaash-modal__header {
  display: flex;
  align-items: center;
  min-height: 63px;
  padding: 15px;
  background: #282828;
  color: #fff;
}

.flaash-modal__pin {
  display: inline-flex;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  color: #ff3038;
}

.flaash-modal__pin svg {
  width: 100%;
  height: 100%;
}

.flaash-modal__header h2 {
  flex: 1 1 auto;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.flaash-modal__close {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #cfcfcf;
  font: 700 20px/1 Arial, sans-serif;
  cursor: pointer;
}

.flaash-modal__body {
  padding: 30px 30px 45px;
}

.flaash-forgot-form__intro {
  margin: 0 0 26px;
  color: #282828;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.flaash-forgot-form__row {
  display: grid;
  grid-template-columns: 30% 70%;
  align-items: center;
}

.flaash-forgot-form__label {
  margin: 0;
  padding-right: 15px;
  color: #282828;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.flaash-forgot-form__input.form-control {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  background: #f7f7f7;
  font-size: 14px;
  color: #282828;
}

.flaash-forgot-form__message {
  margin: 18px 0 0;
  padding: 10px 12px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.flaash-forgot-form__message--success {
  background: #eaf7ea;
  color: #1f7a1f;
  border: 1px solid #bfe3bf;
}

.flaash-forgot-form__message--error {
  background: #fdecec;
  color: #b02121;
  border: 1px solid #f2c4c4;
}

.flaash-forgot-form__actions {
  margin-top: 24px;
  padding-left: 30%;
}

.flaash-forgot-form__submit {
  min-width: 130px;
  min-height: 44px;
  padding: 0 26px;
  border: 0;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.flaash-forgot-form__submit:hover {
  background: #202020;
}

.flaash-forgot-form__submit[disabled] {
  opacity: 0.6;
  cursor: default;
}

body.flaash-modal-open {
  overflow: hidden;
}

@media (max-width: 767px) {
  .flaash-forgot-form__row,
  .flaash-forgot-form__actions {
    grid-template-columns: 1fr;
    padding-left: 0;
  }

  .flaash-forgot-form__label {
    margin-bottom: 8px;
  }
}

/* ── Compte : liste des abonnements récurrents ── */
.account-subscriptions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-subscription {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #e5e5e5;
}

.account-subscription__name {
  display: block;
  font-weight: 600;
  color: #111;
}

.account-subscription__meta {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #666;
}

.account-subscription__cancel {
  margin: 0;
  flex: 0 0 auto;
}

.account-subscription__cancel-btn {
  padding: 9px 20px;
  border: 1px solid #d11;
  border-radius: 4px;
  background: #fff;
  color: #d11;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.account-subscription__cancel-btn:hover {
  background: #d11;
  color: #fff;
}

.account-subscription__flag {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: #a06a00;
}

/* ── Modale "Votre panier" (ajout au panier), calquée sur boutique.flaash.fr ── */
.flaash-cart-modal__dialog {
  width: min(100%, 860px);
  margin-top: 8px;
  overflow: hidden;
}

.flaash-cart-modal__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 63px;
  padding: 15px 45px;
  background: #282828;
  color: #fff;
}

.flaash-cart-modal__header h2 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
}

.flaash-cart-modal__close {
  position: absolute;
  top: 12px;
  right: 15px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: 400 26px/1 Arial, sans-serif;
  opacity: 0.85;
  cursor: pointer;
}

.flaash-cart-modal__close:hover {
  opacity: 1;
}

.flaash-cart-modal__body {
  padding: 26px 24px;
  background: #fff;
  color: #333;
  font-size: 15px;
}

.flaash-cart-modal__message {
  margin: 0;
}

.flaash-cart-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  background: #ededed;
}

.flaash-cart-modal__continue,
.flaash-cart-modal__view {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 0;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.flaash-cart-modal__continue {
  background: #d9d9d9;
  color: #333;
}

.flaash-cart-modal__continue:hover {
  background: #cfcfcf;
}

.flaash-cart-modal__view {
  background: #111;
  color: #fff;
}

.flaash-cart-modal__view:hover {
  background: #000;
  color: #fff;
}

.flaash-cart-modal__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

.flaash-cart-modal__ico svg {
  width: 14px;
  height: 14px;
}

@media (max-width: 575px) {
  .flaash-cart-modal__footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .flaash-cart-modal__continue,
  .flaash-cart-modal__view {
    justify-content: center;
  }
}

/* ── Glyphicons Halflings (police d'icones Bootstrap 3, comme la prod) ────────
   Utilisee pour les icones d'action des adresses du compte (pencil/copy),
   a l'identique de boutique.flaash.fr. Fichiers dans ../fonts/. */
@font-face {
  font-family: "Glyphicons Halflings";
  src: url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),
       url("../fonts/glyphicons-halflings-regular.woff") format("woff"),
       url("../fonts/glyphicons-halflings-regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.glyphicon-pencil::before { content: "\270f"; }
.glyphicon-copy::before { content: "\e205"; }

/* =====================================================================
   FICHE PRODUIT — PARITE PIXEL AVEC LA PROD (boutique.flaash.fr)
   Valeurs mesurees via DevTools/computed-styles sur la prod (Angular).
   S'applique a TOUS les types (numeros, abonnements, merch, dons, offres).
   Reference : viewport 1440 -> container 1170 centre, media 585 + 30 + 555.
   ===================================================================== */

/* --- Fond : section claire 244 pleine largeur + panneau gris 175 a gauche
       (full-bleed, moitie gauche), comme section.product-details::before --- */
body#product .offer-page {
  padding-top: 0;
  background: #f4f4f4;
  position: relative;
}

/* La prod n'entoure jamais l'image d'un encart gris/padding propre : a toutes
   les tailles, l'image flotte sur le fond de la section (blanc/gris clair en
   mobile-tablette, ou sur le panneau gris plein-hauteur en desktop ci-dessous). */
body#product .offer-hero__media {
  background: transparent;
  padding: 0;
}

/* --- Bascule 2 colonnes vs empile : la prod (Bootstrap) passe en 1 colonne
       sous 992px (comme la grille "Vous aimerez aussi"). Le panneau gris a
       gauche / clair a droite existe des 992px, la geometrie fige en pixels
       (585 + 30 + 555, image 478) n'apparait qu'a partir de 1200px : en
       dessous, la grille reste fluide (regle de base .offer-hero). --- */
@media (min-width: 992px) {
  /* La prod n'a pas de bandeau breadcrumb gris pleine largeur : au meme point de
     rupture que le panneau image, le fond bascule deja gris/clair colonne par
     colonne, jusque dans la ligne du breadcrumb. */
  body#product .breadcrumb-bar {
    background: #f4f4f4;
    position: relative;
    overflow: hidden;
  }

  body#product .breadcrumb-bar::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    width: 50vw;
    background: #afafaf;
    z-index: 0;
  }

  body#product .breadcrumb-bar__inner {
    position: relative;
    z-index: 1;
  }

  body#product .offer-hero {
    position: relative;
    align-items: stretch;
  }

  body#product .offer-hero::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    width: 50vw;
    background: #afafaf;
    z-index: 0;
  }

  body#product .offer-hero > * {
    position: relative;
    z-index: 1;
  }

  body#product .offer-hero__media {
    background: transparent;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* --- GEOMETRIE DESKTOP (>=1200px) : container 1170 centre, 2 colonnes
       585 + 30 + 555, image cover 478. --- */
@media (min-width: 992px) {
  /* Le visuel garde sa taille naturelle (351x478) et se centre dans sa colonne,
     comme le `img-center` de la production. */
  body#product .offer-hero__media img {
    display: block;
    width: auto;
    height: 478px;
    max-width: 100%;
    margin: 40px auto 0;
    object-fit: contain;
    border-radius: 5px;
  }

  /* Colonne contenu : haut aligne au haut de colonne (pas d'offset) */
  body#product .offer-hero__body {
    padding-top: 0;
  }
}

/* --- Conteneur de la page produit : 1200px avec 15px de gouttiere, comme la
       production. Les 28px du conteneur generique du theme decalaient tout et
       rendaient la grille 585+30+555 trop large entre 992 et 1200px. --- */
body#product .offer-page > .container-shell {
  width: min(100%, 1200px);
  max-width: 1200px;
  padding-left: 15px;
  padding-right: 15px;
}

/* --- Au-dela de 992px la production reste sur deux .col-md-6 fluides (50/50),
       la grille annulant la gouttiere du conteneur par des marges negatives ;
       seule la colonne de droite porte 30px a gauche et 15px a droite. Une
       grille fixe 585+30+555 ne centrait pas le visuel au meme endroit. --- */
@media (min-width: 992px) {
  body#product .offer-hero {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 -15px;
    max-width: none;
  }

  body#product .offer-hero__media {
    padding: 0;
  }

  body#product .offer-hero__body {
    padding: 0 15px 0 30px;
  }
}

/* --- Visuel produit en pile : la production le plafonne a 250px sous 480px,
       puis a 350px de haut jusqu'a 767px, et le laisse a sa taille naturelle
       (351x478) au-dela. --- */
@media (max-width: 991px) {
  body#product .offer-hero__media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  body#product .offer-hero__media img {
    max-width: 350px;
    max-height: 350px;
  }
}

@media (max-width: 480px) {
  body#product .offer-hero__media img {
    max-width: 250px;
    max-height: 350px;
  }
}

/* --- Titre H1 : Roboto 28 / 700 / 30.8, #282828, mb 15 --- */
body#product .offer-page .hero-slide__title {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 30.8px;
  letter-spacing: normal;
  color: #282828;
  text-transform: none;
  margin: 0 0 15px;
}

/* --- Corps de texte : Roboto 14 / 23.8 (1.7), #5c5c5c, paragraphes espaces 15 --- */
body#product .offer-copy {
  display: block;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 23.8px;
  color: #5c5c5c;
}

body#product .offer-copy p,
body#product .offer-copy ul {
  margin: 15px 0 0;
}

body#product .offer-copy > *:first-child {
  margin-top: 0;
}

body#product .offer-copy strong {
  font-weight: 700;
  color: #282828;
}

body#product .offer-copy em {
  color: #5c5c5c;
}

/* --- Ligne quantite : label a gauche, stepper aligne a droite de la colonne --- */
body#product .qty-row {
  display: block;
  margin: 0;
}

body#product .offer-buy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 60px;
  margin-top: 34px;
}

body#product .qty-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

body#product .qty-line .qty-row__label {
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #282828;
  margin: 0;
}

/* Stepper : boutons +/- bordés blancs, input gris 244 bordé, controles joints */
body#product .qty-stepper {
  display: flex;
  border: 0;
  background: transparent;
}

body#product .qty-stepper button,
body#product .qty-stepper .qty-stepper__btn {
  width: 34px;
  height: 34px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

body#product .qty-stepper button:first-child {
  border-radius: 2px 0 0 2px;
  margin-right: -2px;
}

body#product .qty-stepper button:last-child {
  border-radius: 0 2px 2px 0;
  margin-left: -1px;
}

body#product .qty-stepper__input {
  width: 41px;
  height: 34px;
  border: 1px solid #d2d2d2;
  background: #f4f4f4;
  color: #282828;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  padding: 6px 8px;
}

/* --- Bouton Acheter : noir 63px, radius 4, bord 1px, Roboto 14 ;
       prix bold + icone panier 24x22 + label "Acheter" 400 --- */
body#product .offer-buy__actions {
  display: flex;
  align-items: flex-start;
}

body#product .product-add-to-cart .offer-buy__submit {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 63px;
  min-height: 63px;
  padding: 0 20px;
  border: 1px solid #000;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

body#product .product-add-to-cart .offer-buy__submit:hover:not(:disabled) {
  background: #1a1a1a;
}

body#product .product-add-to-cart .offer-buy__price {
  font-weight: 700;
  margin-right: 16px;
  white-space: nowrap;
}

body#product .product-add-to-cart .offer-buy__label {
  font-weight: 400;
  white-space: nowrap;
}

body#product .product-add-to-cart .offer-buy__divider {
  display: block;
  width: 1px;
  height: 20px;
  margin: 0 16px 0 0;
  background: rgba(255, 255, 255, 0.45);
}

body#product .product-add-to-cart .offer-buy__icon {
  width: 24px;
  height: 22px;
  margin: 0 13px 0 0;
  object-fit: contain;
}

/* --- Reference : Roboto 14, #5c5c5c --- */
body#product .offer-ref {
  margin-top: 30px;
  font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #5c5c5c;
}

/* --- La prod n'affiche jamais le libelle "TTC" / infos livraison sous le prix --- */
body#product .tax-shipping-delivery-label {
  display: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Modal de déconnexion — parité pixel avec la prod (« InformationModal »,
   valeurs mesurées sur boutique.flaash.fr). Bootstrap 3 modal-lg : dialog 900px
   centré (marge 30 auto), contenu blanc radius 6px + ombre, en-tête #282828
   (titre blanc 26px/400 centré), corps blanc padding 30 texte #5c5c5c 14px/1.7,
   backdrop noir 50%. Classes préfixées pour ne pas dépendre du Bootstrap thème.
   ───────────────────────────────────────────────────────────────────────── */
.flaash-logout-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2000;
  overflow-x: hidden;
  overflow-y: auto;
}

.flaash-logout-modal.is-open {
  display: block;
}

.flaash-logout-modal__backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

.flaash-logout-modal__dialog {
  position: relative;
  z-index: 1;
  width: auto;
  margin: 10px;
}

@media (min-width: 768px) {
  .flaash-logout-modal__dialog {
    width: 600px;
    margin: 30px auto;
  }
}

@media (min-width: 992px) {
  .flaash-logout-modal__dialog {
    width: 900px;
  }
}

.flaash-logout-modal__content {
  position: relative;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.flaash-logout-modal__header {
  position: relative;
  background: #282828;
  padding: 15px;
  border-radius: 6px 6px 0 0;
}

.flaash-logout-modal__title {
  margin: 0;
  color: #fff;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
}

.flaash-logout-modal__close {
  float: right;
  position: relative;
  top: 8px;
  margin-top: -2px;
  padding: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  opacity: 1;
  text-shadow: none;
  cursor: pointer;
}

.flaash-logout-modal__body {
  padding: 30px;
  color: #5c5c5c;
  font-size: 14px;
  line-height: 1.7;
}

.flaash-logout-modal__body p {
  margin: 0;
}