/* ArtisanManager — feuille de style commune : composants, mise en page, téléphone et ordinateur.
   Le monde de l’interface : un tableau de bureau de chantier, des fiches dont la couleur dit ce que c’est (demande, visite,
   devis, facture, avoir, client), des aimants qui disent où en est chaque affaire, des étiquettes pour les rubriques.
   Couleurs et polices de la marque (ardoise, chaux, terre cuite, laiton ; Young Serif et Schibsted Grotesk) : public/css/theme.css,
   chargé après cette feuille, redéfinit les variables ci-dessous. Voir DESIGN.md.
   Règle : les modules ajoutent leurs styles dans public/css/<module>.css, jamais ici. */

:root {
  /* La marque ArtisanManager */
  --am-marine: #0B2A3C;         /* la nuit du chantier : étiquettes, boutons principaux, barre du haut */
  --am-marine-2: #173E55;       /* marine éclairci : survol */
  --am-sarcelle: #0E7C86;       /* le primaire : ce qui est actif, sélectionné, le focus (4,9:1 sur blanc, texte blanc dessus 4,9:1) */
  --am-sarcelle-2: #0A6169;     /* sarcelle foncé : texte et liens sur fond clair (7,2:1 sur blanc) */
  --am-sarcelle-pale: #DDEFF1;
  --am-orange: #F26B21;         /* orange sécurité : l'accent (« Manager » sur fond marine, 4,9:1). Jamais un texte blanc dessus (3:1) */

  /* Le mur, le tableau, le cadre : blancs et gris froids, du côté du bleu */
  --mur: #D4D8E4;
  --mur-2: #C7CCDA;
  --email: #F3F5F9;            /* tableau blanc émaillé */
  --carton: #FFFFFF;           /* le corps d'une fiche */
  --carton-2: #F7F8FC;         /* zone calme dans une fiche */
  --alu: #BCC2D0;
  --alu-clair: #E7EAF1;
  --alu-sombre: #8A91A4;
  --filet: #DDE0EA;
  --filet-fort: #B6BBCC;

  /* L'encre, tirée vers le marine */
  --encre: #12242F;
  --encre-2: #3D5361;          /* texte secondaire : 8,0:1 sur blanc */
  --encre-3: #566B78;          /* texte tertiaire : 5,6:1 sur blanc, 5,1:1 sur l'émail */

  /* Les fiches (couleur = type d'affaire) */
  --f-demande: #F7D35E;
  --f-visite: #F6B172;
  --f-devis: #B9D7EE;          /* bleu clair, en carton pâle */
  --f-facture: #A6DAB3;
  --f-avoir: #F4B8C5;
  --f-client: #DDE1EC;
  --f-mail: #D7CEF0;

  /* Les aimants (couleur = état) */
  --a-rouge: #E0141C;          /* le rouge : agir, en retard, refusé ; texte blanc 4,8:1 */
  --a-orange: #E0621C;         /* nouveau, à regarder */
  --a-ambre: #D9980B;          /* en attente */
  --a-bleu: #2A62D6;           /* envoyé, en cours */
  --a-vert: #1F8A50;           /* accepté, payé */
  --a-gris: #7E8497;           /* neutre */

  /* Textes d'état, lisibles sur blanc et sur l'émail */
  --t-rouge: #BE1219;
  --t-orange: #A8470E;
  --t-ambre: #7E5400;
  --t-bleu: #1D4F91;
  --t-vert: #166A3C;
  --bg-rouge: #FBE9EA;
  --bg-orange: #FDEEE3;
  --bg-ambre: #FCF3DA;
  --bg-bleu: #E8EFFB;
  --bg-vert: #E4F3E9;
  --bg-gris: #ECEEF4;

  /* Étiquettes de titreuse : ruban marine, ruban sarcelle pour ce qui est actif, ruban clair pour le reste */
  --ruban: var(--am-marine);
  --ruban-texte: #FFFFFF;
  --ruban-actif: var(--am-sarcelle);
  --ruban-clair: var(--am-sarcelle-pale);
  --ruban-jaune: #F7D35E;
  --rubalise: repeating-linear-gradient(-45deg, var(--a-rouge) 0 5px, #fff 5px 10px);

  --r: 6px;
  --r-sm: 4px;
  --r-xs: 3px;
  --ombre-fiche: 0 1px 1px rgba(11, 42, 60, .07), 0 2px 6px -2px rgba(11, 42, 60, .15);
  --ombre-tiree: 0 2px 3px rgba(11, 42, 60, .08), 0 12px 24px -10px rgba(11, 42, 60, .32);
  --ombre-ruban: 0 1px 1px rgba(11, 42, 60, .16);
  --ombre-lg: 0 18px 48px -12px rgba(11, 42, 60, .38);

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --etroit: 78%;               /* largeur des étiquettes */
  --mi-etroit: 90%;            /* largeur des titres */
  --ease: cubic-bezier(.16, 1, .3, 1);

  --tabbar-h: 62px;
  --rail-w: 232px;
  --gouttiere: 16px;

  /* Anciens noms, gardés pour les modules qui les citent encore */
  --plan: var(--am-marine);
  --plan-2: var(--am-marine-2);
  --plan-trait: var(--am-sarcelle-2);
  --sur-plan: var(--email);
  --sur-plan-doux: var(--filet-fort);
  --marque: var(--am-sarcelle);
  --marque-vif: var(--a-rouge);
  --marque-pale: var(--bg-ambre);
  --fond: var(--email);
  --surface: var(--carton);
  --surface-2: var(--carton-2);
  --trait: var(--filet);
  --trait-fort: var(--filet-fort);
  --encre-doux: var(--encre-2);
  --encre-pale: var(--encre-3);
  --info: var(--t-bleu);    --info-bg: var(--bg-bleu);
  --ok: var(--t-vert);      --ok-bg: var(--bg-vert);
  --warn: var(--t-ambre);   --warn-bg: var(--bg-ambre);
  --danger: var(--t-rouge); --danger-bg: var(--bg-rouge);
  --neutral: var(--encre-2); --neutral-bg: var(--bg-gris);
  --brand: var(--t-orange); --brand-bg: var(--bg-orange);
  --ombre: var(--ombre-fiche);
}

/* ─── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--alu-sombre) transparent; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; font-stretch: 100%;
  color: var(--encre); background: var(--email);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  caret-color: var(--am-sarcelle);
}
@media (min-width: 900px) { body { font-size: 15px; } }
::selection { background: #C9E4E7; color: var(--encre); }
a { color: var(--encre); text-decoration-color: rgba(14, 124, 134, .45); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
img, svg { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0; font-stretch: var(--mi-etroit); text-wrap: balance; }
h1 { font-size: 1.5rem; font-weight: 760; letter-spacing: -.012em; }
h2 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.004em; }
h3 { font-size: .9375rem; font-weight: 700; }
p { margin: 0 0 .6em; }
strong, b { font-weight: 680; }
hr { border: 0; border-top: 1px solid var(--filet); margin: 16px 0; }
code { font-family: var(--mono); font-size: .875em; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw { white-space: nowrap; }
.muted { color: var(--encre-3); }
.small { font-size: .875rem; }
.mono { font-family: var(--mono); font-size: .875em; }
.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: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 100; background: var(--carton); padding: 10px 14px; border-radius: var(--r-sm); box-shadow: var(--ombre-tiree); }
:focus-visible { outline: 2px solid var(--am-sarcelle); outline-offset: 2px; }
.ico { width: 20px; height: 20px; flex: none; }
[hidden] { display: none !important; }

/* ─── Étiquette de titreuse ─────────────────────────────────── */
.tape {
  display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 2px 8px;
  background: var(--ruban); color: var(--ruban-texte); border-radius: 1px;
  font-size: .75rem; font-weight: 720; font-stretch: var(--etroit); letter-spacing: .07em; text-transform: uppercase; line-height: 1.2;
  white-space: nowrap;
}
.tape-jaune { background: var(--ruban-jaune); color: var(--encre); }
.tape-bleu { background: var(--ruban-actif); color: #fff; }

/* ─── Aimants ───────────────────────────────────────────────── */
/* Pastille ronde, bombée par un simple reflet : l'état d'une fiche. */
.aimant {
  display: inline-grid; place-items: center; flex: none; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--a-rouge); color: #fff;
  font-size: .75rem; font-weight: 760; font-stretch: var(--mi-etroit); font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(11, 42, 60, .22), 0 1px 2px rgba(11, 42, 60, .28);
}
.aimant-sm { min-width: 18px; height: 18px; padding: 0 5px; font-size: .6875rem; }
.pastille {
  display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--a-gris);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(11, 42, 60, .25), 0 1px 1px rgba(11, 42, 60, .25);
}
.pastille-rouge { background: var(--a-rouge); }
.pastille-orange { background: var(--a-orange); }
.pastille-ambre { background: var(--a-ambre); }
.pastille-bleu { background: var(--a-bleu); }
.pastille-vert { background: var(--a-vert); }
.rubalise { display: inline-block; flex: none; width: 18px; height: 10px; border-radius: 2px; background: var(--rubalise); box-shadow: inset 0 0 0 1px rgba(190, 18, 25, .35); }

