/* ==========================================================================
   Compositions propres aux écrans du portail public.

   Ce fichier ne crée aucun composant : il assemble ceux de `composants.css`.
   Aucune valeur brute, tout vient de `jetons.css`.
   ========================================================================== */

/* Une seule feuille liee par la page, plus les jetons : chaque lien
   supplementaire est un aller-retour de plus avant le premier rendu. */
@import url("./composants.f3dcdecb1f08.css");

/* --------------------------------------------------------------------------
   Archivo, la famille unique de la charte Gabon Digital 2026.

   **Elle est servie par le dépôt, pas par Google Fonts.** Le handoff la charge
   depuis `fonts.googleapis.com` ; le portail ne charge aucune ressource de
   tiers, pour trois raisons qui tiennent toutes : deux allers-retours réseau
   de plus avant le premier rendu sur une connexion à cent kilobits par
   seconde, une adresse hors du contrôle de l'État sur chaque page d'un site
   officiel, et une dépendance qui ne s'inventorie pas.

   Le fichier est la version variable de Google Fonts, reprise sans
   modification, convertie de TrueType en WOFF2 : 658 Ko deviennent 189 Ko,
   soit quinze secondes gagnées à cent kilobits par seconde. La licence SIL
   Open Font 1.1 est déposée à côté, `static/polices/OFL-Archivo.txt`, et son
   inscription au registre des dépendances est demandée à `pgs-socle`.

   `font-display: swap` : le texte s'affiche immédiatement dans la grotesque du
   système et bascule sur Archivo quand elle arrive. C'est ce que `EXG-ERG-06`
   exige, une page utile avant la fin de son chargement, et c'est aussi ce qui
   rend le poids de la fonte supportable.

   Les deux axes variables sont déclarés : `wght` porte les graisses de la
   charte, de 300 à 900, et `wdth` porte l'étirement des titres d'affichage,
   108 % et 112 %. Sans la déclaration d'axe, le navigateur ignore
   `font-stretch` et les titres perdent leur largeur.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url("../polices/Archivo-Variable.86c3e29a5c6d.woff2") format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

.pgs-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.pgs-page__contenu { flex: 1; }

/* --------------------------------------------------------------------------
   Bandeau d'accueil. Charte Gabon Digital 2026.

   Fond profond, deux halos radiaux, deux colonnes qui se replient seules. Les
   halos sont des dégradés, jamais une image : mille pixels de côté coûteraient
   plus cher, sur une connexion à cent kilobits par seconde, que tout le reste
   de la page.
   -------------------------------------------------------------------------- */

.pgs-accroche {
  position: relative;
  overflow: hidden;
  background: var(--pgs-couleur-surface-profonde);
  color: var(--pgs-couleur-texte-sur-profond);
}

.pgs-accroche__halos {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(var(--pgs-halo-bleu-geometrie), var(--pgs-couleur-halo-bleu), transparent 60%),
    radial-gradient(var(--pgs-halo-vert-geometrie), var(--pgs-couleur-halo-vert), transparent 60%);
}

.pgs-accroche__interieur {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pgs-largeur-colonne-accroche)), 1fr));
  gap: var(--pgs-espace-3xl);
  align-items: center;
  padding-top: var(--pgs-espace-5xl);
  padding-bottom: var(--pgs-espace-4xl);
}

.pgs-accroche__principal {
  min-width: 0;
  animation: pgs-monte var(--pgs-duree-entree-longue) var(--pgs-courbe) both;
}

.pgs-accroche__complement {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pgs-espace-l);
  animation: pgs-monte var(--pgs-duree-entree-longue) var(--pgs-courbe) both;
}

.pgs-accroche__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pgs-espace-s);
  margin: 0;
  background: var(--pgs-couleur-voile-clair);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-clair);
  border-radius: var(--pgs-rayon-pastille);
  padding: var(--pgs-espace-xs) var(--pgs-espace-m);
  font-size: var(--pgs-taille-s);
  color: var(--pgs-couleur-texte-sur-profond-clair);
}

.pgs-accroche__pastille {
  width: var(--pgs-espace-s);
  height: var(--pgs-espace-s);
  border-radius: var(--pgs-rayon-plein);
  background: var(--pgs-couleur-drapeau-jaune);
  animation: pgs-battement 2s var(--pgs-courbe) infinite;
}

.pgs-accroche__titre {
  margin: var(--pgs-espace-xl) 0 var(--pgs-espace-l);
  font-family: var(--pgs-police-titre);
  font-size: var(--pgs-titre-accroche);
  font-weight: var(--pgs-graisse-affichage);
  font-stretch: var(--pgs-etirement-titre-large);
  line-height: var(--pgs-interligne-affichage);
  letter-spacing: var(--pgs-approche-affichage);
}

.pgs-accroche__accent { color: var(--pgs-couleur-drapeau-jaune); }

.pgs-accroche__resume {
  margin: 0 0 var(--pgs-espace-2xl);
  max-width: var(--pgs-largeur-lecture);
  font-size: var(--pgs-taille-xl);
  line-height: var(--pgs-interligne-texte);
  color: var(--pgs-couleur-texte-sur-profond-clair);
}

/* Les puces « Souvent recherché », posées sur le fond profond. */
.pgs-raccourcis--accroche {
  align-items: center;
  margin-top: var(--pgs-espace-l);
}

.pgs-raccourcis__intitule {
  font-size: var(--pgs-taille-s);
  color: var(--pgs-couleur-texte-sur-profond-attenue);
}

