/* Vitrine d'Artema : accueil, presse et créateurs, investisseurs.
   Mise en page : une salle d'exposition. Bandeaux pleine largeur, colonne de 72rem, et sous chaque
   visuel un cartel de musée (titre, artiste, date, technique, lieu de conservation).
   Couleurs et polices reprises du design system de l'app (« Artema, design system », v4) : nuit
   #050924 de l'écran de démarrage, encre #1E243B, gris #F6F7F9, titres en police système, texte en
   DM Sans. Thème sombre : palette des pages légales du site. */

@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_400Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_500Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("fonts/DMSans_700Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Couleurs */
  --night: #050924;          /* bandeaux « salle » : en-tête, héros, pied de page (fixe) */
  --night-2: #0F1531;        /* surfaces posées sur la nuit */
  --night-line: #2A3252;
  --night-fg: #F6F7F9;
  --night-muted: #B4BACB;    /* 9,6:1 sur --night */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --fg: #1E243B;
  --muted: #5B6172;          /* 5,9:1 sur --bg, 6,3:1 sur --surface, 5,2:1 sur --soft */
  --soft: #E8EAED;
  --line: #E0E2E7;
  --line-strong: #868C99;    /* bordures de champs : 3,4:1 sur --surface */
  --btn-bg: #1E243B;
  --btn-fg: #FFFFFF;
  --btn-hover: #2E3657;
  --focus: #1E243B;
  --ok: #1B6B3A;
  --danger: #C8342A;
  --todo-bg: #FFF3B0;
  --todo-fg: #1E243B;
  --shadow: 0 1px 3px rgba(30, 36, 59, 0.08);

  /* Polices */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Mesures */
  --gutter: clamp(16px, 4.5vw, 48px);
  --col: 72rem;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --night: #050924; --night-2: #0F1531; --night-line: #2A3252; --night-fg: #F6F7F9; --night-muted: #B4BACB;
    --bg: #0B0F20; --surface: #151A2E; --fg: #EDEFF5; --muted: #AEB4C4; --soft: #1E2440; --line: #262D4A;
    --line-strong: #6E7690; --btn-bg: #EDEFF5; --btn-fg: #1E243B; --btn-hover: #FFFFFF; --focus: #EDEFF5;
    --ok: #7FD39B; --danger: #FF8A80; --todo-bg: #5A4A00; --todo-fg: #FFF3B0; --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --night: #050924; --night-2: #0F1531; --night-line: #2A3252; --night-fg: #F6F7F9; --night-muted: #B4BACB;
  --bg: #0B0F20; --surface: #151A2E; --fg: #EDEFF5; --muted: #AEB4C4; --soft: #1E2440; --line: #262D4A;
  --line-strong: #6E7690; --btn-bg: #EDEFF5; --btn-fg: #1E243B; --btn-hover: #FFFFFF; --focus: #EDEFF5;
  --ok: #7FD39B; --danger: #FF8A80; --todo-bg: #5A4A00; --todo-fg: #FFF3B0; --shadow: none;
  color-scheme: dark;
}

/* Les bandeaux « nuit » gardent leurs couleurs dans les deux thèmes */
.on-night {
  --fg: var(--night-fg); --muted: var(--night-muted); --line: var(--night-line); --surface: var(--night-2);
  --btn-bg: #F6F7F9; --btn-fg: #1E243B; --btn-hover: #FFFFFF; --focus: #F6F7F9;
  --soft: #1E2440; --line-strong: #6E7690; --ok: #7FD39B; --danger: #FF8A80;
  background: var(--night); color: var(--night-fg);
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.6 var(--font-body); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); letter-spacing: -0.025em; }
h3 { font-size: 1.1875rem; letter-spacing: -0.015em; line-height: 1.3; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
strong { font-weight: 700; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 20; background: var(--btn-bg); color: var(--btn-fg); padding: 10px 16px; border-radius: 999px; font-weight: 500; text-decoration: none; }
.skip:focus { top: 12px; }
mark.todo { background: var(--todo-bg); color: var(--todo-fg); padding: 0 0.25em; border-radius: 4px; }

.wrap { width: 100%; max-width: calc(var(--col) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, 112px); }
.section:not(.bande):not(.on-night) + .section:not(.bande):not(.on-night) { padding-top: 0; }
.section-head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
.eyebrow { font: 500 0.8125rem/1.4 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.lead { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: var(--muted); max-width: 40rem; }
.prose { display: grid; gap: 14px; max-width: 40rem; }
.note { font-size: 0.9375rem; color: var(--muted); }

/* Boutons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; font: 500 1rem/1.2 var(--font-body); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background-color 0.15s, color 0.15s, border-color 0.15s; }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-outline { background: transparent; color: var(--fg); border-color: currentColor; }
.btn-outline:hover { background: var(--soft); }
.on-night .btn-outline:hover { background: var(--night-2); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* En-tête */
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-block: 18px; }
.brand { display: inline-flex; padding: 6px 0; text-decoration: none; }
.logo { display: block; width: 116px; aspect-ratio: 996 / 236; background: currentColor; -webkit-mask: url("img/logo-artema.png") center / contain no-repeat; mask: url("img/logo-artema.png") center / contain no-repeat; }
.site-header nav ul { display: flex; flex-wrap: wrap; gap: 4px 28px; list-style: none; }
.site-header nav a { display: inline-block; padding: 8px 0; color: var(--muted); text-decoration: none; font-size: 0.9875rem; font-weight: 500; }
.site-header nav a:hover { color: var(--fg); }
.site-header nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 currentColor; }