/* ─── Structure : le mur, le tableau, la barre d'onglets ────── */
body.app { background: var(--email); }
.rail { display: none; }
.topbar {
  position: sticky; top: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--gouttiere) 0; background: var(--am-marine); color: #fff;
}
.topbar .brand { color: #fff; }
.topbar .brand-mark { background: none; box-shadow: none; padding: 0; color: #fff; }
.board { position: relative; min-height: calc(100vh - 52px); padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px); }
.board-cap { display: none; }
.main { max-width: 1240px; margin: 0 auto; padding: 18px var(--gouttiere) 28px; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--encre); }
.brand-mark {
  display: inline-flex; align-items: center; height: 30px; padding: 0 9px; border-radius: 2px;
  background: var(--am-marine); color: #fff;
  font-weight: 820; font-stretch: 80%; letter-spacing: .06em; text-transform: uppercase; font-size: 1.0625rem; line-height: 1; font-style: normal;
}
.brand-name { font-weight: 820; font-stretch: 80%; letter-spacing: .06em; font-size: 1.0625rem; color: var(--am-marine); }
.topbar .brand-name { color: var(--am-orange); }
.brand-lg .brand-mark { height: 38px; font-size: 1.25rem; padding: 0 11px; }
.brand-lg .brand-name { font-size: 1.25rem; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 6px 6px env(safe-area-inset-bottom, 0px);
  background: var(--mur); border-top: 1px solid var(--alu-sombre); box-shadow: 0 -1px 0 rgba(255, 255, 255, .55) inset;
}
.tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--encre-2); text-decoration: none; min-height: 44px; border-radius: 3px;
  font-size: .6875rem; font-weight: 720; font-stretch: var(--etroit); letter-spacing: .06em; text-transform: uppercase;
}
.tabbar a > span:not(.aimant):not(.sr-only) { padding: 1px 6px; border-radius: 1px; }
.tabbar a.active { color: var(--am-marine); }
.tabbar a.active > span:not(.aimant):not(.sr-only) { background: var(--ruban-actif); color: #fff; }
.tabbar a .aimant { position: absolute; top: 2px; left: calc(50% + 6px); }

@media (min-width: 900px) {
  body.app { background: var(--mur); }
  .topbar, .tabbar { display: none; }
  .app-grid { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px 0; }
  .rail {
    display: flex; flex-direction: column; position: sticky; top: calc(12px + env(safe-area-inset-top, 0px)); height: calc(100vh - 24px - env(safe-area-inset-top, 0px));
    padding: 8px 14px 6px 18px; z-index: 40;
  }
  .rail .brand { padding: 4px 4px 22px; }
  /* La plaque de l'entreprise, vissée en tête du mur : le vrai logo. */
  .plaque {
    display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 20px; padding: 12px 10px 9px;
    background: var(--carton); border-radius: 3px; text-decoration: none;
    box-shadow: 0 1px 1px rgba(11, 42, 60, .08), 0 3px 8px -3px rgba(11, 42, 60, .22);
  }
  .plaque img { display: block; width: 100%; max-width: 178px; height: auto; }
  /* Sans logo : le nom de l'entreprise, en gros, sur la plaque. */
  .plaque-texte { padding: 14px 12px 10px; }
  .plaque-nom {
    display: block; max-width: 100%; text-align: center; overflow-wrap: anywhere; hyphens: auto;
    font-size: 1.0625rem; font-weight: 760; font-stretch: var(--mi-etroit); line-height: 1.2; letter-spacing: -.005em; color: var(--am-marine);
  }
  .plaque-app {
    font-size: .6875rem; font-weight: 760; font-stretch: var(--etroit); letter-spacing: .22em; text-transform: uppercase;
    color: var(--am-sarcelle);
  }
  .rail-nav { display: flex; flex-direction: column; gap: 7px; }
  .nav-link {
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 10px;
    border-radius: 1px; background: var(--ruban); color: rgba(255, 255, 255, .88); text-decoration: none;
    font-size: .8125rem; font-weight: 720; font-stretch: var(--etroit); letter-spacing: .07em; text-transform: uppercase;
    transition: transform .18s var(--ease), background-color .18s, color .18s;
  }
  .nav-link .ico { width: 18px; height: 18px; color: rgba(255, 255, 255, .62); }
  .nav-link:hover { color: #fff; background: var(--am-marine-2); transform: translateX(2px); }
  .nav-link:hover .ico { color: #fff; }
  .nav-link.active { background: var(--ruban-actif); color: #fff; transform: translateX(6px); }
  .nav-link.active .ico { color: #fff; }
  .nav-link .aimant { margin-left: auto; }
  .rail-foot { margin-top: auto; padding: 14px 4px 4px; font-size: .8125rem; color: var(--encre-2); }
  .rail-foot .who { display: block; font-weight: 650; color: var(--encre); margin-bottom: 2px; }
  .rail-foot .linklike { color: var(--encre-2); font-size: .8125rem; }

  /* Le tableau dans son cadre d'aluminium */
  .board {
    min-height: 0; padding-bottom: 0; border-radius: 10px; background: var(--email);
    border: 8px solid var(--alu);
    box-shadow: inset 0 0 0 1px #EEF0F6, inset 0 0 0 2px rgba(11, 42, 60, .16), 0 0 0 1px var(--alu-sombre), 0 16px 32px -18px rgba(11, 42, 60, .5);
  }
  .board-cap {
    display: block; position: absolute; z-index: 2; width: 18px; height: 18px; border-radius: 5px;
    background: #9CA3B5; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 1px rgba(11, 42, 60, .3);
  }
  .board-cap-tl { top: -12px; left: -12px; }
  .board-cap-tr { top: -12px; right: -12px; }
  .board-cap-bl { bottom: -12px; left: -12px; }
  .board-cap-br { bottom: -12px; right: -12px; }
  .main { padding: 26px 34px 44px; }
  h1 { font-size: 1.75rem; }
}

/* Bandeau de mode (simulation / test) en haut du tableau */
.mode-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px;
  padding: 8px var(--gouttiere); border-bottom: 1px solid var(--filet); background: var(--carton-2);
  font-size: .8125rem; color: var(--encre-2);
}
.mode-banner a { color: var(--encre); font-weight: 650; }
@media (max-width: 699px) { .mode-banner .mb-long { display: none; } }
@media (min-width: 900px) { .mode-banner { padding: 9px 34px; border-radius: 4px 4px 0 0; } }

/* ─── En-tête de page ───────────────────────────────────────── */
.page-head { margin-bottom: 18px; }
.back {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 0; min-height: 32px;
  color: var(--encre-2); text-decoration: none; font-size: .9375rem; font-weight: 600;
}
.back:hover { color: var(--am-sarcelle); text-decoration: underline; text-underline-offset: 3px; }
.back svg { width: 17px; height: 17px; }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; }
.page-head-row > div:first-child { min-width: 0; }
.page-head h1 { overflow-wrap: anywhere; }
.page-head .sub { color: var(--encre-2); margin: 5px 0 0; max-width: 80ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Fiche tirée du râtelier : l'en-tête d'un document porte la couleur de son type. */
.page-head.fiche-tete {
  position: relative; margin: 0 0 18px; padding: 14px 16px 0; border-radius: var(--r);
  background: var(--k, var(--f-client)); box-shadow: var(--ombre-fiche);
}
.page-head.fiche-tete .sub { color: rgba(11, 42, 60, .84); }
.page-head.fiche-tete .page-head-row { padding-bottom: 14px; }
.page-head.fiche-tete .btn-secondary { border-color: rgba(11, 42, 60, .3); }
.k-demande { --k: var(--f-demande); }
.k-visite { --k: var(--f-visite); }
.k-devis { --k: var(--f-devis); }
.k-facture { --k: var(--f-facture); }
.k-avoir { --k: var(--f-avoir); }
.k-client { --k: var(--f-client); }
.k-mail { --k: var(--f-mail); }
@media (min-width: 900px) { .page-head.fiche-tete { padding: 16px 22px 0; } .page-head.fiche-tete .page-head-row { padding-bottom: 16px; } }

/* Réglette des phases : les colonnes du planning, en petit, avec l'aimant là où en est l'affaire. */
.phases {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
  margin: 0 -16px; padding: 0; list-style: none; background: rgba(255, 255, 255, .55); border-radius: 0 0 var(--r) var(--r); overflow: hidden;
  border-top: 1px solid rgba(11, 42, 60, .12);
}
.phases li {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 10px 10px 12px;
  font-size: .75rem; font-weight: 700; font-stretch: var(--etroit); letter-spacing: .06em; text-transform: uppercase;
  color: var(--encre-2); border-left: 1px solid rgba(11, 42, 60, .12);
}
.phases li:first-child { border-left: 0; }
.phases li > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phases .ph-slot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(11, 42, 60, .45); }
.phases .ph-done { color: var(--encre); }
.phases .ph-done .ph-slot { border: 0; width: 12px; height: 12px; background: no-repeat center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3 4.8 8.8 9.8 3.4' fill='none' stroke='%2312242F' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.phases .ph-current { color: var(--encre); background: rgba(255, 255, 255, .75); }
.phases .ph-current .ph-slot { border: 0; width: 12px; height: 12px; background: var(--a-bleu); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(11, 42, 60, .3); }
.phases .ph-current.ph-ok .ph-slot { background: var(--a-vert); }
.phases .ph-current.ph-late .ph-slot { background: var(--a-rouge); }
.phases .ph-stop { color: var(--t-rouge); background: rgba(255, 255, 255, .75); }
.phases .ph-stop .ph-slot { border: 0; width: 12px; height: 12px; background: var(--a-rouge); }
@media (min-width: 900px) { .phases { margin: 0 -22px; } .phases li { padding-left: 16px; } }
@media (max-width: 519px) {
  .phases li { flex-direction: column; align-items: flex-start; gap: 5px; padding: 8px 6px 9px 8px; font-size: .6875rem; letter-spacing: .04em; }
}

/* ─── Boutons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 42px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: inherit; font-weight: 680; font-stretch: var(--mi-etroit); font-size: .9375rem; line-height: 1.1;
  text-decoration: none; cursor: pointer; white-space: nowrap; user-select: none;
  transition: background-color .15s, border-color .15s, box-shadow .18s var(--ease), transform .12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--am-marine); color: #fff; box-shadow: 0 1px 2px rgba(11, 42, 60, .3); }
.btn-primary:hover { background: var(--am-marine-2); box-shadow: 0 2px 6px -1px rgba(11, 42, 60, .45); }
.btn-secondary { background: var(--carton); color: var(--encre); border-color: var(--filet-fort); box-shadow: 0 1px 1px rgba(11, 42, 60, .06); }
.btn-secondary:hover { border-color: var(--am-sarcelle); color: var(--am-marine); }
.btn-ghost { background: transparent; color: var(--encre-2); }
.btn-ghost:hover { background: rgba(11, 42, 60, .06); color: var(--encre); }
.btn-danger { background: var(--carton); color: var(--t-rouge); border-color: #E2AEB3; }
.btn-danger:hover { background: var(--bg-rouge); border-color: var(--t-rouge); }
.btn-sm { min-height: 34px; padding: 0 12px; font-size: .875rem; }
.btn-block { width: 100%; }
.btn-wrap { white-space: normal; text-align: center; min-height: 42px; height: auto; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; box-shadow: none; }
form[data-submitting="1"] .btn[type="submit"] { opacity: .6; cursor: progress; }
@media (pointer: coarse) { .btn { min-height: 44px; } .btn-sm { min-height: 40px; } }
.inline-form { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--encre); text-decoration: underline; text-decoration-color: var(--alu-sombre); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { text-decoration-color: currentColor; }

/* ─── Fiches (cartes) et grilles ────────────────────────────── */
.card {
  background: var(--carton); border-radius: var(--r-sm); padding: 18px 16px; margin-bottom: 16px;
  box-shadow: var(--ombre-fiche), inset 0 0 0 1px rgba(11, 42, 60, .06);
}
@media (min-width: 700px) { .card { padding: 20px 22px; } }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
@media (min-width: 900px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
}
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ─── Réglette de chiffres (pas des tuiles) ─────────────────── */
.kpis {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 18px;
  border-top: 1px solid var(--filet-fort); border-bottom: 1px solid var(--filet-fort);
}
.kpi {
  position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 13px;
  color: inherit; text-decoration: none;
}
.kpi:nth-child(2n) { border-left: 1px solid var(--filet); }
.kpi:nth-child(n + 3) { border-top: 1px solid var(--filet); }
a.kpi:hover { background: rgba(255, 255, 255, .6); }
a.kpi:hover .kpi-label { text-decoration: underline; text-underline-offset: 3px; }
.kpi-label { font-size: .75rem; font-weight: 720; font-stretch: var(--etroit); letter-spacing: .07em; text-transform: uppercase; color: var(--encre-2); }
.kpi-value { font-size: 1.375rem; font-weight: 720; font-stretch: var(--mi-etroit); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.15; overflow-wrap: anywhere; }
.kpi-hint { font-size: .8125rem; color: var(--encre-3); overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kpi { padding: 13px 18px 14px; }
  .kpi + .kpi { border-left: 1px solid var(--filet); }
  .kpi:nth-child(n + 3) { border-top: 0; }
  .kpi:first-child { padding-left: 4px; }
}
.tone-danger { color: var(--t-rouge); } .tone-ok { color: var(--t-vert); } .tone-warn { color: var(--t-ambre); } .tone-brand { color: var(--t-orange); } .tone-info { color: var(--t-bleu); }

/* ─── Statuts : un aimant et un mot ─────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; line-height: 1.3;
  font-size: .8125rem; font-weight: 650; color: var(--encre);
}
.badge::before {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--a-gris);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(11, 42, 60, .25), 0 1px 1px rgba(11, 42, 60, .25);
}
.badge-neutral { color: var(--encre-2); }
.badge-info::before { background: var(--a-bleu); }
.badge-ok::before { background: var(--a-vert); }
.badge-warn::before { background: var(--a-ambre); }
.badge-danger::before { background: var(--a-rouge); }
.badge-danger { color: var(--t-rouge); }
.badge-brand::before { background: var(--a-orange); }
/* Le retard porte la rubalise, pas seulement une couleur. */
.badge[data-statut="en_retard"]::before { width: 18px; height: 10px; border-radius: 2px; background: var(--rubalise); box-shadow: inset 0 0 0 1px rgba(190, 18, 25, .35); }

/* ─── Formulaires ───────────────────────────────────────────── */
.form { display: grid; gap: 16px; }
.form-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; gap: 16px 18px; } .form-grid .field-wide { grid-column: 1 / -1; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 650; font-stretch: var(--mi-etroit); font-size: .875rem; color: var(--encre); }
.field .req { color: var(--t-rouge); }
.field .hint { font-size: .8125rem; color: var(--encre-3); margin: 0; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local],
input[type=password], input[type=search], input[type=url], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--filet-fort); border-radius: var(--r-sm);
  background: var(--carton); color: var(--encre); font: inherit; font-size: 16px; /* 16px : pas de zoom auto sur iPhone */
  box-shadow: inset 0 1px 1px rgba(11, 42, 60, .05);
  transition: border-color .15s, box-shadow .15s;
}
@media (min-width: 900px) and (pointer: fine) {
  input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], input[type=datetime-local],
  input[type=password], input[type=search], input[type=url], select, textarea { font-size: .9375rem; min-height: 42px; }
}
input::placeholder, textarea::placeholder { color: var(--encre-3); opacity: 1; }
select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: var(--carton) no-repeat right 12px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%234A535A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--encre-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--am-sarcelle); box-shadow: 0 0 0 3px rgba(14, 124, 134, .22); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--t-rouge); background-color: #FFF8F8; }
input:disabled, select:disabled, textarea:disabled { background-color: var(--bg-gris); color: var(--encre-3); cursor: not-allowed; }
input[type=checkbox], input[type=radio] { accent-color: var(--am-sarcelle); }
input[type=file] { font: inherit; font-size: .875rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 650; margin-right: 10px; min-height: 38px; padding: 0 12px; cursor: pointer;
  border: 1px solid var(--filet-fort); border-radius: var(--r-sm); background: var(--carton); color: var(--encre);
}
.field-check label { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-stretch: 100%; font-size: .9375rem; }
.field-check input[type=checkbox] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-top: 4px; }
.form-actions .btn-primary { min-width: 160px; }
@media (max-width: 699px) {
  .form-actions.sticky {
    position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); z-index: 20;
    margin: 0 -16px -18px; padding: 10px 16px; background: rgba(243, 245, 242, .96); border-top: 1px solid var(--filet);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .form-actions .btn { flex: 1; }
}
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend {
  padding: 0; margin-bottom: 10px; font-size: .75rem; font-weight: 720; font-stretch: var(--etroit);
  letter-spacing: .07em; text-transform: uppercase; color: var(--encre-2);
}
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { color: var(--encre-3); }

