/* Charte graphique inspirée du drapeau de la Guinée-Bissau :
   vert (bandes horizontales), jaune/or, rouge (bande verticale), étoile noire. */
:root {
  --vert: #046A38;        /* vert du drapeau — couleur de marque principale */
  --vert-fonce: #024a27;  /* survol / accents foncés */
  --vert-clair: #e3f3ea;  /* fond clair (encadrés, mise en avant) */
  --jaune: #FCD116;       /* jaune du drapeau — accent (paiement, mise en valeur) */
  --jaune-fonce: #8a6d00; /* variante foncée du jaune, lisible en texte sur fond clair */
  --rouge: #CE1126;       /* rouge du drapeau — alertes, erreurs, actions destructrices */
  --noir: #1a1a1a;        /* étoile noire du drapeau — texte fort, accents sombres */
  --grey: #595959;
  --light-grey: #f2f2f2;
  --radius: 10px;
  --navy: #12274a;         /* page de connexion (views/connexion.ejs) — panneau de marque */
  --navy-fonce: #0a1a33;
  --vert-vif: #7fe3a0;     /* variante claire du vert, lisible sur le panneau sombre de connexion */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f6f7f9;
  color: #1c1c1c;
}

/* Bandeau institutionnel (République / Ministère de la Justice et des Droits de l'Homme),
   affiché au-dessus de la barre de marque SIGREN sur toutes les pages — voir partials-head.ejs.
   Même en-tête, dans le même esprit, que celui des documents imprimables (.entete-ministere). */
