/* ============================================================================
   UCE — Sections de la page d'accueil
   ========================================================================== */

/* Motifs réutilisables. Les SVG servent de masques : la couleur vient du
   thème (background-color), ce qu'une image data: ne permet pas seule. */
:root {
  --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M18 18h24v24H18zM30 13l17 17-17 17-17-17zM30 0v13M30 47v13M0 30h13M47 30h13M0 0l18 18M60 0 42 18M0 60l18-18M60 60 42 42'/%3E%3C/svg%3E");
  --grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' fill='none' stroke='%23000' stroke-width='1'%3E%3Cpath d='M40 0H0v40'/%3E%3C/svg%3E");
}

.pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--pattern);
  -webkit-mask-image: var(--zellige);
  mask-image: var(--zellige);
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
}

/* Correction : le menu mobile utilise le même motif en masque */
.mobile-menu::before {
  background-image: none;
  background-color: var(--pattern);
  -webkit-mask-image: var(--zellige);
  mask-image: var(--zellige);
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
  opacity: 1;
}

/* ============================================================================
   Hero
   Pas d'illustration centrale : le titre occupe la largeur, le motif du logo
   est repris par le papier millimétré du fond et par la marque animée de
   l'en-tête.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 5rem));
  overflow: hidden;
  isolation: isolate;
}

.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--line);
  -webkit-mask-image: var(--grid), radial-gradient(85% 75% at 60% 40%, #000 0%, transparent 74%);
  mask-image: var(--grid), radial-gradient(85% 75% at 60% 40%, #000 0%, transparent 74%);
  -webkit-mask-size: 40px 40px, 100% 100%;
  mask-size: 40px 40px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0.75;
}

.hero__glow {
  position: absolute;
  z-index: -1;
  width: 70vw;
  height: 70vw;
  max-width: 1000px;
  max-height: 1000px;
  right: -14vw;
  top: -14vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--brand-hi) 20%, transparent), transparent);
  filter: blur(10px);
  transform: translate3d(calc(var(--mx, 0) * -20px), calc(var(--my, 0) * -20px), 0);
  transition: transform 800ms var(--ease);
}

/* Filet d'architecture (évocation de la tour Hassan, voisine du cabinet).
   Volontairement très discret : il donne de la matière au fond sans
   concurrencer le titre. Même intention que le motif du pied de page. */
.hero__art {
  position: absolute;
  z-index: -1;
  right: max(2vw, calc((100% - var(--container)) / 2 - 30px));
  bottom: clamp(90px, 14vh, 150px);
  height: min(62vh, 560px);
  width: auto;
  color: color-mix(in srgb, var(--brand) 12%, transparent);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
  transform: translate3d(calc(var(--mx, 0) * -10px), calc(var(--my, 0) * -6px), 0);
  transition: transform 900ms var(--ease);
}

@media (max-width: 1100px) {
  .hero__art { height: min(50vh, 420px); right: -6px; bottom: clamp(80px, 12vh, 130px); }
}

/* Sur téléphone la tour reste, plus basse et plus effacée : elle habille le
   fond derrière la bande des pôles sans gêner la lecture du titre. */
@media (max-width: 700px) {
  .hero__art {
    height: min(38vh, 300px);
    right: -14px;
    bottom: 96px;
    color: color-mix(in srgb, var(--brand) 10%, transparent);
  }
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 3rem);
}

.hero__kicker { margin-bottom: -0.75rem; }

.hero__title {
  font-size: clamp(2.6rem, 1.1rem + 5.4vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 420;
  max-width: 19ch;
}

/* Découpe en mots faite par le JS : chaque mot monte depuis un masque */
.hero__title .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}

.hero__title .w > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1100ms var(--ease);
  transition-delay: calc(120ms + var(--wi, 0) * 55ms);
}

.is-ready .hero__title .w > span { transform: none; }

.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

.hero__text {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: var(--step-1);
  line-height: 1.55;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Entrée orchestrée du hero, déclenchée à la fin du chargement */
.js .hero-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}

.is-ready .hero-in {
  opacity: 1;
  transform: none;
}

/* ---------- Bande des pôles, en pied de hero ---------- */

.hero__poles {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.hero__poles ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hero__poles li + li { border-left: 1px solid var(--line); }

.hero__poles a {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  height: 100%;
  padding: 1.25rem clamp(0.8rem, 2vw, 1.6rem) 1.6rem;
  transition: background-color 350ms var(--ease);
}

.hero__poles li:first-child a { padding-left: 0; }

.hero__poles a::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}

.hero__poles a:hover::before { transform: scaleX(1); }

.hero__poles strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 450;
  font-size: var(--step-1);
  line-height: 1.2;
}

.hero__poles span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  color: var(--ink-3);
}

