/* ============================================================
   Unnero — feuille de style globale
   Charte : orange chaleureux + ink sombre, fonds clairs, grande
   lisibilité (cible seniors). Accessibilité WCAG AA.
   ============================================================ */

:root {
  /* Couleurs de marque */
  --ink: #16130f;          /* texte principal / noir de marque */
  --ink-soft: #4a443c;     /* texte secondaire */
  --muted: #8a8278;        /* libellés discrets */
  --orange: #f2762e;       /* accent principal */
  --orange-dark: #d85f1c;  /* hover */
  --orange-soft: #fde7d8;  /* fond pâle orange */
  --green: #2f7a66;        /* confiance / crédit d'impôt */
  --green-soft: #e3f1ec;
  --cream: #fbf6ef;        /* fond chaud */
  --cream-2: #f4ece1;
  --white: #ffffff;
  --line: #ece4d8;         /* séparateurs */
  --shadow: 0 18px 50px -22px rgba(22, 19, 15, 0.35);
  --shadow-sm: 0 8px 24px -14px rgba(22, 19, 15, 0.3);

  --radius: 22px;
  --radius-sm: 14px;
  --maxw: 1200px;

  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Schibsted Grotesk", "Plus Jakarta Sans", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* compense le header sticky pour les ancres */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;           /* corps ≥ 18px pour la lisibilité senior */
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 0.4em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin-bottom: 18px;
}

.lead { font-size: 1.2rem; color: var(--ink-soft); }

.text-center { text-align: center; }

/* skip link (accessibilité) */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 200;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Boutons ---------- */
.btn {
  --btn-bg: var(--orange);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  padding: 17px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.btn:hover { background: var(--orange-dark); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; }
.btn--dark:hover { background: #000; }

.btn--lg { font-size: 1.2rem; padding: 20px 36px; }
.btn--block { width: 100%; }

/* ---------- En-tête / navigation ---------- */
/* Par défaut (pages internes) : barre pleine, texte sombre. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 246, 239, 0.92);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* Variante « overlay » (accueil) : transparente, par-dessus la vidéo. */
.site-header--overlay {
  position: fixed;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-header--overlay.is-scrolled {
  background: rgba(251, 246, 239, 0.95);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
}
/* texte blanc tant que la vidéo est derrière */
.site-header--overlay:not(.is-scrolled) .nav__link { color: #fff; }
.site-header--overlay:not(.is-scrolled) .nav__link:hover { background: rgba(255, 255, 255, 0.16); }
.site-header--overlay:not(.is-scrolled) .nav__toggle { color: #fff; }
.site-header--overlay:not(.is-scrolled) .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.site-header--overlay:not(.is-scrolled) .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  height: 84px;
  transition: height 0.3s ease;
}
/* swap logo clair / sombre selon l'état du header overlay */
.nav__logo { position: relative; display: inline-flex; align-items: center; justify-self: center; }
.nav__logo img { height: 48px; width: auto; display: block; transition: height 0.3s ease, opacity 0.3s ease; }
.nav__logo .logo-light { position: absolute; left: 0; top: 0; opacity: 0; }

/* Accueil (overlay) : grand logo bien visible en haut, qui se compacte au scroll */
.site-header--overlay .nav { height: 132px; }
.site-header--overlay .nav__logo img { height: 92px; }
.site-header--overlay.is-scrolled .nav { height: 100px; }
.site-header--overlay.is-scrolled .nav__logo img { height: 66px; }
.site-header--overlay:not(.is-scrolled) .nav__logo .logo-light { opacity: 1; }
.site-header--overlay:not(.is-scrolled) .nav__logo .logo-dark { opacity: 0; }
.nav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-self: start;
}
.nav__actions { justify-self: end; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
}
.nav__link:hover { background: var(--cream-2); }
.nav__link .chev { transition: transform 0.2s ease; font-size: 0.7em; }
.nav__item.is-open .nav__link .chev { transform: rotate(180deg); }
.nav__actions { display: flex; align-items: center; gap: 10px; }

/* Méga-menu déroulant */
.nav__item { position: relative; }
.mega {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 320px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav__item.is-open .mega { opacity: 1; visibility: visible; transform: translateY(0); }
.mega a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}
.mega a:hover { background: var(--cream); }
.mega a strong { display: block; font-size: 1rem; }
.mega a span { font-size: 0.9rem; color: var(--muted); }

.nav__toggle { display: none; }

/* le menu mobile est masqué par défaut (desktop) — affiché uniquement en media query */
.mobile-menu { display: none; }

/* ---------- Hero « loupe » (effet signature Patreon) ----------
   Tout le hero est en vidéo. Une vidéo joue en fond, l'AUTRE est
   révélée dans une bulle qui suit le curseur de façon organique.
   Quand le curseur s'immobilise, les deux vidéos s'inversent avec
   un fondu propagé depuis la bulle. */
.hero-lens {
  position: relative;
  display: grid;
  min-height: 100vh;          /* la vidéo occupe tout le premier écran */
  overflow: hidden;
  background: #100d0a;
  isolation: isolate;
}

/* les deux vidéos plein cadre */
.hero-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.7s ease;
}
/* rôle « fond » : pleine surface */
.hero-vid.is-bg   { z-index: 1; -webkit-mask-image: none; mask-image: none; }
/* rôle « bulle » : masque radial à bord fondu (rayon/centre posés par le JS) */
.hero-vid.is-lens {
  z-index: 3;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 169px, transparent 170px);
          mask-image: radial-gradient(circle at 50% 45%, #000 169px, transparent 170px);
}

/* voile dégradé pour la lisibilité du texte (au-dessus du fond, sous la bulle) */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 38%, rgba(16,13,10,0.20) 0%, rgba(16,13,10,0.62) 100%),
    linear-gradient(180deg, rgba(16,13,10,0.45) 0%, rgba(16,13,10,0.25) 45%, rgba(16,13,10,0.6) 100%);
}

