/* L'E'rgo — Le sac de l'ergo: pegboard fields, painted pieces, one orange trace. */

:root {
  --teal: #0AABB5;
  --teal-deep: #06767F;
  --ink: #0B2F33;
  --paper: #EEF7F6;
  --paper-2: #DCEFED;
  --white: #FFFFFF;
  --orange: #DC8220;
  --orange-hi: #F6A94A;
  --orange-text: #9E5300;
  --hole-deep: rgba(2, 18, 21, .26);
  --hole-bright: rgba(4, 80, 86, .17);
  --hole-orange: rgba(110, 52, 0, .15);

  --font-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;

  --pitch: 34px;
  --gut: clamp(32px, 5.2vw, 76px);
  --wrap: 1180px;
  --sec: calc(var(--pitch) * 3);
  --r-lg: 28px;
  --r-md: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dot-dark: radial-gradient(circle, rgba(6, 118, 127, .42) 0 1.8px, transparent 2.3px);
  --dot-light: radial-gradient(circle, rgba(255, 255, 255, .42) 0 1.8px, transparent 2.3px);
  --dot-orange: radial-gradient(circle, rgba(246, 169, 74, .6) 0 1.8px, transparent 2.3px);
  --dot-teal: radial-gradient(circle, #9CC9CC 0 1.8px, transparent 2.3px);
  --shadow-piece: 0 14px 22px -8px rgba(2, 18, 21, .45);

  /* Depth: one light, top of the page, so every shadow is cast straight down. Each elevation is a tight
     contact shadow (where the object touches) under a wide ambient one (how high it floats). */
  --sh: 2, 18, 21;
  --shadow-peg:   0 1px 1px rgba(var(--sh), .28), 0 3px 5px rgba(var(--sh), .32);
  --shadow-btn:   0 1px 2px rgba(var(--sh), .3), 0 8px 16px -8px rgba(var(--sh), .55);
  --shadow-btn-hover: 0 2px 3px rgba(var(--sh), .28), 0 14px 20px -10px rgba(var(--sh), .6);
  --shadow-btn-press: 0 1px 1px rgba(var(--sh), .3), 0 4px 8px -6px rgba(var(--sh), .6);
  --shadow-card:  0 1px 2px rgba(var(--sh), .16), 0 14px 20px -16px rgba(var(--sh), .55);
  --shadow-panel: 0 2px 4px rgba(var(--sh), .14), 0 24px 34px -22px rgba(var(--sh), .7);
  --shadow-float: 0 3px 6px rgba(var(--sh), .16), 0 30px 44px -24px rgba(var(--sh), .7);
  --drop-piece:   drop-shadow(0 2px 2px rgba(var(--sh), .3)) drop-shadow(0 14px 12px rgba(var(--sh), .38));
  --edge-light:   inset 0 1px 0 rgba(255, 255, 255, .38);

  /* Texture: fine monochrome grain, tiled, mid-grey so soft-light lifts and darkens evenly.
     Painted surfaces get it through background-blend-mode, never as a gradient or bevel, so colours
     stay the brand's. */
  --tex-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='.16' intercept='.42'/><feFuncG type='linear' slope='.16' intercept='.42'/><feFuncB type='linear' slope='.16' intercept='.42'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --tex-fibre: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.012 .6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 1'/><feComponentTransfer><feFuncR type='linear' slope='.14' intercept='.43'/><feFuncG type='linear' slope='.14' intercept='.43'/><feFuncB type='linear' slope='.14' intercept='.43'/></feComponentTransfer></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
}

@media (max-width: 720px) {
  :root { --pitch: 28px; --sec: calc(var(--pitch) * 2.4); }   /* sections plus serrées sur mobile : moins de défilement */
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--teal) var(--paper);
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  position: relative;
  font: 400 1.0625rem/1.65 var(--font-text);
  color: var(--ink);
  background: var(--paper);
  caret-color: var(--orange);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--orange); color: var(--ink); }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7vw, 6rem); font-weight: 780; letter-spacing: -.026em; line-height: 1; }
h2 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .08em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--white);
  border-radius: 6px;
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem; border-radius: 12px; font-weight: 700;
  transition: top .2s var(--ease);
}
.skip:focus { top: 12px; }

.wrap {
  position: relative;
  z-index: 2;
  width: min(var(--wrap), 100%);
  margin-inline: auto;
}
.site-header, .section, .hero, .page-hero, .call, .lost, .site-footer { padding-inline: var(--gut); }

