/* Direction artistique : fond papier chaud, encre prune, photos documentaires.
   Light mode forcé : aucun bloc de mode sombre, aucun script de bascule.
   Palette unique du site, déclinée d'une seule famille d'accent (prune-grenat). */

:root {
  color-scheme: light;

  --f-titre: 'Space Grotesk Variable', ui-sans-serif, system-ui, sans-serif;
  --f-texte: 'Roboto Variable', ui-sans-serif, system-ui, sans-serif;
  --f-graisse-titre: 700;
  --f-casse-kicker: uppercase;
  --tm: 0.707rem;
  --t1: 1.0rem;
  --t2: 1.414rem;
  --t3: 1.999rem;
  --t4: 2.827rem;
  --t5: 3.998rem;
  --t6: 5.653rem;
  --t-hero: clamp(2.4rem, 5.2vw, 4.4rem);
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1.0rem;
  --e5: 1.5rem;
  --e6: 2.0rem;
  --e7: 3.0rem;
  --e8: 4.0rem;
  --r-carte: 8px;
  --r-bouton: 6px;
  --r-image: 8px;
  --largeur: 1152px;
  --ico-trait: 2;

  --c-fond: #fbf9f8;
  --c-fond-2: #f2eaec;
  --c-surface: #ffffff;
  --c-texte: #241c1f;
  --c-texte-2: #6b5b60;
  --c-primaire: #a63a5b;
  --c-sur-primaire: #ffffff;
  --c-secondaire: #7d2942;
  --c-sur-secondaire: #ffffff;
  --c-primaire-texte: #7d2942;
  --c-secondaire-texte: #7d2942;
  --c-doux: #f8eef1;
  --c-sur-doux: #7d2942;
  --c-bord: #ded2d5;
  --c-voile: #1c1116;
  --c-sur-voile: #ffffff;
  --c-ombre: #2a151d;
  --c-froid: #3d5a63;
  --o-carte: 0 1px 2px rgba(28, 17, 22, 0.06);
  --o-survol: 0 18px 40px -12px color-mix(in srgb, #1c1116 22%, transparent);
  --carte-fond: #ffffff;
  --carte-encre: #241c1f;
  --carte-encre-2: #6b5b60;
  --carte-lien: #7d2942;
  --carte-bord: 1px solid #ded2d5;
  --carte-fond-mis-en-avant: #f8eef1;
  --btn-fond: #a63a5b;
  --btn-texte: #ffffff;
  --btn-bord: 0 solid transparent;
  --btn-ombre: none;
  --btn-deco: none;
  --btn-survol: #7d2942;
  --lien-couleur: #7d2942;
  --lien-deco: none;
  --lien-epaisseur: 1px;
  --lien-fond: transparent;
  --lien-fond-encre: #7d2942;

  /* empreinte de palette, exposée pour le contrôle anti-doublon du parc */
  --brand-accent: #a63a5b;
  --brand-accent-fort: #7d2942;
  --brand-fond: #fbf9f8;
  --brand-encre: #241c1f;

  /* hauteur du header collant (bandeau + pastille), mesurée puis réécrite par le script */
  --header-h: 116px;
}

/* Aucune page ne deborde horizontalement, a aucune largeur : un media un peu
   large est rogne par son propre cadre, il ne cree pas de barre de defilement. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  font-family: var(--f-texte);
  background: var(--c-fond);
  color: var(--c-texte);
}

h1, h2, h3, h4 {
  font-family: var(--f-titre);
  letter-spacing: -0.02em;
}

.kick {
  font-family: var(--f-titre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--tm);
  color: var(--c-primaire-texte);
}

/* pastille de rubrique : forme du thème, rounded-md et anneau d'un pixel */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-radius: 4px;
  background: var(--c-doux);
  color: var(--c-primaire-texte);
  box-shadow: inset 0 0 0 1px var(--c-bord);
  padding: 0.15em 0.5em;
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: var(--tm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.tag-sur-photo {
  background: rgba(28, 17, 22, 0.62);
  color: #ffffff;
  box-shadow: none;
}

/* boutons du thème : rounded-md, jamais de pilule */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.55em 1.2em;
  border-radius: var(--r-bouton);
  font-family: var(--f-titre);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.btn-plein {
  background: var(--c-primaire);
  color: #ffffff;
}

.btn-plein:hover {
  background: var(--btn-survol);
}

.btn-contour {
  background: #ffffff;
  color: var(--c-texte);
  box-shadow: inset 0 0 0 1px var(--c-bord);
}

.btn-contour:hover {
  background: var(--c-doux);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-primaire);
  outline-offset: 2px;
  border-radius: 4px;
}

/* halo de survol du thème : la couche grandit et s'opacifie */
.halo {
  position: absolute;
  inset: -1rem;
  border-radius: var(--r-carte);
  background: var(--c-doux);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 0;
}

.avec-halo:hover .halo,
.avec-halo:focus-within .halo {
  opacity: 1;
  transform: scale(1);
}

.avec-halo > *:not(.halo) {
  position: relative;
  z-index: 1;
}