.search { display: flex; gap: 8px; margin-bottom: 14px; }
.search input { flex: 1; min-width: 0; }
.search input[type=search] {
  padding-left: 38px;
  background: var(--carton) no-repeat 12px center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646E75' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
}

/* ─── Tableaux : le râtelier ─────────────────────────────────── */
/* Ordinateur : un râtelier de fiches (en-tête aluminium, fentes entre les rangs).
   Téléphone : chaque rang redevient une fiche. */
.table-wrap {
  overflow-x: auto; background: var(--carton); border-radius: var(--r-sm); margin-bottom: 16px;
  box-shadow: var(--ombre-fiche), inset 0 0 0 1px rgba(11, 42, 60, .06);
}
.card .table-wrap { background: none; box-shadow: none; border-radius: 0; margin: 0 -16px; }
@media (min-width: 700px) { .card .table-wrap { margin: 0 -22px; } }
.table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table th {
  text-align: left; padding: 9px 12px; white-space: nowrap;
  font-size: .75rem; font-weight: 720; font-stretch: var(--etroit); letter-spacing: .08em; text-transform: uppercase; color: var(--encre-2);
  background: var(--alu-clair); border-bottom: 1px solid var(--alu);
}
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th:last-child, .table td:last-child { padding-right: 16px; }
@media (min-width: 700px) { .card .table th:first-child, .card .table td:first-child { padding-left: 22px; } .card .table th:last-child, .card .table td:last-child { padding-right: 22px; } }
.table td { padding: 12px 12px; border-bottom: 1px solid var(--filet); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td a { color: var(--encre); font-weight: 650; text-decoration: none; }
.table td a:hover { text-decoration: underline; }
.table tr.clickable { cursor: pointer; transition: background-color .12s; }
.table tr.clickable:hover td { background: var(--carton-2); }
.table .num, .table th.num { text-align: right; }
.table td.nowrap { white-space: nowrap; }
/* Mini fiche devant la référence : la couleur du type d'affaire. */
/* Les références (D-2026-0007, F-2026-0002) ne se coupent jamais ; le texte qui les suit, si. */
.table tr.k-devis td:first-child > a, .table tr.k-facture td:first-child > a, .table tr.k-avoir td:first-child > a { white-space: nowrap; }
.table tr[class*="k-"] td:first-child > a > span { white-space: normal; }
.table tr[class*="k-"] td:first-child > a::before, .table tr[class*="k-"] td:first-child > .ref::before {
  content: ""; display: inline-block; width: 11px; height: 14px; margin-right: 9px; vertical-align: -2px; border-radius: 2px;
  background: var(--k); box-shadow: inset 0 0 0 1px rgba(11, 42, 60, .18);
}
@media (max-width: 699px) {
  .table-wrap { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .card .table-wrap { margin: 0; }
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr {
    position: relative; background: var(--carton); border-radius: var(--r-sm); padding: 0 14px 10px; margin-bottom: 10px;
    box-shadow: var(--ombre-fiche), inset 0 0 0 1px rgba(11, 42, 60, .06); overflow: hidden;
  }
  .table tr[class*="k-"] { padding-top: 0; }
  .table td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; text-align: right; }
  .table th:first-child, .table td:first-child, .table td:last-child { padding-left: 0; padding-right: 0; }
  .table td::before { content: attr(data-label); color: var(--encre-3); font-size: .8125rem; text-align: left; flex: none; }
  .table td:first-child {
    display: block; width: auto; text-align: left; font-size: 1rem; margin: 0 -14px 6px; padding: 10px 14px 9px;
    border-bottom: 1px solid var(--filet);
  }
  .table tr[class*="k-"] td:first-child { background: var(--k); border-bottom-color: rgba(11, 42, 60, .12); }
  .table tr[class*="k-"] td:first-child > a::before, .table tr[class*="k-"] td:first-child > .ref::before { display: none; }
  .table td:first-child::before { display: none; }
  .table tbody tr:last-child td { border-bottom: 0; }
  .table tbody tr:last-child td:first-child { border-bottom: 1px solid var(--filet); }
  .table .hide-sm { display: none; }
  .table tr.clickable:hover td { background: transparent; }
  .table tr.clickable:hover td:first-child { background: var(--k, transparent); }
  .card .table tr { box-shadow: inset 0 0 0 1px var(--filet); }
}

/* Colonne de droite d'une fiche (devis, facture, demande) : trop étroite pour un tableau,
   chaque rang devient une petite liste : le premier champ en titre, les autres en ligne dessous. */
@media (min-width: 900px) {
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table-wrap { margin: 0; overflow: visible; }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table thead { display: none; }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) :is(.table, .table tbody, .table tr) { display: block; width: auto; }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table tr { padding: 10px 0; border-bottom: 1px solid var(--filet); }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table tbody tr:last-child { border-bottom: 0; padding-bottom: 0; }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table td {
    display: inline; padding: 0 !important; border: 0; font-size: .8125rem; color: var(--encre-2); background: none !important;
  }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table td + td:not(:last-child)::after { content: " · "; color: var(--encre-3); }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table td:first-child {
    display: block; margin-bottom: 3px; font-size: .875rem; color: var(--encre); overflow-wrap: anywhere;
  }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table td.num { white-space: nowrap; }
  :is(.dv-side-top, .dv-side-bottom, .fa-top, .fa-bottom, .crm-grid > div + div) .table td:last-child { display: inline-flex; margin-left: 4px; vertical-align: middle; }
}