.hero__poles svg {
  width: 18px;
  height: 18px;
  margin-top: 0.3rem;
  flex-shrink: 0;
  color: var(--brand);
  transition: transform 450ms var(--ease);
}

.hero__poles a:hover svg { transform: translate(3px, -3px); }

@media (max-width: 900px) {
  .hero__bottom { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 860px) {
  .hero__poles ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__poles li:nth-child(3) { border-left: 0; }
  .hero__poles li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .hero__poles li:nth-child(3) a { padding-left: 0; }
}

@media (max-width: 560px) {
  .hero { min-height: auto; }
  .hero__title { max-width: none; }
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__poles a { padding: 1rem 0.75rem 1.2rem; }
  .hero__poles li:nth-child(odd) a { padding-left: 0; }
  .hero__poles span { display: none; }
  .hero__poles strong { font-size: 1.05rem; }
}

/* ============================================================================
   Le cabinet
   ========================================================================== */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.about__statement {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.22;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.about__body {
  display: grid;
  gap: 1.1rem;
  color: var(--ink-2);
  font-size: 1.05rem;
  padding-top: 0.4rem;
}

.about__body strong { color: var(--ink); font-weight: 650; }

.figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line);
}

.figure {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2.2rem) 0.5rem;
  color: inherit;
}

.figure:first-child { padding-left: 0; }
.figure + .figure { border-left: 1px solid var(--line); }

/* Chiffres remplis des hachures du logo */
.figure__value {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 2.4rem + 5vw, 7.2rem);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.04em;
  font-feature-settings: "lnum", "tnum";
  color: var(--brand);
  background: repeating-linear-gradient(0deg, var(--brand) 0 2px, transparent 2px 5px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1.2px var(--brand);
  -webkit-text-fill-color: transparent;
}

.figure__label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
}

.figure__note {
  font-size: 0.9rem;
  color: var(--ink-3);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--space-l); }
}

@media (max-width: 640px) {
  .figures { grid-template-columns: 1fr; }
  .figure { padding: 1.4rem 0; grid-template-columns: auto 1fr; column-gap: 1.25rem; align-items: center; }
  .figure + .figure { border-left: 0; border-top: 1px solid var(--line); }
  .figure__value { grid-row: span 2; min-width: 5.4rem; }
}

/* ============================================================================
   Expertises : les quatre pôles
   Bureau : liste à gauche, détail à droite. Mobile : accordéon. Même
   balisage, la mise en page change.
   ========================================================================== */

.poles {
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.5fr);
  grid-template-rows: repeat(4, auto) 1fr;
  column-gap: clamp(1.5rem, 4vw, 4rem);
}

.pole { display: contents; }

.pole__trigger {
  grid-column: 1;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.35rem 1rem;
  align-items: center;
  width: 100%;
  padding: 1.35rem 0 1.35rem 1.4rem;
  border-top: 1px solid var(--line);
  text-align: left;
  color: var(--ink-2);
  transition: color 300ms var(--ease);
}

.pole:last-child .pole__trigger { border-bottom: 1px solid var(--line); }

.pole__trigger::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35rem;
  bottom: 1.35rem;
  width: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 500ms var(--ease);
}

.pole__trigger:hover { color: var(--ink); }

.pole.is-open .pole__trigger { color: var(--ink); }
.pole.is-open .pole__trigger::before { transform: scaleY(1); }

.pole__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.15;
  font-weight: 450;
  letter-spacing: -0.01em;
}

.pole__tagline {
  grid-column: 1;
  font-size: 0.9rem;
  color: var(--ink-3);
}

.pole__chevron {
  grid-row: 1 / span 2;
  grid-column: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--brand);
  transition: transform 450ms var(--ease), background-color 300ms var(--ease), border-color 300ms var(--ease), color 300ms;
}

.pole__chevron svg { width: 16px; height: 16px; }

.pole.is-open .pole__chevron {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: rotate(-45deg);
}

.pole__panel {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 450ms var(--ease), transform 600ms var(--ease), visibility 0s linear 450ms;
}

.pole.is-open .pole__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 500ms var(--ease) 80ms, transform 700ms var(--ease) 80ms, visibility 0s;
}

.pole__card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

/* Hachures en coin : rappel du logo */
.pole__card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 160px;
  background: repeating-linear-gradient(0deg, var(--hatch) 0 1px, transparent 1px 7px);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}

.pole__head {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
  padding-right: 3rem;
}

.pole__tier {
  width: 54px;
  height: 48px;
  flex-shrink: 0;
}

.pole__tier path { fill: var(--brand-soft); stroke: var(--line-strong); stroke-width: 1; }
.pole__tier .on { fill: var(--brand); stroke: var(--brand); }

.pole__head h3 { font-size: var(--step-3); }

.pole__intro {
  color: var(--ink-2);
  font-size: 1.05rem;
  max-width: 40rem;
  margin-bottom: 1.4rem;
}

