/* =========================================================
   Qattane · feuille de style unique
   Bleu marine pour les titres et les chiffres, jaune du logo pour les accents (petits titres, barres, boutons),
   cartes à filet fin sans ombre, fonds en alternance simple.
   Thème clair par défaut ; le thème sombre (data-theme="dark" sur la racine, bleu nuit, jamais de fond teinté
   jaune) n'en change que les exceptions. Classes posées par les scripts : js (head de l'accueil), theme-wait (head),
   reveal, is-visible, is-counting, is-dragging, is-active, is-selected, is-subpage, active, form-preview-note (script.js),
   web-lines, web-line, web-dot (reseau.js).
   Ordre : polices, variables, base, composants partagés, sections dans l'ordre de la page, pages secondaires,
   apparitions, impression. Les variantes responsive suivent chaque composant.
   ========================================================= */

/* ---------- Polices (hébergées sur le site) : Bricolage Grotesque pour les titres, Instrument Sans pour le texte ---------- */

@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap;
  src: url("assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("assets/fonts/instrument-sans-latin.woff2") format("woff2");
  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;
}

/* ---------- Variables : thème clair, puis ce que le thème sombre change ---------- */

:root {
  /* Les deux couleurs de la marque */
  --marine: #1c2f6e;
  --jaune: #f5c542;
  /* Selon le thème */
  --marque: var(--marine);       /* titres, chiffres, logos : marine, blanc cassé en sombre */
  --sur-marque: #ffffff;         /* texte posé sur un fond --marque */
  --jaune-texte: #f2a900;        /* jaune en texte, plus soutenu pour rester lisible sur fond clair */
  --texte-signal: var(--marine); /* légende de logo survolée, mention à compléter : marine, jaune en sombre */
  --ink: #0e1630;                /* texte du lien d'évitement, posé sur le jaune */
  --bg: #f7f8fb;
  --bg-alt: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f3f5fa;
  --border: #dde2ec;
  --fil: #d3d9e6;                /* calendrier des dossiers types */
  --text: #0e1630;
  --muted: #59657f;
  --pale: #fef7e1;               /* jaune très pâle du haut de page et du contact */
  /* Polices */
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Formes et espaces */
  --radius: 22px;
  --radius-sm: 10px;
  --section: 72px;               /* un seul espace vertical pour toutes les sections */
  --card-pad: 24px;
  --gap-cartes: 20px;
  --gap-eyebrow: 20px;
  --gap-title: 16px;
  --gap-lead: 40px;
  --gap-sub: 64px;
  --gap-sub-after: 22px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --marque: #eef1f8;
  --sur-marque: #0a0f1e;
  --jaune-texte: #f5c542;
  --texte-signal: #f5c542;
  --ink: #0a0f1e;
  --bg: #0a0f1e;
  --bg-alt: #0e1528;
  --surface: #131b31;
  --surface-2: #1a243f;
  --border: #243152;
  --fil: #2c3a5e;
  --text: #eef1f8;
  --muted: #9aa6c2;
  --pale: var(--bg);
  color-scheme: dark;
}
@media (max-width: 979px) {
  :root { --section: 56px; }
}
@media (max-width: 639px) {
  :root { --gap-cartes: 16px; }
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 116px; }
@media (min-width: 1140px) {
  html { scroll-padding-top: 84px; }
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
  color: var(--text);
}
/* Pages courtes : le pied de page reste en bas de l'écran */
body > main { flex: 1 0 auto; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); line-height: 1.15; }
h1, h2 { font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; }
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; border-radius: 6px; }
/* Thème sombre : contour de focus en jaune, plus visible que le blanc cassé */
:root[data-theme="dark"] :focus-visible { outline-color: var(--jaune); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 50;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  background: var(--jaune);
  color: var(--ink);
}
.skip-link:focus { top: 12px; }
/* Texte réservé aux lecteurs d'écran et aux moteurs de recherche, invisible à l'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.nowrap { white-space: nowrap; }
/* Aperçu sur claude.ai : page masquée le temps de retrouver le thème choisi (1,5 s au plus) */
html.theme-wait body { opacity: 0; }
/* Images propres à un thème */
.only-dark { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
:root[data-theme="dark"] .only-light { display: none; }
@media (max-width: 559px) {
  .hide-sm { display: none; }
}
/* Petits téléphones : libellé court pour que l'en-tête tienne sur une ligne */
.show-xs { display: none; }
@media (max-width: 389px) {
  .hide-xs { display: none; }
  .show-xs { display: inline; }
}

/* ---------- Mise en page des sections ---------- */

.container { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 720px) {
  .container { padding: 0 32px; }
}
/* Grand écran : la grille s'élargit et les textes occupent toute sa largeur, pour rester sur peu de lignes */
@media (min-width: 1500px) {
  .container { max-width: 1360px; }
}
/* Même espace en haut et en bas de chaque section */
.section, .logos { padding: var(--section) 0; }
/* Clic dans le menu : le premier titre de chaque section arrive au même niveau sous la barre */
.section[id], .logos[id] { scroll-margin-top: -48px; }
@media (max-width: 979px) {
  .section[id], .logos[id] { scroll-margin-top: -32px; }
}
/* Alternance simple : le jaune pâle ouvre (haut de page) et ferme (contact) la page, gris clair et blanc entre les deux */
#temoignages, #ecosysteme { background: var(--bg); }
#offre, #exemples { background: var(--bg-alt); }
.section h2 { margin-bottom: var(--gap-title); }
.logos h2 { margin-bottom: var(--gap-lead); }
.section h2, .section .sub-title, .logos h2 { color: var(--marque); }
.section-lead { color: var(--muted); font-size: 1.06rem; line-height: 1.6; margin-bottom: var(--gap-lead); }
/* Sous-titre à l'intérieur d'une section : entre le titre de section et le titre de carte */
.sub-title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: var(--gap-sub) 0 var(--gap-sub-after);
}
/* Petit titre de section en jaune, précédé d'un point jaune */
.eyebrow {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: var(--gap-eyebrow);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--jaune-texte);
}
.eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  margin-top: calc(.8em - 5px);
  border-radius: 50%;
  background: var(--jaune-texte);
}
/* Un seul écart entre les cartes */
.grid-3, .grid-4, .cases, .quotes-cols, .quotes-group, .team-grid, .legal-grid, .web-col { gap: var(--gap-cartes); }
.grid-3, .grid-4 { display: grid; }
@media (min-width: 720px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Boutons : pilules, principal en jaune ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-inline: 1.3rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 .95rem/1.2 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}
.btn-lg { padding-block: .78rem; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; min-height: 36px; }
.btn-block { width: 100%; }
/* Texte sombre sur le jaune, dans les deux thèmes */
.btn-primary { background: var(--jaune); color: #0e1630; }
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-ghost { border: 1.5px solid color-mix(in srgb, var(--marque) 45%, var(--border)); color: var(--marque); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--marque); }
.icon-btn {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.icon-btn:hover { border-color: var(--muted); background: var(--surface); }

/* ---------- Cartes : toutes identiques, filet fin, sans ombre ---------- */

.card, .case, .contact-form, .legal-card, .faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.card, .case, .contact-form { transition: border-color .25s ease, box-shadow .25s ease; }
.card { padding: var(--card-pad); }
.card:hover, .case:hover { border-color: color-mix(in srgb, var(--marque) 35%, var(--border)); }
/* Thème clair : le survol prend le pas sur le contour jaune d'un témoignage sélectionné */
:root[data-theme="light"] .card:hover {
  border-color: color-mix(in srgb, var(--marque) 35%, var(--border));
  box-shadow: none;
}
.card h3, .card h4, .case-head h3 { margin-bottom: .5rem; letter-spacing: -0.01em; line-height: 1.3; }
.card h3, .case-head h3 { font-weight: 700; }
.card p { font-size: .95rem; line-height: 1.6; color: var(--muted); }
/* Un seul accent pour les cartes : un petit onglet jaune, calé sur le texte de la carte */
.commitments .card, .case, .contact-form, .legal-card { position: relative; }
.commitments .card::before, .case::before, .contact-form::before, .legal-card::before {
  content: "";
  position: absolute;
  left: var(--card-pad);
  top: 0;
  width: 44px;
  height: 6px;
  border-radius: 0 0 6px 6px;
  background: var(--jaune);
}

/* ---------- Barre de menu et logo ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: background .25s ease;
}
.nav-inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; min-height: 64px; }
/* Logo Qattane : le mot seul en bleu marine (blanc cassé en thème sombre), suivi d'un point jaune */
.brand {
  display: inline-flex;
  align-items: center;
  height: 64px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--marque);
}
/* Logo du pied de page : un peu plus petit en thème sombre, où le blanc cassé paraît plus grand */
.brand-sm { height: auto; }
:root[data-theme="dark"] .brand-sm { font-size: 1.25rem; }
.logo-mot { font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; line-height: 1; }
.logo-mot::after { content: "."; color: var(--jaune-texte); }
.nav-links {
  order: 3;
  display: flex;
  gap: 4px;
  width: 100%;
  margin-top: -4px;
  padding: 0 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { background: var(--surface-2); color: var(--text); }
.nav-links a.active { background: color-mix(in srgb, var(--jaune) 30%, transparent); color: var(--text); }
:root[data-theme="dark"] .nav-links a.active { background: var(--surface-2); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav-cta { display: none; }
.nav .icon-btn { width: 36px; height: 36px; }
.nav .icon-btn svg { width: 16px; height: 16px; }
/* Pages secondaires : en-tête sur une seule ligne */
.nav-inner:not(:has(.nav-links)) { flex-wrap: nowrap; }
@media (min-width: 560px) {
  .nav-cta { display: inline-flex; }
}
@media (max-width: 1139px) {
  /* Le menu défile dans sa bande : contour de focus vers l'intérieur pour qu'il ne soit pas coupé */
  .nav-links a:focus-visible { outline-offset: -3px; }
}
@media (min-width: 1140px) {
  .nav-inner { flex-wrap: nowrap; }
  .nav-links { order: 0; width: auto; overflow: visible; padding: 0; margin: 0; }
  .nav-contact { display: none; }
  /* Logo à gauche, menu au centre, actions à droite */
  .nav-inner:has(.nav-links) { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 32px; }
  .nav-inner:has(.nav-links) .brand { justify-self: start; }
  .nav-inner:has(.nav-links) .nav-links { justify-self: center; }
  .nav-inner:has(.nav-links) .nav-actions { justify-self: end; margin-left: 0; }
}
@media (max-width: 420px) {
  .nav-inner:not(:has(.nav-links)) { column-gap: 10px; }
  .nav-inner:not(:has(.nav-links)) .nav-actions { gap: 6px; }
}
@media (max-width: 359px) {
  .nav-inner:not(:has(.nav-links)) .btn-ghost { display: none; }
}

/* ---------- Haut de page : fond jaune très pâle, le texte seul. La section équipe vient se poser sur le bas du fond ---------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: var(--section) 0 calc(var(--section) + 64px);
  background: var(--pale);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero h1 {
  margin-bottom: 1.3rem;
  font-size: clamp(2.1rem, 3.4vw, 3rem);
  text-wrap: pretty;
  color: var(--marque);
}
.hero h1 .accent-text { color: var(--jaune-texte); }
/* Thème clair : sans effet sur le dessin, mais cette propriété écarte l'optimiseur de text-wrap: pretty de Chrome.
   Elle fixe donc la coupe validée du titre, visible entre 570 et 582 px de large : à ne pas retirer */
:root[data-theme="light"] .hero h1 .accent-text { -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lead { color: var(--muted); font-size: 1.12rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 979px) {
  .hero { padding-bottom: calc(var(--section) + 56px); }
}

/* ---------- Équipe : les cartes et les photos ouvrent le panneau, elles se voient dès l'arrivée sur la page ---------- */

/* Pas d'espace en bas : le panneau touche le bandeau « Et maintenant avec Qattane » */
#equipe { padding-top: 0; padding-bottom: 0; scroll-margin-top: 0; }
#equipe h2 { margin-top: var(--gap-lead); }
#equipe > .container {
  position: relative;
  z-index: 1;
  margin-top: -64px;
  padding-top: 32px;
  padding-bottom: 32px;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: var(--surface);
}
#ecosysteme .section-lead strong, #equipe .section-lead strong { color: var(--text); font-weight: 600; }
.team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.team-card, .team-stats { padding: var(--card-pad); border-radius: var(--radius); background: var(--surface-2); }
.team-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 18px;
  align-content: center;
  align-items: center;
}
.team-card > img {
  grid-row: 1 / span 4;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--surface-2), 0 0 0 5px var(--marque);
}
.team-name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--marque);
}
.team-role { margin-top: 2px; font-size: .9rem; color: var(--muted); }
.team-link { margin-top: 4px; font-size: .9rem; font-weight: 600; color: var(--marque); }
/* Mention « ex-Bpifrance », reprise dans la section contact */
.bpi-logo { display: inline-flex; flex-shrink: 0; gap: 4px; align-items: center; }
.bpi-logo img { height: 21px; width: auto; }
.bpi-ex {
  position: relative;
  top: -1px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
}
.team-card .bpi-logo { justify-self: start; margin-top: 8px; }
/* Chiffres Bpifrance */
.founders-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.founders-head p { font-family: var(--font-body); font-size: .9rem; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--marque); }
.founders-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.founders-stats div { display: flex; flex-direction: column-reverse; }
.founders-stats dd {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--marque);
}
.founders-stats dt { font-size: .85rem; color: var(--muted); }
.team-promise {
  margin-top: var(--gap-lead);
  padding-left: 18px;
  border-left: 4px solid var(--jaune);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--marque);
}
@media (max-width: 979px) {
  #equipe > .container { margin-top: -56px; padding-top: 20px; padding-bottom: 20px; border-radius: 22px 22px 0 0; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-stats { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .founders-stats dd { font-size: 1.5rem; }
}

