@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("/statique/polices/inter.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/statique/polices/space-grotesk.woff2") format("woff2")}

/* ================================================================
   base.css : socle commun
   - reset sobre, grille d'espacement 4 px, une échelle typo
   - signature « le Repère »
   - réactivité : 390 (téléphone) / 1024 (tablette) / 1440 (bureau)
   Les jetons sont dans jetons.css.
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 0;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--w-display, 600); letter-spacing: -0.015em; line-height: 1.15; }
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
h3 { font-size: var(--fs-2); }
small, .muted { color: var(--ink-2); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

/* --- Tokens par défaut (surchargés par chaque variante) --- */
:root {
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --fs-0: 0.8125rem; --fs-1: 0.9375rem; --fs-2: 1.125rem; --fs-3: 1.5rem; --fs-4: 2.25rem; --fs-5: 3.5rem;
  --radius: 6px;
  --hair: 1px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --t-fast: 140ms; --t-base: 220ms;
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: var(--font-body);
  --font-num: var(--font-body);
  --paper: #fbfaf7; --paper-2: #f2efe8; --ink: #1a1915; --ink-2: #6b675c; --line: #dcd7cb;
  --accent: #b5542a; --accent-ink: #fff;
  --pos: #2d7a4f; --neg: #b23a2f; --warn: #b7791f;
}

/* --- Réactivité au doigt / à la souris --- */
.press, button { transition: transform var(--t-fast) var(--ease), background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease); }
.press:active, button:active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
@media (hover: hover) { .press:hover, button:hover { filter: brightness(.97); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; } }

/* ================================================================
   SIGNATURE — « le Repère »
   Un trait de coupe de maquettiste : une ligne de base (hairline)
   qui part du bord gauche et traverse l'en-tête, croisée par une
   courte barre verticale à la hauteur du titre. Le point de croisement
   porte la couleur d'accent du projet. L'élément actif de l'écran
   (onglet, ligne sélectionnée) reçoit le même trait, « tiré » depuis
   le repère. Toujours 1 px, jamais décoratif : il marque l'origine.
   ================================================================ */
.repere {
  position: relative;
  padding-left: var(--sp-5);
  padding-bottom: var(--sp-4);   /* réserve la place du trait : jamais de chevauchement */
}
.repere::before {               /* ligne de base horizontale, pleine largeur du bloc */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--hair); background: var(--line);
}
.repere::after {                /* barre verticale courte, centrée sur la ligne, qui "ancre" le titre */
  content: ""; position: absolute; left: var(--sp-2); bottom: calc(-1 * var(--sp-2));
  height: var(--sp-4); width: var(--hair); background: var(--ink);
}
.repere-dot {                   /* carré d'accent au croisement : l'origine */
  position: absolute; left: calc(var(--sp-2) - 2px); bottom: -2px;
  width: 5px; height: 5px; background: var(--accent);
}
.repere > * { position: relative; }
/* Élément actif : trait tiré depuis le repère */
.is-active { position: relative; }
.is-active::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--accent); transform-origin: left; transform: scaleX(1);
  transition: transform var(--t-base) var(--ease);
}

/* --- Grille réactive de base --- */
.wrap { padding: var(--sp-4); max-width: 1320px; margin-inline: auto; }
@media (min-width: 700px)  { .wrap { padding: var(--sp-6); } }
@media (min-width: 1100px) { .wrap { padding: var(--sp-7) var(--sp-8); } }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.hair { border: 0; border-top: var(--hair) solid var(--line); margin: 0; }
.tap { min-height: 44px; min-width: 44px; }

