/* Hent — piste « Granit » (maquettes validées le 2026-10-07).
   Polices hébergées ici (OFL, voir fonts/), jamais chargées chez Google. */
@font-face { font-family: 'Instrument Sans'; font-weight: 400 600; font-display: swap; src: url(../fonts/InstrumentSans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-weight: 400 600; font-display: swap; src: url(../fonts/InstrumentSans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 500 700; font-display: swap; src: url(../fonts/BricolageGrotesque-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-weight: 500 700; font-display: swap; src: url(../fonts/BricolageGrotesque-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fond: #ECEEE9; --surface: #FBFBF8; --carte: #FFFFFF; --canevas: #F4F5F1; --point: #D6DAD3;
  --texte: #1E2422; --texte2: #59625E; --texte3: #8A928E; --ligne: #E1E4DE; --ligne-forte: #D6DAD3;
  --accent: #0B6E69; --accent-fonce: #06504C; --accent-doux: #EAF3F1; --sur-accent: #FFFFFF;
  --neutre-doux: #ECEEE9; --danger: #A3321F; --danger-doux: #F6DCD6; --succes: #1F5E3F; --succes-doux: #DDEDE3;
  --attention: #7A520C; --attention-doux: #FBEFD6; --inverse: #1E2422; --sur-inverse: #FFFFFF; --note: #F7E8A6;
  --ombre: 0 1px 2px rgba(30,36,34,.08), 0 8px 24px rgba(30,36,34,.08);
  --ombre-forte: 0 0 0 1px var(--ligne), 0 24px 60px rgba(30,36,34,.22);
  --ombre-carte: 0 1px 2px rgba(30,36,34,.08);
  --police: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --police-titre: 'Bricolage Grotesque', 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #141817; --surface: #222826; --carte: #262C2A; --canevas: #1A1F1D; --point: #2A302D;
    --texte: #E8EBE7; --texte2: #A1AAA5; --texte3: #6F7874; --ligne: #2E3532; --ligne-forte: #3A423F;
    --accent: #3FB8AE; --accent-fonce: #7AD6CE; --accent-doux: #1B302D; --sur-accent: #062320;
    --neutre-doux: #2E3532; --danger: #E58A7A; --danger-doux: #3A2420; --succes: #8FD1AE; --succes-doux: #1D2D25;
    --attention: #E8C07A; --attention-doux: #3A2F1A; --inverse: #E8EBE7; --sur-inverse: #1A1F1D; --note: #6B5F2E;
    --ombre: 0 0 0 1px #2E3532, 0 8px 24px rgba(0,0,0,.3);
    --ombre-forte: 0 0 0 1px #3A423F, 0 24px 60px rgba(0,0,0,.5);
    --ombre-carte: 0 0 0 1px #2E3532;
    color-scheme: dark;
  }
}
:root[data-theme="sombre"] {
  --fond: #141817; --surface: #222826; --carte: #262C2A; --canevas: #1A1F1D; --point: #2A302D;
  --texte: #E8EBE7; --texte2: #A1AAA5; --texte3: #6F7874; --ligne: #2E3532; --ligne-forte: #3A423F;
  --accent: #3FB8AE; --accent-fonce: #7AD6CE; --accent-doux: #1B302D; --sur-accent: #062320;
  --neutre-doux: #2E3532; --danger: #E58A7A; --danger-doux: #3A2420; --succes: #8FD1AE; --succes-doux: #1D2D25;
  --attention: #E8C07A; --attention-doux: #3A2F1A; --inverse: #E8EBE7; --sur-inverse: #1A1F1D; --note: #6B5F2E;
  --ombre: 0 0 0 1px #2E3532, 0 8px 24px rgba(0,0,0,.3);
  --ombre-forte: 0 0 0 1px #3A423F, 0 24px 60px rgba(0,0,0,.5);
  --ombre-carte: 0 0 0 1px #2E3532;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 13px/1.4 var(--police); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a { color: var(--accent); }
a:hover { color: var(--accent-fonce); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--police-titre); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.discret { color: var(--texte2); }
.espace { flex: 1; }
svg.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Boutons, champs, puces ---------- */
.bouton { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.bouton-principal { background: var(--accent); color: var(--sur-accent); font-weight: 600; }
.bouton-principal:hover { background: var(--accent-fonce); color: var(--sur-accent); }
.bouton-doux { background: var(--surface); color: var(--texte); }
.bouton-doux:hover { background: var(--carte); color: var(--texte); }
.bouton-contour { background: var(--carte); color: var(--texte); box-shadow: inset 0 0 0 1px var(--ligne-forte); }
.bouton-danger { background: transparent; color: var(--danger); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); }
.bouton-petit { height: 32px; padding: 0 12px; font-size: 12px; }
.bouton-icone { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--texte); display: inline-flex; align-items: center; justify-content: center; }
.bouton-icone:hover:not(:disabled) { background: var(--neutre-doux); }
.groupe-pilule { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border-radius: 999px; padding: 3px; }

.champ { display: flex; flex-direction: column; gap: 5px; }
.champ > label, .champ > .libelle { font-size: 12px; font-weight: 600; }
.saisie { height: 36px; border: 0; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne-forte); border-radius: 9px; padding: 0 11px; color: var(--texte); width: 100%; }
textarea.saisie { height: auto; padding: 8px 11px; resize: vertical; min-height: 58px; line-height: 1.4; }
.saisie:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
select.saisie { padding: 0 8px; }

.segments { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; background: var(--neutre-doux); border-radius: 999px; padding: 3px; }
.segments button { height: 30px; border: 0; border-radius: 999px; background: transparent; font-size: 12px; color: var(--texte2); padding: 0 8px; }
.segments button[aria-pressed="true"] { background: var(--carte); color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px rgba(30,36,34,.12); }

.puce { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.puce-neutre { background: var(--neutre-doux); color: var(--texte2); }
.puce-succes { background: var(--succes-doux); color: var(--succes); }
.puce-info { background: color-mix(in srgb, #3A6EA5 16%, var(--carte)); color: var(--texte); }
.puce-attention { background: var(--attention-doux); color: var(--attention); }

/* ---------- Coquille de l'appli ---------- */
.appli { min-height: 100%; display: flex; flex-direction: column; }
.entete { height: 64px; flex: none; display: flex; align-items: center; gap: 24px; padding: 0 24px; }
.logo { display: flex; align-items: center; gap: 8px; font-family: var(--police-titre); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; color: var(--texte); text-decoration: none; }
.logo:hover { color: var(--texte); }
.logo-marque { width: 30px; height: 30px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: var(--sur-accent); }
.nav { display: flex; align-items: center; gap: 4px; background: var(--surface); border-radius: 999px; padding: 4px; }
.nav a { height: 32px; padding: 0 16px; border-radius: 999px; color: var(--texte); text-decoration: none; display: flex; align-items: center; }
.nav a[aria-current="page"] { background: var(--inverse); color: var(--sur-inverse); font-weight: 600; }
.profil { display: flex; align-items: center; gap: 10px; }
.profil-texte { text-align: right; line-height: 16px; }
.profil-texte strong { display: block; font-weight: 600; }
.profil-texte span { font-size: 11.5px; color: var(--texte2); }
.avatar { width: 36px; height: 36px; border-radius: 999px; background: #F4E7DA; color: #8A4419; display: flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-weight: 700; flex: none; }
.plan { flex: 1; margin: 0 8px 8px; border-radius: 16px; background: var(--canevas); padding: 32px; }

/* ---------- Liste des diagrammes ---------- */
.liste-entete { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.liste-entete h1 { font-size: 32px; letter-spacing: -0.02em; }
.liste-entete p { margin: 4px 0 0; color: var(--texte2); }
.filtres { display: flex; gap: 6px; flex-wrap: wrap; }
.filtres button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne-forte); color: var(--texte); }
.filtres button[aria-pressed="true"] { background: var(--inverse); color: var(--sur-inverse); box-shadow: none; font-weight: 600; }
.recherche { display: flex; align-items: center; gap: 8px; height: 38px; width: 260px; padding: 0 14px; background: var(--carte); border-radius: 999px; color: var(--texte2); box-shadow: inset 0 0 0 1px var(--ligne-forte); }
.recherche input { border: 0; background: transparent; flex: 1; outline: none; color: var(--texte); min-width: 0; }
.grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.carte-nouveau { border: 2px dashed var(--ligne-forte); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 12px; min-height: 296px; }
.carte-nouveau h2 { font-size: 18px; }
.carte-nouveau p { margin: 0; color: var(--texte2); line-height: 18px; }
.carte-nouveau .marque { width: 40px; height: 40px; border-radius: 12px; background: var(--accent); color: var(--sur-accent); display: flex; align-items: center; justify-content: center; }
.choix-mode { height: 52px; border: 0; border-radius: 12px; background: var(--carte); box-shadow: var(--ombre-carte); display: flex; align-items: center; gap: 12px; padding: 0 12px; text-align: left; }
.choix-mode:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.choix-mode strong { display: block; font-weight: 600; }
.choix-mode span span { font-size: 11.5px; color: var(--texte2); }
.carte { position: relative; background: var(--carte); border-radius: 16px; padding: 10px; min-height: 296px; box-shadow: var(--ombre-carte); display: flex; flex-direction: column; }
.carte:hover, .carte:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 10px 28px rgba(30,36,34,.12); }
.carte-vignette { display: block; height: 170px; border-radius: 10px; background: var(--canevas); overflow: hidden; }
.carte-vignette svg { width: 100%; height: 100%; display: block; }
.carte-corps { padding: 12px 6px 4px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.carte-titre { display: flex; align-items: flex-start; gap: 8px; }
.carte-titre h2 { font-size: 16px; line-height: 20px; flex: 1; }
.carte-titre h2 a { color: var(--texte); text-decoration: none; }
.carte-titre h2 a::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.carte-meta { font-size: 12px; color: var(--texte2); }
.carte-puces { display: flex; gap: 6px; margin-top: auto; }
.carte .bouton-actions { position: relative; z-index: 1; width: 30px; height: 30px; border: 0; border-radius: 999px; background: var(--neutre-doux); font-weight: 700; flex: none; }
.vide { padding: 48px 0; text-align: center; color: var(--texte2); }

/* ---------- Menus, dialogues, toasts ---------- */
.menu-conteneur { position: relative; }
.menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); min-width: 240px; background: var(--carte); border-radius: 12px; padding: 6px; box-shadow: var(--ombre-forte); display: flex; flex-direction: column; }
.menu > a, .menu > button { height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); text-align: left; padding: 0 10px; display: flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; }
.menu > a:hover, .menu > button:hover, .menu > button:focus-visible { background: var(--neutre-doux); color: var(--texte); }
.menu .separateur { height: 1px; background: var(--ligne); margin: 4px 0; }
.menu .menu-danger { color: var(--danger); }
.carte .menu { top: 52px; right: 8px; }

dialog.dialogue { border: 0; padding: 0; border-radius: 16px; background: var(--carte); color: var(--texte); box-shadow: var(--ombre-forte); width: min(420px, calc(100vw - 32px)); }
dialog.dialogue::backdrop { background: rgba(20,24,23,.35); }
.dialogue-corps { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.dialogue-corps h2 { font-size: 17px; }
.dialogue-corps p { margin: 0; color: var(--texte2); line-height: 1.5; }
.dialogue-actions { display: flex; justify-content: flex-end; gap: 8px; }
.lien-copie { display: flex; gap: 6px; }
.lien-copie input { flex: 1; font-size: 12px; }

.toasts { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--inverse); color: var(--sur-inverse); border-radius: 999px; padding: 10px 18px; font-weight: 500; box-shadow: var(--ombre); }
.toast-erreur { background: var(--danger); color: #FFFFFF; }

/* ---------- Équipe ---------- */
.equipe { max-width: 860px; display: flex; flex-direction: column; gap: 18px; }
.membre { display: flex; align-items: center; gap: 14px; background: var(--carte); border-radius: 14px; padding: 14px 16px; box-shadow: var(--ombre-carte); flex-wrap: wrap; }
.membre-infos { flex: 1; min-width: 200px; }
.membre-infos strong { font-weight: 600; }
.membre-infos div { font-size: 12px; color: var(--texte2); }
.membre-inactif { opacity: .55; }
.formulaire-membre { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-items: end; background: var(--surface); border-radius: 14px; padding: 16px; }

/* ---------- Connexion requise ---------- */
.accueil-vide { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.accueil-vide > div { max-width: 420px; background: var(--surface); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ombre); }
.accueil-vide p { margin: 0; color: var(--texte2); line-height: 1.55; }

/* ---------- Éditeur ---------- */
.page-editeur { height: 100%; overflow: hidden; }
.page-editeur .appli { height: 100%; }
.entete-editeur { height: 56px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
.fil { display: flex; align-items: center; gap: 8px; margin-left: 8px; min-width: 0; }
.fil a { color: var(--texte2); text-decoration: none; }
.titre-diagramme { font-family: var(--police-titre); font-weight: 500; font-size: 15px; border: 0; background: transparent; color: var(--texte); padding: 4px 6px; border-radius: 8px; width: min(420px, 30vw); field-sizing: content; min-width: 120px; max-width: min(420px, 30vw); }
.titre-diagramme:hover { background: var(--surface); }
.titre-diagramme:focus { outline: none; background: var(--carte); box-shadow: inset 0 0 0 2px var(--accent); }
.etat-sauvegarde { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; background: var(--succes-doux); color: var(--succes); white-space: nowrap; }
.etat-sauvegarde[data-etat="encours"] { background: var(--surface); color: var(--texte2); }
.etat-sauvegarde[data-etat="encours"]::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: #C98A1B; }
.etat-sauvegarde[data-etat="erreur"] { background: var(--danger-doux); color: var(--danger); }
.zone { position: relative; flex: 1; overflow: hidden; margin: 0 8px 8px; border-radius: 16px; background-color: var(--canevas); background-image: radial-gradient(var(--point) 1px, transparent 1px); background-size: calc(10px * var(--zoom, 1)) calc(10px * var(--zoom, 1)); background-position: var(--fond-x, 0) var(--fond-y, 0); }
#canevas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
#canevas.deplacement { cursor: grab; }
#canevas.deplacement-actif { cursor: grabbing; }
.flottant { position: absolute; z-index: 5; background: var(--surface); border-radius: 14px; box-shadow: var(--ombre); }
.palette { left: 16px; top: 16px; width: 200px; padding: 14px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100% - 32px); overflow: auto; }
.palette h2, .panneau h2.petit { font-size: 13px; }
.formes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.forme { height: 54px; border: 0; border-radius: 10px; background: var(--carte); box-shadow: var(--ombre-carte); font-size: 11.5px; color: var(--texte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: grab; }
.forme:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.forme-apercu { border: 1.8px solid currentColor; }
.forme-boite { width: 34px; height: 18px; border-radius: 5px; }
.forme-decision { width: 15px; height: 15px; border-radius: 2px; transform: rotate(45deg); margin: 2px 0; }
.forme-borne { width: 34px; height: 18px; border-radius: 9px; }
.forme-note { width: 28px; height: 20px; border-radius: 3px; background: var(--note); border: 0; }
.couloirs-liste { display: flex; flex-direction: column; gap: 2px; }
.couloir-ligne { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--texte); text-align: left; width: 100%; }
.couloir-ligne:hover, .couloir-ligne[aria-pressed="true"] { background: var(--neutre-doux); }
.couloir-ligne span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pastille-ton { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.ajout-pointille { height: 32px; margin-top: 4px; border: 1.5px dashed var(--ligne-forte); border-radius: 8px; background: transparent; font-size: 12px; color: var(--texte); }
.aligner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.aligner button { height: 34px; border: 0; border-radius: 9px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); color: var(--texte); display: flex; align-items: center; justify-content: center; }
.palette p { margin: 0; font-size: 11.5px; line-height: 16px; color: var(--texte2); }

.panneau { right: 16px; top: 16px; width: 280px; padding: 16px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100% - 32px); overflow: auto; }
.panneau-entete { display: flex; align-items: center; gap: 10px; }
.panneau-entete h2 { font-size: 15px; }
.panneau-entete div div { font-size: 11.5px; color: var(--texte2); }
.panneau-icone { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--accent-doux); color: var(--accent); }
.choix-pilules { display: flex; flex-wrap: wrap; gap: 6px; }
.choix-pilules button { height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--neutre-doux); color: var(--texte); font-size: 12px; }
.choix-pilules button[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); font-weight: 600; }
.icones { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.icones button { height: 34px; border: 0; border-radius: 9px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne-forte); color: var(--texte); display: flex; align-items: center; justify-content: center; padding: 0; }
.icones button[aria-pressed="true"] { background: var(--accent-doux); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.traces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.traces button { height: 44px; border: 0; border-radius: 9px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne-forte); font-size: 11.5px; color: var(--texte); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.traces button[aria-pressed="true"] { background: var(--accent-doux); box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent-fonce); font-weight: 600; }
.couleurs { display: flex; gap: 8px; flex-wrap: wrap; }
.couleurs button { width: 30px; height: 30px; border: 0; border-radius: 999px; padding: 0; }
.couleurs button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.tons button { border-radius: 9px; }
.liens-noeud { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ligne); }
.liens-noeud button { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0; text-align: left; color: var(--texte); font-size: 12.5px; }
.fleche-lien { width: 20px; height: 20px; border-radius: 6px; background: var(--neutre-doux); display: flex; align-items: center; justify-content: center; font-size: 11px; flex: none; }
.actions-panneau { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ligne); }
.actions-panneau .bouton { flex: 1; height: 34px; font-size: 12px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stats div { background: var(--carte); border-radius: 10px; padding: 10px; box-shadow: inset 0 0 0 1px var(--ligne); }
.stats strong { display: block; font-family: var(--police-titre); font-size: 20px; }
.stats span { font-size: 11.5px; color: var(--texte2); }
.aide { margin: 0; color: var(--texte2); line-height: 18px; }
.raccourcis { margin: 0; padding: 0; list-style: none; font-size: 11.5px; color: var(--texte2); display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; }
.raccourcis kbd { font: 600 11px var(--police); color: var(--texte); background: var(--neutre-doux); border-radius: 5px; padding: 1px 6px; }

.barre-zoom { position: absolute; z-index: 5; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: var(--surface); border-radius: 999px; box-shadow: var(--ombre); font-size: 12px; white-space: nowrap; }
.barre-zoom .bouton-icone { width: 30px; height: 30px; font-size: 15px; }
.barre-zoom .valeur { padding: 0 4px; font-weight: 600; min-width: 46px; text-align: center; }
.barre-zoom .sep { width: 1px; height: 18px; background: var(--ligne); margin: 0 4px; }
.barre-zoom .indice { padding: 0 8px; color: var(--texte2); }
.barre-zoom .bouton-texte { height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; }
.barre-zoom .bouton-texte:hover { background: var(--neutre-doux); }
.bandeau-conflit { position: absolute; z-index: 20; left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 999px; background: var(--attention-doux); color: var(--attention); box-shadow: var(--ombre); font-weight: 500; }

.export-formats { display: flex; flex-direction: column; gap: 8px; }
.export-formats label { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne-forte); cursor: pointer; }
.export-formats label:has(input:checked) { background: var(--accent-doux); box-shadow: inset 0 0 0 2px var(--accent); }
.export-formats input, .case input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.export-formats strong { display: block; font-weight: 600; }
.export-formats span span { font-size: 12px; color: var(--texte2); }
.case { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.ligne-option { display: flex; align-items: center; gap: 10px; }
.ligne-option > span { font-weight: 600; flex: 1; }
.ligne-option .segments { width: 170px; }

/* ---------- Lien de lecture (page publique) ---------- */
.page-lecture { display: flex; flex-direction: column; height: 100%; }
.barre { height: 64px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 20px; }
.monogramme { width: 38px; height: 38px; border-radius: 11px; background: #F4E7DA; color: #8A4419; display: flex; align-items: center; justify-content: center; font-family: var(--police-titre); font-weight: 700; flex: none; }
.barre-titre { min-width: 0; line-height: 18px; }
.barre-titre h1 { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre-titre p { margin: 0; font-size: 12px; color: var(--texte2); }
.lecture { position: relative; flex: 1; overflow: hidden; margin: 0 8px 8px; border-radius: 16px; background: var(--canevas); }
.lecture-dessin { position: absolute; inset: 0 0 56px; }
.lecture-dessin svg { width: 100%; height: 100%; display: block; }
.lecture-dessin [data-noeud]:focus { outline: none; }
.lecture-dessin [data-noeud]:focus-visible > :first-child { stroke: var(--accent); stroke-width: 3; }
.legende-lecture { position: absolute; left: 16px; bottom: 12px; display: flex; align-items: center; gap: 16px; padding: 8px 16px; background: var(--surface); border-radius: 999px; box-shadow: var(--ombre-carte); font-size: 12px; color: var(--texte); flex-wrap: wrap; }
.legende-lecture span { display: flex; align-items: center; gap: 8px; }
.legende-lecture svg { color: var(--texte3); }
.fait-avec { position: absolute; right: 16px; bottom: 12px; display: flex; align-items: center; height: 34px; padding: 0 14px; background: var(--surface); border-radius: 999px; box-shadow: var(--ombre-carte); font-size: 12px; color: var(--texte2); text-decoration: none; }
.bulle { position: absolute; z-index: 10; width: 290px; background: var(--carte); border-radius: 14px; padding: 16px; box-shadow: var(--ombre-forte); display: flex; flex-direction: column; gap: 10px; }
.bulle h2 { font-size: 18px; }
.bulle p { margin: 0; line-height: 19px; color: var(--texte2); white-space: pre-line; }
.bulle-entete { display: flex; align-items: center; gap: 8px; }
.bulle-entete .bouton-icone { margin-left: auto; background: var(--neutre-doux); width: 28px; height: 28px; }

@media (max-width: 720px) {
  .entete { gap: 12px; padding: 0 12px; }
  .profil-texte { display: none; }
  .plan { padding: 20px 16px; }
  .barre .puce, .barre #plein-ecran { display: none; }
}

/* Repères de temps : accès depuis le panneau quand rien n'est sélectionné. */
.bloc-reperes { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: var(--carte); box-shadow: inset 0 0 0 1px var(--ligne); }
.bloc-reperes strong { font-family: var(--police-titre); font-size: 13px; }
.bloc-reperes p { margin: 0; font-size: 12px; line-height: 17px; color: var(--texte2); }