/* OZZO — landing page
 * Feuille du site : composants et mise en page.
 * Toutes les valeurs viennent des tokens du design system (css/tokens/*.css).
 * Ne pas ajouter de couleur, de police, de rayon ou d'espacement hors tokens.
 */
@import url("tokens/fonts.css?v=2026101105");
@import url("tokens/colors.css?v=2026101105");
@import url("tokens/typography.css?v=2026101105");
@import url("tokens/layout.css?v=2026101105");
@import url("tokens/base.css?v=2026101105");

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ---------- Mise en page ---------- */
.wrap { max-width: var(--container-lg); margin: 0 auto; padding-inline: 20px; }
.section { padding-block: var(--space-16); scroll-margin-top: 68px; }
.section--white { background: var(--white); border-top: 1px solid var(--border-subtle); }
.section--page { background: var(--surface-page); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

/* ---------- Accessibilité ---------- */
.skip-link { position: absolute; left: -9999px; top: 8px; }
.skip-link:focus { left: 16px; z-index: 200; background: var(--white); padding: 8px 14px; border-radius: var(--radius-md); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

/* ---------- Logotype OZZO (bande horizontale au milieu des lettres) ---------- */
.logo { position: relative; display: inline-block; font-family: var(--font-display); font-weight: var(--weight-medium); letter-spacing: -0.02em; white-space: nowrap; color: var(--green-600); }
.logo span { display: block; }
.logo .logo-top { clip-path: inset(0 0 57% 0); }
.logo .logo-bot { position: absolute; left: 0; top: 0; clip-path: inset(57% 0 0 0); }
.logo--header { font-size: 30px; line-height: 30px; }
.logo--footer { font-size: 28px; line-height: 28px; color: var(--white); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border-subtle); }
.site-header__inner { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.site-header__brand { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-header__right { display: flex; align-items: center; gap: var(--space-2); }
.site-nav { display: none; align-items: center; gap: var(--space-1); margin-right: var(--space-3); }
.site-nav a { padding: 12px 14px; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--grey-700); }
.site-nav a:hover { color: var(--green-700); }

/* ---------- Boutons (composant Button du design system) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-semibold); letter-spacing: 0.01em; white-space: nowrap; border: 1px solid transparent; cursor: pointer; text-decoration: none; min-height: 44px;
  transition: background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.btn:active { transform: translateY(1px); }
.btn--sm { font-size: var(--text-sm); padding: 7px 14px; border-radius: var(--radius-md); min-height: 40px; }
.btn--lg { font-size: var(--text-md); padding: 13px 26px; border-radius: var(--radius-lg); }
.btn--primary { background: var(--green-600); color: var(--white); }
.btn--primary:hover { background: var(--green-700); color: var(--white); }
.btn--secondary { background: var(--white); color: var(--green-700); border-color: var(--green-600); }
.btn--secondary:hover { background: var(--green-050); color: var(--green-700); }
.btn svg { flex-shrink: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Hero ---------- */
.hero { background: var(--surface-page); }
.hero__inner { padding-top: var(--space-16); padding-bottom: 72px; }
.hero__title { font-family: var(--font-display); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); line-height: 1.08; font-weight: var(--weight-medium); letter-spacing: -0.01em; color: var(--text-strong); max-width: 860px; margin: 0; }
.hero__lead { font-size: var(--text-lg); line-height: 1.6; color: var(--grey-700); max-width: 620px; margin: 20px 0 0; }
.hero .btn-row { margin-top: 28px; }
.hero .grid-2 { margin-top: 56px; }

/* ---------- Cartes (composant Card du design system) ---------- */
.card { display: block; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-8); color: var(--text-body);
  transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.card--accent { border-top: 3px solid var(--green-600); }
a.card { text-decoration: none; }
a.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); color: var(--text-body); }
.card__stack { display: flex; flex-direction: column; gap: var(--space-4); }
.card__title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: 1.2; color: var(--text-strong); margin: 0; }
.card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-md); line-height: 1.5; color: var(--grey-700); }
.card__text { font-size: var(--text-md); line-height: 1.65; color: var(--grey-700); margin: 0; }
.card__link { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--green-600); }
.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------- Badge (composant Badge du design system) ---------- */
.badge { display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: var(--weight-semibold); line-height: 1.4; letter-spacing: 0.02em; border-radius: var(--radius-pill); font-size: var(--text-2xs); padding: 3px 10px; background: var(--green-100); color: var(--green-700); }

