/* ========================================================================
   BOULANGER AMATEUR — child theme style.css
   Design system : Culturel Mexicain Fiesta (DB pick)
   Fonts : Sancreek (headings) / Karla (body)
   Palette : red #C8102E + yellow #F5B700 + cream #FFF5DC
   Header  : burger-always  Hero : mosaic-categories  Cat : sandwich
   ======================================================================== */

/* ------- 1) DESIGN TOKENS ------- */
:root {
  --a16-primary:    #C8102E;
  --a16-primary-d:  #9c0c23;
  --a16-accent:     #F5B700;
  --a16-accent-d:   #c89400;
  --a16-text:       #3A0F0A;
  --a16-text-soft:  #7A4530;
  --a16-bg:         #FFF5DC;
  --a16-surface:    #FFFAF0;
  --a16-line:       #F0D095;
  --a16-line-soft:  #f7e6c4;
  --a16-shadow:     0 6px 20px rgba(58,15,10,0.10);
  --a16-shadow-l:   0 2px 8px rgba(58,15,10,0.06);
  --a16-radius:     12px;
  --a16-radius-sm:  8px;
  --a16-radius-pill:999px;
  --a16-maxw:       1180px;
  --a16-font-headings: "Sancreek", "Georgia", serif;
  --a16-font-body:     "Karla", "Helvetica Neue", system-ui, sans-serif;
}

/* ------- 2) RESET & BASE ------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.a16-body {
  margin: 0;
  font-family: var(--a16-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--a16-text);
  background: var(--a16-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--a16-primary); text-decoration: none; }
a:hover { color: var(--a16-accent); }

h1, h2, h3, h4 {
  font-family: var(--a16-font-headings);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.15;
  color: var(--a16-text);
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.3rem; }
p  { margin: 0 0 1em; }

.a16-container { max-width: var(--a16-maxw); margin: 0 auto; padding: 0 1.25rem; }

/* ------- 3) BUTTONS ------- */
.a16-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  font-family: var(--a16-font-body);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .02em;
  border-radius: var(--a16-radius-sm);
  border: 2px solid var(--a16-primary);
  cursor: pointer;
  text-decoration: none;
  transition: transform .2s, background .25s, color .25s, box-shadow .25s;
  background: var(--a16-primary);
  color: #fff;
}
.a16-btn:hover { background: var(--a16-primary-d); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(200,16,46,.30); }
.a16-btn--ghost { background: transparent; color: var(--a16-primary); }
.a16-btn--ghost:hover { background: var(--a16-primary); color: #fff; }
.a16-btn--accent { background: var(--a16-accent); border-color: var(--a16-accent); color: var(--a16-text); }
.a16-btn--accent:hover { background: var(--a16-accent-d); border-color: var(--a16-accent-d); color: var(--a16-text); }

/* ------- 4) HEADER (burger-always) ------- */
.a16-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--a16-surface);
  border-bottom: 1px solid var(--a16-line);
  backdrop-filter: blur(8px);
}
/* Decorative top stripe (papel picado evocation, very subtle) */
.a16-header::before {
  content: "";
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--a16-primary) 0 25%, var(--a16-accent) 25% 50%, var(--a16-primary) 50% 75%, var(--a16-accent) 75% 100%);
}

.a16-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: .85rem 1.25rem;
  max-width: var(--a16-maxw);
  margin: 0 auto;
}