/* ---------- Bandeau des chiffres ---------- */

.band {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.band-inner {
  display: grid;
  gap: 24px;
  align-items: center;
  padding-top: 32px;
  padding-bottom: var(--section);
}
.band-brand { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
.band-sub { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
/* Le mot Qattane, à la taille du menu */
.band-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--marque);
}
.band-stats { display: grid; gap: 22px 28px; align-items: stretch; }
.band-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.band-stats div::before {
  content: "";
  order: 3;
  width: 44px;
  height: 6px;
  margin-bottom: 4px;
  border-radius: 6px;
  background: var(--jaune);
}
.band-stats dd {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  color: var(--marque);
}
.band-stats dt { font-size: 1rem; line-height: 1.35; color: var(--muted); }
.band-stats strong { color: var(--text); font-weight: 600; }
/* « Au succès » occupe la même hauteur que les chiffres : les légendes commencent toutes au même niveau */
.band-stats .band-text dd {
  display: flex;
  align-items: flex-end;
  height: clamp(2.2rem, 4vw, 3rem);
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
}
.band-unit { font-size: .5em; letter-spacing: -0.01em; }
/* Les chiffres comptent jusqu'à leur valeur à l'apparition. Le vrai chiffre reste en place (il réserve la largeur) ; pendant l'animation il devient transparent et le compteur s'affiche par-dessus */
.count { position: relative; display: inline-block; }
.count.is-counting { color: transparent; }
.count.is-counting::after {
  content: attr(data-n);
  position: absolute;
  inset: 0 0 auto 0;
  text-align: right;
  color: var(--marque);
}
@media (min-width: 560px) {
  /* 4 chiffres : sur une ligne quand la place le permet, sinon deux par ligne */
  .band-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) and (max-width: 899px), (min-width: 1100px) {
  .band-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .band-inner { grid-template-columns: auto 1fr; gap: 48px; }
}

/* ---------- Logos des startups : tous en bleu marine (blanc cassé en thème sombre) ---------- */

.logos { overflow-x: clip; }
/* Bandes qui défilent sur toute la largeur de l'écran, jusqu'aux bords */
.marquees { display: grid; width: 100vw; margin-left: calc(50% - 50vw); gap: 6px; }
.marquee {
  display: flex;
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.marquee-track {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  padding-right: 16px;
  animation: marquee 58s linear infinite;
}
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 64s; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
/* Au clavier, la bande revient à sa place pour que le lien atteint reste visible (script.js la fait défiler) */
.marquee:has(a:focus-visible) .marquee-track { animation: none; }
.marquee-track li { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 180px; }
.marquee-track a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  border-radius: var(--radius-sm);
  transition: background .2s ease;
}
.marquee-track a:hover { background: var(--surface-2); }
/* Contour de focus vers l'intérieur : la bande coupe ce qui dépasse */
.marquee-track a:focus-visible { outline-offset: -3px; }
/* L'image reste invisible à l'écran, seule sa silhouette teintée se voit (elle revient à l'impression) */
.marquee-track img {
  height: auto;
  object-fit: contain;
  opacity: 0;
}
.logo-tint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  background: var(--marque);
  pointer-events: none;
}
.marquee-track a:hover .logo-tint { filter: brightness(.85); }
.logo-cap {
  margin-top: 2px;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}