.pgs-raccourcis--accroche .pgs-raccourci {
  min-height: var(--pgs-cible-minimale);
  background: var(--pgs-couleur-voile-clair);
  border-color: var(--pgs-couleur-filet-clair);
  border-radius: var(--pgs-rayon-pastille);
  color: var(--pgs-couleur-texte-sur-profond);
  font-size: var(--pgs-taille-s);
}

.pgs-raccourcis--accroche .pgs-raccourci:hover {
  background: var(--pgs-couleur-surface-avertissement);
  color: var(--pgs-couleur-texte-avertissement);
}

/* --------------------------------------------------------------------------
   Carte « Suivre un dossier » et compteurs, colonne droite du bandeau
   -------------------------------------------------------------------------- */

.pgs-suivi-rapide {
  grid-column: 1 / -1;
  background: var(--pgs-couleur-voile-clair);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-clair);
  border-radius: var(--pgs-rayon-carte);
  padding: var(--pgs-espace-xl);
}

.pgs-suivi-rapide__intitule {
  display: flex;
  align-items: center;
  gap: var(--pgs-espace-s);
  margin: 0 0 var(--pgs-espace-l);
  font-size: var(--pgs-taille-l);
  font-weight: var(--pgs-graisse-forte);
}

.pgs-suivi-rapide__intitule .pgs-icone { color: var(--pgs-couleur-drapeau-jaune); }

.pgs-suivi-rapide__formulaire {
  display: flex;
  gap: var(--pgs-espace-s);
  flex-wrap: wrap;
}

.pgs-suivi-rapide__saisie {
  flex: 1 1 var(--pgs-largeur-colonne-minimale);
  min-width: 0;
  border: 0;
  outline: none;
  border-radius: var(--pgs-rayon-s);
  background: var(--pgs-couleur-surface);
  color: var(--pgs-couleur-texte);
  font-family: var(--pgs-police-texte);
  font-size: var(--pgs-taille-l);
  font-variant-numeric: tabular-nums;
  padding: var(--pgs-controle-y) var(--pgs-controle-x);
}

.pgs-suivi-rapide__mention {
  margin: var(--pgs-espace-m) 0 0;
  font-size: var(--pgs-taille-s);
  color: var(--pgs-couleur-texte-sur-profond-attenue);
}

.pgs-compteurs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pgs-espace-l);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pgs-compteur {
  background: var(--pgs-couleur-voile-clair);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-clair);
  border-radius: var(--pgs-rayon-carte);
  padding: var(--pgs-espace-xl);
}

.pgs-compteur__valeur {
  display: block;
  font-size: var(--pgs-titre-2);
  font-weight: var(--pgs-graisse-affichage);
  font-stretch: var(--pgs-etirement-titre);
  letter-spacing: var(--pgs-approche-titre);
  font-variant-numeric: tabular-nums;
}

.pgs-compteur__intitule {
  display: block;
  margin-top: var(--pgs-espace-2xs);
  font-size: var(--pgs-taille-s);
  line-height: var(--pgs-interligne-compact);
  color: var(--pgs-couleur-texte-sur-profond-clair);
}

/* Les mêmes compteurs, posés sur une surface claire : l'accueil connecté rend
   ainsi les deux chiffres mesurés par le domaine du pilotage, que le bandeau
   ne porte pas. Seules les deux encres changent. */
.pgs-compteurs--clair { grid-template-columns: 1fr; }

.pgs-compteurs--clair .pgs-compteur {
  background: var(--pgs-couleur-surface);
  border-color: var(--pgs-couleur-filet-carte);
}

.pgs-compteurs--clair .pgs-compteur__valeur { color: var(--pgs-couleur-texte); }
.pgs-compteurs--clair .pgs-compteur__intitule { color: var(--pgs-couleur-texte-attenue); }

/* `EXG-PIL-09` : la date à laquelle les chiffres publics sont arrêtés, sous la
   liste et non dans une case, pour qu'elle qualifie l'ensemble. */
.pgs-compteurs__fraicheur {
  margin: var(--pgs-espace-m) 0 0;
  font-size: var(--pgs-taille-s);
  color: var(--pgs-couleur-texte-attenue);
}

/* --------------------------------------------------------------------------
   Chapeau d'une section : sur-titre, titre, lien latéral
   -------------------------------------------------------------------------- */

.pgs-entete-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pgs-espace-xl);
  flex-wrap: wrap;
  margin-bottom: var(--pgs-espace-2xl);
}

.pgs-entete-section__texte { min-width: 0; }

.pgs-entete-section__titre,
.pgs-entete-section h2 {
  margin: 0;
  font-family: var(--pgs-police-titre);
  font-size: var(--pgs-titre-2);
  font-weight: var(--pgs-graisse-affichage);
  font-stretch: var(--pgs-etirement-titre);
  line-height: var(--pgs-interligne-titre);
  letter-spacing: var(--pgs-approche-titre);
}

.pgs-entete-section__mention {
  margin: 0;
  font-size: var(--pgs-taille-m);
  color: var(--pgs-couleur-texte-attenue);
}

.pgs-lien-section {
  display: inline-flex;
  align-items: center;
  gap: var(--pgs-espace-s);
  min-height: var(--pgs-cible-minimale);
  color: var(--pgs-couleur-texte-accent);
  font-size: var(--pgs-taille-l);
  font-weight: var(--pgs-graisse-forte);
  text-decoration: none;
}

