/* portail.css : feuille unique, aucune ressource externe, thème clair seul.
   Un seul jeu de gabarits : écran large (1280 px) par défaut, téléphone (390 px) sous 768 px. */
:root {
  --fond: #f9fafb;
  --carte: #ffffff;
  --bord: #e5e7eb;
  --bord-fin: #f3f4f6;
  --texte: #111827;
  --discret: #4b5563;
  --accent: #1d4ed8;
  --accent-survol: #1e3a8a;
  --accent-texte: #ffffff;
  --champ-bord: #6b7280;
  --alerte-fond: #fffbeb;
  --alerte-bord: #fcd34d;
  --alerte-texte: #78350f;
  --avoir-fond: #fef3c7;
  --avoir-texte: #92400e;
  --ok: #047857;
  --ok-fond: #ecfdf5;
  --h-controle: 48px;
  --h-cible: 44px;
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  color: var(--texte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--accent-survol); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.saut { position: absolute; left: -999px; top: 0; background: var(--carte); color: var(--accent); padding: 0.75rem 1rem; }
.saut:focus { left: 0; z-index: 20; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.petit-seul { display: none; }

/* Bandeau (écran large) */
.bandeau {
  height: 72px; background: var(--carte); border-bottom: 1px solid var(--bord);
  display: flex; align-items: center; justify-content: space-between; padding: 0 48px;
}
.logo { display: block; width: 150px; height: auto; }
.nav-public, .compte { display: flex; align-items: center; gap: 24px; font-size: 14px; min-width: 0; }
.lien-nav {
  display: inline-flex; align-items: center; min-height: var(--h-cible); padding: 0 4px;
  color: var(--discret);
}
.support-absent { color: var(--discret); }
.adresse-connectee { font-weight: 600; color: var(--texte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.form-lien { margin: 0; display: flex; }
.lien-bouton {
  font: inherit; font-size: 14px; background: none; border: 0; padding: 0 4px; cursor: pointer;
  min-height: var(--h-cible); color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em;
}
.lien-bouton:hover { color: var(--accent-survol); }

/* Page et cartes */
.page { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.carte {
  width: 100%; max-width: 480px; background: var(--carte); border: 1px solid var(--bord);
  border-radius: 12px; padding: 40px; display: flex; flex-direction: column;
}
.carte-480 { max-width: 480px; }
.carte-520 { max-width: 520px; }
.carte-560 { max-width: 560px; }
.carte-lecture { max-width: 720px; display: block; }
h1 { margin: 0; font-size: 24px; line-height: 1.25; font-weight: 600; color: var(--texte); }
.titre-accueil { font-size: 28px; line-height: 1.2; }
.titre-sobre { margin: 0; }
h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--texte); }
.etiquette-ecran { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--discret); }
.intro { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--discret); }
.intro p { margin: 0 0 8px; }
.sous-titre { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--discret); }
.aide { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--discret); }
.aide p { margin: 0 0 8px; }
.aide a { display: inline-flex; align-items: center; min-height: var(--h-cible); }
.texte p { margin: 0 0 12px; line-height: 1.6; }
.carte-lecture h1 { margin-bottom: 16px; }
.message {
  margin: 20px 0 0; padding: 12px 16px; background: var(--alerte-fond); color: var(--alerte-texte);
  border: 1px solid var(--alerte-bord); border-radius: 8px; font-size: 14px; line-height: 1.5;
}
.societe { font-weight: 400; color: var(--discret); }
.petit { font-size: 13px; color: var(--discret); }