.marquee-track li:hover .logo-cap { color: var(--texte-signal); }
@keyframes marquee { to { transform: translateX(-100%); } }
/* Téléphone : logos réduits (le cadre de chaque logo et l'espace entre eux aussi) ; même vitesse apparente */
@media screen and (max-width: 639px) {
  .marquee-track { gap: 12px; padding-right: 12px; animation-duration: 42s; }
  .marquee-reverse .marquee-track { animation-duration: 46s; }
  .marquee-track li { width: 130px; }
  .marquee-track a { height: 46px; }
  .logo-cap { font-size: .6875rem; white-space: nowrap; }
  .logo-tint { max-width: none; transform: translate(-50%, -50%) scale(.72); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { display: block; padding: 6px 16px; -webkit-mask-image: none; mask-image: none; }
  .marquee-track {
    flex-shrink: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 16px;
    padding: 0;
    animation: none;
  }
  .marquee-track[aria-hidden="true"] { display: none; }
  .marquee-track li { width: min(160px, calc(50% - 8px)); }
}

/* ---------- Offre et façon de travailler ---------- */

.step-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 800;
  background: var(--marque);
  color: var(--sur-marque);
}
.steps .step-num { justify-self: start; }
.steps > .card h3, .commitments .card h3 { color: var(--marque); }
/* Filet gauche après .card:hover : il garde sa couleur au survol en thème sombre */
.commitments .card { padding-top: calc(var(--card-pad) + 6px); border-left: 1px solid var(--border); }
.offre-cta { margin-top: var(--gap-lead); }
@media (min-width: 1000px) {
  .steps .card h3, .commitments .card h3 { min-height: 2.6em; }
}
@media (min-width: 720px) {
  @supports (grid-template-rows: subgrid) {
    /* Titres et textes alignés rangée par rangée : pas de vide sous un titre d'une seule ligne si sa rangée n'en a pas besoin */
    .steps > .card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .commitments > .card { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
    .steps .card h3, .commitments .card h3 { min-height: 0; }
  }
}

/* ---------- Témoignages : colonnes qui défilent verticalement ---------- */

.quotes-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 560px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent);
}
/* Sans JavaScript, l'animation CSS fait défiler les colonnes */
.quotes-col-track { animation: quotes-up 45s linear infinite; }
.quotes-col-down .quotes-col-track { animation-direction: reverse; animation-duration: 40s; }
.quotes-col:nth-child(3) .quotes-col-track { animation-duration: 50s; }
.quotes-cols:hover .quotes-col-track, .quotes-cols:focus-within .quotes-col-track { animation-play-state: paused; }
@keyframes quotes-up { to { transform: translateY(-50%); } }
.quotes-group { display: grid; padding-bottom: var(--gap-cartes); }
.quote { display: flex; flex-direction: column; justify-content: space-between; margin: 0; }
.quotes-group .quote { gap: 16px; }
.quotes-group .quote:focus-visible { outline-offset: -3px; }
.quote blockquote { margin: 0; line-height: 1.55; }
.quotes-group .quote blockquote { font-size: .95rem; }
.quote figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.quote figcaption > span:last-child { display: flex; flex-direction: column; }
.quote figcaption strong { color: var(--marque); }
.quote-avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
}
.quote-photo { overflow: hidden; border: 0; background: var(--marque); }
.quote-photo svg { display: block; width: 100%; height: 100%; }
.quote-role { font-size: .85rem; color: var(--muted); }
/* Défilement piloté par le script : un clic sur un avis arrête sa colonne, que l'on fait ensuite défiler à la main (molette, doigt, souris, flèches du clavier) */
.js .quotes-col-track { animation: none; will-change: transform; }
.js .quotes-col { cursor: grab; }
.js .quotes-col.is-dragging { cursor: grabbing; user-select: none; }
.js .quotes-col.is-active { touch-action: none; }
.js .quotes-group .quote { cursor: pointer; }
.quotes-group .quote.is-selected { border-color: var(--jaune); box-shadow: inset 0 0 0 1px var(--jaune); }
@media (max-width: 999px) {
  .quotes-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes-col:nth-child(3) { display: none; }
}
@media (max-width: 639px) {
  .quotes-cols { grid-template-columns: 1fr; height: 480px; }
  .quotes-col:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .quotes-cols { height: auto; -webkit-mask-image: none; mask-image: none; }
  .quotes-col { display: block !important; }
  .quotes-col-track { animation: none; }
  .quotes-group[aria-hidden="true"] { display: none; }
  /* Rien ne défile et le clic ne fait rien : curseur normal */
  .js .quotes-col, .js .quotes-group .quote { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 999px) {
  .quotes-cols { grid-template-columns: 1fr; }
}

/* ---------- Dispositifs et dossiers types ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li {
  padding: .55rem 1rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--border);
  background: var(--surface);
}
.note { color: var(--muted); font-size: .85rem; font-style: italic; margin-top: 20px; }
.cases { display: grid; }
.case { display: flex; flex-direction: column; overflow: hidden; }
.case-head { padding: calc(var(--card-pad) + 6px) var(--card-pad) 18px; }
.case-head h3 { color: var(--marque); }
.case-head p:not(.case-tag) { font-size: .95rem; line-height: 1.6; color: var(--muted); }
.case-tag {
  display: inline-block;
  margin-bottom: .6rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--jaune) 15%, transparent);
  color: var(--marque);
}
:root[data-theme="dark"] .case-tag { background: var(--surface-2); }
/* Calendrier des dossiers : le fil aboutit au point jaune de la décision */
.case-steps { flex: 1; padding: 6px var(--card-pad); border-top: 1px solid var(--border); }
.case-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  padding: 10px 0 10px 22px;
  border-bottom: 1px dashed var(--border);
  font-size: .9rem;
}
.case-steps li:last-child { border-bottom: 0; }
.case-steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(10px + .8em - 4.5px);
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--fil);
  border-radius: 50%;
  background: var(--surface);
}
.case-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 3.75px;
  width: 1.5px;
  top: calc(10px + .8em + 4.5px);
  bottom: calc(-10px - .8em + 3.5px);
  background: var(--fil);
}
.case-steps li:last-child::before { border: 0; background: var(--jaune); }
.case-steps span {
  padding-top: .1rem;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 700;
  color: var(--marque);
}
.case-stack {
  padding: 12px var(--card-pad) 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.case-stack div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 6px 0;
  font-size: .9rem;
}
.case-stack dt { color: var(--muted); }
.case-stack dd { font-family: var(--font-body); font-weight: 600; white-space: nowrap; }
.case-stack .total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
.case-stack .total dt { color: var(--text); font-weight: 600; }
.case-stack .total dd { font-size: 1.2rem; font-weight: 800; color: var(--marque); }
@media (min-width: 1000px) {
  .cases { grid-template-columns: repeat(3, 1fr); }
  /* Trois colonnes : présentation, calendrier et montants alignés d'un dossier à l'autre */
  .case-head h3 { min-height: 2.6em; }
  @supports (grid-template-rows: subgrid) {
    .cases > .case { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    /* Présentation alignée ligne à ligne : étiquette, titre, texte */
    .case-head { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .case-head .case-tag { justify-self: start; }
    .case-head h3 { min-height: 0; }
    /* Totaux sur la même ligne : le montant obtenu reste en bas de sa carte */
    .cases > .case .case-stack { display: flex; flex-direction: column; }
    .cases > .case .case-stack div:nth-last-child(2) { margin-bottom: 6px; }
    .cases > .case .total { margin-top: auto; }
  }
}

/* ---------- Écosystème : la toile. Qattane au centre, des lignes droites vers chaque famille (tracées par reseau.js) ---------- */

#ecosysteme .section-lead { margin-bottom: 14px; }
#ecosysteme .section-lead:last-of-type { margin-bottom: var(--gap-lead); }
.web { position: relative; }
.web-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.web-line { stroke: var(--marque); stroke-width: 2.5; stroke-linecap: round; }
.web-dot { fill: var(--marque); }
.web-data { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); }
/* Chaque colonne : les cases ont les mêmes bords à gauche et à droite, et la hauteur de leur texte ; les deux colonnes commencent et finissent au même niveau */
.web-col { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.web-family {
  padding: var(--card-pad);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.web-family .wd-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--jaune-texte);
}
.web-family ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.web-family ul li {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .85rem;
  line-height: 1.35;
  background: var(--surface-2);
}
.web-core {
  justify-self: center;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: var(--marine);
  color: #fff;
}
.web-core .logo-mot { font-size: 1.35rem; }
.web-core .logo-mot::after { color: var(--jaune); }
@media (max-width: 1099px) {
  .web-data { grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); }
  .web-core { width: 96px; height: 96px; }
  .web-core .logo-mot { font-size: 1.1rem; }
}
@media (max-width: 759px) {
  .web { isolation: isolate; }
  .web-lines { display: none; }
  .web-data { grid-template-columns: minmax(0, 1fr); gap: var(--gap-cartes); justify-items: center; }
  /* Téléphone : un fil vertical relie Qattane aux familles empilées */
  .web-data::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 40px;
    bottom: 40px;
    width: 2.5px;
    margin-left: -1.25px;
    background: var(--marque);
  }
  .web-col { width: 100%; }
  .web-core { order: -1; margin-bottom: 4px; }
}