.pgs-lien-section:hover { color: var(--pgs-couleur-accent-appuye); }

/* --------------------------------------------------------------------------
   Bandeau d'indisponibilité du dépôt. `EXG-POR-10`, `RG-POR-04`
   -------------------------------------------------------------------------- */

/* Même raison que `.pgs-annonce` : une bande pleine largeur prend la teinte
   pâle réservée aux grandes surfaces. */
.pgs-bandeau-service {
  background: var(--pgs-couleur-surface-jaune-pale);
  color: var(--pgs-couleur-texte-avertissement);
  border-bottom: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-appuye);
  padding-block: var(--pgs-espace-s);
}

.pgs-bandeau-service__interieur {
  display: flex;
  gap: var(--pgs-espace-s);
  flex-wrap: wrap;
  align-items: baseline;
}

/* --------------------------------------------------------------------------
   Accueil, charte Gabon Digital 2026.

   Sept compositions, dans l'ordre du handoff : les situations de vie, les
   démarches du moment en cartes pleines, le ruban des ministères, les quatre
   pas, les pages de référence, le pays, l'application mobile.
   -------------------------------------------------------------------------- */

/* Le rythme vertical des sections de l'accueil. Le handoff pose 72px de
   rembourrage haut sur la première et 56px sur les suivantes, et 24px de bas
   partout : les sections respirent par le haut, pas par le bas. */
.pgs-page__contenu .pgs-section {
  padding-top: var(--pgs-espace-4xl);
  padding-bottom: var(--pgs-espace-xl);
}

.pgs-page__contenu .pgs-section:first-child { padding-top: var(--pgs-espace-5xl); }
.pgs-page__contenu .pgs-section:last-of-type { padding-bottom: var(--pgs-espace-5xl); }

/* Les grilles de l'accueil. `auto-fill` et non `auto-fit` : `auto-fit` replie
   les colonnes vides et étire les cartes restantes, ce qui donnait deux cartes
   larges comme la page tant que le pilote n'en compte que deux. */
.pgs-grille--situations {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pgs-largeur-colonne-minimale)), 1fr));
  gap: var(--pgs-espace-l);
}

.pgs-grille--bento {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pgs-largeur-colonne-minimale)), 1fr));
  gap: var(--pgs-espace-l);
}

.pgs-grille--articles {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pgs-largeur-colonne-minimale)), 1fr));
  gap: var(--pgs-espace-l);
}

.pgs-grille--ministeres {
  grid-template-columns: repeat(auto-fill, minmax(var(--pgs-largeur-colonne-etroite), 1fr));
}

/* -- Situation de vie ----------------------------------------------------- */

.pgs-carte-situation {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-l);
  background: var(--pgs-couleur-surface);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-carte);
  border-radius: var(--pgs-rayon-carte);
  padding: var(--pgs-espace-xl);
  color: var(--pgs-couleur-texte);
  text-decoration: none;
  transition:
    transform var(--pgs-duree-moyenne) var(--pgs-courbe),
    box-shadow var(--pgs-duree-moyenne) var(--pgs-courbe),
    background var(--pgs-duree-moyenne) var(--pgs-courbe);
}

.pgs-carte-situation:hover {
  transform: translateY(var(--pgs-levee-survol));
  box-shadow: var(--pgs-ombre-survol);
  color: var(--pgs-couleur-texte);
}

.pgs-carte-situation__texte { min-width: 0; }

.pgs-carte-situation__libelle {
  display: block;
  font-size: var(--pgs-titre-4);
  font-weight: var(--pgs-graisse-forte);
  line-height: var(--pgs-interligne-compact);
}

.pgs-carte-situation__detail {
  display: block;
  margin-top: var(--pgs-espace-xs);
  font-size: var(--pgs-taille-m);
  line-height: var(--pgs-interligne-texte);
  color: var(--pgs-couleur-texte-attenue);
}

/* -- Démarche du moment, carte pleine -------------------------------------- */

.pgs-bento {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pgs-espace-2xl);
  min-height: var(--pgs-largeur-colonne-etroite);
  border-radius: var(--pgs-rayon-bloc);
  padding: var(--pgs-espace-2xl);
  text-decoration: none;
  transition:
    transform var(--pgs-duree-moyenne) var(--pgs-courbe),
    box-shadow var(--pgs-duree-moyenne) var(--pgs-courbe);
}

.pgs-bento:hover {
  transform: translateY(var(--pgs-levee-survol));
  box-shadow: var(--pgs-ombre-survol-appuyee);
}

/* Les quatre thèmes du handoff. Ils alternent avec le rang et ne disent rien
   de la démarche : c'est un rythme, pas une information. */
.pgs-bento--profond {
  background: var(--pgs-couleur-surface-profonde);
  color: var(--pgs-couleur-texte-sur-profond);
}

.pgs-bento--profond .pgs-bento__ministere,
.pgs-bento--profond .pgs-bento__fleche {
  background: var(--pgs-couleur-drapeau-jaune);
  color: var(--pgs-couleur-texte-avertissement);
}

.pgs-bento--clair {
  background: var(--pgs-couleur-surface);
  color: var(--pgs-couleur-texte);
}

.pgs-bento--clair .pgs-bento__ministere,
.pgs-bento--clair .pgs-bento__fleche {
  background: var(--pgs-couleur-surface-accent);
  color: var(--pgs-couleur-texte-accent);
}