:root {
  --font-body: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-num: "Inter", system-ui, sans-serif;
  --w-display: 700;
  --paper: #FAF5FF;
  --paper-2: #FFFFFF;
  --ink: #4C1D95;
  --ink-2: #475569;
  --line: #DDD6FE;
  --accent: #7C3AED;
  --accent-ink: #FFFFFF;
  --accent-2: #EC4899;
  --neg: #DC2626;
  --pos: #15803d;
  --warn: #b45309;
  --radius: 12px;
  --hair: 1px;
}


  /* Direction « Blocs » : jeu de construction modulaire, chaque élément est une brique. Bordures franches, ombre dure,
     bandeau de titre sur l'accent. Pas d'icônes filaires fines, pas de séparateurs gris clair. */
  body{background:var(--paper);padding-bottom:64px}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(5,1fr);background:var(--paper-2);border-top:2px solid var(--ink)}
  .nav a{min-height:56px;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:.8125rem;color:var(--ink)}
  .nav a.sel{background:var(--ink);color:#fff}
  .top{background:var(--accent);color:var(--accent-ink);padding:var(--sp-5) var(--sp-4) var(--sp-6)}
  .top .repere::before{background:rgba(255,255,255,.45)} .top .repere::after{background:#fff} .top .repere-dot{background:var(--accent-2)}
  .top h1{font-size:clamp(1.75rem,6.5vw,3rem);font-weight:700;letter-spacing:-.03em}
  .top .fil{font-size:var(--fs-0);margin-bottom:var(--sp-2);color:#fff}
  .top p{margin-top:var(--sp-3);font-size:var(--fs-1);color:#fff}
  .bento{display:grid;gap:var(--sp-4);padding:var(--sp-4);margin-top:calc(-1*var(--sp-5));max-width:1320px;margin-inline:auto}
  .b{background:var(--paper-2);border:2px solid var(--ink);border-radius:var(--radius);box-shadow:4px 4px 0 var(--ink);padding:var(--sp-4);position:relative;min-width:0}
  .b h2{font-size:var(--fs-2);margin-bottom:var(--sp-3)}
  .b.fort{background:var(--ink);color:#fff} .b.fort small,.b.fort .k{color:#DDD6FE}
  .b small,.k{display:block;color:var(--ink-2);font-size:var(--fs-0)}
  .cta,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--sp-4);border:2px solid var(--ink);border-radius:var(--radius);font-family:var(--font-display);font-weight:700}
  .cta{background:var(--accent);color:#fff;box-shadow:3px 3px 0 var(--ink)} .btn{background:var(--paper-2);color:var(--ink)}
  .b.fort .cta{box-shadow:3px 3px 0 var(--accent-2);border-color:#fff} .b.fort .btn{background:transparent;color:#fff;border-color:#fff}
  .large{width:100%} .rang{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
  .puce{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--paper-2);color:var(--ink);font-size:var(--fs-0);font-weight:600}
  .puce.sel{background:var(--ink);color:#fff}
  .brique{display:grid;gap:2px;width:100%;text-align:left;border:2px solid var(--ink);border-radius:8px;padding:10px 12px;margin-bottom:8px;min-height:48px;background:var(--paper);color:var(--ink)}
  .brique b{font-family:var(--font-display)} .brique.alerte{background:#FEF3C7}
  .liste li{padding:var(--sp-3) 0} .liste li+li{border-top:2px solid var(--ink)} .b.fort .liste li+li{border-top-color:#fff}
  .etq{display:inline-block;border:2px solid var(--ink);border-radius:999px;padding:1px 10px;font-size:var(--fs-0);font-weight:600;background:var(--paper-2);color:var(--ink)}
  .autoc{position:absolute;right:14px;top:-14px;background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--accent-2);border-radius:8px;padding:2px 10px;font-family:var(--font-display);font-size:var(--fs-0);font-weight:700;transform:rotate(3deg)}
  .champ{display:block;border:2px solid var(--ink);border-radius:8px;padding:11px 12px;background:var(--paper);min-height:48px;margin:4px 0 var(--sp-4);color:var(--ink)}
  .champ.vide{color:var(--ink-2)}
  /* baie de face */
  .rack{background:var(--ink);border-radius:var(--radius);padding:8px;display:grid;gap:4px}
  .u{display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px}
  .u>i{font-style:normal;font-size:.75rem;color:#DDD6FE;display:grid;place-items:center}
  .el{display:grid;gap:5px;width:100%;text-align:left;min-height:52px;padding:6px 8px;border-radius:6px;background:var(--paper-2);color:var(--ink)}
  .el.h2{min-height:108px;align-content:center} .el.sel{box-shadow:0 0 0 3px var(--accent-2)}
  .el.libre{background:transparent;border:2px dashed #DDD6FE;color:#DDD6FE}
  .el .n{display:flex;justify-content:space-between;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.875rem}
  .el .n span{font-family:var(--font-body);font-weight:400;font-size:.75rem;color:var(--ink-2)} .el.libre .n span{color:#DDD6FE}
  .mp{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:2px}
  .mp span{height:9px;border-radius:2px;border:1px solid var(--ink);background:var(--paper)}
  .mp .on{background:#22C55E} .mp .roc{background:var(--accent)} .mp .hs{background:#DC2626} .mp .pr{background:var(--line)}
  /* identifiants */
  .acc{display:grid;gap:6px;padding:var(--sp-3) 0} .acc+.acc{border-top:2px solid var(--ink)}
  .mdp{font-family:ui-monospace,Menlo,monospace;font-size:1rem;letter-spacing:.06em;border:2px solid var(--ink);border-radius:8px;padding:9px 12px;background:var(--paper);overflow-wrap:anywhere}
  .mdp.vu{background:#FEF3C7;letter-spacing:0}
  .acts{display:flex;gap:var(--sp-2);flex-wrap:wrap} .acts .btn{min-height:44px}
  /* interrupteur */
  .inter{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);width:100%;min-height:48px;text-align:left;color:inherit}
  .inter u{flex:none;width:52px;height:30px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);position:relative;text-decoration:none}
  .inter u::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--ink)}
  .inter.on u{background:var(--accent-2)} .inter.on u::after{left:25px}
  .avert{background:#FEF3C7;color:#422006;border:2px solid var(--ink);border-radius:8px;padding:var(--sp-3);margin-top:var(--sp-3)}
  .coche{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;text-align:left;color:var(--ink)}
  .coche u{flex:none;width:22px;height:22px;border:2px solid var(--ink);border-radius:5px;display:grid;place-items:center;text-decoration:none;font-weight:700;font-size:.875rem}
  .coche.on u{background:var(--ink);color:#fff}
  .feuille{aspect-ratio:210/297;max-width:260px;margin-inline:auto;background:#fff;color:#1e1b4b;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--accent-2);padding:16px;display:grid;grid-template-rows:auto 1fr auto;gap:8px}
  .feuille .logo{width:44px;height:44px;border:2px solid var(--ink);border-radius:8px;background:var(--line)}
  .feuille h3{font-size:1.25rem;align-self:center} .feuille .pied{font-size:.625rem;border-top:2px solid #DC2626;padding-top:6px;color:#991B1B;font-weight:700}
  .sq{height:14px;border-radius:6px;background:var(--line);margin-bottom:10px} .sq.c{width:60%}
  .grille2{display:grid;gap:8px}
  @media (min-width:900px){
    body{padding-bottom:0}
    .nav{position:static;display:flex;gap:4px;background:var(--ink);border:0;padding:8px var(--sp-8)}
    .nav a{min-height:44px;padding:0 18px;border-radius:8px;color:#fff;font-size:.9375rem} .nav a.sel{background:#fff;color:var(--ink)}
    .top{padding:var(--sp-6) var(--sp-8) var(--sp-7)}
    .bento{grid-template-columns:repeat(12,minmax(0,1fr));padding:0 var(--sp-8) var(--sp-7);align-items:start}
    .s4{grid-column:span 4} .s5{grid-column:span 5} .s6{grid-column:span 6} .s7{grid-column:span 7} .s8{grid-column:span 8} .s12{grid-column:span 12}
    .acc{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:center;gap:var(--sp-4)} .acc .vis{grid-column:1/-1}
    .grille2{grid-template-columns:1fr 1fr}
  }

/* Lot 1 : formulaires, listes, barre de compte. Mêmes jetons que « Blocs ». */
.nav{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.top{position:relative}
.top .barre{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;justify-content:space-between;margin-top:var(--sp-4)}
.top .barre form{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.top .barre .btn{background:var(--paper-2);color:var(--ink);min-height:44px}
.top .compte{font-size:var(--fs-0);color:#fff}
.top .selecteur label{font-size:var(--fs-0);color:#fff}
.top .selecteur select{min-height:44px;border:2px solid var(--ink);border-radius:8px;background:var(--paper-2);color:var(--ink);padding:0 var(--sp-3);max-width:100%}
.centre{max-width:560px;width:100%;margin-inline:auto}
.etiquette{display:block;font-family:var(--font-display);font-weight:700;font-size:var(--fs-0);margin-top:var(--sp-3)}
input.champ,select.champ,textarea.champ{width:100%;font:inherit}
textarea.champ{resize:vertical}
.champ.court{max-width:260px}
.cta{cursor:pointer;margin-top:var(--sp-3)}
.cta.large,.btn.large{width:100%}
.btn.danger{background:#FEE2E2;color:#7F1D1D}
.vide{color:var(--ink-2);padding:var(--sp-3) 0}
.liste-cartes li{margin-bottom:var(--sp-2)}
a.brique{text-decoration:none}
.brique.partage{cursor:default}
.groupe{border:0;padding:0;margin:var(--sp-3) 0}
.groupe legend{padding:0}
.groupe .puce{cursor:pointer;margin:0 var(--sp-2) var(--sp-2) 0;gap:var(--sp-2)}
.groupe .puce input{width:20px;height:20px;accent-color:var(--accent)}
.groupe .puce:has(input:checked){background:var(--ink);color:#fff}
.groupe .puce:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.en-ligne{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:end}
.en-ligne .champ{margin:0}
.sous-form{margin-top:var(--sp-3)}
.fiche{display:grid;gap:var(--sp-1);margin:0}
.fiche dt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-0);color:var(--ink-2);margin-top:var(--sp-3)}
.fiche dd{margin:0;overflow-wrap:anywhere}
.liste li small{display:block}
.liste li b{font-family:var(--font-display)}
.avert{margin-bottom:var(--sp-3)}
.b{overflow-wrap:anywhere}

/* Lot 2 : lieux (liste, arbre), écrans d'organisation. Mêmes jetons que « Blocs ». */
.nav:has(a:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
.arbre,.arbre ul{list-style:none;margin:0;padding:0}
.arbre li{margin-bottom:var(--sp-2)}
.arbre .niv1{margin-left:var(--sp-4);border-left:4px solid var(--ink);padding-left:var(--sp-3)}
.arbre .niv2{margin-left:calc(2*var(--sp-4));border-left:4px solid var(--ink);padding-left:var(--sp-3)}
.arbre .niv3{margin-left:calc(3*var(--sp-4));border-left:4px solid var(--ink);padding-left:var(--sp-3)}
.repere-lieu{display:grid;gap:2px;border:2px dashed var(--ink-2);border-radius:8px;padding:10px 12px;min-height:48px;color:var(--ink-2);background:transparent}
.repere-lieu b{font-family:var(--font-display)}
.brique.archive{opacity:.65}
.brique.ligne-action{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;justify-content:space-between}
.brique.ligne-action a{flex:1 1 140px;min-height:44px;display:flex;align-items:center}
.brique.ligne-action .btn{min-height:44px}
.coche-ligne{display:flex;align-items:center;gap:var(--sp-2);min-height:44px;margin:var(--sp-2) 0}
.coche-ligne input{width:22px;height:22px;accent-color:var(--accent)}
.chiffres{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-2);list-style:none;margin:var(--sp-3) 0;padding:0}
.chiffres li{border:2px solid var(--ink);border-radius:8px;padding:var(--sp-3);background:var(--paper)}
.chiffres b{font-family:var(--font-display);font-size:var(--fs-3,1.75rem);display:block}
.b h2{margin-top:var(--sp-4)}

/* Lot 3 : repérage (baie de face, façade de switch, bandeau, fiche de port, recherche, impression).
   Mêmes jetons que « Blocs ». Aucune règle ne dépend d'un style en ligne (politique de contenu stricte). */
.nav:has(a:nth-child(7)){grid-template-columns:repeat(4,minmax(0,1fr))}
/* couleurs de port (HTML : fond ; SVG : remplissage) */
.r-acces.e-actif{--c:#BBF7D0}
.r-acces.e-eteint{--c:#FFFFFF}
.r-acces.e-inconnu{--c:#EDE9FE}
.r-wifi{--c:#FBCFE8}
.r-telephone{--c:#FDE68A}
.r-rocade{--c:#7C3AED}
.r-libre{--c:#FFFFFF}
.r-hors_service{--c:#FECACA}
/* vue de face de la baie (SVG) */
.baie-vue{max-width:420px;width:100%;margin:var(--sp-3) auto}
.baie-svg{width:100%;height:auto;overflow:hidden}
.baie-svg text{font-family:var(--font-body)}
.sv-cadre{fill:var(--ink)}
.sv-unum{fill:var(--ink-2);font-size:12px;text-anchor:middle}
.sv-el{fill:#fff;stroke:var(--ink);stroke-width:2}
.sv-el-onduleur,.sv-el-serveur,.sv-el-autre{fill:#F1F5F9}
.sv-el-bandeau{fill:#F5F3FF}
.sv-nom{fill:var(--ink);font-size:14px;font-weight:700}
.sv-sub{fill:var(--ink-2);font-size:11px}
.sv-libre{fill:none;stroke:#DDD6FE;stroke-width:2;stroke-dasharray:5 4}
.sv-libre-txt{fill:#DDD6FE;font-size:13px}
.sv-pt{fill:var(--c,#fff);stroke:var(--ink);stroke-width:1}
.sv-pt.r-libre{stroke-dasharray:2 1}
.sv-pt.pb-repere{fill:#DDD6FE}
.baie-svg a:focus-visible{outline:3px solid var(--accent-2)}
.baie-svg a:hover .sv-el{stroke:var(--accent);stroke-width:3}
/* façade de switch et de bandeau (HTML : cibles de 56 px, retour à la ligne, jamais de débordement) */
.facade{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px;list-style:none;margin:var(--sp-3) 0;padding:0}
.facade li{min-width:0}
.port{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:56px;padding:4px 2px;border:2px solid var(--ink);border-radius:8px;background:var(--c,#fff);color:var(--ink);overflow:hidden;text-decoration:none}
.port b{font-family:var(--font-display);font-size:1.0625rem;line-height:1.1}
.port small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;line-height:1.2;color:inherit}
.port.r-libre{border-style:dashed}
.port.r-rocade{color:#fff}
.port.r-hors_service{border-style:double;border-width:4px}
.port .sfp{position:absolute;top:1px;right:2px;padding:0 2px;border:1px solid currentColor;border-radius:3px;font-size:.5625rem;font-style:normal;font-weight:700;line-height:1.2}
.port:focus-visible{outline:3px solid var(--accent-2);outline-offset:1px}
.port.prise{background:#fff}
.port.prise.repere{background:#DDD6FE}
.port.prise.libre{border-style:dashed}
.legende{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);list-style:none;margin:var(--sp-3) 0;padding:0}
.legende li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-0)}
.pastille{display:inline-block;flex:none;width:20px;height:20px;border:2px solid var(--ink);border-radius:5px;background:var(--c,#fff)}
.pastille.r-libre{border-style:dashed}
.pastille.r-hors_service{border-style:double}
/* chaîne complète d'un port */
.chaine{list-style:none;margin:var(--sp-3) 0 var(--sp-3) var(--sp-3);padding:0 0 0 var(--sp-5);border-left:4px solid var(--ink)}
.maillon{position:relative;display:grid;gap:2px;margin-bottom:var(--sp-4)}
.maillon::before{content:"";position:absolute;left:calc(-1*var(--sp-5) - 12px);top:4px;width:16px;height:16px;border-radius:50%;background:var(--accent-2);border:3px solid var(--paper-2)}
.maillon b{font-family:var(--font-display);font-size:var(--fs-2);overflow-wrap:anywhere}
.maillon a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.maillon span{color:var(--ink-2);font-size:var(--fs-0);overflow-wrap:anywhere}
.maillon.absent b{color:var(--ink-2);font-weight:400;font-style:italic}
.maillon.absent::before{background:var(--paper-2);border:3px dashed var(--ink-2)}
.historique li{display:grid;gap:2px;padding:var(--sp-2) 0;border-bottom:2px solid var(--ink)}
.historique li:last-child{border-bottom:0}
.historique span{overflow-wrap:anywhere}
/* liens dans les textes et listes */
.b p.muted a,.brique small a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.brique.statique{cursor:default}
.masque{font-style:italic;color:var(--ink-2)}
.recherche .en-ligne{flex-wrap:nowrap}
.recherche .en-ligne .champ{flex:1 1 auto;min-width:0}
.recherche .cta{margin-top:0;margin-bottom:var(--sp-4)}
/* feuille d'impression et étiquettes */
.etiquettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2);list-style:none;margin:var(--sp-3) 0;padding:0}
.etiquette-port{display:grid;gap:2px;border:2px solid var(--ink);border-radius:6px;padding:var(--sp-2);font-size:var(--fs-0);overflow-wrap:anywhere;background:#fff}
.etiquette-port b{font-family:var(--font-display)}
@media print{
  @page{margin:12mm}
  html,body{background:#fff;color:#000;padding:0}
  .nav,.top .barre,.no-print,.legende{display:none!important}
  .top{background:none;color:#000;padding:0 0 6mm}
  .top h1,.top .fil,.top p,.top .compte{color:#000}
  .top .repere::before,.top .repere::after,.top .repere-dot{display:none}
  .bento{display:block;margin:0;padding:0;max-width:none}
  .b{border:0;box-shadow:none;padding:0;background:#fff}
  .b a{text-decoration:none;color:#000}
  .baie-vue{max-width:140mm}
  .sv-cadre{fill:#444}
  .port{border-color:#000;color:#000;background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .port.r-rocade{background:#555;color:#fff}
  .facade{grid-template-columns:repeat(auto-fill,minmax(16mm,1fr))}
  .etiquettes{grid-template-columns:repeat(3,1fr);gap:3mm}
  .etiquette-port{border:1px solid #000;break-inside:avoid;padding:2mm}
  .saut{break-before:page}
  h2,h3{break-after:avoid}
}
@media (max-width:899px){
  body:has(.nav a:nth-child(6)){padding-bottom:128px}
}

/* Lot 4 : relevé et propositions. Mêmes jetons que « Blocs » ; cibles de 44 px au moins ; retour à la ligne partout. */
.ok{background:#DCFCE7;color:#14532D;border:2px solid var(--ink);border-radius:8px;padding:var(--sp-3);margin:var(--sp-3) 0}
.resume{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2);list-style:none;margin:var(--sp-3) 0;padding:0}
.resume li{border:2px solid var(--ink);border-radius:8px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-0);overflow-wrap:anywhere}
.resume b{display:block;font-family:var(--font-display);font-size:var(--fs-3)}
.prop-port{margin-top:var(--sp-4)}
.prop-port h3 a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.propositions{list-style:none;margin:0;padding:0}
.propositions li{display:grid;gap:var(--sp-2);padding:var(--sp-3) 0;border-bottom:2px solid var(--ink)}
.propositions li:last-child{border-bottom:0}
.prop-champ{font-family:var(--font-display);font-weight:700;overflow-wrap:anywhere}
.prop-champ a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
.prop-valeurs{overflow-wrap:anywhere}
.prop-valeurs small{display:block;margin-top:2px}
.propositions .acts form{margin:0}
.propositions .acts .btn{min-width:120px}
.roles-ports{list-style:none;margin:var(--sp-3) 0;padding:0}
.roles-ports li{display:grid;gap:2px;padding:var(--sp-2) 0;border-bottom:2px solid var(--ink)}
.roles-ports li:last-child{border-bottom:0}
.roles-ports a{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;overflow-wrap:anywhere}
.roles-ports span{color:var(--ink-2);font-size:var(--fs-0)}
@media (min-width:768px){.propositions li{grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:center}}

/* Lot 6 : identifiants, double vérification. Mêmes jetons ; cibles de 44 px au moins ; retour à la ligne partout. */
.identifiants .identifiant{display:grid;gap:var(--sp-2);padding:var(--sp-3) 0}
.id-titre{display:grid;gap:2px;overflow-wrap:anywhere}
.masque{margin:0;padding:var(--sp-2) var(--sp-3);border:2px solid var(--ink);border-radius:8px;background:var(--paper);letter-spacing:.2em;min-height:44px;display:flex;align-items:center}
.etat-copie{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-0);overflow-wrap:anywhere}
.secret-visible,.secret-cle code,.codes-secours code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-all}
.secret-visible{display:block;padding:var(--sp-3);border:2px solid var(--ink);border-radius:8px;background:#FEF3C7;font-size:var(--fs-2)}
.secret-cle{overflow-wrap:anywhere}
.secret-cle code{display:block;padding:var(--sp-2);border:2px solid var(--ink);border-radius:8px;background:var(--paper)}
.codes-secours{list-style:none;margin:var(--sp-3) 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sp-2)}
.codes-secours li{border:2px solid var(--ink);border-radius:8px;padding:var(--sp-2) var(--sp-3);text-align:center;background:var(--paper)}
.etapes{padding-left:1.25rem;display:grid;gap:var(--sp-2)}
@media (min-width:768px){.identifiants .identifiant{grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;align-items:center}}