.services {
  display: grid;
  gap: 0;
  counter-reset: none;
}

.service {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.2rem 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line);
}

.service__icon {
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
}

.service__icon svg { width: 18px; height: 18px; }

.service h4 {
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.35;
}

.service p {
  color: var(--ink-2);
  font-size: 0.97rem;
  line-height: 1.55;
}

.pole__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}

.pole__foot p { font-size: 0.92rem; color: var(--ink-3); max-width: 26rem; }

/* Mobile : accordéon */
@media (max-width: 900px) {
  .poles {
    display: block;
  }

  .pole {
    display: block;
    border-top: 1px solid var(--line);
  }

  .pole:last-child { border-bottom: 1px solid var(--line); }

  .pole__trigger,
  .pole:last-child .pole__trigger { border: 0; padding-left: 1rem; }

  .pole__panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: grid-template-rows 550ms var(--ease);
  }

  .pole.is-open .pole__panel {
    grid-template-rows: 1fr;
    transition: grid-template-rows 650ms var(--ease);
  }

  .pole__panel > .pole__inner {
    overflow: hidden;
    min-height: 0;
  }

  .pole__card {
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-1);
    border-radius: var(--r-m);
  }

  .pole__card::after { width: 120px; height: 100px; }
  .pole__head { margin-bottom: 1rem; }
  .pole__head { display: none; }
}

@media (max-width: 480px) {
  .service { grid-template-columns: 1fr; }
  .service__icon { grid-row: auto; margin-bottom: 0.4rem; }
  .pole__tier { display: none; }
  .pole__head { padding-right: 2rem; }
  .pole__foot .btn { width: 100%; }
}

/* ============================================================================
   Philosophie du contentieux : bandeau profond
   ========================================================================== */

.litigation {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 90% at 90% 0%, color-mix(in srgb, var(--deep-bg-2) 90%, transparent), transparent 70%),
    var(--deep-bg);
  color: var(--deep-ink);
}

.litigation .kicker { color: var(--deep-accent); }
.litigation .section-head__lead { color: var(--deep-ink-2); }

/* Grande pyramide hachurée en fond */
.litigation__art {
  position: absolute;
  z-index: -1;
  right: -6%;
  bottom: -2px;
  width: min(62vw, 760px);
  aspect-ratio: 1.15;
  background: repeating-linear-gradient(0deg, rgba(141, 178, 255, 0.12) 0 1px, transparent 1px 12px);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translate3d(0, var(--py, 0px), 0);
}

.litigation__path {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Trait qui relie les deux phases */
.litigation__path::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 34px;
  right: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--deep-accent), rgba(141, 178, 255, 0.2));
  transform-origin: left;
}

.js .litigation__path::before {
  transform: scaleX(0);
  transition: transform 1400ms var(--ease) 200ms;
}

.js .litigation__path.is-visible::before { transform: none; }

.phase {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1rem;
}

.phase__node {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--deep-bg);
  border: 1px solid var(--deep-accent);
  color: var(--deep-accent);
}

.phase__node svg { width: 26px; height: 26px; }

.phase--primary .phase__node {
  background: var(--deep-accent);
  color: var(--uce-navy);
  box-shadow: 0 0 0 8px rgba(141, 178, 255, 0.12);
}

.phase__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--deep-accent);
  margin-top: 0.5rem;
}

.phase__card {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border-radius: var(--r-l);
  border: 1px solid var(--deep-line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
  transition: border-color 400ms var(--ease), transform 500ms var(--ease);
}

.phase__card:hover { border-color: rgba(141, 178, 255, 0.45); transform: translateY(-4px); }

.phase h3 {
  font-size: var(--step-2);
  margin-bottom: 0.8rem;
  color: #FFFFFF;
}

.phase p { color: var(--deep-ink-2); font-size: 1.02rem; line-height: 1.65; }

.phase p strong {
  color: #FFFFFF;
  font-weight: 650;
  background: linear-gradient(0deg, rgba(141, 178, 255, 0.35), rgba(141, 178, 255, 0.35)) no-repeat 0 92% / 100% 0.32em;
}

.phase__bodies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 1.1rem;
}

.phase__bodies li {
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--deep-line);
  font-size: 0.82rem;
  color: var(--deep-ink);
}

.litigation__quote {
  margin-top: var(--space-xl);
  max-width: 46rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--deep-ink);
}

.litigation__quote footer {
  margin-top: 0.8rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.88rem;
  color: var(--deep-ink-2);
}