.pgs-bento--information {
  background: var(--pgs-couleur-accent-bleu);
  color: var(--pgs-couleur-texte-sur-profond);
}

.pgs-bento--information .pgs-bento__ministere,
.pgs-bento--information .pgs-bento__fleche {
  background: var(--pgs-couleur-surface);
  color: var(--pgs-couleur-texte-information);
}

.pgs-bento--jaune {
  background: var(--pgs-couleur-surface-jaune);
  color: var(--pgs-couleur-texte);
}

.pgs-bento--jaune .pgs-bento__ministere,
.pgs-bento--jaune .pgs-bento__fleche {
  background: var(--pgs-couleur-texte);
  color: var(--pgs-couleur-surface);
}

.pgs-bento__ministere {
  display: inline-flex;
  border-radius: var(--pgs-rayon-pastille);
  padding: var(--pgs-espace-2xs) var(--pgs-espace-m);
  font-size: var(--pgs-taille-s);
  font-weight: var(--pgs-graisse-forte);
}

.pgs-bento__nom {
  display: block;
  margin-top: var(--pgs-espace-l);
  font-size: var(--pgs-titre-3);
  font-weight: var(--pgs-graisse-affichage);
  font-stretch: var(--pgs-etirement-titre);
  line-height: var(--pgs-interligne-compact);
  letter-spacing: var(--pgs-approche-titre);
}

.pgs-bento__bas {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pgs-espace-m);
}

.pgs-bento__prix { min-width: 0; }

.pgs-bento__cout {
  display: block;
  font-size: var(--pgs-titre-4);
  font-weight: var(--pgs-graisse-affichage);
  font-variant-numeric: tabular-nums;
}

.pgs-bento__mention {
  display: block;
  margin-top: var(--pgs-espace-3xs);
  font-size: var(--pgs-taille-s);
  opacity: .8;
}

.pgs-bento__fleche {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pgs-cible-minimale);
  height: var(--pgs-cible-minimale);
  border-radius: var(--pgs-rayon-plein);
}

/* -- Ruban des ministères -------------------------------------------------- */

.pgs-ruban { overflow: hidden; }

.pgs-ruban__piste {
  display: flex;
  width: max-content;
  gap: var(--pgs-espace-m);
  animation: pgs-defile var(--pgs-duree-ruban) linear infinite;
}

/* Une cible qui bouge ne se clique pas : le ruban s'arrête au survol et au
   focus clavier. C'est une obligation, pas un raffinement. */
.pgs-ruban__piste:hover,
.pgs-ruban__piste:focus-within { animation-play-state: paused; }

.pgs-ruban__liste {
  display: flex;
  gap: var(--pgs-espace-m);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pgs-pastille-ministere {
  display: flex;
  align-items: center;
  gap: var(--pgs-espace-m);
  background: var(--pgs-couleur-surface);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-carte);
  border-radius: var(--pgs-rayon-pastille);
  padding: var(--pgs-espace-s) var(--pgs-espace-xl) var(--pgs-espace-s) var(--pgs-espace-s);
  min-height: var(--pgs-cible-minimale);
  white-space: nowrap;
  color: var(--pgs-couleur-texte);
  text-decoration: none;
  transition: background var(--pgs-duree-courte) var(--pgs-courbe);
}

a.pgs-pastille-ministere:hover {
  background: var(--pgs-couleur-surface-survol);
  color: var(--pgs-couleur-texte);
}

.pgs-pastille-ministere__sigle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--pgs-espace-3xl);
  height: var(--pgs-espace-3xl);
  border-radius: var(--pgs-rayon-plein);
  background: var(--pgs-couleur-surface-accent);
  color: var(--pgs-couleur-texte-accent);
  font-size: var(--pgs-taille-s);
  font-weight: var(--pgs-graisse-affichage);
}

.pgs-pastille-ministere__libelle {
  font-size: var(--pgs-taille-l);
  font-weight: var(--pgs-graisse-moyenne);
}

/* -- Les quatre pas -------------------------------------------------------- */

.pgs-bloc-blanc {
  background: var(--pgs-couleur-surface);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-carte);
  border-radius: var(--pgs-rayon-carte-large);
  padding: var(--pgs-espace-3xl);
}

.pgs-etapes-numerotees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pgs-largeur-colonne-etroite)), 1fr));
  gap: var(--pgs-espace-2xl);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pgs-etape-numerotee { min-width: 0; }

.pgs-etape-numerotee__rang {
  display: flex;
  align-items: center;
  gap: var(--pgs-espace-m);
  margin-bottom: var(--pgs-espace-l);
}

.pgs-etape-numerotee__filet {
  flex: 1;
  height: var(--pgs-epaisseur-filet-appuye);
  background: linear-gradient(90deg, var(--pgs-couleur-texte-sur-marque), transparent);
}

.pgs-etape-numerotee__titre {
  display: block;
  margin-bottom: var(--pgs-espace-xs);
  font-size: var(--pgs-taille-xl);
  font-weight: var(--pgs-graisse-forte);
}

.pgs-etape-numerotee__texte {
  display: block;
  font-size: var(--pgs-taille-m);
  line-height: var(--pgs-interligne-texte);
  color: var(--pgs-couleur-texte-attenue);
}

/* -- Pages de référence ---------------------------------------------------- */

