/**
 * site.css — habillage du site vitrine.
 * unrecon-theme.css est importé AVANT et reste la source unique :
 * ici, uniquement des var(--token), jamais une valeur en dur.
 * Les composants reprennent le balisage de unrecon-moodboard.html.
 */

@font-face {
  font-family: 'Nexa';
  src: url('./fonts/Nexa-Light.woff2') format('woff2');
  font-weight: 300;            /* Nexa n'existe qu'en Light */
  font-style: normal;
  font-display: swap;
}

/* Inter et JetBrains Mono, variables, auto-hébergées : aucune requête vers un
   tiers au rendu. Sous-ensembles latin et latin-ext seulement — le site est
   en fr/en/de/it. Ajouter un sous-ensemble ici si une langue l'exige. */
@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('./fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('./fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
p, figure, blockquote { margin: 0 }
ul { margin: 0; padding: 0; list-style: none }
img, svg { max-width: 100% }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) }

.skip {
  position: absolute; left: -9999px; top: var(--s2);
  background: var(--ink); color: var(--on-ink);
  padding: var(--s3) var(--s4); border-radius: var(--r-md); z-index: 100;
}
.skip:focus { left: var(--s4) }

.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-3);
}

/* Signature : le double trait du U */
.mark { display: flex; gap: 3px; height: 22px; flex: none; align-items: flex-end }
.mark i { display: block; width: 4px; border-radius: var(--r-full) }
.mark i:first-child { background: var(--u-blue); height: 70% }
.mark i:last-child  { background: var(--u-cyan); height: 100% }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  border: 1px solid transparent; cursor: pointer; position: relative; overflow: hidden;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 11px 20px 11px 22px; border-radius: 8px;
  transition: all var(--t-fast) var(--ease);
}
.btn-primary { background: var(--ink); color: var(--on-ink) }
.btn-primary::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--u-gradient);
}
.btn-primary:hover { filter: brightness(1.35) }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); padding-left: 20px }
.btn-ghost:hover { border-color: var(--ring) }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-full);
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.b-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent) }
.b-info { color: var(--accent-on-tint); background: color-mix(in srgb, var(--accent) 14%, transparent) }

/* ---------- Barre ---------- */
header.bar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.bar-in {
  max-width: var(--container); margin: 0 auto;
  padding: var(--s3) var(--gutter); display: flex; align-items: center; gap: var(--s6);
}
.bar-in .logo { display: flex; align-items: center; color: var(--text) }
.bar-in .logo svg { height: 26px; width: auto; display: block }
.bar-in .links { display: flex; flex-wrap: wrap; gap: var(--s6); flex: 1 }
.bar-in .links a {
  font-size: 14px; color: var(--text-2); text-decoration: none;
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.bar-in .links a:hover { color: var(--text); border-bottom-color: var(--ring) }
.bar-in .langs { display: flex; gap: var(--s2) }
.bar-in .langs a {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-3); text-decoration: none;
  padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-full);
}
.bar-in .langs a:hover { color: var(--text); border-color: var(--ring) }
.bar-in .langs a[aria-current] { color: var(--text); border-color: var(--border-strong) }
.toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; flex: none;  /* 44 = le min-height des boutons du thème, sinon c'est un ovale */
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  border-radius: var(--r-full); cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.toggle:hover { border-color: var(--ring); color: var(--text) }
.toggle .ico { width: 20px; height: 20px }
.iconbtn {
  width: 44px; height: 44px; display: none; place-items: center;
  border: 0; background: none; color: var(--text-2); cursor: pointer; border-radius: var(--r-sm);
}
.iconbtn:hover { color: var(--text); background: var(--surface-2) }
.ico { width: 24px; height: 24px; stroke-width: 2; fill: none; stroke: currentColor }

