/* Sandrine Moyal, avocate et notaire à Netanya : proposition de refonte (Refront)
   Couleurs et polices d'abord. Le bleu tekhelet porte l'identité (le bleu des drapeaux du Québec et d'Israël),
   le papier ivoire est le fond, le bleu-noir de stylo est l'encre. Pas d'or, pas de noir. */
:root {
  --papier: oklch(0.966 0.009 85);
  --papier-2: oklch(0.938 0.013 84);
  --ivoire: oklch(0.982 0.006 85);          /* champs, texte sur le bleu */
  --ivoire-2: oklch(0.885 0.03 262);        /* texte secondaire sur le bleu */
  --filet: oklch(0.83 0.014 258);
  --encre: oklch(0.235 0.032 262);
  --encre-2: oklch(0.43 0.03 262);
  --tekhelet: oklch(0.47 0.165 264);
  --tekhelet-vif: oklch(0.54 0.175 263);
  --tekhelet-nuit: oklch(0.285 0.105 266);
  --tekhelet-pale: oklch(0.915 0.032 264);
  --erreur: oklch(0.52 0.17 32);

  --f-display: 'Bellefair', 'Assistant', Georgia, serif;
  --f-text: 'Commissioner', 'Assistant', system-ui, sans-serif;
  --f-he: 'Assistant', 'Commissioner', system-ui, sans-serif;

  --ease: cubic-bezier(0.2, 0, 0, 1);          /* la courbe de 80 % des mouvements */
  --ease-ink: cubic-bezier(0.65, 0, 0.35, 1);  /* l'encre qui court */
  --gutter: clamp(1.25rem, 5vw, 3.25rem);
  --top-h: 60px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.6 var(--f-text);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:lang(he), .he { font-family: var(--f-he); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--tekhelet-pale); color: var(--encre); }

/* Le focus clavier : un cadre décalé, quatre coins marqués */
:where(a, button, input, textarea, [tabindex]):focus { outline: none; }
.focusring, :where(a, button):focus-visible { position: relative; }
:where(a, button):focus-visible::after {
  content: '';
  position: absolute;
  inset: -7px;
  pointer-events: none;
  --c: var(--focus, var(--tekhelet));
  background:
    linear-gradient(var(--c), var(--c)) top left / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top left / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 12px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 12px no-repeat;
  outline: 1px solid color-mix(in oklch, var(--c) 45%, transparent);
  outline-offset: -1px;
}

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 0.7rem 1rem; background: var(--encre); color: var(--ivoire);
  font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; --focus: var(--ivoire); }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Petite ligne au-dessus des titres : les trois barres du logo + le numéro du chapitre ---------- */
.overline {
  display: flex; align-items: flex-end; gap: 0.6rem;
  font: 600 0.74rem/1.2 var(--f-text);
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--over, var(--tekhelet));
  margin-bottom: 1.15rem;
}
.overline__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.overline__bars i { display: block; width: 3px; background: currentColor; }
.overline__bars i:nth-child(1) { height: 7px; }
.overline__bars i:nth-child(2) { height: 12px; }
.overline__bars i:nth-child(3) { height: 9px; }
.minor {
  font: 600 0.74rem/1.3 var(--f-text); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--encre-2); margin-bottom: 0.9rem;
}