.pgs-carte-article {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-m);
  background: var(--pgs-couleur-surface);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-carte);
  border-radius: var(--pgs-rayon-carte);
  padding: var(--pgs-espace-xl);
  color: var(--pgs-couleur-texte);
  text-decoration: none;
  transition:
    transform var(--pgs-duree-moyenne) var(--pgs-courbe),
    box-shadow var(--pgs-duree-moyenne) var(--pgs-courbe);
}

.pgs-carte-article:hover {
  transform: translateY(var(--pgs-levee-survol));
  box-shadow: var(--pgs-ombre-survol);
  color: var(--pgs-couleur-texte);
}

.pgs-carte-article .pgs-sur-titre { margin: 0; }

.pgs-carte-article__titre {
  display: block;
  font-size: var(--pgs-titre-4);
  font-weight: var(--pgs-graisse-forte);
  line-height: var(--pgs-interligne-compact);
}

.pgs-carte-article__resume {
  display: block;
  font-size: var(--pgs-taille-m);
  line-height: var(--pgs-interligne-texte);
  color: var(--pgs-couleur-texte-attenue);
}

.pgs-carte-article__appel {
  display: block;
  margin-top: auto;
  font-size: var(--pgs-taille-m);
  font-weight: var(--pgs-graisse-forte);
  color: var(--pgs-couleur-texte-information);
}

/* -- Connaître le Gabon ---------------------------------------------------- */

.pgs-grille--pays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pgs-largeur-colonne-large)), 1fr));
  gap: var(--pgs-espace-l);
}

.pgs-carte-pays {
  position: relative;
  overflow: hidden;
  grid-column: span 2;
  min-width: 0;
  background: var(--pgs-couleur-accent);
  color: var(--pgs-couleur-texte-sur-accent);
  border-radius: var(--pgs-rayon-carte-large);
  padding: var(--pgs-espace-3xl);
}

.pgs-carte-pays__disque {
  position: absolute;
  right: calc(-1 * var(--pgs-espace-5xl));
  top: calc(-1 * var(--pgs-espace-5xl));
  width: calc(var(--pgs-espace-5xl) * 3);
  height: calc(var(--pgs-espace-5xl) * 3);
  border-radius: var(--pgs-rayon-plein);
  background: var(--pgs-couleur-halo-jaune);
}

.pgs-carte-pays__interieur { position: relative; }

.pgs-carte-pays__titre {
  margin: 0 0 var(--pgs-espace-l);
  font-family: var(--pgs-police-titre);
  font-size: var(--pgs-titre-2);
  font-weight: var(--pgs-graisse-affichage);
  font-stretch: var(--pgs-etirement-titre-large);
  line-height: var(--pgs-interligne-affichage);
  letter-spacing: var(--pgs-approche-affichage);
}

.pgs-carte-pays__texte {
  margin: 0 0 var(--pgs-espace-2xl);
  max-width: var(--pgs-largeur-lecture);
  font-size: var(--pgs-taille-l);
  line-height: var(--pgs-interligne-long);
  color: var(--pgs-couleur-accent-doux);
}

.pgs-carte-pays .pgs-bouton { border-radius: var(--pgs-rayon-pastille); }

/* La liste des repères n'ajoute aucune boîte : ses trois éléments sont des
   enfants directs de la grille du pays, comme dans le handoff. Le gabarit
   rétablit `role="list"`, que `display: contents` retire dans plusieurs
   navigateurs. */
.pgs-liste-effacee {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pgs-repere {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-s);
  background: var(--pgs-couleur-surface);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-carte);
  border-radius: var(--pgs-rayon-bloc);
  padding: var(--pgs-espace-2xl);
}

.pgs-repere__valeur {
  font-size: var(--pgs-titre-3);
  font-weight: var(--pgs-graisse-affichage);
  font-stretch: var(--pgs-etirement-titre);
  letter-spacing: var(--pgs-approche-titre);
  font-variant-numeric: tabular-nums;
}

.pgs-repere__titre {
  font-size: var(--pgs-taille-l);
  font-weight: var(--pgs-graisse-forte);
}

.pgs-repere__texte {
  font-size: var(--pgs-taille-m);
  line-height: var(--pgs-interligne-texte);
  color: var(--pgs-couleur-texte-attenue);
}

/* -- Application mobile ---------------------------------------------------- */

.pgs-promotion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pgs-largeur-colonne-large)), 1fr));
  gap: var(--pgs-espace-2xl);
  align-items: center;
  background: var(--pgs-couleur-surface-encre);
  color: var(--pgs-couleur-texte-sur-profond);
  border-radius: var(--pgs-rayon-carte-large);
  padding: var(--pgs-espace-3xl);
}

.pgs-promotion__texte { min-width: 0; }

.pgs-promotion__titre {
  margin: 0 0 var(--pgs-espace-l);
  font-family: var(--pgs-police-titre);
  font-size: var(--pgs-titre-2);
  font-weight: var(--pgs-graisse-affichage);
  font-stretch: var(--pgs-etirement-titre);
  line-height: var(--pgs-interligne-titre);
  letter-spacing: var(--pgs-approche-titre);
}

.pgs-promotion__resume {
  margin: 0 0 var(--pgs-espace-xl);
  font-size: var(--pgs-taille-l);
  line-height: var(--pgs-interligne-long);
  color: var(--pgs-couleur-texte-sur-profond-clair);
}

.pgs-promotion__actions {
  display: flex;
  gap: var(--pgs-espace-m);
  flex-wrap: wrap;
  align-items: center;
}