/* Formulaires, champs, boutons */
.formulaire { display: flex; flex-direction: column; margin: 0; }
.formulaire label { display: block; margin: 32px 0 8px; font-size: 14px; font-weight: 600; color: var(--texte); }
input[type="email"], input[type="text"] {
  width: 100%; height: var(--h-controle); padding: 0 16px; font: inherit; font-size: 16px;
  border: 1px solid var(--champ-bord); border-radius: 8px; background: var(--carte); color: var(--texte);
}
input::placeholder { color: var(--champ-bord); opacity: 1; }
.champ-code { height: 60px; font-size: 30px; letter-spacing: 0.5em; text-align: center; }
.meta-code { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--discret); }
.bouton {
  display: flex; align-items: center; justify-content: center; min-height: var(--h-controle);
  padding: 0 24px; border-radius: 8px; border: 1px solid transparent; font: inherit; font-size: 16px;
  font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
}
.formulaire .bouton { margin-top: 20px; width: 100%; }
.bouton-principal { background: var(--accent); color: var(--accent-texte); }
.bouton-principal:hover { background: var(--accent-survol); color: var(--accent-texte); }
.bouton-secondaire { background: var(--carte); color: var(--texte); border-color: var(--champ-bord); font-size: 15px; font-weight: 400; padding: 0 20px; }
.bouton-secondaire:hover { color: var(--texte); background: var(--fond); }
.lien-action {
  display: flex; align-items: center; justify-content: center; min-height: var(--h-cible);
  margin-top: 8px; font-size: 15px; color: var(--accent); text-decoration: underline;
}
.actions { display: flex; gap: 12px; margin-top: 24px; align-items: stretch; }
.actions .bouton-principal { flex: 1; }
.form-action { margin: 0; display: flex; }
.case { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 0; }
.case label { margin: 0; min-height: var(--h-cible); font-size: 15px; font-weight: 400; line-height: 1.5; color: var(--texte); }
input[type="checkbox"] { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--accent); }