/* ---------- Fields: pegboard surfaces ---------- */
.board {
  --hole: var(--hole-deep);
  background-color: var(--teal-deep);
  background-image: var(--tex-grain), radial-gradient(circle, var(--hole) 0 3.2px, rgba(255, 255, 255, .04) 3.6px 4.6px, transparent 5px);
  background-size: 200px 200px, var(--pitch) var(--pitch);
  background-position: 0 0, calc(var(--pitch) / 2) calc(var(--pitch) / 2);
  background-blend-mode: soft-light, normal;
  color: #fff;
}
.board--bright { --hole: var(--hole-bright); background-color: var(--teal); color: var(--ink); }
.board--orange { --hole: var(--hole-orange); background-color: var(--orange); color: var(--ink); }
.field-paper { background: var(--tex-fibre) 0 0 / 260px 260px, var(--paper); background-blend-mode: soft-light, normal; }
.field-paper-2 { background: var(--tex-fibre) 0 0 / 260px 260px, var(--paper-2); background-blend-mode: soft-light, normal; }

.section { position: relative; padding-block: calc(var(--sec) * 1.15) var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .8); }

/* ---------- Trace ---------- */
.trace {
  position: absolute; left: 0; top: 0; width: 100%;
  z-index: 1; pointer-events: none; overflow: visible;
}
.trace-base, .trace-done, .trace-rim { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-base { stroke: var(--orange-hi); stroke-width: 5; stroke-dasharray: .1 15; opacity: .5; }
.trace-rim { stroke: #fff; stroke-width: 12; stroke-dasharray: .1 15; }
.trace-done { stroke: var(--orange); stroke-width: 7; stroke-dasharray: .1 15; }
.trace-tip { fill: var(--orange); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 3px 4px rgba(2, 18, 21, .4)); }

.node {
  position: absolute; top: 1rem; width: 18px; height: 18px; border-radius: 50%;
  background: var(--orange); box-shadow: 0 0 0 4px var(--paper), 0 2px 5px rgba(2, 18, 21, .35);
  left: -30px;
}
.board .node, .field-dark .node { box-shadow: 0 0 0 4px var(--teal-deep), 0 2px 5px rgba(2, 18, 21, .35); }
.board--bright .node { box-shadow: 0 0 0 4px var(--teal), 0 2px 5px rgba(2, 18, 21, .3); }
.board--orange .node { background: #fff; box-shadow: 0 0 0 4px var(--orange), 0 2px 5px rgba(2, 18, 21, .3); }
.node--r { left: auto; right: -30px; }
@media (max-width: 900px) {
  .node, .node--r { left: -22px; right: auto; }
}
.has-node { position: relative; }

/* ---------- Pegs & pieces ---------- */
.peg {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--orange);
  box-shadow: var(--shadow-peg);
}
.peg--white { background: #F4FAF9; }
.peg--ink { background: var(--ink); }

.piece { position: absolute; filter: url(#paint-grain) var(--drop-piece); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  font: 700 1.05rem/1 var(--font-text);
  padding: 1.05rem 1.5rem 1.05rem 1.7rem;
  border-radius: 999px; border: 2px solid transparent;
  background: var(--orange); color: var(--ink); text-decoration: none; cursor: pointer;
  box-shadow: var(--shadow-btn), var(--edge-light);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s;
  min-height: 52px;
}
.btn svg { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover), var(--edge-light); background: var(--orange-hi); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.98); box-shadow: var(--shadow-btn-press); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #12464b; }
.btn--line { background: transparent; box-shadow: none; border-color: currentColor; }
.btn--line:hover { background: rgba(255, 255, 255, .14); box-shadow: none; }
.board--orange .btn--line:hover, .field-paper .btn--line:hover { background: rgba(11, 47, 51, .08); }

.tel {
  display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; text-decoration: none;
  padding: .55rem .2rem; text-decoration: underline dotted; text-decoration-thickness: 3px; text-underline-offset: .4em;
}
.tel svg { width: 20px; height: 20px; }
.tel:hover { text-decoration-style: solid; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
}
.site-header { position: sticky; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 5px; background: var(--dot-dark) 0 0 / 12px 5px repeat-x; pointer-events: none; }
.site-header .wrap { position: static; display: flex; align-items: center; gap: 1.5rem; min-height: 78px; }
.brand { display: block; flex: none; }
.brand img { height: 54px; width: auto; }
.nav { margin-left: auto; }
.nav .nav-cta { display: none; }
.nav ul { display: flex; gap: .4rem; }
.nav a {
  display: block; padding: .6rem .9rem; font-weight: 600; text-decoration: none; border-radius: 10px;
  transition: background-color .2s;
}
.nav a:hover { background: var(--paper-2); }
.nav a[aria-current="page"] { text-decoration: underline dotted var(--orange); text-decoration-thickness: 4px; text-underline-offset: .4em; }
.head-actions { display: flex; align-items: center; gap: 1.1rem; }
.head-actions .btn { padding-block: .8rem; min-height: 48px; font-size: 1rem; }
.head-actions .tel { display: none; }
@media (min-width: 1120px) { .head-actions .tel { display: inline-flex; } }

.menu-btn {
  display: none; margin-left: auto; align-items: center; gap: .55rem; cursor: pointer;
  font: 700 1rem var(--font-text); color: var(--ink); background: transparent;
  border: 2px solid var(--ink); border-radius: 999px; padding: .6rem 1rem; min-height: 48px;
}
.menu-btn svg { width: 22px; height: 22px; }
@media (max-width: 960px) {
  .menu-btn { display: inline-flex; }
  .head-actions { display: none; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; background: var(--paper);
    border-bottom: 2px dotted rgba(6, 118, 127, .5);
    padding: .5rem var(--gut) 1.4rem;
    display: none;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 1rem .2rem; font-size: 1.15rem; border-bottom: 2px dotted rgba(6, 118, 127, .5); border-radius: 0; }
  .nav a[aria-current="page"] { color: var(--orange-text); }
  .nav a.nav-cta { display: flex; justify-content: center; margin-top: 1.2rem; padding: 1.05rem 1.5rem; border: 2px solid transparent; border-radius: 999px; font-size: 1.05rem; }
}

/* Mobile dock: call / book within thumb reach */
.dock { display: none; }
@media (max-width: 720px) {
  body { padding-bottom: 84px; }
  .dock {
    display: grid; grid-template-columns: 1fr 1.5fr; gap: .6rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
    border-top: 2px dotted rgba(246, 169, 74, .7);
  }
  .dock .btn { justify-content: center; padding: .9rem .8rem; font-size: 1rem; }
  .dock .btn--line { color: #fff; }
}

/* ---------- Hero ---------- */
.hero { padding-block: calc(var(--sec) * .95) calc(var(--sec) * 1.35); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: center; }
.hero-copy { grid-column: 1 / 8; position: relative; z-index: 3; }
.hero h1 em { font-style: normal; text-decoration: underline dotted var(--orange-hi); text-decoration-thickness: .075em; text-underline-offset: .13em; }
.hero-sub { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.25rem, 2.3vw, 1.75rem); line-height: 1.25; letter-spacing: -.015em; max-width: 34ch; margin-top: 1.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 2.4rem; position: relative; }
.hero-meta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-weight: 600; font-size: .98rem; color: #fff; }
.hero-meta li { display: flex; align-items: center; gap: .55rem; }
.hero-meta .peg { width: 12px; height: 12px; box-shadow: none; }
.hero-visual { grid-column: 8 / 13; position: relative; padding: 0 0 var(--pitch); }
.photo-board {
  position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-float);
  transform: rotate(1.6deg);
}
.photo-board img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.pin { position: absolute; z-index: 4; width: 20px; height: 20px; }
.hero .piece--arc { left: -20%; bottom: -6%; width: 62%; z-index: 3; }
.hero .piece--disc { right: -7%; top: -5%; width: 22%; z-index: 4; }
.hero .piece--block { right: 8%; bottom: -6%; width: 20%; z-index: 4; }

@media (max-width: 900px) {
  .hero-copy { grid-column: 1 / -1; }
  .hero-visual { grid-column: 1 / -1; margin-top: 3.4rem; max-width: 460px; }
  .hero .piece--arc { left: -8%; width: 54%; }
}

@media (prefers-reduced-motion: no-preference) {
  .js-anim .piece, .js-anim .photo-board { animation: seat .9s var(--ease) both; }
  .js-anim .photo-board { animation-delay: .1s; }
  .js-anim .piece--arc { animation-delay: .35s; }
  .js-anim .piece--disc { animation-delay: .5s; }
  .js-anim .piece--block { animation-delay: .62s; }
  .js-anim .hero h1, .js-anim .hero-sub, .js-anim .hero-actions, .js-anim .hero-meta { animation: rise .9s var(--ease) both; }
  .js-anim .hero-sub { animation-delay: .08s; }
  .js-anim .hero-actions { animation-delay: .16s; }
  .js-anim .hero-meta { animation-delay: .24s; }
  @keyframes seat { from { opacity: 0; translate: 0 -36px; rotate: -6deg; } }
  @keyframes rise { from { opacity: 0; translate: 0 22px; } }
  [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity .8s var(--ease), translate .8s var(--ease); }
  [data-reveal].in { opacity: 1; translate: 0 0; }
}

/* ---------- Section heads ---------- */
.sec-head { max-width: 46rem; }
.sec-head .lead { margin-top: 1.1rem; font-size: 1.2rem; max-width: 52ch; }
.sec-head h2 + .lead { margin-top: 1.2rem; }

/* ---------- Why + ages ---------- */
.why-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 3rem; align-items: start; }
.why-grid .sec-head { grid-column: 1 / 6; position: sticky; top: 118px; }
.promises { grid-column: 7 / 13; }
.promise { display: grid; grid-template-columns: 22px 1fr; column-gap: 1.2rem; padding-block: 1.7rem; position: relative; }
.promise:not(:first-child)::before, .domain:not(:first-child)::before, .big-step:not(:first-child)::before, .sector-key::before, .faq-list details::before, .foot-legal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--dot-dark) 0 0 / 12px 5px repeat-x; }
.promise:first-child { padding-top: 0; }
.promise .peg { margin-top: .2rem; }
.promise h3 { margin-bottom: .5rem; }
.promise p { max-width: 46ch; }
.closing-line { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.02em; line-height: 1.2; max-width: 32ch; }
@media (max-width: 900px) {
  .why-grid .sec-head { grid-column: 1 / -1; position: static; }
  .promises { grid-column: 1 / -1; }
}