.pgs-promotion__code {
  display: flex;
  gap: var(--pgs-espace-l);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.pgs-promotion__image {
  width: var(--pgs-largeur-colonne-etroite);
  height: auto;
  background: var(--pgs-couleur-surface);
  border-radius: var(--pgs-rayon-l);
  padding: var(--pgs-espace-l);
}

.pgs-promotion__mention {
  margin: 0;
  max-width: var(--pgs-largeur-panneau);
  font-size: var(--pgs-taille-m);
  line-height: var(--pgs-interligne-texte);
  color: var(--pgs-couleur-texte-sur-profond-clair);
}

/* --------------------------------------------------------------------------
   Bande éditoriale de l'accueil connecté
   -------------------------------------------------------------------------- */

.pgs-bande-editoriale {
  background: var(--pgs-couleur-surface-attenuee);
  border-top: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet);
  padding-block: var(--pgs-espace-3xl);
}

.pgs-bande-editoriale__colonnes {
  display: grid;
  gap: var(--pgs-espace-2xl);
  grid-template-columns: repeat(auto-fit, minmax(var(--pgs-largeur-panneau), 1fr));
  align-items: start;
}

.pgs-programme__titre {
  margin: 0 0 var(--pgs-espace-s);
  font-family: var(--pgs-police-titre);
  font-size: var(--pgs-titre-4);
  line-height: var(--pgs-interligne-titre);
}

.pgs-colonne-editoriale__titre {
  margin: 0 0 var(--pgs-espace-l);
  font-family: var(--pgs-police-texte);
  font-size: var(--pgs-taille-xs);
  font-weight: var(--pgs-graisse-forte);
  letter-spacing: var(--pgs-approche-capitale-large);
  text-transform: uppercase;
  color: var(--pgs-couleur-texte-attenue);
}

/* ==========================================================================
   Les six écrans intérieurs, charte Gabon Digital 2026.

   Écrans 3, 5, 6, 7, 8, 9 et 10 du handoff. Ce bloc n'invente aucun composant :
   il pose la largeur, la grille et le rythme de chaque écran, et rien d'autre.
   ========================================================================== */

/* -- Écran 3, catalogue ---------------------------------------------------- */

/* La grille du catalogue. `auto-fill` et non `auto-fit`, pour la même raison
   que sur l'accueil : deux fiches publiées ne doivent pas s'étirer sur toute
   la largeur de l'écran. */
.pgs-grille--catalogue {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pgs-largeur-colonne-large)), 1fr));
  gap: var(--pgs-espace-l);
}

/* La barre de recherche du catalogue partage la ligne avec le filtre retenu :
   le handoff pose le champ en `flex:1 1 360px` et la pastille à sa droite. */
.pgs-barre-de-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pgs-espace-m);
  margin-bottom: var(--pgs-espace-l);
}

.pgs-barre-de-tete > [data-bloc="recherche"] {
  flex: 1 1 var(--pgs-largeur-colonne-large);
  min-width: 0;
}

/* Les trois modes de navigation, en rangées de pastilles. `EXG-POR-02` en
   demande trois ; le handoff n'en dessine qu'un, celui des ministères. Les
   trois sont donc rendus dans la même forme, et l'écart est signalé. */
/* Décision du commanditaire, 27 septembre 2026 : « mettre de l'espace et bien
   aligner les composants ». Trois respirations manquaient sur cet écran, et
   les trois se voyaient sur sa capture : la grille des ministères touchait la
   barre de recherche au-dessus et l'intitulé « CHOISIR UNE ENTRÉE » au-dessous,
   et chaque intitulé de mode était collé à sa rangée de pastilles. */
[data-bloc="ministeres"] {
  margin-block: var(--pgs-espace-2xl) var(--pgs-espace-3xl);
}

.pgs-modes { display: flex; flex-direction: column; gap: var(--pgs-espace-2xl); }

.pgs-mode {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-s);
}

.pgs-mode__intitule {
  margin: 0;
  font-size: var(--pgs-taille-xs);
  font-weight: var(--pgs-graisse-forte);
  letter-spacing: var(--pgs-approche-capitale-large);
  text-transform: uppercase;
  color: var(--pgs-couleur-texte-attenue);
}

.pgs-modes .pgs-onglets { margin-bottom: 0; }

/* -- Écran 5, fiche de démarche -------------------------------------------- */

/* Deux colonnes, la principale valant deux fois la seconde, comme le handoff,
   et l'encadré collant sous l'en-tête. */
.pgs-colonnes-fiche {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--pgs-espace-2xl);
  align-items: start;
}

.pgs-colonnes-fiche__principal {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-l);
  min-width: 0;
}

.pgs-colonnes-fiche__panneau {
  position: sticky;
  top: var(--pgs-decalage-collant);
  min-width: 0;
}

.pgs-colonnes-fiche__panneau > * + * { margin-top: var(--pgs-espace-l); }

/* Les blocs blancs de la colonne principale. */
.pgs-bloc-blanc__titre {
  margin: 0 0 var(--pgs-espace-m);
  font-family: var(--pgs-police-titre);
  font-size: var(--pgs-titre-3);
  font-weight: var(--pgs-graisse-affichage);
  line-height: var(--pgs-interligne-titre);
}

.pgs-bloc-blanc > * + .pgs-bloc-blanc__titre { margin-top: var(--pgs-espace-2xl); }

.pgs-bloc-blanc__texte {
  margin: 0;
  font-size: var(--pgs-taille-l);
  line-height: var(--pgs-interligne-long);
  color: var(--pgs-couleur-texte-appuye);
}