/* Héros */
.hero { padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 96px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(40px, 6vw, 80px); align-items: center; }
.hero-text { display: grid; gap: 24px; min-width: 0; }
.hero-text .lead { color: var(--night-muted); }
.hero-note { font-size: 0.9375rem; color: var(--night-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hero-simple { padding-block: clamp(32px, 6vw, 64px) clamp(48px, 7vw, 80px); }
.hero-simple .hero-text { max-width: 50rem; }

/* Accrochage : un tableau au mur et le téléphone devant */
.accrochage { position: relative; margin: 0; display: grid; justify-items: end; min-width: 0; }
.accrochage .mur { position: relative; width: min(66%, 300px); margin-right: 2%; }
.tableau img { width: 100%; aspect-ratio: 5 / 9; object-fit: cover; box-shadow: 0 0 0 6px #1B1A17, 0 0 0 7px #3A372F, 0 24px 48px -16px rgba(0, 0, 0, 0.7); }
.accrochage .phone { position: absolute; right: 52%; bottom: -7%; width: 76%; }
.accrochage .cartel { width: min(66%, 300px); margin: 56px 2% 0 0; }

/* Téléphone : rendu photoréaliste d'iPhone 18 Pro argent généré dans Magnific (projet « Artema »),
   écran rendu transparent et Dynamic Island redessinée par web/vitrine/outils/incruster_ecran.swift.
   La capture est posée sous le cadre, aux coordonnées de l'écran mesurées par ce script (élargies de
   quelques dixièmes de point pour passer sous le bord de l'écran). */
.phone { position: relative; aspect-ratio: 920 / 1910; filter: drop-shadow(0 22px 28px rgba(5, 9, 36, 0.35)); }
.phone img { position: absolute; left: 5.2%; top: 2.2%; width: 89.5%; height: 95.45%; object-fit: fill; border-radius: 12.5% / 5.9%; }
.phone::after { content: ""; position: absolute; inset: 0; background: url("img/iphone-18-pro.png") center / 100% 100% no-repeat; pointer-events: none; }

/* Cartel de musée */
.cartel { font-size: 0.8125rem; line-height: 1.45; color: var(--muted); padding: 12px 14px; background: var(--surface); border-radius: 4px; max-width: 22rem; }
.cartel .titre { display: block; color: var(--fg); font-style: italic; font-weight: 500; font-size: 0.875rem; }
.on-night .cartel { background: var(--night-2); }

/* Espaces dédiés (accueil) */
.espaces { background: var(--night); padding-bottom: clamp(40px, 6vw, 64px); }
.espaces ul { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.espaces a { display: grid; gap: 6px; height: 100%; padding: 22px 24px; border-radius: var(--radius-md); background: var(--night-2); color: var(--night-fg); text-decoration: none; border: 1px solid var(--night-line); transition: border-color 0.15s, background-color 0.15s; }
.espaces a:hover { border-color: var(--night-muted); background: #141B3C; }
.espaces .qui { font: 700 1.125rem/1.3 var(--font-display); letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.espaces .qui svg { width: 20px; height: 20px; flex: none; }
.espaces .quoi { color: var(--night-muted); font-size: 0.9375rem; line-height: 1.5; }

/* Étapes (accueil) */
.etapes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); counter-reset: etape; }
.etapes li { display: grid; gap: 16px; align-content: start; counter-increment: etape; min-width: 0; }
.etapes .phone { width: min(100%, 264px); }
.etapes h3 { display: flex; align-items: baseline; gap: 12px; }
.etapes h3::before { content: counter(etape); font: 500 0.875rem/1 var(--font-body); width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; border: 1.5px solid currentColor; flex: none; transform: translateY(-2px); }
.etapes p { color: var(--muted); }

/* Fonctionnalités */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.duo-visuels { display: flex; gap: 20px; justify-content: center; align-items: flex-start; min-width: 0; }
.duo-visuels .phone { width: min(48%, 250px); }
.duo-visuels .phone:nth-child(2) { margin-top: 56px; }
.liste-fonctions { list-style: none; display: grid; gap: 24px; }
.liste-fonctions li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
.liste-fonctions .ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); display: grid; place-items: center; }
.liste-fonctions .ico svg { width: 20px; height: 20px; }
.liste-fonctions p { color: var(--muted); }

/* Engagements */
.bande { background: var(--surface); border-block: 1px solid var(--line); }
.grille-3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 48px); }
.grille-3 li { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line); }
.grille-3 p { color: var(--muted); }