/* curseur animé de la bulle (anneau pointillé tournant + cœur pulsé) */
.lens-handle {
  position: absolute;
  width: 76px; height: 76px;
  top: 0; left: 0;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero-lens.is-active .lens-handle { opacity: 1; }
/* anneau pointillé NET qui tourne lentement */
.lens-handle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px dashed #ffffff;
  animation: lens-spin 7s linear infinite;
}
/* point central orange NET qui respire (sans halo flou) */
.lens-handle::after {
  content: "";
  position: absolute;
  inset: 40%;
  border-radius: 50%;
  background: var(--orange);
  animation: lens-pulse 1.9s ease-in-out infinite;
}
@keyframes lens-spin { to { transform: rotate(360deg); } }
@keyframes lens-pulse {
  0%, 100% { transform: scale(0.75); }
  50%      { transform: scale(1.3); }
}

/* contenu texte, au-dessus de tout */
.hero-content {
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 156px 24px 96px;
  pointer-events: none; /* laisse passer la souris vers le hero ; réactivé sur les liens */
}
.hero-content a, .hero-content button { pointer-events: auto; }
.hero-inner { max-width: 940px; }
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(242,118,46,0.18);
  color: #ffc09a;
  border: 1px solid rgba(242,118,46,0.4);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 9px 18px;
  border-radius: 999px;
  margin-bottom: 26px;
  backdrop-filter: blur(4px);
}
.hero-inner h1 {
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  margin-bottom: 0.35em;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.45);
}
.hero-inner h1 .accent { color: var(--orange); }
.hero-inner .lead {
  max-width: 48ch;
  margin: 0 auto 30px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 14px rgba(0,0,0,0.5);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 24px; }