/* -- Écran 6, dépôt -------------------------------------------------------- */

/* Le handoff borne la colonne de dépôt à 880px : au-delà, une ligne de saisie
   devient plus large que ce qu'un œil suit sans perdre son début. */
.pgs-colonne-depot {
  max-width: var(--pgs-largeur-depot);
  margin-inline: auto;
}

/* -- Écran 7, suivi d'un dossier ------------------------------------------- */

.pgs-suivi { max-width: var(--pgs-largeur-lecture); }

.pgs-suivi__resultat {
  background: var(--pgs-couleur-surface);
  border: var(--pgs-epaisseur-filet) solid var(--pgs-couleur-filet-carte);
  border-radius: var(--pgs-rayon-bloc);
  padding: var(--pgs-espace-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-2xl);
}

.pgs-suivi__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--pgs-espace-l);
}

.pgs-suivi__reference {
  margin: 0;
  font-size: var(--pgs-taille-m);
  color: var(--pgs-couleur-texte-attenue);
  font-variant-numeric: tabular-nums;
}

.pgs-suivi__titre {
  margin: var(--pgs-espace-xs) 0 0;
  font-family: var(--pgs-police-texte);
  font-size: var(--pgs-titre-3);
  font-weight: var(--pgs-graisse-affichage);
  line-height: var(--pgs-interligne-compact);
}

.pgs-suivi__note {
  margin: 0;
  background: var(--pgs-couleur-surface-attenuee);
  border-radius: var(--pgs-rayon-l);
  padding: var(--pgs-espace-l);
  font-size: var(--pgs-taille-l);
  line-height: var(--pgs-interligne-texte);
}

.pgs-suivi__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pgs-espace-2xl);
  margin: 0;
  font-size: var(--pgs-taille-m);
  color: var(--pgs-couleur-texte-attenue);
  font-variant-numeric: tabular-nums;
}

/* -- Écran 8, page d'information ------------------------------------------- */

.pgs-article { max-width: var(--pgs-largeur-lecture); }

.pgs-article__sections {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-l);
  margin-bottom: var(--pgs-espace-3xl);
}

.pgs-article__rubrique {
  margin: 0;
  font-size: var(--pgs-taille-xs);
  font-weight: var(--pgs-graisse-forte);
  letter-spacing: var(--pgs-approche-capitale-large);
  text-transform: uppercase;
  color: var(--pgs-couleur-texte-attenue);
}

.pgs-grille--lire-aussi {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--pgs-largeur-colonne-etroite)), 1fr));
  gap: var(--pgs-espace-m);
  margin-top: var(--pgs-espace-m);
}

/* -- Écran 9, espace usager et centre d'aide ------------------------------- */

.pgs-grille--dossiers {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pgs-largeur-colonne-large)), 1fr));
  gap: var(--pgs-espace-l);
}

.pgs-aides {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-m);
}

/* -- Écran 10, fenêtre de connexion ---------------------------------------- */

/* La fenêtre rendue en page occupe la hauteur laissée par l'en-tête et le
   pied, et non la fenêtre entière : `100vh` pousserait le pied hors de vue et
   les liens légaux de `EXG-POR-08` deviendraient inatteignables. Elle en prend
   assez pour que le voile se lise comme un voile et non comme une bande. */
.pgs-page__contenu > .pgs-voile[data-voile="pose"] {
  min-height: 60vh;
  padding-block: var(--pgs-espace-4xl);
}

.pgs-acces-au-compte {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-l);
}

.pgs-acces-au-compte__actions {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-s);
}

.pgs-acces-au-compte__texte {
  margin: 0;
  font-size: var(--pgs-taille-m);
  line-height: var(--pgs-interligne-texte);
  color: var(--pgs-couleur-texte-appuye);
}

/* -- Écran 10, les deux formulaires de compte, `D-61` ---------------------- */

/* La pile de la fenêtre : les champs, le bouton plein, la ligne de bascule.
   L'espacement est celui du handoff, `gap:16px` pour la connexion et `14px`
   pour la création ; le jeton commun est retenu, l'écart de deux pixels entre
   les deux vues d'une même fenêtre n'étant pas une intention de charte. */
.pgs-formulaire-de-compte {
  display: flex;
  flex-direction: column;
  gap: var(--pgs-espace-l);
}

/* L'intitulé de section, en capitales vertes. Handoff : 13px, 700, `.1em`. */
.pgs-formulaire-de-compte__section {
  margin: var(--pgs-espace-xs) 0 0;
  font-size: var(--pgs-taille-xs);
  font-weight: var(--pgs-graisse-forte);
  letter-spacing: var(--pgs-approche-capitale-moyenne);
  text-transform: uppercase;
  color: var(--pgs-couleur-texte-accent);
}

/* La grille de deux colonnes qui se replie sur une seule. `auto-fit` et non
   `auto-fill` : le handoff étire le champ restant sur toute la largeur quand
   il est seul sur sa ligne, au lieu de laisser une colonne vide. */
.pgs-formulaire-de-compte__grille {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--pgs-largeur-colonne-compacte)), 1fr)
  );
  gap: var(--pgs-espace-m);
}

/* « Pas encore de compte ? Créer un compte » et sa symétrique. */
.pgs-formulaire-de-compte__bascule {
  margin: 0;
  font-size: var(--pgs-taille-m);
  color: var(--pgs-couleur-texte-attenue);
}