/* ---------- Contact ---------- */

#contact { background: var(--pale); }
/* Thème sombre : jamais de fond teinté jaune (il vire au marron), on alterne deux bleus nuit */
:root[data-theme="dark"] #contact { background: var(--bg-alt); }
.contact-entete + .contact-grid { margin-top: var(--gap-lead); }
/* Les associés : deux profils compacts en ouverture de la section, visibles dès l'arrivée */
.associes .sub-title { margin: 24px 0 6px; }
.associes .section-lead { margin-bottom: var(--gap-sub-after); }
.associes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cartes); }
.associe { display: flex; align-items: center; gap: 18px; padding: 16px var(--card-pad); }
.associe > img {
  flex: none;
  width: 64px;
  height: 64px;
  margin: 5px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--marque);
}
.associe h4 { margin-bottom: .3rem; font-size: 1.12rem; font-weight: 700; color: var(--marque); }
.associe p { margin-bottom: 8px; }
.associe-liens { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
@media (max-width: 859px) {
  .associes-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479px) {
  .associe { gap: 16px; }
}
/* Points de réassurance et formulaire */
.contact-grid { display: grid; gap: 40px; align-items: start; }
.contact-points { display: grid; gap: 22px; }
.contact-points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 14px;
  row-gap: 4px;
  align-items: start;
  font-weight: 400;
}
.contact-points li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--jaune) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230e1630' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.contact-points strong {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--marque);
}
.contact-points span { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.contact-form {
  display: grid;
  gap: 16px;
  padding: var(--card-pad);
  padding-top: calc(var(--card-pad) + 6px);
}
.contact-form label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 500; color: var(--muted); }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: .75rem .85rem;
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: 1rem;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--marque);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jaune) 35%, transparent);
  background: var(--surface);
}
.contact-form ::placeholder { color: var(--muted); opacity: 1; font-size: .9rem; }
.form-row { display: grid; gap: 16px; }
.form-foot { font-size: .85rem; color: var(--muted); }
.form-foot a {
  font-weight: 500;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: var(--marque);
}
.form-foot a:hover { text-decoration-thickness: 2px; }
.form-foot a[href^="mentions-legales"] { color: inherit; font-weight: inherit; }
.form-privacy { margin-top: -2px; padding-top: 12px; border-top: 1px solid var(--border); }
/* Pot de miel contre les robots : champ hors de l'écran */
.hp { position: absolute; left: -9999px; }
/* Message affiché à l'envoi en aperçu (posé par script.js) */
.form-preview-note {
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--jaune) 45%, transparent);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  background: color-mix(in srgb, var(--jaune) 14%, transparent);
}
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 720px) {
  .contact-form { --card-pad: 28px; }
}
@media (min-width: 980px) {
  .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 64px; }
}