.ages { margin-top: calc(var(--sec) * .9); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 2rem; }
.ages-head { grid-column: 1 / -1; }
.ages-tabs { grid-column: 1 / 6; display: grid; gap: .5rem; align-content: start; }
.age-tab {
  display: grid; grid-template-columns: 6.4rem 1fr; align-items: center; column-gap: 1rem; text-align: left;
  font: 700 1.15rem/1.2 var(--font-text); color: var(--ink); cursor: pointer;
  border: 0; background: transparent; position: relative; padding: 1rem .9rem; min-height: 72px;
  transition: background-color .2s;
}
.age-tab .yrs { white-space: nowrap; font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -.03em; color: var(--teal-deep); }
.age-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--dot-dark) 0 0 / 12px 5px repeat-x; }
.age-tab[aria-selected="true"]::after { display: none; }
.age-tab:hover { background-color: var(--paper-2); }
.age-tab[aria-selected="true"] { background: var(--ink); color: #fff; border-radius: 16px; }
.age-tab[aria-selected="true"] .yrs { color: var(--orange-hi); }
.ages-panels { grid-column: 7 / 13; }
.age-panel h3 { margin-bottom: 1.3rem; }
.age-panel dl { margin: 0; display: grid; gap: 1.1rem; }
.age-panel dt { font-weight: 700; }
.age-panel dd { margin: 0; color: #24494d; }
.age-panel .more { margin-top: 2rem; }
@media (max-width: 900px) {
  .ages-tabs, .ages-panels { grid-column: 1 / -1; }
  .ages-tabs { grid-template-columns: 1fr 1fr; gap: .4rem .8rem; }
  .age-tab { grid-template-columns: 1fr; padding: .8rem .5rem; row-gap: .1rem; }
}
.no-js .age-panel[hidden] { display: block; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2rem; margin-top: 3.4rem; counter-reset: none; position: relative; }
.step { position: relative; }
.step-peg {
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: #F4FAF9; color: var(--ink);
  font: 800 1.7rem/1 var(--font-display); box-shadow: 0 8px 14px -6px rgba(2, 18, 21, .55);
  position: relative; z-index: 2;
}
.step::after {
  content: ''; position: absolute; left: 80px; right: -2rem; top: 29px; height: 5px; background: var(--dot-light) 0 0 / 14px 5px repeat-x;
}
.step:last-child::after { display: none; }
.step h3 { margin: 1.5rem 0 .6rem; }
.step p { color: #fff; max-width: 30ch; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 1.4rem; padding-bottom: 2.4rem; }
  .step h3 { margin-top: .4rem; }
  .step-body { grid-column: 2; }
  .step::after { left: 29px; right: auto; top: 76px; bottom: 6px; width: 5px; height: auto; background: var(--dot-light) 0 0 / 5px 14px repeat-y; }
}

/* ---------- Tarifs ---------- */
.tarifs-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 2.4rem; align-items: start; margin-top: 3rem; }
.finder { grid-column: 1 / 6; background: #fff; border-radius: var(--r-lg); padding: 1.8rem; box-shadow: var(--shadow-panel); color: var(--ink); }
.finder label { display: block; font-weight: 700; margin-bottom: .6rem; }
.finder .row { display: flex; gap: .6rem; flex-wrap: wrap; }
.field {
  flex: 1 1 220px; min-width: 0; font: 500 1.1rem var(--font-text); color: var(--ink);
  padding: .95rem 1.1rem; border-radius: 14px; border: 2px solid #9CC9CC; background: #F8FCFC; min-height: 54px;
}
.field::placeholder { color: #587a7d; }
.field:hover { border-color: var(--teal-deep); }
.field:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(10, 171, 181, .45); }
.field[aria-invalid="true"] { border-color: #B3261E; }
textarea.field { min-height: 150px; resize: vertical; width: 100%; }
.finder .btn { padding-inline: 1.3rem; }
.finder-result { margin-top: 1.3rem; min-height: 3.2rem; }
.finder-hint { color: #3c5f63; font-size: .98rem; }
.sector-badge {
  display: inline-flex; align-items: baseline; gap: .6rem; background: var(--ink); color: #fff; border-radius: 14px;
  padding: .75rem 1rem; font-weight: 600;
}
.sector-badge strong { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: -.01em; }
.sector-badge span { color: var(--orange-hi); font-weight: 700; }
.sector-key { margin-top: 1.4rem; padding-top: 1.4rem; position: relative; display: flex; flex-wrap: wrap; gap: .4rem .5rem; font-size: .95rem; }
.sector-key::before { background-image: var(--dot-teal); }
.sector-key li { background: var(--paper-2); border-radius: 8px; padding: .3rem .65rem; font-weight: 600; }
.price-wrap { grid-column: 6 / 13; background: #fff; border-radius: var(--r-lg); padding: 1.2rem 1.6rem 1.6rem; box-shadow: var(--shadow-panel); color: var(--ink); }
table.prices { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prices th { text-align: left; font-size: .9rem; font-weight: 700; color: #3c5f63; padding: .8rem .6rem; border-bottom: 2px dotted #9CC9CC; }
.prices td { padding: 1.15rem .6rem; border-bottom: 2px dotted #C3DFE0; vertical-align: top; }
.prices tr:last-child td { border-bottom: 0; }
.prices .t-name { font-weight: 700; }
.prices .t-desc { font-size: .95rem; color: #3c5f63; display: block; margin-top: .15rem; font-weight: 400; }
.prices .t-dur { white-space: nowrap; }
.prices .t-price { text-align: right; font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.prices .t-price small { display: block; font-family: var(--font-text); font-size: .8rem; font-weight: 600; letter-spacing: 0; color: #3c5f63; }
.prices .is-exact .t-price { color: var(--teal-deep); }
.notes { margin-top: 1.3rem; font-size: .93rem; color: #3c5f63; display: grid; gap: .4rem; max-width: 62ch; }
@media (max-width: 900px) {
  .finder, .price-wrap { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .prices thead { position: absolute; left: -9999px; }
  .prices, .prices tbody, .prices tr, .prices td { display: block; }
  .prices tr { padding: 1rem 0; border-bottom: 2px dotted #9CC9CC; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; }
  .prices tr:last-child { border-bottom: 0; }
  .prices td { padding: 0; border: 0; }
  .prices .t-dur { grid-column: 1; font-size: .92rem; color: #3c5f63; }
  .prices .t-price { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}

/* ---------- Emilie ---------- */
.about-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 3rem; align-items: center; }
.portrait { grid-column: 1 / 6; position: relative; }
.portrait .photo-board { aspect-ratio: 3 / 4; transform: rotate(-1.4deg); box-shadow: var(--shadow-float); }
.portrait .photo-board img { object-position: 50% 30%; }
.portrait .piece { z-index: 3; }
.portrait .piece--disc { right: -6%; bottom: 10%; width: 20%; }
.about-copy { grid-column: 7 / 13; }
.about-copy h2 { margin-bottom: 1.6rem; }
.about-name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; margin-bottom: 1rem !important; }
.about-copy p { max-width: 52ch; }
.signature { font-family: var(--font-hand); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--orange-text); margin-top: 1.4rem !important; transform: rotate(-2deg); transform-origin: left; }
.about-copy .btn { margin-top: 2rem; }
@media (max-width: 900px) {
  .portrait, .about-copy { grid-column: 1 / -1; }
  .portrait { max-width: 420px; }
}

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 2.4rem; align-items: start; }
.faq-grid .sec-head { grid-column: 1 / 5; position: sticky; top: 118px; }
.faq-list { grid-column: 5 / 13; }
.faq-list details { position: relative; padding-top: 5px; }
.faq-list details::before { background-image: var(--dot-light); }
.faq-list details:last-child { border-bottom: 2px dotted rgba(255, 255, 255, .5); }
.faq-list summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1.2rem; justify-content: space-between;
  padding: 1.4rem .2rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.15rem, 1.9vw, 1.4rem); letter-spacing: -.02em; line-height: 1.2;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { text-decoration: underline dotted var(--orange-hi); text-decoration-thickness: 3px; text-underline-offset: .25em; }
.faq-list .plus {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: var(--ink);
  transition: rotate .35s var(--ease), background-color .2s;
}
.faq-list .plus svg { width: 18px; height: 18px; }
.faq-list details[open] .plus { rotate: 45deg; background: #fff; }
.faq-body { padding: 0 .2rem 1.8rem; color: #fff; max-width: 62ch; }
.faq-body ul { margin: .8rem 0 1rem; display: grid; gap: .6rem; }
.faq-body li { padding-left: 1.6rem; position: relative; }
.faq-body li::before { content: ''; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--orange-hi); }
.faq-body a { color: #fff; font-weight: 700; }
@media (max-width: 900px) {
  .faq-grid .sec-head, .faq-list { grid-column: 1 / -1; position: static; }
}

/* ---------- Closing call ---------- */
.call { padding-block: calc(var(--sec) * 1.1); }
.call-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 2.4rem; align-items: start; }
.call-copy { grid-column: 1 / 8; }
.call-lead { margin: 1.4rem 0 0; font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 500; max-width: 34ch; line-height: 1.45; }
.call h2 {  font-size: clamp(2.6rem, 6.4vw, 5.2rem); letter-spacing: -.035em; }
.call-actions { grid-column: 8 / 13; display: grid; gap: 1.2rem; justify-items: start; }
.call-actions .mail { font-weight: 700; }
@media (max-width: 900px) { .call-copy, .call-actions { grid-column: 1 / -1; } }

/* ---------- Inner pages ---------- */
.page-hero { position: relative; padding-block: calc(var(--sec) * .9) calc(var(--sec) * 1.1); overflow: clip; }
.page-hero .wrap { max-width: var(--wrap); }
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); max-width: 16ch; }
.page-hero .lead { margin-top: 1.5rem; font-size: clamp(1.15rem, 1.9vw, 1.4rem); max-width: 52ch; color: #fff; line-height: 1.5; }
.page-hero .piece { z-index: 1; }
.page-hero .piece--arc { right: 6%; bottom: -34px; width: min(22vw, 250px); }
.page-hero .piece--disc { right: 22%; top: 14%; width: min(7vw, 84px); }
@media (max-width: 720px) { .page-hero .piece--disc { display: none; } .page-hero .piece--arc { width: 120px; right: 4%; } }

.split { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; row-gap: 3rem; align-items: start; }
.split > .col-a { grid-column: 1 / 6; }
.split > .col-b { grid-column: 7 / 13; }
.split--wide > .col-a { grid-column: 1 / 5; }
.split--wide > .col-b { grid-column: 6 / 13; }
@media (max-width: 900px) { .split > .col-a, .split > .col-b, .split--wide > .col-a, .split--wide > .col-b { grid-column: 1 / -1; } }

.prose h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); margin-block: 2.6em .7em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-block: 2em .5em; }
.prose p, .prose li { max-width: 68ch; }
.prose ul.dots { display: grid; gap: .8rem; margin-block: 1rem 1.4rem; }
.prose ul.dots li { position: relative; padding-left: 1.9rem; }
.prose ul.dots li::before { content: ''; position: absolute; left: 0; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 2px 3px rgba(2, 18, 21, .35); }
.legal { max-width: 74ch; margin-inline: auto; }
.legal h2 { font-size: 1.5rem; margin-block: 2.2em .6em; }
.legal p { max-width: none; }

.domains { display: grid; gap: 0; margin: 0; }
.domain { display: grid; grid-template-columns: 22px 1fr; column-gap: 1.2rem; padding-block: 1.4rem; position: relative; }
.domain .peg { margin-top: .25rem; }
.domain h3 { margin-bottom: .35rem; }
.domain p { max-width: 54ch; }

.age-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.2rem 2.4rem; margin-top: 3rem; }
.age-block h3 { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1.2rem; }
.age-block h3 span { font-family: var(--font-display); color: var(--teal-deep); font-weight: 800; }
.age-block dl { margin: 0; display: grid; gap: .9rem; }
.age-block dt { font-weight: 700; }
.age-block dd { margin: 0; color: #24494d; }
@media (max-width: 720px) { .age-grid { grid-template-columns: 1fr; } }

.photo-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; margin-top: 3.4rem; align-items: end; }
.photo-row figure { margin: 0; }
.photo-row img { width: 100%; border-radius: var(--r-lg); object-fit: cover; aspect-ratio: 4 / 3; }
.photo-row figure:last-child img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
.photo-row figcaption { margin-top: .7rem; font-size: .95rem; font-weight: 600; }
@media (max-width: 720px) { .photo-row { grid-template-columns: 1fr; } }

/* MDPH steps and checklist */
.big-steps { display: grid; gap: 0; counter-reset: st; }
.big-step { display: grid; grid-template-columns: 64px 1fr; column-gap: 1.6rem; padding-block: 1.6rem; position: relative; }
.big-step:first-child { padding-top: 0; }
.big-step .step-peg { background: var(--orange); }
.big-step h3 { margin-bottom: .4rem; }
.big-step p { max-width: 56ch; }
.checklist { display: grid; gap: .9rem; }
.checklist li { display: grid; grid-template-columns: 30px 1fr; column-gap: 1rem; align-items: start; background: #fff; border-radius: 16px; padding: 1.1rem 1.3rem; box-shadow: var(--shadow-card); }
.checklist .tick { width: 30px; height: 30px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; }
.checklist .tick svg { width: 16px; height: 16px; }
.tips { display: grid; gap: 1rem; }
.tips li { padding-left: 2rem; position: relative; }
.tips li::before { content: ''; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; background: var(--orange-hi); box-shadow: 0 2px 3px rgba(2, 18, 21, .35); }
.money { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 2.2rem 2.4rem; }
.money h3 { margin-bottom: .8rem; }
.money p { color: #DCEFED; max-width: 56ch; }

/* Contact */
.contact-form { display: grid; gap: 1.2rem; background: #fff; border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--shadow-panel); }
.contact-form label { font-weight: 700; display: block; margin-bottom: .45rem; }
.contact-form .req { color: var(--orange-text); }
.contact-form .field-row { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 40rem) { .contact-form .field-row { grid-template-columns: 1fr 1fr; } }
.form-msg { font-weight: 600; }
.form-msg:empty { display: none; }
.form-msg.err { color: #B3261E; }
.form-msg.ok { color: var(--teal-deep); }
.form-note { font-size: .93rem; color: #3c5f63; }
.info-list { display: grid; gap: 1.6rem; }
.info-list dt { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; margin-bottom: .25rem; }
.info-list dd { margin: 0; }
.info-list a { font-weight: 700; }

/* 404 */
.lost { min-height: 70vh; display: grid; align-items: center; }
.lost h1 { font-size: clamp(3rem, 9vw, 7rem); }
.lost p { font-size: 1.3rem; max-width: 34ch; margin-top: 1.4rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #fff; padding-block: calc(var(--sec) * .8) calc(var(--sec) * .5); position: relative; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2.6rem 3rem; }
.foot-brand { display: flex; gap: 1.2rem; align-items: center; }
.foot-brand img { width: 84px; height: 84px; }
.foot-brand strong { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -.03em; color: #fff; display: block; line-height: 1; }
.foot-brand span { display: block; margin-top: .4rem; color: var(--orange-hi); font-family: var(--font-hand); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.site-footer h2 { font-size: 1.1rem; letter-spacing: 0; font-family: var(--font-text); font-weight: 700; color: #fff; margin-bottom: .9rem; }
.site-footer ul { display: grid; gap: .5rem; }
.site-footer a { text-decoration-color: rgba(246, 169, 74, .6); }
.site-footer a:hover { color: var(--orange-hi); }
.foot-legal { margin-top: 3rem; padding-top: 1.6rem; position: relative; display: flex; flex-wrap: wrap; gap: .6rem 2rem; font-size: .95rem; }
.foot-legal a { color: #fff; }
.foot-legal::before { background-image: var(--dot-orange); }
.site-footer :focus-visible { outline-color: var(--orange-hi); box-shadow: none; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; } }

.icon { width: 1.25em; height: 1.25em; flex: none; }

@media print {
  .site-header, .dock, .trace, .piece, .pin { display: none !important; }
  body { background: #fff; }
}


/* ---------- Depth & material: opt-in helpers ---------- */
/* Grain on any painted surface (a card, a badge, a model stage). Remove the class to switch it off. */
.tex-grain { background-image: var(--tex-grain); background-size: 200px 200px; background-blend-mode: soft-light; }
.tex-fibre { background-image: var(--tex-fibre); background-size: 260px 260px; background-blend-mode: soft-light; }
/* Elevation helpers for anything new: pick the height, the light stays the same. */
.elev-1 { box-shadow: var(--shadow-peg); }
.elev-2 { box-shadow: var(--shadow-btn); }
.elev-3 { box-shadow: var(--shadow-card); }
.elev-4 { box-shadow: var(--shadow-panel); }
.elev-5 { box-shadow: var(--shadow-float); }

/* 3D model stage (see assets/js/model-stage.js): a canvas that receives real shadows, over a painted field. */
.model-stage { position: relative; aspect-ratio: 1 / 1; width: 100%; border-radius: var(--r-lg); overflow: hidden; background-color: var(--paper-2); }
.model-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.model-stage .model-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .4s var(--ease); }
.model-stage.is-live .model-poster { opacity: 0; pointer-events: none; }

/* Textures are decoration: drop them when the user asks for more contrast or forces colours. */
@media (prefers-contrast: more), (forced-colors: active) {
  .board, .field-paper, .field-paper-2, .tex-grain, .tex-fibre { background-blend-mode: normal; }
  .board { background-image: radial-gradient(circle, var(--hole) 0 3.2px, rgba(255, 255, 255, .04) 3.6px 4.6px, transparent 5px); background-size: var(--pitch) var(--pitch); background-position: calc(var(--pitch) / 2) calc(var(--pitch) / 2); }
  .field-paper, .field-paper-2 { background-image: none; }
  .piece { filter: var(--drop-piece); }
}


/* ---------- Équipe : la titulaire, puis les collaborateurs ---------- */
/* Emilie en tête (carte plus grande), puis une grille de cartes compactes qui accepte autant de membres que nécessaire. */
.team { display: grid; gap: 2.6rem; margin-top: 2.4rem; }
.member { display: grid; grid-template-columns: clamp(96px, 32%, 180px) minmax(0, 1fr); column-gap: 1.4rem; align-items: start; }
.member .photo-board { grid-row: 1 / span 3; aspect-ratio: 1; border-radius: 50%; transform: none; box-shadow: var(--shadow-card); }
.member .photo-board img { object-position: 50% 28%; }
.member h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); grid-column: 2; }
.member .role { font-weight: 700; color: var(--teal-deep); margin: .25rem 0 .6rem; grid-column: 2; }
.member p:last-child { max-width: 60ch; grid-column: 2; margin: 0; }
.member--lead { grid-template-columns: clamp(120px, 22%, 260px) minmax(0, 1fr); column-gap: clamp(1.4rem, 3vw, 2.4rem); }
.member--lead .photo-board { box-shadow: var(--shadow-float); }
.member--lead h3 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.member--lead .role { font-size: 1.1rem; }
.member--lead p:last-child { max-width: 75ch; font-size: 1.1rem; }
/* auto-fit + une largeur de carte plafonnée (pas 1fr) : avec 1 seul
   collaborateur la carte garde une taille raisonnable et se centre au lieu
   de s'étirer sur toute la largeur ou de laisser un grand vide ; à mesure
   qu'on en ajoute, la grille se réorganise et ajoute des lignes toute seule. */
.team-others {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.2rem clamp(2rem, 5vw, 4rem);
  position: relative;
  padding-top: 2.2rem;
  container-type: inline-size;
}
.team-others::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--dot-dark) 0 0 / 12px 5px repeat-x; }
/* Texte dimensionné par rapport à la carte elle-même (container query),
   pas par rapport à l'écran : il s'adapte à la place vraiment disponible,
   que la grille affiche 1 ou 6 cartes par ligne. */
.team-others .member h3 { font-size: clamp(1.2rem, 6.5cqi, 1.6rem); }
.team-others .member .monogram { font-size: clamp(1.3rem, 9cqi, 1.9rem); }
/* Tant qu'il n'y a qu'une seule collaboratrice, sa carte reprend les
   proportions de la carte titulaire (photo et texte plus grands) et
   occupe toute la largeur du bloc équipe, comme si elle était la 2e
   titulaire, au lieu de rester une petite carte isolée. Dès qu'une 2e
   collaboratrice est ajoutée, la grille ci-dessus reprend la main toute
   seule (:only-child ne matche plus). */
.team-others:has(.member:only-child) { grid-template-columns: 1fr; }
@media (max-width: 700px) { .team-others { grid-template-columns: minmax(0, 1fr); } }
.team-others .member:only-child { grid-template-columns: clamp(120px, 22%, 260px) minmax(0, 1fr); column-gap: clamp(1.4rem, 3vw, 2.4rem); }
.team-others .member:only-child .photo-board { box-shadow: var(--shadow-float); }
.team-others .member:only-child h3 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.team-others .member:only-child .role { font-size: 1.1rem; }
.team-others .member:only-child p:last-child { max-width: 75ch; font-size: 1.1rem; }
.team-others .member:only-child .monogram { font-size: clamp(2rem, 5vw, 3rem); }
.board .team-others::before { background-image: var(--dot-light); }
.board .member .role { color: #fff; }
.team-more { margin-top: 2.2rem; }
/* Portrait provisoire : un disque peint avec les initiales, en attendant une vraie photo. */
.monogram-board { display: grid; place-items: center; }
.monogram {
  width: 56%; aspect-ratio: 1; border-radius: 50%; background: #F4FAF9; color: var(--teal-deep);
  display: grid; place-items: center; font: 800 clamp(2.6rem, 8vw, 4.6rem)/1 var(--font-display); letter-spacing: -.04em;
  box-shadow: 0 9px 0 #B9D8D6, var(--shadow-float);
}

/* ---------- Puces, notes et financement ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.chips li { background: var(--paper-2); border-radius: 999px; padding: .55rem 1.05rem; font-weight: 600; color: var(--ink); }
.ages-head h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.notes-more summary { cursor: pointer; margin-top: 1.1rem; font-weight: 600; font-size: .95rem; color: #3c5f63; text-decoration: underline dotted; text-underline-offset: .22em; }
.notes-more[open] summary { margin-bottom: .2rem; }
.finance { margin-top: 2.2rem; max-width: 64ch; font-weight: 600; }
.domains--light .domain:not(:first-child)::before { background-image: var(--dot-light); }

.member .monogram { width: 76%; font-size: clamp(1.4rem, 3.4vw, 2rem); box-shadow: 0 3px 0 #B9D8D6, var(--shadow-peg); }
/* Sur mobile, la photo du hero reste un bandeau : le premier écran garde le titre et les boutons. */
@media (max-width: 900px) {
  .hero-visual { max-width: 460px; }
  .hero-visual .photo-board { aspect-ratio: 16 / 11; }
  .hero-visual .photo-board img { object-position: 50% 40%; }
}
/* Pied de page compact sur mobile : contact et plan du site côte à côte. */
@media (max-width: 720px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.4rem; }
  .foot-grid > div:first-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .step { padding-bottom: 1.5rem; }
  .sec-head .lead { font-size: 1.08rem; }
}

/* ---------- Lisibilité (audit de contraste) ---------- */
/* Texte courant sur fond peint : un cran plus épais et plus aéré, pour ne pas se perdre dans les trous du panneau. */
.board p, .board li, .board dd, .board .lead { font-weight: 500; }
.board p, .board li { line-height: 1.7; }
.board .step p, .board .faq-body { color: #fff; }
/* Onglets d'âge sur le fond bleu-vert clair « Sea Glass » (page Services). */
.field-paper-2 .age-tab:hover { background-color: #fff; }
.field-paper-2 .age-panel dd { color: #1d3f43; }