/* Le second formulaire de l'écran de vérification : le renvoi du code. Il est
   frère du premier et non imbriqué, ce que le HTML interdirait, et il se colle
   à lui : deux blocs séparés par l'espacement de la pile donneraient à lire
   deux actions sans rapport, alors que la seconde sert la première. */
.pgs-formulaire-de-compte__renvoi {
  margin-top: calc(-1 * var(--pgs-espace-s));
}

/* --------------------------------------------------------------------------
   Avis fugace. Le portail n'en avait pas ; le back-office en a un depuis le
   bloc C, et il se présente de la même façon, sur les mêmes jetons. Il double
   un message déjà rendu dans la page : sans script, la page reste complète, et
   il ne porte jamais seul une information.

   `position: fixed` et non `sticky` : l'avis ne doit pas décaler le contenu de
   la page à son arrivée, un décalage sous le doigt faisant manquer la cible
   que l'usager visait.
   -------------------------------------------------------------------------- */

.pgs-avis {
  position: fixed;
  left: 50%;
  bottom: var(--pgs-espace-xl);
  transform: translateX(-50%);
  z-index: 80;
  max-width: var(--pgs-largeur-lecture);
  display: flex;
  gap: var(--pgs-espace-s);
  align-items: baseline;
  margin: 0;
  background: var(--pgs-couleur-texte);
  color: var(--pgs-couleur-fond);
  border-radius: var(--pgs-rayon-m);
  padding: var(--pgs-espace-m) var(--pgs-espace-l);
  box-shadow: var(--pgs-ombre-flottante);
}

/* Le lien de suite, sur fond sombre : la couleur du texte courant, soulignée.
   Le bleu d'accent du portail ne tient pas son contraste sur l'encre. */
.pgs-avis a {
  color: inherit;
  text-decoration: underline;
}

/* Le lien bleu appuyé du handoff, à l'intérieur d'une phrase grise. */
.pgs-lien-fort {
  color: var(--pgs-couleur-accent-bleu);
  font-weight: var(--pgs-graisse-forte);
}

/* --------------------------------------------------------------------------
   Mouvements. Trois animations, toutes des agréments.

   `prefers-reduced-motion` les retire toutes les trois : le ruban s'immobilise
   sur sa première copie, l'entrée d'écran est immédiate, la pastille du badge
   cesse de battre. Rien n'est perdu, parce qu'aucune n'a jamais rien porté.
   -------------------------------------------------------------------------- */

@keyframes pgs-monte {
  from { opacity: 0; transform: translateY(var(--pgs-decalage-entree)); }
  to { opacity: 1; transform: none; }
}

@keyframes pgs-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes pgs-battement {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.pgs-entree { animation: pgs-monte var(--pgs-duree-entree) var(--pgs-courbe) both; }

@media (prefers-reduced-motion: reduce) {
  .pgs-accroche__principal,
  .pgs-accroche__complement,
  .pgs-accroche__pastille,
  .pgs-ruban__piste,
  .pgs-entree {
    animation: none;
  }
  .pgs-carte-situation:hover,
  .pgs-carte-article:hover,
  .pgs-bento:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Petit écran. `EXG-POR-07`, `EXG-ERG-02`
   Littéraux repris des jetons --pgs-rupture-*.
   -------------------------------------------------------------------------- */

/* --pgs-rupture-tablette : 768px */
  .pgs-accroche__interieur { gap: var(--pgs-espace-xl); }
}

/* --pgs-rupture-portable : 1024px. La fiche repasse sur une colonne avant que
   l'encadré ne devienne trop étroit pour porter son bouton d'une seule ligne.
   L'encadré cesse alors d'être collant : collé sur un écran de poche, il
   occuperait la moitié de la hauteur utile. */
@media (max-width: 1024px) {
  .pgs-colonnes-fiche { grid-template-columns: 1fr; }
  .pgs-colonnes-fiche__panneau { position: static; }
}

/* --pgs-rupture-poche : 480px */
@media (max-width: 480px) {
  .pgs-suivi__resultat { padding: var(--pgs-espace-xl); }
  .pgs-aide--carte { padding: var(--pgs-espace-xl); }
  .pgs-modale__entete { padding: var(--pgs-espace-l) var(--pgs-espace-l) 0; }
  .pgs-modale__corps { padding: var(--pgs-espace-l); }
  .pgs-voile[data-voile="pose"] { padding: var(--pgs-espace-s); }
  .pgs-compteurs { grid-template-columns: 1fr; }
  .pgs-bloc-blanc { padding: var(--pgs-espace-xl); }
  .pgs-carte-pays,
  .pgs-promotion { padding: var(--pgs-espace-xl); }
  /* L'avis occupe la largeur de l'écran moins ses marges : centré sur 50 %,
     il déborderait à droite sur une poche. */
  .pgs-avis { left: var(--pgs-espace-s); right: var(--pgs-espace-s); transform: none; }
}

/* --pgs-rupture-tablette : 768px. La carte du pays cesse d'occuper deux
   colonnes : sur un écran étroit il n'y en a plus qu'une. */
@media (max-width: 768px) {
  .pgs-carte-pays { grid-column: span 1; }
  .pgs-bande-editoriale__colonnes { grid-template-columns: 1fr; }
  .pgs-accroche__interieur {
    padding-top: var(--pgs-espace-3xl);
    padding-bottom: var(--pgs-espace-2xl);
  }
}