.a16-brand-link { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.a16-brand-logo { height: 48px; width: auto; }
.a16-brand-text { display: flex; flex-direction: column; line-height: 1; }
.a16-brand-name {
  font-family: var(--a16-font-headings);
  font-size: 1.5rem;
  color: var(--a16-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 400;
}
.a16-brand-tagline {
  font-size: .72rem;
  color: var(--a16-text-soft);
  font-style: italic;
  margin-top: .15rem;
}

/* Burger always visible */
.a16-burger {
  background: transparent;
  border: 2px solid var(--a16-text);
  border-radius: var(--a16-radius-sm);
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--a16-text);
  transition: background .2s, color .2s;
}
.a16-burger:hover { background: var(--a16-text); color: var(--a16-bg); }
.a16-burger svg { width: 22px; height: 22px; display: block; }

/* Mobile drawer (also used in desktop with burger-always) */
.a16-nav-mobile {
  display: none;
}
.a16-nav-mobile.is-open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 88%;
  max-width: 380px;
  background: #ffffff;
  padding: 4.5rem 1.5rem 2rem;
  z-index: 9999;
  overflow-y: auto;
  box-shadow: -10px 0 30px rgba(58,15,10,0.3);
}
.a16-nav-mobile .a16-nav-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 2px solid var(--a16-text);
  border-radius: var(--a16-radius-sm);
  width: 38px;
  height: 38px;
  cursor: pointer;
  color: var(--a16-text);
  font-size: 1.3rem;
  line-height: 1;
}
.a16-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.a16-nav-list li { border-bottom: 1px solid var(--a16-line-soft); }
.a16-nav-list a {
  display: block;
  padding: 1rem .25rem;
  font-family: var(--a16-font-headings);
  font-size: 1.45rem;
  color: #0a0a0a;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.a16-nav-list a:hover { color: var(--a16-primary); }

.a16-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(58,15,10,0.45);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.a16-nav-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ------- 5) HERO mosaic-categories with YouTube video ------- */
.a16-hero {
  position: relative;
  overflow: hidden;
  min-height: 68vh;
  background: var(--a16-text);
  color: #fff;
  display: flex;
  align-items: stretch;
}
.a16-hero-video-wrap { position: absolute; inset: 0; pointer-events: none; }
.a16-hero-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
}
.a16-hero-video-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%);
}
.a16-hero-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.a16-hero-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: var(--a16-maxw);
  margin: auto;
  padding: 6rem 1.5rem 4rem;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3rem;
  align-items: end;
}
.a16-hero-text { max-width: 580px; }
.a16-hero-title {
  font-family: var(--a16-font-headings);
  color: #fff;
  font-size: clamp(2.4rem, 5.6vw, 4.2rem);
  line-height: 1.05;
  margin: 0 0 1rem;
  text-shadow: 0 3px 14px rgba(0,0,0,0.55);
}
.a16-hero-subtitle {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: rgba(255,255,255,0.95);
  margin: 0 0 1.8rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  max-width: 50ch;
}
.a16-hero-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.a16-hero-cta-row .a16-btn { background: var(--a16-accent); color: var(--a16-text); border-color: var(--a16-accent); }
.a16-hero-cta-row .a16-btn:hover { background: var(--a16-accent-d); border-color: var(--a16-accent-d); }
.a16-hero-cta-row .a16-btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.a16-hero-cta-row .a16-btn--ghost:hover { background: #fff; color: var(--a16-text); }

/* Mosaic categories on right side of hero */
.a16-hero-mosaic {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: .5rem;
  width: 100%;
}
.a16-hero-mosaic-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--a16-radius-sm);
  overflow: hidden;
  background: var(--a16-text-soft);
  text-decoration: none;
  border: 2px solid rgba(255,255,255,0.12);
  transition: transform .3s, border-color .3s;
}
.a16-hero-mosaic-tile:hover { transform: scale(1.04); border-color: var(--a16-accent); }
.a16-hero-mosaic-tile-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(.75);
  transition: filter .3s;
}
.a16-hero-mosaic-tile:hover .a16-hero-mosaic-tile-bg { filter: brightness(.85); }
.a16-hero-mosaic-tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .55rem .75rem;
  font-family: var(--a16-font-headings);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.7);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
}

/* ------- 6) SECTIONS GENERIC ------- */
.a16-section { padding: 4rem 0; }
.a16-section--alt { background: var(--a16-surface); }
.a16-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}
.a16-section-title {
  margin: 0;
  position: relative;
  padding-bottom: .6rem;
}
.a16-section-title::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--a16-primary), var(--a16-accent));
  border-radius: var(--a16-radius-pill);
}
.a16-section-kicker {
  font-family: var(--a16-font-body);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--a16-primary);
  font-weight: 700;
  margin-bottom: .5rem;
  display: block;
}
.a16-section-intro { max-width: 60ch; color: var(--a16-text-soft); }

