:root {
  --encre: #1c2b3d; --ardoise: #52606f; --trait: #d5dbe2; --fond: #eef1f4; --carte: #ffffff;
  --bleu: #1f5fa8; --bleu-fonce: #174a84; --rouge: #a3261b; --vert: #1d6b3a; --orange: #7a5200;
  --ombre: 0 1px 2px rgba(28, 43, 61, .06), 0 4px 16px rgba(28, 43, 61, .06);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--bleu); }
a:hover { color: var(--bleu-fonce); }
h1 { font-size: 1.75rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.muted { color: var(--ardoise); }
.petit { font-size: .85rem; }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }

/* ---------- Espace connecté ---------- */
.app-grille { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.app-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--encre); color: #d7dfe8; padding: 1.5rem 1rem; }
.app-marque { padding: 0 .6rem 1.1rem; margin-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.app-marque strong { display: block; color: #fff; font-size: 1.1rem; }
.app-marque span { font-size: .85rem; color: #aebbc9; }
.menu-bouton { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; }
.menu-bouton:hover { background: rgba(255, 255, 255, .1); }
.menu-bouton .icone-fermer { display: none; }
.app-nav.ouvert .menu-bouton .icone-menu { display: none; }
.app-nav.ouvert .menu-bouton .icone-fermer { display: block; }
.voile-menu { display: none; }
.app-nav nav { display: flex; flex-direction: column; gap: .1rem; }
.app-nav nav a, .app-nav .bientot { display: block; padding: .5rem .6rem; border-radius: 6px; color: #e6ecf2; text-decoration: none; font-size: .93rem; }
.app-nav nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.app-nav nav a.actif { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; box-shadow: inset 3px 0 0 #5b9be0; }
.app-nav .bientot { color: #8fa0b3; cursor: default; }
.app-nav .bientot small { font-size: .7rem; border: 1px solid #5d6f83; border-radius: 999px; padding: 0 .4rem; margin-left: .2rem; }
.nav-sep { height: 1px; background: rgba(255, 255, 255, .14); margin: .8rem .6rem; }
.app-contenu { padding: 2rem clamp(1rem, 3vw, 3rem) 4rem; max-width: 90rem; width: 100%; display: flex; flex-direction: column; gap: 1.25rem; }
.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.sous-titre { margin: 0; color: var(--ardoise); }
.fil { margin: 0; font-size: .9rem; color: var(--ardoise); }

.carte { background: var(--carte); border-radius: 12px; box-shadow: var(--ombre); padding: 1.4rem 1.6rem; }
.carte.sans-marge { padding: .4rem 1.2rem; overflow-x: auto; }
.carte.vide { text-align: left; }
.carte.vide p { color: var(--ardoise); max-width: 46rem; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.kpi { display: flex; flex-direction: column; gap: .2rem; }
.kpi span { color: var(--ardoise); font-size: .9rem; font-weight: 500; }
.kpi strong { font-size: 1.7rem; letter-spacing: -.02em; }
.kpi small { color: var(--ardoise); font-size: .82rem; }
.liste-simple { margin: 0; padding-left: 1.1rem; }
.liste-simple li { margin: .35rem 0; }

.tableau { width: 100%; border-collapse: collapse; }
.tableau th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ardoise); padding: .7rem .6rem; border-bottom: 2px solid var(--trait); }
.tableau td { padding: .75rem .6rem; border-bottom: 1px solid #e6eaef; vertical-align: top; }
.tableau tr:last-child td { border-bottom: 0; }
.tableau .num { text-align: right; white-space: nowrap; }

.badge { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge-vert { background: #e3f2e8; color: var(--vert); }
.badge-orange { background: #fdf1d8; color: var(--orange); }
.badge-rouge { background: #fbeceb; color: var(--rouge); }
.badge-bleu { background: #e3edf9; color: var(--bleu-fonce); }
.badge-gris { background: #eceff2; color: #3f4b58; }

/* ---------- Formulaires ---------- */
.formulaire { display: flex; flex-direction: column; gap: .9rem; }
.formulaire label { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; font-weight: 600; }
.formulaire label small { font-weight: 400; color: var(--ardoise); }
.formulaire input[type=text], .formulaire input[type=email], .formulaire input[type=password], .formulaire input[type=search],
.formulaire input[type=date], .formulaire select, .formulaire textarea, .filtres input, .filtres select {
  font: inherit; font-weight: 400; padding: .6rem .75rem; border: 1px solid var(--trait); border-radius: 8px; background: #fff; color: var(--encre); width: 100%;
}
.formulaire input:disabled { background: var(--fond); color: var(--ardoise); }
.formulaire textarea { resize: vertical; }
.formulaire .case { flex-direction: row; align-items: flex-start; gap: .55rem; font-weight: 400; }
.formulaire .case input { margin-top: .3rem; }
.deux-colonnes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.grille-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.grille-formulaire .carte { display: flex; flex-direction: column; gap: .9rem; }
.grille-formulaire .carte h2 { margin: 0; }
.pleine-largeur { grid-column: 1 / -1; }
.formulaire-carte { max-width: 52rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.filtres { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.filtres label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--ardoise); }
.filtres input[type=search] { width: 20rem; }
.piege { position: absolute; left: -9999px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.1rem; border-radius: 8px; border: 1px solid var(--bleu);
  background: #fff; color: var(--bleu); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn:hover { background: #eaf1fa; }
.btn-plein { background: var(--bleu); color: #fff; }
.btn-plein:hover { background: var(--bleu-fonce); color: #fff; }
.btn-danger { border-color: #e3b9b5; color: var(--rouge); }
.btn-danger:hover { background: #fbeceb; }
.zone-danger { margin-top: .5rem; }

.alerte { border-radius: 8px; padding: .8rem 1rem; }
.alerte p { margin: .15rem 0; }
.alerte-erreur { background: #fbeceb; color: var(--rouge); }
.alerte-ok { background: #e3f2e8; color: var(--vert); }
.alerte-info { background: #e3edf9; color: var(--bleu-fonce); }

.toast { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 50; max-width: min(34rem, calc(100vw - 3rem)); display: flex; gap: 1rem;
  padding: .9rem 1.1rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(28, 43, 61, .25); cursor: pointer; }
.toast p { margin: 0; }
.toast-ok { background: #e3f2e8; color: var(--vert); animation: disparait .4s ease 7s forwards; }
.toast-erreur { background: #fbeceb; color: var(--rouge); }
@keyframes disparait { to { opacity: 0; visibility: hidden; } }

/* ---------- Pages publiques (connexion…) ---------- */
.public-cadre { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: 1.25rem; }
.public-marque { font-size: 1.5rem; font-weight: 700; color: var(--encre); }
.public-carte { width: 100%; max-width: 30rem; }
.public-carte h1 { font-size: 1.4rem; margin-bottom: 1rem; }
.public-carte .btn-plein { width: 100%; margin-top: .3rem; }
.intro { color: var(--ardoise); margin-top: 0; }
.liens-bas { margin: 1rem 0 0; font-size: .9rem; text-align: center; }
.public-pied { color: var(--ardoise); font-size: .85rem; margin: 0; }

/* ---------- Petits écrans ---------- */
@media (max-width: 1000px) {
  .grille-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-formulaire { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 800px) {
  body { font-size: 15px; }
  .app-grille { grid-template-columns: minmax(0, 1fr); }
  /* Barre du haut avec bouton Menu ; le menu se déplie par-dessus la page */
  .app-nav { position: sticky; top: 0; z-index: 20; height: auto; padding: .65rem 1rem; }
  .app-marque { display: flex; justify-content: space-between; align-items: center; border: 0; margin: 0; padding: 0; }
  .app-marque strong { font-size: 1rem; }
  .app-marque span { display: none; }
  .menu-bouton { display: inline-flex; }
  .app-nav { padding: .4rem .6rem .4rem 1rem; }
  .app-marque { position: relative; z-index: 40; }
  /* Panneau qui glisse depuis la gauche, sous la barre du haut */
  .app-nav nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 30; width: min(82vw, 19rem);
    padding: 4.2rem 1rem 1.5rem; background: var(--encre); overflow-y: auto;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(0, 0, 0, .25);
  }
  .app-nav.ouvert nav { transform: none; }
  .app-nav.ouvert .voile-menu { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(12, 20, 31, .45); }
  body.menu-ouvert { overflow: hidden; }
  .app-nav nav a, .app-nav .bientot { padding: .7rem .6rem; font-size: 1rem; }
  .app-contenu { padding: 1.1rem .9rem 3rem; gap: 1rem; }
  h1 { font-size: 1.4rem; }
  .entete { flex-direction: column; align-items: stretch; }
  .entete .btn, .actions .btn { width: 100%; }
  .carte { padding: 1.1rem 1rem; border-radius: 10px; }
  .deux-colonnes { grid-template-columns: minmax(0, 1fr); }
  .filtres { flex-direction: column; align-items: stretch; }
  .filtres input[type=search] { width: 100%; }
  /* Évite le zoom automatique de l'iPhone sur les champs */
  .formulaire input, .formulaire select, .formulaire textarea, .filtres input, .filtres select { font-size: 16px; }
  .toast { left: .75rem; right: .75rem; bottom: .75rem; max-width: none; }
}
@media (max-width: 700px) {
  /* Tableaux transformés en cartes : une ligne = un bloc, chaque valeur précédée du titre de sa colonne */
  .carte.sans-marge { padding: .2rem 1rem; }
  table.tableau:not(.tableau-tantiemes) thead { display: none; }
  table.tableau:not(.tableau-tantiemes), table.tableau:not(.tableau-tantiemes) tbody,
  table.tableau:not(.tableau-tantiemes) tr, table.tableau:not(.tableau-tantiemes) td { display: block; width: 100%; }
  table.tableau:not(.tableau-tantiemes) tr { padding: .8rem 0; border-bottom: 1px solid var(--trait); }
  table.tableau:not(.tableau-tantiemes) tr:last-child { border-bottom: 0; }
  table.tableau:not(.tableau-tantiemes) td { border: 0; padding: .2rem 0; text-align: left; display: flex; justify-content: space-between; gap: 1rem; }
  table.tableau:not(.tableau-tantiemes) td::before { content: attr(data-label); color: var(--ardoise); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; padding-top: .15rem; }
  table.tableau:not(.tableau-tantiemes) td .valeur { text-align: right; }
  table.tableau:not(.tableau-tantiemes) td:first-child { font-size: 1.05rem; }
  table.tableau:not(.tableau-tantiemes) td:first-child::before { content: none; }
  table.tableau:not(.tableau-tantiemes) td:first-child .valeur { text-align: left; }
}
@media (max-width: 480px) {
  .grille-4 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .toast-ok { animation-duration: .01s; } .app-nav nav { transition: none; } }

/* ---------- Lot 2 : locataires et baux ---------- */
.colonne { display: flex; flex-direction: column; gap: 1.25rem; }
.ligne-element { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid #eef1f4; }
.ligne-element:last-of-type { border-bottom: 0; }
.btn-petit { min-height: 36px; padding: 0 .8rem; font-size: .85rem; }
details.ajout { margin-top: .5rem; border-top: 1px solid #eef1f4; padding-top: .8rem; }
details.ajout summary { cursor: pointer; font-weight: 600; color: var(--bleu); margin-bottom: .8rem; }
fieldset.cases { border: 1px solid var(--trait); border-radius: 8px; padding: .8rem 1rem; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
fieldset.cases legend { font-size: .9rem; font-weight: 600; padding: 0 .3rem; }
fieldset.cases legend small { font-weight: 400; color: var(--ardoise); }
.trois-colonnes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.onglets { display: flex; gap: .4rem; flex-wrap: wrap; }
.onglets a { padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--trait); background: #fff; color: var(--encre); text-decoration: none; font-weight: 600; font-size: .9rem; }
.onglets a.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
@media (max-width: 800px) { .trois-colonnes { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Immeubles et tantièmes ---------- */
.defilement { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tableau-tantiemes { min-width: 32rem; }
.tableau-tantiemes input { width: 7.5rem; font: inherit; padding: .45rem .6rem; border: 1px solid var(--trait); border-radius: 8px; text-align: right; }
.tableau-tantiemes .ligne-total td { border-top: 2px solid var(--trait); }
.simulateur, .cles-gestion { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--trait); }
.simulateur h3, .cles-gestion h3 { font-size: 1rem; margin: 0 0 .75rem; }

/* ---------- Double authentification ---------- */
.champ-code { font-size: 1.4rem !important; letter-spacing: .3em; text-align: center; }
.lien-bouton { background: none; border: 0; padding: 0; color: var(--bleu); font: inherit; text-decoration: underline; cursor: pointer; }
.config-totp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; margin-top: 1rem; }
.config-totp p { margin: 0 0 .6rem; }
.qr { background: #fff; padding: .6rem; display: inline-block; border: 1px solid var(--trait); border-radius: 8px; margin: .3rem 0 .8rem; min-height: 180px; }
.cle-totp { font-size: .95rem; background: var(--fond); padding: .1rem .4rem; border-radius: 4px; word-break: break-all; }
.codes-secours ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; padding: 0; list-style: none; margin: .6rem 0 0; }
.codes-secours code { font-size: 1rem; background: #fff; padding: .2rem .5rem; border-radius: 4px; display: inline-block; }
.actions-2fa { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.appareils { margin-top: 1rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
@media (max-width: 800px) {
  .config-totp { grid-template-columns: minmax(0, 1fr); }
  .codes-secours ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Copropriété : espacements ---------- */
.bloc-copro > .defilement { margin: .5rem 0 1rem; }
.bloc-copro .actions { margin-bottom: 1.25rem; }
.bloc-copro h3 { font-size: 1rem; margin: 1.5rem 0 .3rem; }
.bloc-copro .ligne-vide td { padding: .9rem .6rem; }
.formulaire label > small.muted { font-weight: 400; }

/* ---------- Pièces jointes ---------- */
.depot-documents { margin-top: 1rem; border-top: 1px solid var(--trait); padding-top: 1rem; }
.depot-documents input[type=file] { width: 100%; font-size: .9rem; }

/* ---------- Loyers ---------- */
.barre-mois { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.barre-mois strong { font-size: 1.15rem; }
.echeance { display: flex; flex-direction: column; gap: .5rem; }
.entete-echeance { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.entete-echeance h2 { margin: 0; font-size: 1.1rem; }
.entete-echeance .montants { display: flex; align-items: center; gap: .7rem; }
.entete-echeance .du { font-size: 1.25rem; font-weight: 700; }
.actions-echeance { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-top: .5rem; border-top: 1px solid var(--trait); padding-top: .9rem; }
.formulaire-paiement { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.formulaire-paiement label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.formulaire-paiement input, .formulaire-paiement select { font: inherit; padding: .5rem .6rem; border: 1px solid var(--trait); border-radius: 8px; }
.formulaire-paiement input[name=montant] { width: 8rem; text-align: right; }
@media (max-width: 800px) { .formulaire-paiement { flex-direction: column; align-items: stretch; } .formulaire-paiement .btn { width: 100%; } }
.bloc-societe[hidden], .bloc-particulier[hidden] { display: none; }
.reprise summary { font-weight: 600; cursor: pointer; color: var(--bleu); }
.reprise .formulaire-paiement { margin-top: .8rem; }

/* ---------- Fiche bail : synthèse et tableau des loyers ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.valeurs { display: grid; grid-template-columns: 1fr auto; gap: .45rem 1rem; margin: 0; }
.valeurs dt { color: var(--ardoise); }
.valeurs dd { margin: 0; text-align: right; font-weight: 600; }
.liste-liens { list-style: none; padding: 0; margin: 0 0 .8rem; display: flex; flex-direction: column; gap: .6rem; }
.liste-liens a { font-weight: 600; }
.titre-section { padding: .9rem 0 .2rem; }
.titre-section h2 { margin: 0; }
.tableau-loyers td { vertical-align: middle; }
.actions-ligne { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.popover { position: relative; }
.popover summary { list-style: none; }
.popover summary::-webkit-details-marker { display: none; }
.popover[open] form { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10; width: 16rem; background: #fff; border: 1px solid var(--trait);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(28, 43, 61, .18); padding: 1rem; }
.totaux-loyers { display: flex; justify-content: flex-end; gap: 2.5rem; padding: 1rem 0; border-top: 2px solid var(--trait); flex-wrap: wrap; }
.totaux-loyers div { display: flex; flex-direction: column; align-items: flex-end; }
.totaux-loyers span { color: var(--ardoise); font-size: .85rem; }
.totaux-loyers strong { font-size: 1.2rem; }
.details-bail > summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
.details-bail[open] > summary { margin-bottom: 1rem; }
@media (max-width: 1000px) { .grille-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .popover[open] form { position: static; width: auto; margin-top: .5rem; } .totaux-loyers { justify-content: flex-start; } .totaux-loyers div { align-items: flex-start; } }
.tableau-tantiemes input.calcule { background: var(--fond); color: var(--ardoise); }
.ligne-releve { display: grid !important; grid-template-columns: 1fr 9rem; align-items: center; gap: .6rem; font-weight: 600; }
.ligne-releve[hidden] { display: none !important; }
.ligne-releve input { font: inherit; padding: .45rem .6rem; border: 1px solid var(--trait); border-radius: 8px; text-align: right; }
.lignes-lots { display: flex; flex-direction: column; gap: .6rem; }
.ligne-lot { position: relative; display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr 1fr; gap: .5rem; align-items: end; padding-right: 2.6rem; }
.ligne-lot label { display: flex; flex-direction: column; gap: .25rem; font-size: .82rem; font-weight: 600; }
.ligne-lot input, .ligne-lot select { font: inherit; font-weight: 400; padding: .45rem .6rem; border: 1px solid var(--trait); border-radius: 8px; width: 100%; }
.saisie-lots .ajouter-lot { align-self: flex-start; }
@media (max-width: 800px) { .ligne-lot { grid-template-columns: 1fr 1fr; } }
section.saisie-lots { display: flex; flex-direction: column; gap: .8rem; }
section.saisie-lots .ligne-lot { grid-template-columns: 1fr 1fr; padding-right: 0; }
section.saisie-lots .ligne-lot label:first-child { grid-column: 1 / -1; padding-right: 2.6rem; }
section.saisie-lots .ligne-lot { padding-bottom: .8rem; border-bottom: 1px solid #eef1f4; }
.table-lots-copro { min-width: 56rem; }
.table-lots-copro input[type=text], .table-lots-copro input[type=email] { width: 100%; text-align: left; }
.nouvelle-ligne input { background: #fbfcfd; }
.grille-budget { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
@media (max-width: 800px) { .grille-budget { grid-template-columns: minmax(0, 1fr); } }

.retirer-lot { position: absolute; top: 1.35rem; right: 0; width: 2.1rem; height: 2.1rem; border: 1px solid #e3b9b5; border-radius: 8px;
  background: #fff; color: var(--rouge); font-size: .95rem; cursor: pointer; line-height: 1; }
.retirer-lot:hover { background: #fbeceb; }
@media (max-width: 800px) { .ligne-lot { grid-template-columns: 1fr 1fr; } .ligne-lot label:first-child { grid-column: 1 / -1; padding-right: 2.6rem; } }
.table-lots-copro { min-width: 82rem; }
.table-lots-copro select { font: inherit; padding: .45rem .5rem; border: 1px solid var(--trait); border-radius: 8px; width: 100%; }

/* ---------- Menu par catégories ---------- */
.groupe-menu summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: .5rem .6rem; border-radius: 6px;
  color: #e6ecf2; font-size: .93rem; cursor: pointer; }
.groupe-menu summary::-webkit-details-marker { display: none; }
.groupe-menu summary::after { content: "›"; font-size: 1.1rem; line-height: 1; color: #8fa0b3; transition: transform .15s ease; }
.groupe-menu[open] summary::after { transform: rotate(90deg); }
.groupe-menu summary:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.groupe-menu[open] summary { color: #fff; font-weight: 600; }
.sous-menu { display: flex; flex-direction: column; gap: .1rem; margin: .1rem 0 .4rem .7rem; padding-left: .6rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.sous-menu a, .sous-menu .bientot { font-size: .9rem; }
@media (max-width: 800px) { .app-nav .sous-menu .bientot { display: none; } .groupe-menu summary { padding: .7rem .6rem; font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) { .groupe-menu summary::after { transition: none; } }

/* ---------- Abonnement, administration, pages légales ---------- */
.carte-formule { display: flex !important; flex-direction: column; gap: .3rem; border: 2px solid var(--trait); border-radius: 12px; padding: 1.1rem 1.2rem; cursor: pointer; font-weight: 400 !important; }
.carte-formule:has(input:checked) { border-color: var(--bleu); background: #f4f8fd; }
.carte-formule strong { font-size: 1.1rem; }
.carte-formule .prix { font-size: 1.4rem; font-weight: 700; color: var(--encre); }
.popover[open] > .formulaire { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10; width: 17rem; background: #fff; border: 1px solid var(--trait);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(28, 43, 61, .18); padding: 1rem; gap: .7rem; }
.popover[open] > .formulaire form { position: static; width: auto; box-shadow: none; border: 0; padding: 0; background: none; }
.bandeau-abonnement a { font-weight: 600; }
.page-legale { max-width: 52rem; margin: 2rem auto; padding: 0 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.page-legale h2 { font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
.page-legale p { line-height: 1.6; }
.public-pied a { color: var(--ardoise); }
.champ-court { width: 4.5rem !important; display: inline-block; padding: .3rem .5rem !important; border: 1px solid var(--trait); border-radius: 6px; font: inherit; text-align: center; }
.cases input[type=date] { font: inherit; padding: .3rem .5rem; border: 1px solid var(--trait); border-radius: 6px; }
.conditions-beta .liste-simple li { margin: .6rem 0; line-height: 1.55; }
h1 .badge { font-size: .85rem; vertical-align: middle; }

/* Fenêtre « Gérer » de l'administration : au-dessus de la page, centrée, avec un fond assombri */
.popover-fenetre[open]::before { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(12, 20, 31, .45); }
.popover-fenetre[open] > .formulaire { position: fixed; top: 50%; left: 50%; right: auto; transform: translate(-50%, -50%); z-index: 60;
  width: min(26rem, 92vw); max-height: 88vh; overflow-y: auto; padding: 1.25rem 1.4rem; }
.entete-fenetre { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--trait); }
.fermer-fenetre { border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--ardoise); width: 2rem; height: 2rem; border-radius: 6px; }
.fermer-fenetre:hover { background: var(--fond); }
.etapes-demarrage { margin: .6rem 0 1rem; padding-left: 1.3rem; }
.etapes-demarrage li { margin: .55rem 0; line-height: 1.5; }

/* ---------- Argumentaire ---------- */
.argumentaire h3 { font-size: .95rem; margin: 1rem 0 .3rem; }
.replique { background: #f4f8fd; border-left: 3px solid var(--bleu); padding: .7rem .9rem; border-radius: 6px; font-style: italic; }
.objections dt { font-weight: 700; margin-top: 1rem; }
.objections dd { margin: .3rem 0 0; color: #3a4757; line-height: 1.55; }
.interdits li::marker { color: var(--rouge); }
@media print {
  .app-nav, .btn, .fil, .toast, .bandeau-abonnement { display: none !important; }
  .app-grille { display: block; } .carte { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}
.carte-formule input[type=radio] { align-self: flex-start; margin: 0 0 .3rem; width: 1.1rem; height: 1.1rem; }

/* ---------- Assemblée générale ---------- */
.bloc-resolution { border: 1px solid var(--trait); border-radius: 10px; padding: 1rem; margin-bottom: .8rem; display: flex; flex-direction: column; gap: .6rem; }
.bloc-resolution.nouvelle { background: #fbfcfd; }
.bloc-resolution h3 { margin: 0; font-size: 1rem; }
.grille-resolution { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 18rem); gap: .6rem; }
.votes { display: flex; flex-direction: column; gap: .3rem; }
.ligne-vote { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid #eef1f4; flex-wrap: wrap; }
.choix-vote { display: flex; gap: 1rem; }
.choix-vote label { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400; font-size: .9rem; }
.resultat-vote { margin: .4rem 0 0; padding: .6rem .8rem; border-radius: 8px; }
.resultat-vote.adopte { background: #e3f2e8; color: var(--vert); }
.resultat-vote.rejete { background: #fbeceb; color: var(--rouge); }
@media (max-width: 800px) { .grille-resolution { grid-template-columns: minmax(0, 1fr); } }
.aide-majorite, .fiche-majorite { background: #f4f8fd; border-left: 3px solid var(--bleu); border-radius: 6px; padding: .55rem .9rem; font-size: .88rem; color: #3a4757; }
.fiche-majorite { margin: .5rem 0; }
.aide-majorite summary, .fiche-majorite summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
.aide-majorite dl, .fiche-majorite dl { margin: .6rem 0 .2rem; }
.aide-majorite dt, .fiche-majorite dt { font-weight: 700; color: var(--encre); margin-top: .5rem; }
.aide-majorite dd, .fiche-majorite dd { margin: .15rem 0 0; line-height: 1.5; }
.memo-majorites { margin-bottom: 1rem; border: 1px solid var(--trait); border-radius: 10px; padding: .7rem 1rem; }
.memo-majorites summary { cursor: pointer; font-weight: 600; color: var(--bleu); }
.memo-majorites .tableau td { vertical-align: top; font-size: .88rem; line-height: 1.45; }
.aide-majorite .fiche-majorite { background: #fff; border-left-color: var(--trait); margin: .45rem 0; }
.aide-majorite .fiche-majorite.choisie { border-left-color: var(--bleu); background: #eef4fb; }

/* ---------- Fenêtre d'aide sur les majorités ---------- */
.lien-aide { display: flex; align-items: baseline; gap: .6rem; margin: 0; font-size: .86rem; color: #3a4757; flex-wrap: wrap; }
.btn-aide { border: 1px solid var(--bleu); color: var(--bleu); background: #fff; border-radius: 999px; padding: .2rem .7rem; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.btn-aide:hover { background: #eef4fb; }
.resume-majorite { flex: 1 1 16rem; }
.fenetre-aide { width: min(46rem, 94vw); max-height: 86vh; padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(12, 20, 31, .35); }
.fenetre-aide::backdrop { background: rgba(12, 20, 31, .5); }
.fenetre-aide[open] { display: flex; flex-direction: column; }
.fenetre-entete { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid var(--trait); }
.fenetre-entete h2 { margin: 0; font-size: 1.15rem; }
.fenetre-corps { overflow-y: auto; padding: 1rem 1.3rem; display: flex; flex-direction: column; gap: .8rem; }
.fenetre-corps .fiche-majorite { background: #fff; border: 1px solid var(--trait); border-left: 4px solid var(--trait); border-radius: 10px; padding: .8rem 1rem; }
.fenetre-corps .fiche-majorite.choisie { border-left-color: var(--bleu); background: #f4f8fd; }
.fenetre-corps .fiche-majorite h3 { margin: 0 0 .3rem; font-size: 1rem; color: var(--bleu); }
.fenetre-corps dt { font-weight: 700; margin-top: .45rem; font-size: .88rem; }
.fenetre-corps dd { margin: .1rem 0 0; font-size: .88rem; line-height: 1.5; color: #3a4757; }
.fenetre-corps .btn { margin-top: .7rem; }
.fenetre-pied { padding: .7rem 1.3rem; margin: 0; border-top: 1px solid var(--trait); }

/* ---------- Guide des majorités (page autonome, projection) ---------- */
.fenetre-entete .btn { margin-left: auto; margin-right: .5rem; }
.page-majorites { max-width: 80rem; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; font-size: 1.15rem; }
.entete-majorites { position: sticky; top: 0; z-index: 5; background: var(--fond, #eef1f5); padding: .8rem 0 1rem; display: flex; flex-direction: column; gap: .8rem; }
.entete-majorites h1 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.entete-majorites p { margin: .2rem 0 0; color: #4b5a6b; }
.entete-majorites nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.entete-majorites nav a { border: 1px solid var(--trait); background: #fff; border-radius: 999px; padding: .4rem 1rem; text-decoration: none; color: var(--encre); font-weight: 600; }
.entete-majorites nav a.actif { background: var(--bleu); border-color: var(--bleu); color: #fff; }
.grande-fiche { background: #fff; border-radius: 14px; border-left: 6px solid var(--trait); padding: 1.3rem 1.6rem; margin: 1.2rem 0; scroll-margin-top: 11rem; box-shadow: 0 2px 10px rgba(28, 43, 61, .06); }
.grande-fiche.choisie { border-left-color: var(--bleu); box-shadow: 0 0 0 3px rgba(31, 94, 168, .25); }
.grande-fiche h2 { margin: 0 0 .8rem; font-size: clamp(1.25rem, 2.2vw, 1.8rem); color: var(--bleu); }
.etiquette-choix { font-size: .8rem; background: var(--bleu); color: #fff; border-radius: 999px; padding: .2rem .7rem; vertical-align: middle; }
.grille-fiche { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; }
.grille-fiche h3 { margin: 0 0 .25rem; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: #4b5a6b; }
.grille-fiche p { margin: 0; line-height: 1.55; }
.pied-majorites { color: #4b5a6b; font-size: .95rem; }
@media (max-width: 800px) { .grille-fiche { grid-template-columns: minmax(0, 1fr); } .page-majorites { font-size: 1rem; } }
@media print { .entete-majorites { position: static; } .grande-fiche { break-inside: avoid; box-shadow: none; } }

/* ---------- Mode séance ---------- */
.seuil-resolution { margin: 0; font-size: .9rem; background: #f4f8fd; border-radius: 8px; padding: .5rem .8rem; }
.seuil-resolution a { margin-left: .5rem; font-weight: 600; white-space: nowrap; }
.page-seance .texte-resolution { font-size: 1.2rem; line-height: 1.55; margin: 0 0 1rem; }
.resultat-seance { margin-top: 1.2rem; padding: 1rem 1.3rem; border-radius: 12px; display: flex; flex-direction: column; gap: .3rem; font-size: 1.3rem; }
.resultat-seance strong { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.resultat-seance.adopte { background: #e3f2e8; color: var(--vert); }
.resultat-seance.rejete { background: #fbeceb; color: var(--rouge); }
.attente-vote { margin-top: 1.2rem; font-size: 1.4rem; color: #4b5a6b; font-style: italic; }

/* ---------- Actualités ---------- */
.annonce, .article-veille { padding: 1rem 0; border-bottom: 1px solid var(--trait); }
.annonce:last-child, .article-veille:last-of-type { border-bottom: 0; }
.annonce h3, .article-veille h3 { margin: 0; font-size: 1.05rem; }
.annonce.epinglee { background: #fffaf0; margin: 0 -1rem; padding: 1rem; border-radius: 8px; }
.article-veille h3 a { color: var(--encre); text-decoration: none; }
.article-veille h3 a:hover { color: var(--bleu); text-decoration: underline; }
.article-veille p { margin: .3rem 0; }
.grille-liens { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: .5rem 2rem; }
.grille-liens h3 { font-size: .95rem; margin: .6rem 0 .3rem; color: var(--bleu); }
.lien-utile { margin: .35rem 0 .7rem; line-height: 1.4; }

/* ---------- Courriers types ---------- */
.grille-modeles { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1rem; }
.modele-courrier h2 { font-size: 1.05rem; }
.texte-courrier { width: 100%; font: inherit; line-height: 1.55; padding: .8rem; border: 1px solid var(--trait); border-radius: 8px; }
.titre-rubrique { font-size: 1.15rem; margin: 1.6rem 0 .6rem; color: var(--bleu); }

/* ---------- Espace copropriétaire (interface séparée, sans le menu de l'application) ---------- */
.espace-haut { background: var(--encre); color: #d7dfe8; }
.espace-barre { max-width: 72rem; margin: 0 auto; padding: .9rem clamp(1rem, 3vw, 2rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.espace-marque strong { display: block; color: #fff; font-size: 1.1rem; }
.espace-marque span { font-size: .85rem; color: #aebbc9; }
.espace-nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.espace-nav a { color: #e6ecf2; text-decoration: none; padding: .5rem .8rem; border-radius: 6px; font-size: .95rem; }
.espace-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.espace-nav a.actif { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 600; }
.espace-connecte { max-width: 72rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem) .6rem; font-size: .8rem; color: #aebbc9; }
.espace-contenu { max-width: 72rem; margin: 0 auto; padding: 1.75rem clamp(1rem, 3vw, 2rem) 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.espace-lots { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.espace-pied { margin: 1rem 0 0; }
.titre-section.avec-action { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.ligne-documents { flex-wrap: wrap; }
@media (max-width: 600px) { .espace-nav { width: 100%; } .espace-nav a { flex: 1 1 auto; text-align: center; } }

/* ---------- Équipe (intervenants) ---------- */
.bloc-intervenant { border-bottom: 1px solid var(--trait); padding: .8rem 0; }
.bloc-intervenant:last-of-type { border-bottom: 0; }
.bloc-intervenant summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.bloc-intervenant .formulaire { margin-top: .8rem; }
.historique-compte { margin-top: .6rem; }
.historique-compte summary { cursor: pointer; font-size: .9rem; font-weight: 600; }
.ligne-historique { padding: .4rem 0; border-bottom: 1px solid var(--trait); }
.notes-existantes { background: var(--fond); border-radius: 6px; padding: .5rem .6rem; max-height: 10rem; overflow-y: auto; }
.texte-modele { background: var(--fond); border-radius: 6px; padding: .6rem .8rem; }
.liste-controle { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .35rem; }
.aide-type { background: var(--fond); border-left: 3px solid var(--bleu); border-radius: 6px; padding: .6rem .8rem; font-size: .88rem; }
.guide-carnet summary { cursor: pointer; }
.guide-carnet h3 { font-size: .95rem; margin: 1rem 0 .4rem; }

/* ---------- Page d'accueil publique : le hall d'entrée et son mur de boîtes aux lettres ---------- */
body.accueil {
  --mur: #e6ebf0; --ardoise: #1c2b3d; --metal: #3b4d61; --metal-clair: #4c617a; --laiton: #b38b4d; --laiton-clair: #d9bf8c;
  background: var(--mur); min-height: 100vh; display: flex; flex-direction: column;
}
.accueil .hall-haut { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 72rem; margin: 0 auto; padding: 1.1rem clamp(1rem, 4vw, 3rem); }
.accueil .hall-marque { font-family: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif; font-size: 1.2rem; letter-spacing: .01em; }
.accueil .hall-haut a { color: var(--ardoise); font-size: .9rem; }
.accueil .hall {
  flex: 1; width: 100%; max-width: 72rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 3rem) 3rem;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start;
}
.accueil h1 {
  font-family: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.08; letter-spacing: -.015em; margin: .5rem 0 1rem; max-width: 16ch;
}
.accueil .hall-intro { font-size: 1.08rem; line-height: 1.6; max-width: 34rem; margin: 0 0 2rem; color: #33445a; }
.accueil .hall-consigne { font-weight: 600; margin: 0 0 .8rem; }

/* Le mur de boîtes : métal peint, fente, plaque de laiton gravée */
.accueil .boites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; background: #d3dae2; border-radius: 10px; box-shadow: inset 0 2px 6px rgba(28, 43, 61, .18); }
.accueil .boite { position: relative; display: block; height: 11.5rem; perspective: 900px; border-radius: 6px; text-decoration: none; color: inherit; }
.accueil .boite-fond { position: absolute; inset: 0; border-radius: 6px; background: #1f2d3d; display: flex; align-items: center; justify-content: flex-end; padding-right: 1.4rem; box-shadow: inset 0 3px 10px rgba(0, 0, 0, .45); }
.accueil .boite-porte {
  position: absolute; inset: 0; border-radius: 6px; padding: 1.4rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .7rem;
  background: linear-gradient(160deg, var(--metal-clair), var(--metal)); color: #dfe6ee;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 3px 8px rgba(28, 43, 61, .25);
  transform-origin: left center; transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .3s;
}
.accueil .boite-fente { width: 58%; height: .45rem; border-radius: 3px; background: #16212e; box-shadow: 0 1px 0 rgba(255, 255, 255, .2); }
.accueil .boite-plaque {
  margin-top: .4rem; padding: .45rem .8rem; border-radius: 3px; text-align: center; line-height: 1.2;
  background: linear-gradient(180deg, var(--laiton-clair), var(--laiton)); color: #3a2a10;
  font-family: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif; font-weight: 700; font-size: 1.02rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45); box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.accueil .boite-resume { font-size: .84rem; text-align: center; color: #c9d3de; line-height: 1.35; }
.accueil .boite:hover .boite-porte { box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 6px 16px rgba(28, 43, 61, .35); }
.accueil .boite:focus-visible { outline: 3px solid var(--laiton); outline-offset: 3px; }
/* La boîte choisie s'entrouvre : c'est le seul mouvement de la page */
.accueil .boite.ouverte .boite-porte { transform: rotateY(-34deg); box-shadow: 8px 4px 18px rgba(0, 0, 0, .35); }

/* Le panneau de connexion */
.accueil .hall-connexion { position: sticky; top: 1.5rem; background: #fff; border-radius: 10px; padding: 1.8rem; box-shadow: 0 2px 4px rgba(28, 43, 61, .06), 0 12px 32px rgba(28, 43, 61, .1); border-top: 4px solid var(--laiton); }
.accueil .hall-connexion h2 { font-family: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif; font-size: 1.45rem; margin: 0 0 .6rem; }
.accueil .panneau-texte { color: #3b4b5f; margin: 0 0 1.2rem; }
.accueil .hall-connexion .btn-plein { width: 100%; margin-top: .3rem; }
.accueil .panneau-liens { margin: 1rem 0 .4rem; }
.accueil .panneau-note { font-size: .9rem; color: var(--ardoise); background: var(--fond); border-radius: 6px; padding: .7rem .85rem; margin: .8rem 0 0; }
.accueil .hall-pied { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: center; padding: 1.2rem 1rem 1.6rem; font-size: .85rem; color: #52606f; }
.accueil .hall-pied a { color: #52606f; }

/* Grand écran : le hall est centré verticalement, le panneau aligné sur le milieu du mur de boîtes */
@media (min-width: 901px) {
  .accueil .hall { align-content: center; align-items: center; padding-bottom: 2rem; }
  .accueil .hall-connexion { position: static; }
}
@media (max-width: 900px) {
  .accueil .hall { grid-template-columns: minmax(0, 1fr); }
  .accueil .hall-connexion { position: static; scroll-margin-top: 1rem; }
}
@media (max-width: 480px) {
  .accueil .boites { gap: .7rem; padding: .7rem; }
  .accueil .boite { height: 10rem; }
  .accueil .boite-plaque { font-size: .92rem; padding: .4rem .5rem; }
  .accueil .boite-resume { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .accueil .boite-porte { transition: none; }
  .accueil .boite.ouverte .boite-porte { transform: none; outline: 3px solid var(--laiton); }
}
.aide-ppt { margin-top: 1rem; background: #fff; border: 1px solid var(--trait); border-radius: 8px; padding: .7rem .9rem; }
.aide-ppt summary { cursor: pointer; }
.aide-ppt p, .aide-ppt ol, .aide-ppt ul { max-width: 46rem; }

/* ---------- Hall (3.18) : boîtes émaillées de couleur, reflet sur les plaques, lettre qui vole jusqu'au panneau ---------- */
body.accueil { --role: #2466b3; --role-fonce: #184a85; }
body.accueil::before { content: ""; position: fixed; inset: auto 0 0 0; height: 38vh; z-index: -1; opacity: .5; pointer-events: none;
  background:
    linear-gradient(45deg, rgba(28, 43, 61, .05) 25%, transparent 25%, transparent 75%, rgba(28, 43, 61, .05) 75%) 0 0 / 44px 44px,
    linear-gradient(45deg, rgba(28, 43, 61, .05) 25%, transparent 25%, transparent 75%, rgba(28, 43, 61, .05) 75%) 22px 22px / 44px 44px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent); mask-image: linear-gradient(to top, #000, transparent); }
.accueil .boites { border-radius: 12px; background: linear-gradient(180deg, #cfd6de, #c3ccd6); box-shadow: inset 0 2px 6px rgba(28, 43, 61, .2), 0 1px 0 rgba(255, 255, 255, .7); }
.accueil .boite { --email: #2466b3; --email-fonce: #184a85; border-radius: 8px; }
.accueil .boite[data-role="bailleur"] { --email: #2e7d5b; --email-fonce: #1e5a41; }
.accueil .boite[data-role="syndic"] { --email: #2466b3; --email-fonce: #184a85; }
.accueil .boite[data-role="coproprietaire"] { --email: #9b2f43; --email-fonce: #72202f; }
.accueil .boite[data-role="locataire"] { --email: #d06a1c; --email-fonce: #a24f12; }
.accueil .boite-fond { border-radius: 8px; background: #17222f; box-shadow: inset 0 4px 12px rgba(0, 0, 0, .55); }
.accueil .boite-fond svg { display: none; }
.accueil .boite-porte { border-radius: 8px; padding: 1.4rem 1.9rem 1rem; color: #fff;
  background: linear-gradient(155deg, var(--email), var(--email-fonce));
  background: linear-gradient(155deg, color-mix(in srgb, var(--email) 88%, #fff), var(--email) 45%, var(--email-fonce));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 -2px 0 rgba(0, 0, 0, .15) inset, 0 4px 10px rgba(28, 43, 61, .28);
  transition: transform .6s cubic-bezier(.2, .8, .2, 1), box-shadow .3s, translate .25s; }
.accueil .boite-porte::after { content: ""; position: absolute; right: .8rem; top: 50%; width: .5rem; height: 1.4rem; margin-top: -.7rem; border-radius: 3px;
  background: linear-gradient(90deg, #8a6a37, var(--laiton-clair), #8a6a37); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.accueil .boite-fente { background: #101923; box-shadow: 0 1px 0 rgba(255, 255, 255, .3); }
.accueil .boite-plaque { position: relative; overflow: hidden; }
.accueil .boite-plaque::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
.accueil .boite-resume { color: rgba(255, 255, 255, .88); }
.accueil .boite:hover .boite-porte { translate: 0 -2px; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 18px rgba(28, 43, 61, .35); }
.accueil .boite.ouverte .boite-porte { transform: rotateY(-38deg); box-shadow: 10px 6px 20px rgba(0, 0, 0, .4); }
/* Arrivée : les plaques de laiton s'allument une à une */
@keyframes hall-reflet { 0% { left: -60%; opacity: 0; } 15% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.accueil .charge .boite-plaque::after { animation: hall-reflet 1.1s ease-out forwards; }
.accueil .charge .boite:nth-child(1) .boite-plaque::after { animation-delay: .35s; }
.accueil .charge .boite:nth-child(2) .boite-plaque::after { animation-delay: .5s; }
.accueil .charge .boite:nth-child(3) .boite-plaque::after { animation-delay: .65s; }
.accueil .charge .boite:nth-child(4) .boite-plaque::after { animation-delay: .8s; }
/* Panneau : couleur du profil choisi, dépliage à l'arrivée de la lettre */
.accueil .hall-connexion { border-top: 5px solid var(--role); transition: border-color .4s; }
.accueil .hall-connexion[data-role="bailleur"] { --role: #2e7d5b; --role-fonce: #1e5a41; }
.accueil .hall-connexion[data-role="syndic"] { --role: #2466b3; --role-fonce: #184a85; }
.accueil .hall-connexion[data-role="coproprietaire"] { --role: #9b2f43; --role-fonce: #72202f; }
.accueil .hall-connexion[data-role="locataire"] { --role: #d06a1c; --role-fonce: #a24f12; }
.accueil .hall-connexion .btn-plein { background: var(--role); border-color: var(--role); transition: background .4s; }
.accueil .hall-connexion .btn-plein:hover { background: var(--role-fonce); border-color: var(--role-fonce); }
.accueil .hall-connexion a { color: var(--role); }
@keyframes hall-deplie { from { opacity: 0; transform: perspective(700px) rotateX(-12deg) translateY(-10px); } to { opacity: 1; transform: none; } }
.accueil .panneau.deplie { animation: hall-deplie .55s cubic-bezier(.2, .8, .2, 1); transform-origin: top center; }
.lettre-vol { position: fixed; left: 0; top: 0; z-index: 60; width: 64px; height: 42px; pointer-events: none; }
.lettre-vol svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
@media (prefers-reduced-motion: reduce) {
  .accueil .boite-porte, .accueil .hall-connexion, .accueil .hall-connexion .btn-plein { transition: none; }
  .accueil .charge .boite-plaque::after, .accueil .panneau.deplie { animation: none; }
  .accueil .boite.ouverte .boite-porte { transform: none; outline: 3px solid var(--laiton); }
}

/* Accès du support au compte d'un client */
.bandeau-support { background: #fff4e0; border-left: 4px solid #b06a00; color: #5c3a00; }
.bandeau-support .btn { margin-left: .4rem; }
.code-support { font-size: 2rem; font-weight: 700; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.bienvenue-syndic { border-left: 4px solid var(--vert, #1d6b3a); }
.bienvenue-syndic h2 { margin-top: 0; }

/* ---------- GestStock ---------- */
/* Tableaux larges (lignes d'un bon de livraison…) : défilement horizontal dans leur cadre, jamais de la page */
.tableau-defilant { overflow-x: auto; }
.interrupteur { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .9rem 0; border-top: 1px solid #e3e8ee; }
.interrupteur:first-of-type { border-top: 0; }
.interrupteur p { margin: .15rem 0 0; }
.ligne-formulaire { display: flex; gap: .4rem; align-items: center; margin: 0; }
.ligne-formulaire select { min-width: 11rem; }
fieldset.sans-cadre { border: 0; padding: 0; margin: 0; min-width: 0; }
.chiffre { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.alerte-stock { color: #a3261b; font-weight: 600; }
.retrait-1 { padding-left: 1.25rem; } .retrait-2 { padding-left: 2.5rem; } .retrait-3 { padding-left: 3.75rem; } .retrait-4 { padding-left: 5rem; }
.masque { display: none; }
/* Choix de la première case d'une planche d'étiquettes */
.grille-planche { display: grid; gap: 3px; max-width: 22rem; margin-bottom: .6rem; }
.grille-planche button { aspect-ratio: var(--ratio, 2 / 1); border: 1px solid #c5ced8; background: #fff; border-radius: 3px; font-size: .7rem; color: #52606f; cursor: pointer; padding: 0; min-height: 1.2rem; }
.grille-planche button.vide { background: #dfe4ea; color: #9aa6b2; }
.grille-planche button.depart { background: #1f5fa8; border-color: #1f5fa8; color: #fff; font-weight: 700; }
.grille-planche button:focus-visible { outline: 2px solid #1f5fa8; outline-offset: 1px; }
/* Aide intégrée */
.lien-aide { float: right; margin: .2rem 0 .4rem 1rem; font-size: .85rem; padding: .25rem .7rem; border: 1px solid #c5ced8; border-radius: 999px; background: #fff; text-decoration: none; }
.lien-aide::before { content: "?"; display: inline-block; width: 1.1em; height: 1.1em; line-height: 1.1em; margin-right: .35em; border-radius: 50%; background: #1f5fa8; color: #fff; text-align: center; font-weight: 700; font-size: .8em; }
.aide { max-width: 52rem; }
.aide section { scroll-margin-top: 1rem; }
.aide h3 { font-size: 1rem; margin: 1.2rem 0 .3rem; }
.aide li { margin-bottom: .3rem; }
.aide details { margin: .5rem 0; } .aide details summary { cursor: pointer; font-weight: 600; }
.sommaire-aide ol { columns: 2; margin: .5rem 0 0; } @media (max-width: 640px) { .sommaire-aide ol { columns: 1; } }
.chiffre-grand { font-size: 2rem; font-weight: 700; margin: .2rem 0; font-variant-numeric: tabular-nums; }