@media (max-width: 820px) {
  .litigation__path { grid-template-columns: 1fr; gap: 2rem; }
  .litigation__path::before {
    top: 34px;
    bottom: 34px;
    left: 34px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--deep-accent), rgba(141, 178, 255, 0.2));
    transform-origin: top;
  }
  .js .litigation__path::before { transform: scaleY(0); }
  .js .litigation__path.is-visible::before { transform: none; }
  .phase { grid-template-columns: 68px 1fr; column-gap: 1rem; }
  .phase__node { grid-row: span 2; }
  .phase__label { margin-top: 1.4rem; }
  .phase__card { grid-column: 2; }
}

@media (max-width: 480px) {
  .phase { grid-template-columns: 1fr; }
  .phase__node { grid-row: auto; width: 56px; height: 56px; }
  .phase__label { margin-top: 0; }
  .phase__card { grid-column: 1; }
  .litigation__path::before { display: none; }
}

/* ============================================================================
   Expertises complémentaires
   ========================================================================== */

.extras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}

@media (max-width: 1180px) {
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.extra {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r-m);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease), border-color 400ms var(--ease);
}

.extra::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease);
}

.extra:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
}

.extra:hover::before { transform: scaleX(1); }

.extra__icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--brand);
  margin-bottom: 0.5rem;
  transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms;
}

.extra:hover .extra__icon { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.extra__icon svg { width: 24px; height: 24px; }

.extra__cat { font-size: 0.85rem; font-weight: 600; color: var(--brand); }
.extra h3 { font-size: var(--step-2); }
.extra p { color: var(--ink-2); }
.extra p strong { color: var(--ink); font-weight: 650; }

@media (max-width: 900px) {
  .extras { grid-template-columns: 1fr; }
  .extra { grid-template-columns: auto 1fr; column-gap: 1.25rem; }
  .extra__icon { grid-row: span 3; margin-bottom: 0; }
}

@media (max-width: 480px) {
  .extra { grid-template-columns: 1fr; }
  .extra__icon { grid-row: auto; }
}

/* ============================================================================
   Pourquoi nous choisir
   ========================================================================== */

.why__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-xl);
  align-items: start;
}

.why__intro {
  position: sticky;
  top: calc(var(--header-h) + 40px);
  display: grid;
  gap: 1.5rem;
}

.why__team {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--r-m);
  background: var(--brand-soft);
  color: var(--ink);
}

.why__team p { font-size: 1.02rem; line-height: 1.6; }

.why__disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.why__disciplines li {
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
}

.values { border-top: 1px solid var(--line); }

.value {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding: clamp(1.4rem, 3vw, 2rem) 0.25rem;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

.value::before {
  content: "";
  position: absolute;
  inset: 0 -1rem;
  z-index: -1;
  border-radius: var(--r-s);
  background: var(--surface);
  opacity: 0;
  transform: scaleY(0.6);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease);
}

.value:hover::before { opacity: 1; transform: none; }

.value h3 {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  min-width: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  overflow-wrap: anywhere;
  transition: color 300ms var(--ease), transform 500ms var(--ease);
}

.value h3::before {
  content: "";
  width: 11px;
  height: 10px;
  flex-shrink: 0;
  background: var(--brand);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform: translateY(-0.1em);
  transition: transform 500ms var(--ease);
}

.value:hover h3 { color: var(--brand); }
.value:hover h3::before { transform: translateY(-0.1em) rotate(180deg); }

.value p { color: var(--ink-2); font-size: 1.02rem; }

@media (max-width: 960px) {
  .why__grid { grid-template-columns: 1fr; }
  .why__intro { position: static; }
}

@media (max-width: 560px) {
  .value { grid-template-columns: 1fr; }
  .value::before { inset: 0 -0.5rem; }
}

/* ============================================================================
   Devenir expert-partenaire
   ========================================================================== */

.partner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  padding: clamp(1.75rem, 5vw, 4.5rem);
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.partner .pattern {
  z-index: -1;
  -webkit-mask-image: var(--zellige), linear-gradient(90deg, transparent 40%, #000);
  mask-image: var(--zellige), linear-gradient(90deg, transparent 40%, #000);
  -webkit-mask-size: 60px 60px, 100% 100%;
  mask-size: 60px 60px, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.partner h2 { font-size: var(--step-4); margin: 1.1rem 0 1.2rem; }
.partner__intro { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 1.8rem; }

.partner__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

.commitments {
  display: grid;
  gap: 0.85rem;
}

.commitments li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 0.75rem;
  align-items: start;
  color: var(--ink-2);
}

.commitments svg {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
}

.profiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 2rem;
}

.profiles li {
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 0.93rem;
  font-weight: 500;
  transition: border-color 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease), transform 400ms var(--ease);
}

.profiles li:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
}

.partner__cta {
  display: grid;
  gap: 0.8rem;
  padding: 1.4rem;
  border-radius: var(--r-m);
  background: var(--bg-alt);
}