/* ------- 7) CATEGORIES GRID ------- */
.a16-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.a16-cat-card {
  position: relative;
  display: block;
  border-radius: var(--a16-radius);
  overflow: hidden;
  background: var(--a16-surface);
  border: 1px solid var(--a16-line);
  box-shadow: var(--a16-shadow-l);
  transition: transform .3s, box-shadow .3s, border-color .3s;
  text-decoration: none;
  color: inherit;
  height: 260px;
}
.a16-cat-card:hover { transform: translateY(-5px); box-shadow: var(--a16-shadow); border-color: var(--a16-primary); }
.a16-cat-card-img {
  display: block;
  width: 100%;
  height: 65%;
  background-size: cover;
  background-position: center;
  background-color: var(--a16-primary);
}
.a16-cat-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: .8rem 1.1rem;
  height: 35%;
}
.a16-cat-card h3 {
  margin: 0;
  font-size: 1.45rem;
  font-family: var(--a16-font-headings);
  color: var(--a16-primary);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.a16-cat-card p { margin: .15rem 0 0; font-size: .85rem; color: var(--a16-text-soft); }

/* ------- 8) EDITORIAL HOME BLOCK ------- */
.a16-editorial {
  padding: 4rem 0;
  background: var(--a16-surface);
  border-top: 1px solid var(--a16-line);
  border-bottom: 1px solid var(--a16-line);
}
.a16-editorial-inner { max-width: 820px; margin: 0 auto; padding: 0 1.25rem; }
.a16-editorial h2 { text-align: center; }
.a16-editorial h2::after { left: 50%; transform: translateX(-50%); }
.a16-editorial h3 {
  font-family: var(--a16-font-headings);
  color: var(--a16-primary);
  font-size: 1.5rem;
  margin-top: 2.5rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.a16-editorial p { font-size: 1.05rem; line-height: 1.75; }
.a16-editorial .a16-edito-box {
  margin: 2.5rem 0;
  padding: 1.6rem 1.8rem;
  background: var(--a16-bg);
  border-left: 6px solid var(--a16-accent);
  border-radius: var(--a16-radius-sm);
}
.a16-editorial .a16-edito-box p { margin: 0; }
.a16-editorial .a16-edito-box strong { color: var(--a16-primary); }

/* ------- 9) BY-CATEGORY ARTICLES ------- */
.a16-cat-block { margin-bottom: 3.5rem; }
.a16-cat-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--a16-line);
  padding-bottom: .5rem;
}
.a16-cat-block-head h2 {
  margin: 0;
  font-size: 1.7rem;
}
.a16-cat-block-head a {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--a16-primary);
  text-decoration: none;
}
.a16-cat-block-head a:hover { color: var(--a16-accent); }
.a16-cat-block-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.a16-cat-block-empty {
  padding: 1rem 1.25rem;
  background: var(--a16-bg);
  border: 1px dashed var(--a16-line);
  border-radius: var(--a16-radius-sm);
  color: var(--a16-text-soft);
  font-style: italic;
}
.a16-cat-block-empty a { font-style: normal; font-weight: 700; }

/* ------- 10) ARTICLE CARDS ------- */
.a16-card-article {
  display: flex;
  flex-direction: column;
  background: var(--a16-surface);
  border: 1px solid var(--a16-line);
  border-radius: var(--a16-radius);
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  text-decoration: none;
  color: inherit;
}
.a16-card-article:hover { transform: translateY(-4px); box-shadow: var(--a16-shadow); border-color: var(--a16-primary); }
.a16-card-article img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.a16-card-article-body { padding: 1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; }
.a16-card-article h3 {
  font-size: 1.15rem;
  margin: 0;
  line-height: 1.25;
  color: var(--a16-text);
  font-family: var(--a16-font-headings);
}
.a16-card-article .a16-card-date {
  font-size: .78rem;
  color: var(--a16-text-soft);
  letter-spacing: .03em;
}
.a16-card-article .a16-card-noimg {
  height: 160px;
  background: linear-gradient(135deg, var(--a16-primary), var(--a16-accent));
}

