/* Snacky — reset, header, footer, composants partagés */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--snk-white);
  color: var(--snk-ink);
  font-family: var(--snk-sans);
  font-weight: 500;
  overflow-x: hidden;
}

/* Le reset doit garder le ratio des images : sans height:auto une largeur
   contrainte écrase la hauteur (gotcha constaté sur les autres thèmes maison). */
img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--snk-yellow); color: var(--snk-ink); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--snk-violet);
  outline-offset: 2px;
}

.snk-page { display: flex; flex-direction: column; min-height: 100vh; }
.snk-main { flex: 1; }

.snk-container {
  max-width: var(--snk-container);
  margin: 0 auto;
  padding-left: var(--snk-gutter);
  padding-right: var(--snk-gutter);
}

.snk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--snk-ink);
  color: var(--snk-white);
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 60;
}
.snk-skip:focus { left: 8px; top: 8px; }

/* ---------- Logo ---------- */
.snk-logo {
  font-family: var(--snk-display);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .9;
  color: var(--snk-ink);
}
.snk-logo span { color: var(--snk-violet); }

/* ---------- Header ---------- */
.snk-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--snk-white);
  border-bottom: 2px solid var(--snk-ink);
}
.snk-header__inner {
  max-width: var(--snk-container);
  margin: 0 auto;
  padding: 14px var(--snk-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
}
.snk-header .snk-logo { font-size: clamp(30px, 6vw, 40px); }

.snk-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.snk-nav a {
  padding: 9px 13px;
  background: var(--snk-tab-bg, var(--snk-violet));
  color: var(--snk-tab-fg, var(--snk-white));
  transition: background 120ms, color 120ms;
}
.snk-nav a:hover,
.snk-nav a:focus-visible {
  background: var(--snk-tab-bg-hover, var(--snk-ink));
  color: var(--snk-tab-fg-hover, var(--snk-white));
}

.snk-header__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.snk-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--snk-ink);
  opacity: .55;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity 120ms, color 120ms;
}
.snk-search-toggle:hover,
.snk-search-toggle:focus-visible { opacity: 1; color: var(--snk-pink); }
.snk-search-toggle svg { width: 17px; height: 17px; }

.snk-burger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border: 2px solid var(--snk-ink);
  background: var(--snk-white);
  color: var(--snk-ink);
  font-family: var(--snk-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.snk-burger:hover, .snk-burger:focus-visible { background: var(--snk-ink); color: var(--snk-white); }
.snk-burger__bars { display: flex; flex-direction: column; gap: 3px; }
.snk-burger__bars span { display: block; width: 16px; height: 2px; background: currentColor; }

/* Barre de recherche dépliable (le header maquette n'a que l'icône) */
.snk-header__search { display: none; width: 100%; order: 4; padding-bottom: 10px; }
.snk-header__search[data-open="true"] { display: block; }
.snk-header__search form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 560px; }

.snk-field {
  font-family: var(--snk-sans);
  font-weight: 500;
  font-size: 16px;
  padding: 14px 16px;
  border: 2px solid var(--snk-ink);
  background: var(--snk-white);
  color: var(--snk-ink);
  outline: none;
  flex: 1;
  min-width: 220px;
  border-radius: 0;
  -webkit-appearance: none;
}

@media (max-width: 1120px) {
  .snk-burger { display: flex; }
  .snk-nav { display: none; }
  .snk-nav[data-open="true"] { display: flex; width: 100%; order: 3; padding-bottom: 6px; }
}