/* ---------- Pied de page ---------- */

.footer {
  padding: 36px 0;
  border-top: 1px solid var(--border);
  font-size: .9rem;
  background: var(--bg-alt);
  color: var(--muted);
}
.footer-inner { display: grid; gap: 14px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 22px; }
.footer-links > * { padding: 4px 0; }
.footer-links a:hover { color: var(--text); }
/* La phrase reste sur une seule ligne : logo et liens au-dessus, calés sur les bords de la grille */
@media (min-width: 900px) {
  .footer-inner { align-items: center; grid-template-columns: auto 1fr; gap: 12px 24px; }
  .footer-inner > p { grid-column: 1 / -1; grid-row: 2; white-space: nowrap; }
  .footer-links {
    grid-column: 2;
    grid-row: 1;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}
/* Tout tient sur une seule rangée dès que la grille s'élargit */
@media (min-width: 1500px) {
  .footer-inner { grid-template-columns: auto auto 1fr; }
  .footer-inner > p { grid-column: 2; grid-row: 1; }
  .footer-inner > p::before { content: "–"; margin-right: .7em; }
  .footer-links { grid-column: 3; }
}

/* ---------- Pages FAQ, mentions légales, merci et 404 ---------- */

.page { padding: 64px 0 96px; }
.page-inner { max-width: 820px; }
.page h1 { margin-bottom: .6rem; font-size: clamp(2rem, 4vw, 2.8rem); color: var(--marque); }
.page h2 { margin: 2.6rem 0 .8rem; font-size: 1.3rem; color: var(--marque); }
.page p { margin-bottom: .8rem; color: var(--muted); }
/* Plus précis que .page p : le petit titre reste jaune */
.page .eyebrow { margin-bottom: 1rem; color: var(--jaune-texte); }
.page a:not(.btn) { font-weight: 500; color: var(--marque); }
.page a:not(.btn):hover { text-decoration: underline; }
.page p a:not(.btn), .legal-card dd a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.page p a:not(.btn):hover { text-decoration-thickness: 2px; }
.page .todo { color: var(--texte-signal); font-style: italic; }
/* Le bouton de retour des pages merci et 404 respire */
.page .merci-retour { margin-top: 2rem; }
@media (min-width: 1200px) {
  .page-inner { max-width: 1040px; }
}
/* FAQ : le signe + est décoratif, exclu du nom de la question pour les lecteurs d'écran */
.faq { display: grid; gap: 10px; margin-top: 2rem; max-width: 860px; }
.faq details { padding: 0 var(--card-pad); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 1.02rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  content: "+" / "";
  font-size: 1.4rem;
  line-height: 1;
  color: var(--marque);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
/* Question en h2 pour le plan de la page : elle garde l'apparence de la ligne cliquable */
.page .faq summary h2 { margin: 0; font: inherit; letter-spacing: inherit; text-wrap: inherit; color: inherit; }
.page .faq details p { margin-bottom: 0; padding: 0 0 18px; max-width: 70ch; }
.faq-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 2.6rem; }
.faq-cta p { margin: 0; font-weight: 600; color: var(--text); }
@media (min-width: 1200px) {
  .faq, .page .faq details p { max-width: none; }
}
/* Mentions légales : les deux profils ont le même onglet, en bleu marine */
.legal-grid { display: grid; margin: 1rem 0 1.2rem; }
.legal-card { padding: var(--card-pad); padding-top: calc(var(--card-pad) + 6px); }
.legal-card::before { background: var(--marque); }
.legal-card h3 { margin-bottom: .6rem; }
.legal-card dl div {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  font-size: .9rem;
}
.legal-card dt { color: var(--muted); }
.legal-name { display: flex; align-items: center; gap: 12px; }
.legal-name img {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 50%;
  object-fit: cover;
}
@media (min-width: 680px) {
  .legal-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 359px) {
  .legal-card dl div { grid-template-columns: 50px minmax(0, 1fr); }
  .legal-card dd { min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- Apparition douce au défilement (seulement si JavaScript est actif) ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d, 0s);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Impression : toujours sur fond clair, quel que soit le thème choisi ---------- */

@media print {
  :root, :root[data-theme="dark"] {
    --marque: var(--marine);
    --sur-marque: #fff;
    --jaune-texte: #f2a900;
    --texte-signal: #0e1630;
    --bg: #fff;
    --bg-alt: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --border: #c9cfdb;
    --text: #0e1630;
    --muted: #3c4660;
    color-scheme: light;
  }
  *, *::before, *::after {
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .nav, .skip-link, .hero-cta, .marquee-track[aria-hidden="true"] { display: none !important; }
  .only-light { display: block !important; }
  .logo-tint, .only-dark { display: none !important; }
  /* Logos : tous visibles, en noir, sans défilement */
  .marquees { display: block; width: auto; margin-left: 0; }
  .marquee { display: block; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { flex-wrap: wrap; justify-content: center; padding: 0; }
  .marquee-track img { opacity: 1; filter: brightness(0); }
  /* Témoignages : entiers et sans doublon */
  .quotes-cols { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .quotes-col { display: block !important; }
  .quotes-col-track { transform: none !important; }
  .quotes-group[aria-hidden="true"] { display: none; }
  .case-head h3 { color: var(--text); }
  .card, .case, .legal-card, .faq details { break-inside: avoid; }
  /* Fonds conservés : sans eux, ces textes clairs seraient illisibles */
  .step-num, .web-core { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}