/* ─── Divers ────────────────────────────────────────────────── */
/* Emplacement vide du planning : il montre où la fiche viendra se ranger. */
.empty {
  padding: 22px 16px; text-align: center; color: var(--encre-2); font-size: .9375rem;
  border: 1.5px dashed var(--filet-fort); border-radius: var(--r-sm); background: rgba(255, 255, 255, .45);
}
.empty p { margin: 0 auto; max-width: 46ch; }
.card .empty { padding: 16px 10px; background: var(--carton-2); }
.empty .btn { margin-top: 12px; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
.dl dt { color: var(--encre-3); font-size: .875rem; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Onglets de filtre : des étiquettes en ruban clair, la sélection en ruban sarcelle */
.tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 16px; padding: 2px 16px 4px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px;
  border-radius: 1px; background: var(--ruban-clair); color: var(--am-marine); text-decoration: none;
  font-size: .75rem; font-weight: 720; font-stretch: var(--etroit); letter-spacing: .07em; text-transform: uppercase;
  transition: background-color .15s, color .15s;
}
.tab:hover { background: #CBE5E8; }
.tab.active { background: var(--ruban-actif); color: #fff; }
.tab-count { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--encre-2); letter-spacing: .02em; }
.tab.active .tab-count { color: rgba(255, 255, 255, .85); }
@media (pointer: coarse) { .tab { min-height: 42px; } }
@media (min-width: 900px) { .tabs { margin: 0 0 16px; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; } }

/* Alertes : une note aimantée sur le tableau */
.alert {
  position: relative; display: flex; gap: 10px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 12px 14px 12px 36px; border-radius: var(--r-sm); margin-bottom: 14px; font-size: .9375rem; color: var(--encre);
  background: var(--carton); box-shadow: var(--ombre-fiche), inset 0 0 0 1px rgba(11, 42, 60, .06);
}
.alert::before {
  content: ""; position: absolute; left: 14px; top: 18px; width: 10px; height: 10px; border-radius: 50%; background: var(--a-gris);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(11, 42, 60, .25), 0 1px 1px rgba(11, 42, 60, .25);
}
.alert > div:first-child { flex: 1 1 260px; min-width: 0; }
.alert-warn { background: var(--bg-ambre); }
.alert-warn::before { background: var(--a-ambre); }
.alert-info { background: var(--bg-bleu); }
.alert-info::before { background: var(--a-bleu); }
.alert-danger { background: var(--bg-rouge); }
.alert-danger::before { background: var(--a-rouge); }
.alert-ok { background: var(--bg-vert); }
.alert-ok::before { background: var(--a-vert); }
.alert ul { margin: 6px 0 0; padding-left: 18px; }
.alert .btn-secondary { background: rgba(255, 255, 255, .75); }

.flashes { margin-bottom: 16px; display: grid; gap: 8px; }
.flash {
  position: relative; padding: 11px 14px 11px 34px; border-radius: var(--r-sm);
  font-weight: 600; font-size: .9375rem; background: var(--carton); box-shadow: var(--ombre-fiche), inset 0 0 0 1px rgba(11, 42, 60, .06);
  animation: flash-in .32s var(--ease) both;
}
.flash::before {
  content: ""; position: absolute; left: 14px; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--a-gris);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(11, 42, 60, .25);
}
.flash-ok { background: var(--bg-vert); } .flash-ok::before { background: var(--a-vert); }
.flash-info { background: var(--bg-bleu); } .flash-info::before { background: var(--a-bleu); }
.flash-warn { background: var(--bg-ambre); } .flash-warn::before { background: var(--a-ambre); }
.flash-error { background: var(--bg-rouge); } .flash-error::before { background: var(--a-rouge); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } }

