/**
 * VST43° — Volet newsletter (22.10). Section « Pied — volet newsletter » du layout Pied v2 (scripts/lettre-volet.php), mise en volet ici.
 * Mobile : barre en bas (le titre), dépliée en panneau au toucher, jamais en plein écran. Ordinateur : panneau de 380 px en bas à droite.
 * Les styles du formulaire viennent de vst-pied.css (.vst-pied .vst-lettre-form) ; spécificité « :is(…, #vst-x#vst-y) » comme vst-pied.css.
 * Apparition par transform (pas de décalage de mise en page) ; position au-dessus des barres d'achat et de panier par --vst-volet-bas (JS).
 */
/* Hors volet ouvert par le script, la section n'existe pas à l'écran (elle est dans le pied de toutes les pages). */
.et_pb_section.vst-volet-lettre:not(.vst-volet-actif) { display: none !important; }

.et_pb_section.vst-volet-lettre.vst-volet-actif {
  position: fixed; left: 0; right: 0; bottom: var(--vst-volet-bas, 0px); z-index: 9980;
  display: block; max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 0 !important;
  background: var(--gcid-vst-voile, #FBE6DF); border-top: 1px solid var(--gcid-vst-ligne, #E9DED7);
  box-shadow: 0 -8px 24px -12px rgba(35, 35, 36, .35);
  transform: translateY(calc(100% + var(--vst-volet-bas, 0px) + 8px)); visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
}
.et_pb_section.vst-volet-lettre.vst-volet-actif.est-ouvert { transform: none; visibility: visible; transition: transform .3s ease; }
@media (prefers-reduced-motion: reduce) {
  .et_pb_section.vst-volet-lettre.vst-volet-actif, .et_pb_section.vst-volet-lettre.vst-volet-actif.est-ouvert { transition: none; }
}
.et_pb_section.vst-volet-lettre .et_pb_row { padding: 4px 20px calc(4px + env(safe-area-inset-bottom, 0px)) !important; }
.et_pb_section.vst-volet-lettre.est-deplie .et_pb_row { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important; }
.et_pb_section.vst-volet-lettre .et_pb_column { display: flex; flex-direction: column; row-gap: 12px !important; }
/* Barre repliée : le titre seul */
.et_pb_section.vst-volet-lettre:not(.est-deplie) .et_pb_module:not(.volet-titre) { display: none !important; }

:is(.vst-volet-lettre, #vst-x#vst-y) .volet-titre h2 { padding-right: 40px; font: 500 15px/1.3 var(--font-titre); color: var(--vst-encre); text-transform: uppercase; letter-spacing: .04em; }
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-bascule {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer;
}
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-bascule::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: 4px 4px 0 0; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(-45deg);
}
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-bascule[aria-expanded="true"]::after { margin-top: -4px; transform: rotate(135deg); }
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-offre p { font-size: 14px; line-height: 1.5; }
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-mention p { font-size: 13px; line-height: 1.5; }
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-mention p + p { margin-top: 6px; }
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-mention a { color: var(--vst-encre); text-decoration: underline; text-underline-offset: 3px; }
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-mention p + p a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
:is(.vst-volet-lettre, #vst-x#vst-y) .vst-lettre-form .et_pb_newsletter_fields { grid-template-columns: 1fr; }
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-fermer {
  position: absolute; top: 4px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--rayon); background: none; color: var(--vst-encre); font: 400 26px/1 var(--font-corps); cursor: pointer;
}
:is(.vst-volet-lettre, #vst-x#vst-y) .volet-fermer:hover { background: rgba(35, 35, 36, .08); }

@media (min-width: 960px) {
  .et_pb_section.vst-volet-lettre.vst-volet-actif {
    left: auto; right: 24px; bottom: calc(24px + var(--vst-volet-bas, 0px)); width: 380px; max-height: calc(100vh - 120px);
    border: 1px solid var(--gcid-vst-ligne, #E9DED7); border-radius: var(--gvid-vst-rayon, 4px); box-shadow: 0 12px 32px -12px rgba(35, 35, 36, .35);
    transform: translateY(calc(100% + 32px + var(--vst-volet-bas, 0px)));
  }
  .et_pb_section.vst-volet-lettre .et_pb_row, .et_pb_section.vst-volet-lettre.est-deplie .et_pb_row { padding: 24px !important; }
  :is(.vst-volet-lettre, #vst-x#vst-y) .volet-titre h2 { font-size: 18px; }
}