/* ---------- Boutons : bloc à angles vifs, double filet intérieur (le cadre d'un acte) ---------- */
.act {
  --act-bg: var(--tekhelet); --act-fg: var(--ivoire); --act-edge: var(--tekhelet);
  --act-rule: color-mix(in oklch, var(--ivoire) 42%, transparent); --act-bg-hover: var(--tekhelet-vif); --act-bg-press: var(--tekhelet-nuit);
  position: relative;
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 54px; padding: 0 1.15rem 0 1.05rem;
  background: var(--act-bg); color: var(--act-fg);
  border: 1px solid var(--act-edge); border-radius: 0;
  font: 600 0.97rem/1.15 var(--f-text); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  transition: background-color 220ms var(--ease), transform 140ms var(--ease), color 220ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.act__frame {
  position: absolute; inset: 4px; pointer-events: none;
  border: 1px solid var(--act-rule);
  transition: inset 300ms var(--ease), border-color 220ms var(--ease);
}
.act__icon { display: inline-flex; width: 22px; height: 22px; flex: none; }
.act__icon svg, .callline__icon svg, .dock__item svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.act__label { position: relative; padding-block: 0.6rem; min-width: 0; overflow-wrap: anywhere; }
.act__arrow { width: 22px; height: 11px; flex: none; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; transition: transform 300ms var(--ease); }
.act:hover { background: var(--act-bg-hover); }
.act:hover .act__frame { inset: 7px; }
.act:hover .act__arrow { transform: translateX(4px); }
.act:active { transform: translateY(1px); background: var(--act-bg-press); transition-duration: 60ms; }
.act:active .act__frame { inset: 3px; }
.act--line {
  --act-bg: transparent; --act-fg: var(--encre); --act-edge: color-mix(in oklch, var(--encre) 55%, transparent);
  --act-rule: transparent; --act-bg-hover: color-mix(in oklch, var(--tekhelet-pale) 70%, transparent); --act-bg-press: var(--tekhelet-pale);
}
.act--line:hover { --act-edge: var(--encre); }
.act--line:hover .act__frame { border-color: color-mix(in oklch, var(--encre) 30%, transparent); }
.act--button { width: 100%; justify-content: flex-start; }
.act[data-state="sending"] { cursor: progress; background: var(--act-bg-press); }
.act[data-state="sending"] .act__arrow { animation: nib 900ms var(--ease-ink) infinite; }
@keyframes nib { 0% { transform: translateX(0); opacity: 1; } 60% { transform: translateX(8px); opacity: 0; } 61% { transform: translateX(-6px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }

/* Sur le bleu, le bouton plein devient ivoire */
.on-blue, .story, .foot { --focus: var(--ivoire); --over: var(--ivoire-2); }
.story .act--solid {
  --act-bg: var(--ivoire); --act-fg: var(--tekhelet-nuit); --act-edge: var(--ivoire);
  --act-rule: color-mix(in oklch, var(--tekhelet) 34%, transparent); --act-bg-hover: oklch(0.95 0.02 262); --act-bg-press: oklch(0.89 0.04 262);
}

/* Lien texte : soulignement fin qui s'épaissit, petite flèche de sortie */
.textlink {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  color: inherit; font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 260ms var(--ease), color 200ms var(--ease);
}
.textlink + .textlink { margin-left: 1.4rem; }
.textlink:hover { background-size: 100% 2px; color: var(--tekhelet); }
.story .textlink:hover, .foot .textlink:hover { color: var(--ivoire); }
.textlink:active { background-size: 100% 3px; }
.textlink__out { width: 0.7em; height: 0.7em; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 260ms var(--ease); }
.textlink:hover .textlink__out { transform: translate(2px, -2px); }
.textlink--inline { font-weight: 600; }

/* ---------- En-tête ---------- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 var(--gutter);
  padding-top: env(safe-area-inset-top);
  color: var(--ivoire);
  --focus: var(--ivoire);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.top.is-solid {
  background: var(--papier); color: var(--encre); --focus: var(--tekhelet);
  box-shadow: 0 1px 0 var(--filet);
}
.top__brand { display: block; color: inherit; padding: 6px 0; }
.top__logo {
  display: block; width: 150px; height: 38px;
  background: currentColor;
  -webkit-mask: url(../assets/logo.webp) left center / contain no-repeat;
  mask: url(../assets/logo.webp) left center / contain no-repeat;
}
.top__end { display: flex; align-items: center; gap: 0.9rem; }
.langswitch { display: inline-flex; border: 1px solid color-mix(in oklch, currentColor 55%, transparent); }
.langswitch__opt {
  min-width: 40px; height: 34px; padding: 0 0.55rem;
  background: transparent; border: 0; cursor: pointer;
  font: 600 0.78rem/1 var(--f-text); letter-spacing: 0.1em;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.langswitch__opt + .langswitch__opt { border-left: 1px solid color-mix(in oklch, currentColor 55%, transparent); }
.langswitch__opt:hover { background: color-mix(in oklch, currentColor 14%, transparent); }
.langswitch__opt:active { background: color-mix(in oklch, currentColor 24%, transparent); }
.langswitch__opt[aria-pressed="true"] { background: var(--ivoire); color: var(--tekhelet-nuit); cursor: default; }
.top.is-solid .langswitch__opt[aria-pressed="true"] { background: var(--encre); color: var(--papier); }
.top__hebrew {
  font: 600 1.02rem/1 var(--f-he); color: inherit; text-decoration: none;
  padding: 8px 2px 6px;
  background: linear-gradient(currentColor, currentColor) right bottom / 0 1px no-repeat;
  transition: background-size 260ms var(--ease);
}
.top__hebrew:hover { background-size: 100% 1px; }
.top__hebrew:active { background-size: 100% 2px; }

/* ---------- L'histoire : la feuille épinglée sur le bleu ---------- */
.story {
  position: relative;
  color: var(--ivoire);
  background:
    radial-gradient(120% 70% at 62% 42%, color-mix(in oklch, var(--tekhelet-vif) 70%, var(--tekhelet)) 0%, var(--tekhelet) 55%, color-mix(in oklch, var(--tekhelet) 82%, var(--tekhelet-nuit)) 100%);
  background-color: var(--tekhelet);
}
.stage {
  position: sticky; top: 0; z-index: 0;
  height: 100vh; height: 100svh;
  overflow: hidden; pointer-events: none;
}
/* Le premier chapitre remonte sous la scène : la scène ne déborde jamais après l'histoire */
.chapter--hero { margin-top: -100vh; margin-top: -100svh; }
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 700ms var(--ease); }
.is-3d .stage__canvas { opacity: 1; }
.stage__poster {
  position: absolute; left: 50%; top: 66%; height: 52%; width: auto; max-width: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 40px color-mix(in oklch, var(--tekhelet-nuit) 70%, transparent));
  transition: opacity 600ms var(--ease);
}
.is-3d .stage__poster { opacity: 0; }

.chapter { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
.chapter__text { width: 100%; padding: 2.6rem var(--gutter) 13svh; }
.chapter__figure { display: none; }
.chapter__title {
  font: 400 clamp(2.35rem, 9.6vw, 5.2rem)/1.03 var(--f-display);
  letter-spacing: -0.005em; margin-bottom: 1.1rem;
  text-wrap: balance;
}
.chapter__body { color: var(--ivoire-2); max-width: 40ch; font-size: 1.02rem; }
.chapter__actions { margin-top: 1.7rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.chapter__or { color: var(--ivoire-2); font-size: 0.95rem; }

/* Sur téléphone, le texte des chapitres repose sur une bande bleue qui passe devant la feuille */
@media (max-width: 899px) {
  .chapter--call .chapter__text { padding-bottom: calc(1.8rem + env(safe-area-inset-bottom)); }
  .chapter:not(.chapter--hero) .chapter__text {
    background: linear-gradient(to bottom, color-mix(in oklch, var(--tekhelet) 0%, transparent), var(--tekhelet) 3.2rem);
  }
}

/* Le haut de page */
.chapter--hero { justify-content: flex-start; }
.hero { padding: calc(var(--top-h) + 1.6rem) var(--gutter) 2rem; }
.headline {
  font: 400 clamp(3rem, 12.6vw, 7.9rem)/0.98 var(--f-display);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}
.headline__slot { display: grid; }
.headline__line {
  grid-area: 1 / 1;
  text-wrap: balance;
  clip-path: inset(-0.25em 100% -0.3em -0.1em);
  opacity: 0;
  transition: clip-path 1250ms var(--ease-ink), opacity 300ms linear 0ms;
}
.headline__line[dir="rtl"] { clip-path: inset(-0.25em -0.1em -0.3em 100%); font-size: 0.96em; line-height: 1.04; }
.headline__line.is-on { clip-path: inset(-0.25em -0.1em -0.3em -0.1em); opacity: 1; transition: clip-path 1250ms var(--ease-ink) 520ms, opacity 1ms linear 520ms; }
.headline__line.is-off { opacity: 1; clip-path: inset(-0.25em -0.1em -0.3em 100%); transition: clip-path 900ms var(--ease-ink), opacity 1ms linear 900ms; }
.headline__line[dir="rtl"].is-off { clip-path: inset(-0.25em 100% -0.3em -0.1em); }
/* Avant le chargement des scripts, ou sans eux : la première ligne est visible */
html:not(.js) .headline__line:first-child { clip-path: none; opacity: 1; }

.tongues { display: flex; gap: 1.1rem; margin-bottom: 1.4rem; font: 600 0.78rem/1 var(--f-text); letter-spacing: 0.12em; color: var(--ivoire-2); }
.tongues__item { display: inline-flex; align-items: flex-end; gap: 0.4rem; transition: color 500ms var(--ease); }
.tongues__item[lang="he"] { font-family: var(--f-he); font-size: 0.95rem; letter-spacing: 0; }
.tongues__item i { display: block; width: 3px; height: 9px; background: currentColor; opacity: 0.45; transition: height 600ms var(--ease), opacity 400ms var(--ease); }
.tongues__item:nth-child(2) i { height: 13px; }
.tongues__item:nth-child(3) i { height: 11px; }
.tongues__item.is-on { color: var(--ivoire); }
.tongues__item.is-on i { opacity: 1; height: 16px; }

.lede { color: var(--ivoire-2); max-width: 34ch; font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.4rem; }

/* L'appel, en ligne fine à côté du bouton WhatsApp */
.callline {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px;
  color: inherit; text-decoration: none; font-weight: 600; font-size: 0.97rem;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 9px) / 0 1px no-repeat;
  transition: background-size 300ms var(--ease);
}
.callline__icon { display: inline-flex; width: 20px; height: 20px; }
.callline__num { font-weight: 400; color: var(--ivoire-2); font-variant-numeric: tabular-nums; }
.callline:hover { background-size: 100% 1px; }
.callline:active { transform: translateY(1px); }

/* Les notes posées sur la feuille : une puce, un filet, une étiquette à l'encre */
.stage__notes { position: absolute; inset: 0; }
.note { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; will-change: transform, opacity; }
.note__dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border: 2px solid var(--encre); background: var(--ivoire); transform: rotate(45deg); }
.note__rule { position: absolute; left: 0; bottom: 5px; width: 1px; height: var(--len, 30px); background: var(--encre); }
.note__text {
  position: absolute; left: -1px; bottom: calc(var(--len, 30px) + 5px);
  padding: 0.42rem 0.6rem 0.4rem; background: var(--encre); color: var(--ivoire); white-space: nowrap;
  font: 600 0.68rem/1.25 var(--f-text); letter-spacing: 0.08em; text-transform: uppercase;
}
.note.is-left .note__text { left: auto; right: -1px; }
/* L'étiquette glisse pour rester dans l'écran ; le filet et la puce restent sur leur point */
.note__text { translate: var(--nx, 0px) 0; }
.note__langs { display: inline-flex; gap: 0.35rem; margin-left: 0.45rem; }
.note__langs b { font-weight: 600; opacity: 0.45; transition: opacity 300ms var(--ease); }
.note__langs b[lang="he"] { font-family: var(--f-he); letter-spacing: 0; }
.note__langs b.is-on { opacity: 1; box-shadow: 0 2px 0 var(--tekhelet-vif); }

/* ---------- Sections calmes ---------- */
.practice, .about, .contact { padding-block: clamp(3.4rem, 10vw, 7rem); }
.section__title {
  font: 400 clamp(2.2rem, 8vw, 4.4rem)/1.04 var(--f-display);
  letter-spacing: -0.005em; max-width: 15ch; margin-bottom: clamp(1.2rem, 4vw, 2.4rem);
  text-wrap: balance;
}

/* 03 Domaines : quatre situations, une ligne par domaine, une phrase claire */
.practice .section__title { margin-bottom: 0.8rem; }
.practice__intro { max-width: 46ch; color: var(--encre-2); margin-bottom: clamp(1.6rem, 5vw, 2.8rem); }
.practice__groups { display: grid; gap: 1.7rem; }
.practice__for {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.5rem; border-bottom: 1px solid var(--encre);
  font: 600 0.74rem/1.3 var(--f-text); letter-spacing: 0.13em; text-transform: uppercase; color: var(--tekhelet);
}
.practice__item {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: baseline;
  padding: 0.75rem 0 0.8rem; border-bottom: 1px solid var(--filet);
}
.practice__num { font: 500 0.74rem/1 var(--f-text); color: var(--tekhelet); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.practice__name { font: 400 1.32rem/1.2 var(--f-display); margin-bottom: 0.2rem; }
.practice__he { font: 600 0.84rem/1 var(--f-he); color: var(--encre-2); white-space: nowrap; margin-inline-start: 0.35rem; }
.practice__text { font-size: 0.96rem; line-height: 1.5; color: var(--encre-2); max-width: 54ch; }
.practice__more { margin-top: 0.45rem; font-size: 0.94rem; }

/* 04 Le cabinet : son portrait devant un pan de bleu, ses titres */
.about { padding-block: clamp(3rem, 9vw, 7rem); }
.about__grid { display: grid; gap: 2rem; }
.about__portrait { position: relative; }
.about__panel { position: absolute; left: -8%; right: -8%; bottom: 0; height: 62%; background: var(--tekhelet); }
.about__portrait img { position: relative; width: 100%; max-height: 72svh; object-fit: contain; object-position: bottom; }
.about__name { font: 400 clamp(2.3rem, 9vw, 5rem)/1 var(--f-display); margin-bottom: 0.4rem; }
.about__name-he { display: block; font: 600 1rem/1.4 var(--f-he); color: var(--encre-2); margin-top: 0.35rem; }
.about__role { font: 600 0.76rem/1.3 var(--f-text); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tekhelet); }
.about__story { max-width: 52ch; margin-bottom: 1.1rem; }
.about__creds { border-top: 1px solid var(--encre); }
.about__creds li { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--filet); font-size: 0.96rem; }
.about__creds li::before { content: ''; flex: none; width: 5px; height: 5px; background: var(--tekhelet); transform: translateY(-3px); }
/* Sur téléphone : le portrait à côté du nom, le texte en dessous sur toute la largeur */
@media (max-width: 899px) {
  .about__grid { grid-template-columns: 8.6rem minmax(0, 1fr); column-gap: 1.3rem; row-gap: 0; align-items: end; }
  .about__text { display: contents; }
  .about__portrait { grid-column: 1; grid-row: 1 / span 3; align-self: end; margin-left: 6%; }
  .about__portrait img { max-height: 15rem; }
  .about .overline { grid-column: 2; grid-row: 1; align-self: end; }
  .about__name { grid-column: 2; grid-row: 2; font-size: clamp(2rem, 9vw, 2.6rem); }
  .about__role { grid-column: 2; grid-row: 3; padding-bottom: 0.3rem; }
  .about__story { grid-column: 1 / -1; margin-top: 1.6rem; }
  .about__creds { grid-column: 1 / -1; }
}

