/* ==========================================================================
   LA CASA TRAINING CLUB — Design system
   1. Fonts
   2. Tokens
   3. Reset & base
   4. Typographie
   5. Matière (papier / rouge / grain)
   6. Layout
   7. Composants
   8. Animations
   ========================================================================== */

/* ==========================================================================
   1. FONTS  (auto-hébergées — pas de requête tierce, conforme RGPD)
   --------------------------------------------------------------------------
   « Kudryashev » est la typo officielle du logo La Casa. Elle n'est pas
   libre de droits : dépose simplement kudryashev-display.woff2 dans
   /assets/fonts/ et décommente le bloc @font-face ci-dessous — toute
   l'identité bascule automatiquement dessus.
   En attendant, Bodoni Moda (même famille : didone haut contraste) assure
   le rendu.
   ========================================================================== */

/*
@font-face {
  font-family: 'Casa Display';
  src: url('../fonts/kudryashev-display.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
*/

@font-face { font-family: 'Casa Display'; src: url('../fonts/bodoni-moda-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Casa Display'; src: url('../fonts/bodoni-moda-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Casa Display'; src: url('../fonts/bodoni-moda-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Casa Display'; src: url('../fonts/bodoni-moda-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Casa Display'; src: url('../fonts/bodoni-moda-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* Script du logo : Dancing Script — traits pleins, rendu net même à petite
   taille (Parisienne, plus fine, bavait sous 20 px). Utilisé en 400 (light)
   aux grandes tailles et en 500 (medium light) dans le header et le footer.
   Le .woff2 Parisienne reste dans /assets/fonts si tu veux comparer. */
@font-face { font-family: 'Casa Script'; src: url('../fonts/dancing-script-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Casa Script'; src: url('../fonts/dancing-script-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Casa Script'; src: url('../fonts/dancing-script-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ==========================================================================
   2. TOKENS
   ========================================================================== */

:root {
  /* — Identité — */
  --casa-red: #651010;
  --casa-paper: #EFE8DD;

  /* — Dérivées — */
  --casa-red-dark: #4A0B0B;
  --casa-red-deep: #390808;
  --casa-red-soft: #8A2020;
  --casa-ink: #241A16;
  --casa-ink-soft: #5C4C44;
  --casa-paper-dark: #E2D9CA;
  --casa-paper-deep: #D3C7B4;
  --casa-line: rgba(36, 26, 22, 0.16);
  --casa-line-strong: rgba(36, 26, 22, 0.3);
  --casa-line-paper: rgba(239, 232, 221, 0.24);

  /* — Activités du planning — */
  --activity-wod: #B94B41;
  --activity-wod-bg: #F0D9D4;
  --activity-hyrox: #C97C24;
  --activity-hyrox-bg: #F8E6CD;
  --activity-open-gym: #9A9247;
  --activity-open-gym-bg: #EFEDD2;
  --activity-endurance: #A2339B;
  --activity-endurance-bg: #F1D9EF;
  --activity-renfo: #C93B80;
  --activity-renfo-bg: #F9DCEA;

  /* — Typo — */
  --font-display: 'Casa Display', 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-script: 'Casa Script', 'Dancing Script', cursive;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* — Rythme — */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1500px;
  --maxw-text: 62ch;
  --section-y: clamp(3rem, 5vw, 5rem);
  --radius: 2px;

  /* — Matière — */
  --paper-tile: url('../img/paper-texture.webp');

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 82px;
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
}

/* ==========================================================================
   3. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(0.975rem, 0.93rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--casa-ink);
  background-color: var(--casa-paper);
  background-image: var(--paper-tile);
  background-size: 420px 420px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, video, svg { max-width: 100%; display: block; }
img { height: auto; }

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

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, p, figure, blockquote { margin: 0; }

hr { border: 0; border-top: 1px solid var(--casa-line); margin: 0; }

::selection { background: var(--casa-red); color: var(--casa-paper); }

:focus-visible {
  outline: 2px solid var(--casa-red);
  outline-offset: 3px;
  border-radius: 1px;
}

.on-red :focus-visible { outline-color: var(--casa-paper); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--casa-red); color: var(--casa-paper);
  padding: 0.9rem 1.4rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; font-size: 0.8rem;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   4. TYPOGRAPHIE
   ========================================================================== */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.015em;
}

/* line-height généreux : les scripts débordent leur boîte de ligne, et une
   valeur de 1 fait couper les hampes et les jambages. */
.script {
  font-family: var(--font-script);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.24;
}

/* « La Casa » s'écrit TOUJOURS dans la typo du logo — jamais en script,
   jamais en Poppins. Un seul mot, une seule police, partout. */
.casa-word {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  line-height: 1.05;
}

/* Titres « sportifs » — Poppins condensé optiquement */
.h-sport {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.t-hero    { font-size: clamp(3.4rem, 13vw, 11rem); }
.t-xxl     { font-size: clamp(2.6rem, 7.2vw, 6.2rem); }
.t-xl      { font-size: clamp(2.1rem, 5vw, 4rem); }
.t-l       { font-size: clamp(1.6rem, 3.1vw, 2.6rem); }
.t-m       { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.lead {
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.4rem);
  line-height: 1.55;
  font-weight: 400;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: clamp(0.68rem, 0.63rem + 0.2vw, 0.78rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: clamp(24px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.eyebrow--num::before { display: none; }

.eyebrow__num {
  font-family: var(--font-display);
  font-size: 1.25em;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0.55;
}

.serif-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
}

.muted { color: var(--casa-ink-soft); }
.on-red .muted { color: rgba(239, 232, 221, 0.72); }

.measure { max-width: var(--maxw-text); }

.note {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--casa-ink-soft);
  line-height: 1.5;
}

/* Repère « donnée manquante » — visible sans casser la mise en page */
.tbd {
  font-style: normal;
  border-bottom: 1px dashed var(--casa-line-strong);
  opacity: 0.65;
}

/* ==========================================================================
   5. MATIÈRE
   ========================================================================== */

.paper {
  background-color: var(--casa-paper);
  background-image: var(--paper-tile);
  background-size: 420px 420px;
}

.paper--dark {
  background-color: var(--casa-paper-dark);
  background-image: var(--paper-tile);
  background-size: 420px 420px;
  background-blend-mode: multiply;
}

/* Sections rouges : la même tuile papier est réutilisée en overlay,
   ce qui garde la matière cohérente sur tout le site sans asset en plus. */
.on-red {
  position: relative;
  background-color: var(--casa-red);
  color: var(--casa-paper);
  isolation: isolate;
}
.on-red::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--paper-tile);
  background-size: 380px 380px;
  mix-blend-mode: overlay;
  opacity: 0.28;
  pointer-events: none;
  z-index: -1;
}
.on-red--deep { background-color: var(--casa-red-deep); }

.on-ink {
  position: relative;
  background-color: #1A1210;
  color: var(--casa-paper);
  isolation: isolate;
}

/* Grain léger appliqué aux photos pour l'effet « imprimé » */
.grained { position: relative; overflow: hidden; }
.grained::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--paper-tile);
  background-size: 320px 320px;
  mix-blend-mode: soft-light;
  opacity: 0.5;
  pointer-events: none;
}

/* ==========================================================================
   6. LAYOUT
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 1120px; }

.section { padding-block: var(--section-y); position: relative; }
/* même respiration partout : une seule valeur pilote tout le rythme vertical */
.section--tight { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }

.section-head {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-bottom: clamp(1.75rem, 3.2vw, 3rem);
}
.section-head--split {
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 980px) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
}

.rule {
  height: 1px;
  background: var(--casa-line);
  border: 0;
}
.on-red .rule { background: var(--casa-line-paper); }

/* Filet d'impression décoratif */
.print-rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--casa-ink-soft);
}
.print-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--casa-line);
}
.on-red .print-rule { color: rgba(239, 232, 221, 0.7); }
.on-red .print-rule::after { background: var(--casa-line-paper); }

/* ==========================================================================
   7. COMPOSANTS
   ========================================================================== */

/* ---------- Logo ---------------------------------------------------------
   Verrouillage typographique du logo La Casa. Pour utiliser le fichier
   officiel : remplace le contenu de .casa-logo par <img src="...">, les
   dimensions sont déjà gérées par le conteneur.
   ------------------------------------------------------------------------ */
.casa-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  color: var(--casa-red);
  --logo-size: 1.5rem;
}
.casa-logo__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--logo-size);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.casa-logo__sub {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: calc(var(--logo-size) * 0.66);
  line-height: 1.3;
  margin-top: calc(var(--logo-size) * -0.2);
  margin-bottom: calc(var(--logo-size) * -0.1);
  letter-spacing: 0.005em;
}
.casa-logo--paper { color: var(--casa-paper); }

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--casa-red);
  --btn-fg: var(--casa-paper);
  --btn-bd: var(--casa-red);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 1.9em;
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.82rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  overflow: hidden;
  transition: color 0.45s var(--ease), background-color 0.45s var(--ease), border-color 0.45s var(--ease);
  isolation: isolate;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--casa-ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s var(--ease);
  z-index: -1;
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); }
.btn:hover, .btn:focus-visible { border-color: var(--casa-ink); color: var(--casa-paper); }