.hero__reassure {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 16px 26px; margin: 0; padding: 0;
  font-size: 1rem; color: rgba(255,255,255,0.9); font-weight: 600;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.hero__reassure li { list-style: none; display: flex; align-items: center; gap: 8px; }
.tick { color: #6fd3b6; font-weight: 800; }

/* bouton fantôme clair pour fond sombre */
.btn--ghost-light { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.8); }
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.lens-hint {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 5;
  font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.78);
  display: inline-flex; align-items: center; gap: 8px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.lens-hint::before { content: "↔"; color: var(--orange); font-weight: 800; }

/* bandeau de confiance défilant horizontal */
.trustbar {
  background: var(--ink);
  color: #fff;
  padding: 18px 0;
  overflow: hidden;
}
.trustbar__track {
  display: flex;
  width: max-content;
  animation: scroll-horiz 36s linear infinite;
}
/* l'espacement est porté par chaque span (padding) et NON par gap :
   les deux moitiés ont ainsi exactement la même largeur → boucle sans saut. */
.trustbar__track span {
  font-weight: 600;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-right: 56px;
  white-space: nowrap;
  opacity: 0.92;
}
.trustbar__track span::before { content: "●"; color: var(--orange); font-size: 0.7em; }
@keyframes scroll-horiz {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Sections génériques ---------- */
.section { padding: 92px 0; }
.section--tight { padding: 64px 0; }
.section--cream { background: var(--cream-2); }
/* Fond sombre « tech » : grille blueprint + halos lumineux */
.section--ink {
  position: relative;
  color: #fff;
  overflow: hidden;
  background-color: #0f0c09;
  background-image:
    radial-gradient(55% 70% at 85% 5%, rgba(242, 118, 46, 0.16), transparent 60%),
    radial-gradient(45% 60% at 5% 95%, rgba(47, 122, 102, 0.16), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
}
.section--ink h2, .section--ink h3 { color: #fff; }
/* liseré lumineux en haut */
.section--ink::before,
.final-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 118, 46, 0.65), transparent);
}
.section__head { max-width: 720px; margin: 0 0 48px; }
.section__head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Cartes services ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.card__icon {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: var(--orange-soft);
  color: var(--orange-dark);
  margin-bottom: 18px;
}
.card__icon svg { width: 28px; height: 28px; }
.card ul { margin: 14px 0 0; padding-left: 20px; color: var(--ink-soft); }
.card ul li { margin-bottom: 6px; }

/* badge crédit d'impôt */
.badge-ci {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 800;
  font-size: 0.9rem;
  padding: 7px 14px;
  border-radius: 999px;
  margin-top: 18px;
}
.badge-ci::before { content: "−50%"; background: var(--green); color: #fff; border-radius: 999px; padding: 2px 8px; font-size: 0.8rem; }

/* ---------- Storytelling scroll (sections alternées) ---------- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
}
.feature:nth-child(even) .feature__media { order: -1; }
.feature__media {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--cream-2);
  aspect-ratio: 4 / 3;
}
.feature__media video, .feature__media .media-fill {
  width: 100%; height: 100%; object-fit: cover;
}
.media-fill {
  display: grid; place-items: center;
  color: var(--orange-dark);
  background: linear-gradient(135deg, var(--orange-soft), var(--cream-2));
}
.media-fill svg { width: 110px; height: 110px; }

/* ---------- Étapes ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.step {
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 30px;
  border: 1px solid var(--line);
}
.step__num {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  margin-bottom: 16px;
}

/* ---------- Crédit d'impôt ---------- */
.ci-box {
  background: var(--green-soft);
  border: 1px solid #cfe6dd;
  border-radius: var(--radius);
  padding: 44px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.ci-calc {
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 28px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.ci-calc .from { font-size: 1.1rem; color: var(--muted); text-decoration: line-through; }
.ci-calc .to { font-family: var(--font-display); font-size: 3.2rem; color: var(--green); font-weight: 600; }
.ci-calc small { display: block; color: var(--ink-soft); margin-top: 6px; }

/* ---------- Tarifs ---------- */
.pricing { width: 100%; border-collapse: collapse; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.pricing th, .pricing td { padding: 18px 22px; text-align: left; border-bottom: 1px solid var(--line); }
.pricing thead th { background: var(--ink); color: #fff; font-family: var(--font-body); }
.pricing tbody tr:last-child td { border-bottom: 0; }
.pricing .net { font-weight: 700; }
.pricing .after { color: var(--green); font-weight: 800; }
.note { font-size: 0.95rem; color: var(--muted); margin-top: 14px; }
.ci-note { background: var(--green-soft); color: var(--green); border-radius: 12px; padding: 14px 18px; }
.ci-note strong { color: var(--green); }

/* ---------- Formulaire contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 700; margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: #fff;
}
.field textarea { min-height: 130px; resize: vertical; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; color: var(--ink-soft); }
.consent input { width: auto; margin-top: 4px; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }
.form-status { margin-top: 16px; padding: 14px 18px; border-radius: 12px; font-weight: 600; display: none; }
.form-status.ok { display: block; background: var(--green-soft); color: var(--green); }
.form-status.err { display: block; background: #fbe3da; color: var(--orange-dark); }

.contact-aside .info-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 22px; }
.contact-aside .info-row .ico { color: var(--orange-dark); display: inline-flex; }
.contact-aside .info-row .ico svg { width: 24px; height: 24px; }

/* ---------- CTA final ---------- */
.final-cta {
  position: relative;
  text-align: center;
  padding: 120px 0;
  color: #fff;
  overflow: hidden;
  background-color: #0f0c09;
  background-image:
    radial-gradient(70% 90% at 50% -10%, rgba(242, 118, 46, 0.22), transparent 55%),
    radial-gradient(60% 80% at 50% 120%, rgba(47, 122, 102, 0.16), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 46px 46px, 46px 46px;
}
.final-cta h2 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.4rem); }
.final-cta p { color: rgba(255,255,255,0.8); max-width: 50ch; margin: 0 auto 30px; }

/* ---------- Pied de page ---------- */
.footer {
  color: #cfc8bd;
  padding: 70px 0 36px;
  background-color: var(--ink);
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(242, 118, 46, 0.08), transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 46px 46px, 46px 46px;
}
.footer a { color: #cfc8bd; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 48px; }
.footer__brand img { height: 34px; margin-bottom: 18px; }
.footer h4 { color: #fff; font-family: var(--font-body); font-size: 1rem; margin: 0 0 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li { margin-bottom: 11px; }
.footer__bottom { border-top: 1px solid #2c2820; padding-top: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 0.9rem; color: #8a8278; }

/* mention TVA / légales inline */
.legal-inline { font-size: 0.92rem; color: var(--muted); }

/* ---------- Animations au scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Pages de contenu (légales) ---------- */
.prose { max-width: 780px; margin: 0 auto; padding: 60px 0 90px; }
.prose h1 { margin-bottom: 0.6em; }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose ul { padding-left: 22px; }
.prose a { color: var(--orange-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero__grid, .feature, .ci-box, .contact-grid { grid-template-columns: 1fr; }
  .feature:nth-child(even) .feature__media { order: 0; }
  .cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }

  /* hero loupe : hauteur réduite au tactile */
  .hero-lens { min-height: 82vh; }
  .hero-content { padding: 120px 20px 80px; }
  .lens-hint { display: none; }

  /* header mobile : logo grand mais raisonnable */
  .site-header--overlay .nav { height: 88px; }
  .site-header--overlay .nav__logo img,
  .site-header--overlay.is-scrolled .nav__logo img { height: 52px; }
  .nav__logo img { height: 44px; }

  /* nav mobile */
  .nav__menu, .nav__actions .btn--ghost { display: none; }
  .nav__toggle {
    display: inline-flex;
    margin-left: auto;
    background: none; border: 0; cursor: pointer;
    font-size: 1.8rem; color: var(--ink); padding: 8px;
  }
  .nav__actions { gap: 6px; }
  .mobile-menu {
    display: block;
    position: fixed;
    inset: 80px 0 0 0;
    background: var(--cream);
    padding: 20px 24px 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 99;
  }
  .mobile-menu.is-open { transform: none; }
  .mobile-menu a { display: block; padding: 16px 0; font-size: 1.3rem; font-weight: 700; border-bottom: 1px solid var(--line); text-decoration: none; }
  .mobile-menu .btn { margin-top: 24px; }
}

@media (max-width: 560px) {
  body { font-size: 18px; }
  .field--row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .container { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}