/* ---------- Menu plein écran (mobile) ---------- */
.ov {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  padding: var(--s3) var(--gutter) var(--s6); background: var(--bg); color: var(--text);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.ov.on { opacity: 1; pointer-events: auto; transform: none }
.ov .oh { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s6) }
.ov .oh .logo { flex: 1; color: var(--text) }
.ov .oh .logo svg { height: 24px; width: auto; display: block }
.ov nav { display: flex; flex-direction: column; flex: 1 }
.ov nav a {
  font-family: var(--font-display); font-weight: 300; font-size: 27px; line-height: 1.1;
  color: inherit; text-decoration: none; padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.ov .foot { display: flex; flex-direction: column; gap: var(--s3); padding-top: var(--s4) }
body.locked { overflow: hidden }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: var(--s24) 0 var(--s16) }
.hero .ghost {
  position: absolute; right: -60px; top: -40px; width: 360px;
  opacity: .06; pointer-events: none; color: var(--text);
}
.hero h1 {
  font-size: clamp(40px, 7vw, 86px); line-height: 1.02;
  letter-spacing: -.015em; max-width: 16ch; margin-top: var(--s4);
}
.hero h1 em {
  font-style: normal; background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { margin-top: var(--s6); max-width: var(--measure); font-size: 17px; color: var(--text-2) }
.hero .acts { margin-top: var(--s8); display: flex; flex-wrap: wrap; gap: var(--s3) }
.meta { display: flex; flex-wrap: wrap; gap: var(--s2) }
.hero .meta { margin-top: var(--s8) }
.chip {
  font-family: var(--font-mono); font-size: 12px; padding: 5px 11px;
  border: 1px solid var(--border); border-radius: var(--r-full); color: var(--text-2);
}

/* ---------- Sections ---------- */
section { padding: var(--s16) 0; border-top: 1px solid var(--border) }
.sec-head { margin-bottom: var(--s12) }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -.01em; margin-top: var(--s2) }
.sec-head p { color: var(--text-2); margin-top: var(--s3); max-width: 60ch }

.grid { display: grid; gap: var(--s4) }
.g2 { grid-template-columns: repeat(2, 1fr) }
.g3 { grid-template-columns: repeat(3, 1fr) }
.g4 { grid-template-columns: repeat(4, 1fr) }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--shadow-sm);
}
.card h3 { font-size: 20px; margin-bottom: var(--s2) }
.card p { color: var(--text-2); font-size: 14px }
.card .num {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-3);
  display: block; margin-bottom: var(--s3);
}

/* ---------- Statistiques ---------- */
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s4);
}
.stat .val {
  font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1.1;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.stat .val small { font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--text-3); margin-left: 3px }
.stat .lbl {
  display: block; margin-top: var(--s1);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}

/* ---------- Couleurs des services et des chiffres ----------
   Une teinte de la palette par carte (--k). Le texte teinté est mélangé à --text :
   assombri en clair, éclairci en sombre, jamais du cyan pur sur blanc (règle 1 du thème). */
.svc:nth-child(1), .stat:nth-child(1) { --k: var(--c1) }
.svc:nth-child(2), .stat:nth-child(2) { --k: var(--c2) }
.svc:nth-child(3), .stat:nth-child(3) { --k: var(--c3) }
.svc:nth-child(4), .stat:nth-child(4) { --k: var(--c4) }
.svc:nth-child(5) { --k: var(--c5) }
.svc:nth-child(6) { --k: var(--accent-2) }  /* pas --c7 ni --c8 : la page a des badges de statut (règle 4 du thème) */

.svc, .stat { position: relative; overflow: hidden; isolation: isolate }
.svc {
  transition: transform var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
/* Halo de la teinte dans le coin, qui envahit la carte au survol. */
.svc::before {
  content: ""; position: absolute; z-index: -1; top: -90px; right: -90px;
  width: 200px; height: 200px; border-radius: 50%;
  background: color-mix(in srgb, var(--k) 16%, transparent);
  transition: transform .5s var(--ease);
}
.svc .num {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-full);
  font-weight: 600; color: color-mix(in srgb, var(--k) 70%, var(--text));
  background: color-mix(in srgb, var(--k) 14%, transparent);
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
.svc:hover, .svc:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--k) 55%, var(--border));
  box-shadow: 0 12px 32px -12px color-mix(in srgb, var(--k) 45%, transparent);
}
.svc:hover::before, .svc:focus-within::before { transform: scale(4.5) }
.svc:hover .num { background: color-mix(in srgb, var(--k) 26%, transparent) }

.stat {
  border-color: color-mix(in srgb, var(--k) 30%, var(--border));
  background: linear-gradient(to top, color-mix(in srgb, var(--k) 12%, var(--surface)), var(--surface) 70%);
}
.stat .val { color: color-mix(in srgb, var(--k) 70%, var(--text)) }

/* Les chiffres montent en place quand ils entrent à l'écran. Défilement natif du
   navigateur, sans JavaScript ; ailleurs ils s'affichent simplement. */