/* ---------- Titres de section ---------- */
.section__eyebrow { margin: 0; }
.section__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; font-weight: var(--weight-medium); max-width: 760px; margin: 10px 0 40px; }

/* ---------- Offres de conseil ---------- */
.offer { padding-top: 20px; border-top: 2px solid var(--green-600); }
.offer__title { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.3; font-weight: var(--weight-medium); margin: 0; }
.offer__text { font-size: var(--text-md); line-height: 1.6; color: var(--grey-700); margin: 10px 0 0; }
.consulting__cta { margin-top: 40px; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.contact__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; font-weight: var(--weight-medium); margin: 10px 0 0; }
.contact__lead { font-size: var(--text-lg); line-height: 1.6; color: var(--grey-700); margin: 16px 0 0; }
.form { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.form__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form__note { font-size: var(--text-xs); line-height: 1.5; color: var(--grey-700); margin: 0; }
.form__status { font-size: var(--text-sm); font-weight: var(--weight-semibold); margin: 0; }
.form__status[data-state="success"] { color: var(--green-700); }
.form__status[data-state="error"] { color: var(--danger); }

/* Field / Input / Select / Textarea (composants du design system) */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--text-strong); letter-spacing: 0.01em; }
.field__req { color: var(--danger); margin-left: 3px; }
.field__error { font-size: var(--text-2xs); color: var(--danger); }
.input, .select, .textarea { width: 100%; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-strong); background: var(--white); border: 1px solid var(--grey-500); /* grey-500 : 3,2:1 sur blanc (WCAG 1.4.11) ; border-default du DS = 1,5:1 */ border-radius: var(--radius-md); padding: 10px 13px; min-height: 44px; outline: none;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.textarea { resize: vertical; line-height: var(--leading-normal); }
.select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6F68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--green-600); box-shadow: var(--shadow-focus); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.hp { position: absolute; left: -9999px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-800); color: rgba(255, 255, 255, 0.86); }
.site-footer__inner { padding-block: 36px; display: flex; flex-direction: column; gap: var(--space-5); }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: var(--text-sm); }
.site-footer__links a { display: inline-block; padding: 10px 0; color: var(--white); }
.site-footer__links a:hover { color: var(--taupe-200); }
.site-footer__copy { font-size: var(--text-2xs); color: rgba(255, 255, 255, 0.72); }

/* ---------- Points de rupture (mobile d'abord) ---------- */
@media (min-width: 640px) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .wrap { padding-inline: 32px; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .section { padding-block: var(--space-24); }
  .site-footer__inner { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}
@media (min-width: 880px) {
  .site-nav { display: flex; }
}
@media (min-width: 1000px) {
  .contact { grid-template-columns: 0.8fr 1.2fr; gap: var(--space-16); }
}

/* ---------- Pages légales ---------- */
.legal { max-width: var(--container-md); }
.legal__title { font-family: var(--font-display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.15; font-weight: var(--weight-medium); margin: 0 0 var(--space-4); }
.legal__lead { font-size: var(--text-md); color: var(--grey-700); margin: 0 0 var(--space-8); }
.legal h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); margin: var(--space-10) 0 var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.legal h3 { font-size: var(--text-md); font-weight: var(--weight-semibold, 600); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal li { line-height: var(--leading-relaxed); max-width: 68ch; }
.legal ul { margin: 0 0 var(--space-3); padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.placeholder { font-weight: var(--weight-semibold); color: var(--green-700); background: var(--green-100); border-radius: var(--radius-xs); padding: 0 var(--space-1); }

/* Liens au fil du texte : soulignés, pour ne pas reposer sur la seule couleur (WCAG 1.4.1). */
.form__note a, .legal p a, .legal li a { text-decoration: underline; text-underline-offset: 0.15em; }

/* Logos des produits dans leur carte (Legasee : logotype ; Dynsight : symbole + nom) */
.card__logo { display: flex; align-items: center; gap: var(--space-3); }
.card__logo img { display: block; height: 34px; width: auto; }
.card__logo img.card__logo--marque { height: 62px; }
.card__logo--centre { justify-content: center; }