/* 05 Articles : les trois derniers */
.articles { background: var(--papier-2); padding-block: clamp(3rem, 9vw, 6.5rem); }
.articles__head .section__title { margin-bottom: 0.5rem; }
.articles__note { color: var(--encre-2); margin-bottom: 1.4rem; }
.articles__list { border-top: 1px solid var(--encre); }
.article {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: center;
  padding: 0.85rem 0.2rem; border-bottom: 1px solid var(--filet);
  color: inherit; text-decoration: none;
  transition: background-color 220ms var(--ease);
}
.article__date { grid-column: 1; font-size: 0.8rem; color: var(--encre-2); letter-spacing: 0.02em; }
.article__title { grid-column: 1; font: 400 clamp(1.18rem, 4.2vw, 1.6rem)/1.2 var(--f-display); transition: color 220ms var(--ease); }
.article__go { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid color-mix(in oklch, var(--encre) 40%, transparent); transition: background-color 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease); }
.article__go .textlink__out { width: 12px; height: 12px; }
.article:hover { background: color-mix(in oklch, var(--ivoire) 70%, transparent); }
.article:hover .article__title { color: var(--tekhelet); }
.article:hover .article__go { background: var(--tekhelet); border-color: var(--tekhelet); color: var(--ivoire); }
.article:hover .textlink__out { transform: translate(2px, -2px); }
.article:active .article__go { background: var(--tekhelet-nuit); }
.articles__all { margin-top: 1.2rem; }