.btn__arrow { transition: transform 0.45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--casa-red);
  --btn-bd: var(--casa-red);
}
.btn--paper {
  --btn-bg: var(--casa-paper);
  --btn-fg: var(--casa-red);
  --btn-bd: var(--casa-paper);
}
.btn--paper::before { background: var(--casa-red-deep); }
.btn--paper:hover, .btn--paper:focus-visible { color: var(--casa-paper); border-color: var(--casa-paper); }

.btn--ghost-paper {
  --btn-bg: transparent;
  --btn-fg: var(--casa-paper);
  --btn-bd: rgba(239, 232, 221, 0.55);
}
.btn--ghost-paper::before { background: var(--casa-paper); }
.btn--ghost-paper:hover, .btn--ghost-paper:focus-visible { color: var(--casa-red); border-color: var(--casa-paper); }

.btn--lg { padding: 1.3em 2.4em; font-size: clamp(0.78rem, 0.72rem + 0.2vw, 0.9rem); }
.btn--block { display: flex; width: 100%; }

/* ---------- Lien souligné animé ---------- */
.link-u {
  position: relative;
  display: inline-block;
  font-weight: 500;
}
.link-u::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.link-u:hover::after, .link-u:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Tag / label imprimé ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.85em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}

/* Tampon : texte circulaire en SVG, à la manière d'un cachet imprimé */
.stamp {
  display: block;
  width: clamp(112px, 13vw, 158px);
  aspect-ratio: 1;
  transform: rotate(-9deg);
  overflow: visible;
}
.stamp__edge { fill: none; stroke: currentColor; stroke-width: 2; opacity: 0.9; }
.stamp__edge--thin { stroke-width: 1; opacity: 0.45; }
.stamp__ring {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}
.stamp__word {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-anchor: middle;
}
.stamp__x {
  fill: currentColor;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  text-anchor: middle;
  opacity: 0.9;
}
.stamp__since {
  fill: currentColor;
  font-family: var(--font-sans);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-anchor: middle;
  opacity: 0.8;
}