/* ------- 11) METRICS LINKS BLOCK ------- */
.a16-metrics {
  background: var(--a16-text);
  color: #fff;
  padding: 3rem 1.25rem;
  text-align: center;
}
.a16-metrics h2 { color: #fff; }
.a16-metrics h2::after { left: 50%; transform: translateX(-50%); background: var(--a16-accent); }
.a16-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 2rem auto 0;
}
.a16-metrics-item {
  padding: 1.25rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--a16-radius-sm);
  text-decoration: none;
  color: #fff;
  transition: background .2s, transform .2s;
}
.a16-metrics-item:hover { background: var(--a16-primary); color: #fff; transform: translateY(-3px); }
.a16-metrics-num { font-family: var(--a16-font-headings); font-size: 2rem; color: var(--a16-accent); display: block; }
.a16-metrics-label { font-size: .9rem; opacity: .9; }

/* ------- 12) TOOL EMBED HOME ------- */
.a16-tool-embed-home {
  padding: 4rem 0;
  background: linear-gradient(180deg, var(--a16-bg) 0%, var(--a16-surface) 100%);
}
.a16-tool-embed-home .a16-tool-embed-head { text-align: center; max-width: 60ch; margin: 0 auto 2.5rem; }
.a16-tool-embed-home h2::after { left: 50%; transform: translateX(-50%); }

/* ------- 13) FOOTER ------- */
.a16-footer {
  background: var(--a16-text);
  color: #f5f5f5;
  padding: 3.5rem 0 0;
}
.a16-footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  max-width: var(--a16-maxw);
  margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
}
.a16-footer-col h3 {
  font-family: var(--a16-font-headings);
  font-size: 1.15rem;
  color: var(--a16-accent);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 1rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid rgba(245,183,0,0.25);
}
.a16-footer-logo { display: block; margin-bottom: 1rem; height: auto; max-height: 70px; width: auto; }
.a16-footer-brand-pitch {
  color: #f5f5f5;
  font-size: .94rem;
  line-height: 1.6;
  margin: 0 0 1.2rem;
}
.a16-footer-brand-cta {
  display: inline-block;
  margin-top: .3rem;
  padding: .55rem 1.2rem;
  border: 2px solid var(--a16-accent);
  color: var(--a16-accent);
  border-radius: var(--a16-radius-sm);
  text-decoration: none;
  font-weight: 700;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .2s, color .2s;
}
.a16-footer-brand-cta:hover { background: var(--a16-accent); color: var(--a16-text); }

.a16-footer-links { list-style: none; padding: 0; margin: 0; }
.a16-footer-links li { margin-bottom: .55rem; }
.a16-footer-links a {
  color: #f5f5f5;
  text-decoration: underline;
  text-decoration-color: rgba(245,245,245,0.3);
  text-underline-offset: 3px;
  font-size: .94rem;
}
.a16-footer-links a:hover { color: var(--a16-accent); text-decoration-color: var(--a16-accent); }

.a16-footer-social { display: flex; gap: .65rem; margin-top: .8rem; flex-wrap: wrap; }
.a16-footer-social a {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(245,183,0,0.35);
  border-radius: 50%;
  color: var(--a16-accent);
  transition: background .2s, color .2s, border-color .2s;
}
.a16-footer-social a:hover { background: var(--a16-accent); color: var(--a16-text); border-color: var(--a16-accent); }
.a16-footer-social svg { width: 18px; height: 18px; }

.a16-footer-bottom {
  border-top: 1px solid rgba(245,183,0,0.18);
  padding: 1.2rem 1.25rem;
  font-size: .85rem;
  color: rgba(245,245,245,0.7);
  text-align: center;
}
.a16-footer-bottom span { color: var(--a16-accent); font-style: italic; }

/* ------- 14) PERSONA PHOTO ------- */
.a16-persona-photo {
  max-width: 280px;
  border-radius: var(--a16-radius);
  border: 3px solid var(--a16-accent);
  box-shadow: var(--a16-shadow);
  margin: 1.5rem 0;
  float: right;
  margin-left: 2rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 720px) { .a16-persona-photo { float: none; margin: 1.5rem auto; display: block; max-width: 100%; } }

