/* ============================================================
   BASE.CSS — Variables, Reset, Typographie, Layout global
   Studio Antoine Ozen
   ============================================================ */

/* ───────────────────────────── */
/*          ROTA — NORMAL        */
/* ───────────────────────────── */

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-Thin.woff2") format("woff2");
  font-display: swap;
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-ExtraLight.woff2") format("woff2");
  font-display: swap;
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-Light.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-Regular.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-Medium.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-SemiBold.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-Bold.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-ExtraBold.woff2") format("woff2");
  font-display: swap;
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-Black.woff2") format("woff2");
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}


/* ───────────────────────────── */
/*          ROTA — ITALIC        */
/* ───────────────────────────── */

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-ThinItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-ExtraLightItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-LightItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-Italic.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-MediumItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-SemiBoldItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-BoldItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-ExtraBoldItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Rota";
  src: url("../assets/fonts/Rota-BlackItalic.woff2") format("woff2");
  font-display: swap;
  font-weight: 900;
  font-style: italic;
}

/* ── DESIGN TOKENS ── */
:root {
  /* Polices */
  --ff-display: "Rota", "Playfair Display", Georgia, serif;
  --ff-body:    "Rota", "DM Sans", system-ui, sans-serif;

  /* Couleurs — Mode Jour (défaut) */
  --bg:    #fefcf8;
  --fg:    #111110;
  --fg2:   rgba(17, 17, 16, 0.38);
  --fg3:   rgba(17, 17, 16, 0.06);
  --bdr:   rgba(17, 17, 16, 0.10);

  /* Layout */
  --max-w: 1080px;
  --gx:    3rem;       /* gutter horizontal */

  /* Transitions */
  --ease:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-theme:  1.2s ease;
}

/* ── MODE NUIT ── */
body.dark {
  --bg:  #0d0d0b;
  --fg:  #f0ede6;
  --fg2: rgba(240, 237, 230, 0.38);
  --fg3: rgba(240, 237, 230, 0.05);
  --bdr: rgba(240, 237, 230, 0.09);
}

/* ── RESET ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:   var(--bg);
  color:        var(--fg);
  font-family:  var(--ff-body);
  font-weight:  300;
  line-height:  1.6;
  cursor:       none;
  overflow-x:   hidden;
  transition:   background var(--ease-theme), color var(--ease-theme);
}

img {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
}

/* ── CENTRAGE GÉNÉRAL ── */
/* Utiliser la classe .c pour centrer un bloc dans la page */
.c {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--gx);
}

/* ── PAGE WRAPPER (contenu principal au-dessus du halo) ── */
.pw {
  position: relative;
  z-index:  10;
  transition: filter 0.5s ease;
}

.pw.blur {
  filter:          blur(14px);
  pointer-events:  none;
}

/* ── TYPOGRAPHIE UTILITAIRES ── */

/* Reveal au scroll */
.rv0 {
  opacity:    0;
  transform:  translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.rv0.on {
  opacity:   1;
  transform: translateY(0);
}

/* ── CANVAS (halo + blob) ── */
#halo-cv,
#blob-cv {
  position:       fixed;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  pointer-events: none;
}

#halo-cv { z-index: 0; }
#blob-cv  { z-index: 9990; }


/* Masqué à l'écran, lu par Google et les lecteurs d'écran (ex. <h1>) */
.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}