.partner__cta p { font-size: 0.95rem; color: var(--ink-2); }
.partner__cta a.mail { font-weight: 700; color: var(--brand); overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .partner { grid-template-columns: 1fr; gap: var(--space-l); }
}

@media (max-width: 480px) {
  .partner__cta .btn { width: 100%; }
}

/* ============================================================================
   Comment nous solliciter : les quatre étapes
   ========================================================================== */

.method__platform {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.9rem 0.45rem 0.5rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.9rem;
  font-weight: 600;
  width: fit-content;
}

.method__platform > span:first-child {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
}

.method__platform svg { width: 14px; height: 14px; }

.steps {
  --p: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

/* Rail + remplissage piloté par le défilement */
.steps__rail {
  position: absolute;
  top: 31px;
  left: 32px;
  right: calc(25% - 32px);
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}

.steps__rail span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand);
  transform-origin: left;
  transform: scaleX(var(--p));
}

.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.75rem;
}

.step__num {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 450;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  color: var(--ink-3);
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease), color 500ms var(--ease), transform 500ms var(--ease);
}

.step.is-active .step__num {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: scale(1.04);
}

.step h3 {
  margin-top: 0.75rem;
  font-size: var(--step-2);
}

.step p { color: var(--ink-2); font-size: 0.98rem; }

/* Deux portes de sortie de la méthode : le client, l'expert partenaire. */
.next-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin-top: var(--space-xl);
}

.next-step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 0.5rem;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  padding-right: clamp(3.75rem, 7vw, 5rem);
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: transform 450ms var(--ease), box-shadow 450ms var(--ease), border-color 350ms var(--ease);
}

.next-step::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease);
}

.next-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: transparent;
}

.next-step:hover::before { transform: scaleX(1); }

.next-step__label { font-size: 0.85rem; font-weight: 600; color: var(--brand); }

.next-step__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.2;
}

.next-step__go {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 2.5vw, 1.8rem);
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  color: var(--brand);
  transition: background-color 350ms var(--ease), color 350ms var(--ease), border-color 350ms var(--ease), transform 450ms var(--ease);
}

.next-step__go svg { width: 18px; height: 18px; }

.next-step:hover .next-step__go {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
  transform: translateX(3px);
}

@media (max-width: 760px) {
  .next-steps { grid-template-columns: 1fr; }
}

.method__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: var(--space-xl);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--surface);
}

.method__cta p { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.25; max-width: 34rem; }

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .steps__rail {
    top: 32px;
    bottom: 32px;
    left: 31px;
    right: auto;
    width: 2px;
    height: auto;
  }
  .steps__rail span { transform-origin: top; transform: scaleY(var(--p)); }
  .step { grid-template-columns: 64px 1fr; column-gap: 1.25rem; }
  .step__num { grid-row: span 2; }
  .step h3 { margin-top: 0.9rem; }
}

@media (max-width: 480px) {
  .method__cta .btn { width: 100%; }
}

/* ============================================================================
   Contact
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: var(--space-l);
  justify-items: center;
  text-align: center;
}

.contact__intro { max-width: 46rem; }

.contact__intro h2 { margin: 1.1rem 0 1.1rem; }
.contact__intro .lead { margin-bottom: 2rem; }

.coords {
  display: grid;
  border-top: 1px solid var(--line);
}

.coord {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 0.1rem 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.coord__icon {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
}

.coord__icon svg { width: 20px; height: 20px; }

.coord dt { font-size: 0.82rem; color: var(--ink-3); font-weight: 500; }

.coord dd {
  font-weight: 600;
  font-feature-settings: "tnum";
  overflow-wrap: anywhere;
}

.coord dd a { transition: color 250ms var(--ease); }
.coord dd a:hover { color: var(--brand); }

.contact__form {
  position: relative;
  width: min(100%, 860px);
  text-align: left;
  padding: clamp(1.4rem, 4vw, 2.75rem);
  border-radius: var(--r-l);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.contact__form h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.contact__form > p { color: var(--ink-2); font-size: 0.95rem; margin-bottom: 1.6rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
}

.form-grid .span-2 { grid-column: 1 / -1; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.4rem;
}

.form-actions .field__hint { max-width: 22rem; }

.form-status {
  display: none;
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-s);
  font-size: 0.92rem;
}

.form-status.is-error {
  display: block;
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  color: var(--danger);
}

/* État de succès : remplace le formulaire */
.form-success {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 1rem 0;
  animation: successIn 700ms var(--ease);
}

@keyframes successIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.form-success__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--success) 14%, transparent);
  color: var(--success);
}

.form-success__icon svg { width: 30px; height: 30px; }

.form-success__icon path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw 700ms var(--ease) 250ms forwards;
}

@keyframes draw { to { stroke-dashoffset: 0; } }

.form-success h3 { font-size: var(--step-3); }
.form-success p { color: var(--ink-2); max-width: 32rem; }