/* Galerie de captures */
.galerie { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.galerie li { display: grid; gap: 12px; align-content: start; }
.galerie figure { margin: 0; display: grid; gap: 12px; }
.galerie .phone { width: min(100%, 220px); }
.galerie figcaption { font-size: 0.9375rem; display: grid; gap: 2px; }
.galerie figcaption span { color: var(--muted); font-size: 0.875rem; }
.dl { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 0.9375rem; min-height: 44px; }
.dl svg { width: 18px; height: 18px; flex: none; }

/* Fiche d'identité (presse) */
.fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 56px); margin: 0; }
.fiche div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.fiche dt { color: var(--muted); font-size: 0.9375rem; }
.fiche dd { margin: 0; }

/* Textes prêts à l'emploi */
.textes { display: grid; gap: 20px; }
.texte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px clamp(20px, 3vw, 32px); display: grid; gap: 14px; }
.texte-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.texte-tete h3 { font-size: 1.0625rem; }
.texte-tete .compte { color: var(--muted); font-size: 0.875rem; font-weight: 400; font-family: var(--font-body); letter-spacing: 0; }
.texte blockquote { margin: 0; max-width: 46rem; }
.texte blockquote p + p { margin-top: 12px; }
.copier { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: transparent; color: var(--fg); font: 500 0.9375rem/1 var(--font-body); cursor: pointer; }
.copier:hover { background: var(--soft); }
.copier svg { width: 16px; height: 16px; }
.copier[data-etat="ok"] { border-color: var(--ok); color: var(--ok); }

/* Angles */
.angles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.angles li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; display: grid; gap: 10px; align-content: start; }
.angles p { color: var(--muted); }
.angles .source { font-size: 0.8125rem; }

