/* ============================================================
   common.css — Styles partagés Kraft Activités
   Mutualisé depuis : index.html, photographie.html,
   communication.html, evenements.html, portfolio.html
   (mariage.html a une palette propre, mais hérite du reset)
   ============================================================ */

/* ─── VARIABLES ──────────────────────────────────────────── */
:root {
  /* Palette principale */
  --teal:      #1B7A8C;
  --teal-dk:   #135E6D;
  --teal-lt:   #2A9CB2;
  --teal-xl:   #5DC0D4;
  --teal-mist: #EBF6F8;
  --amber:     #E8721A;
  --amber-lt:  #F0924A;
  --amber-pale:#FEF3EB;
  --ink:       #0E1117;
  --ink2:      #1D2130;
  --ink3:      #454A5A;
  --muted:     #7A8099;
  --border:    #E2E5EF;
  --bg:        #F6F7FB;
  --white:     #FFFFFF;
  /* Typo */
  --D: 'Plus Jakarta Sans', sans-serif;
  --B: 'Instrument Sans', sans-serif;
  /* Easing */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Espacement adaptatif */
  --px: 1.25rem;
  --py: 4rem;
}
@media (min-width: 640px)  { :root { --px: 2.5rem;  --py: 5rem; } }
@media (min-width: 1024px) { :root { --px: 4.5rem;  --py: 7rem; } }


/* ─── RESET / BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--B);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--teal); }

/* Texte sélectionné */
::selection { background: var(--teal); color: #fff; }


/* ─── FONDU ENTRÉE PAGE ──────────────────────────────────── */
/* Chaque page gère body.ready localement dans son <style> */


/* ─── CURSEUR PERSONNALISÉ (desktop only) ────────────────── */
#cur, #curR { display: none; }
@media (pointer: fine) {
  #cur {
    display: block; width: 8px; height: 8px;
    background: var(--amber); border-radius: 50%;
    position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); transition: transform .12s;
  }
  #curR {
    display: block; width: 36px; height: 36px;
    border: 1.5px solid rgba(27,122,140,.5); border-radius: 50%;
    position: fixed; top: 0; left: 0;
    pointer-events: none; z-index: 9998;
    transform: translate(-50%, -50%); transition: all .35s var(--ease);
  }
}


/* ─── UTILITAIRES ────────────────────────────────────────── */

/* Kicker — label de section */
.kicker {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--teal); display: block; margin-bottom: .9rem;
}

/* Titre de section h2.st */
h2.st {
  font-family: var(--D);
  font-size: clamp(1.55rem, 5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
}
@media (min-width: 1024px) { h2.st { letter-spacing: -.03em; } }
h2.st .ct { color: var(--teal); }
h2.st .ca { color: var(--amber); }

/* .rv, .d1-.d4 définis localement dans chaque page */

/* Breadcrumb */
.breadcrumb {
  display: flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 500; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--teal-xl); transition: color .3s; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,.2); }


/* ─── BOUTONS ────────────────────────────────────────────── */

/* Base commune à tous les boutons principaux */
.btn-t, .btn-g, .btn-to, .btn-w {
  min-height: 44px;
  display: inline-flex; align-items: center;
  border-radius: 8px;
  font-size: .85rem; font-weight: 600;
  transition: all .35s var(--ease);
  transform: translateZ(0);
}
.btn-t:active, .btn-to:active, .btn-w:active { transform: scale(.97); }

/* Teal plein */
.btn-t {
  padding: .8rem 1.75rem;
  background: var(--teal); color: #fff;
  border: 1.5px solid var(--teal);
}
.btn-t:hover {
  background: var(--teal-dk);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(27,122,140,.38);
}

/* Ghost blanc (sur fond sombre) */
.btn-g {
  padding: .8rem 1.75rem;
  background: transparent; color: rgba(255,255,255,.8);
  border: 1.5px solid rgba(255,255,255,.2);
}
.btn-g:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }

/* Teal outline */
.btn-to {
  padding: .8rem 1.75rem;
  background: var(--teal-mist); color: var(--teal);
  border: 1.5px solid rgba(27,122,140,.22);
}
.btn-to:hover { background: var(--teal); color: #fff; }

/* Blanc (sur fond coloré) */
.btn-w {
  padding: .9rem 2rem;
  background: #fff; color: var(--teal);
  font-weight: 700;
  border: none;
}
.btn-w:hover {
  background: var(--ink); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}