.bandeau-officiel {
  background: #fff;
  border-bottom: 1px solid #e2e2e2;
  padding: 6px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.bandeau-officiel-logo { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.bandeau-officiel-texte { font-size: 10px; line-height: 1.3; color: var(--grey); }
.bandeau-officiel-texte strong { display: block; font-size: 11px; color: var(--vert-fonce); }

.topbar {
  background: var(--vert);
  color: #fff;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--jaune);
}
.brand { color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand-mark {
  width: 38px; height: 38px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.brand small { display: block; font-weight: 400; font-size: 11px; opacity: 0.85; }
.tag { background: rgba(255,255,255,0.18); padding: 4px 10px; border-radius: 20px; font-size: 12px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.lien-topbar {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  opacity: 0.9;
}
.lien-topbar:hover { opacity: 1; text-decoration: underline; }
.form-deconnexion { display: inline-flex; margin: 0; }
.lien-topbar-bouton {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.lang-switch { display: flex; gap: 4px; }
.lang-switch a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.4);
  opacity: 0.75;
}
.lang-switch a.actif { background: var(--jaune); color: var(--noir); border-color: var(--jaune); opacity: 1; }

.wrap { max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }
/* Pages de tableau de bord (BI de l'agence, caisse) : nettement plus de contenu à afficher
   (cartes de synthèse, plusieurs tableaux) qu'un simple formulaire — une largeur plus généreuse
   évite de grandes zones vides de part et d'autre sur un écran large. Passé via le paramètre
   pleineLargeur de partials-head.ejs, plutôt que d'élargir TOUTES les pages (un formulaire de
   connexion ou une liste d'administration restent plus lisibles sur une colonne plus étroite). */
.wrap-large { max-width: 1280px; }

/* Panneaux jumelés côte à côte sur écran large (BI de l'agence, views/agence-bi.ejs) : deux
   tableaux plus étroits utilisent mieux l'espace ainsi côte à côte qu'empilés en pleine largeur,
   chacun avec une grande marge vide à droite de son tableau. */
.grille-2col { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.grille-2col .panel { margin-bottom: 0; }
@media (min-width: 860px) {
  .grille-2col { grid-template-columns: 1fr 1fr; }
}

.lien-retour {
  display: inline-block;
  color: var(--vert);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
.lien-retour:hover { text-decoration: underline; }

.hero { margin-bottom: 20px; }
.hero h1 { color: var(--vert); margin-bottom: 6px; }
.hero p { color: var(--grey); max-width: 640px; }
.hero.success h1 { color: var(--vert); }

.grid-actes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.carte-acte {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-top: 3px solid var(--jaune);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: box-shadow .15s, transform .15s;
}
.carte-acte:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-2px); border-top-color: var(--rouge); }
.carte-acte-code { font-size: 11px; letter-spacing: 0.06em; color: var(--jaune-fonce); font-weight: 700; }
.carte-acte-nom { font-weight: 600; color: var(--vert); }

.panel {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid #e6e6e6;
  padding: 24px;
  margin-bottom: 20px;
}
.panel h2 { margin-top: 0; color: var(--vert); font-size: 18px; }

.form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.form-row label, form > label { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--grey); font-weight: 600; }
input, select {
  padding: 9px 10px;
  border: 1px solid #d3d3d3;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: #1c1c1c;
}
input:focus, select:focus { outline: 2px solid var(--vert); outline-offset: 1px; }
.field-block { border: 1px solid #eee; border-radius: 8px; padding: 14px 16px; margin: 16px 0; }
.field-block legend { padding: 0 6px; color: var(--vert); font-weight: 700; font-size: 13px; }

.total-box {
  background: var(--vert-clair);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 18px 0;
  border-left: 4px solid var(--jaune);
}
.total-detail { margin-bottom: 8px; }
.detail-line { display: flex; justify-content: space-between; font-size: 13px; color: #1f4d34; padding: 2px 0; }
.total-amount { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; color: var(--vert); font-weight: 700; }
.total-amount strong { font-size: 26px; }
.total-amount strong.total-error { color: var(--rouge); font-size: 16px; }
.total-note { font-size: 12px; color: var(--grey); margin: 8px 0 0; }
.erreur-inline { color: var(--rouge); font-size: 13px; margin: 4px 0; }

.btn-primary {
  background: var(--vert);
  color: #fff;
  border: none;
  padding: 13px 22px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
}
.btn-primary:disabled { background: #a9a9a9; cursor: not-allowed; }
.btn-primary:not(:disabled):hover { background: var(--vert-fonce); }
.btn-encaisser { background: var(--jaune); color: var(--noir); }
.btn-encaisser:hover { background: #e0bb0a; }

.btn-secondary {
  display: inline-block;
  background: #fff;
  border: 1px solid var(--vert);
  color: var(--vert);
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 14px;
}
.btn-danger {
  background: #fff;
  border: 1px solid var(--rouge);
  color: var(--rouge);
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
}

.mode-paiement { display: flex; gap: 18px; flex-wrap: wrap; }
.mode-paiement label { display: flex; align-items: center; gap: 6px; font-weight: 400; color: #1c1c1c; }

.btn-petit { padding: 6px 12px; font-size: 12px; width: auto; }

.lien-modifier { cursor: pointer; color: var(--vert); font-weight: 600; font-size: 13px; list-style: none; }
.lien-modifier::-webkit-details-marker { display: none; }
details .form-edition {
  margin-top: 10px;
  padding: 14px;
  background: var(--light-grey);
  border-radius: 8px;
}
.case-actif { flex-direction: row !important; align-items: center; gap: 6px !important; }

/* Interrupteurs du module de notification SMS (views/admin-notifications.ejs) : une case à cocher
   suivie d'une phrase d'aide en retrait, pour rappeler ce que chaque interrupteur déclenche sans
   alourdir l'écran d'un tableau. */
.case-notification { margin-bottom: 14px; }
.case-notification:last-child { margin-bottom: 0; }
.case-notification p { margin: 4px 0 0 24px; }

/* Indicateur "traitement en cours" (sablier) affiché sur un bouton pendant l'envoi d'un
   formulaire — voir public/js/traitement.js, appliqué automatiquement à tous les formulaires
   de l'application au moment de la soumission, sans rien à ajouter dans chaque vue. */
.sablier {
  display: inline-block;
  margin-right: 7px;
  animation: sablier-tourne 1.1s linear infinite;
}
@keyframes sablier-tourne {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(180deg); }
  55%  { transform: rotate(180deg); }
  95%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
  /* rotate(360deg) == rotate(0deg) visuellement : la boucle repart sans à-coup */
}
button.en-traitement,
input[type="submit"].en-traitement {
  cursor: wait;
  opacity: 0.85;
}

.table, .table-recap { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #eee; font-size: 14px; }
.table thead th { color: var(--grey); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.table-recap th { width: 160px; color: var(--grey); font-size: 13px; vertical-align: top; padding: 8px; }
.table-recap td { padding: 8px; font-size: 14px; }

.mono { font-family: "SFMono-Regular", Consolas, Menlo, monospace; }
.muted { color: var(--grey); }
.small { font-size: 12px; }

.badge { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-creee { background: #fff3cd; color: #8a6d3b; }
.badge-payee { background: #d4edda; color: #1e7e34; }
.badge-annulee { background: #f8d7da; color: #a71d2a; }
/* Statuts d'une DEMANDE d'annulation (workflow caisse -> responsable d'agence, voir
   views/agence-bi.ejs et views/recu.ejs) — distincts des statuts d'une demande ci-dessus. */
.badge-en_attente { background: #fff3cd; color: #8a6d3b; }
.badge-validee { background: #d4edda; color: #1e7e34; }
.badge-refusee { background: #e2e3e5; color: #383d41; }

.panel-alerte { border-left: 4px solid var(--jaune-fonce); background: #fffdf5; }
.demande-annulation-carte {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.demande-annulation-carte:last-child { border-bottom: none; }
.demande-annulation-motif { font-size: 13px; color: var(--grey); margin-top: 2px; }
.demande-annulation-actions { display: flex; gap: 8px; flex-shrink: 0; }
.btn-mini {
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.btn-mini-valider { background: var(--vert); color: #fff; }
.btn-mini-refuser { background: #fff; color: var(--rouge); border: 1px solid var(--rouge); }
.btn-mini-info { background: var(--vert-clair); color: var(--vert-fonce); text-decoration: none; display: inline-flex; align-items: center; }
.annulation-attente-note { font-size: 13px; color: #8a6d3b; background: #fff3cd; border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.annulation-refusee-note { font-size: 13px; color: #a71d2a; background: #f8d7da; border-radius: 8px; padding: 8px 12px; margin-top: 10px; }
.document-disponible-note { font-size: 13px; color: var(--vert-fonce); background: var(--vert-clair); border-radius: 8px; padding: 8px 12px; margin-top: 10px; }

.recap-ref { font-weight: 700; color: var(--vert); margin-bottom: 10px; }

/* En-tête officiel (République / Ministère de la Justice et des Droits de l'Homme) affiché en
   haut de l'ordre de paiement et du reçu — voir views/partials-entete-officielle.ejs. */
.entete-ministere {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--vert);
}
.entete-ministere-logo { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.entete-ministere-texte {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--noir);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.entete-ministere-texte strong { display: block; font-size: 13px; color: var(--vert-fonce); }

.recu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 20px; flex-wrap: wrap; }
.recu-titre { font-size: 12px; letter-spacing: .08em; color: var(--grey); }

/* QR Code agrandi : plus grand = plus facile à scanner (moins de précision requise de l'appareil
   qui scanne) et occupe l'espace resté vide à droite de l'en-tête du document, plutôt qu'une
   vignette perdue dans un coin. Le PNG source est généré en 340px (voir OPTIONS_QR,
   src/routes/demandes.js) — toujours plus grand que la taille affichée ici, pour rester net. */
.qr { width: 190px; height: 190px; border: 1px solid #eee; border-radius: 8px; display: block; }

/* Pastille "SIGREN" superposée au centre du QR Code (ordre-paiement.ejs / recu.ejs) : le QR est
   généré avec errorCorrectionLevel "H" (voir src/routes/demandes.js), qui tolère jusqu'à ~30 % de
   la surface masquée — la pastille reste très en dessous de cette marge, le QR se scanne donc
   normalement malgré le libellé. */
.qr-wrap { position: relative; display: inline-block; line-height: 0; flex-shrink: 0; }
.qr-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: var(--noir);
  border: 2px solid var(--vert);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

.actions-recu { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* Tableau de bord de la caisse (views/caisse.ejs) : cartes de synthèse statistique. */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.carte-stat {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-left: 4px solid var(--vert);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-align: center;
}
.carte-stat.stat-semaine { border-left-color: var(--jaune-fonce); }
.carte-stat.stat-mois { border-left-color: var(--rouge); }
.carte-stat.stat-total { border-left-color: var(--noir); }
.carte-stat-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.carte-stat-montant { font-size: 22px; font-weight: 800; color: #1c1c1c; }
.carte-stat-montant small { font-size: 13px; font-weight: 700; color: var(--grey); }
.carte-stat-nombre { font-size: 12px; color: var(--grey); margin-top: 4px; }
.carte-stat-taux { font-size: 12px; color: var(--vert-fonce); font-weight: 700; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e6e6e6; }

/* Centre opérationnel (views/operationnel-bi.ejs) : variante « moderne » des cartes de synthèse
   (badge d'icône teinté + gros chiffre + pied de carte), utilisée UNIQUEMENT sur cette page —
   volontairement distincte de .grid-stats/.carte-stat ci-dessus, qui restent partagées par
   caisse.ejs et agence-bi.ejs et ne doivent pas être modifiées pour ce besoin. */
.grid-stats-moderne {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.carte-stat-moderne {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(20, 20, 20, 0.05);
}
.carte-stat-moderne-icone {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.carte-stat-moderne-icone svg { width: 20px; height: 20px; }
.carte-stat-moderne-icone.icone-vert { background: var(--vert-clair); color: var(--vert-fonce); }
.carte-stat-moderne-icone.icone-jaune { background: #fdf3d0; color: var(--jaune-fonce); }
.carte-stat-moderne-icone.icone-rouge { background: #fbe2e5; color: var(--rouge); }
.carte-stat-moderne-icone.icone-noir { background: #ececec; color: var(--noir); }
.carte-stat-moderne-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.carte-stat-moderne-montant { font-size: 24px; font-weight: 800; color: #1c1c1c; line-height: 1.2; }
.carte-stat-moderne-montant small { font-size: 13px; font-weight: 700; color: var(--grey); }
.carte-stat-moderne-pied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}
.carte-stat-moderne-nombre { font-size: 12px; color: var(--grey); }
.carte-stat-moderne-taux {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.carte-stat-moderne-taux.taux-vert { background: var(--vert-clair); color: var(--vert-fonce); }
.carte-stat-moderne-taux.taux-jaune { background: #fdf3d0; color: var(--jaune-fonce); }
.carte-stat-moderne-taux.taux-rouge { background: #fbe2e5; color: var(--rouge); }
.carte-stat-moderne-taux.taux-noir { background: #ececec; color: var(--noir); }

/* BI de l'agence (views/agence-bi.ejs) : onglets de période au-dessus des tableaux de
   répartition, et petit graphique en barres pour l'évolution mensuelle — en CSS pur, sans
   bibliothèque externe (voir le commentaire sur esbuild/Netlify dans src/app.js : on évite
   volontairement toute dépendance qui ne serait pas garantie de survivre au bundling). */
.tabs-periode { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-periode {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  color: var(--grey);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.tab-periode:hover { border-color: var(--vert); color: var(--vert); }
.tab-periode.actif { background: var(--vert); border-color: var(--vert); color: #fff; }

.evolution-mois { display: flex; flex-direction: column; gap: 10px; }
.evolution-ligne { display: flex; align-items: center; gap: 12px; }
.evolution-mois-label { width: 90px; flex-shrink: 0; font-size: 12px; color: var(--grey); text-transform: capitalize; }
.evolution-barre-fond { flex: 1; background: var(--vert-clair); border-radius: 6px; overflow: hidden; height: 22px; min-width: 40px; }
.evolution-barre { background: var(--vert); height: 100%; border-radius: 6px; min-width: 2px; }
.evolution-mois-valeur { width: 170px; flex-shrink: 0; text-align: right; font-size: 12px; }

.barre-part-fond { background: #eee; border-radius: 4px; overflow: hidden; height: 8px; margin-top: 4px; }
.barre-part { background: var(--vert); height: 100%; border-radius: 4px; }

.form-recherche { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.form-recherche input[type="search"] { flex: 1; min-width: 220px; }
.form-recherche .btn-primary { width: auto; }

.erreur-panel { text-align: center; padding: 60px 24px; }
.erreur-panel h1 { color: var(--rouge); }

.footer { text-align: center; color: var(--grey); font-size: 12px; padding: 30px 20px; }

.wrap-connexion { max-width: 380px; margin: 60px auto 0; padding: 0 20px; }
.panel-connexion { text-align: left; }
.panel-connexion .btn-primary { margin-top: 6px; }

/* Page de connexion "brute" (views/connexion.ejs) : mise en page personnalisée en deux panneaux,
   sans le bandeau institutionnel ni la barre de marque habituels (voir pageBrute dans
   partials-head.ejs / partials-foot.ejs). Le fond photographique du gabarit d'origine est
   remplacé ici par un dégradé et une légère texture en pur CSS : plus léger, sans dépendance à un
   fichier image supplémentaire, et fidèle dans l'esprit (panneau sombre à gauche, carte blanche
   à droite). */
.page-brute { padding: 0; margin: 0; }

.connexion-split {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh;
  position: relative;
}

/* Zone gauche : carte de marque calquée sur la maquette fournie par le client (logo SIGREN,
   accroche, puis un bandeau bleu marine listant 4 points forts) — remplace l'ancienne zone
   volontairement vierge (revenu sur cette décision, demande explicite). Remplit tout le panneau,
   bord à bord : le fond blanc (.marque-carte-haut) et le fond marine (.marque-carte-bas) sont
   chacun découpés (clip-path) par une courbe ondulée, sans bord droit parfaitement vertical.
   Le trait vert qui soulignait ce contour a été retiré (demande explicite du client), la courbe
   du clip-path restant seule à marquer la transition avec le gris clair de la zone formulaire.
   Panneau élargi (46% -> 52%, formulaire ramené à 48%) et courbe échantillonnée tous les 2% au
   lieu de tous les 8,33%/12,5% : même tracé sinusoïdal (mêmes creux/sommets), mais en pointillé
   assez fin pour paraître arrondi/lisse à l'œil plutôt que facetté (demande explicite du client). */
.connexion-marque {
  flex: 1 1 52%;
  min-width: 320px;
  background: var(--light-grey);
  position: relative;
}

.marque-carte {
  height: 100%;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.marque-carte-haut {
  flex: 0 0 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 48px 24px;
  text-align: center;
  background: #fff;
  clip-path: polygon(0% 0%, 94.02% 0%, 95.02% 2%, 95.84% 4%, 96.46% 6%, 96.85% 8%, 97% 10%, 96.9% 12%, 96.55% 14%, 95.97% 16%, 95.19% 18%, 94.21% 20%, 93.09% 22%, 91.86% 24%, 90.56% 26%, 89.24% 28%, 87.95% 30%, 86.74% 32%, 85.63% 34%, 84.69% 36%, 83.93% 38%, 83.38% 40%, 83.07% 42%, 83.01% 44%, 83.19% 46%, 83.62% 48%, 84.27% 50%, 85.12% 52%, 86.15% 54%, 87.31% 56%, 88.57% 58%, 89.88% 60%, 91.19% 62%, 92.46% 64%, 93.65% 66%, 94.7% 68%, 95.59% 70%, 96.28% 72%, 96.75% 74%, 96.98% 76%, 96.96% 78%, 96.69% 80%, 96.19% 82%, 95.47% 84%, 94.56% 86%, 93.48% 88%, 92.28% 90%, 91% 92%, 89.68% 94%, 88.38% 96%, 87.13% 98%, 85.98% 100%, 0% 100%);
}
.marque-logo { width: 210px; height: 210px; object-fit: contain; margin: 0 auto 26px; display: block; }
.marque-wordmark {
  font-size: 82px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--navy);
  line-height: 1;
  margin: 0 0 16px;
}
.marque-wordmark span { color: var(--vert); }
.marque-soustitre {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--navy);
  max-width: 380px;
  margin: 0 auto 26px;
  line-height: 1.4;
}
.marque-tagline { font-size: 23px; font-weight: 600; color: var(--vert); margin: 0 0 6px; }

/* Petite vague horizontale entre le blanc et le marine (détail distinct de la vague verticale
   ci-dessus) : son bord droit reçoit un simple recadrage (inset) à la même abscisse que le point
   de jonction haut/bas de la vague verticale (85.98 %), pour rester raccord avec elle. */
.marque-vague { display: block; line-height: 0; margin-bottom: -1px; clip-path: inset(0 14.02% 0 0); }
.marque-vague svg { width: 100%; height: 34px; display: block; }
.marque-vague path { fill: var(--navy); }

.marque-carte-bas {
  flex: 0 0 40%;
  min-height: 0;
  background: var(--navy);
  padding: 30px 48px 44px;
  clip-path: polygon(0% 0%, 85.98% 0%, 85.3% 2%, 84.69% 4%, 84.16% 6%, 83.72% 8%, 83.38% 10%, 83.15% 12%, 83.02% 14%, 83.01% 16%, 83.1% 18%, 83.31% 20%, 83.62% 22%, 84.03% 24%, 84.53% 26%, 85.12% 28%, 85.79% 30%, 86.52% 32%, 87.31% 34%, 88.14% 36%, 89% 38%, 89.88% 40%, 90.76% 42%, 91.62% 44%, 92.46% 46%, 93.26% 48%, 94.02% 50%, 94.7% 52%, 95.31% 54%, 95.84% 56%, 96.28% 58%, 96.62% 60%, 96.85% 62%, 96.98% 64%, 96.99% 66%, 96.9% 68%, 96.69% 70%, 96.38% 72%, 95.97% 74%, 95.47% 76%, 94.88% 78%, 94.21% 80%, 93.48% 82%, 92.69% 84%, 91.86% 86%, 91% 88%, 90.12% 90%, 89.24% 92%, 88.38% 94%, 87.54% 96%, 86.74% 98%, 85.98% 100%, 0% 100%);
}
.marque-grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 24px;
  max-width: 460px;
  margin: 0 auto;
}
.marque-feature { display: flex; align-items: flex-start; gap: 12px; }
.marque-feature-icone {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--vert);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.marque-feature-texte strong { display: block; color: #fff; font-size: 16px; margin-bottom: 4px; }
.marque-feature-texte p { color: #c7d2e3; font-size: 13.5px; line-height: 1.4; margin: 0; }


@media (max-width: 640px) {
  .marque-grille { grid-template-columns: 1fr; }
  .marque-logo { width: 150px; height: 150px; }
  .marque-wordmark { font-size: 58px; }
  .marque-soustitre { font-size: 15px; }
  .marque-tagline { font-size: 19px; }
}

.connexion-formulaire-wrap {
  flex: 1 1 48%;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  background: var(--light-grey);
  padding: 64px 24px 40px;
}

/* En-tête officiel (République / Ministère de la Justice et des Droits de l'Homme), affiché ici
   juste au-dessus de la carte de connexion — la page de connexion, en mode "brute" (pageBrute,
   voir partials-head.ejs), n'affiche plus le bandeau institutionnel habituel en haut de toutes
   les pages, mais cette mention officielle doit rester présente. Mêmes textes que
   .bandeau-officiel / .entete-ministere, adaptés à cet emplacement plus étroit. */
.connexion-entete-officielle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 400px;
  width: 100%;
}
.connexion-entete-officielle-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.connexion-entete-officielle-texte { font-size: 11px; line-height: 1.35; color: var(--grey); text-align: left; }
.connexion-entete-officielle-texte strong { display: block; font-size: 12px; color: var(--vert-fonce); }
.connexion-lang-switch { position: absolute; top: 20px; right: 24px; display: flex; gap: 4px; }
.connexion-lang-switch a {
  color: var(--grey);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid #d8d8d8;
  background: #fff;
  opacity: 0.85;
}
.connexion-lang-switch a.actif { background: var(--vert); color: #fff; border-color: var(--vert); opacity: 1; }

.carte-connexion {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(10, 18, 38, 0.1);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.carte-connexion-icone {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vert-clair);
  color: var(--vert);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}
.carte-connexion h1 { font-size: 20px; color: var(--noir); margin: 0 0 10px; }
.carte-connexion-divider { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 14px; }
.carte-connexion-divider span { width: 22px; height: 2px; border-radius: 2px; background: var(--vert); display: block; }
.carte-connexion-divider i { width: 5px; height: 5px; border-radius: 50%; background: var(--vert); display: block; }
.carte-connexion-sous-titre { color: var(--grey); font-size: 13px; margin: 0 0 26px; }
.carte-connexion .erreur-inline { text-align: left; margin: 0 0 14px; }

.champ-groupe { text-align: left; margin-bottom: 16px; }
.champ-groupe label { display: block; font-size: 13px; color: var(--grey); font-weight: 600; margin-bottom: 5px; }
.champ-icone { position: relative; display: flex; align-items: center; }
.champ-icone-svg { position: absolute; left: 12px; color: var(--grey); pointer-events: none; }
.champ-icone input {
  width: 100%;
  padding: 10px 12px 10px 36px;
}
.champ-icone input#champ-mot-de-passe { padding-right: 38px; }
.btn-oeil {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--grey);
  display: flex;
}
.btn-oeil:hover { color: var(--vert); }

.ligne-souvenir {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--grey);
  font-weight: 400;
  text-align: left;
  margin: 2px 0 20px;
  cursor: pointer;
}
.ligne-souvenir input { margin: 0; }

.btn-connexion-principal {
  width: 100%;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--vert) 0%, var(--vert-fonce) 100%);
  box-shadow: 0 6px 16px rgba(4, 106, 56, 0.28);
}
.btn-connexion-principal:hover { background: linear-gradient(135deg, var(--vert-fonce) 0%, var(--vert-fonce) 100%); }

.connexion-footer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 24px 0 0;
  font-size: 11.5px;
  color: var(--grey);
}

@media (max-width: 860px) {
  /* .connexion-split repasse en une colonne (flex-wrap) à partir de cette largeur : la vague
     verticale et les découpes qui l'accompagnent n'ont alors plus de sens (les deux panneaux ne
     se touchent plus côte à côte) — panneaux redevenus de simples rectangles. */
  .marque-carte { min-height: 0; }
  .marque-carte-haut,
  .marque-carte-bas,
  .marque-vague { clip-path: none; }
  .marque-carte-haut { padding: 32px 24px 20px; }
  .marque-carte-bas { padding: 24px 24px 32px; }
  .connexion-formulaire-wrap { padding: 64px 20px 40px; }
}

/* Connexion OTP (views/connexion-otp.ejs) : bandeau visible uniquement en mode simulation SMS
   (aucun fournisseur réel configuré, voir src/sms.js) — affiche le code directement pour ne pas
   bloquer la démonstration faute de vrai téléphone. */
.note-simulation-otp {
  background: #fffdf5;
  border: 1px solid var(--jaune-fonce);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
}

.badge-role { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--vert-clair); color: var(--vert-fonce); margin: 2px 4px 2px 0; }

@media print {
  /* .bandeau-officiel est masqué à l'impression : l'ordre de paiement et le reçu ont déjà leur
     propre en-tête officiel imprimé (.entete-ministere, à l'intérieur du panneau imprimable) —
     sans quoi le logo apparaîtrait deux fois sur le document imprimé. */
  .topbar, .bandeau-officiel, .footer, .no-print { display: none !important; }
  .wrap { max-width: 100%; padding: 0; }
  .panel { border: none; }
}