/* ============================================================
   Tweaks — knobs de morphing design (phase conception)
   Ces vars CSS sont lues par les sélecteurs data-* ci-dessous.
   Elles ne touchent PAS aux variables couleur de style.css.
   ============================================================ */

:root {
  --tw-text-scale:   1;      /* échelle typographique */
  --tw-glass-blur:   16px;   /* intensité blur glassmorphism */
  --tw-grain:        0.4;    /* opacité grain hero */
  --tw-orb-size:     78vw;   /* taille max orbe */
  --tw-orb-hue:      0;      /* rotation teinte orbe */
  --tw-section-pad:  96px;   /* padding vertical sections */
}

body { font-size: calc(17px * var(--tw-text-scale)); }

/* Section density */
.section      { padding: var(--tw-section-pad) 0; }
.cta-banner   { padding: calc(var(--tw-section-pad) * 1.25) 0; }

/* Glass blur */
.card       { backdrop-filter: blur(var(--tw-glass-blur)); -webkit-backdrop-filter: blur(var(--tw-glass-blur)); }
.nav.is-stuck { backdrop-filter: saturate(140%) blur(var(--tw-glass-blur)); }

/* Orb */
.orb { width: min(560px, var(--tw-orb-size)); filter: drop-shadow(0 40px 80px rgba(168,197,218,0.18)) hue-rotate(calc(var(--tw-orb-hue) * 1deg)); }

/* Hero background — valeurs hex fixes, pas d'oklch */
.hero {
  background:
    radial-gradient(ellipse 70% 55% at 50% 20%, rgba(168,197,218,0.18), transparent 55%),
    var(--navy);
}

.hero__grain { opacity: var(--tw-grain); }

/* ---- Layout modes ---- */
:root[data-layout="rows"] .services__grid { grid-template-columns: 1fr; gap: 0; }
:root[data-layout="rows"] .card {
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  background: transparent; padding: 32px 16px;
}
:root[data-layout="rows"] .card:last-child { border-bottom: 0; }

:root[data-layout="bento"] .services__grid { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: minmax(220px, auto); }
:root[data-layout="bento"] .card:nth-child(1) { grid-column: span 1; grid-row: span 2; }
:root[data-layout="bento"] .card:nth-child(4) { grid-column: span 2; }
@media (max-width: 960px) {
  :root[data-layout="bento"] .services__grid { grid-template-columns: 1fr 1fr; }
  :root[data-layout="bento"] .card:nth-child(1),
  :root[data-layout="bento"] .card:nth-child(4) { grid-column: span 1; grid-row: span 1; }
}

/* ---- Headline toggle ---- */
:root[data-headline="serif"] .hero h1,
:root[data-headline="serif"] .section__title,
:root[data-headline="serif"] .coming__title,
:root[data-headline="serif"] .cta-banner h2 {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.015em;
}
:root[data-headline="serif"] .hero h1 em,
:root[data-headline="serif"] .section__title em,
:root[data-headline="serif"] .cta-banner h2 em { font-style: italic; }

/* ---- Card hover style ---- */
:root[data-cardfx="lift"]   .card:hover { transform: translateY(-6px); }
:root[data-cardfx="tilt"]   .card:hover { transform: rotate(-1deg) translateY(-3px); }
:root[data-cardfx="invert"] .card:hover { background: var(--white); }
:root[data-cardfx="invert"] .card:hover h3 { color: var(--navy); }
:root[data-cardfx="invert"] .card:hover p  { color: rgba(27,42,74,0.7); }