@media (max-width: 960px) {
  .contact__grid { justify-items: stretch; text-align: left; }
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
}

/* ============================================================================
   Pied de page (carte Google Maps incluse)
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--deep-bg);
  color: var(--deep-ink-2);
}

/* ---------- Carte ---------- */

.footer-map {
  position: relative;
  background: var(--deep-bg);
  padding: clamp(0px, 3vw, 44px) 0;
}

/* Sur grand écran la carte est contenue dans la grille, comme le reste du
   site, au lieu de barrer toute la largeur. Elle redevient pleine largeur
   sur mobile, où c'est le format le plus lisible. */
.footer-map > .map {
  width: min(100%, calc(var(--container) + var(--gutter) * 2 - var(--gutter) * 2));
  margin-inline: auto;
  border-radius: var(--r-l);
  border: 1px solid var(--deep-line);
}

.map {
  position: relative;
  height: clamp(260px, 24vw, 360px);
  overflow: hidden;
  background: #0B1C42;
}

.map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(0.8);
  transition: opacity 900ms var(--ease), transform 1400ms var(--ease), filter 600ms var(--ease);
}

.map iframe.is-loaded { opacity: 1; transform: none; }
.map:hover iframe.is-loaded { filter: saturate(1); }

/* Fondu vers le pied de page : la carte s'y intègre au lieu d'être un bloc posé. */
.map::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(169, 184, 214, 0.12);
  background: linear-gradient(180deg, rgba(3, 10, 28, 0.45) 0%, transparent 22%, transparent 82%, rgba(3, 10, 28, 0.5) 100%);
}

/* Carte adaptée au thème sombre */
[data-theme="dark"] .map iframe {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.7) brightness(0.95) contrast(0.92);
}

[data-theme="dark"] .map:hover iframe.is-loaded {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.9) brightness(1) contrast(0.95);
}

/* Bouton d'itinéraire posé sur la carte */
.map__directions {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  min-height: 38px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  gap: 0.45rem;
  box-shadow: var(--shadow-3);
}

.map__directions svg { width: 15px; height: 15px; }

/* Aperçu avant consentement : plan stylisé + demande explicite */
.map__placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  text-align: center;
  color: var(--deep-ink);
  background: #0B1C42;
}

.map__placeholder svg.map__streets {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.map__consent {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  max-width: 26rem;
  padding: 1.25rem;
  border-radius: var(--r-m);
  background: rgba(4, 11, 30, 0.72);
  border: 1px solid var(--deep-line);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.map__consent p { font-size: 0.88rem; color: var(--deep-ink-2); }

.map__pin {
  width: 36px;
  height: 36px;
  color: var(--deep-accent);
  animation: pinBob 2.4s var(--ease-in-out) infinite;
}

@keyframes pinBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 720px) {
  .footer-map { padding: 0; }
  .footer-map > .map { width: 100%; border-radius: 0; border-inline: 0; }
  .map { height: 300px; }
  .map__directions { right: var(--gutter); left: auto; bottom: 16px; }
}

/* ---------- Corps du pied de page ---------- */

.footer-main {
  position: relative;
  padding-block: var(--space-2xl) var(--space-xl);
}

.footer-art {
  position: absolute;
  z-index: -1;
  right: max(-60px, calc((100% - var(--container)) / 2 - 150px));
  bottom: 0;
  width: clamp(180px, 22vw, 300px);
  color: rgba(141, 178, 255, 0.08);
  pointer-events: none;
}

.footer-main { padding-block: var(--space-xl); }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-l);
}

.footer-brand .brand__mark { color: var(--deep-accent); }
.footer-brand .brand__name { color: #FFFFFF; }
.footer-brand .brand__sub { color: var(--deep-ink-2); }

.footer-brand p {
  margin-top: 1.2rem;
  max-width: 22rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--deep-ink);
}

.footer-col h2 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: #FFFFFF;
  margin-bottom: 1rem;
}

.footer-col ul { display: grid; gap: 0.6rem; }

.footer-col a,
.footer-col li {
  font-size: 0.93rem;
  line-height: 1.45;
}

.footer-col a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: color 250ms var(--ease), background-size 400ms var(--ease);
}

.footer-col a:hover { color: #FFFFFF; background-size: 100% 1px; }

.footer-col .small { display: block; font-size: 0.78rem; color: rgba(169, 184, 214, 0.7); }

.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--deep-line);
}

.footer-cta h2 {
  max-width: 40rem;
  color: #FFFFFF;
  font-size: var(--step-4);
}

/* Trois portes de sortie : contact, questions, réseau de partenaires. */
.footer-cta__actions {
  display: grid;
  gap: 0.6rem;
  justify-items: stretch;
  min-width: min(300px, 100%);
}