/* Journal d'activité : un fil, des aimants */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px 24px; }
.timeline li::after { content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 1px; background: var(--filet-fort); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--a-gris);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(11, 42, 60, .25), 0 0 0 3px var(--carton);
}
.timeline li.tl-accepte::before, .timeline li.tl-paiement::before { background: var(--a-vert); }
.timeline li.tl-refuse::before, .timeline li.tl-echec::before { background: var(--a-rouge); }
.timeline li.tl-envoi::before, .timeline li.tl-relance::before { background: var(--a-bleu); }
.timeline li.tl-reponse::before, .timeline li.tl-vu::before { background: var(--a-orange); }
.timeline time { display: block; font-size: .8125rem; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.timeline p { margin: 1px 0 0; font-size: .9375rem; }

.list { list-style: none; margin: 0; padding: 0; }
.list > li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--filet); }
.list > li:last-child { border-bottom: 0; }
.list .list-main { min-width: 0; flex: 1; }
.list .list-title { font-weight: 650; color: var(--encre); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; }
a.list-title:hover { text-decoration: underline; }
.list .list-sub { font-size: .875rem; color: var(--encre-3); }

/* Menu « Plus » du téléphone : des étiquettes sur le tableau */
.menu-list { display: grid; gap: 8px; }
.menu-list a {
  display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px;
  background: var(--ruban); color: #fff; text-decoration: none; border-radius: 1px;
  font-size: .875rem; font-weight: 720; font-stretch: var(--etroit); letter-spacing: .07em; text-transform: uppercase;
}
.menu-list a:active { background: var(--ruban-actif); }
.menu-list a .ico { color: rgba(255, 255, 255, .7); }
.menu-list a .aimant { margin-left: auto; }
.menu-list .chev { margin-left: auto; width: 18px; height: 18px; color: rgba(255, 255, 255, .7); }
.menu-list .aimant ~ .chev { margin-left: 8px; }
.menu-logout { margin-top: 20px; }

