/* ==========================================================================
   Lundi en 8 — site light · tokens issus du design system (tokens.json)
   ========================================================================== */

@font-face {
  font-family: "Eagle";
  src: url("../fonts/Eagle-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Eagle";
  src: url("../fonts/Eagle-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* couleurs */
  --green-100: #d9f7e5;
  --green-200: #bff1d3;
  --green-300: #a5ebc1;
  --green-400: #8ae5af;
  --green-500: #5fd18e;
  --green-700: #2b7f4e;
  --green-800: #23643f;
  --ink-900: #15191a;
  --ink-700: #333d3e;
  --ink-500: #6b7577;
  --ink-300: #c2c9c8;
  --ink-200: #e0e5e3;
  --ink-100: #eef2f0;
  --ink-50:  #f7faf8;
  --white:   #ffffff;
  --night:   #15211b;
  --night-soft: #1d2c24;

  --brand: var(--green-400);
  --brand-strong: var(--green-700);
  --bg-page: var(--white);
  --bg-subtle: var(--ink-50);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-500);
  --text-link: var(--green-800);
  --text-on-dark: var(--ink-50);
  --border-subtle: var(--ink-200);
  --focus-ring: var(--green-700);

  /* typo */
  --font-display: "Eagle", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, sans-serif;
  --tracking-display: -0.01em;
  --tracking-label: 0.14em;
  --leading-tight: 1.04;

  /* espaces & formes */
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --border-width: 1.5px;
  --radius-pill: 999px;
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-body);
  background: var(--bg-page);
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--text-link); text-decoration: none; text-underline-offset: 0.18em; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--green-200); color: var(--ink-900); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.narrow { max-width: var(--container-narrow); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-strong);
}
.eyebrow::before { content: "✦"; font-size: 0.9em; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.7em;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--ink-900);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  border: var(--border-width) solid transparent;
  transition: background var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn:hover { background: var(--green-500); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn svg { width: 1.05em; height: 1.05em; }

.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -100px;
  padding: 0.6em 1em; background: var(--night); color: var(--text-on-dark);
  border-radius: var(--radius-pill); z-index: 100;
}
.skip:focus { top: 12px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: var(--border-width) solid transparent;
  transition: border-color var(--dur) var(--ease-out);
}
.site-header.is-scrolled { border-bottom-color: var(--border-subtle); }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-block: 0.9rem;
}
.brand img { height: 44px; width: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.site-nav a {
  color: var(--text-strong); font-weight: 600; font-size: 0.95rem;
}
.site-nav .btn { padding: 0.7em 1.3em; font-size: 0.9rem; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(4rem, 9vw, 7rem);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-text { container-type: inline-size; min-width: 0; }
/* Le H1 tient sur deux lignes, une phrase par ligne, quelle que soit la largeur :
   la taille est calée sur la largeur de la colonne (unités cqw) */
.hero h1 {
  font-size: clamp(2rem, 9.8cqw, 5.25rem);
  margin-top: var(--space-5);
}
.hero h1 .line { display: block; white-space: nowrap; }
.hero h1 .mark {
  position: relative; display: inline-block; isolation: isolate;
  padding-inline: 0.06em;
}
.hero h1 .mark::before {
  content: ""; position: absolute; z-index: -1;
  inset: -0.04em -0.08em 0 -0.03em;
  background: var(--brand);
  border-radius: var(--radius-pill);
}
.hero .lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  color: var(--text-body);
  max-width: 34rem;
  margin-top: var(--space-6);
  line-height: 1.6;
}
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); align-items: center; margin-top: var(--space-6); }
.hero .actions .alt { font-weight: 600; color: var(--text-strong); }
.hero .actions .alt:hover { color: var(--text-link); }

/* étoiles décoratives — motif de marque */
.stars { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stars span {
  position: absolute; line-height: 1; transform: translate(-50%, -50%);
  color: var(--green-500); user-select: none;
}
.hero .stars span { color: var(--green-400); }
.hero .stars span:nth-child(odd) { color: var(--green-500); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
  .stars span { animation: twinkle var(--d, 3s) ease-in-out infinite; }
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(4rem, 8vw, 7rem); }
.section--subtle { background: var(--bg-subtle); }
.section h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: var(--space-4); }
.section .intro { margin-top: var(--space-5); font-size: 1.125rem; }
.section .intro + .intro { margin-top: var(--space-4); }