.footer-cta__actions .btn { width: 100%; justify-content: space-between; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: var(--space-xl);
  padding-top: 1.5rem;
  border-top: 1px solid var(--deep-line);
  font-size: 0.85rem;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
}

.footer-bottom a,
.footer-bottom button { transition: color 250ms var(--ease); }
.footer-bottom a:hover,
.footer-bottom button:hover { color: #FFFFFF; }

.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.to-top span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--deep-line);
  transition: transform 400ms var(--ease), background-color 300ms var(--ease);
}

.to-top:hover span { transform: translateY(-3px); background: rgba(141, 178, 255, 0.12); }
.to-top svg { width: 16px; height: 16px; }

/* Apparition du pied de page */
.js .site-footer .footer-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js .site-footer .footer-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-cta .btn { width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; padding-bottom: 72px; }
}

/* ============================================================================
   Questions fréquentes
   <details> natif : accessible au clavier, fonctionne sans JavaScript, et
   lisible par les moteurs de recherche (balisage FAQPage associé).
   ========================================================================== */

.faq__list {
  display: grid;
  border-top: 1px solid var(--line);
}

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
  transition: color 250ms var(--ease);
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--brand); }

.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-top: 0.1rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(var(--brand), var(--brand)) center / 13px 1.6px no-repeat,
    linear-gradient(var(--brand), var(--brand)) center / 1.6px 13px no-repeat;
  transition: transform 450ms var(--ease), background-size 350ms var(--ease), border-color 300ms var(--ease);
}

.faq__item[open] summary::after {
  transform: rotate(180deg);
  background-size: 13px 1.6px, 0 13px;
  border-color: var(--brand);
}

.faq__answer {
  padding: 0 3.5rem 1.5rem 0.25rem;
  max-width: 62ch;
  color: var(--ink-2);
  line-height: 1.7;
  animation: faqIn 450ms var(--ease);
}

@keyframes faqIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
  .faq__item summary { font-size: 1.12rem; gap: 1rem; }
  .faq__answer { padding-right: 0; font-size: 0.97rem; }
}

/* ============================================================================
   Renvoi vers la page Questions fréquentes
   ========================================================================== */

.faq-teaser { padding-bottom: var(--space-2xl); }

.faq-teaser__card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 350ms var(--ease), box-shadow 450ms var(--ease), transform 450ms var(--ease);
}

.faq-teaser__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 500ms var(--ease);
}

.faq-teaser__card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}

.faq-teaser__card:hover::before { transform: scaleY(1); }

.faq-teaser__text { display: grid; gap: 0.7rem; max-width: 46rem; }

.faq-teaser__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.25;
}

.faq-teaser__go {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 650;
  color: var(--brand);
  white-space: nowrap;
}

.faq-teaser__go svg { width: 18px; height: 18px; transition: transform 400ms var(--ease); }
.faq-teaser__card:hover .faq-teaser__go svg { transform: translateX(4px); }


/* ============================================================================
   Carrousels
   Deux habillages, un seul script (js/carousel.js) :
   « shots » pour les photos en fondu, « carousel » pour le contenu qui défile.
   ========================================================================== */

.shots {
  position: relative;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.shots__track {
  position: relative;
  aspect-ratio: 21 / 9;
}

.shot {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  /* La photo qui sort ne disparaît qu'une fois l'entrante entièrement visible :
     plus de double image, ni de légendes qui se chevauchent. */
  transition: opacity 0ms linear 900ms, transform 1600ms var(--ease);
}

.shot.is-active {
  opacity: 1;
  transform: none;
  z-index: 1;
  transition: opacity 900ms var(--ease), transform 1600ms var(--ease);
}

.shot figcaption { transition: opacity 250ms var(--ease); }
.shot:not(.is-active) figcaption { opacity: 0; }

.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

[data-theme="dark"] .shot img { filter: brightness(0.88) saturate(0.9); }

.shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.25rem 1rem;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1.4;
  background: linear-gradient(180deg, transparent, rgba(4, 11, 30, 0.82));
}

.shots__dots {
  position: absolute;
  z-index: 2;
  right: 1rem;
  top: 1rem;
  display: flex;
  gap: 0.4rem;
}

.shots__dots button {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.75);
  transition: transform 350ms var(--ease), background-color 300ms var(--ease);
}

.shots__dots button[aria-current="true"] { background: #fff; transform: scale(1.35); }


@media (max-width: 720px) {
  .shots__track { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .shot { transition: opacity 1ms; transform: none; }
}

/* ---------- Carrousel de contenu : les expertises complémentaires ---------- */

.carousel { position: relative; }

.carousel__viewport { overflow: hidden; border-radius: var(--r-m); }

.carousel__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 700ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

.carousel__track > * { flex: 0 0 100%; min-width: 0; }

.carousel__nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.carousel__dots { display: flex; gap: 0.45rem; }

.carousel__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}

.carousel__dot.is-current { background: var(--brand); transform: scale(1.25); }
.carousel__dot:hover { background: var(--brand-hi); }

.carousel__arrows { display: flex; gap: 0.5rem; }

.carousel__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--surface);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease);
}