@supports (animation-timeline: view()) {
  .stat .val, .stat .lbl {
    animation: stat-in linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
  .stat .lbl { animation-range: entry 25% cover 35% }
}
@keyframes stat-in { from { opacity: 0; transform: translateY(14px) } }

/* ---------- Tableau infrastructure ---------- */
.data { width: 100%; border-collapse: collapse; font-size: 13.5px }
.data th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3);
  padding: 0 var(--s3) var(--s2) 0; border-bottom: 1px solid var(--border);
}
.data td { padding: 13px var(--s3) 13px 0; border-bottom: 1px solid var(--border); color: var(--text-2) }
.data tr:last-child td { border-bottom: 0 }
.data td:first-child { color: var(--text); font-weight: 500 }
.data td em { font-style: normal; color: var(--text-3) }
.note { margin-top: var(--s6); font-size: 13px; color: var(--text-3); max-width: 60ch }

/* ---------- Témoignage ---------- */
blockquote.quote { border-left: 2px solid transparent; border-image: var(--u-gradient) 1; padding-left: var(--s6) }
blockquote.quote p { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.4 }
blockquote.quote footer { margin-top: var(--s4); font-size: 13px; color: var(--text-3) }
blockquote.quote footer b { color: var(--text); font-weight: 600 }
blockquote.quote footer a { color: inherit }

/* Avis : une rangée défilante, un avis par cadre. scroll-snap fait tout le travail, le JS n'ajoute que les flèches. */
.reviews {
  margin-top: var(--s6); display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--s8);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none }
.reviews > .quote { scroll-snap-align: start; align-self: center }
.reviews .stars { display: block; margin-bottom: var(--s3); color: var(--accent); letter-spacing: .15em }
.reviews-bar { margin-top: var(--s6); display: flex; align-items: center; justify-content: space-between; gap: var(--s4) }
.tp-score { font-size: 14px; color: var(--text-2); text-decoration: none }
.tp-score b { color: var(--text) }
.tp-score:hover { text-decoration: underline }
.reviews-nav { display: flex; gap: var(--s2) }
.reviews-nav[hidden] { display: none }
.reviews-nav [data-dir="-1"] .ico { transform: rotate(90deg) }
.reviews-nav [data-dir="1"] .ico { transform: rotate(-90deg) }
.reviews-nav button:disabled { opacity: .4; pointer-events: none }
@media (prefers-reduced-motion: reduce) { .reviews { scroll-behavior: auto } }

/* ---------- Pied de page ---------- */
footer.site { border-top: 1px solid var(--border); padding: var(--s12) 0; background: var(--bg-sub) }
footer.site .row { display: flex; flex-wrap: wrap; gap: var(--s6); align-items: flex-start }
footer.site .col { display: flex; flex-direction: column; gap: var(--s3) }
footer.site .col:first-child { flex: 1; min-width: 220px }
footer.site .logo { color: var(--text) }
footer.site .logo svg { height: 24px; width: auto; display: block }
footer.site p, footer.site a { font-size: 13px; color: var(--text-2) }
footer.site a { text-decoration: none }
footer.site a:hover { color: var(--accent) }
footer.site .legalline { margin-top: var(--s8); font-size: 12px; color: var(--text-3) }

/* ---------- Rupture ---------- */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, 1fr) }
  .g3 { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px) {
  .bar-in .links, .bar-in .toggle, .bar-in .btn, .bar-in .langs { display: none }
  .iconbtn { display: grid }
  .g2, .g3 { grid-template-columns: 1fr }
  .stat { padding: var(--s3) }
  .stat .val { font-size: 26px }
  .hero { padding: var(--s16) 0 var(--s12) }
  .hero .ghost { display: none }
  section { padding: var(--s12) 0 }
  .sec-head { margin-bottom: var(--s8) }
  .data { display: block; overflow-x: auto; white-space: nowrap }
}
@media (min-width: 641px) { .ov { display: none } }

.ov[hidden] { display: none }

.ov .util { display: flex; gap: var(--s2); flex-wrap: wrap }
.ov .util a {
  font-size: 12.5px; color: var(--text-3); text-decoration: none;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-full);
}
.ov .util a[aria-current] { color: var(--text); border-color: var(--border-strong) }

