/* ========== Global reset + variables ========== */
:root{
 --ink: #ffffff;        /* texte / traits */
/*  --paper: #f2e9d8;        /* fond */
  --paper: #0d1014;      /* fond */
/*  --ink: #262626;      /* texte / traits */
  --accent: #9c7f5a;     /* optionnel, à ajuster */
  --header-h: 80px;
  --container: 1200px;
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  line-height: 1.5;
}

/* Lenis smooth scroll helpers */
html.lenis {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-scrolling body {
  pointer-events: none;
}
.lenis [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.charm-regular{
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
}
.charm-bold{
  font-family: "Charm", cursive;
  font-weight: 700;
  font-style: normal;
}
.carattere-regular{
  font-family: "Carattere", cursive;
  font-weight: 400;
  font-style: normal;
}
.condiment-regular{
  font-family: "Condiment", cursive;
  font-weight: 400;
  font-style: normal;
}
.stoke-light{
  font-family: "Stoke", serif;
  font-weight: 300;
  font-style: normal;
}
.stoke-regular{
  font-family: "Stoke", serif;
  font-weight: 400;
  font-style: normal;
}
h2{
  font-family: "Stoke", serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(28px, 3vw, 35px);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

/* === Sticky footer layout === */
/*html, body { height: 100%; }    */             /* ➊ donne une hauteur au conteneur */
body{
  min-height: 100vh;                         /* fallback */
  min-height: 100svh;                        /* âž‹ viewport mobile moderne */
  display: flex;
  flex-direction: column;                    /* ➌ empile header/nav, contenu, footer */
}

/* Le contenu prend la place, le footer descend */
.site-main{ 
  flex: 1 0 auto; 
  min-height: 0; 
}

/* Header sticky (reste en haut au scroll) */
.site-header{
  position: sticky;
  position: -webkit-sticky;  /* vieux Safari */
  top: 0;
  z-index: 1000;
}

/* Médias fluides */
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

/* Liens & formulaires */
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Boutons avec angles évidés */
.corner-button {
  --corner-bg: var(--paper);
  --corner-fg: #ffffff;
  --corner-hover: var(--paper);
  --corner-border-width: 0.25rem;
  --corner-corner-size: 1.5rem;
  --corner-duration: 0.3s;
  --corner-font-size: 2.2rem;
  --corner-padding-y: 1.5rem;
  --corner-padding-x: 2rem;
  --corner-gap: 0.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--corner-gap);
  padding: var(--corner-padding-y) var(--corner-padding-x);
  border: var(--corner-border-width) solid currentColor;
  background: transparent;
  color: var(--corner-fg);
  font-family: var(--font-sans);
  font-size: var(--corner-font-size);
  letter-spacing: 0.02rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--corner-duration);
  z-index: 1;
}
.corner-button::before,
.corner-button::after {
  content: "";
  position: absolute;
  background: var(--corner-bg);
  z-index: -1;
  transition: all var(--corner-duration);
}
/* 101% pour éviter les artefacts d'arrondi sur Firefox */
.corner-button::before {
  width: calc(100% - var(--corner-corner-size));
  height: calc(101% + (var(--corner-border-width) * 2));
  top: calc(var(--corner-border-width) * -1);
  left: 50%;
  transform: translateX(-50%);
}
.corner-button::after {
  height: calc(100% - var(--corner-corner-size));
  width: calc(101% + (var(--corner-border-width) * 2));
  left: calc(var(--corner-border-width) * -1);
  top: 50%;
  transform: translateY(-50%);
}
.corner-button:hover {
  color: var(--corner-hover);
}
.corner-button:hover::before {
  width: 0;
}
.corner-button:hover::after {
  height: 0;
}
.corner-button:active {
  border-width: calc(var(--corner-border-width) / 2);
}
.corner-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}
/* Accessibilité */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.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;
}

/* Conteneur utilitaire */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: 30px; }

/* Motion reduce */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}


/* === Modales globales === */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 5vw, 64px);
  z-index: 4000;
}
.modal.is-open{ display: flex; }
.modal[hidden]{ display: none !important; }

.modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__dialog{
  position: relative;
  z-index: 1;
  width: min(920px, 92vw);
  display: grid;
  gap: 18px;
  /*padding: clamp(20px, 4vw, 28px);
  background: rgba(38,38,38,.94);
  border: 1px solid rgba(242,233,216,.25);*/ /*a remettre pour une boite de modale*/
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  overflow: hidden;
  color: var(--ink);
}

.modal__close{
  position:absolute;
  top:12px;
  right:12px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(242,233,216,.35);
  background: rgba(0,0,0,.35);
  color: var(--ink);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
  z-index: 10;
}
.modal__close:hover{ transform: translateY(-1px); background: rgba(0,0,0,.5); }
.modal__close span{ position:relative; width:16px; height:2px; display:block; }
.modal__close span::before,
.modal__close span::after{
  content:"";
  position:absolute;
  inset:0;
  background: currentColor;
}
.modal__close span::before{ transform: rotate(45deg); }
.modal__close span::after { transform: rotate(-45deg); }

.modal__media{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background:#000;
  border: 1px solid rgba(242,233,216,.25);
  overflow:hidden;
}
.modal__media iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
}

.modal__body{ display:grid; gap:10px; }
.modal__title{ margin:0; font-size: clamp(20px, 3vw, 26px); }
.modal__desc{ margin:0; opacity:.85; }

body.modal-open{
  overflow:hidden;
  height:100vh;
}

@media (max-width: 780px){
  .modal{ padding: 16px; }
  .modal__dialog{ width:100%; padding:20px; }
  .modal__close{ top:8px; right:8px; width:28px; height:28px; }
  .modal__close span{ width:14px; }
}