/* Approche */
.approche-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.approche .intro { max-width: 34rem; }
.approche .facts {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  margin-top: var(--space-7);
  font-weight: 600; color: var(--text-strong); font-size: 0.95rem;
}
.approche .facts li + li::before { content: "✦"; color: var(--brand-strong); margin-right: 1.25rem; font-size: 0.8em; }

/* Savoir-faire */
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-7); }
.skill { border-top: var(--border-width) solid var(--ink-900); padding-top: var(--space-5); }
.skill h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.skill .num { font-family: var(--font-body); font-weight: 700; font-size: 0.75rem; color: var(--brand-strong); letter-spacing: var(--tracking-label); }
.skill p { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.95rem; }
.skill ul { margin-top: var(--space-4); display: grid; gap: 0.45rem; }
.skill li { position: relative; padding-left: 1.2rem; color: var(--text-body); }
.skill li::before { content: "—"; position: absolute; left: 0; color: var(--brand-strong); }

/* FAQ */
.faq-list { margin-top: var(--space-6); border-top: var(--border-width) solid var(--border-subtle); }
.faq-list details { border-bottom: var(--border-width) solid var(--border-subtle); }
.faq-list summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  padding: 1.1rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text-strong);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--ink-900); font-family: var(--font-body); font-size: 1.1rem; transition: transform var(--dur) var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 1.4rem; max-width: 60ch; }

/* Références */
.refs { padding-block: clamp(3rem, 6vw, 5rem); border-top: var(--border-width) solid var(--border-subtle); }
.refs .container { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: var(--space-6); align-items: baseline; }
.refs ul { display: flex; flex-wrap: wrap; gap: 0.6rem 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.125rem, 1.8vw, 1.375rem); color: var(--text-strong); }
.refs li + li::before { content: "✦"; color: var(--brand-strong); margin-inline: 0.9rem; font-size: 0.65em; vertical-align: middle; }
.refs .note { margin-top: var(--space-4); font-size: 0.9rem; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Contact — panneau nuit
   -------------------------------------------------------------------------- */
.contact {
  position: relative; overflow: hidden;
  background: var(--night); color: var(--text-on-dark);
  padding-block: clamp(5rem, 10vw, 8rem) var(--space-7);
}
.contact .stars span { color: var(--green-300); }
.contact .stars span:nth-child(3n) { color: var(--white); }
.contact .eyebrow { color: var(--green-300); }
.contact h2 { color: var(--white); font-size: clamp(2.25rem, 5vw, 4rem); margin-top: var(--space-4); max-width: 16ch; }
.contact .intro { color: var(--ink-200); max-width: 34rem; margin-top: var(--space-5); font-size: 1.125rem; }
.contact .channels { margin-top: var(--space-7); display: grid; gap: var(--space-4); }
.contact .channels a { color: var(--white); font-weight: 600; }
.contact .channels a:hover { color: var(--green-300); }
.contact .channels .label { display: block; font-size: 0.75rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--green-300); font-weight: 700; margin-bottom: 0.25rem; }
.contact .mail { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.75rem); letter-spacing: var(--tracking-display); word-break: break-all; }
.contact .mail:hover { text-decoration: none; color: var(--green-400); }
.contact .meta { display: flex; flex-wrap: wrap; gap: var(--space-6); }

.site-footer {
  margin-top: clamp(4rem, 8vw, 6rem);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  font-size: 0.875rem; color: var(--ink-300);
}
.site-footer img { height: 34px; width: auto; }
.site-footer a { color: var(--ink-200); }
.site-footer nav { display: flex; gap: var(--space-5); }

/* --------------------------------------------------------------------------
   Page secondaire (mentions légales)
   -------------------------------------------------------------------------- */
