/* CSS propre aux LP : seulement ce que la CSS du live (index.ab975fd3.css) ne couvre pas.
   Valeurs reprises du live. */

/* ancres internes (#calendriers, #aide, #modeles) : le titre ne colle pas au bord */
[id] { scroll-margin-top: 16px; }

/* focus clavier visible (WCAG 2.4.7) : la CSS du live met outline:none sur a:focus et button:focus.
   Double anneau (blanc contre l'élément, bleu autour) : lisible sur fond clair comme sur fond noir ou bordeaux.
   :focus-visible seulement (clavier) : rien ne change au clic ni au toucher. */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #2563EB; outline-offset: 2px; box-shadow: 0 0 0 2px #fff; }

/* ===================================================================
   LP Calendriers de l'Avent (v3) : sections .av-*
   Couleurs : rouge du site rgb(220 38 38), bordeaux et rouge du logo (#600D04, #CD1625),
   gris du site (#171717, #525252, #fafafa, #e5e5e5), jaune des étoiles du site. Police : Inter (site).
   Points de rupture du site : tablet 768 px, desktop 1280 px.
   =================================================================== */
.av-hero, .av-sec, .av-final { position: relative; overflow: hidden; }
.av-hero { color: #fff; background:
    radial-gradient(120% 90% at 78% 40%, #CD1625 0%, #8f140c 38%, #600D04 70%, #2a0502 100%); }
.av-crumbs { display: flex; gap: 8px; padding: 12px 0 0; font-size: 13px; line-height: 20px; color: rgba(255,255,255,.72); }
.av-crumbs a { color: rgba(255,255,255,.72); min-height: 24px; }
.av-crumbs a:hover { color: #fff; }
.av-crumbs a:last-child { color: #fff; font-weight: 600; }
.av-hero-grid { display: grid; grid-template-columns: 1fr; gap: 0; padding: 18px 0 32px; align-items: center; }
.av-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fcd34d; }
.av-eyebrow-red { color: rgb(220 38 38); }
.av-h1 { margin-top: 10px; font-size: 40px; line-height: 42px; font-weight: 700; letter-spacing: -.03em; color: #fff; }
.av-lead { margin-top: 12px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.86); max-width: 520px; }
.av-hero-cta { margin-top: 8px; display: flex; flex-direction: column; gap: 16px; }
.av-btn { white-space: nowrap; min-height: 52px; font-weight: 600 !important; font-size: 17px !important; padding-left: 32px !important; padding-right: 28px !important; }
.av-btn div { color: inherit; }
.av-hero .av-btn, .av-final .av-btn { box-shadow: 0 10px 30px -8px rgba(0,0,0,.55); }
.av-proof { display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.85); }
.av-proof-stars { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av-proof-stars strong { color: #fff; }
.av-proof-sub { color: rgba(255,255,255,.66); font-size: 13px; }
.av-countdown { margin-top: 20px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.8); }
.av-countdown strong { color: #fff; font-variant-numeric: tabular-nums; }
.av-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: #fcd34d; box-shadow: 0 0 0 4px rgba(252,211,77,.2); vertical-align: 1px; }

/* présentoir : fond clair en halo, images détourées par fusion « multiply » */
.av-stage { position: relative; height: clamp(180px, 27vh, 250px); margin: 4px -20px 8px; }
.av-stage-glow, .av-stage::after { pointer-events: none; }
.av-hero-top, .av-hero-bottom { position: relative; z-index: 3; }
.av-stage-glow { position: absolute; inset: -14% -18% -10%; background:
    radial-gradient(50% 50% at 50% 58%, #fff 0%, #fff 34%, rgba(255,255,255,.82) 50%, rgba(255,255,255,.35) 64%, rgba(255,255,255,0) 80%); }
.av-stage::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 10%; height: 26px; border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(60,0,0,.32), rgba(60,0,0,0)); filter: blur(4px); }
.av-box { position: absolute; bottom: 8%; display: block; transition: transform .35s ease; mix-blend-mode: multiply; }
.av-box img { display: block; width: 100%; height: auto; }
.av-box-l { left: 3%; width: 38%; transform: rotate(-5deg); z-index: 1; }
.av-box-r { right: 3%; width: 38%; transform: rotate(5deg); z-index: 1; }
.av-box-c { left: 50%; width: 52%; transform: translateX(-50%); bottom: 4%; z-index: 2; }
.av-box:hover { transform: translateY(-6px) rotate(0); }
.av-box-c:hover { transform: translate(-50%, -6px); }
.av-unused-tag { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); white-space: nowrap; padding: 3px 10px; border-radius: 999px;
    background: #171717; color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; }
.av-strip { background: rgba(0,0,0,.28); border-top: 1px solid rgba(255,255,255,.12); }
.av-strip ul { display: flex; gap: 8px 28px; flex-wrap: wrap; padding: 14px 0; font-size: 13px; line-height: 18px; color: rgba(255,255,255,.86); }
.av-strip li { position: relative; padding-left: 18px; }
.av-strip li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 5px; border-left: 2px solid #fcd34d; border-bottom: 2px solid #fcd34d; transform: rotate(-45deg); }

/* sections */
.av-sec { padding: 64px 0; }
.av-light { background: #fafafa; }
.av-white { background: #fff; }
.av-dark { background: #171717; color: #fff; }
.av-head { max-width: 680px; margin-bottom: 32px; }
.av-h2 { margin-top: 10px; font-size: 32px; line-height: 36px; font-weight: 700; letter-spacing: -.025em; color: #171717; }
.av-on-dark { color: #fff; }
.av-sub { margin-top: 12px; font-size: 17px; line-height: 26px; color: #525252; }

/* galerie : défilement tactile sur mobile, mosaïque sur desktop */
.av-gallery { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 0 20px 8px; scroll-padding: 0 20px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.av-gallery::-webkit-scrollbar { display: none; }
.av-tile { position: relative; scroll-snap-align: start; border-radius: 16px; overflow: hidden; background: #f0eeee; aspect-ratio: 1 / 1; margin: 0; }
.av-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-tile-w { background: #fff; border: 1px solid #e5e5e5; }
.av-tile-w img { object-fit: contain; padding: 6%; }
.av-tile figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 18px;
    background: rgba(23,23,23,.72); color: rgba(255,255,255,.9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.av-tile figcaption strong { color: #fff; }
.av-tile figcaption a { color: #fff; text-decoration: underline; }
.av-tile-spoiler { background: #fff; }
.av-tile-spoiler img { object-fit: cover; object-position: top; filter: blur(14px) saturate(.9); transform: scale(1.08); transition: filter .5s ease, transform .5s ease; }
.av-tile-spoiler.is-open img { filter: none; transform: none; }
.av-reveal-btn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; text-align: center;
    background: linear-gradient(160deg, rgba(96,13,4,.82), rgba(205,22,37,.72)); color: #fff; font-size: 17px; line-height: 24px; font-weight: 600; cursor: pointer; }
.av-reveal-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px; }
.av-tile-spoiler.is-open .av-reveal-btn { display: none; }
.av-swipe { margin-top: 12px; font-size: 13px; color: #525252; }

/* histoires */
.av-story { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 8px 0 48px; }
.av-story + .av-story { border-top: 1px solid #e5e5e5; padding-top: 48px; }
.av-story-img { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; }
.av-story-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-soft-img { background: radial-gradient(70% 70% at 50% 45%, #fff 0%, #fff 45%, #f5f5f5 100%); }
.av-soft-img img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.av-badge { position: absolute; z-index: 1; left: 16px; top: 16px; padding: 2px 12px; border-radius: .25rem; font-size: 12px; line-height: 20px; font-weight: 700; text-transform: uppercase; color: #171717; }
.av-persona { display: inline-block; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgb(220 38 38); }
.av-h3 { margin-top: 10px; font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; color: #171717; }
.av-rating { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #525252; }
.av-rating-new span { font-style: italic; }
.av-story-lead { margin-top: 16px; font-size: 17px; line-height: 26px; color: #171717; }
.av-points { margin-top: 16px; display: grid; gap: 10px; font-size: 15px; line-height: 22px; color: #525252; }
.av-points li { position: relative; padding-left: 26px; }
.av-points li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 11px; height: 6px; border-left: 2px solid rgb(220 38 38); border-bottom: 2px solid rgb(220 38 38); transform: rotate(-45deg); }
.av-price { margin: 24px 0 20px; display: flex; flex-direction: column; gap: 4px; }
.av-price-main { font-size: 30px; line-height: 34px; font-weight: 700; color: rgb(220 38 38); letter-spacing: -.02em; }
.av-price-meta { font-size: 14px; line-height: 20px; color: #525252; }

/* comparatif repliable */
.av-compare { margin-top: 8px; border: 1px solid #e5e5e5; border-radius: 16px; padding: 0 20px; }
.av-compare summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font-size: 16px; font-weight: 600; color: #171717; list-style: none; }
.av-compare summary::-webkit-details-marker { display: none; }
.av-compare summary::after { content: "+"; margin-left: auto; font-size: 22px; font-weight: 400; }
.av-compare[open] summary::after { content: "−"; }
.av-compare table { width: 100%; min-width: 520px; font-size: 14px; line-height: 20px; border-collapse: collapse; }
.av-compare th, .av-compare td { text-align: left; padding: 12px 8px 12px 0; border-top: 1px solid #e5e5e5; vertical-align: top; }
.av-compare thead th { border-top: 0; font-weight: 700; }
.av-compare tbody th { font-weight: 600; color: #171717; }
.av-compare td { color: #525252; }
.av-compare p { padding: 12px 0 16px; font-size: 12px; color: #525252; }

/* cadeau */
.av-gift { background: radial-gradient(90% 80% at 20% 30%, #3a0803 0%, #1d0402 55%, #120201 100%); }
.av-gift-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.av-gift-img { border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; }
.av-gift-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-gift-list { margin: 24px 0 28px; display: grid; gap: 18px; font-size: 16px; line-height: 24px; color: rgba(255,255,255,.78); }
.av-gift-list li { padding-left: 18px; border-left: 2px solid #CD1625; }
.av-gift-list strong { display: block; color: #fff; font-weight: 600; }
.av-btn-ghost { border: 1px solid rgba(255,255,255,.7); color: #fff; }
.av-btn-ghost:hover { background: #fff; color: #171717; }

/* avis */
.av-reviews { display: grid; grid-template-columns: 1fr; gap: 16px; }
.av-review { margin: 0; background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.av-review blockquote { margin: 0; font-size: 16px; line-height: 24px; color: #404040; }
.av-review-title { font-weight: 700; color: #171717; margin-bottom: 6px; }
.av-review figcaption { margin-top: auto; font-size: 13px; color: #525252; }
.av-review-stars svg { width: 16px; }
.av-note { margin-top: 20px; font-size: 13px; line-height: 18px; color: #525252; }
.av-faq { max-width: 820px; }

/* dernier appel */
.av-final { background: #120201; color: #fff; padding: 96px 0; }
.av-final-bg { position: absolute; inset: 0; }
.av-final-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .55; }
.av-final-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,2,1,.94) 0%, rgba(18,2,1,.78) 50%, rgba(18,2,1,.25) 100%); }
.av-final-copy { position: relative; max-width: 560px; }
.av-final .av-lead { margin-bottom: 28px; }

/* barre collante mobile */
.av-sticky { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid #e5e5e5;
    box-shadow: 0 -8px 24px rgba(0,0,0,.08); transform: translateY(110%); transition: transform .3s ease; }
.av-sticky.is-on { transform: none; }
.av-sticky a { min-height: 48px; min-width: 120px; font-weight: 600; }
.av-sticky-k { font-size: 12px; line-height: 16px; color: #525252; }
.av-sticky-p { font-size: 16px; line-height: 22px; font-weight: 700; color: #171717; }

@media (min-width: 768px) {
  .av-h1 { font-size: 56px; line-height: 58px; }
  .av-lead { font-size: 17px; line-height: 26px; }
  .av-stage { height: 420px; margin: 8px 0 0; }
  .av-gallery { grid-auto-columns: 46%; }
  .av-reviews { grid-template-columns: repeat(3, 1fr); }
  .av-h2 { font-size: 40px; line-height: 44px; }
}
@media (min-width: 1280px) {
  .av-hero-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "top stage" "bottom stage"; column-gap: 40px; padding: 40px 0 56px; min-height: 560px; }
  .av-hero-top { grid-area: top; align-self: end; }
  .av-hero-bottom { grid-area: bottom; align-self: start; }
  .av-stage { grid-area: stage; }
  .av-hero-cta { margin-top: 32px; }
  .av-eyebrow { font-size: 13px; letter-spacing: .12em; }
  .av-crumbs { font-size: 14px; padding-top: 16px; }
  .av-h1 { font-size: 68px; line-height: 70px; }
  .av-lead { font-size: 19px; line-height: 30px; }
  .av-hero-cta { flex-direction: row; align-items: center; gap: 24px; }
  .av-stage { height: 520px; }
  .av-stage-glow { inset: -4% -8% -2%; }
  .av-sec { padding: 104px 0; }
  .av-head { margin-bottom: 48px; }
  .av-h2 { font-size: 48px; line-height: 52px; }
  .av-gallery { grid-auto-flow: row; grid-template-columns: repeat(12, 1fr); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: 20px; }
  .av-tile-a { grid-column: span 7; grid-row: span 2; aspect-ratio: auto; }
  .av-tile-b { grid-column: span 5; grid-row: span 2; aspect-ratio: auto; }
  .av-tile-w, .av-tile-spoiler { grid-column: span 4; }
  .av-tile { min-height: 0; }
  .av-tile-a, .av-tile-b { height: 560px; }
  .av-swipe { display: none; }
  .av-story { grid-template-columns: 1fr 1fr; gap: 80px; padding: 24px 0 72px; }
  .av-story + .av-story { padding-top: 72px; }
  .av-story-rev .av-story-img { order: 2; }
  .av-h3 { font-size: 40px; line-height: 44px; }
  .av-story-copy { max-width: 520px; }
  .av-gift-grid { grid-template-columns: 1fr 1fr; gap: 80px; }
  .av-final { padding: 144px 0; }
}

/* Deux calendriers (23.10.2026) : présentoir à deux coffrets, dernière rangée de la galerie et comparatif à deux colonnes */
.av-stage-duo .av-box-l { left: 9%; width: 44%; bottom: 9%; transform: rotate(-4deg); }
.av-stage-duo .av-box-c { left: auto; right: 6%; width: 54%; bottom: 5%; transform: rotate(2deg); }
.av-stage-duo .av-box-c:hover { transform: translateY(-6px) rotate(0); }
.av-compare-duo table { min-width: 0; }
.av-compare-duo th, .av-compare-duo td { width: 37%; }
.av-compare-duo th:first-child { width: 26%; }
@media (min-width: 1280px) {
  .av-gallery-duo .av-tile-w, .av-gallery-duo .av-tile-spoiler { grid-column: span 6; aspect-ratio: auto; height: 460px; }
}

/* H1 SEO = sur-titre + accroche : le h1 n'a pas de boîte, ses deux enfants gardent leur rendu d'origine */
.lp-h1-group { display: contents; }
.lp-h1-group > .av-eyebrow, .lp-h1-group > .av-h1, .lp-h1-group > .kp-h1 { display: block; }

/* FAQ centrée sur toutes les LP (28.10, demande Marc) : le bloc qui contient l'accordéon ({{faq}}) fait 816 px au
   plus, au milieu de l'écran, titre centré. Les questions restent alignées à gauche (.text-left du live). */
:where(div):has(> .border-t > div > [data-lp-acc]) { width: 100%; max-width: 816px; margin-left: auto !important; margin-right: auto !important; }
:where(div):has(> .border-t > div > [data-lp-acc]) > h2,
:where(div):has(> .border-t > div > [data-lp-acc]) > div:not(.border-t) { text-align: center !important; }