/* Sa Mère la Pub ! — styles communs du site */

/* Polices hébergées sur le serveur (pas d'appel à Google Fonts) */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/anton-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations'), url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/permanent-marker-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Base */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #FFF7E8; -webkit-text-size-adjust: 100%; }
html { scroll-behavior: smooth; }
a { color: #111111; }
a:hover { color: #000000; }
img, svg { max-width: 100%; }
::placeholder { color: #6B6B6B; }

/* Bandeaux qui défilent */
.smlp-track { animation: smlp-marquee 30s linear infinite; }
.smlp-rev { animation-direction: reverse; }
@keyframes smlp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Cartes et boutons néo-brutalistes */
.smlp-card { transition: transform .15s ease, box-shadow .15s ease; }
.smlp-card:hover { transform: translate(-3px, -3px) rotate(0deg) !important; box-shadow: 10px 10px 0 #111111 !important; }
.smlp-btn { transition: transform .12s ease, box-shadow .12s ease; }
.smlp-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #111111 !important; }
.smlp-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #111111 !important; }
button[disabled] { opacity: .6; cursor: progress !important; }

/* Accordéons, menu déroulant */
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
.smlp-plus { transition: transform .2s ease; }
details[open] .smlp-plus { transform: rotate(45deg); }
details[open] .smlp-chev { transform: rotate(180deg); }
.smlp-dd a:hover { background: #F2EDE2; }

/* Choix « C'est pour quand ? » */
.smlp-pill:has(input:checked) { background: #111111; color: #FFFFFF; }

/* Champ piège anti-robots */
.smlp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Focus clavier */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #2F6BFF;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .smlp-track { animation: none; }
  .smlp-card, .smlp-btn, .smlp-plus { transition: none; }
}