/* 06 Contact : les trois façons de joindre le cabinet, l'adresse, les horaires */
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.contact__head .section__title { margin-bottom: 0; }
.contact__acts { display: grid; gap: 0.65rem; max-width: 460px; }
.contact__acts .act { width: 100%; }
.contact__facts { display: grid; gap: 1rem; padding-top: 1.2rem; border-top: 1px solid var(--encre); }
.contact__fact { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.contact__icon { display: inline-flex; width: 22px; height: 22px; color: var(--tekhelet); }
.contact__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.contact__fact address { font-style: normal; line-height: 1.5; margin-bottom: 0.35rem; }
.contact__src { color: var(--encre-2); font-size: 0.86rem; }

/* ---------- Pied de page ---------- */
.foot { background: var(--tekhelet-nuit); color: var(--ivoire); padding: 2.8rem 0 calc(5.4rem + env(safe-area-inset-bottom)); }
.foot__grid { display: grid; gap: 1.5rem; }
.foot__logo {
  display: block; width: 180px; height: 46px; background: var(--ivoire);
  -webkit-mask: url(../assets/logo.webp) left center / contain no-repeat;
  mask: url(../assets/logo.webp) left center / contain no-repeat;
  margin-bottom: 0.7rem;
}
.foot__line { color: var(--ivoire-2); max-width: 32ch; font-size: 0.95rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.7rem 1.3rem; font-size: 0.95rem; }
.foot__links .textlink + .textlink { margin-left: 0; }
.foot__notice { padding-top: 1.1rem; border-top: 1px solid color-mix(in oklch, var(--ivoire) 26%, transparent); color: var(--ivoire-2); font-size: 0.86rem; max-width: 60ch; }

/* ---------- Barre d'actions du téléphone ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 1.35fr 1fr 1fr;
  background: var(--papier); border-top: 1px solid var(--encre);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(105%);
  transition: transform 420ms var(--ease);
}
.dock.is-on { transform: none; }
.dock__item {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 58px; color: var(--encre); text-decoration: none;
  font: 600 0.9rem/1 var(--f-text);
  transition: background-color 200ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.dock__item + .dock__item { border-left: 1px solid var(--filet); }
.dock__item svg { width: 21px; height: 21px; }
.dock__item--main { background: var(--tekhelet); color: var(--ivoire); --focus: var(--ivoire); }
.dock__item:hover { background: var(--tekhelet-pale); }
.dock__item--main:hover { background: var(--tekhelet-vif); }
.dock__item:active { background: color-mix(in oklch, var(--tekhelet-pale) 60%, var(--filet)); }
.dock__item--main:active { background: var(--tekhelet-nuit); }
.dock__item:focus-visible::after { inset: 4px; }

/* ---------- Écrans larges ---------- */
@media (min-width: 560px) {
  .contact__acts .act { width: auto; }
  .contact__acts { justify-items: start; }
}
@media (min-width: 900px) {
  :root { --top-h: 72px; }
  .top__logo { width: 178px; height: 44px; }
  .chapter { justify-content: center; }
  .chapter__text { width: min(46%, 600px); padding: 3rem 0 3rem var(--gutter); margin-left: max(0px, calc((100vw - 1320px) / 2)); }
  .hero { padding-top: calc(var(--top-h) + 2rem); }
  .chapter--hero { justify-content: center; }
  .headline { font-size: clamp(4.4rem, 7.4vw, 7.9rem); }
  .lede { font-size: 1.12rem; }
  .chapter__title { font-size: clamp(3rem, 4.9vw, 5rem); max-width: 13ch; }
  .chapter__body { font-size: 1.1rem; }
  .practice__groups { grid-template-columns: 1fr 1fr; gap: 2.6rem 4rem; align-items: start; }
  .practice__name { font-size: 1.5rem; }
  .about__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 5rem; align-items: center; }
  .about__portrait { width: 100%; max-width: 400px; }
  .about__portrait img { max-height: 620px; }
  .about__role { margin-bottom: 1.2rem; }
  .contact__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto 1fr; column-gap: 5rem; row-gap: 1.8rem; align-items: start; }
  .contact__head { grid-row: 1 / span 2; }
  .foot__grid { grid-template-columns: 1fr 1fr; align-items: end; }
  .foot__notice { grid-column: 1 / -1; }
  .foot { padding-bottom: 3rem; }
  .dock { display: none; }
}
@media (min-width: 1400px) {
  .chapter__text { width: min(44%, 620px); }
}

