/* The service shell of runward hosted, from the preview of 2026-11-06 (app.css), composed of the tokens of
   web/tokens.css only: no colour, font, radius or motion value is written here. The preview's annotation
   band (.apercu) is not part of the product and is not carried over. */


/* la bande d'aperçu : hors produit, pointillée pour se lire comme une annotation */

.brand-sep{ color:var(--soft); }
.who{ font-size:13px; color:var(--soft); }
nav.svc{ display:flex; gap:16px; font-size:14px; }
nav.svc a{ text-decoration:none; color:var(--soft); padding:2px 0; border-bottom:2px solid transparent; }
nav.svc a[aria-current="page"]{ color:var(--fg); border-bottom-color:var(--fg); }
.top .rv b{ white-space:nowrap; }

/* boutons fins, 36 px, deux rangs seulement */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--h-btn); padding:0 16px; border-radius:var(--radius);
  font:inherit; font-size:var(--fs-ui); font-weight:var(--fw-strong); cursor:pointer; text-decoration:none; border:1px solid var(--fg); background:var(--fg); color:var(--bg); }
.btn:hover{ text-decoration:none; opacity:.9; }
.btn-q{ background:transparent; color:var(--fg); border-color:var(--hair2); font-weight:400; }
.btn-q:hover{ border-color:var(--fg); opacity:1; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.actions{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px; }

/* formulaire */
label.f{ display:block; margin:0 0 14px; }
label.f .k{ margin-bottom:4px; }
input.in{ width:100%; min-height:var(--h-field); padding:6px 10px; font:inherit; font-size:15px; color:var(--fg); background:transparent; border:1px solid var(--hair2); border-radius:var(--radius); }
input.in:focus-visible{ outline:2px solid var(--fg); outline-offset:1px; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:14px; margin:0 0 14px; }
.check input{ margin-top:3px; width:16px; height:16px; accent-color:currentColor; }

/* deux colonnes de composition ; la liste reste symétrique */
.split{ display:grid; gap:28px; grid-template-columns:1fr; }
@media (min-width: 960px){ .split{ grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:48px; } }
.split > *{ min-width:0; }
.split > aside{ align-self:start; }

/* étapes : une vraie séquence, donc numérotée */
ol.steps{ list-style:none; padding:0; margin:0; counter-reset:s; }
ol.steps > li{ counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:4px 12px; padding:18px 0; border-top:1px solid var(--hair); }
ol.steps > li:last-child{ border-bottom:1px solid var(--hair); }
ol.steps > li::before{ content:counter(s, decimal-leading-zero); font-family:var(--mono); font-size:var(--fs-releve); letter-spacing:.06em; color:var(--soft); padding-top:4px; }
ol.steps h3{ font-size:16px; font-weight:500; margin:0 0 8px; letter-spacing:-.01em; }
ol.steps .body{ min-width:0; }

/* lignes du journal et des accès : grille fixe, jamais asymétrique */
.jrow{ display:grid; grid-template-columns:1fr; gap:6px 20px; padding:14px 0; border-top:1px solid var(--hair); font-size:14px; }
.jrow:last-child{ border-bottom:1px solid var(--hair); }
@media (min-width: 860px){ .jrow{ grid-template-columns:64px minmax(150px,.9fr) minmax(200px,1.4fr) minmax(170px,1fr) minmax(160px,1fr); align-items:start; } }
.jrow > *{ min-width:0; overflow-wrap:anywhere; }
.jref{ grid-column:1 / -1; border-left:2px solid var(--fg); padding:2px 0 2px 12px; }
@media (min-width: 860px){ .jref{ grid-column:2 / -1; } }
.jrow.headrow{ color:var(--soft); font-size:12px; padding:6px 0; }

.arow{ display:grid; grid-template-columns:1fr; gap:8px 20px; padding:14px 0; border-top:1px solid var(--hair); font-size:14px; }
.arow:last-of-type{ border-bottom:1px solid var(--hair); }
@media (min-width: 760px){ .arow{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(180px,260px); align-items:center; } .arow > :nth-child(3){ justify-self:end; text-align:right; } }
.arow > *{ min-width:0; overflow-wrap:anywhere; }
.arow .nm{ font-weight:500; }

.confirm{ border-left:2px solid var(--fg); padding:12px 0 4px 14px; margin:10px 0 0; grid-column:1 / -1; }
.confirm p{ max-width:62ch; }
.note{ font-size:14px; color:var(--soft); max-width:70ch; }
.lede{ max-width:60ch; }

/* galerie des états : chaque état dans un cadre annoté */
.etat{ border:1px dashed var(--hair2); border-radius:var(--radius); padding:16px 18px 18px; margin:0 0 18px; }
.etat > .rv{ display:block; margin-bottom:12px; }
.etat h3{ font-size:18px; font-weight:400; letter-spacing:-.01em; margin:0 0 8px; }
.etat p{ max-width:66ch; }

/* chargement : une ligne qui respire, et qui s'arrête en mouvement réduit */
.charge{ height:1px; background:var(--hair2); position:relative; overflow:hidden; margin:14px 0; max-width:420px; }
.charge::after{ content:""; position:absolute; inset:0 auto 0 0; width:30%; background:var(--fg); animation:charge var(--dur-load) var(--ease-load) infinite; }
@keyframes charge{ from{ transform:translateX(-100%); } to{ transform:translateX(340%); } }
.squelette{ height:14px; background:var(--panel); border-radius:var(--radius); margin:10px 0; }

/* the first arrival shows its final state: no entrance animation (family rule) */
.scene{ background:var(--panel); border-radius:var(--radius); padding:14px; }
.scene .term{ min-height:96px; white-space:normal; }
.scene .mrow{ padding:12px 0 4px; border-top:1px solid var(--hair2); border-bottom:none; }

@media (prefers-reduced-motion: reduce){
  .charge::after{ animation:none; width:100%; opacity:.25; }
}
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

h1.v, .face{ text-wrap:balance; }
.btn, nav.svc a{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.skip:focus{ position:fixed; left:16px; top:8px; width:auto; height:auto; clip:auto; z-index:100; background:var(--bg); padding:6px 10px; border:1px solid var(--fg); }

/* v2 : ajouts de la révision du 2026-11-06 (aucune couleur nouvelle : les jetons seuls) */
@media (min-width: 760px){ .apercu .detail{ display:inline; } }
@media (max-width: 599px){ .top .rv{ display:none; } .top .wrap{ padding-top:12px; padding-bottom:8px; } }
.who{ display:inline-flex; gap:10px; align-items:baseline; }
.lien-btn{ font:inherit; font-size:inherit; color:inherit; background:none; border:0; padding:0; text-decoration:underline; text-underline-offset:3px; cursor:pointer; touch-action:manipulation; }
.lien-btn:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible, .tw:focus-visible, #nav:focus-visible, pre.term:focus-visible{ outline:2px solid var(--fg); outline-offset:2px; }
nav.views{ position:relative; }
@media (max-width: 759px){ nav.views::after{ content:""; position:absolute; right:0; top:0; bottom:1px; width:28px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--bg)); } }
#bandeaux:empty{ display:none; }
.bandeau{ border:1px solid var(--fg); border-radius:var(--radius); padding:12px 14px 2px; margin:14px 0 0; }
.bandeau p{ margin:0 0 10px; max-width:80ch; }
.avert{ border-left:2px dashed var(--fg); padding:4px 0 4px 12px; font-size:14px; max-width:70ch; }
.erreur{ border-left:2px solid var(--fg); padding:4px 0 4px 12px; font-size:14px; max-width:70ch; }
.err{ display:block; font-size:13px; margin-top:4px; }
.intent{ border-left:2px solid var(--fg); padding:6px 0 6px 12px; max-width:60ch; }
.explique{ display:grid; grid-template-columns:32px 1fr; gap:12px; align-items:start; margin:14px 0; max-width:62ch; }
.explique p{ margin:0; }
.ico{ display:block; }
ul.effets, ul.limites{ padding-left:18px; max-width:70ch; }
ul.effets li, ul.limites li{ margin:0 0 6px; }
.pied{ border-top:1px solid var(--hair); margin-top:40px; padding:16px 0 28px; font-size:13px; }
.pied a{ color:inherit; }
.prov-tete{ margin:-18px 0 22px; overflow-wrap:anywhere; }
.releve h2.h-releve{ font-size:16px; font-weight:500; margin:0 0 10px; }
.releve table th[scope="row"]{ font-weight:500; }
.releve .tw{ margin-bottom:8px; }
ol.steps > li.ferme h3{ color:var(--soft); }
.ferme-note{ margin:0; }
.sim{ margin-top:10px; }
.sim a, .sim .lien-btn{ text-transform:none; letter-spacing:0; font-family:var(--font); font-size:13px; }
.copie{ display:block; overflow-wrap:anywhere; user-select:all; }
fieldset.choix{ border:0; padding:0; margin:0 0 10px; }
.mis{ display:grid; gap:0 16px; grid-template-columns:1fr; }
@media (min-width: 600px){ .mis{ grid-template-columns:1fr 1fr; } }
ol.journal{ list-style:none; margin:0 0 14px; padding:0; }
ol.journal > li.jrow:last-child{ border-bottom:1px solid var(--hair); }
.jrow > .prov{ grid-column:1 / -1; }
@media (min-width: 860px){ .jrow > .prov{ grid-column:2 / -1; } }
.prov summary{ cursor:pointer; font-size:13px; color:var(--soft); }
.prov[open] summary{ margin-bottom:8px; }
table.claims th{ text-align:left; white-space:nowrap; padding-right:16px; vertical-align:top; }
table.claims td{ overflow-wrap:anywhere; }
.fin{ margin:0; align-self:center; }
.lien h1.v{ max-width:18ch; }
.releve table th, .releve table td, table.claims th, table.claims td{ vertical-align:top; }
@media (max-width: 759px){
  .releve .tw{ overflow:visible; }
  .releve table, .releve tbody, .releve tr, .releve th, .releve td{ display:block; }
  .releve thead{ display:none; }
  .releve tr{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px 14px; padding:10px 0; border-top:1px solid var(--hair); }
  .releve th[scope="row"]{ grid-column:1 / -1; padding:0; border:0; }
  .releve td{ padding:0; border:0; }
  .releve td:last-child{ grid-column:1 / -1; }
}
.releve-d > summary{ cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; margin-bottom:10px; }
.releve-d > summary::-webkit-details-marker{ display:none; }
.releve-d > summary .h-releve{ margin:0; display:inline; }
.releve-d > summary::before{ content:"+"; font-family:var(--mono); color:var(--soft); }
.releve-d[open] > summary::before{ content:"−"; }
@media (max-width: 759px){ .releve th, .releve td{ border:0 !important; } }