/* ------- 15) SINGLE / PAGE CONTENT ------- */
.a16-page-content { padding: 3.5rem 0; }
.a16-page-content .a16-container { max-width: 820px; }
.a16-page-content h1 { margin-bottom: 1.25rem; }
.a16-page-content h2 {
  margin-top: 2.5rem;
  color: var(--a16-primary);
  position: relative;
  padding-bottom: .35rem;
  font-size: 1.7rem;
}
.a16-page-content h2::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 60px;
  height: 3px;
  background: var(--a16-accent);
  border-radius: var(--a16-radius-pill);
}

/* ------- 16) CATEGORY PAGE — sandwich layout ------- */
.a16-cat-header {
  padding: 3rem 0 2rem;
  background: var(--a16-surface);
  border-bottom: 1px solid var(--a16-line);
}
.a16-cat-header h1 { margin-bottom: 1rem; }
.a16-cat-description { max-width: 70ch; color: var(--a16-text-soft); font-size: 1.05rem; line-height: 1.7; }
.a16-cat-archive { padding: 3rem 0; }
.a16-cat-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.a16-cat-outro {
  padding: 3rem 0;
  background: var(--a16-surface);
  border-top: 1px solid var(--a16-line);
}
.a16-cat-outro .a16-container { max-width: 800px; }

/* ------- 17) CONTACT PAGE ------- */
.a16-contact-form {
  max-width: 760px;
  margin: 2.5rem auto;
  background: var(--a16-surface);
  border: 1px solid var(--a16-line);
  border-radius: var(--a16-radius);
  padding: 1rem;
  box-shadow: var(--a16-shadow-l);
}

/* ------- 18) ANIMATIONS CTA / CTR / CTO are injected by builder ------- */

/* ------- 19) RESPONSIVE ------- */
@media (max-width: 1024px) {
  .a16-hero-inner { grid-template-columns: 1fr; gap: 2rem; padding: 5rem 1.5rem 3rem; }
  .a16-hero-mosaic { max-width: 540px; }
  .a16-footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 720px) {
  body.a16-body { font-size: 16px; }
  .a16-header-inner { padding: .7rem 1rem; }
  .a16-brand-logo { height: 38px; }
  .a16-brand-name { font-size: 1.15rem; }
  .a16-brand-tagline { display: none; }
  .a16-hero { min-height: 60vh; }
  .a16-hero-mosaic { grid-template-columns: repeat(2, 1fr); }
  .a16-footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .a16-section { padding: 2.5rem 0; }
  .a16-editorial { padding: 2.5rem 0; }
  .a16-cat-block-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ------- 20) ACCESSIBILITY ------- */
.a16-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--a16-primary);
  color: #fff;
  padding: .5rem 1rem;
  text-decoration: none;
  z-index: 999;
}
.a16-skip-link:focus { top: 0; }

*:focus-visible {
  outline: 3px solid var(--a16-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------- 21) ANIMATIONS CTA (timer_reveal_button) ------- */
@keyframes a16-cta-fill {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
@keyframes a16-cta-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 16px rgba(200,16,46,0.35); }
  50% { transform: scale(1.04); box-shadow: 0 6px 22px rgba(200,16,46,0.55); }
}
.a16-btn--cta {
  position: relative;
  background: linear-gradient(90deg, var(--a16-primary) 0%, var(--a16-primary) 50%, var(--a16-accent) 50%, var(--a16-accent) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  color: #fff;
  font-weight: 700;
  padding: .9rem 1.8rem;
  border: none;
  border-radius: var(--a16-radius-sm);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  animation: a16-cta-fill 3.5s ease-in-out infinite alternate, a16-cta-pulse 2.6s ease-in-out infinite;
  transition: transform .2s;
}
.a16-btn--cta:hover { transform: translateY(-2px) scale(1.02); animation-play-state: paused; }

/* ------- 22) CTR step_by_step_progress ------- */
@keyframes a16-ctr-step1 { 0%, 30% { width: 0; } 35%, 100% { width: 33%; } }
@keyframes a16-ctr-step2 { 0%, 60% { width: 33%; } 65%, 100% { width: 66%; } }
@keyframes a16-ctr-step3 { 0%, 90% { width: 66%; } 95%, 100% { width: 100%; } }
.a16-ctr-progress {
  position: relative;
  height: 8px;
  background: var(--a16-line);
  border-radius: var(--a16-radius-pill);
  overflow: hidden;
  margin: 1.25rem 0;
}
.a16-ctr-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: linear-gradient(90deg, var(--a16-primary), var(--a16-accent));
  border-radius: var(--a16-radius-pill);
  animation: a16-ctr-step1 4s ease-in-out forwards, a16-ctr-step2 4s ease-in-out 1s forwards, a16-ctr-step3 4s ease-in-out 2s forwards;
}