/* ---------- Immobile : « réduire les animations » ou ?static=1 : la feuille finie, tout visible ---------- */
.is-static .stage { display: none; }
.is-static .chapter--hero { margin-top: 0; }
.is-static .chapter { min-height: 0; }
.is-static .chapter__text { padding-block: 3.2rem 3.6rem; background: none !important; }
.is-static .chapter--hero .chapter__text { padding-top: calc(var(--top-h) + 1.6rem); padding-bottom: 1rem; }
.is-static .chapter--hero .chapter__figure { display: block; padding: 0 var(--gutter) 3rem; }
.is-static .chapter__figure img { width: min(78%, 430px); margin-inline: auto; filter: drop-shadow(0 30px 40px color-mix(in oklch, var(--tekhelet-nuit) 70%, transparent)); }
.is-static .headline__line { transition: none; }
.is-static .headline__line:not(.is-on) { display: none; }
.is-static .dock { transition: none; }
.is-static * { scroll-behavior: auto; }
@media (min-width: 900px) {
  .is-static .chapter--hero { flex-direction: row; align-items: center; }
  .is-static .chapter--hero .chapter__figure { flex: 1; padding: calc(var(--top-h) + 2rem) var(--gutter) 3rem 0; }
  /* Les deux chapitres côte à côte, chacun sous un filet */
  .is-static .story {
    --edge: calc(max(0px, (100vw - 1320px) / 2) + var(--gutter));
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 6vw, 6rem); padding-inline: var(--edge);
  }
  .is-static .chapter--hero { grid-column: 1 / -1; margin-inline: calc(-1 * var(--edge)); }
  .is-static .chapter--call { align-items: stretch; }
  .is-static .chapter:not(.chapter--hero) .chapter__text {
    width: 100%; margin: 0; padding: 2.4rem 0 3.6rem; border-top: 1px solid color-mix(in oklch, var(--ivoire) 28%, transparent);
  }
  .is-static .chapter:not(.chapter--hero) .chapter__title { font-size: clamp(2.3rem, 3.1vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto; }
}