/* every relevé in Departure Mono at one size, the fleet views' included (their stylesheet says 11 and 10 px) */
.rv, .chart text{ font-size:var(--fs-releve); }

/* ============================================================================================================
   Direction A, « la coque » (the author's choice of 2026-11-06): the public home, the signed-in shell with its
   sidebar, the fleet's dashboard, a mission's page. From the preview's v3 block, composed of the tokens only;
   the preview's animated showcase and its example screens are not carried over (no example data on the
   service's screens), nor any entrance animation (family rule). */
/* marques ajoutées : losange plein hors puce, étiquette d'état en ligne */
.mk-inv{ border-radius:var(--r-mark); transform:rotate(45deg) scale(.86); background:currentColor; }
.etq{ display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:14px; }

/* ---------- la marque ---------- */
.marque{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.marque svg{ width:20px; height:20px; flex:none; }

/* ---------- en-tête : public (déconnecté) et téléphone (connecté) ---------- */
.top .wrap{ align-items:center; }
nav.pub{ display:flex; gap:20px; font-size:14px; }
.lien-nav{ font:inherit; font-size:14px; color:var(--soft); background:none; border:0; padding:0; cursor:pointer; white-space:nowrap; }
.lien-nav:hover{ color:var(--fg); }
.top-act{ display:flex; gap:10px; margin-left:auto; }
.top-act:empty{ display:none; }
.top-act + .mob + .theme, .top-act:empty ~ .theme{ margin-left:0; }
details.mob{ position:relative; margin-left:auto; }
details.mob > summary{ list-style:none; cursor:pointer; font-size:13px; border:1px solid var(--hair2); padding:3px 10px; border-radius:var(--radius); }
details.mob > summary::-webkit-details-marker{ display:none; }
details.mob > nav{ position:absolute; right:0; top:calc(100% + 6px); z-index:40; background:var(--bg); border:1px solid var(--hair2); border-radius:var(--radius); padding:8px; width:min(260px, calc(100vw - 32px)); max-height:70vh; overflow-y:auto; display:flex; flex-direction:column; }
details.mob > nav a, details.mob > nav .lien-btn{ display:flex; justify-content:space-between; padding:7px 8px; font-size:14px; text-decoration:none; color:var(--soft); text-align:left; }
details.mob > nav a[aria-current="page"]{ color:var(--fg); }
details.mob > nav .sec{ font-size:12px; color:var(--soft); margin:10px 8px 2px; }

@media (max-width:420px){ .top-act .btn:not(.btn-q){ display:none; } }

/* ---------- la coque connectée : barre latérale collante, seule la colonne défile avec la page ---------- */
.corps{ display:block; }
body.connecte .corps{ display:grid; grid-template-columns:232px minmax(0,1fr); align-items:start; }
.colonne{ min-width:0; }
/* the sidebar runs the whole height of the page with its rule; its content stays in view (sticky inside) */
.lat{ align-self:stretch; min-height:100vh; min-height:100dvh; border-right:1px solid var(--hair); }
.lat-in{ position:sticky; top:0; height:100vh; height:100dvh; overflow-y:auto; padding:14px 12px 12px; display:flex; flex-direction:column; gap:2px; }
.lat[hidden]{ display:none; }
.lat .marque{ padding:4px 8px 16px; font-weight:600; font-size:16px; letter-spacing:-.01em; }
.lat .marque span{ font-weight:300; }
.lat nav{ display:flex; flex-direction:column; gap:2px; }
.lat .sec{ font-size:12px; color:var(--soft); padding:14px 8px 4px; margin:0; }
.lat a.it{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:var(--h-nav); padding:0 8px; border-radius:var(--radius); color:var(--soft); text-decoration:none; font-size:14px; }
.lat a.it:hover{ background:var(--panel); color:var(--fg); }
.lat a.it[aria-current="page"]{ background:var(--panel); color:var(--fg); }
.lat .n0{ font-size:12px; color:var(--soft); font-variant-numeric:tabular-nums; }
.lat a.mis .etq{ font-size:13px; }
.lat .bas{ margin-top:auto; border-top:1px solid var(--hair); padding:12px 8px 0; font-size:12px; color:var(--soft); line-height:1.55; display:flex; flex-direction:column; gap:8px; }
.lat .bas b{ color:var(--fg); font-weight:500; }
.lat .bas-act{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
body.connecte .top{ display:none; }
body.connecte main.wrap, body.connecte #bandeaux.wrap{ max-width:1280px; margin:0; padding-left:28px; padding-right:28px; }
body.connecte main.wrap{ padding-top:28px; }
body.connecte .pied .wrap{ max-width:1280px; margin:0; padding-left:28px; padding-right:28px; }
@media (max-width:900px){
  body.connecte .corps{ display:block; }
  body.connecte .lat{ display:none; }
  body.connecte .top{ display:block; }
  body.connecte main.wrap, body.connecte #bandeaux.wrap, body.connecte .pied .wrap{ padding-left:var(--gut); padding-right:var(--gut); }
}
@media (min-width:901px){ body.connecte details.mob{ display:none; } }
details.mob[hidden]{ display:none; }

/* ---------- tableau de bord et page d'une mission ---------- */
.dash h1{ font-size:clamp(26px,2.4vw,34px); font-weight:500; letter-spacing:-.03em; line-height:1.1; margin:0 0 8px; overflow-wrap:anywhere; }
.titre-d{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; }
.titre-d .actions{ margin:0; }
.compteurs{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:22px; border:1px solid var(--hair); border-radius:var(--radius); }
.compteurs a{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; text-decoration:none; border-right:1px solid var(--hair); }
.compteurs a:last-child{ border-right:0; }
.compteurs a:hover{ background:var(--panel); }
.compteurs .v{ font-size:26px; font-weight:500; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums; }
.compteurs .etq{ font-size:13px; color:var(--soft); }
.sect{ margin-top:34px; }
.sect > header{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.sect h2{ font-size:17px; font-weight:500; letter-spacing:-.015em; margin:0; display:flex; gap:10px; align-items:baseline; }
.sect h2 span{ color:var(--soft); font-weight:400; font-size:14px; }
.sect > header a{ font-size:13px; color:var(--soft); }
.attente{ border:1px solid var(--hair2); border-radius:var(--radius); }
.att-r{ display:grid; grid-template-columns:170px minmax(0,1.5fr) minmax(0,1fr); gap:6px 24px; padding:16px 18px; border-bottom:1px solid var(--hair); }
.att-r:last-child{ border-bottom:0; }
.att-r > *{ min-width:0; }
.att-r .nm{ font-weight:500; margin:0 0 2px; overflow-wrap:anywhere; }
.att-r .nm a{ text-decoration:none; }
.att-r .nm a:hover{ text-decoration:underline; }
.att-r .cause{ color:var(--soft); margin:0; font-size:15px; }
.src{ font-size:12px; color:var(--soft); margin:6px 0 0; overflow-wrap:anywhere; }
.geste{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; justify-content:center; }
code.cmd{ background:var(--term); color:var(--chaux); padding:5px 9px; border-radius:var(--radius); font-size:12.5px; word-break:normal; white-space:nowrap; }
.duo-d{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:32px; }
.duo-d > *{ min-width:0; }
.ml{ border-top:1px solid var(--hair2); }
.ml .r{ display:grid; grid-template-columns:minmax(0,1.6fr) 160px minmax(0,1fr) 120px; gap:4px 14px; padding:11px 4px; border-bottom:1px solid var(--hair); font-size:14px; align-items:start; text-decoration:none; }
.ml a.r:hover{ background:var(--panel); }
.ml .h{ font-size:12px; color:var(--soft); padding:8px 4px; }
.ml .nm{ font-weight:500; overflow-wrap:anywhere; }
.sub{ display:block; font-size:12px; color:var(--soft); margin-top:2px; }
.ml .etq{ font-size:13px; }
.jour{ font-size:12px; color:var(--soft); margin:0 0 4px; }
ul.journal-d{ list-style:none; margin:0; padding:0; border-top:1px solid var(--hair2); }
ul.journal-d li{ display:grid; grid-template-columns:52px 18px minmax(0,1fr); gap:0 6px; padding:10px 0; border-bottom:1px solid var(--hair); font-size:14px; line-height:1.45; }
ul.journal-d .h{ color:var(--soft); font-variant-numeric:tabular-nums; font-size:13px; }
ul.journal-d .m{ padding-top:5px; display:flex; justify-content:center; }
ul.journal-d .m .mk{ font-size:13px; }
.recalc{ margin-top:34px; border-top:1px solid var(--hair); padding-top:14px; }
.recalc p{ max-width:90ch; margin:0; }
.recalc code{ word-break:normal; overflow-wrap:anywhere; }
.mission-d .fil-d{ margin:0 0 14px; }
.mission-d .fil-d a{ color:inherit; }
.mission-d h1{ margin-top:12px; }
.cause-g{ color:var(--soft); font-size:17px; max-width:62ch; margin:8px 0 0; }
.suivant{ margin-top:24px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 20px; align-items:center; padding:16px 18px; border:1px solid var(--hair2); border-radius:var(--radius); }
.suivant h3{ font-size:13px; font-weight:500; color:var(--soft); margin:0 0 4px; }
.suivant p{ margin:0 0 4px; max-width:70ch; }
.suivant p code{ white-space:nowrap; }
.manque{ border-top:1px solid var(--hair2); }
.manque .r{ display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:4px 16px; padding:10px 0; border-bottom:1px solid var(--hair); font-size:14px; }
.manque .r > *{ min-width:0; overflow-wrap:anywhere; }
dl.cl2{ display:grid; grid-template-columns:170px minmax(0,1fr); margin:0; border-top:1px solid var(--hair2); font-size:14px; }
dl.cl2 dt, dl.cl2 dd{ margin:0; padding:8px 0; border-bottom:1px solid var(--hair); }
dl.cl2 dt{ color:var(--soft); }
dl.cl2 dd{ overflow-wrap:anywhere; }
dl.cl2 dd .etq{ white-space:normal; }
.vue-fleet{ border-top:1px solid var(--hair2); padding-top:24px; margin-top:44px; }
@media (max-width:1100px){ .duo-d{ grid-template-columns:1fr; } }
@media (max-width:900px){
  .compteurs{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .compteurs a:nth-child(2){ border-right:0; }
  .compteurs a:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
  .att-r{ grid-template-columns:1fr; }
  .ml .h{ display:none; }
  .ml .r{ grid-template-columns:minmax(0,1fr) auto; }
  .ml .r > :nth-child(3), .ml .r > :nth-child(4){ grid-column:1 / -1; font-size:12px; }
  .manque .r{ grid-template-columns:minmax(0,1fr) auto; }
  .manque .r > :first-child{ grid-column:1 / -1; color:var(--soft); font-size:12px; }
  .suivant{ grid-template-columns:1fr; }
  .suivant code.cmd{ justify-self:start; white-space:normal; }
  dl.cl2{ grid-template-columns:120px minmax(0,1fr); }
}

/* ---------- l'accueil public ---------- */
main.nu{ max-width:none; margin:0; padding:0; }
.acc .wrap{ max-width:1240px; }
.acc h1{ font-size:clamp(38px,5.4vw,76px); line-height:1.02; letter-spacing:-.035em; font-weight:500; max-width:15ch; margin:0; }
.acc .hero{ padding:clamp(48px,8vw,104px) 0 0; }
.hero-g{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:end; }
.acc .lede{ margin:22px 0 0; font-size:clamp(16px,1.35vw,19px); line-height:1.5; color:var(--soft); max-width:56ch; }
.acc .hero .actions{ margin:30px 0 0; }
.acc .note{ margin-top:16px; font-size:13px; }
.btn-l{ min-height:40px; padding:0 18px; font-size:15px; }
.hero-rv{ text-align:right; padding-bottom:6px; margin:0; }

.acc{ padding-bottom:8px; }
.acc .bp{ padding:clamp(56px,8vw,112px) 0; }
.acc .hero{ padding-bottom:clamp(24px,4vw,48px); }
.hero-g{ align-items:center; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); }
.etats-a{ display:grid; gap:10px; }
.etat-a{ border:1px solid var(--hair); border-radius:var(--radius); padding:12px 14px; background:var(--panel); }
.etat-a p{ margin:6px 0 0; color:var(--soft); font-size:var(--fs-small); }
.pas-a{ margin-top:32px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.pas-a > *{ min-width:0; }
.pas h3{ font-size:var(--fs-h3); font-weight:var(--fw-strong); letter-spacing:var(--ls-h3); margin:10px 0 8px; }
.pas p{ color:var(--soft); margin:0 0 14px; }
.pas-e .term{ margin:0; }
.pas-e .etats-a{ gap:8px; }
.acc .bp.inverse{ background:var(--fg); color:var(--bg); padding-left:clamp(20px,4vw,56px); padding-right:clamp(20px,4vw,56px); border-radius:var(--radius); }
.inverse .ts{ color:var(--bg); }
.inverse p, .inverse .soft-i{ color:var(--soft-i); }
.inverse code{ color:var(--bg); }
.inv-w{ max-width:var(--max); }
.conf-g{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:40px; border-top:1px solid color-mix(in srgb, var(--bg) 35%, transparent); }
.conf-g > div{ padding:26px 28px 28px 0; border-bottom:1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.conf-g > div:nth-child(odd){ border-right:1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.conf-g > div:nth-child(even){ padding-left:28px; }
.conf-g h3{ font-size:var(--fs-h3); font-weight:var(--fw-strong); letter-spacing:var(--ls-h3); margin:0 0 8px; }
.conf-g p{ margin:0; max-width:48ch; }
.empr{ margin-top:36px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.empr .term{ margin:0; }
.compare{ border:1px solid color-mix(in srgb, var(--bg) 35%, transparent); border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:10px; justify-content:center; }
.compare .row{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; font-size:var(--fs-small); }
.compare .ok{ display:flex; gap:8px; align-items:center; font-weight:var(--fw-strong); padding-top:10px; border-top:1px solid color-mix(in srgb, var(--bg) 18%, transparent); }
.term .c{ color:var(--term-soft); }
.final-g{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:32px; align-items:end; }
.final-g .actions{ justify-content:flex-end; margin:0; }
dl.cl{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:6px 16px; font-size:var(--fs-small); margin:0; border:1px solid var(--hair); border-radius:var(--radius); padding:14px 16px; }
dl.cl dt{ color:var(--soft); } dl.cl dd{ margin:0; overflow-wrap:anywhere; }
.compteurs .cpt{ display:flex; flex-direction:column; gap:8px; padding:14px 16px; border-right:1px solid var(--hair); }
.lat .sec + nav .it[href="#/"]:only-child{ color:var(--soft); font-size:var(--fs-small); }
@media (max-width:900px){ .pas-a{ grid-template-columns:1fr; } .hero-g{ grid-template-columns:1fr; } }
@media (max-width:820px){ .conf-g{ grid-template-columns:1fr; } .conf-g > div, .conf-g > div:nth-child(even), .conf-g > div:nth-child(odd){ padding:22px 0; border-right:0; } .empr{ grid-template-columns:1fr; } .final-g{ grid-template-columns:1fr; } .final-g .actions{ justify-content:flex-start; } }

.ts{ font-size:var(--fs-h2); font-weight:var(--fw-strong); letter-spacing:var(--ls-h2); line-height:1.08; max-width:20ch; margin:0; }
.intro{ margin:16px 0 0; color:var(--soft); max-width:54ch; font-size:var(--fs-body); }
.top .wrap{ display:flex; align-items:center; flex-wrap:nowrap; gap:12px 20px; }
.top .theme{ flex:none; }
.top .marque{ flex:none; }
@media (max-width:560px){ .top .rv{ display:none; } }
.top-act .btn{ white-space:nowrap; }
@media (max-width:420px){ .top .wrap{ gap:8px; } .top-act .btn{ padding:0 10px; } .top .theme{ padding-left:8px; padding-right:8px; } }

/* the public header: its links on one line; below the width where they no longer fit, in the menu */
body:not(.connecte) details.mob{ display:none; }
@media (max-width:1060px){ nav.pub{ display:none; } body.public details.mob:not([hidden]){ display:block; } }
/* a phone, signed out: the brand, « Se connecter » and the menu; the theme moves into the menu */
.theme-m{ display:none; }
@media (max-width:480px){ body.public .top .wrap > .theme{ display:none; } body.public .theme-m{ display:flex; } }
/* code inside the service's prose breaks only when a long path must, never in the middle of a short word
   (the fleet stylesheet's break-all is right for digests in tables, wrong for « main » in a sentence) */
.face code, .lede code, .note code, p.small code, .avert code, .intent code{ word-break:normal; overflow-wrap:anywhere; }