/* ---------- Réalisations ---------- */
.work { display: flex; flex-direction: column }
/* Image à fond perdu en haut de la carte (marges négatives = padding de .card). Le cadre 16:10 fixe la
   hauteur, d'où l'absence de width/height sur l'<img>. */
.work-shot {
  margin: calc(-1 * var(--s6)) calc(-1 * var(--s6)) var(--s6); aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 1px solid var(--border); border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top }
#partenariats .work-shot img { object-position: center }  /* photo panoramique : le groupe est au milieu */
.work-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4) }
.work .year { font-family: var(--font-mono); font-size: 12px; color: var(--text-3) }
.work-foot { margin-top: auto; padding-top: var(--s6) }
.work-foot a { color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none }
.work-foot a:hover { text-decoration: underline }
/* La carte d'appel : bordure de marque, pas d'aplat — un seul bouton principal par écran. */
.work.invite {
  background: var(--bg-sub); border-style: dashed; border-color: var(--border-strong);
  justify-content: center; align-items: center; text-align: center;
}
.work.invite p { max-width: 32ch }
.work.invite .work-foot { margin-top: 0 }

/* ---------- Jeux hébergés ---------- */
.games { margin-top: var(--s8); display: flex; flex-direction: column; gap: var(--s3) }
/* Bandeau qui défile en boucle : la liste est écrite quatre fois, la piste recule
   d'une copie puis repart, sans saut visible. Les bords s'effacent en fondu. */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee .track { display: flex; width: max-content; animation: marquee 22s linear infinite }
.marquee .chip { margin-right: var(--s2); white-space: nowrap }  /* marge et non gap : -25 % tombe juste */
/* Icône à gauche du nom. Le nom affiché est masqué aux lecteurs d'écran : l'alt le dit déjà. */
.marquee .chip { display: inline-flex; align-items: center; gap: var(--s2); padding-left: 6px }
.marquee .chip img { width: 22px; height: 22px; object-fit: contain }
.marquee:hover .track { animation-play-state: paused }
@keyframes marquee { to { transform: translateX(-25%) } }  /* quatre copies : une liste seule est plus courte que la section */
/* Sans mouvement, on revient à la liste simple. */
@media (prefers-reduced-motion: reduce) {
  .marquee { mask-image: none }
  .marquee .track { width: auto; flex-wrap: wrap; row-gap: var(--s2) }
  .marquee [aria-hidden] { display: none }
}
.chip.muted { color: var(--text-3); font-family: var(--font-body); font-style: italic }

/* ---------- Étapes : panneaux épinglés ---------- */
/* Trois panneaux `sticky` empilés : chacun se colle en haut de l'écran et le
   suivant vient le recouvrir en défilant. C'est le navigateur qui anime, il
   n'y a pas une ligne de JavaScript — et le retour en arrière est gratuit.
   La marge basse est le temps de pause : sans elle le panneau suivant
   commence à recouvrir dès le premier pixel et aucune phase n'est jamais
   seule à l'écran. Elle est transparente, le panneau collé la recouvre. */
.phases { padding-bottom: 0; --hold: 60svh }  /* --hold : la durée de pause de chaque phase */
.phases > .wrap { margin-bottom: var(--s12) }
.phases-stack { list-style: none; padding: 0; margin: 0 }
.phase:not(:last-child) { margin-bottom: var(--hold) }
/* La pause de la DERNIÈRE phase exige un vrai bloc en flux derrière elle.
   Ni sa propre marge basse ni un padding sur la liste ne marchent : un
   élément collé est borné par la boîte de CONTENU de son conteneur, et ces
   deux-là tombent en dehors. Sans ce bloc, la phase 3 repart avec la page
   sans jamais s'arrêter. Mesuré dans Chrome, pas déduit. */