/* ---------- Média ---------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--casa-paper-deep);
}
/* position absolue : une hauteur en % ne se résout pas de façon fiable dans un
   conteneur dimensionné par aspect-ratio. */
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.media--hover:hover img { transform: scale(1.045); }

.media-caption {
  margin-top: 0.85rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--casa-ink-soft);
  display: flex;
  gap: 0.7rem;
  align-items: center;
}
.media-caption::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.ratio-1x1   { aspect-ratio: 1 / 1; }
.ratio-4x5   { aspect-ratio: 4 / 5; }
.ratio-3x4   { aspect-ratio: 3 / 4; }
.ratio-4x3   { aspect-ratio: 4 / 3; }
.ratio-16x9  { aspect-ratio: 16 / 9; }
.ratio-3x2   { aspect-ratio: 3 / 2; }

/* ---------- Carte papier ---------- */
.card {
  position: relative;
  background-color: var(--casa-paper);
  background-image: var(--paper-tile);
  background-size: 420px 420px;
  border: 1px solid var(--casa-line);
  border-radius: var(--radius);
  transition: border-color 0.5s var(--ease), transform 0.5s var(--ease);
}

/* ==========================================================================
   8. ANIMATIONS
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Reveal « masque » : le clip est porté par les ENFANTS, jamais par l'élément
   observé — un élément entièrement clippé n'est plus vu par l'IntersectionObserver. */
[data-reveal='mask'] { opacity: 1; transform: none; }
[data-reveal='mask'] > * {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
/* état ouvert légèrement débordant : sinon le clip coupe l'encre qui sort de la
   boîte (hampes des scripts, ombres). */
[data-reveal='mask'].is-in > * { clip-path: inset(-35% -12% -35% -12%); }

[data-reveal='scale'] { opacity: 0; transform: scale(1.06); }
[data-reveal='scale'].is-in { opacity: 1; transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-reveal] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}