/* ─────────────────────────────────────────
   CFDS 2026 — base.css
   Reset, variables CSS, typographie globale
   ───────────────────────────────────────── */

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


/* ── Override contraintes FSE parent (Twenty Twenty-Five) ── */
/* Le thème parent injecte des max-width via .is-layout-constrained
   et des paddings sur body/.wp-site-blocks qui empêchent les
   sections colorées de s'étirer en pleine largeur. */

html {
  margin-top: 0 !important; /* empêche tout décalage résiduel */
}

body,
.wp-site-blocks,
.is-layout-flow,
.is-layout-constrained,
.entry-content,
.wp-block-post-content {
  padding-top:    0 !important;
  padding-bottom: 0 !important;
  padding-left:   0 !important;
  padding-right:  0 !important;
  margin-top:     0 !important;
  max-width: none !important;
}

/* Neutraliser les règles de largeur sur les enfants directs */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.is-layout-flow > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: none !important;
}

/* S'assurer que main prend bien toute la largeur */
#main, .site-main {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* ── Variables globales ── */
:root {
  --blanc:    #FAFAF8;
  --noir:     #1A1814;
  --gris:     #5A5550;
  --gris-2:   #706B65;
  --gris-3:   #E8E5E0;
  --fond-alt: #F2EFE9;
  --fond-2:   #F7F5F1;
  --bleu:     #002395;
  --rouge:    #ED2939;

  --serif:    'Cormorant Garamond', Georgia, serif;
  --sans:     'Jost', system-ui, sans-serif;

  --max:      1100px;
  --nav-h:    56px;

  /* ── Échelle typographique (ratio 1.25 — Major Third) ── */
  --text-xs:   .64rem;                        /* légal, footnotes          */
  --text-sm:   .75rem;                        /* labels, tags, meta        */
  --text-base: .875rem;                       /* corps, descriptions       */
  --text-md:   1rem;                          /* lead text, inputs         */
  --text-lg:   1.25rem;                       /* card titles, sub-headings */
  --text-xl:   clamp(1.6rem, 2.8vw, 2rem);   /* section-h                 */
  --text-2xl:  clamp(2rem, 4vw, 3.2rem);     /* hero title                */

  /* ── Letter-spacing — 3 valeurs uniquement ── */
  --ls-tight:  .06em;   /* grands titres serif             */
  --ls-normal: .12em;   /* labels uppercase courants       */
  --ls-wide:   .2em;    /* édition, sous-titres très espacés */
}

/* ── Base HTML ── */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--blanc);
  color: var(--noir);
  font-family: var(--sans);
  font-size: var(--text-md);    /* base uniforme = 1rem */
  font-weight: 300;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Compense la nav fixe pour tous les liens ancres */
:target {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* ── Typographie de base ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.2;
  color: var(--noir);
}

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

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

a:hover { opacity: .8; }

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

ul, ol { list-style: none; }

/* ── Utilitaires ── */
.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;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 48px;
}

hr.sep {
  border: none;
  height: 1px;
  background: var(--gris-3);
  margin: 0;
}

/* ── Animations scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.on { opacity: 1; transform: none; }

.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
}
.stagger.on > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.00s; }
.stagger.on > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.05s; }
.stagger.on > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.10s; }
.stagger.on > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.15s; }
.stagger.on > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.20s; }
.stagger.on > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.25s; }
.stagger.on > *:nth-child(7) { opacity:1; transform:none; transition-delay:0.30s; }
.stagger.on > *:nth-child(8) { opacity:1; transform:none; transition-delay:0.35s; }
.stagger.on > *:nth-child(9) { opacity:1; transform:none; transition-delay:0.40s; }
.stagger.on > *:nth-child(10) { opacity:1; transform:none; transition-delay:0.45s; }
.stagger.on > *:nth-child(11) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(12) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(13) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(14) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(15) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(16) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(17) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(18) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(19) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger.on > *:nth-child(20) { opacity:1; transform:none; transition-delay:0.50s; }

/* ── Responsive base ── */
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
}