.carousel__arrow svg { width: 17px; height: 17px; }
.carousel__arrow--prev svg { transform: rotate(180deg); }
.carousel__arrow:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

.extras-carousel .carousel__viewport {
  border: 1px solid var(--line);
  background: var(--surface);
}

.extra-slide {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem 1.75rem;
  align-items: start;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  min-height: 215px;
}

.extra-slide__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: var(--brand);
}

.extra-slide__icon svg { width: 26px; height: 26px; }
.extra-slide__cat { font-size: 0.85rem; font-weight: 600; color: var(--brand); }
.extra-slide h3 { font-size: var(--step-2); margin: 0.2rem 0 0.6rem; }
.extra-slide p { color: var(--ink-2); max-width: 46rem; }
.extra-slide p strong { color: var(--ink); font-weight: 650; }

@media (max-width: 560px) {
  .extra-slide { grid-template-columns: 1fr; min-height: 260px; }
  .carousel__arrows { display: none; }
  .carousel__nav { justify-content: center; }
}

/* ---------- Photos en tête de page (FAQ, partenaires) ----------
   Bureau : cadre à droite du titre et du paragraphe d'introduction.
   Mobile : cadre pleine largeur, placé juste après le paragraphe,
   avec ses commandes sous l'image. */
.page-hero:has(.page-shots) .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.page-hero__text { min-width: 0; }

.page-shots {
  align-self: center;
  width: 100%;
  /* Le cadre porte l'image seule ; les commandes vivent en dessous. */
  overflow: visible;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.page-shots .shots__track {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}

.page-shots .shot figcaption { font-size: 0.82rem; padding: 2rem 1rem 0.85rem; }

/* Commandes sous l'image : flèches de part et d'autre, puces au centre */
.shots__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.9rem;
}

.page-shots .shots__dots {
  position: static;
  display: flex;
  gap: 0.5rem;
}

.page-shots .shots__dots button {
  width: 10px;
  height: 10px;
  background: var(--line-strong);
  border: 0;
}

.page-shots .shots__dots button[aria-current="true"] {
  background: var(--brand);
  transform: scale(1.3);
}

@media (max-width: 900px) {
  .page-hero:has(.page-shots) .container { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}

@media (max-width: 720px) {
  .page-hero:has(.page-shots) .container { grid-template-columns: 1fr; }
  .page-shots { margin-top: 1.75rem; max-width: none; }
  .page-shots .shots__track { aspect-ratio: 4 / 3; }
  .page-shots .shot figcaption { font-size: 0.9rem; padding: 2.4rem 1.1rem 1rem; }
}


/* ============================================================================
   Carrousels : confort de manipulation
   - Le texte d'un carrousel ne se sélectionne pas : un glisser, un double-clic ou
     un appui prolongé ne le surligne plus, et ne bloque plus le clic suivant.
   - touch-action: pan-y réserve le geste VERTICAL au navigateur, qui fait alors
     défiler la page depuis n'importe quel point, texte compris. Seul le geste
     horizontal est traité par le carrousel.
   ========================================================================== */

[data-carousel] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y pinch-zoom;
}

[data-carousel] img { -webkit-user-drag: none; user-drag: none; }
[data-carousel] button { touch-action: manipulation; }

/* Puces : zone de clic de 26 px (le minimum recommandé est 24 px), point visible de 9 px.
   Le point est dessiné par ::before, ce qui garde un rond parfait. */
.carousel__dot,
.shots__dots button,
.page-shots .shots__dots button {
  position: relative;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  /* Carré : un bouton rond n'est cliquable que dans son cercle, ses coins ne répondraient pas.
     Le rond visible est dessiné par ::before. */
  border-radius: 0;
  background: none;
  transform: none;
}

.carousel__dot::before,
.shots__dots button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease);
}

.carousel__dot:hover::before,
.shots__dots button:hover::before { background: var(--brand-hi, var(--brand)); }

.carousel__dot.is-current,
.shots__dots button[aria-current="true"],
.page-shots .shots__dots button[aria-current="true"] {
  background: none;
  transform: none;
}

.carousel__dot.is-current::before,
.shots__dots button[aria-current="true"]::before {
  background: var(--brand);
  transform: scale(1.3);
}

.carousel__dots,
.page-shots .shots__dots { gap: 0; }

/* Photos : puces seules sous l'image, centrées */
.shots__controls { justify-content: center; }

/* Diapositive à deux paragraphes (pôle organisation & supervision comptables) */
.extra-slide p + p { margin-top: .75em; }