/* Encadrés, conditions, demande enregistrée */
.encadre {
  margin-top: 20px; border: 1px solid var(--bord); border-radius: 8px; padding: 14px 16px;
  font-size: 15px; color: var(--texte); background: var(--carte);
}
.liens-encadre { display: flex; flex-direction: column; gap: 0; padding: 8px 16px; }
.liens-encadre a { display: flex; align-items: center; min-height: var(--h-cible); }
.texte-conditions { margin-top: 20px; border: 1px solid var(--bord); border-radius: 8px; padding: 0 16px; font-size: 14px; }
.texte-conditions summary {
  display: flex; align-items: center; min-height: var(--h-cible); cursor: pointer; color: var(--accent); font-size: 15px;
}
.texte-conditions .texte { padding-bottom: 8px; }
.pastille {
  width: 56px; height: 56px; border-radius: 28px; background: var(--ok-fond); color: var(--ok);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.adresse-demande { font-weight: 600; color: var(--texte); overflow-wrap: anywhere; }
.encadre-reference { display: flex; flex-direction: column; gap: 6px; }
.reference { font-size: 22px; font-weight: 600; letter-spacing: 0.08em; color: var(--texte); overflow-wrap: anywhere; }
.numeros { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.numeros li:not(:last-child)::after { content: ",\00a0"; }

/* Liste des factures (écran large : tableau) */
.page-liste { flex-direction: column; justify-content: flex-start; align-items: stretch; width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 48px; }
.liste-factures { display: flex; flex-direction: column; gap: 20px; }
.tete-liste { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.page-liste > .tete-liste { margin-bottom: 20px; }
.tete-liste h1 { font-size: 26px; }
.date-liste { margin: 6px 0 0; font-size: 14px; color: var(--discret); }
.barre-envoi .bouton { padding: 0 24px; }
.bloc-client { max-width: none; padding: 0; display: block; overflow: hidden; }
.bloc-client h2 { padding: 14px 16px; border-bottom: 1px solid var(--bord); }
.logo-societe { vertical-align: middle; margin-left: 8px; width: auto; }
.logo-hgt { height: 30px; }
.logo-ilk { height: 22px; }
table.factures { width: 100%; border-collapse: collapse; }
table.factures th {
  font-size: 13px; font-weight: 600; color: var(--discret); text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--bord);
}
table.factures td, table.factures th[scope="row"] {
  font-size: 15px; color: var(--texte); padding: 12px; border-bottom: 1px solid var(--bord-fin); vertical-align: middle;
}
table.factures th[scope="row"] { font-weight: 600; text-align: left; }
table.factures .c-choix { width: 56px; padding: 0 0 0 6px; }
table.factures th.c-choix { border-bottom: 1px solid var(--bord); }
table.factures .num { text-align: right; white-space: nowrap; }
table.factures label { cursor: pointer; }
.zone-case { display: flex; align-items: center; justify-content: center; min-width: var(--h-cible); min-height: var(--h-cible); cursor: pointer; }
.etiquette-avoir {
  display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 4px; font-size: 12px; font-weight: 600;
  color: var(--avoir-texte); background: var(--avoir-fond);
}
.c-envoi { color: var(--ok); font-size: 13px; }
table.factures td.c-envoi { font-size: 13px; color: var(--ok); }
.aide-client { margin: 0; padding: 12px 16px; font-size: 13px; color: var(--discret); }
.large-seul { display: inline; }

/* Pied de page */
.pied { padding: 16px 48px 24px; font-size: 13px; color: var(--discret); }
.pied-liens { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.pied-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-bottom: 12px; }
.logo-pied { width: auto; }
.logo-pied-hgt { height: 30px; }
.logo-pied-ilk { height: 22px; }
.pied .lien-nav { color: var(--discret); }
.sep { color: var(--discret); }

/* Téléphone (390 px) */
@media (max-width: 767px) {
  :root { --h-controle: 52px; }
  body { background: var(--carte); }
  body.ecran-liste { background: var(--fond); }
  .petit-seul { display: inline-flex; }
  .large-seul { display: none; }
  .bandeau { height: auto; background: none; border-bottom: 0; padding: 32px 24px 0; justify-content: flex-start; }
  .logo { width: 170px; }
  .nav-public, .compte { display: none; }
  .page { align-items: flex-start; padding: 40px 24px 24px; }
  .carte { max-width: none; background: none; border: 0; border-radius: 0; padding: 0; }
  .titre-accueil { font-size: 28px; }
  .formulaire .bouton { margin-top: 24px; }
  .champ-code { height: 64px; font-size: 32px; }
  .lien-action { min-height: 48px; margin-top: 12px; }
  input[type="checkbox"] { width: 24px; height: 24px; }
  .actions { flex-direction: column; gap: 12px; margin-top: 28px; }
  .form-action { display: block; }
  .form-action .bouton { width: 100%; min-height: 48px; }
  .bouton-secondaire { background: none; border-color: transparent; color: var(--discret); text-decoration: underline; }
  .bouton-secondaire:hover { background: none; color: var(--texte); }
  .encadre, .texte-conditions { margin-top: 24px; }
  .pied { padding: 16px 24px 32px; margin-top: auto; }
  .pied-liens { gap: 8px 16px; }

  /* Liste : barre haute (adresse, Déconnexion), cartes, barre d'envoi fixe */
  .ecran-liste .bandeau { background: var(--carte); border-bottom: 1px solid var(--bord); padding: 8px 20px; }
  .ecran-liste .logo { display: none; }
  .ecran-liste .compte { display: flex; width: 100%; justify-content: space-between; gap: 12px; }
  .page-liste { padding: 12px 20px 120px; max-width: none; margin: 0; }
  .tete-liste h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .date-liste { margin: 0; font-size: 13px; }
  .page-liste > .tete-liste { margin-bottom: 8px; }
  .liste-factures { gap: 16px; }
  .barre-envoi {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; padding: 12px 20px 20px;
    background: var(--carte); border-top: 1px solid var(--bord);
  }
  .barre-envoi .bouton { width: 100%; }
  .bloc-client { background: none; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; gap: 8px; }
  .bloc-client h2 { padding: 0; border: 0; }
  .aide-client { padding: 4px 0 0; }
  table.factures, table.factures tbody, table.factures tr, table.factures td, table.factures th { display: block; }
  table.factures thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.factures tr {
    position: relative; display: grid; grid-template-columns: 44px auto auto 1fr; align-items: baseline;
    background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 4px 12px 8px 0; margin-bottom: 8px;
  }
  table.factures td, table.factures th[scope="row"] { border: 0; padding: 2px 0; font-size: 14px; color: var(--discret); }
  table.factures .c-choix { grid-column: 1; grid-row: 1 / span 3; align-self: start; width: auto; padding: 0; }
  table.factures th[scope="row"].c-numero { grid-column: 2 / span 2; grid-row: 1; font-size: 15px; color: var(--texte); overflow-wrap: anywhere; }
  table.factures .c-numero label::after { content: ""; position: absolute; inset: 0; }
  table.factures .c-date { grid-column: 4; grid-row: 1; text-align: right; font-size: 15px; font-weight: 600; color: var(--texte); }
  table.factures .c-ht { grid-column: 2; grid-row: 2; text-align: left; }
  table.factures .c-ttc { grid-column: 3; grid-row: 2; text-align: left; }
  table.factures .c-ht::after { content: "\00a0HT\00a0\00b7\00a0"; }
  table.factures .c-ttc::after { content: "\00a0TTC"; }
  table.factures td.c-envoi { grid-column: 2 / -1; grid-row: 3; font-size: 12px; color: var(--ok); }
  table.factures .c-envoi:empty { display: none; }
}