/* ============================================================
   BASE - variables, reset, typographie
   Chargé en premier sur TOUTES les pages.
   ============================================================ */

/* ---------- Police ITC Blair (logo) - auto-hébergée ---------- */
@font-face{
  font-family:'ITC Blair';
  src:url('../fonts/itc-blair-300.woff') format('woff');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'ITC Blair';
  src:url('../fonts/itc-blair-500.woff') format('woff');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'ITC Blair';
  src:url('../fonts/itc-blair-700.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Couleurs */
  --slate:#292d39;          /* fond sombre principal */
  --slate-deep:#1e222c;     /* fond sombre profond */
  --ink:#191c24;            /* texte principal */
  --ink-soft:#2b3140;       /* texte sur fond sable */
  --ink-mid:#3c4354;        /* texte secondaire sur fond sable */
  --paper:#ffffff;
  --grey:#f2f3f5;           /* fond de section clair */
  --grey-mid:#c9ccd3;
  --grey-text:#6b7080;
  --accent:#9aa3b5;
  --sand:#EFE8DC;           /* fond sable (news, menu, triptyque) */
  --cream:#FBF6EE;          /* hover des cartes */
  --teal:#7FB3AF;           /* soulignés / triangles CTA */
  --teal-light:#8FC0BC;     /* badges, triangle hero */
  --teal-deep:#3f7c76;      /* accent lisible sur fond clair (survols) */

  /* Typographies */
  --serif:'Playfair Display', Georgia, serif;
  --sans:'Inter', -apple-system, sans-serif;
  --display:'Poppins', 'Inter', -apple-system, sans-serif;
  --blair:'ITC Blair', 'Poppins', sans-serif;

  /* Transitions */
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-weight:300;
  line-height:1.6;
}

a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- Structure commune ---------- */
.section{padding:7rem 3rem;}

.eyebrow{
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-family:var(--blair);
  color:var(--grey-text);margin-bottom:1rem;font-weight:300;
}

.section h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.8rem, 3vw, 2.6rem);line-height:1.25;
  max-width:24ch;
}

/* ---------- Animations globales ---------- */
@keyframes rise{to{opacity:1;transform:none;}}
@keyframes fadein{to{opacity:1;}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .section{padding:4.5rem 1.4rem;}
}