/* ─── Pages publiques (client, connexion) ───────────────────── */
body.public { background: var(--email); }
.public-main { max-width: 880px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 56px; }
@media (min-width: 700px) { .public-main { padding: calc(28px + env(safe-area-inset-top, 0px)) 24px 64px; } }
body.public.auth { background: var(--mur); }
.public-foot { max-width: 880px; margin: -40px auto 0; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: .875rem; color: var(--encre-3); }
.public-foot a { display: inline-block; padding: 12px 4px; color: var(--encre-2); }
body.public.auth .public-foot { margin-top: 16px; }
.auth-card {
  max-width: 440px; margin: 9vh auto 0; background: var(--carton); border-radius: var(--r-sm);
  box-shadow: var(--ombre-lg), inset 0 0 0 1px rgba(11, 42, 60, .06); overflow: hidden;
}
.auth-card .auth-tete {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 22px 16px;
  background: var(--carton); border-bottom: 3px solid var(--am-marine);
}
.auth-logo { display: block; width: 200px; max-width: 70%; height: auto; }
.auth-app { font-size: .75rem; font-weight: 760; font-stretch: var(--etroit); letter-spacing: .24em; text-transform: uppercase; color: var(--am-sarcelle); }
.auth-card .auth-corps { padding: 22px 22px 26px; }
.auth-card h1 { margin: 0 0 6px; font-size: 1.5rem; }
.auth-card .sub { color: var(--encre-2); font-size: .9375rem; }
.auth-card .form { margin-top: 18px; }
.auth-card .flash { margin-top: 12px; }