.page { padding-block: clamp(3rem, 7vw, 6rem); }
.page h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-top: var(--space-4); }
.page h2 { font-size: 1.5rem; margin-top: var(--space-7); }
.page p, .page ul { margin-top: var(--space-4); }
.page li { padding-left: 1.2rem; position: relative; }
.page li::before { content: "—"; position: absolute; left: 0; color: var(--brand-strong); }
.page .back { display: inline-block; margin-top: var(--space-8); font-weight: 600; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid, .approche-grid { grid-template-columns: 1fr; }
  .illus { max-width: 420px; margin-inline: auto; }
  .illus-build { order: -1; max-width: 300px; }
  .skills { grid-template-columns: 1fr; gap: var(--space-5); }
  .refs .container { grid-template-columns: 1fr; gap: var(--space-4); }
}
@media (max-width: 640px) {
  .site-nav a:not(.btn) { display: none; }
  .brand img { height: 36px; }
  .refs ul { font-size: 1.125rem; }
  .refs li + li::before { margin-inline: 0.6rem; }
}
@media print {
  .site-header, .stars, .btn { display: none; }
  .contact { background: none; color: var(--ink-900); }
}

/* --------------------------------------------------------------------------
   Illustrations SVG animées
   -------------------------------------------------------------------------- */
.illus { width: 100%; }
.illus svg { width: 100%; height: auto; overflow: visible; }
.illus.reveal { transform: none; }

/* État de repos (et prefers-reduced-motion) : tout est visible, rien ne bouge */
.b-frame { stroke-dasharray: 1; stroke-dashoffset: 0; }
.o-out   { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* — 1 · le site s'assemble — */
  .illus-build .b-frame { stroke-dashoffset: 1; }
  .illus-build .b-el, .illus-build .b-moon { opacity: 0; transform: translateY(14px); transform-box: fill-box; transform-origin: center; }
  .illus-build .b-moon { transform: scale(0.4); }
  .illus-build .b-stars text { opacity: 0; }

  .illus-build.is-in .b-frame { animation: draw 1.1s var(--ease-out) .2s forwards; }
  .illus-build.is-in .b-el   { animation: rise .55s var(--ease-out) calc(.9s + var(--i) * .18s) forwards; }
  .illus-build.is-in .b-moon { animation: pop .6s cubic-bezier(.34, 1.4, .64, 1) calc(.9s + var(--i) * .18s) forwards; }
  .illus-build.is-in .b-stars text { animation: star-in .8s ease-out calc(.2s + var(--i, 0) * .1s) forwards, twinkle var(--d, 3s) ease-in-out 1.2s infinite; }

  /* — 2 · chef d'orchestre — */
  .illus-orch .o-node, .illus-orch .o-you { opacity: 0; transform: translateY(10px); transform-box: fill-box; transform-origin: center; }
  .illus-orch .o-link { opacity: 0; }
  .illus-orch .o-out { stroke-dashoffset: 1; }
  .illus-orch .o-moon { transform-box: fill-box; transform-origin: center; transform: scale(.85); opacity: 0; }

  .illus-orch.is-in .o-moon { animation: pop .7s cubic-bezier(.34, 1.3, .64, 1) .1s forwards; }
  .illus-orch.is-in .o-node { animation: rise .5s var(--ease-out) calc(.4s + var(--i) * .14s) forwards; }
  .illus-orch.is-in .o-link { animation: fade .5s ease calc(.7s + var(--i) * .14s) forwards, flow 1.4s linear infinite; }
  .illus-orch.is-in .o-out  { animation: draw .7s var(--ease-out) 1.5s forwards; }
  .illus-orch.is-in .o-you  { animation: rise .5s var(--ease-out) 2s forwards; }

  @keyframes draw   { to { stroke-dashoffset: 0; } }
  @keyframes rise   { to { opacity: 1; transform: none; } }
  @keyframes pop    { to { opacity: 1; transform: none; } }
  @keyframes fade   { to { opacity: 1; } }
  @keyframes star-in{ to { opacity: 1; } }
  @keyframes flow   { to { stroke-dashoffset: -26; } }
}