/* ---------- Footer ---------- */
.snk-footer { background: var(--snk-ink); color: var(--snk-white); }
.snk-footer__inner {
  max-width: var(--snk-container);
  margin: 0 auto;
  padding: 36px var(--snk-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.snk-footer .snk-logo { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.04em; color: var(--snk-white); }
.snk-footer nav {
  display: flex;
  gap: 20px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  flex-wrap: wrap;
}
.snk-footer nav a { color: var(--snk-white); opacity: .8; transition: color 120ms, opacity 120ms; }
.snk-footer nav a:hover, .snk-footer nav a:focus-visible { color: var(--snk-pink-light); opacity: 1; }
.snk-footer__copy { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .45; }

/* ---------- Composants ---------- */

/* Cadre image : bordure vive + ombre dure décalée dans la couleur de rubrique */
.snk-frame {
  position: relative;
  width: 100%;
  background: var(--snk-ph-light);
  border: 2px solid var(--snk-ink);
  box-shadow: var(--snk-sh, 6px) var(--snk-sh, 6px) 0 var(--snk-shc, var(--snk-violet));
  overflow: hidden;
}
.snk-frame--lg { --snk-sh: 10px; }
.snk-frame--hero { --snk-sh: 12px; }
.snk-frame img { width: 100%; height: 100%; object-fit: cover; }
.snk-frame__ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .32;
  text-align: center;
  padding: 10px;
}

/* Sur fond sombre : cadre blanc, fond de placeholder sombre */
.snk-dark .snk-frame { background: var(--snk-ph-dark); border-color: var(--snk-white); }
.snk-dark { background: var(--snk-ink); color: var(--snk-white); }

/* Badge rubrique */
.snk-badge {
  align-self: flex-start;
  display: inline-block;
  background: var(--snk-badge-bg, var(--snk-violet));
  color: var(--snk-badge-fg, var(--snk-white));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 6px 10px;
}
.snk-badge--sm { font-size: 10px; padding: 4px 8px; }
.snk-badge--title {
  font-family: var(--snk-display);
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: -.02em;
  padding: 8px 14px;
}

/* Boutons */
.snk-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--snk-ink);
  color: var(--snk-white);
  font-family: var(--snk-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 13px 20px;
  border: 0;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.snk-btn:hover, .snk-btn:focus-visible { background: var(--snk-violet); }
.snk-btn--lg { padding: 15px 22px; }
.snk-btn--violet { background: var(--snk-violet); border: 2px solid var(--snk-ink); padding: 14px 20px; }
.snk-btn--violet:hover, .snk-btn--violet:focus-visible { background: var(--snk-ink); }

/* En-tête de section (badge + baseline + voir tout) */
.snk-sechead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.snk-sechead__base { font-size: 13px; opacity: .55; }
.snk-dark .snk-sechead__base { opacity: .6; }
.snk-all {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--snk-rub, var(--snk-violet));
  padding-bottom: 2px;
}

/* Titres de carte */
.snk-t {
  font-family: var(--snk-display);
  font-weight: 800;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: pretty;
  transition: color 120ms;
}
.snk-hov:hover .snk-t,
.snk-hov:focus-visible .snk-t { color: var(--snk-hover, var(--snk-violet-hover)); }

.snk-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.snk-card__sum { font-size: 15px; line-height: 1.5; margin: 0; opacity: .78; text-wrap: pretty; }

.snk-rule-b { border-bottom: 2px solid var(--snk-ink); }
.snk-dark .snk-rule-b { border-bottom-color: var(--snk-white); }

.snk-footer__legal {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.snk-footer__legal a { color: var(--snk-white); opacity: .45; transition: color 120ms, opacity 120ms; }
.snk-footer__legal a:hover, .snk-footer__legal a:focus-visible { color: var(--snk-pink-light); opacity: 1; }

/* Les titres portent des classes de composant : leurs marges par défaut ne
   doivent rien changer au rendu (le design ne bouge pas d'un pixel). */
.snk-logo-h1 { margin: 0; display: flex; align-items: center; }
/* Uniquement la marge : imposer une line-height ferait perdre 2 px de hauteur
   à chaque badge de rubrique par rapport au <span> d'origine. */
h2.snk-badge, h2.snk-badge--title { margin: 0; }
h2.snk-t, h3.snk-t, p.snk-t, h3.snk-numlist__t, h3.snk-tops__t { margin: 0; }

/* Titre présent pour les lecteurs d'écran et les moteurs, invisible à l'écran.
   Défini ici pour ne pas dépendre de la feuille classic-themes de WordPress. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip-path: none;
  background: var(--snk-white);
  color: var(--snk-ink);
  height: auto;
  width: auto;
  padding: 12px 18px;
  z-index: 100;
}