/* Large : l'inscription (nom, métiers, identifiants) demande plus de place qu'une simple connexion. */
body.auth-large .auth-card { max-width: 640px; margin-top: 5vh; }
@media (min-width: 700px) { body.auth-large .auth-card .auth-corps { padding: 26px 34px 30px; } }

/* Bandeaux de la plateforme, en haut du tableau : essai qui finit, paiement en échec, accès en lecture seule. */
.bandeau {
  position: relative; display: block; padding: 9px var(--gouttiere) 9px calc(var(--gouttiere) + 22px);
  border-bottom: 1px solid var(--filet); background: var(--bg-bleu); color: var(--encre); font-size: .8125rem; line-height: 1.45;
}
.bandeau::before {
  content: ""; position: absolute; left: var(--gouttiere); top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--a-bleu);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(11, 42, 60, .25), 0 1px 1px rgba(11, 42, 60, .25);
}
.bandeau a { color: var(--encre); font-weight: 650; }
.bandeau-info { background: var(--bg-bleu); }
.bandeau-warn { background: var(--bg-ambre); }
.bandeau-warn::before { background: var(--a-ambre); }
.bandeau-danger { background: var(--bg-rouge); }
.bandeau-danger::before { background: var(--a-rouge); }
@media (min-width: 900px) {
  .bandeau { padding: 10px 34px 10px 58px; border-radius: 4px 4px 0 0; }
  .bandeau::before { left: 34px; top: 15px; }
  .bandeau ~ .bandeau, .bandeau ~ .mode-banner { border-radius: 0; }
}