.phases-stack::after { content: ""; display: block; height: var(--hold) }
.phase {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; align-content: center;
  background: var(--bg);  /* opaque, sinon le panneau précédent transparaît */
  border-top: 1px solid var(--border);
}
.phase-in { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); align-items: center }
.step-n {
  display: block; font-family: var(--font-display); font-weight: 300; font-size: 38px;
  line-height: 1;
  background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.phase-text h3 { font-size: clamp(28px, 4vw, 44px); margin: var(--s3) 0 }
.phase-text p { color: var(--text-2); font-size: 16px; max-width: 46ch }
.phase-media {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--bg-sub);
  color: var(--text-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
}
/* Schéma Mermaid inline (src/_includes/reseau.svg) : ses styles d'origine sont retirés, le thème décide. */
.phase-media:has(svg) { border-style: solid; padding: var(--s6) }
/* Les captures remplissent le cadre. En 3:2, plus large qu'elles, on ne rogne que le bas, jamais les côtés. */
.phase-media:has(img) { border-style: solid; overflow: hidden; aspect-ratio: 3 / 2 }
.phase-media img { width: 100%; height: 100%; object-fit: cover; object-position: top }
.phase-media .cluster rect { fill: none; stroke: var(--border-strong); stroke-dasharray: 4 3; rx: 8px }
.phase-media .cluster-label text { fill: var(--accent); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase }
.phase-media svg { width: 100%; height: auto; max-height: 100%; font-family: var(--font-body); font-size: 14px; color: var(--text) }
.phase-media svg p { margin: 0 }
.phase-media .label-container { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5px }
.phase-media .flowchart-link { stroke: var(--text-3); stroke-width: 1.5px; fill: none }
.phase-media .arrowMarkerPath { fill: var(--text-3); stroke: var(--text-3) }
.phase-media .edgeLabel text { fill: var(--text-2); font-family: var(--font-mono); font-size: 12px }
.phase-media .edgeLabel .background { fill: var(--bg-sub) }
@media (max-width: 860px) {
  .phase-in { grid-template-columns: 1fr; gap: var(--s6) }
  .phase-media { aspect-ratio: auto; height: 30svh }  /* la phase doit tenir dans un écran */
  .phase-media:has(img) { aspect-ratio: 3 / 2; height: auto }  /* plus bas que 30svh sur un téléphone */
}
/* Épingler, c'est du mouvement lié au défilement : on l'abandonne si l'on n'en veut pas. */
@media (prefers-reduced-motion: reduce) {
  .phase { position: static; min-height: 0; margin-bottom: 0; padding: var(--s12) 0 }
  .phases-stack::after { height: 0 }
}

/* ---------- FAQ ---------- */
/* <details> natif : pas une ligne de JavaScript. */
.faq { max-width: 820px }  /* une question ne se lit pas sur 1000 px */
.faq details { border-bottom: 1px solid var(--border) }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; cursor: pointer; list-style: none;
  font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px) }
.faq details[open] summary { color: var(--accent) }
.faq p { padding: 0 var(--s8) var(--s6) 0; max-width: var(--measure); color: var(--text-2) }

/* ---------- Tarifs ---------- */
.plan { position: relative; overflow: hidden; display: flex; flex-direction: column }
.plan .badge { align-self: center; margin-top: auto; margin-bottom: var(--s3); font-size: 13.5px; padding: 6px 16px }
.plan .badge::before { display: none }
.plan .badge + .btn { margin-top: 0 }
/* Le liseré de marque en dégradé, en masque : une bordure dégradée sans doublon d'élément. */
.plan.featured { border-color: transparent; box-shadow: var(--shadow-md) }
.plan.featured::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: var(--r-lg);
  background: var(--u-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.plan .price {
  font-family: var(--font-display); font-weight: 300; font-size: 42px;
  line-height: 1; margin: var(--s3) 0;
}
.plan .price small { font-family: var(--font-body); font-size: 13px; color: var(--text-3); font-weight: 500; margin-left: var(--s2) }
.plan ul { margin: var(--s4) 0 var(--s6); font-size: 14px; color: var(--text-2) }
.plan li { padding: 5px 0 5px 22px; position: relative }
.plan li::before {
  content: ""; position: absolute; left: 0; top: 14px;
  width: 10px; height: 2px; border-radius: 2px; background: var(--ring);
}
.plan .btn { margin-top: auto }

/* ---------- Pages légales ---------- */
.legal { padding: var(--s24) 0 }
.legal .wrap { max-width: var(--measure) }
.legal h1 { font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1.1 }
.legal .upd { margin-top: var(--s3); font-family: var(--font-mono); font-size: 12px; color: var(--text-3) }
.legal .lede { margin-top: var(--s8) }
.legal h2 {
  margin: var(--s16) 0 var(--s4); padding-top: var(--s6);
  border-top: 1px solid var(--border);
  font-size: 17px; font-weight: 600;
}
.legal p + p { margin-top: var(--s4) }
.legal p { color: var(--text-2); line-height: 1.65 }