/* ------- 23) CTO free_trial_badge ------- */
@keyframes a16-cto-stamp {
  0% { transform: scale(0) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(-12deg); opacity: 1; }
  80% { transform: scale(0.95) rotate(-8deg); }
  100% { transform: scale(1) rotate(-10deg); opacity: 1; }
}
@keyframes a16-cto-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,183,0,0.6); }
  50% { box-shadow: 0 0 0 14px rgba(245,183,0,0); }
}
.a16-cto-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--a16-accent);
  color: var(--a16-text);
  font-family: var(--a16-font-headings);
  font-weight: 400;
  font-size: .82rem;
  line-height: 1.1;
  text-align: center;
  padding: .5rem;
  border: 2px dashed var(--a16-text);
  animation: a16-cto-stamp 1.2s cubic-bezier(.34,1.56,.64,1) forwards, a16-cto-glow 2.6s ease-in-out 1.5s infinite;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ------- 24) MOUSE EFFECT link_hover_underline_slide ------- */
@media (hover: hover) {
  .a16-main a:not(.a16-btn):not(.a16-brand-link):not(.a16-nav-list a):not(.a16-footer-logo):not(.a16-card-article):not(.a16-cat-card):not(.a16-hero-mosaic-tile):not(.a16-metrics-item) {
    position: relative;
    text-decoration: none;
    color: var(--a16-primary);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .35s cubic-bezier(.4,0,.2,1), color .25s;
  }
  .a16-main a:not(.a16-btn):not(.a16-brand-link):not(.a16-nav-list a):not(.a16-footer-logo):not(.a16-card-article):not(.a16-cat-card):not(.a16-hero-mosaic-tile):not(.a16-metrics-item):hover,
  .a16-main a:not(.a16-btn):not(.a16-brand-link):not(.a16-nav-list a):not(.a16-footer-logo):not(.a16-card-article):not(.a16-cat-card):not(.a16-hero-mosaic-tile):not(.a16-metrics-item):focus-visible {
    background-size: 100% 2px;
    color: var(--a16-accent);
  }
}


/* Mouse effect : link_hover_underline_slide */
/* Mouse effect: link_hover_underline_slide — un underline qui glisse de gauche à droite sous chaque lien au survol */
@media (hover: hover) {
  .a16-main a:not(.a16-btn):not(.a16-brand-link):not(.a16-nav-list a):not(.a16-footer-logo) {
    position: relative;
    text-decoration: none;
    color: var(--a16-primary, #C8102E);
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .35s cubic-bezier(.4,0,.2,1);
  }
  .a16-main a:not(.a16-btn):not(.a16-brand-link):not(.a16-nav-list a):not(.a16-footer-logo):hover,
  .a16-main a:not(.a16-btn):not(.a16-brand-link):not(.a16-nav-list a):not(.a16-footer-logo):focus-visible {
    background-size: 100% 2px;
    color: var(--a16-accent, #F5B700);
  }
}


/* === [RP2G safety-net 2026-06-06] burger drawer multi-fix === */
@media (max-width: 1023px) {
  [class*="-nav-mobile"].is-open {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    z-index: 10000 !important;
    background: #fff !important;
    visibility: visible !important;
    overflow-y: auto !important;
  }
  [class*="-nav-mobile"].is-open a {
    color: #0a0a0a !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 1rem 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    -webkit-text-fill-color: #0a0a0a !important;
  }
}
/* Overlay drawer SEMI-TRANSPARENT NOIR (jamais blanc opaque) */
[class*="-overlay"][class*="drawer"],
[class*="drawer"][class*="-overlay"],
[id*="-overlay"][id*="drawer"],
[class*="-burger-overlay"],
[class*="-nav-overlay"],
[class*="-drawer-overlay"] {
  background: rgba(0, 0, 0, 0.55) !important;
}