/* Champ piège des formulaires publics : hors de l'écran (et non display:none, que les robots repèrent), sans effet au clavier. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Choix multiples en étiquettes (métiers, à l'inscription) : la case reste dans la page, pour le clavier et les lecteurs d'écran ;
   l'état coché se voit par la couleur ET par la coche. */
.chips legend { margin-bottom: 8px; }
.chips-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 1px;
  background: var(--am-sarcelle-pale); color: var(--am-marine); font-size: .8125rem; font-weight: 720; font-stretch: var(--etroit);
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.2; transition: background-color .15s, color .15s;
}
.chip:hover span { background: #CBE5E8; }
.chip input:checked + span { background: var(--am-sarcelle); color: #fff; }
.chip input:checked + span::before { content: "✓"; margin-right: 6px; font-weight: 800; }
.chip:hover input:checked + span { background: var(--am-sarcelle-2); }
.chip input:focus-visible + span { outline: 2px solid var(--am-marine); outline-offset: 2px; }
@media (pointer: coarse) { .chip span { min-height: 44px; } }

@media print {
  .rail, .bandeau, .topbar, .tabbar, .mode-banner, .page-actions, .form-actions, .flashes, .board-cap { display: none !important; }
  body, body.app { background: #fff; }
  .app-grid { display: block; padding: 0; }
  .board { border: 0; box-shadow: none; padding: 0; min-height: 0; }
  .main { padding: 0; max-width: none; }
  .card { box-shadow: none; border: 0; padding: 0; }
  .page-head.fiche-tete { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}