/* Sommaire de page */
.sommaire { border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.sommaire ul { list-style: none; display: flex; gap: 4px 24px; overflow-x: auto; padding-block: 4px; scrollbar-width: none; }
.sommaire ul::-webkit-scrollbar { display: none; }
.sommaire a { display: inline-block; white-space: nowrap; padding: 12px 0; color: var(--muted); text-decoration: none; font-size: 0.9375rem; font-weight: 500; }
.sommaire a:hover { color: var(--fg); }
[id] { scroll-margin-top: 72px; }

/* Portrait */
.portrait { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 48px); align-items: start; }
.portrait img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; transform: scale(1.04); }
.portrait .photo { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--soft); }
.citation { margin: 0; padding-left: 20px; border-left: 3px solid var(--fg); font: 500 1.1875rem/1.5 var(--font-body); max-width: 40rem; }
.liens { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Créateurs */
.formats { list-style: none; display: grid; gap: 12px; }
.formats li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.formats svg { width: 20px; height: 20px; margin-top: 4px; }
.encadre { background: var(--soft); border-radius: var(--radius-md); padding: 20px 24px; display: grid; gap: 8px; }

/* Chiffres (investisseurs) */
.chiffres { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--night-line); }
.chiffres li { padding: 24px 24px 0 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.chiffres li + li { padding-left: 24px; border-left: 1px solid var(--night-line); }
.chiffres .valeur { font: 700 clamp(2rem, 3.6vw, 2.75rem)/1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.chiffres .unite { font-size: 0.55em; letter-spacing: -0.01em; }
.chiffres .libelle { color: var(--night-muted); font-size: 0.9375rem; line-height: 1.45; }
.chiffres sup, .appel { font-size: 0.75em; line-height: 0; }
.appel a { text-decoration: none; color: var(--muted); padding: 0 2px; }
.on-night .appel a { color: var(--night-muted); }

/* Listes à coches */
.coches { list-style: none; display: grid; gap: 12px; }
.coches li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.coches li::before { content: ""; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; background: var(--fg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 8.2-6 6.3a1 1 0 0 1-1.4 0l-3-3a1 1 0 1 1 1.4-1.4l2.3 2.3 5.3-5.6a1 1 0 0 1 1.4 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 8.2-6 6.3a1 1 0 0 1-1.4 0l-3-3a1 1 0 1 1 1.4-1.4l2.3 2.3 5.3-5.6a1 1 0 0 1 1.4 1.4Z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Piliers et pistes */
.piliers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.piliers li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; display: grid; gap: 10px; align-content: start; }
.piliers p { color: var(--muted); }
.pistes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pistes li { padding: 24px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; align-content: start; }
.pistes .type { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.pistes p { color: var(--muted); }

/* Tableau comparatif : lignes empilées sous 760 px */
.comparatif { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: var(--surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.comparatif caption { text-align: left; color: var(--muted); font-size: 0.875rem; caption-side: bottom; padding-top: 12px; }
.comparatif th, .comparatif td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.comparatif thead th { font-weight: 500; color: var(--muted); font-size: 0.875rem; }
.comparatif tbody th { font-weight: 700; }
.comparatif tbody tr:last-child > * { border-bottom: 0; }
.comparatif .artema { background: var(--soft); }
.oui, .non, .partiel { display: inline-flex; align-items: center; gap: 8px; }
.oui::before, .non::before, .partiel::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.oui::before { background: var(--fg); }
.partiel::before { border: 2px solid var(--fg); background: linear-gradient(90deg, var(--fg) 50%, transparent 50%); }
.non::before { border: 1.5px solid var(--line-strong); }
.non { color: var(--muted); }

/* Feuille de route */
.jalons { list-style: none; display: grid; gap: 0; max-width: 46rem; }
.jalons li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 4px 24px; padding-block: 20px; border-top: 1px solid var(--line); }
.jalons .quand { font-weight: 700; font-family: var(--font-display); }
.jalons .etat { display: inline-block; margin-top: 6px; font-size: 0.8125rem; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.jalons .etat.en-cours { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.jalons p { color: var(--muted); }
.jalons h3 { font-size: 1.0625rem; }

/* Levée */
.levee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); }
.levee dl { margin: 0; display: grid; }
.levee dl div { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 16px; padding-block: 14px; border-top: 1px solid var(--night-line); }
.levee dt { color: var(--night-muted); }
.levee dd { margin: 0; }

/* Sources et mentions */
.sources { display: grid; gap: 8px; font-size: 0.875rem; color: var(--muted); padding-left: 1.4em; }
.sources a { color: var(--fg); overflow-wrap: anywhere; }
.avertissement { font-size: 0.875rem; color: var(--muted); max-width: 46rem; }

/* Formulaires */
.form-carte { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); display: grid; gap: 20px; }
.on-night .form-carte { background: var(--night-2); }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.champ { display: grid; gap: 8px; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ label { font-weight: 500; font-size: 0.9375rem; }
.champ .aide { font-size: 0.875rem; color: var(--muted); }
.champ input, .champ select, .champ textarea { width: 100%; font: 400 1rem/1.4 var(--font-body); color: var(--fg); background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 48px; }
.on-night .champ input, .on-night .champ select, .on-night .champ textarea { background: var(--night); border-color: #6E7690; }
.champ textarea { min-height: 140px; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.form-ligne { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.form-ligne .champ { flex: 1 1 260px; }
.statut { font-size: 0.9375rem; min-height: 1.5em; }
.statut[data-etat="ok"] { color: var(--ok); font-weight: 500; }
.statut[data-etat="info"] { color: var(--fg); }
.pot-de-miel { position: absolute; left: -10000px; }

/* Pied de page */
.site-footer { padding-block: 56px 40px; }
.site-footer .wrap { display: grid; gap: 32px; }
.pied-haut { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.pied-haut .marque { display: grid; gap: 12px; max-width: 22rem; }
.pied-haut .marque p { color: var(--night-muted); }
.pied-liens { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.pied-liens ul { list-style: none; display: grid; gap: 4px; }
.pied-liens h2 { font: 500 0.8125rem/1.4 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--night-muted); margin-bottom: 8px; }
.pied-liens a { display: inline-block; padding: 6px 0; text-decoration: none; }
.pied-liens a:hover { text-decoration: underline; }
.credits { font-size: 0.8125rem; color: var(--night-muted); border-top: 1px solid var(--night-line); padding-top: 24px; display: grid; gap: 6px; }

/* Adaptations */
@media (max-width: 960px) {
  .hero-grid, .duo, .levee { grid-template-columns: minmax(0, 1fr); }
  .accrochage { max-width: 440px; margin-inline: auto; width: 100%; }
  .espaces ul, .grille-3, .piliers { grid-template-columns: minmax(0, 1fr); }
  .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres li:nth-child(3) { padding-left: 0; border-left: 0; }
  .chiffres li:nth-child(n+3) { margin-top: 24px; border-top: 1px solid var(--night-line); }
  .fiche { grid-template-columns: minmax(0, 1fr); }
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .etapes { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .etapes .phone { width: min(72%, 240px); }
  .pistes { grid-template-columns: minmax(0, 1fr); }
  .champs { grid-template-columns: minmax(0, 1fr); }
  .portrait { grid-template-columns: minmax(0, 1fr); }
  .jalons li, .fiche div, .levee dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; }
  .comparatif tr { border-bottom: 1px solid var(--line); padding-block: 8px; }
  .comparatif tbody th, .comparatif td { border: 0; padding: 6px 16px; }
  .comparatif td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .comparatif td::before { content: attr(data-label); color: var(--muted); }
}
@media (max-width: 520px) {
  .chiffres { grid-template-columns: minmax(0, 1fr); }
  .chiffres li, .chiffres li + li { padding: 20px 0 0; border-left: 0; }
  .chiffres li + li { margin-top: 20px; border-top: 1px solid var(--night-line); }
  .accrochage .mur, .accrochage .cartel { width: 64%; margin-right: 0; }
  .accrochage .cartel { margin-top: 44px; }
  .accrochage .phone { right: 46%; width: 78%; }
  .site-header nav ul { gap: 0 18px; }
  .site-header nav a { font-size: 0.9375rem; }
  .duo-visuels .phone:nth-child(2) { margin-top: 32px; }
}

/* Compléments : kit presse, titres secondaires, erreurs */
.galerie-marque { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 56px; }
.tuile { display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius-md); padding: 28px; }
.tuile img { max-height: 100%; width: auto; object-fit: contain; }
.tuile-claire { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--line); }
.tuile-claire img, .tuile-nuit img { width: 70%; }
.tuile-nuit { background: var(--night); }
.tuile-icone { background: var(--soft); }
.tuile-icone img { width: 46%; border-radius: 22%; }
.sous-titre { margin-bottom: 24px; font-size: 1.1875rem; }
.sous-titre .compte, h3 .compte { color: var(--muted); font: 400 0.9375rem/1 var(--font-body); letter-spacing: 0; }
.duo-haut { align-items: start; }
.h-petit { font-size: 1.25rem; letter-spacing: -0.01em; }
.coches-neutres { gap: 20px; }
.coches-neutres li::before { -webkit-mask: none; mask: none; width: 8px; height: 8px; margin: 10px 7px 0; }
.statut[data-etat="erreur"] { color: var(--danger); font-weight: 500; }
.levee .form-carte h3 { font-size: 1.25rem; }
.jalons li > div:first-child { display: grid; gap: 4px; align-content: start; justify-items: start; }
@media (max-width: 760px) { .galerie-marque { grid-template-columns: minmax(0, 1fr); } }

/* Repères du fondateur */
.reperes { margin: 8px 0 0; display: grid; max-width: 40rem; }
.reperes div { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 16px; padding-block: 10px; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.reperes dt { color: var(--muted); }
.reperes dd { margin: 0; }
@media (max-width: 520px) { .reperes div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.insecable { white-space: nowrap; }
.galerie li, .galerie figure, .etapes li { grid-template-columns: minmax(0, 1fr); min-width: 0; }
/* Les textes masqués (.sr-only) restent dans le lien qui les porte, sans déborder de la page */
.dl, .btn { position: relative; }
.dl { flex-wrap: wrap; gap: 0 8px; }
@media (max-width: 520px) { .insecable { white-space: normal; } }

/* Rythme vertical : un titre respire avant son contenu, et les boutons avant ce qui les suit.
   .prose espace ses enfants de 14 px ; on ajoute de l'air après les titres et avant les listes,
   tableaux de repères, encadrés et boutons. */
.prose > h2 { margin-bottom: 10px; }
.prose > :is(ul, ol, dl, .encadre, .reperes, .citation) { margin-top: 10px; }
.prose > .actions { margin-top: 18px; }
.prose > .note:last-child { margin-top: 4px; }
.hero .chiffres { margin-top: clamp(40px, 6vw, 64px); }
.duo .prose > .liste-fonctions { margin-top: 18px; }
.form-carte > .prose + form { margin-top: 4px; }