/* ÉtudZen — feuille de style de marque (site web + supports) */
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("../fonts/Outfit-Bold.ttf") format("truetype"); font-weight: 600 900; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Medium.ttf") format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/Poppins-Bold.ttf") format("truetype"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/Lora-Italic.ttf") format("truetype"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --navy-950: #061638; --navy-900: #0c1b4c; --navy-800: #0b2f66; --blue-700: #0a4fa8; --blue-600: #0b63c1;
  --blue-500: #1589dc; --sky-400: #20b2e9; --cyan-300: #19d3ea; --teal-400: #1fc6b4;
  --ice-100: #ddeff8; --ice-50: #f2f8fd; --surface: #ffffff; --slate-600: #46557a; --slate-500: #5f6c8a;
  --line: #d5e3f1; --on-dark: #ffffff; --on-dark-muted: #c4d4ea; --focus: #0b63c1;
  --font-display: "Outfit", "Poppins", system-ui, sans-serif;
  --font-sans: "Poppins", system-ui, sans-serif;
  --font-script: "Lora", Georgia, serif;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px;
  --shadow-card: 0 10px 30px rgba(12, 27, 76, .10);
  --shadow-button: 0 8px 20px rgba(11, 99, 193, .28);
  --grad-blue: linear-gradient(100deg, var(--blue-600), #0b72d4);
  --grad-navy: linear-gradient(115deg, var(--navy-800), var(--navy-950));
  --grad-cyan: linear-gradient(100deg, var(--cyan-300), var(--sky-400));
  --grad-logo: linear-gradient(90deg, var(--blue-600), var(--sky-400) 60%, var(--teal-400));
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--slate-600); background: var(--surface); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--blue-600); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--navy-900); line-height: 1.12; margin: 0 0 .5em; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
.accent { color: var(--blue-500); }
.on-dark .accent, .accent-cyan { color: var(--cyan-300); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.on-dark :focus-visible { outline-color: var(--cyan-300); }

/* Icônes */
.ico { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px/20px var(--font-display); padding: 14px 26px; border-radius: var(--radius-pill); border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn .ico { width: 20px; height: 20px; }
.btn-primary { color: #fff; background: var(--grad-blue); box-shadow: var(--shadow-button); }
.btn-primary:hover { background: var(--blue-700); }
.btn-outline { color: var(--navy-900); background: #fff; border-color: var(--navy-900); }
.btn-outline:hover { background: var(--ice-50); }
.btn-light { color: var(--navy-900); background: #fff; box-shadow: var(--shadow-card); }
.btn-cyan { color: var(--navy-900); background: var(--grad-cyan); text-transform: uppercase; letter-spacing: .02em; }
.btn-square { border-radius: var(--radius-md); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-lg { padding: 17px 30px; font-size: 17px; }
.btn-whatsapp { color: #fff; background: #128c4a; }

/* Typo utilitaires */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 13px/16px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--navy-900); margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--sky-400); }
.on-dark .eyebrow { color: #fff; }
.rule { display: block; width: 72px; height: 4px; border-radius: 4px; background: var(--grad-cyan); margin: 16px 0 20px; }
.lead { font-size: 19px; line-height: 1.55; color: var(--navy-900); }
.script { font-family: var(--font-script); font-style: italic; font-weight: 600; color: var(--navy-900); }
.sig { display: block; width: 220px; height: auto; }

/* Pastilles */
.badge { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; flex: none; }
.badge .ico { width: 30px; height: 30px; }
.badge-navy { background: radial-gradient(circle at 35% 30%, var(--blue-700), var(--navy-800)); color: #fff; }
.badge-light { background: var(--ice-100); color: var(--navy-800); }
.badge-blue { background: var(--blue-700); color: #fff; }
.badge-outline { border: 3px solid #fff; color: #fff; }
.badge-tile { border-radius: var(--radius-md); background: linear-gradient(150deg, var(--blue-700), var(--navy-800)); color: #fff; }