/* Mode affiche (?poster=1) : seule la feuille, sur fond transparent, pour fabriquer l'image de secours */
html.is-poster, .is-poster body, .is-poster .story { background: transparent !important; }
.is-poster .top, .is-poster .chapter, .is-poster main > section:not(.story), .is-poster .foot, .is-poster .dock, .is-poster .stage__poster, .is-poster .stage__notes, .is-poster .skip { display: none !important; }
.is-poster .stage { position: fixed; left: 0; top: 0; width: 900px; height: 1100px; margin: 0; }
.is-poster .stage__canvas { opacity: 1; transition: none; }

/* Entrée lente du haut de page (une seule) : la ligne, le titre, le texte, les boutons */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.js:not(.is-static) .hero > * { animation: rise 900ms var(--ease) both; }
html.js:not(.is-static) .hero > :nth-child(2) { animation-delay: 90ms; }
html.js:not(.is-static) .hero > :nth-child(3) { animation-delay: 180ms; }
html.js:not(.is-static) .hero > :nth-child(4) { animation-delay: 260ms; }
html.js:not(.is-static) .hero > :nth-child(5) { animation-delay: 330ms; }

/* Très petits écrans (320 px) : l'en-tête se resserre */
@media (max-width: 359px) {
  .top { gap: 0.6rem; }
  .top__logo { width: 124px; height: 32px; }
  .top__end { gap: 0.6rem; }
  .langswitch__opt { min-width: 34px; padding: 0 0.4rem; }
}